Directory:~$ /home/lmsyaran/www/templates/g5_hydrogen/custom/particles/

Upload File

[Home] [System Details] [Kill Me]

{% extends '@nucleus/partials/particle.html.twig' %}

{% set attr_extra = '' %}
{% if particle.extra %}
	{% for attributes in particle.extra %}
		{% for key, value in attributes %}
			{% set attr_extra = attr_extra ~ ' ' ~ key|e ~
'="' ~ value|e('html_attr') ~ '"'
%}
		{% endfor %}
	{% endfor %}
{% endif %}

{% set containerid = random() %}
{% set class_number = 0 %}

{% set particleheading %}
	<div class="g-particle-intro">
		{% if particle.mainheading %}
			<h3 class="g-title g-main-title">{{
particle.mainheading|raw }}</h3>
			<div class="g-title-separator {% if particle.introtext == false
%}no-intro-text{% endif %}"></div>
		{% endif %}	
		{% if particle.introtext %}<p class="g-introtext">{{
particle.introtext|raw }}</p>{% endif %}
	</div>
{% endset %}

{% block particle %}
	<div class="g-circle-progress{% if particle.css.class %} {{
particle.css.class|e }}{% endif %}" {% if particle.extra %}{{
attr_extra|raw }}{% endif %}>
		{% if particle.mainheading or particle.introtext %}
			{{ particleheading }}
		{% endif %}
		<div class="g-grid g-circle-progress-{{ containerid }}">
			{% for item in particle.items %}
				{% set attr_extra_item = '' %}
				{% for extra in item.extra %}
					{% set attr_extra_item = attr_extra_item ~ ' ' ~
extra|keys|first|e ~ '="' ~
extra|values|first|e('html_attr') ~ '"' %}
				{% endfor %}

				{% set class_number = class_number + 1 %}

				<div class="g-block g-circle-progress-item{% if item.class %}
{{ item.class|e }}{% endif %}" {% if item.extra %}{{
attr_extra_item|raw }}{% endif %}>
					<div class="g-content">
						<div class="circle-container" style="height: {{
item.size|default('100')|e }}px;">
							<div class="item-{{ class_number }} circle">
								<div
class="g-circle-progress-percentage"></div>
							</div>
						</div>

						{% if item.title %}
							<h4 class="g-circle-progress-title">
								{{- item.title|raw -}}
							</h4>
						{% endif %}

						{% if item.description %}
							<div class="g-circle-progress-desc">
								{{- item.description|raw -}}
							</div>
						{% endif %}
					</div>
				</div>
			{% endfor %}
		</div>
	</div>
{% endblock %}

{% block javascript_footer %}
	{% do gantry.load('jquery') %}
	{{ parent() }}
	<script type="text/javascript" src="{{
url('gantry-theme://js/circle-progress.min.js')
}}"></script>
	<script type="text/javascript" src="{{
url('gantry-theme://js/jquery.waypoints.min.js')
}}"></script>
	<script type="text/javascript">
		(function($){
			$(document).ready(function(){

				{% for item in particle.items %}

					{% set class_number = class_number + 1 %}

					{% if particle.animation|default("onload") ==
"onload" %}
						$('.g-circle-progress-{{ containerid }} .item-{{ class_number
}}.circle').circleProgress({
							value: {{ item.value|default('0.8')|e }},
							size: {{ item.size|default('100')|e }},
							startAngle: -Math.PI / 2,
							lineCap: 'round',
							thickness: '{{ item.thickness|default('auto')|e
}}',
							emptyFill: '{{ item.emptyfill|default('rgba(0, 0, 0,
0.1)')|e }}',
							fill: {
								gradient: ["{{ item.color1|default('#3aeabb')|e
}}", "{{ item.color2|default('#fdd250')|e }}"],
gradientAngle: -Math.PI / 2
							}
						}).on('circle-animation-progress', function(event,
progress, stepValue) {
							$(this).children('.g-circle-progress-percentage').html(((100
* stepValue).toFixed(0)) + '<span>%</span>');
						});
					{% else %}
						var circles = $('.g-circle-progress-{{ containerid }}
.circle');

						circles.waypoint({
							handler: function() {
								var circle = $('.g-circle-progress-{{ containerid }} .item-{{
class_number }}.circle');
								if (!circle.data('inited')) {
									circle.circleProgress({
										value: {{ item.value|default('0.8')|e }},
										size: {{ item.size|default('100')|e }},
										startAngle: -Math.PI / 2,
										lineCap: 'round',
										thickness: '{{ item.thickness|default('auto')|e
}}',
										emptyFill: '{{ item.emptyfill|default('rgba(0, 0, 0,
0.1)')|e }}',
										fill: {
											gradient: ["{{ item.color1|default('#3aeabb')|e
}}", "{{ item.color2|default('#fdd250')|e }}"],
gradientAngle: -Math.PI / 2
										}
									}).on('circle-animation-progress', function(event,
progress, stepValue) {
										$(this).children('.g-circle-progress-percentage').html(((100
* stepValue).toFixed(0)) + '<span>%</span>');
									});
									circle.data('inited', true);
								}
							},
							offset: 'bottom-in-view'
						});
					{% endif %}
				{% endfor %}
			});
		})(jQuery);
	</script>
{% endblock %}