{"version":3,"file":"ScrollDrawing.js","names":["define","$","ScrollDrawing","args","html","parseHTML","svg","div","scope","append","each","i","path","pathLength","getTotalLength","style","strokeDasharray","strokeDashoffset","getBoundingClientRect","window","addEventListener","e","rect","bodyRect","elemmentStartPosition","document","body","top","elementHeight","svgElement","clientHeight","GetElementHeight","scrollPercentage","currentPosition","elementStartPosition","percentage","CalculatePercentage","scrollTop","height","drawLength","isExperienceEditor"],"sources":["site/Components/ScrollDrawing.js"],"mappings":"AAAAA,OAAO,CAAC,WAAW,SAAUC,GAEzB,SAASC,EAAcC,GAInBC,KAAOH,EAAEI,UAAUF,EAAKG,KACxB,IAAIC,EAAMN,EAAE,qBAAsBE,EAAKK,OACvCP,EAAEM,GAAKE,OAAOL,MAEd,IAAIE,EAAML,EAAE,MAAOM,GAGnBN,EAAE,OAAQK,GAAKI,MAAK,SAAUC,EAAGC,GAE7B,IAAIC,EAAaD,EAAKE,iBAGtBF,EAAKG,MAAMC,gBAAkBH,EAAa,IAAMA,EAGhDD,EAAKG,MAAME,iBAAmBJ,EAI9BD,EAAKM,wBAILC,OAAOC,iBAAiB,UAAU,SAAUC,GACxC,IAoCJC,EACAC,EArCQC,GAoCRF,EAAOrB,EApCiDK,GAoCnC,GAAGY,wBACxBK,EAAWE,SAASC,KAAKR,wBAEtBI,EAAKK,IAAMJ,EAASI,KArCfC,EAwChB,SAA0BC,GACtB,OAAO5B,EAAE4B,GAAY,GAAGC,YAC5B,CA1CgCC,CAAiBzB,GAIjC0B,EA8ChB,SAA6BC,EAAiBC,EAAsBN,GAEhE,IACIO,GAAcF,EAAkBC,EADvB,KACwDN,EAErE,OAAOO,CACX,CApDmCC,CAyCfnC,EAAEkB,QAAQkB,YAAcpC,EAAEkB,QAAQmB,SAzCkBd,EAAuBI,GAEnF,GAAII,GAAoB,IAAK,CAEzB,IAAIO,EAAa1B,EAAamB,EAE1BA,EAAmB,IACnBO,EAAa,GAGjB3B,EAAKG,MAAME,iBAAmBJ,EAAa0B,EAKvC3B,EAAKG,MAAMC,gBADXgB,GAAoB,IACS,OAGAnB,EAAa,IAAMA,CAExD,CACJ,GAEJ,GAIJ,CA0BA,OAAO,SAAcV,GACZA,EAAKqC,oBACNtC,EAAcC,EAEtB,CACJ","sourcesContent":["define([\"jquery\"], function ($) {\r\n\r\n    function ScrollDrawing(args) {\r\n\r\n        // Take svg and append it to parent. We do this because if we render it in view there is a delay before this script loads\r\n        // so you can see the svg for a split second.\r\n        html = $.parseHTML(args.svg);\r\n        var div = $(\".tek-scrolldrawing\", args.scope);\r\n        $(div).append(html);\r\n\r\n        var svg = $('svg', div);\r\n\r\n        // Get a reference to the <path>\r\n        $('path', svg).each(function (i, path) {\r\n            // Get length of path... ~577px in this case\r\n            var pathLength = path.getTotalLength();\r\n\r\n            // Make very long dashes (the length of the path itself)\r\n            path.style.strokeDasharray = pathLength + ' ' + pathLength;\r\n\r\n            // Offset the dashes so the it appears hidden entirely\r\n            path.style.strokeDashoffset = pathLength;\r\n\r\n            // Jake Archibald says so\r\n            // https://jakearchibald.com/2013/animated-line-drawing-svg/\r\n            path.getBoundingClientRect();\r\n\r\n\r\n            // When the page scrolls...\r\n            window.addEventListener(\"scroll\", function (e) {\r\n                var elemmentStartPosition = GetElementStartPosition(svg);\r\n\r\n                var elementHeight = GetElementHeight(svg);\r\n\r\n                var currentPosition = GetBottomOfViewPort();\r\n\r\n                var scrollPercentage = CalculatePercentage(currentPosition, elemmentStartPosition, elementHeight);\r\n\r\n                if (scrollPercentage <= 100) {\r\n                    // Length to offset the dashes\r\n                    var drawLength = pathLength * scrollPercentage;\r\n\r\n                    if (scrollPercentage < 0) {\r\n                        drawLength = 0;\r\n                    }\r\n                    // Draw in reverse\r\n                    path.style.strokeDashoffset = pathLength - drawLength;\r\n\r\n                    // When complete, remove the dash array, otherwise shape isn't quite sharp\r\n                    // Accounts for fuzzy math\r\n                    if (scrollPercentage >= 0.99) {\r\n                        path.style.strokeDasharray = \"none\";\r\n\r\n                    } else {\r\n                        path.style.strokeDasharray = pathLength + ' ' + pathLength;\r\n                    }\r\n                }\r\n            });\r\n\r\n        });\r\n\r\n\r\n\r\n    }\r\n\r\n    function GetElementStartPosition(svgElement) {\r\n        var rect = $(svgElement)[0].getBoundingClientRect();\r\n        var bodyRect = document.body.getBoundingClientRect();\r\n\r\n        return rect.top - bodyRect.top;\r\n    }\r\n\r\n    function GetElementHeight(svgElement) {\r\n        return $(svgElement)[0].clientHeight;\r\n    }\r\n\r\n    function GetBottomOfViewPort() {\r\n        var bottomPos = $(window).scrollTop() + $(window).height();\r\n\r\n        return bottomPos;\r\n    }\r\n\r\n    function CalculatePercentage(currentPosition, elementStartPosition, elementHeight) {\r\n        // Put small offset so the svg doesn't draw right away when it's in the bottom of screen and let it scroll a bit more \r\n        var offset = 100;\r\n        var percentage = (currentPosition - elementStartPosition - offset) / elementHeight;\r\n\r\n        return percentage;\r\n    }\r\n    return function init(args) {\r\n        if (!args.isExperienceEditor) {\r\n            ScrollDrawing(args);\r\n        }\r\n    };\r\n});\r\n\r\n\r\n"]}