├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── dist ├── index.js └── index.map ├── package-lock.json ├── package.json └── src ├── counter.js ├── handleCounter.js ├── index.js ├── onClassChange.js └── onWindowScroll.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | # The JSON files contain newlines inconsistently 13 | [*.json] 14 | insert_final_newline = ignore 15 | 16 | # Minified JavaScript files shouldn't be changed 17 | [**.min.js] 18 | indent_style = ignore 19 | insert_final_newline = ignore 20 | 21 | # Makefiles always use tabs for indentation 22 | [Makefile] 23 | indent_style = tab 24 | 25 | # Batch files use tabs for indentation 26 | [*.bat] 27 | indent_style = tab 28 | 29 | [*.md] 30 | trim_trailing_whitespace = false 31 | 32 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "extends": "standard" 3 | }; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | 63 | # build cache 64 | .cache -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # CHANGELOG 2 | 3 | ## v1.1 4 | * Adding componentUpdate hook to verify binding values update 5 | * Fix bug: startValue param was not included on call function 6 | 7 | ### v1.1.1 8 | * Fix bug: binding is not defined 9 | 10 | ## v1.2 11 | * Adding build command 12 | * Minify files 13 | 14 | ### v1.2.1 15 | * fix minify commands 16 | 17 | ### v1.2.2 18 | * fix [#5](https://github.com/mathvaleriano/vue-countup-directive/issues/5) (oldvalue is not defined) 19 | 20 | ### v1.2.3 21 | * added eslint 22 | * added husky 23 | * precommit was configured (its running `npm run lint`) -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Matheus Valeriano 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without endValueation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT endValueED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## THIS PROJECT IS DEPRECATED 2 | This project is not maintained anymore. 3 | 4 | # vue-countup-directive 5 | [NPM](https://www.npmjs.com/package/vue-countup-directive) 6 | 7 | Thanks [@inorganik](https://github.com/inorganik) for create [countUp.js](http://inorganik.github.io/countUp.js/) 8 | 9 | ## Installation 10 | ```npm install --save vue-countup-directive``` 11 | 12 | ## Setup Vue Project 13 | ##### (directives/countup.js) 14 | ``` 15 | import Vue from 'vue' 16 | import options from 'vue-countup-directive' 17 | 18 | Vue.directive('countUp', options) 19 | ``` 20 | 21 | ## Setup Nuxt Project 22 | ##### (~/plugins/countUp.js) 23 | ``` 24 | import Vue from 'vue' 25 | import options from 'vue-countup-directive' 26 | 27 | Vue.directive('countUp', options) 28 | ``` 29 | ##### (nuxt.config.js) 30 | ``` 31 | plugins: [ 32 | ... 33 | { src: '~plugins/countUp.js', ssr: false } 34 | ], 35 | ``` 36 | 37 | ## Usage 38 | This directive can be used with [countUp.js](http://inorganik.github.io/countUp.js/) options. 39 | 40 | You can include the **number of decimals** and the **animation duration** (seconds) at the options paramater. The default is ```{ options: { decimals: 0, duration: 2 } }``` 41 | 42 | The Animation runs once if you set a **once** modifier at the directive otherwise the animation always run after the conditions passed. 43 | 44 | ## > onClassChange 45 | Create an interval that watches for the class changes at **element** or the **watchedElement** (defined by **watchedElId** parameter) 46 | 47 | If once modifier is setted the interval will be clear after once animation 48 | 49 | ### Example: 50 | Once 51 | ``` 52 | 53 | ``` 54 | 55 | Many times 56 | ``` 57 | 58 | ``` 59 | 60 | Look for changes at another element 61 | ``` 62 | Watched Element 63 | 64 | 65 | ``` 66 | 67 | With decimals 68 | ``` 69 | 70 | ``` 71 | 72 | ## > onWindowScroll 73 | Create a window scroll listener. 74 | 75 | The animation runs if the position Y of window scroll is bigger than or equals **watched element** position (passed at the watchedElId parameter). 76 | 77 | If not passed **watchedElId**, the **own element** will be setted like the **watchedElId** 78 | 79 | ### Example: 80 | 81 | Once 82 | ``` 83 | Watched Element 84 | 85 | 86 | ``` 87 | 88 | Many Times 89 | ``` 90 | Watched Element 91 | 92 | 93 | ``` 94 | 95 | No watchedElId passed 96 | ``` 97 | 98 | ``` 99 | 100 | With decimals 101 | ``` 102 | 103 | ``` 104 | 105 | ## No Arg 106 | Start a countUp animation immediately 107 | 108 | ``` 109 | 110 | ``` 111 | 112 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | parcelRequire=function(e,r,n,t){var i="function"==typeof parcelRequire&&parcelRequire,o="function"==typeof require&&require;function u(n,t){if(!r[n]){if(!e[n]){var f="function"==typeof parcelRequire&&parcelRequire;if(!t&&f)return f(n,!0);if(i)return i(n,!0);if(o&&"string"==typeof n)return o(n);var c=new Error("Cannot find module '"+n+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[n][1][r]||r},p.cache={};var l=r[n]=new u.Module(n);e[n][0].call(l.exports,p,l,l.exports,this)}return r[n].exports;function p(e){return u(p.resolve(e))}}u.isParcelRequire=!0,u.Module=function(e){this.id=e,this.bundle=u,this.exports={}},u.modules=e,u.cache=r,u.parent=i,u.register=function(r,n){e[r]=[function(e,r){r.exports=n},{}]};for(var f=0;f1?s.options.decimal+t[1]:"",s.options.useGrouping){for(i="",r=0,o=n.length;rs.endVal,s.frameVal=s.startVal,s.initialized=!0,0):(s.error="[CountUp] startVal ("+t+") or endVal ("+n+") is not a number",1)):(s.error="[CountUp] target is null or undefined",1)))},s.printValue=function(a){var t=s.options.formattingFn(a);"INPUT"===s.d.tagName?this.d.value=t:"text"===s.d.tagName||"tspan"===s.d.tagName?this.d.textContent=t:this.d.innerHTML=t},s.count=function(a){s.startTime||(s.startTime=a),s.timestamp=a;var t=a-s.startTime;s.remaining=s.duration-t,s.options.useEasing?s.countDown?s.frameVal=s.startVal-s.options.easingFn(t,0,s.startVal-s.endVal,s.duration):s.frameVal=s.options.easingFn(t,s.startVal,s.endVal-s.startVal,s.duration):s.countDown?s.frameVal=s.startVal-(s.startVal-s.endVal)*(t/s.duration):s.frameVal=s.startVal+(s.endVal-s.startVal)*(t/s.duration),s.countDown?s.frameVal=s.frameVals.endVal?s.endVal:s.frameVal,s.frameVal=Math.round(s.frameVal*s.dec)/s.dec,s.printValue(s.frameVal),ts.endVal,s.rAF=requestAnimationFrame(s.count))}},s.initialize()&&s.printValue(s.startVal)}}); 4 | },{}],"Avbf":[function(require,module,exports) { 5 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var e=r(require("countup.js"));function r(e){return e&&e.__esModule?e:{default:e}}var o=function(r){var o=r.startValue,t=void 0===o?0:o,u=r.endValue,d=r.el,a=r.options,i=void 0===a?{}:a,s=i.decimals,l=void 0===s?0:s,n=i.duration,v=void 0===n?2:n,c=new e.default(d,t,u,l,v,i);c.error?console.error(c.error):c.start()};exports.default=o; 6 | },{"countup.js":"RgKn"}],"RhEt":[function(require,module,exports) { 7 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var e=t(require("./counter"));function t(e){return e&&e.__esModule?e:{default:e}}var n=function(t){var n=t.condition,r=t.startValue,o=void 0===r?0:r,u=t.endValue,i=t.el,a=t.once,l=t.options,d=i.innerText===o.toString(),s=i.innerText===u.toString();n&&d?(0,e.default)({startValue:o,endValue:u,el:i,options:l}):!a&&s&&(i.innerText=o)};exports.default=n; 8 | },{"./counter":"Avbf"}],"e8sD":[function(require,module,exports) { 9 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.getElOffsetY=void 0;var e=t(require("./handleCounter"));function t(e){return e&&e.__esModule?e:{default:e}}var n=function(e){var t=(e?e.getBoundingClientRect():{}).top+document.body.getBoundingClientRect().top;return t&&!isNaN(t)?t:null};exports.getElOffsetY=n;var o=function(t){var o=t.once,l=t.startValue,r=void 0===l?0:l,d=t.endValue,u=t.el,i=t.watchedElId,a=t.options,s=i?document.getElementById(i):u,c=n(s);window.addEventListener("scroll",function t(){var n=window.scrollY>=Math.ceil(c);(0,e.default)({condition:n,el:u,once:o,endValue:d,startValue:r,options:a}),n&&o&&window.removeEventListener("scroll",t)})};exports.default=o; 10 | },{"./handleCounter":"RhEt"}],"IoMO":[function(require,module,exports) { 11 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var e=t(require("./handleCounter"));function t(e){return e&&e.__esModule?e:{default:e}}var a=function(t){var a=t.once,n=t.watchedElId,l=t.expectedClass,o=t.el,r=t.endValue,u=t.startValue,d=t.options,s=n?document.getElementById(n):o,c=setInterval(function(){var t=-1!==s.className.split(" ").indexOf(l);(0,e.default)({condition:t,el:o,once:a,endValue:r,startValue:u,options:d}),t&&a&&clearInterval(c)},100)};exports.default=a; 12 | },{"./handleCounter":"RhEt"}],"Focm":[function(require,module,exports) { 13 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.LISTENERS=void 0;var e=t(require("./counter")),a=t(require("./onWindowScroll")),o=t(require("./onClassChange"));function t(e){return e&&e.__esModule?e:{default:e}}var n={onWindowScroll:"onWindowScroll",onClassChange:"onClassChange"};exports.LISTENERS=n;var l=function(e){var a=e.oldValue,o=e.value;return JSON.stringify(a)===JSON.stringify(o)},r=function(t){var r=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return function(u){var d=u.arg,s=u.value,i=(u.oldValue,u.modifiers),c=void 0===i?{}:i;if(!r||!l({value:s,oldvalue:oldvalue})){var v=c.once;if(!s)throw new Error("Pass a value to CountUp directive");var f=s.startValue,p=void 0===f?0:f,C=s.endValue,h=s.watchedElId,w=s.options;switch(t.innerText=p,d){case n.onWindowScroll:(0,a.default)({once:v,el:t,watchedElId:h,endValue:C,startValue:p,options:w});break;case n.onClassChange:var S=s.expectedClass;(0,o.default)({once:v,watchedElId:h,expectedClass:S,el:t,endValue:C,startValue:p,options:w});break;default:(0,e.default)({startValue:p,endValue:C,el:t,options:w})}}}},u={inserted:function(e,a){r(e)(a)},componentUpdated:function(e,a){r(e,!0)(a)}};exports.default=u; 14 | },{"./counter":"Avbf","./onWindowScroll":"e8sD","./onClassChange":"IoMO"}]},{},["Focm"], null) 15 | //# sourceMappingURL=/index.map -------------------------------------------------------------------------------- /dist/index.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../node_modules/countup.js/dist/countUp.min.js","counter.js","handleCounter.js","onWindowScroll.js","onClassChange.js","index.js"],"names":["startValue","endValue","el","options","decimals","duration","counter","CountUpJS","error","console","start","condition","once","innerTextIsStartValue","innerText","toString","innerTextIsEndValue","getElOffsetY","position","getBoundingClientRect","top","document","body","isNaN","watchedElId","watchedElement","getElementById","watchedElementPosition","window","addEventListener","listener","scrollY","Math","ceil","removeEventListener","expectedClass","watchedEl","interval","setInterval","classList","className","split","indexOf","clearInterval","LISTENERS","onWindowScroll","onClassChange","bindingValuesAreEquals","oldValue","value","JSON","stringify","executeCounter","verifyBindingUpdate","arg","modifiers","oldvalue","Error","inserted","binding","componentUpdated"],"mappings":"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","file":"index.map","sourceRoot":"../src","sourcesContent":["!function(a,n){\"function\"==typeof define&&define.amd?define(n):\"object\"==typeof exports?module.exports=n(require,exports,module):a.CountUp=n()}(this,function(a,n,t){var e=function(a,n,t,e,i,r){function o(a){var n,t,e,i,r,o,s=a<0;if(a=Math.abs(a).toFixed(l.decimals),a+=\"\",n=a.split(\".\"),t=n[0],e=n.length>1?l.options.decimal+n[1]:\"\",l.options.useGrouping){for(i=\"\",r=0,o=t.length;rl.endVal,l.frameVal=l.startVal,l.initialized=!0,!0):(l.error=\"[CountUp] startVal (\"+n+\") or endVal (\"+t+\") is not a number\",!1)):(l.error=\"[CountUp] target is null or undefined\",!1))},l.printValue=function(a){var n=l.options.formattingFn(a);\"INPUT\"===l.d.tagName?this.d.value=n:\"text\"===l.d.tagName||\"tspan\"===l.d.tagName?this.d.textContent=n:this.d.innerHTML=n},l.count=function(a){l.startTime||(l.startTime=a),l.timestamp=a;var n=a-l.startTime;l.remaining=l.duration-n,l.options.useEasing?l.countDown?l.frameVal=l.startVal-l.options.easingFn(n,0,l.startVal-l.endVal,l.duration):l.frameVal=l.options.easingFn(n,l.startVal,l.endVal-l.startVal,l.duration):l.countDown?l.frameVal=l.startVal-(l.startVal-l.endVal)*(n/l.duration):l.frameVal=l.startVal+(l.endVal-l.startVal)*(n/l.duration),l.countDown?l.frameVal=l.frameVall.endVal?l.endVal:l.frameVal,l.frameVal=Math.round(l.frameVal*l.dec)/l.dec,l.printValue(l.frameVal),nl.endVal,l.rAF=requestAnimationFrame(l.count))}},l.initialize()&&l.printValue(l.startVal)};return e});","import CountUpJS from 'countup.js'\n\nexport default ({ startValue = 0, endValue, el, options = {} }) => {\n const { decimals = 0, duration = 2 } = options\n const counter = new CountUpJS(\n el,\n startValue,\n endValue,\n decimals,\n duration,\n options\n )\n\n if (!counter.error) {\n counter.start()\n } else {\n console.error(counter.error)\n }\n}\n","import countUp from './counter'\n\nexport default ({ condition, startValue = 0, endValue, el, once, options }) => {\n const innerTextIsStartValue = el.innerText === startValue.toString()\n const innerTextIsEndValue = el.innerText === endValue.toString()\n\n if (condition && innerTextIsStartValue) {\n countUp({ startValue, endValue, el, options })\n } else if (!once && innerTextIsEndValue) {\n el.innerText = startValue\n }\n}\n","import handleCountUp from './handleCounter'\n\nexport const getElOffsetY = (el) => {\n const { top } = el ? el.getBoundingClientRect() : {}\n const bodyTop = document.body.getBoundingClientRect().top\n const position = top + bodyTop\n\n return position && !isNaN(position) ? position : null\n}\n\nexport default ({ once, startValue = 0, endValue, el, watchedElId, options }) => {\n const watchedElement = watchedElId ? document.getElementById(watchedElId) : el\n const watchedElementPosition = getElOffsetY(watchedElement)\n\n window.addEventListener('scroll', function listener() {\n const condition = window.scrollY >= Math.ceil(watchedElementPosition)\n handleCountUp({\n condition,\n el,\n once,\n endValue,\n startValue,\n options\n })\n if (condition && once) {\n window.removeEventListener('scroll', listener)\n }\n })\n}\n","import handleCountUp from './handleCounter'\n\nexport default ({ once, watchedElId, expectedClass, el, endValue, startValue, options }) => {\n const watchedEl = watchedElId ? document.getElementById(watchedElId) : el\n\n const interval = setInterval(() => {\n const classList = watchedEl.className.split(' ')\n const condition = classList.indexOf(expectedClass) !== -1\n\n handleCountUp({\n condition,\n el,\n once,\n endValue,\n startValue,\n options\n })\n\n if (condition && once) {\n clearInterval(interval)\n }\n }, 100)\n}\n","import counter from './counter'\nimport onWindowScroll from './onWindowScroll'\nimport onClassChange from './onClassChange'\n\nexport const LISTENERS = {\n onWindowScroll: 'onWindowScroll',\n onClassChange: 'onClassChange'\n}\n\nconst bindingValuesAreEquals = ({ oldValue, value }) => (\n JSON.stringify(oldValue) === JSON.stringify(value)\n)\n\nconst executeCounter = (el, verifyBindingUpdate = false) => ({ arg, value, oldValue, modifiers = {} }) => {\n if (verifyBindingUpdate && bindingValuesAreEquals({ value, oldvalue })) {\n return\n }\n\n const { once } = modifiers\n\n if (value) {\n const { startValue = 0, endValue, watchedElId, options } = value\n el.innerText = startValue\n\n switch (arg) {\n case LISTENERS.onWindowScroll:\n onWindowScroll({ once, el, watchedElId, endValue, startValue, options })\n break\n case LISTENERS.onClassChange:\n const { expectedClass } = value\n\n onClassChange({ once, watchedElId, expectedClass, el, endValue, startValue, options })\n break\n default:\n counter({ startValue, endValue, el, options })\n }\n } else {\n throw new Error('Pass a value to CountUp directive')\n }\n}\n\nexport default {\n inserted(el, binding) {\n executeCounter(el)(binding)\n },\n componentUpdated (el, binding) {\n executeCounter(el, true)(binding)\n }\n}\n"]} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-countup-directive", 3 | "version": "1.2.3", 4 | "description": "Vue Directive that creates a countup animation", 5 | "main": "dist/index.js", 6 | "scripts": { 7 | "build": "NODE_ENV=production ./node_modules/.bin/parcel build src/index.js", 8 | "lint": "./node_modules/.bin/eslint src/ --fix" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/mathvaleriano/vue-countup-directive.git" 13 | }, 14 | "keywords": [ 15 | "vue", 16 | "vue-directive", 17 | "countUp", 18 | "countUp.js", 19 | "countUp-directive", 20 | "vue-countup-directive" 21 | ], 22 | "author": "https://github.com/mathvaleriano", 23 | "license": "MIT", 24 | "bugs": { 25 | "url": "https://github.com/mathvaleriano/vue-countup-directive/issues" 26 | }, 27 | "homepage": "https://github.com/mathvaleriano/vue-countup-directive#readme", 28 | "dependencies": { 29 | "countup.js": "^1.9.3" 30 | }, 31 | "devDependencies": { 32 | "eslint": "^5.13.0", 33 | "eslint-config-standard": "^12.0.0", 34 | "eslint-plugin-import": "^2.16.0", 35 | "eslint-plugin-node": "^8.0.1", 36 | "eslint-plugin-promise": "^4.0.1", 37 | "eslint-plugin-standard": "^4.0.0", 38 | "husky": "^1.3.1", 39 | "parcel-bundler": "^1.11.0" 40 | }, 41 | "husky": { 42 | "pre-commit": "npm run lint" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/counter.js: -------------------------------------------------------------------------------- 1 | import CountUpJS from 'countup.js' 2 | 3 | export default ({ startValue = 0, endValue, el, options = {} }) => { 4 | const { decimals = 0, duration = 2 } = options 5 | const counter = new CountUpJS( 6 | el, 7 | startValue, 8 | endValue, 9 | decimals, 10 | duration, 11 | options 12 | ) 13 | 14 | if (!counter.error) { 15 | counter.start() 16 | } else { 17 | console.error(counter.error) 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/handleCounter.js: -------------------------------------------------------------------------------- 1 | import countUp from './counter' 2 | 3 | export default ({ condition, startValue = 0, endValue, el, once, options }) => { 4 | const innerTextIsStartValue = el.innerText === startValue.toString() 5 | const innerTextIsEndValue = el.innerText === endValue.toString() 6 | 7 | if (condition && innerTextIsStartValue) { 8 | countUp({ startValue, endValue, el, options }) 9 | } else if (!once && innerTextIsEndValue) { 10 | el.innerText = startValue 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import counter from './counter' 2 | import onWindowScroll from './onWindowScroll' 3 | import onClassChange from './onClassChange' 4 | 5 | export const LISTENERS = { 6 | onWindowScroll: 'onWindowScroll', 7 | onClassChange: 'onClassChange' 8 | } 9 | 10 | const bindingValuesAreEquals = ({ oldValue, value }) => ( 11 | JSON.stringify(oldValue) === JSON.stringify(value) 12 | ) 13 | 14 | const executeCounter = (el, verifyBindingUpdate = false) => ({ arg, value, oldValue, modifiers = {} }) => { 15 | if (verifyBindingUpdate && bindingValuesAreEquals({ value, oldValue })) { 16 | return 17 | } 18 | 19 | const { once } = modifiers 20 | 21 | if (value) { 22 | const { startValue = 0, endValue, watchedElId, options } = value 23 | el.innerText = startValue 24 | 25 | switch (arg) { 26 | case LISTENERS.onWindowScroll: 27 | onWindowScroll({ once, el, watchedElId, endValue, startValue, options }) 28 | break 29 | case LISTENERS.onClassChange: 30 | const { expectedClass } = value 31 | 32 | onClassChange({ once, watchedElId, expectedClass, el, endValue, startValue, options }) 33 | break 34 | default: 35 | counter({ startValue, endValue, el, options }) 36 | } 37 | } else { 38 | throw new Error('Pass a value to CountUp directive') 39 | } 40 | } 41 | 42 | export default { 43 | inserted (el, binding) { 44 | executeCounter(el)(binding) 45 | }, 46 | componentUpdated (el, binding) { 47 | executeCounter(el, true)(binding) 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/onClassChange.js: -------------------------------------------------------------------------------- 1 | import handleCountUp from './handleCounter' 2 | 3 | export default ({ once, watchedElId, expectedClass, el, endValue, startValue, options }) => { 4 | const watchedEl = watchedElId ? document.getElementById(watchedElId) : el 5 | 6 | const interval = setInterval(() => { 7 | const classList = watchedEl.className.split(' ') 8 | const condition = classList.indexOf(expectedClass) !== -1 9 | 10 | handleCountUp({ 11 | condition, 12 | el, 13 | once, 14 | endValue, 15 | startValue, 16 | options 17 | }) 18 | 19 | if (condition && once) { 20 | clearInterval(interval) 21 | } 22 | }, 100) 23 | } 24 | -------------------------------------------------------------------------------- /src/onWindowScroll.js: -------------------------------------------------------------------------------- 1 | import handleCountUp from './handleCounter' 2 | 3 | export const getElOffsetY = (el) => { 4 | const { top } = el ? el.getBoundingClientRect() : {} 5 | const bodyTop = document.body.getBoundingClientRect().top 6 | const position = top + bodyTop 7 | 8 | return position && !isNaN(position) ? position : null 9 | } 10 | 11 | export default ({ once, startValue = 0, endValue, el, watchedElId, options }) => { 12 | const watchedElement = watchedElId ? document.getElementById(watchedElId) : el 13 | const watchedElementPosition = getElOffsetY(watchedElement) 14 | 15 | window.addEventListener('scroll', function listener () { 16 | const condition = window.scrollY >= Math.ceil(watchedElementPosition) 17 | handleCountUp({ 18 | condition, 19 | el, 20 | once, 21 | endValue, 22 | startValue, 23 | options 24 | }) 25 | if (condition && once) { 26 | window.removeEventListener('scroll', listener) 27 | } 28 | }) 29 | } 30 | --------------------------------------------------------------------------------