diff --git a/examples/index.html b/examples/index.html index 1bbad9b..454f638 100644 --- a/examples/index.html +++ b/examples/index.html @@ -7,23 +7,33 @@ +

- + diff --git a/lib/odoo.js b/lib/odoo.js index d9fdbbd..8cb8d87 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(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 a(r){e=requestAnimationFrame(a),t(r)};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){o.attr.call(t,"width",e),o.attr.call(t,"height",a),o.attr.call(t,"viewBox","0 0 "+e+" "+a),o.style.call(t,"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 +!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),c=a(i),u="0123456789ABCDEFGHIJKLMNOPRSTUVWXYZabcdefghijklmnoprstuvwxyz".split(""),f=u.length-1,d=2,s=function(t,e,r,a){var n,l=(n=(n=o.append.call(t,"g"),o.attr).call(n,"id","digit-"+a),o.style).call(n,"filter","url(#motionFilter-"+a+")");return u.forEach(function(t,a){var n;(n=(n=o.append.call(l,"text"),o.attr).call(n,"y",-a*e*r),o.text).call(n,t)}),l},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){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 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")},h=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+")")},m=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.from,n=t.to,i=t.lineHeight,g=void 0===i?1.35:i,b=t.letterSpacing,_=void 0===b?1:b,x=t.animationDelay,j=void 0===x?100:x,M=t.letterAnimationDelay,w=void 0===M?100:M,O=(0,o.select)(r),P=window.getComputedStyle(O),S=parseInt(P.fontSize,10),D=(S*g-S)/2+S/10,E=S*g-D,F=Date.now(),B=0,k=S*g+D;O.innerHTML="";var A=o.append.call(O,"svg"),G=(e=o.append.call(A,"svg"),o.attr).call(e,"mask","url(#mask-"+F+")"),C=o.append.call(A,"defs");y(C,F),h(C,F),v(C);var H=String(a).replace(/ /g," ").split(""),q=String(n).replace(/ /g," ").split(""),z=q.map(function(t,e){var r=e+"-"+F;return{id:r,node:s(G,S,g,r),filter:p(C,r),from:u.indexOf(H[e]),value:u.indexOf(t),offset:{x:0,y:E}}}),I=[];z.forEach(function(t,e){var r=t.from*(S*g),a=(d*f+t.value)*(S*g),n=(0,c["default"])({from:r,to:a,delay:(z.length-1-e)*w+j,step:function(e){var n;t.offset.y=E+e%(S*g*f),(n=t.node,o.attr).call(n,"transform","translate("+t.offset.x+", "+t.offset.y+")");var l=(a-r)/2,i=Math.abs(Math.abs(e-r-l)-l)/100;(n=t.filter,o.attr).call(n,"stdDeviation","0 "+i)},end:0===e?function(){return N()}:function(t){return t}});I.push(n)});var L=function(t){B=0,z.forEach(function(t){var e=t.node.getBBox(),r=e.width;t.offset.x=B,B+=r+_}),z.forEach(function(t){var e;(e=t.node,o.attr).call(e,"transform","translate("+t.offset.x+", "+t.offset.y+")")}),m(A,B,k),I.forEach(function(e){return e.update(t)})},N=(0,l["default"])(L);return N}},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 c=r(9);Object.defineProperty(e,"text",{enumerable:!0,get:function(){return a(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 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,c=t.easing,u=void 0===c?r: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,m=0,g=!1,b=function(t){if(!g){m||(m=t,d(h));var r=Math.min(Math.max(t-m-i,0),l)/l;h=u(r)*(a-e)+e,p(h),1===r&&(g=!0,y(h))}};return{update:b}}}])}); diff --git a/package.json b/package.json index e70f7ce..3795263 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "odoo", - "version": "1.0.2", + "version": "2.0.0", "description": "Canvas2d odometer effect", "main": "src/index.js", "scripts": { diff --git a/src/odoo.js b/src/odoo.js index a960aa9..aab8591 100644 --- a/src/odoo.js +++ b/src/odoo.js @@ -2,11 +2,11 @@ import loop from './loop'; import { select, append, attr, style, text } from './selection'; import transition from './transition'; -const DIGITS_COUNT = 10; -const ROTATIONS = 3; +const digits = '0123456789ABCDEFGHIJKLMNOPRSTUVWXYZabcdefghijklmnoprstuvwxyz'.split(''); +const DIGITS_COUNT = digits.length - 1; +const ROTATIONS = 2; 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}`) ::style('filter', `url(#motionFilter-${id})`); @@ -84,14 +84,14 @@ const setViewBox = (svg, width, height) => { } export default ({ - el, - value, + element, + from, + to, lineHeight = 1.35, letterSpacing = 1, animationDelay = 100, letterAnimationDelay = 100 }) => { - const element = select(el); const computedStyle = window.getComputedStyle(element); const fontSize = parseInt(computedStyle.fontSize, 10); const marginBottom = (fontSize * lineHeight - fontSize) / 2 + fontSize / 10; @@ -109,44 +109,39 @@ export default ({ createMask(defs, salt); createShadowFailFilter(defs); - const values = String(value) + const start = String(from) + .replace(/ /g, '\u00a0') + .split(''); + + const values = String(to) .replace(/ /g, '\u00a0') .split(''); const chars = values.map((char, i) => { const id = `${i}-${salt}`; - if(isNaN(parseInt(char, 10))) { - return { - isDigit: false, - node: createCharacter(svg, char, fontSize), - value: char, - offset: { x: 0, y: offset } - }; - } else { - return { - isDigit: true, - id: id, - node: createDigitRoulette(svg, fontSize, lineHeight, id), - filter: createFilter(defs, id), - value: Number(char), - offset: { x: 0, y: offset } - }; - } + return { + id: id, + node: createDigitRoulette(svg, fontSize, lineHeight, id), + filter: createFilter(defs, id), + from: digits.indexOf(start[i]), + value: digits.indexOf(char), + offset: { x: 0, y: offset } + }; }); const transitions = []; - const digits = chars.filter(char => char.isDigit); - digits.forEach((digit, i) => { + chars.forEach((digit, i) => { + const startPos = digit.from * (fontSize * lineHeight); const targetDistance = (ROTATIONS * DIGITS_COUNT + digit.value) * (fontSize * lineHeight); const digitTransition = transition({ - from: 0, + from: startPos, to: targetDistance, - delay: (digits.length - 1 - i) * letterAnimationDelay + animationDelay, + delay: (chars.length - 1 - i) * letterAnimationDelay + animationDelay, step(value) { digit.offset.y = offset + value % ((fontSize * lineHeight) * DIGITS_COUNT); 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; + const filterOrigin = (targetDistance - startPos) / 2; + const motionValue = Math.abs(Math.abs(value - startPos - filterOrigin) - filterOrigin) / 100; digit.filter::attr('stdDeviation', `0 ${motionValue}`); }, end: i === 0 ? () => cancelAnimation() : (e) => e