Skip to content
Snippets Groups Projects
Commit 6d09fa2c authored by Eric Bremner's avatar Eric Bremner
Browse files

ISTWCMS-5718: linting js file and moving the jquery circliful to gitlab and loading it from there

parent 40ebe00d
No related branches found
No related tags found
1 merge request!27Feature/istwcms 5718 ebremner ff
Hide whitespace changes
Inline Side-by-side
src/patterns/04-components/facts-and-figures/facts-and-figures.js
+ 303
− 252
View file @ 6d09fa2c
......@@ -3,266 +3,317 @@
*/
(function ($, Drupal) {
Drupal.behaviors.factfigure = {
attach: function (context, settings) {
function runCarousel(id, numOfItems)
{
// Add the carousel to the FF using the id.
$(id + " .owl-carousel").owlCarousel(
{
margin: 10,
nav: true,
navContainerClass: "uw-owl-nav",
navText: [
"‹ prev",
"next ›"
],
responsiveClass: true,
responsive: {
0: {
items: 1
},
600: {
items: numOfItems <= 2 ? (numOfItems - 1 > 0) ? numOfItems - 1 : 1 : 2
},
1000: {
items: numOfItems
}
}
}
);
'use strict';
Drupal.behaviors.factfigure = {
attach: function () {
/**
* Run the carousel.
* @param {string} id The id of the ff.
* @param {int} numOfItems The number of items in the carousel.
* @return {null} void
*/
function runCarousel(id, numOfItems) {
// Add the carousel to the FF using the id.
$(id + ' .owl-carousel').owlCarousel({
margin: 10,
nav: true,
navContainerClass: 'uw-owl-nav',
navText: [
'‹ prev',
'next ›'
],
responsiveClass: true,
responsive: {
0: {
items: 1
},
600: {
items: numOfItems <= 2
? (numOfItems - 1 > 0)
? numOfItems - 1 : 1 : 2
},
1000: {
items: numOfItems
}
// Check if the element is is in view.
function isElementInViewport(elem)
{
var $elem = $(elem);
// Get the scroll position of the page.
var viewportTop = $("html").scrollTop();
var viewportBottom = viewportTop + $(window).height();
// Get the position of the element on the page.
// Adds a little padding so it triggers when the
// element is closer to the middle of the page.
var elemTop = Math.round($elem.offset().top);
var elemBottom = elemTop + $elem.height();
return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}
});
}
/**
* Check if the element is is in view.
* @param {object} elem The element to look at.
* @return {boolean} whether element is in viewport.
*/
function isElementInViewport(elem) {
var $elem = $(elem);
// Get the scroll position of the page.
var viewportTop = $('html').scrollTop();
var viewportBottom = viewportTop + $(window).height();
// Get the position of the element on the page.
// Adds a little padding so it triggers when the
// element is closer to the middle of the page.
var elemTop = Math.round($elem.offset().top);
var elemBottom = elemTop + $elem.height();
return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}
/**
* Animate the number.
* @param {object} el The element.
* @param {int} percent The percentile.
* @return {null} void
*/
function animateNumber(el, percent) {
var hasComma;
var num;
// Find out if the number has a thousand marker (comma).
if (percent.toString().indexOf(',') >= 0) {
hasComma = true;
// If so, remove it for now so the animation will work.
percent = percent.replace(/,/g, '');
}
else {
hasComma = false;
}
$({counter: 0}).animate(
{counter: percent}, {
duration: 2000,
step: function () {
var num = Math.ceil(this.counter).toString();
if (hasComma) {
// Add back the comma.
while (/(\d+)(\d{3})/.test(num)) {
num = num.replace(/(\d+)(\d{3})/, '$1,$2');
}
}
$(el).text(num);
},
// Ensure the correct value is shown when animation is complete
// fixes issue with incomplete counters for large numbers
// see: https://stackoverflow.com/questions/50331552/jquery-
// counter-fails-to-show-the-correct-value-after-animation
complete : function () {
if (hasComma) {
// Add back the comma.
percent = num.replace(/(\d+)(\d{3})/, '$1,$2');
}
$(el).text(percent);
}
// Run the animation if the element is in view.
function checkAnimation(infoHorizontal, infoVertical, infoNumber)
{
$(infoHorizontal).each(
function () {
if ($(this).hasClass("animated")) {
return;
}
if (isElementInViewport($(this))) {
runAnimation($(this));
}
}
);
$(infoVertical).each(
function () {
if ($(this).hasClass("animated")) {
return;
}
if (isElementInViewport($(this))) {
runAnimation($(this));
}
}
);
$(infoNumber).each(
function () {
if ($(this).hasClass("animated")) {
return;
}
if (isElementInViewport($(this))) {
runAnimation($(this));
}
}
);
}
);
}
/**
* Isolating this to try to run it when the slider changes.
* @param {object} el The element.
* @return {null} void
*/
function runAnimation(el) {
var type = el.data('infographic-type');
var percent = el.data('percent');
// Animate the graph.
if (type === 'horizontal') {
el.find('.graph-wrapper .graph').animate({'width' : percent + '%'}, 2000);
}
else if (type === 'vertical') {
el.find('.graph-wrapper .graph').animate({'height' : percent + '%'}, 2000);
}
animateNumber(el.find('.timer'), percent);
el.addClass('animated');
}
/**
* Run the animation if the element is in view.
* @param {object} infoHorizontal The horizontal ff.
* @param {object} infoVertical The vertical ff.
* @param {string} infoNumber The id of the ff.
* @return {null} void
*/
function checkAnimation(infoHorizontal, infoVertical, infoNumber) {
$(infoHorizontal).each(
function () {
if ($(this).hasClass('animated')) {
return;
}
// Isolating this to try to run it when the slider changes.
function runAnimation(el)
{
var type = el.data("infographic-type");
var percent = el.data("percent");
// Animate the graph.
if (type === "horizontal") {
el.find(".graph-wrapper .graph").animate({"width" : percent + "%"}, 2000);
}
else if (type === "vertical") {
el.find(".graph-wrapper .graph").animate({"height" : percent + "%"}, 2000);
}
animateNumber(el.find(".timer"), percent);
el.addClass("animated");
if (isElementInViewport($(this))) {
runAnimation($(this));
}
// Animate the number.
function animateNumber(el, percent)
{
var hasComma;
var num;
// Find out if the number has a thousand marker (comma).
if (percent.toString().indexOf(",") >= 0) {
hasComma = true;
// If so, remove it for now so the animation will work.
percent = percent.replace(/,/g, "");
}
else {
hasComma = false;
}
}
);
$({counter: 0}).animate(
{counter: percent}, {
duration: 2000,
step: function () {
var num = Math.ceil(this.counter).toString();
if (hasComma) {
// Add back the comma.
while (/(\d+)(\d{3})/.test(num)) {
num = num.replace(/(\d+)(\d{3})/, "$1" + "," + "$2");
}
}
$(el).text(num);
},
// Ensure the correct value is shown when animation is complete
// fixes issue with incomplete counters for large numbers
// see: https://stackoverflow.com/questions/50331552/jquery-
// counter-fails-to-show-the-correct-value-after-animation
complete : function () {
if (hasComma) {
// Add back the comma.
percent = num.replace(/(\d+)(\d{3})/, "$1" + "," + "$2");
}
$(el).text(percent);
}
}
);
$(infoVertical).each(
function () {
if ($(this).hasClass('animated')) {
return;
}
// Build Info graphics.
function setupInfoGraphics(id)
{
// For circle infographics, first
// check to make sure library is loaded.
if ($.fn.circliful) {
// Set default options for circle infographics.
var $circlifulOptions = "";
$circlifulOptions = {
animation: 1,
animationStep: 3,
foregroundBorderWidth: 15,
backgroundBorderWidth: 15,
backgroundColor: "#a2a2a2",
animateInView: "true",
fontColor: "#4e4e4e",
percentageTextSize: "35",
};
var circles = id + " .infographic-circle";
// Create circle infographic.
$(circles).each(
function () {
$(this).circliful($circlifulOptions);
}
);
var halfCircles = id + " .infographic-half-circle";
// Create half circle.
$(halfCircles).each(
function () {
$(this).circliful(
$.extend($circlifulOptions, {halfCircle: "true"})
);
}
);
}
// Setting selectors for the animation checks
// and bar builds.
var infoNumber = id + " .infographic-number";
var infoVertical = id + " .infographic-vertical";
var infoHorizontal = id + " .infographic-horizontal";
$(infoHorizontal).each(
function () {
$(this).append("<div class='graph-wrapper'><span class='graph'></span></div><span class='timer'>" + $(this).data("percent") + "</span>");
}
);
$(infoVertical).each(
function () {
$(this).append("<div class='graph-wrapper'><span class='graph'></span></div><span class='timer'>" + $(this).data("percent") + "</span>");
}
);
// Check when the page loads.
checkAnimation(infoHorizontal, infoVertical, infoNumber);
// Capture scroll events.
$(window).scroll(
function () {
checkAnimation(infoHorizontal, infoVertical, infoNumber);
}
);
};
// Function to run the FF code.
function runFF()
{
// Step through each FF on the page.
$(".uw-ff").each(
function () {
// Get the id to reference the individual FF.
// Need this to ensure that if more than one FF on the page,
// that all FFs get the carousel added.
var id = "#uw-ff-" + $(this).data("id");
// Check to see if we have a carousel
// set from drupal in twig.
var hasCarousel = $(this).data("carousel") === "yes";
// If we have one.
if (hasCarousel) {
// Get the number of items for the carousel, if any.
var numOfItems = $(id).data("num-per-carousel") !== "" ? $(this).data("num-per-carousel") : 3;
// Run the carousel.
runCarousel(id, numOfItems);
}
// Check to see if info graphic is animated
// return else run setup. ensures we dont fire 2x.
if ($(".highlighted-fact-infographic ").hasClass("animated")) {
return;
}
else {
setupInfoGraphics(id);
}
}
);
if (isElementInViewport($(this))) {
runAnimation($(this));
}
// When the data-ff element is on page we know the update button is on page.
if ($("[data-layout-builder-target-highlight-id] [data-ff='yes']").length) {
if ($("[data-ff='yes']")) {
runFF();
}
}
);
$(infoNumber).each(
function () {
if ($(this).hasClass('animated')) {
return;
}
$(document).ready(
function () {
// Run the FF code on each of the figures.
if ($(".uw-ff").length) {
runFF();
}
}
);
if (isElementInViewport($(this))) {
runAnimation($(this));
}
}
);
}
/**
* Build Info graphics.
* @param {string} id The id of the ff.
* @return {null} void
*/
function setupInfoGraphics(id) {
// For circle infographics, first
// check to make sure library is loaded.
if ($.fn.circliful) {
// Set default options for circle infographics.
var $circlifulOptions = '';
$circlifulOptions = {
animation: 1,
animationStep: 3,
foregroundBorderWidth: 15,
backgroundBorderWidth: 15,
backgroundColor: '#a2a2a2',
animateInView: 'true',
fontColor: '#4e4e4e',
percentageTextSize: '35',
};
var circles = id + ' .infographic-circle';
// Create circle infographic.
$(circles).each(
function () {
$(this).circliful($circlifulOptions);
}
);
var halfCircles = id + ' .infographic-half-circle';
// Create half circle.
$(halfCircles).each(
function () {
$(this).circliful(
$.extend($circlifulOptions, {halfCircle: 'true'})
);
}
);
}
// Setting selectors for the animation checks
// and bar builds.
var infoNumber = id + ' .infographic-number';
var infoVertical = id + ' .infographic-vertical';
var infoHorizontal = id + ' .infographic-horizontal';
$(infoHorizontal).each(
function () {
$(this).append('<div class="graph-wrapper"><span class="graph"></span></div><span class="timer">' + $(this).data('percent') + '</span>');
}
);
$(infoVertical).each(
function () {
$(this).append('<div class="graph-wrapper"><span class="graph"></span></div><span class="timer">' + $(this).data('percent') + '</span>');
}
);
// Check when the page loads.
checkAnimation(infoHorizontal, infoVertical, infoNumber);
// Capture scroll events.
$(window).scroll(
function () {
checkAnimation(infoHorizontal, infoVertical, infoNumber);
}
);
}
/**
* Function to run the FF code.
* @return {null} void
*/
function runFF() {
// Step through each FF on the page.
$('.uw-ff').each(
function () {
// Get the id to reference the individual FF.
// Need this to ensure that if more than one FF on the page,
// that all FFs get the carousel added.
var id = '#uw-ff-' + $(this).data('id');
// Check to see if we have a carousel
// set from drupal in twig.
var hasCarousel = $(this).data('carousel') === 'yes';
// If we have one.
if (hasCarousel) {
// Get the number of items for the carousel, if any.
var numOfItems = $(id).data('num-per-carousel') !== '' ? $(this).data('num-per-carousel') : 3;
// Run the carousel.
runCarousel(id, numOfItems);
}
// Check to see if info graphic is animated
// return else run setup. ensures we dont fire 2x.
if ($('.highlighted-fact-infographic').hasClass('animated')) {
return;
}
else {
setupInfoGraphics(id);
}
}
);
}
// When the data-ff element is on page we know the
// update button is on page.
if ($('[data-layout-builder-target-highlight-id] [data-ff="yes"]').length) {
if ($('[data-ff="yes"]')) {
runFF();
}
}
$(document).ready(
function () {
// Run the FF code on each of the figures.
if ($('.uw-ff').length) {
runFF();
}
}
};
);
}
};
})(jQuery, Drupal);
src/patterns/04-components/facts-and-figures/jquery.circliful.min.js deleted 100644 → 0
+ 0
− 1
View file @ 40ebe00d
"use strict";!function(z){z.fn.circliful=function(e,T){var S=z.extend({foregroundColor:"#3498DB",backgroundColor:"#ccc",pointColor:"none",fillColor:"none",foregroundBorderWidth:15,backgroundBorderWidth:15,pointSize:28.5,fontColor:"#aaa",beforePercent:"",percent:75,animation:1,animationStep:5,icon:"none",iconSize:"30",iconColor:"#ccc",iconPosition:"top",iconDecoration:!0,target:0,showPercent:1,percentageTextSize:22,percentageX:100,percentageY:113,textAdditionalCss:"",targetPercent:0,targetTextSize:17,targetColor:"#2980B9",text:null,textStyle:null,textColor:"#666",textY:null,textX:null,percentages:[],multiPercentageLegend:0,textBelow:!1,noPercentageSign:!1,replacePercentageByText:null,halfCircle:!1,animateInView:!1,decimals:0,alwaysDecimals:!1,title:"Circle Chart",description:"",progressColor:null,strokeLinecap:"butt"},e);return this.each(function(){var r,n,x=z(this);r=S,n=x.data(),z.each(r,function(e,t){e.toLowerCase()in n&&(r[e]=n[e.toLowerCase()])});var d,p,l=S.percent,e=83,t=100,f=S.percentageY,g=S.percentageX,h="",u=S.backgroundBorderWidth,a=S.progressColor;if(S.halfCircle?"left"===S.iconPosition?(t=80,g=117,f=e=100):S.halfCircle&&(e=80,f=100):"bottom"===S.iconPosition?(e=124,f=95):"left"===S.iconPosition?(t=80,e=110,g=117):"middle"===S.iconPosition?(0===S.percentages.length&&(S.iconDecoration&&(d='<g stroke="'+("none"!==S.backgroundColor?S.backgroundColor:"#ccc")+'" ><line x1="133" y1="50" x2="140" y2="40" stroke-width="2" /></g>',d+='<g stroke="'+("none"!==S.backgroundColor?S.backgroundColor:"#ccc")+'" ><line x1="140" y1="40" x2="200" y2="40" stroke-width="2" /></g>'),g=170,f=35),e=110):"right"===S.iconPosition?(t=120,e=110,g=80):"top"===S.iconPosition&&"none"!==S.icon&&(f=120),0<S.targetPercent&&!0!==S.halfCircle&&(f=95,d='<g stroke="'+("none"!==S.backgroundColor?S.backgroundColor:"#ccc")+'" ><line x1="75" y1="101" x2="125" y2="101" stroke-width="1" /></g>',d+='<text text-anchor="middle" x="'+g+'" y="120" style="font-size: '+S.targetTextSize+'px;" fill="'+S.targetColor+'">'+S.targetPercent+(S.noPercentageSign&&null===S.replacePercentageByText?"":"%")+"</text>",d+='<circle cx="100" cy="100" r="69" fill="none" stroke="'+S.backgroundColor+'" stroke-width="3" stroke-dasharray="450" transform="rotate(-90,100,100)" />',d+='<circle cx="100" cy="100" r="69" fill="none" stroke="'+S.targetColor+'" stroke-width="3" stroke-dasharray="'+4.35*S.targetPercent+', 20000" transform="rotate(-90,100,100)" />'),null!==S.text&&(S.halfCircle?S.textBelow?d+='<text text-anchor="middle" x="'+(null!==S.textX?S.textX:"100")+'" y="'+(null!==S.textY?S.textY:"64%")+'" style="'+S.textStyle+'" fill="'+S.textColor+'">'+S.text+"</text>":d+='<text text-anchor="middle" x="'+(null!==S.textX?S.textX:"100")+'" y="'+(null!==S.textY?S.textY:"115")+'" style="'+S.textStyle+'" fill="'+S.textColor+'">'+S.text+"</text>":S.textBelow?d+='<text text-anchor="middle" x="'+(null!==S.textX?S.textX:"100")+'" y="'+(null!==S.textY?S.textY:"99%")+'" style="'+S.textStyle+'" fill="'+S.textColor+'">'+S.text+"</text>":d+='<text text-anchor="middle" x="'+(null!==S.textX?S.textX:"100")+'" y="'+(null!==S.textY?S.textY:"115")+'" style="'+S.textStyle+'" fill="'+S.textColor+'">'+S.text+"</text>"),p="none"!==S.icon?'<text text-anchor="middle" x="'+t+'" y="'+e+'" class="icon" style="font-size: '+S.iconSize+'px" fill="'+S.iconColor+'">&#x'+S.icon+"</text>":"",S.halfCircle){var o=0===S.showPercent?"display:none":"";x.addClass("svg-container").append(z('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" class="circliful">'+(void 0!==d?d:"")+'<clipPath id="cut-off-bottom"> <rect x="100" y="0" width="100" height="200" /> </clipPath><circle cx="100" cy="100" r="57" class="border" fill="'+S.fillColor+'" stroke="'+S.backgroundColor+'" stroke-width="'+u+'" stroke-dasharray="360" clip-path="url(#cut-off-bottom)" transform="rotate(-90,100,100)" /><circle class="circle" cx="100" cy="100" r="57" fill="none" stroke="'+S.foregroundColor+'" stroke-width="'+S.foregroundBorderWidth+'" stroke-dasharray="0,20000" transform="rotate(-180,100,100)" stroke-linecap="'+S.strokeLinecap+'" /><circle cx="100" cy="100" r="'+S.pointSize+'" fill="'+S.pointColor+'" clip-path="url(#cut-off-bottom)" transform="rotate(-90,100,100)" />'+p+'<text class="timer" text-anchor="middle" x="'+g+'" y="'+f+'" style="font-size: '+S.percentageTextSize+"px; "+h+";"+S.textAdditionalCss+'" fill="'+S.fontColor+'"><tspan class="number" style="'+o+'">'+(null===S.replacePercentageByText?0:S.replacePercentageByText)+'</tspan><tspan class="percent">'+(S.noPercentageSign||null!==S.replacePercentageByText?"":"%")+"</tspan></text>"))}else!function(){if(0<S.percentages.length){var e,t,r,n,o=S.percentages,l=47,a=360,c="";for(e=0;e<o.length;++e)r=o[e].percent,n=o[e].color,t=a/100*r,0<e&&(t=(a+=62.5)/100*r),c+='<circle cx="100" cy="100" r="'+(l+=10)+'" class="border" fill="'+S.fillColor+'" stroke="'+S.backgroundColor+'" stroke-width="'+u+'" stroke-dasharray="'+a+'" transform="rotate('+-90+',100,100)" /><circle class="circle" id="circle'+(e+1)+'" data-percent="'+r+'" cx="100" cy="100" r="'+l+'" class="border" fill="none" stroke="'+n+'" stroke-width="'+S.foregroundBorderWidth+'" stroke-dasharray="'+t+',20000" transform="rotate('+-90+',100,100)" stroke-linecap="'+S.strokeLinecap+'" />';var i=0===S.showPercent?"display:none":"";x.addClass("svg-container").append(z('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" class="circliful">'+(void 0!==d?d:"")+c+p+'<text class="timer" text-anchor="middle" x="'+g+'" y="'+f+'" style="font-size: '+S.percentageTextSize+"px; "+h+";"+S.textAdditionalCss+'" fill="'+S.fontColor+'"><tspan class="number" style="'+i+'">'+(null===S.replacePercentageByText?0:S.replacePercentageByText)+'</tspan><tspan class="percent">'+(S.noPercentageSign||null!==S.replacePercentageByText?"":"%")+"</tspan></text>")),0<S.percentages.length&&function(){var e,t=x.height(),r=x.width(),n=S.percentages,o="";for(e=0;e<n.length;++e){var l=n[e].title,a=n[e].color,c=n[e].percent;o+='<div><span class="color-box" style="background: '+a+'"></span>'+l+", "+c+"%</div>"}x.append(z("<div/>").append(o).attr("style","position:absolute;top:"+t/3+"px;left:"+(r+20)+"px").attr("class","legend-line"))}()}else{var s="";""!==S.beforePercent&&(s="f"===S.beforePercent.charAt(0)?'<tspan class="icon before-percent">&#x'+S.beforePercent+" </tspan>":'<tspan class="before-percent">'+S.beforePercent+" </tspan>");var i=0===S.showPercent?"display:none":"";x.addClass("svg-container").append(z('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186" class="circliful">'+(void 0!==d?d:"")+'<circle cx="100" cy="100" r="57" class="border" fill="'+S.fillColor+'" stroke="'+S.backgroundColor+'" stroke-width="'+u+'" stroke-dasharray="360" transform="rotate(-90,100,100)" /><circle class="circle" cx="100" cy="100" r="57" fill="none" stroke="'+S.foregroundColor+'" stroke-width="'+S.foregroundBorderWidth+'" stroke-dasharray="0,20000" transform="rotate(-90,100,100)" stroke-linecap="'+S.strokeLinecap+'" /><circle cx="100" cy="100" r="'+S.pointSize+'" fill="'+S.pointColor+'" />'+p+'<text class="timer" text-anchor="middle" x="'+g+'" y="'+f+'" style="font-size: '+S.percentageTextSize+"px; "+h+";"+S.textAdditionalCss+'" fill="'+S.fontColor+'">'+s+'<tspan class="number" style="'+i+'">'+(null===S.replacePercentageByText?0:S.replacePercentageByText)+'</tspan><tspan class="percent">'+(S.noPercentageSign||null!==S.replacePercentageByText?"":"%")+"</tspan></text>"))}}();var c=x.find(".circle"),i=x.find(".timer"),s=30,y=0,C=S.animationStep,k=0,w=0,m=l,P=3.6*l;function b(){var e=c,t=P;if(0<S.percentages.length){var r,n=S.percentages,o=360;for(r=0;r<n.length;++r)t=o/100*(l=n[r].percent),e=x.find("#circle"+(r+1)),0<r&&(t=(o+=62.5)/100*l),v(e,t,o,l)}else v(e,t,360,S.percent)}function v(r,e,n,t){var o=window.setInterval(function(){e<=y?(window.clearInterval(o),k=1,"function"==typeof T&&T.call(this)):y+=C,S.halfCircle?t<=2*y/(n/100)&&1===k&&(y=n/100*t/2):t<=y/(n/100)&&1===k&&(y=n/100*t),w>S.target&&1===k&&(w=S.target),null===S.replacePercentageByText&&(m=S.halfCircle?parseFloat(100*y/n*2):parseFloat(100*y/n),!S.alwaysDecimals&&(0===t||1<t&&1!==k)?(m=Math.floor(m))>S.percent&&(m=S.percent.toFixed(S.decimals)):m=1!==k?Math.floor(m):S.percent.toFixed(S.decimals)),r.attr("stroke-dasharray",y+", 20000"),0===S.percentages.length?1===S.showPercent?i.find(".number").text(m):(i.find(".number").text(w),i.find(".percent").text("")):(i.find(".number").text(""),i.find(".percent").text("")),null!==a&&z.each(a,function(e,t){S.halfCircle&&(e/=2),e*(n/100)<=y&&r.css({stroke:t,transition:"stroke 0.1s linear"})})}.bind(r),s)}function B(){var e,t,r,n;c.hasClass("start")||(e=c.offset().top,t=e+c.outerHeight(),r=z(window).scrollTop(),n=r+z(window).height(),r<t&&e<n&&(c.addClass("start"),setTimeout(b,250)))}S.halfCircle&&(P=3.6*l/2),null!==S.replacePercentageByText&&(m=S.replacePercentageByText),1===S.animation||S.animateInView?S.animateInView?(B(),z(window).scroll(function(){B()})):b():0===S.percentages.length?(c.attr("stroke-dasharray",P+", 20000"),1===S.showPercent?i.find(".number").text(m):(i.find(".number").text(S.target),i.find(".percent").text(""))):null!==S.replacePercentageByText&&(i.find(".number").text(S.replacePercentageByText),i.find(".percent").text(""))})}}(jQuery);
styleguide/_foot.twig
+ 1
− 0
View file @ 6d09fa2c
......@@ -6,6 +6,7 @@
<script src="../../core/misc/drupal.js?v=8.3.7"></script>
<script src="../../core/misc/drupal.init.js?v=8.3.7"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://git.uwaterloo.ca/libraries/jquery_circliful/-/raw/main/jquery.circliful.min.js"></script>
<!-- Concatenated by Gulp so you don't have to manually add each file. -->
<script src="../../js/all.js?{{ cacheBuster }}"></script>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment