Spade

Mini Shell

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

[Home] [System Details] [Kill Me]
Current File:~$ /home/lmsyaran/www/j3/templates/g5_hydrogen/custom/particles/animated-counter.html.twig

{% 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 timerid = random() %}

{% 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-animated-counter {{
particle.style|default("style1")|e }}{% 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">
			{% 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 %}
				<div class="g-block g-animated-counter-item{% if item.class %}
{{ item.class|e }}{% endif %}" {% if item.extra %}{{
attr_extra_item|raw }}{% endif %}>
					<div class="g-content">
						{% if item.icon and item.image == false %}
							<span class="g-animated-counter-icon {{ item.icon|e
}}"></span>
						{% endif %}

						{% if item.image %}
							<div class="g-animated-counter-image">
								<img alt="{{ item.title|raw }}" src="{{
url(item.image) }}" {{ particle.image|imagesize|raw }}>
							</div>
						{% endif %}

						<h4 class="g-animated-counter-number timer_{{ timerid
}}" data-from="{{ item.fromnumber|default('0')|e
}}" data-to="{{ item.tonumber|default('100')|e }}"
data-speed="{{ item.duration|default('1000')|e }}"
data-refresh-interval="{{ item.refresh|default('100')|e
}}" data-decimals="{{ item.decimal|default('0')|e
}}"></h4>

						{% if item.title %}
							<h4 class="g-animated-counter-title">
								{{- item.title|e -}}
							</h4>
						{% endif %}
					</div>
				</div>
			{% endfor %}
		</div>
	</div>
{% endblock %}

{% block javascript_footer %}
	{% do gantry.load('jquery') %}
	{{ parent() }}
	<script type="text/javascript" src="{{
url('gantry-theme://js/jquery.countTo.js')
}}"></script>
	<script type="text/javascript" src="{{
url('gantry-theme://js/jquery.waypoints.min.js')
}}"></script>
	<script type="text/javascript">
		jQuery('.timer_{{ timerid }}').waypoint(function() {
			jQuery('.timer_{{ timerid }}').countTo({
				{% if particle.commas|default(0) == 1 %}
					formatter: function (value, options) {
						return
value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g,
',');
					}
				{% endif %}
			});
			this.destroy();
		}, {offset: "bottom-in-view"});
	</script>
{% endblock %}