{"html":"<div id=\"{{uc_id}}\">\n  {% if title_postion == \"above\" %}<div class=\"ue_progress_title\">{{title|raw}}<\/div>{% endif %}\n  <div class=\"uc_circular-bar\">\n\t<input style=\"display:none;\" type=\"text\" class=\"uc_dial\" data-fgColor=\"{{figure_color}}\" data-bgColor=\"{{background_border_color}}\" data-width=\"{{circle_size}}\" data-height=\"{{circle_size}}\" value=\"{{value}}\" data-linecap=\"round\" >\n\t<div class=\"uc_circular-bar-content\">\n        {% if show_icon == \"true\" %}\n            <div class=\"ue_bar_icon\">{{icon_html|raw}}<\/div>  \n        {% endif %}\t \n\t\t{% if title_postion == \"inside\" %}<div class=\"ue_progress_title\">{{title|raw}}<\/div>{% endif %}\n\t\t<label><\/label>\n        {% if title_postion == \"below_value\" %}<div class=\"ue_progress_title\">{{title|raw}}<\/div>{% endif %}\n\t<\/div>\n  <\/div>\n  {% if title_postion == \"below\" %}<div class=\"ue_progress_title\">{{title|raw}}<\/div>{% endif %}\n<\/div>","css":"#{{uc_id}}{\n  min-height:1px;\n  box-sizing:border-box;\n}\n#{{uc_id}} .uc_circular-bar{\n\twidth: {{circle_size}}px;\n\theight: auto;\n}\n#{{uc_id}} .uc_circular-bar . ue_progress_title {\n\tdisplay: block;\n}\n{% if show_icon == \"true\" %}\n#{{uc_id}} .ue_bar_icon svg{\n  width:1em;\n  height:1em;\n}\n{% endif %}\n\n{% if (alignment == \"left\") and (show_title == \"true\") %}\n #{{uc_id}} .ue_progress_title{\n\ttext-align: left;\n }\n {% endif %}\n {% if (alignment == \"right\") and (show_title == \"true\") %}\n #{{uc_id}} .ue_progress_title{\n   text-align: right;\n }\n {% endif %}\n {% if (alignment == \"none\") and (show_title == \"true\") %}\n #{{uc_id}} .ue_progress_title{\n   text-align: center;\n }\n {% endif %}","js":"jQuery(document).ready(function(){\t\nfunction {{uc_id}}_start(){\n  \n  var objBar = jQuery(\"#{{uc_id}} .uc_circular-bar\");\n  var isVisible = isElementInViewport(objBar);\n  var objParentTempalteSwitcher = objBar.parents(\".uc-template-holder\");\n  var isInsideTemplateSwitcher = objParentTempalteSwitcher && objParentTempalteSwitcher.length > 0;\n  var objParentSimplePopup = objBar.parents(\".ue-simple-popup\");\n  var isInsideSimplePopup = objParentSimplePopup && objParentSimplePopup.length > 0;\n  \n  \/**\n  * start function\n  *\/\n  function startBar(){\n  \n    jQuery(\"#{{uc_id}} .uc_dial\").each(function () { \n\n      var elm = jQuery(this);\n      var color = elm.attr(\"data-fgColor\");  \n      var perc = elm.attr(\"value\");  \n\n      elm.knob({\n          'value': 0, \n          'min':0,\n          'max':100,\n          \"skin\":\"tron\",\n          \"readOnly\":true,\n          \"thickness\":{% if border_thickness != \"custom\" %}{{border_thickness}}{% else %}{{custom_progress_bar_thickness_nounit\/100}}{% endif %},\n          'dynamicDraw': true,\n          \"displayInput\":false,\n          \"lineCap\": \"{{progress_cap}}\",\n      });\n\n      jQuery({value: 0}).animate({ value: perc }, {\n          duration: 2000,\n          easing: 'swing',\n          progress: function () {                  \n          elm.val(Math.ceil(this.value)).trigger('change');\n          }\n      });\n\n      \/\/circular progress bar color\n      jQuery(this).append(function() {\n          elm.parent().parent().find('.uc_circular-bar-content').css('color',color);\n          elm.parent().parent().find('.uc_circular-bar-content label').text(perc+'%');\n      });\n    });    \n  } \n  \n  \/**\n  * checks if in viewport\n  *\/\n  function isElementInViewport(objElement) {\t\t  \n  \tvar elementTop = objElement.offset().top;\n\tvar elementBottom = elementTop + objElement.outerHeight();\n\n\tvar viewportTop = jQuery(window).scrollTop();\n\tvar viewportBottom = viewportTop + jQuery(window).height();\n\n\treturn (elementBottom > viewportTop && elementTop < viewportBottom);\n  } \n  \n  \/**\n  * init for simple popup\n  *\/\n  function initForSimplePopup(){\n    if(isInsideSimplePopup == false)\n      return(false);\n    \n    var objSimplePopupBtn = objParentSimplePopup.find(\".ue-simple-popup-trigger\");\n    \n    objSimplePopupBtn.on(\"click\", function(){\n           var isInited = objBar.data(\"inited\");\n          \tif(isInited == true)\n              return(true);\n                \n           var isVisible = isElementInViewport(objBar);\n           if(isVisible){\n               objBar.data(\"inited\", true);\n              startBar();\n           }   \n    });\n  }\n  \n  if(isVisible == true && isInsideSimplePopup == false || isInsideTemplateSwitcher == true && isInsideSimplePopup == false )\n     startBar();\n  else{\n  \tjQuery(window).on(\"scroll\",function(){\n        var isInited = objBar.data(\"inited\");\n        if(isInited == true)\n        \treturn(true);\n            \n        if(isInsideSimplePopup == true)\n         return(true);\n      \n        var isVisible = isElementInViewport(objBar);\n        if(isVisible){\n        \tobjBar.data(\"inited\", true);\n            startBar();\n    \t}            \n  \t});\n  }\n  \n  initForSimplePopup();\n    \n }if(jQuery(\"#{{uc_id}}\").length) {{uc_id}}_start(); else\n\tjQuery( document ).on( 'elementor\/popup\/show', () => { if(jQuery(\"#{{uc_id}}\").length) {{uc_id}}_start();});\n});"}