No notes defined.
<div class="bcee-mia-animation progress-animation is-animated">
<div class="bcee-finances-card bcee-finances-card-truncate cat-mobilite-color static" data-amount="1062.50" data-increment="25" data-duration="1000" data-delay="500">
<div class="finances-icon-container">
<div class="bcee-icon finances-icon bcee-cat-mobilite">
<span class="sds-icon sds-icon-car"></span>
</div>
</div>
<div class="finances-info">
<div class="finances-text ">
<div class="bcee-format-amount extra-large dark sds-amount -amountXxl sds-textSemiBold">
<span class="amount-value">0,00</span>
<span class="amount-currency">€</span>
</div>
</div>
<div class="finances-bar-container">
<div class="bcee-progress-bar">
<div class="progress-bar-progression" style="width: 85%;"></div>
</div>
</div>
</div>
</div>
<div class="bcee-finances-card bcee-finances-card-truncate cat-shopping-color static" data-amount="336" data-increment="12" data-duration="1000" data-delay="2000">
<div class="finances-icon-container">
<div class="bcee-icon finances-icon bcee-cat-shopping">
<span class="sds-icon sds-icon-shoppingbag"></span>
</div>
</div>
<div class="finances-info">
<div class="finances-text">
<div class="bcee-format-amount extra-large dark sds-amount -amountXxl sds-textSemiBold">
<span class="amount-value">0,00</span>
<span class="amount-currency">€</span>
</div>
</div>
<div class="finances-bar-container">
<div class="bcee-progress-bar">
<div class="progress-bar-progression" style="width: 33%;"></div>
</div>
</div>
</div>
</div>
<div class="bcee-finances-card bcee-finances-card-truncate cat-enfants-color static" data-amount="142" data-increment="2" data-duration="800" data-delay="3500">
<div class="finances-icon-container">
<div class="bcee-icon finances-icon bcee-cat-enfants">
<span class="sds-icon sds-icon-toys"></span>
</div>
</div>
<div class="finances-info">
<div class="finances-text">
<div class="bcee-format-amount extra-large dark sds-amount -amountXxl sds-textSemiBold">
<span class="amount-value">0,00</span>
<span class="amount-currency">€</span>
</div>
</div>
<div class="finances-bar-container">
<div class="bcee-progress-bar">
<div class="progress-bar-progression" style="width: 5%;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="bcee-mia-animation {{ type }}-animation is-animated">
{% if type === "gauge" %}
<div class="bcee-budget-tracking">
<div class="budget-tracking-wrapper">
<div class="overflow-container">
<p class="grounded-radiants"></p>
<div class="radiant-left-radius"></div>
<div class="radiant-right-radius"></div>
<div class="overflow-container cover-container">
<div class="cover"></div>
<div class="cover-left-radius"></div>
<div class="cover-right-radius"></div>
</div>
</div>
<div class="indicator">
<div class="indicator-stick"></div>
</div>
<div class="indicator-bubble"></div>
</div>
<div class="budget-tracking-info">
<div class="bcee-format-amount extra-large">
<span class="amount-value">11.191,50</span>
<span class="amount-currency">€</span>
</div>
<div class="budget-tracking-text">
<f:variable name="tomorrow" value="{f:format.date(date: 'tomorrow', format: 'd.m.Y')}"/>
<Apart:translate key="mia.animation.gauge.description" arguments="{0 : tomorrow}"/>
</div>
</div>
</div>
{% elseif type === "progress" %}
<div class="bcee-finances-card bcee-finances-card-truncate cat-mobilite-color static" data-amount="1062.50" data-increment="25" data-duration="1000" data-delay="500">
<div class="finances-icon-container">
<div class="bcee-icon finances-icon bcee-cat-mobilite">
<span class="{{ namespace }}icon {{ namespace }}icon-car"></span>
</div>
</div>
<div class="finances-info">
<div class="finances-text ">
<div class="bcee-format-amount extra-large dark {{ namespace }}amount -amountXxl {{ namespace }}textSemiBold">
<span class="amount-value">0,00</span>
<span class="amount-currency">€</span>
</div>
</div>
<div class="finances-bar-container">
<div class="bcee-progress-bar">
<div class="progress-bar-progression" style="width: 85%;"></div>
</div>
</div>
</div>
</div>
<div class="bcee-finances-card bcee-finances-card-truncate cat-shopping-color static" data-amount="336" data-increment="12" data-duration="1000" data-delay="2000">
<div class="finances-icon-container">
<div class="bcee-icon finances-icon bcee-cat-shopping">
<span class="{{ namespace }}icon {{ namespace }}icon-shoppingbag"></span>
</div>
</div>
<div class="finances-info">
<div class="finances-text">
<div class="bcee-format-amount extra-large dark {{ namespace }}amount -amountXxl {{ namespace }}textSemiBold">
<span class="amount-value">0,00</span>
<span class="amount-currency">€</span>
</div>
</div>
<div class="finances-bar-container">
<div class="bcee-progress-bar">
<div class="progress-bar-progression" style="width: 33%;"></div>
</div>
</div>
</div>
</div>
<div class="bcee-finances-card bcee-finances-card-truncate cat-enfants-color static" data-amount="142" data-increment="2" data-duration="800" data-delay="3500">
<div class="finances-icon-container">
<div class="bcee-icon finances-icon bcee-cat-enfants">
<span class="{{ namespace }}icon {{ namespace }}icon-toys"></span>
</div>
</div>
<div class="finances-info">
<div class="finances-text">
<div class="bcee-format-amount extra-large dark {{ namespace }}amount -amountXxl {{ namespace }}textSemiBold">
<span class="amount-value">0,00</span>
<span class="amount-currency">€</span>
</div>
</div>
<div class="finances-bar-container">
<div class="bcee-progress-bar">
<div class="progress-bar-progression" style="width: 5%;"></div>
</div>
</div>
</div>
</div>
{% elseif type === "objectives" %}
<div class="mia-objectives-image">
<div class="bcee-circular-completion bcee-project-complete cat-cadeau-color bcee-popover-wrapper" data-pct="100">
<div class="circular-completion-wrapper">
<svg class="circular-gauge" viewBox="0 0 118 118" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle fill="none" class="circle bottom-circle" r="55" cx="59" cy="59" stroke-dasharray="346"></circle>
<circle fill="none" class="circle circular-completion-gauge" r="55" cx="59" cy="59" stroke-dasharray="346" stroke-dashoffset="346"></circle>
</svg>
</div>
<div class="bcee-single-project-pic in-completion">
<img src="{{ (mediaPath+"/snet/components/circular-completion/holidays.jpg") | path }}" alt="">
</div>
</div>
</div>
<div class="mia-objectives-image">
<div class="bcee-circular-completion bcee-project-complete cat-shopping-color bcee-popover-wrapper" data-pct="100">
<div class="circular-completion-wrapper">
<svg class="circular-gauge" viewBox="0 0 118 118" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle fill="none" class="circle bottom-circle" r="55" cx="59" cy="59" stroke-dasharray="346"></circle>
<circle fill="none" class="circle circular-completion-gauge" r="55" cx="59" cy="59" stroke-dasharray="346" stroke-dashoffset="346"></circle>
</svg>
</div>
<div class="bcee-single-project-pic in-completion rounded-circle"></div>
<svg xmlns="http://www.w3.org/2000/svg" class="circular-completion-svg checkmark" width="89" height="76" viewBox="0 0 89 76">
<path fill="transparent"
d="M110.592161,153.474239 C108.84295,152.124959 106.331127,152.449167 104.981847,154.198378 C103.632567,155.947589 103.956775,158.459412 105.705986,159.808692 L140.451988,186.610539 C142.265593,188.00949 144.881292,187.60278 146.184503,185.719202 L192.193154,119.221179 C193.450092,117.404478 192.996316,114.912801 191.179615,113.655863 C189.362915,112.398924 186.871238,112.852701 185.6143,114.669401 L142.002542,177.703105 L110.592161,153.474239 Z"
transform="translate(-104 -112)">
</path>
</svg>
</div>
</div>
<div class="mia-objectives-image">
<div class="bcee-circular-completion bcee-project-complete cat-holiday-color bcee-popover-wrapper" data-pct="100">
<div class="circular-completion-wrapper">
<svg class="circular-gauge" viewBox="0 0 118 118" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle fill="none" class="circle bottom-circle" r="55" cx="59" cy="59" stroke-dasharray="346"></circle>
<circle fill="none" class="circle circular-completion-gauge" r="55" cx="59" cy="59" stroke-dasharray="346" stroke-dashoffset="346"></circle>
</svg>
</div>
<div class="bcee-single-project-pic in-completion">
<img src="{{ (mediaPath+"/snet/components/circular-completion/holidays.jpg") | path }}" alt="">
</div>
</div>
</div>
{% endif %}
</div>
import Format from '../../../../assets/js/components/Format';
export default class MiaAnimation {
constructor(){
$(document).ready(() => {
this.attachEvents();
});
}
attachEvents(){
$('.bcee-mia-animation, .bcee-mia-speechbubble')?.each( (aIndex, aElement) => {
let element = $(aElement);
this.autoPlayElement(element);
$(window).scroll(() => {
this.autoPlayElement(element);
});
});
}
autoPlayElement(aElement){
if(!aElement.hasClass('is-animated') && this.isElementVisible(aElement)){
aElement.addClass('is-animated');
if(aElement.hasClass('progress-animation')){
aElement.find('.bcee-finances-card').each( (aIndex, aElement) => {
console.log(aElement)
let card = $(aElement);
let amountValue = card.find('.bcee-format-amount .amount-value');
let value = card.data('amount');
let increment = card.data('increment');
let duration = card.data('duration');
let delay = card.data('delay') || 0;
if(value){
window.setTimeout(() => {
this.animateValue(amountValue,0,value,duration,increment);
},delay);
}
});
}
}
}
/**
* @souce : https://stackoverflow.com/questions/20791374/jquery-check-if-element-is-visible-in-viewport
*
* @param aElement
*/
isElementVisible(aElement){
//let top_of_element = $(aElement).offset().top;
let bottom_of_element = $(aElement).offset().top + $(aElement).outerHeight();
let bottom_of_screen = $(window).scrollTop() + window.innerHeight;
//let top_of_screen = $(window).scrollTop();
return (bottom_of_screen > bottom_of_element);
}
animateValue(aElement,aStart,aEnd,aDuration,aIncrement=1){
let interval = null;
let current = aStart;
let end = aEnd;
let duration = aDuration;
let increment = aIncrement;
let steps = aEnd / increment;
let step = function () {
current += increment;
if(aElement){
aElement.html(Format.formatAmount(current));
}
if ((current+increment) >= end) {
aElement.html(Format.formatAmount(end));
window.clearInterval(interval);
}
};
interval = window.setInterval(step, duration / steps)
}
}