{"_id":"vue-check-view","_rev":"7-50a18bf5398a2d237b0655ef2f4ca747","name":"vue-check-view","dist-tags":{"latest":"0.3.0"},"versions":{"0.2.0":{"name":"vue-check-view","version":"0.2.0","description":"Simple vue plugin that checks element position on screen (viewport) and adds classes to element.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["vue","viewport","screen","element","position","dom","scroll","resize"],"author":{"name":"vtimofeev"},"license":"ISC","_id":"vue-check-view@0.2.0","_npmVersion":"5.3.0","_nodeVersion":"8.6.0","_npmUser":{"name":"vtimofeev","email":"vasily.timofeev@gmail.com"},"dist":{"integrity":"sha512-lDIMzTAKCkrE4fipzDHCboCYNDKYyIqlCcDsCEgXwVIeFxskwsnfDlReugea6E54Lx2GoCSYFmHna7bUHP74pg==","shasum":"a7cca353acd2263931b465c693e5f2d6bab62dc6","tarball":"https://registry.npmjs.org/vue-check-view/-/vue-check-view-0.2.0.tgz","fileCount":7,"unpackedSize":11372,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8WfaKPAgnVQAqq3g1eJ0NGNsmJHhx07jdg76jpbvGHwIhAMIDdt8cJ6eqhEuE/24/kSMQ3AToGaR8pDGCD3I8TfCp"}]},"maintainers":[{"name":"vtimofeev","email":"vasily.timofeev@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-check-view_0.2.0_1521120089855_0.9186128783329996"},"_hasShrinkwrap":false},"0.2.1":{"name":"vue-check-view","version":"0.2.1","description":"Simple vue plugin that checks element position on screen (viewport) and adds classes to element.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["vue","viewport","screen","element","position","dom","scroll","resize"],"author":{"name":"vtimofeev"},"license":"ISC","_id":"vue-check-view@0.2.1","_npmVersion":"5.3.0","_nodeVersion":"8.6.0","_npmUser":{"name":"vtimofeev","email":"vasily.timofeev@gmail.com"},"dist":{"integrity":"sha512-827PTBjyUhtUWUwY/yWxypzcTizrmRymk3qFfENtJplfPNmVfLBtXVqtXaiVekBeLTYaDLUxiFsF0Ftx5pIayg==","shasum":"ef9686fa3b2deee67a4b646c574121458d0717d1","tarball":"https://registry.npmjs.org/vue-check-view/-/vue-check-view-0.2.1.tgz","fileCount":7,"unpackedSize":11721,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyeAdfEqYx1Y7loGBfePDHGHxQQd6IStzyAtGwS/aBHwIhAIX1Ew1oiNT9NQJZ1SyZXjSiL7BDbWPnBnMaEiATpC8u"}]},"maintainers":[{"name":"vtimofeev","email":"vasily.timofeev@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-check-view_0.2.1_1521121248767_0.03877664566072192"},"_hasShrinkwrap":false},"0.2.2":{"name":"vue-check-view","version":"0.2.2","description":"Simple vue plugin that checks element position on screen (viewport) and adds classes to element.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["vue","viewport","screen","element","position","dom","scroll","resize"],"author":{"name":"vtimofeev"},"license":"ISC","_id":"vue-check-view@0.2.2","_npmVersion":"5.3.0","_nodeVersion":"8.6.0","_npmUser":{"name":"vtimofeev","email":"vasily.timofeev@gmail.com"},"dist":{"integrity":"sha512-372bPENRNUQyAT6VZuglxtIkJVOeBQQKblGOxskeAup/GdN3HNKghQ9UE5j9nHCHqM4xL39C9MSt/As9xlyhMQ==","shasum":"db0563c1e3c063ffbf5fb94db167477ff572ccd1","tarball":"https://registry.npmjs.org/vue-check-view/-/vue-check-view-0.2.2.tgz","fileCount":8,"unpackedSize":797307,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPkcHmVmvU9FbTDiV1fnfTZHFCBlnmYO+VY22i2HnKRAIhAJxXZTezYw322yDDTKsBy56K15ZC4dXb6rzZfDCIVtZJ"}]},"maintainers":[{"name":"vtimofeev","email":"vasily.timofeev@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-check-view_0.2.2_1521126200738_0.3558036369339339"},"_hasShrinkwrap":false},"0.2.3":{"name":"vue-check-view","version":"0.2.3","description":"Simple vue plugin that checks element position on screen (viewport) and adds classes to element.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/vtimofeev/vue-check-view.git"},"keywords":["vue","vue.js","viewport","screen","element","position","dom","scroll","resize"],"author":{"name":"vtimofeev"},"license":"ISC","gitHead":"ee029a6808492c731d9c6eda39c0d93468e31e11","bugs":{"url":"https://github.com/vtimofeev/vue-check-view/issues"},"homepage":"https://github.com/vtimofeev/vue-check-view#readme","_id":"vue-check-view@0.2.3","_npmVersion":"5.3.0","_nodeVersion":"8.6.0","_npmUser":{"name":"vtimofeev","email":"vasily.timofeev@gmail.com"},"dist":{"integrity":"sha512-Epp2P2pkXzaFMSys3OPuxaHY1BPENu4LL2pzbsD40POnc9pm75VJ0/5u3Wx8XhZYlCU0z0fNgTPQA+e9mQcDvA==","shasum":"0bb8175908eee6e0975c63de71cfc445d251d97a","tarball":"https://registry.npmjs.org/vue-check-view/-/vue-check-view-0.2.3.tgz","fileCount":8,"unpackedSize":797442,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgsj6KofgKR5zPjqPNYH84gGhaZwOOoIBczR7BB+jXgQIhAMOl44nZ1xqs5r7XtI0bKlLcSdZpCEHak6+6n6ZFVy5k"}]},"maintainers":[{"name":"vtimofeev","email":"vasily.timofeev@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-check-view_0.2.3_1521127028028_0.07162770348948588"},"_hasShrinkwrap":false},"0.2.4":{"name":"vue-check-view","version":"0.2.4","description":"Simple vue plugin that checks element position on screen (viewport) and adds classes to element.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/vtimofeev/vue-check-view.git"},"keywords":["vue","vue.js","viewport","screen","element","position","dom","scroll","resize"],"author":{"name":"vtimofeev"},"license":"ISC","gitHead":"9cbc3e31ed8f2fc23e5bbc7ff62a72dfc4d21014","bugs":{"url":"https://github.com/vtimofeev/vue-check-view/issues"},"homepage":"https://github.com/vtimofeev/vue-check-view#readme","_id":"vue-check-view@0.2.4","_npmVersion":"5.6.0","_nodeVersion":"8.11.4","_npmUser":{"name":"vtimofeev","email":"vasily.timofeev@gmail.com"},"dist":{"integrity":"sha512-PqnH8k0ecoaHT0vZUhhzhwBZBq4wEWL68HWm4nnE59wFhhqklv+M8IWA1PAIqKDSTOsIan15iYhFKE2J1Kbn8g==","shasum":"790a081767802ec503362d028558faefe15c4cb3","tarball":"https://registry.npmjs.org/vue-check-view/-/vue-check-view-0.2.4.tgz","fileCount":7,"unpackedSize":797546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcZAmKCRA9TVsSAnZWagAAqSAQAJIrxSJtM/+yDczmRugr\nlPpEkvp3fcrOrZ4cTGmU4AY/A5ydfsxFrDvy4KuEe/Z9/V0rF3HotwevDfDR\n4a2ex/0ozjz4884GKlQ5mQpTKUDCKBHkrL/uyr3uYg7AU47EMZZTUzHFigcL\nflOTb3ABQNAmHhfQyP0qNPMHeCbMdPE0/Vfn5LMvQXRj8XeBmUmegX5qUryl\naC2I4nEQZLbYY96szGeydXO4arUA/I3LNXJdALud0Nb0uHyGgaobaYRh4NF0\nyD9fq7dIe0K5/ILBEZCqQQ1ROC72V03SxQQ8jhSt3mbOf2ot38VDBVcOvY3b\nV+jF6g6ekR758wiHUTIwWIm9NvV3SevvauYh4XHiQ9PwiGrRETpoPEDFGSFX\nNC3Wpk44jYMRoQ8TSs3WgzMiH8vRf2WPMwctZ1o+6MXpi0Osp+HBB6ndbNHq\n7xY82plscOtAUL8/lGo2jj1lpvfhxErcPm9+Fu7WS61vr4mW/PV9YwW5CL8a\nXJACj50u701yyEOWyqNZlHv2uo/F3oE3FqREjjqMW+LsDn8Igc4lJnhZhnaz\nahadv5aG6SFJMe/jWL6Sey/p5JnlE2Ii9bEOWHbTRi8nbbY+FWULQO+ipRyh\niad8fgaWvXiv+pQeVxizLFKXmj5zCOi7TPRb1Szx12ITPDaDEGAz7HUAjW/y\nyPU7\r\n=k1QP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC96gS4XImp5/Vp3VxwomucYuP8hsj5VjOlaCz0mAqF/gIhAIuH8NwUZPhCrbavY1XRC5uZ9oPpVRIJmOW5G+a56E8Y"}]},"maintainers":[{"name":"vtimofeev","email":"vasily.timofeev@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-check-view_0.2.4_1550059913454_0.6970770077867632"},"_hasShrinkwrap":false},"0.3.0":{"name":"vue-check-view","version":"0.3.0","description":"Simple vue plugin that checks element position on screen (viewport) and adds classes to element. ES5 supported.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/vtimofeev/vue-check-view.git"},"keywords":["vue","vue.js","viewport","screen","element","position","dom","scroll","resize"],"author":{"name":"vtimofeev"},"license":"ISC","gitHead":"cd64a23fea0ada514d1553b4b144a9fa1350c7c3","bugs":{"url":"https://github.com/vtimofeev/vue-check-view/issues"},"homepage":"https://github.com/vtimofeev/vue-check-view#readme","_id":"vue-check-view@0.3.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.4","_npmUser":{"name":"vtimofeev","email":"vasily.timofeev@gmail.com"},"dist":{"integrity":"sha512-2IR2m4MCgOG/9UQaIn7cvvqbDcvUmPavun8nBMieRxGbhqvlUorjLIwJqvuFXruBO73HXXbCcrVKxnGr4ub5ag==","shasum":"813509a73916dd99483eaa4b1b24ca189c50ca7b","tarball":"https://registry.npmjs.org/vue-check-view/-/vue-check-view-0.3.0.tgz","fileCount":7,"unpackedSize":798314,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcePgsCRA9TVsSAnZWagAAK+0P/inlF4hlCKQ/MqQ0arH9\nH9zFt+6PHMhwK7cLbtB8gAmb91dDM/5WWda1mGXZQIqpXs27ykjYBI3slPip\nuqZkKDiGbypd0LOxLrPq7EVsYbVNG72eA3nJqdbL0UzmsxtQkK37oyVL/gm1\n1ej4D6n2hKXF1/6Bkq2lyNe3EwyUJtRp1hGWBAPn6c4ZeJb5jcD2XzELq0nw\nW3Wc5JQLSbOk08ntnJ5WzDNLkYce9eiuaNjgNtq9REINWxR8AteJbpdE2AXu\ndYfxghrgfFzsST0AtAOaafypAhWTqLp2RFsmXm720hhqSExLgbX6JZL804Zm\ne/jR2BBh2akso3YS8iTFT/c72etHzpXL8Hq1pr6F17bEpS9jL8fNdJukTd8B\nxjjsIvyDlbJ9jRUvuUvRrZqM/79A+C3uhaPQKW4yHJXF87aBRh3HvR6CWb7X\nJuFziiVlaU4KrQ6v3lbg7DQpSU4VwoIbA+Ha13YxRg4Gs+wLm8GY1V2coSjg\nkbGtkYNQJWZZKzdRmCxMnSMYwYOrHY/j1EmK9LwYW03N9pu8h+fHyIJB2CV2\nMdT14hyHwwskVMffHlWK4e5RSEKtqDBRezkYMjBBwLTVZ1ZS5+LDfxyOYk/8\nUnmQcvE5JSXqF1CFnzdrdJQ0wALHX87JSi80b2NaGzu6N3M22yqeIVegI2+R\n7jIp\r\n=P8hA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBvNICo51a0f7frpDZ/XgsVdO4RXdia4bZ6zxaO/V+PuAiEA7nEC7TlWQrwtGeIwYx+eyEx7kI9F7nIjNVDVPgjouKA="}]},"maintainers":[{"name":"vtimofeev","email":"vasily.timofeev@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-check-view_0.3.0_1551431723357_0.3736647846465857"},"_hasShrinkwrap":false}},"time":{"created":"2018-03-15T13:21:29.854Z","0.2.0":"2018-03-15T13:21:30.179Z","modified":"2022-05-23T12:41:17.514Z","0.2.1":"2018-03-15T13:40:48.849Z","0.2.2":"2018-03-15T15:03:21.035Z","0.2.3":"2018-03-15T15:17:08.188Z","0.2.4":"2019-02-13T12:11:53.603Z","0.3.0":"2019-03-01T09:15:23.623Z"},"maintainers":[{"name":"vtimofeev","email":"vasily.timofeev@gmail.com"}],"description":"Simple vue plugin that checks element position on screen (viewport) and adds classes to element. ES5 supported.","keywords":["vue","vue.js","viewport","screen","element","position","dom","scroll","resize"],"author":{"name":"vtimofeev"},"license":"ISC","readme":"# Check if element is in viewport. Vue.js 2 plugin with SSR support without dependencies. [DEMO](https://vtimofeev.github.io/vue-check-view/index.html)\n\nSimple plugin that checks element position on the screen (viewport) and adds classes to element:\n\n1. In viewport classes: `view-in` and one of [`view-in--gt-half`, `view-in--gt-thrid`, `view-in--full`],\n2. Out viewport classes: `view-out` and one of [`view-out--below`, `view-out--above`]\n\nIt listens `scroll` and `resize` window events and supports modern browsers (Firefox, Chrome, Edge).\nSupports vue.js version 2 and higher.\n\n## Install\n\n```\nnpm i vue vue-check-view --save\n```\n\n```\n\nimport checkView from 'vue-check-view'\nVue.use(checkView)\n\n```\n\nor (only for test)\n\n```\n<script src=\"http://vtimofeev.github.io/vue-check-view/plugin.js\">\n```\n\n\n\n## Add directive 'view' to elements\n\n### Example 1, simple\n\nAuto add classes to element\n\n```\n<div v-view>\n    Content\n</div>\n```\n\n### Example 2, advanced with use handler\n\nAuto add classes to element and executeHandler\n\n```\n<div v-view=\"viewHandler\">\n    Content\n</div>\n```\n\n```\nfuntion viewHandler (e) {\n    console.log(e.type) // 'enter', 'exit', 'progress'\n    console.log(e.percentInView) // 0..1 how much element overlap the viewport\n    console.log(e.percentTop) // 0..1 position of element at viewport 0 - above , 1 - below\n    console.log(e.percentCenter) // 0..1 position the center of element at viewport 0 - center at viewport top, 1 - center at viewport bottom\n    console.log(e.scrollPercent) // 0..1 current scroll position of page\n    console.log(e.scrollValue) // 0..1 last scroll value (change of page scroll offset)\n    console.log(e.target.rect) // element.getBoundingClientRect() result\n}\n```\n\n### Example 3, once time the handler will be executed when element appears on screen\n\n```\n<div v-view.once=\"onceHandler\">\n    Content\n</div>\n```\n\n```\nfuntion onceHandler (e) {\n    console.log(e.type) // 'enter', 'exit', 'progress'\n    console.log(e.percentInView) // 0..1 how much element overlap the viewport\n    console.log(e.percentTop) // 0..1 position of element at viewport 0 - above , 1 - below\n    console.log(e.percentCenter) // 0..1 position the center of element at viewport 0 - center at viewport top, 1 - center at viewport bottom\n    console.log(e.scrollPercent) // 0..1 current scroll position of page\n    console.log(e.scrollValue) // 0..1 last scroll value (change of page scroll offset)\n    console.log(e.target.rect) // element.getBoundingClientRect() result\n}\n```\n\n## DEMO\n\n### Browser\nhttps://vtimofeev.github.io/vue-check-view/index.html\n\n### Live image\n![demo](example/recording-min.gif)","readmeFilename":"readme.md","homepage":"https://github.com/vtimofeev/vue-check-view#readme","repository":{"type":"git","url":"git+https://github.com/vtimofeev/vue-check-view.git"},"bugs":{"url":"https://github.com/vtimofeev/vue-check-view/issues"}}