diff --git a/lib/odoo.js b/lib/odoo.js index 696ab81..1fdfe0e 100644 --- a/lib/odoo.js +++ b/lib/odoo.js @@ -1 +1 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.odoo=e():t.odoo=e()}(this,function(){return function(t){function e(a){if(r[a])return r[a].exports;var n=r[a]={exports:{},id:a,loaded:!1};return t[a].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var r={};return e.m=t,e.c=r,e.p="/",e(0)}([function(t,e,r){"use strict";function a(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var n=r(2);Object.defineProperty(e,"default",{enumerable:!0,get:function(){return a(n)["default"]}})},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t){var e=void 0,r=function a(r){e=requestAnimationFrame(a),t(r)};return r(0),function(){return cancelAnimationFrame(e)}}},function(t,e,r){"use strict";function a(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var n=r(1),l=a(n),o=r(5),i=r(10),u=a(i),c=10,f=3,d=function(t,e,r,a){var n,l=[0,1,2,3,4,5,6,7,8,9,0],i=(n=o.append.call(t,"g"),o.attr).call(n,"id","digit-"+a);return l.forEach(function(t,n){var l;(l=(l=(l=(l=o.append.call(i,"text"),o.attr).call(l,"y",-n*e*r),o.style).call(l,"font-size",e+"px"),o.style).call(l,"filter","url(#motionFilter-"+a+")"),o.text).call(l,t)}),i},s=function(t,e,r){var a;return(a=(a=(a=o.append.call(t,"g"),o.append).call(a,"text"),o.style).call(a,"font-size",r+"px"),o.text).call(a,e)},p=function(t,e){var r;return(r=(r=(r=(r=(r=(r=(r=o.append.call(t,"filter"),o.attr).call(r,"id","motionFilter-"+e),o.attr).call(r,"width","300%"),o.attr).call(r,"x","-100%"),o.append).call(r,"feGaussianBlur"),o.attr).call(r,"class","blurValues"),o.attr).call(r,"in","SourceGraphic"),o.attr).call(r,"stdDeviation","0 0")},v=function(t,e){var r;return(r=(r=(r=(r=(r=(r=(r=(r=(r=(r=(r=(r=(r=(r=(r=(r=(r=(r=(r=(r=(r=(r=(r=(r=o.append.call(t,"linearGradient"),o.attr).call(r,"id","gradient-"+e),o.attr).call(r,"x1","0%"),o.attr).call(r,"y1","0%"),o.attr).call(r,"x2","0%"),o.attr).call(r,"y2","100%"),o.append).call(r,"stop"),o.attr).call(r,"offset","0"),o.attr).call(r,"stop-color","white"),o.attr).call(r,"stop-opacity","0"),o.select).call(r,"#gradient-"+e),o.append).call(r,"stop"),o.attr).call(r,"offset","0.2"),o.attr).call(r,"stop-color","white"),o.attr).call(r,"stop-opacity","1"),o.select).call(r,"#gradient-"+e),o.append).call(r,"stop"),o.attr).call(r,"offset","0.8"),o.attr).call(r,"stop-color","white"),o.attr).call(r,"stop-opacity","1"),o.select).call(r,"#gradient-"+e),o.append).call(r,"stop"),o.attr).call(r,"offset","1"),o.attr).call(r,"stop-color","white"),o.attr).call(r,"stop-opacity","0")},y=function(t,e){var r;return(r=(r=(r=(r=(r=(r=(r=o.append.call(t,"mask"),o.attr).call(r,"id","mask-"+e),o.append).call(r,"rect"),o.attr).call(r,"x",0),o.attr).call(r,"y",0),o.attr).call(r,"width","100%"),o.attr).call(r,"height","100%"),o.attr).call(r,"fill","url(#gradient-"+e+")")},h=function(t,e,r){var a;return(a=(a=(a=o.attr.call(t,"width",e),o.attr).call(a,"height",r),o.attr).call(a,"viewBox","0 0 "+e+" "+r),o.style).call(a,"overflow","hidden")};e["default"]=function(t){var e,r=t.el,a=t.value,n=t.lineHeight,i=void 0===n?1.35:n,g=t.letterSpacing,m=void 0===g?1:g,b=t.animationDelay,_=void 0===b?100:b,x=t.letterAnimationDelay,j=void 0===x?100:x,M=(0,o.select)(r),P=window.getComputedStyle(M),w=parseInt(P.fontSize,10),O=(w*i-w)/2+w/10,D=w*i-O,S=Date.now(),E=0,F=w*i+O;M.innerHTML="";var k=o.append.call(M,"svg"),A=(e=o.append.call(k,"svg"),o.attr).call(e,"mask","url(#mask-"+S+")"),B=o.append.call(k,"defs");v(B,S),y(B,S);var N=String(a).replace(/ /g," ").split(""),z=N.map(function(t,e){var r=e+"-"+S;return isNaN(parseInt(t,10))?{isDigit:!1,node:s(A,t,w),value:t,offset:{x:0,y:D}}:{isDigit:!0,id:r,node:d(A,w,i,r),filter:p(B,r),value:Number(t),offset:{x:0,y:D}}}),C=[],G=z.filter(function(t){return t.isDigit});G.forEach(function(t,e){var r=(f*c+t.value)*(w*i),a=(0,u["default"])({from:0,to:r,delay:(G.length-1-e)*j+_,step:function(e){var a;t.offset.y=D+e%(w*i*c),(a=t.node,o.attr).call(a,"transform","translate("+t.offset.x+", "+t.offset.y+")");var n=r/2,l=Math.abs(Math.abs(e-n)-n)/100;(a=(0,o.select)("#motionFilter-"+t.id+" .blurValues"),o.attr).call(a,"stdDeviation","0 "+l)},end:0===e?function(){return H()}:function(t){return t}});C.push(a)});var q=function(t){E=0,z.forEach(function(t){var e=t.node.getBBox(),r=e.width;t.offset.x=E,E+=r+m}),z.forEach(function(t){var e;(e=t.node,o.attr).call(e,"transform","translate("+t.offset.x+", "+t.offset.y+")")}),h(k,E,F),C.forEach(function(e){return e.update(t)})},H=(0,l["default"])(q);return H}},function(t,e,r){"use strict";function a(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t){var e=document.createElementNS(l["default"].svg,t);return this.appendChild(e),e};var n=r(6),l=a(n)},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t,e){return this.setAttribute(t,e),this}},function(t,e,r){"use strict";function a(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var n=r(7);Object.defineProperty(e,"select",{enumerable:!0,get:function(){return a(n)["default"]}});var l=r(3);Object.defineProperty(e,"append",{enumerable:!0,get:function(){return a(l)["default"]}});var o=r(4);Object.defineProperty(e,"attr",{enumerable:!0,get:function(){return a(o)["default"]}});var i=r(8);Object.defineProperty(e,"style",{enumerable:!0,get:function(){return a(i)["default"]}});var u=r(9);Object.defineProperty(e,"text",{enumerable:!0,get:function(){return a(u)["default"]}})},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={svg:"http://www.w3.org/2000/svg"}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t){return t===String(t)?document.querySelector(t):t}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t,e){var r=arguments.length<=2||void 0===arguments[2]?"":arguments[2];return this.style.setProperty(t,e,r),this}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t){return this.textContent=t,this}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=function(t){return((t*=2)<=1?t*t*t:(t-=2)*t*t+2)/2};e["default"]=function(t){var e=t.from,a=t.to,n=t.duration,l=void 0===n?3e3:n,o=t.delay,i=void 0===o?0:o,u=t.easing,c=void 0===u?r:u,f=t.start,d=void 0===f?function(t){return t}:f,s=t.step,p=void 0===s?function(t){return t}:s,v=t.end,y=void 0===v?function(t){return t}:v,h=e,g=0,m=!1,b=function(t){if(!m){g||(g=t,d(h));var r=Math.min(Math.max(t-g-i,0),l)/l;h=c(r)*(a-e)+e,p(h),1===r&&(m=!0,y(h))}};return{update:b}}}])}); \ No newline at end of file +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.odoo=e():t.odoo=e()}(this,function(){return function(t){function e(r){if(a[r])return a[r].exports;var l=a[r]={exports:{},id:r,loaded:!1};return t[r].call(l.exports,l,l.exports,e),l.loaded=!0,l.exports}var a={};return e.m=t,e.c=a,e.p="/",e(0)}([function(t,e,a){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var l=a(2);Object.defineProperty(e,"default",{enumerable:!0,get:function(){return r(l)["default"]}})},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t){var e=void 0,a=function r(a){e=requestAnimationFrame(r),t(a)};return a(0),function(){return cancelAnimationFrame(e)}}},function(t,e,a){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var l=a(1),n=r(l),o=a(5),i=a(10),c=r(i),u=10,f=3,d=function(t,e,a,r){var l,n=[0,1,2,3,4,5,6,7,8,9,0],i=(l=(l=o.append.call(t,"g"),o.attr).call(l,"id","digit-"+r),o.style).call(l,"filter","url(#motionFilter-"+r+")");return n.forEach(function(t,r){var l;(l=(l=o.append.call(i,"text"),o.attr).call(l,"y",-r*e*a),o.text).call(l,t)}),i},s=function(t,e,a){var r;return(r=(r=(r=o.append.call(t,"g"),o.append).call(r,"text"),o.style).call(r,"filter","url(#createShadowFailFilter)"),o.text).call(r,e)},p=function(t,e){var a;return(a=(a=(a=(a=(a=(a=(a=o.append.call(t,"filter"),o.attr).call(a,"id","motionFilter-"+e),o.attr).call(a,"width","300%"),o.attr).call(a,"x","-100%"),o.append).call(a,"feGaussianBlur"),o.attr).call(a,"class","blurValues"),o.attr).call(a,"in","SourceGraphic"),o.attr).call(a,"stdDeviation","0 0")},v=function(t){var e;return(e=(e=(e=(e=(e=o.append.call(t,"filter"),o.attr).call(e,"id","createShadowFailFilter"),o.attr).call(e,"width","300%"),o.attr).call(e,"x","-100%"),o.append).call(e,"feGaussianBlur"),o.attr).call(e,"stdDeviation","0 0")},y=function(t,e){var a;return(a=(a=(a=(a=(a=(a=(a=(a=(a=(a=(a=(a=(a=(a=(a=(a=(a=(a=(a=(a=(a=(a=(a=(a=o.append.call(t,"linearGradient"),o.attr).call(a,"id","gradient-"+e),o.attr).call(a,"x1","0%"),o.attr).call(a,"y1","0%"),o.attr).call(a,"x2","0%"),o.attr).call(a,"y2","100%"),o.append).call(a,"stop"),o.attr).call(a,"offset","0"),o.attr).call(a,"stop-color","white"),o.attr).call(a,"stop-opacity","0"),o.select).call(a,"#gradient-"+e),o.append).call(a,"stop"),o.attr).call(a,"offset","0.2"),o.attr).call(a,"stop-color","white"),o.attr).call(a,"stop-opacity","1"),o.select).call(a,"#gradient-"+e),o.append).call(a,"stop"),o.attr).call(a,"offset","0.8"),o.attr).call(a,"stop-color","white"),o.attr).call(a,"stop-opacity","1"),o.select).call(a,"#gradient-"+e),o.append).call(a,"stop"),o.attr).call(a,"offset","1"),o.attr).call(a,"stop-color","white"),o.attr).call(a,"stop-opacity","0")},h=function(t,e){var a;return(a=(a=(a=(a=(a=(a=(a=o.append.call(t,"mask"),o.attr).call(a,"id","mask-"+e),o.append).call(a,"rect"),o.attr).call(a,"x",0),o.attr).call(a,"y",0),o.attr).call(a,"width","100%"),o.attr).call(a,"height","100%"),o.attr).call(a,"fill","url(#gradient-"+e+")")},g=function(t,e,a){var r;return(r=(r=(r=o.attr.call(t,"width",e),o.attr).call(r,"height",a),o.attr).call(r,"viewBox","0 0 "+e+" "+a),o.style).call(r,"overflow","hidden")};e["default"]=function(t){var e,a=t.el,r=t.value,l=t.lineHeight,i=void 0===l?1.35:l,m=t.letterSpacing,b=void 0===m?1:m,_=t.animationDelay,x=void 0===_?100:_,j=t.letterAnimationDelay,w=void 0===j?100:j,M=(0,o.select)(a),P=window.getComputedStyle(M),O=parseInt(P.fontSize,10),S=(O*i-O)/2+O/10,D=O*i-S,F=Date.now(),E=0,B=O*i+S;M.innerHTML="";var k=o.append.call(M,"svg"),A=(e=o.append.call(k,"svg"),o.attr).call(e,"mask","url(#mask-"+F+")"),G=o.append.call(k,"defs");y(G,F),h(G,F),v(G);var N=String(r).replace(/ /g," ").split(""),C=N.map(function(t,e){var a=e+"-"+F;return isNaN(parseInt(t,10))?{isDigit:!1,node:s(A,t,O),value:t,offset:{x:0,y:D}}:{isDigit:!0,id:a,node:d(A,O,i,a),filter:p(G,a),value:Number(t),offset:{x:0,y:D}}}),q=[],H=C.filter(function(t){return t.isDigit});H.forEach(function(t,e){var a=(f*u+t.value)*(O*i),r=(0,c["default"])({from:0,to:a,delay:(H.length-1-e)*w+x,step:function(e){var r;t.offset.y=D+e%(O*i*u),(r=t.node,o.attr).call(r,"transform","translate("+t.offset.x+", "+t.offset.y+")");var l=a/2,n=Math.abs(Math.abs(e-l)-l)/100;(r=t.filter,o.attr).call(r,"stdDeviation","0 "+n)},end:0===e?function(){return z()}:function(t){return t}});q.push(r)});var I=function(t){E=0,C.forEach(function(t){var e=t.node.getBBox(),a=e.width;t.offset.x=E,E+=a+b}),C.forEach(function(t){var e;(e=t.node,o.attr).call(e,"transform","translate("+t.offset.x+", "+t.offset.y+")")}),g(k,E,B),q.forEach(function(e){return e.update(t)})},z=(0,n["default"])(I);return z}},function(t,e,a){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t){var e=document.createElementNS(n["default"].svg,t);return this.appendChild(e),e};var l=a(6),n=r(l)},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t,e){return this.setAttribute(t,e),this}},function(t,e,a){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var l=a(7);Object.defineProperty(e,"select",{enumerable:!0,get:function(){return r(l)["default"]}});var n=a(3);Object.defineProperty(e,"append",{enumerable:!0,get:function(){return r(n)["default"]}});var o=a(4);Object.defineProperty(e,"attr",{enumerable:!0,get:function(){return r(o)["default"]}});var i=a(8);Object.defineProperty(e,"style",{enumerable:!0,get:function(){return r(i)["default"]}});var c=a(9);Object.defineProperty(e,"text",{enumerable:!0,get:function(){return r(c)["default"]}})},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={svg:"http://www.w3.org/2000/svg"}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t){return t===String(t)?document.querySelector(t):t}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t,e){var a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return this.style.setProperty(t,e,a),this}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t){return this.textContent=t,this}},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a=function(t){return((t*=2)<=1?t*t*t:(t-=2)*t*t+2)/2};e["default"]=function(t){var e=t.from,r=t.to,l=t.duration,n=void 0===l?3e3:l,o=t.delay,i=void 0===o?0:o,c=t.easing,u=void 0===c?a:c,f=t.start,d=void 0===f?function(t){return t}:f,s=t.step,p=void 0===s?function(t){return t}:s,v=t.end,y=void 0===v?function(t){return t}:v,h=e,g=0,m=!1,b=function(t){if(!m){g||(g=t,d(h));var a=Math.min(Math.max(t-g-i,0),n)/n;h=u(a)*(r-e)+e,p(h),1===a&&(m=!0,y(h))}};return{update:b}}}])}); \ No newline at end of file diff --git a/src/odoo.js b/src/odoo.js index ff414d6..026185d 100644 --- a/src/odoo.js +++ b/src/odoo.js @@ -7,12 +7,13 @@ const ROTATIONS = 3; const createDigitRoulette = (svg, fontSize, lineHeight, id) => { const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0]; - const roulette = svg::append('g')::attr('id', `digit-${id}`); + const roulette = svg::append('g') + ::attr('id', `digit-${id}`) + ::style('filter', `url(#motionFilter-${id})`); + digits.forEach((el, i) => { roulette::append('text') ::attr('y', -i * fontSize * lineHeight) - ::style('font-size', `${fontSize}px`) - ::style('filter', `url(#motionFilter-${id})`) ::text(el); }); return roulette; @@ -21,7 +22,7 @@ const createDigitRoulette = (svg, fontSize, lineHeight, id) => { const createCharacter = (svg, el, fontSize) => svg ::append('g') ::append('text') - ::style('font-size', `${fontSize}px`) + ::style('filter', `url(#createShadowFailFilter)`) ::text(el); const createFilter = (defs, id) => defs::append('filter') @@ -33,6 +34,13 @@ const createFilter = (defs, id) => defs::append('filter') ::attr('in', 'SourceGraphic') ::attr('stdDeviation', '0 0'); +const createShadowFailFilter = (defs) => defs::append('filter') + ::attr('id', `createShadowFailFilter`) + ::attr('width', '300%') + ::attr('x', '-100%') + ::append('feGaussianBlur') + ::attr('stdDeviation', '0 0'); + const createGradient = (defs, id) => defs::append('linearGradient') ::attr('id', `gradient-${id}`) ::attr('x1', '0%') @@ -98,6 +106,7 @@ export default ({ const defs = root::append('defs'); createGradient(defs, salt); createMask(defs, salt); + createShadowFailFilter(defs); const values = String(value) .replace(/ /g, '\u00a0') @@ -137,7 +146,7 @@ export default ({ digit.node::attr('transform', `translate(${digit.offset.x}, ${digit.offset.y})`); const filterOrigin = targetDistance / 2; const motionValue = Math.abs(Math.abs(value - filterOrigin) - filterOrigin) / 100; - select(`#motionFilter-${digit.id} .blurValues`)::attr('stdDeviation', `0 ${motionValue}`); + digit.filter::attr('stdDeviation', `0 ${motionValue}`); }, end: i === 0 ? () => cancelAnimation() : (e) => e });