├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitignore
├── README.md
├── build
    ├── webpack.base.conf.js
    └── webpack.min.conf.js
├── dist
    ├── ScrollMagnetContainer.vue
    ├── ScrollMagnetItem.vue
    └── vue-scroll-magnet.min.js
├── docs
    ├── .gitignore
    ├── _config.yml
    ├── package.json
    ├── public
    │   ├── 2016
    │   │   └── 11
    │   │   │   └── 29
    │   │   │       └── a
    │   │   │           └── index.html
    │   ├── archives
    │   │   └── index.html
    │   ├── atom.xml
    │   ├── css
    │   │   └── apollo.css
    │   ├── docs
    │   │   └── index.html
    │   ├── examples
    │   │   └── index.html
    │   ├── favicon.png
    │   ├── font
    │   │   ├── sourcesanspro.woff
    │   │   └── sourcesanspro.woff2
    │   ├── index.html
    │   ├── scss
    │   │   └── apollo.scss
    │   └── sitemap.xml
    ├── scaffolds
    │   ├── draft.md
    │   ├── page.md
    │   └── post.md
    └── source
    │   ├── _posts
    │       └── a.md
    │   ├── docs
    │       └── index.md
    │   └── examples
    │       └── index.md
├── index.html
├── package.json
├── src
    ├── ScrollMagnetContainer.vue
    ├── ScrollMagnetItem.vue
    └── index.js
├── test
    └── unit
    │   ├── .eslintrc
    │   ├── index.js
    │   ├── karma.conf.js
    │   ├── specs
    │       ├── ScrollMagnetContainer.spec.js
    │       └── ScrollMagnetItem.spec.js
    │   └── utils
    │       └── index.js
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "stage-2"],
3 |   "plugins": ["transform-runtime"],
4 |   "comments": false
5 | }
6 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | build/*.js
2 | config/*.js
3 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "ssense/client"
3 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | npm-debug.log
4 | test/unit/coverage
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-scroll-magnet
 2 | 
 3 | ## What is Vue Scroll Magnet?
 4 | 
 5 | Vue Scroll Magnet is a pair of component wrappers which allow elements to follow the viewport while scrolling and then anchor at the upper and lower extremeties of their parent container. This module is inspired by a jQuery plugin called <a href="//github.com/leafo/sticky-kit">Sticky kit</a>.
 6 | 
 7 | ## Installation
 8 | 
 9 | > This component relies on ES6 and may not be compatible with Vue 1.x projects.
10 | 
11 | ``` bash
12 | npm install -S vue-scroll-magnet
13 | ```
14 | 
15 | ## Usage (Global)
16 | Install the components globally:
17 | ``` js
18 | import Vue from 'vue';
19 | import VueScrollMagnet from 'vue-scroll-magnet';
20 | 
21 | Vue.use(VueScrollMagnet);
22 | ```
23 | 
24 | ## Usage (Component)
25 | Include the wrappers into your component using import:
26 | ``` js
27 | /* inside your Vue component's script tag */
28 | 
29 | import { ScrollMagnetContainer, ScrollMagnetItem } from 'vue-scroll-magnet';
30 | 
31 | export default {
32 |   ...
33 |   components: {
34 |     ScrollMagnetContainer,
35 |     ScrollMagnetItem
36 |   }
37 |   ...
38 | };
39 | ```
40 | 
41 | ### HTML structure
42 | The scrollable height boundary will be determined as the direct parent of the &lt;scroll-magnet-container&gt; by default, however it can be configured using an element selector which it can use as a fixed context.
43 | 
44 | In the example below, &lt;scroll-magnet-container&gt; will automatically use the top of #app as its upper boundary and its height of 500px as its lower boundary unless a specific element context is provided.
45 | 
46 | ``` html
47 | <div id="app" style="height: 500px;">
48 |   <scroll-magnet-container>
49 |     <scroll-magnet-item>This content will scroll</scroll-magnet-item>
50 |   </scroll-magnet-container>
51 | </div>
52 | ```
53 | 
54 | ### Tests
55 | To run unit tests & code coverage:
56 | ``` bash
57 | npm test
58 | ```


--------------------------------------------------------------------------------
/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const webpack = require('webpack');
 3 | const npmCfg = require('../package.json');
 4 | const projectRoot = path.resolve(__dirname, '../');
 5 | 
 6 | var banner = [
 7 |   'vue-scroll-magnet v' + npmCfg.version,
 8 |   '(c) ' + (new Date().getFullYear()) + ' ' + npmCfg.author,
 9 |   npmCfg.homepage
10 | ].join('\n')
11 | 
12 | module.exports = {
13 |   entry: './src/',
14 |   output: {
15 |     path: path.resolve(__dirname, '../dist'),
16 |     filename: 'vue-scroll-magnet.js',
17 |     library: 'VueScrollMagnet',
18 |     libraryTarget: 'umd'
19 |   },
20 |   resolve: {
21 |     extensions: ['', '.js', '.vue'],
22 |     fallback: [path.join(__dirname, '../node_modules')],
23 |     alias: {
24 |       'src': path.resolve(__dirname, '../src'),
25 |       vue: 'vue/dist/vue.js'
26 |     }
27 |   },
28 |   resolveLoader: {
29 |     fallback: [path.join(__dirname, '../node_modules')]
30 |   },
31 |   module: {
32 |     loaders: [
33 |       {
34 |         test: /\.vue$/,
35 |         loader: 'vue'
36 |       },
37 |       {
38 |         test: /\.js$/,
39 |         loader: 'babel',
40 |         include: projectRoot,
41 |         exclude: /node_modules/,
42 |       }
43 |     ]
44 |   },
45 |   vue: {
46 |     loaders: {
47 |       js: 'babel!eslint'
48 |     }
49 |   },
50 |   plugins: [
51 |     new webpack.BannerPlugin(banner)
52 |   ]
53 | }


--------------------------------------------------------------------------------
/build/webpack.min.conf.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack')
 2 | const CopyWebpackPlugin = require('copy-webpack-plugin')
 3 | const base = require('./webpack.base.conf')
 4 | 
 5 | var config = Object.assign({}, base)
 6 | 
 7 | config.output.filename = 'vue-scroll-magnet.min.js'
 8 | 
 9 | config.plugins = (config.plugins || []).concat([
10 |   new webpack.optimize.UglifyJsPlugin({
11 |       compress: { warnings: false },
12 |       sourceMap: false
13 |   }),
14 |   new CopyWebpackPlugin([
15 |     { from: './src/ScrollMagnetContainer.vue' },
16 |     { from: './src/ScrollMagnetItem.vue' }
17 |   ]),
18 |   new webpack.DefinePlugin({
19 |     'process.env': {
20 |       NODE_ENV: '"production"'
21 |     }
22 |   })
23 | ])
24 | 
25 | module.exports = config


--------------------------------------------------------------------------------
/dist/ScrollMagnetContainer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="scroll-magnet-container" :style="`height: ${height}px`">
  3 |     <slot></slot>
  4 |   </div>
  5 | </template>
  6 | 
  7 | <script>
  8 |   /* eslint-disable no-undef */
  9 |   export default {
 10 |     name: "scroll-magnet-container",
 11 |     data() {
 12 |       return {
 13 |         width: 0,
 14 |         height: 0,
 15 |         offsetTop: 0,
 16 |         scrollTop: 0,
 17 |         mutationObserver: null,
 18 |         target: null,
 19 |       }
 20 |     },
 21 |     props: {
 22 |       boundsElementSelector: {
 23 |         type: String,
 24 |         default: "",
 25 |         required: false,
 26 |       },
 27 |     },
 28 |     created() {
 29 |       this.attachScroll()
 30 |       this.attachResize()
 31 |     },
 32 |     mounted() {
 33 |       // Assign a target element to the container. This element will be used as a reference
 34 |       // for the height of the scrollable area.
 35 |       if (!this.boundsElementSelector) {
 36 |         // If no prop is provided, use the parent element of <scroll-magnet-container>
 37 |         this.target = this.$el.parentElement
 38 |       } else {
 39 |         // Find the element by its selector and assign it as the target
 40 |         const $el = document.querySelector(this.boundsElementSelector)
 41 |         if ($el) {
 42 |           this.target = $el
 43 |         }
 44 |       }
 45 | 
 46 |       this.getElementPosition()
 47 |       this.attachMutationObserver()
 48 |     },
 49 |     beforeUpdate() {
 50 |       this.$nextTick(() => {
 51 |         this.getScrollPosition();
 52 |         this.getElementPosition({ recalcWidth: true, recalcHeight: true });
 53 |       });
 54 |     },
 55 |     destroyed() {
 56 |       this.detachScroll()
 57 |       this.detachResize()
 58 |       this.detachMutationObserver()
 59 |     },
 60 |     methods: {
 61 |       /**
 62 |        * Attach a scroll listener to the window and update scrollTop data attribute
 63 |        * Child scroll magnets will listen on this scroll value to determine their position
 64 |        */
 65 |       attachScroll() {
 66 |         if (typeof window !== "undefined") {
 67 |           this.scrollListener = window.addEventListener("scroll", () => {
 68 |             this.getScrollPosition()
 69 |             this.getElementPosition()
 70 |           })
 71 |         }
 72 |       },
 73 |       /**
 74 |        * Remove the scroll event listener
 75 |        */
 76 |       detachScroll() {
 77 |         if (typeof window !== "undefined") {
 78 |           window.removeEventListener("scroll", this.scrollListener)
 79 |         }
 80 |       },
 81 |       /**
 82 |        * Attach the resize event listener
 83 |        */
 84 |       attachResize() {
 85 |         if (typeof window !== "undefined") {
 86 |           this.resizeListener = window.addEventListener("resize", () => {
 87 |             setTimeout(() => {
 88 |               this.getScrollPosition()
 89 |               this.getElementPosition({ recalcWidth: true, recalcHeight: true })
 90 |             }, 16)
 91 |           })
 92 |         }
 93 |       },
 94 |       /**
 95 |        * Remove the resize event listener
 96 |        */
 97 |       detachResize() {
 98 |         if (typeof window !== "undefined") {
 99 |           window.removeEventListener("resize", this.resizeListener)
100 |         }
101 |       },
102 |       /**
103 |        * A mutation observer is used to detect changes to the containing node
104 |        * in order to keep the magnet container in sync with the height its reference node.
105 |        */
106 |       attachMutationObserver() {
107 |         if (typeof window !== "undefined") {
108 |           const MutationObserver = window.MutationObserver
109 |            || window.WebKitMutationObserver
110 |            || window.MozMutationObserver
111 | 
112 |           if (MutationObserver) {
113 |             const config = { attributes: true }
114 | 
115 |             this.mutationObserver = new MutationObserver(() => {
116 |               // When the reference element changes, we must recompute the scroll attributes
117 |               this.getElementPosition({ recalcWidth: true, recalcHeight: true })
118 | 
119 |               // The child magnet item listens for changes to this.scrollTop in this component
120 |               // to update itself. this.scrollTop is manually adjusted so that the child updates
121 |               // when the parent does.
122 |               this.scrollTop = this.getScrollY() + 1
123 |               this.$nextTick(() => { this.scrollTop = this.getScrollY() })
124 |             })
125 |             if (this.target) {
126 |               this.mutationObserver.observe(this.target, config)
127 |             }
128 |           }
129 |         }
130 |       },
131 |       /**
132 |        * Stop listening to mutation changes
133 |        */
134 |       detachMutationObserver() {
135 |         if (this.mutationObserver) {
136 |           this.mutationObserver.disconnect()
137 |         }
138 |       },
139 |       /**
140 |        * Get the container"s dimensions and offset and update data attributes
141 |        * @param  {object} options Configuration object for options
142 |        */
143 |       getElementPosition(options) {
144 |         const recalcWidth = (options && options.recalcWidth) || false
145 |         const recalcHeight = (options && options.recalcHeight) || false
146 | 
147 |         this.offsetTop = this.$el.getBoundingClientRect().top + this.getScrollY()
148 | 
149 |         if (!this.width > 0 || recalcWidth) {
150 |           this.width = (this.$el && this.$el.clientWidth) || 0
151 |         }
152 | 
153 |         if (!this.height > 0 || recalcHeight) {
154 |           this.height = (this.target && this.target.clientHeight) || 0
155 |         }
156 |       },
157 |       /**
158 |        * Recalculate the scroll container"s position
159 |        */
160 |       getScrollPosition() {
161 |         this.scrollTop = this.getScrollY()
162 |         this.offsetTop = this.$el.getBoundingClientRect().top + this.getScrollY()
163 |       },
164 |       /**
165 |        * Get the current scroll position
166 |        * @return {number} Scroll position
167 |        */
168 |       getScrollY() {
169 |         if (typeof window === "undefined") {
170 |           return 0
171 |         }
172 | 
173 |         // pageYOffset for IE compatibility
174 |         return window.scrollY || window.pageYOffset
175 |       },
176 |     },
177 |   }
178 | </script>
179 | 
180 | <style scoped>
181 |   .scroll-magnet-container {
182 |     position: relative;
183 |   }
184 | </style>


--------------------------------------------------------------------------------
/dist/ScrollMagnetItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="scroll-magnet-item"
  4 |     v-bind:style="`width: ${width > 0 && width}px; top: ${top}`"
  5 |     v-bind:class="{ 'is-scrolling': isScrolling, 'is-bottomed': isBottomed }">
  6 |     <slot></slot>
  7 |   </div>
  8 | </template>
  9 | 
 10 | <script>
 11 |   export default {
 12 |     name: "scroll-magnet-item",
 13 |     data() {
 14 |       return {
 15 |         nearestContainer: undefined,
 16 |         width: 0,
 17 |         height: 0,
 18 |         top: 0,
 19 |         scrollDist: 0,
 20 |         scrollEnd: 0,
 21 |         isBottomed: false,
 22 |         isScrolling: false,
 23 |       }
 24 |     },
 25 |     props: {
 26 |       offsetTopPad: {
 27 |         type: Number,
 28 |         default: 0,
 29 |         required: false,
 30 |       },
 31 |     },
 32 |     created() {
 33 |       this.nearestContainer = this.getNearestMagnetContainer()
 34 |     },
 35 |     mounted() {
 36 |       // Get and set initial state dependend on DOM attributes
 37 |       this.setMagnetHeight()
 38 | 
 39 |       this.$nextTick(() => {
 40 |         this.setMagnetStatus(this.nearestContainer)
 41 |         this.setMagnetWidth()
 42 |       })
 43 | 
 44 |       // Listen on changes to the parent container"s width and update the item"s width accordingly
 45 |       this.$watch("nearestContainer.width", () => {
 46 |         this.width = this.nearestContainer.width
 47 |       })
 48 | 
 49 |       // Listen on changes to the scroll position from the parent and update the magnet"s status
 50 |       this.$watch("nearestContainer.scrollTop", () => {
 51 |         this.setMagnetStatus(this.nearestContainer)
 52 |       })
 53 |     },
 54 |     methods: {
 55 |       /**
 56 |        * Find the nearest container component
 57 |        * @return {object} The matching Vue component object
 58 |        */
 59 |       getNearestMagnetContainer() {
 60 |         return this.checkParentForMatch(this.$parent)
 61 |       },
 62 |       /**
 63 |        * Recursively lookup nearest parent which is a scroll magnet container
 64 |        * @param  {object} parent The parent"s Vue component object
 65 |        * @return {object}        The matching Vue component object
 66 |        */
 67 |       checkParentForMatch(parent) {
 68 |         return (
 69 |           parent && parent.$options._componentTag === "scroll-magnet-container" // eslint-disable-line no-underscore-dangle,max-len
 70 |           ) ? parent : this.checkParentForMatch(parent)
 71 |       },
 72 |       /**
 73 |        * Assign the magnet"s width to match the parent"s width
 74 |        * This will be used as an inline CSS property on the magnet
 75 |        */
 76 |       setMagnetWidth() {
 77 |         this.width = this.nearestContainer.width
 78 |       },
 79 |       /**
 80 |        * Assign the magnet"s height to match its content
 81 |        * This is used as a reference for how tall the magnet is while scrolling
 82 |        */
 83 |       setMagnetHeight() {
 84 |         const viewportOffset = this.$el.getBoundingClientRect()
 85 | 
 86 |         this.height = viewportOffset.height
 87 |       },
 88 |       /**
 89 |        * Update the magnet"s status while scrolling
 90 |        */
 91 |       setMagnetStatus(nearestContainer) {
 92 |         this.setMagnetHeight() // Recheck for any changes in magnet height
 93 | 
 94 |         // The distance scrolled within the bounds (Number)
 95 |         this.scrollDist = (nearestContainer.scrollTop + this.height)
 96 | 
 97 |         // The maximum scrollable distance (Number)
 98 |         this.scrollEnd = (nearestContainer.offsetTop + (nearestContainer.height - this.offsetTopPad))
 99 | 
100 |         // Is the item still within the bounds? (Boolean)
101 |         this.isWithinHeight = (this.scrollDist < this.scrollEnd)
102 | 
103 |         // Is the item currently scrolling? (Boolean)
104 |         this.isScrolling = (
105 |           (nearestContainer.scrollTop + this.offsetTopPad)
106 |           >= nearestContainer.offsetTop && this.isWithinHeight
107 |         )
108 | 
109 |         // Should the item stick to the bottom of the bounds? (Boolean)
110 |         this.isBottomed = (this.scrollDist >= this.scrollEnd)
111 | 
112 |         // Item"s CSS top value (Number)
113 |         this.top = (this.isBottomed ? "auto" : `${this.offsetTopPad}px`)
114 |       },
115 |     },
116 |   }
117 | </script>
118 | 
119 | <style scoped>
120 |   .scroll-magnet-item {
121 |     position: relative;
122 |     width: 100%;
123 |   }
124 | 
125 |   .is-scrolling {
126 |     position: fixed;
127 |     top: 0;
128 |   }
129 | 
130 |   .is-bottomed {
131 |     position: absolute;
132 |     bottom: 0;
133 |   }
134 | </style>


--------------------------------------------------------------------------------
/dist/vue-scroll-magnet.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 |  * vue-scroll-magnet v0.3.7
3 |  * (c) 2017 Todd Beauchamp <toddbee@gmail.com>
4 |  * 
5 |  */
6 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueScrollMagnet=e():t.VueScrollMagnet=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return t[i].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";var i=n(1),o=n(8);t.exports={install:function(t){t.component("scroll-magnet-container",i),t.component("scroll-magnet-item",o)},ScrollMagnetContainer:i,ScrollMagnetItem:o}},function(t,e,n){var i,o;n(2),i=n(6);var r=n(7);o=i=i||{},"object"!=typeof i.default&&"function"!=typeof i.default||(o=i=i.default),"function"==typeof o&&(o=o.options),o.render=r.render,o.staticRenderFns=r.staticRenderFns,o._scopeId="data-v-d9583ad8",t.exports=i},function(t,e,n){var i=n(3);"string"==typeof i&&(i=[[t.id,i,""]]);n(5)(i,{});i.locals&&(t.exports=i.locals)},function(t,e,n){e=t.exports=n(4)(),e.push([t.id,".scroll-magnet-container[data-v-d9583ad8]{position:relative}",""])},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e<this.length;e++){var n=this[e];n[2]?t.push("@media "+n[2]+"{"+n[1]+"}"):t.push(n[1])}return t.join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var i={},o=0;o<this.length;o++){var r=this[o][0];"number"==typeof r&&(i[r]=!0)}for(o=0;o<e.length;o++){var s=e[o];"number"==typeof s[0]&&i[s[0]]||(n&&!s[2]?s[2]=n:n&&(s[2]="("+s[2]+") and ("+n+")"),t.push(s))}},t}},function(t,e,n){function i(t,e){for(var n=0;n<t.length;n++){var i=t[n],o=u[i.id];if(o){o.refs++;for(var r=0;r<o.parts.length;r++)o.parts[r](i.parts[r]);for(;r<i.parts.length;r++)o.parts.push(c(i.parts[r],e))}else{for(var s=[],r=0;r<i.parts.length;r++)s.push(c(i.parts[r],e));u[i.id]={id:i.id,refs:1,parts:s}}}}function o(t){for(var e=[],n={},i=0;i<t.length;i++){var o=t[i],r=o[0],s=o[1],a=o[2],c=o[3],l={css:s,media:a,sourceMap:c};n[r]?n[r].parts.push(l):e.push(n[r]={id:r,parts:[l]})}return e}function r(t,e){var n=p(),i=m[m.length-1];if("top"===t.insertAt)i?i.nextSibling?n.insertBefore(e,i.nextSibling):n.appendChild(e):n.insertBefore(e,n.firstChild),m.push(e);else{if("bottom"!==t.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");n.appendChild(e)}}function s(t){t.parentNode.removeChild(t);var e=m.indexOf(t);e>=0&&m.splice(e,1)}function a(t){var e=document.createElement("style");return e.type="text/css",r(t,e),e}function c(t,e){var n,i,o;if(e.singleton){var r=v++;n=g||(g=a(e)),i=l.bind(null,n,r,!1),o=l.bind(null,n,r,!0)}else n=a(e),i=d.bind(null,n),o=function(){s(n)};return i(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;i(t=e)}else o()}}function l(t,e,n,i){var o=n?"":i.css;if(t.styleSheet)t.styleSheet.cssText=w(e,o);else{var r=document.createTextNode(o),s=t.childNodes;s[e]&&t.removeChild(s[e]),s.length?t.insertBefore(r,s[e]):t.appendChild(r)}}function d(t,e){var n=e.css,i=e.media,o=e.sourceMap;if(i&&t.setAttribute("media",i),o&&(n+="\n/*# sourceURL="+o.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}var u={},h=function(t){var e;return function(){return"undefined"==typeof e&&(e=t.apply(this,arguments)),e}},f=h(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),p=h(function(){return document.head||document.getElementsByTagName("head")[0]}),g=null,v=0,m=[];t.exports=function(t,e){e=e||{},"undefined"==typeof e.singleton&&(e.singleton=f()),"undefined"==typeof e.insertAt&&(e.insertAt="bottom");var n=o(t);return i(n,e),function(t){for(var r=[],s=0;s<n.length;s++){var a=n[s],c=u[a.id];c.refs--,r.push(c)}if(t){var l=o(t);i(l,e)}for(var s=0;s<r.length;s++){var c=r[s];if(0===c.refs){for(var d=0;d<c.parts.length;d++)c.parts[d]();delete u[c.id]}}}};var w=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join("\n")}}()},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"scroll-magnet-container",data:function(){return{width:0,height:0,offsetTop:0,scrollTop:0,mutationObserver:null,target:null}},props:{boundsElementSelector:{type:String,default:"",required:!1}},created:function(){this.attachScroll(),this.attachResize()},mounted:function(){if(this.boundsElementSelector){var t=document.querySelector(this.boundsElementSelector);t&&(this.target=t)}else this.target=this.$el.parentElement;this.getElementPosition(),this.attachMutationObserver()},beforeUpdate:function(){var t=this;this.$nextTick(function(){t.getScrollPosition(),t.getElementPosition({recalcWidth:!0,recalcHeight:!0})})},destroyed:function(){this.detachScroll(),this.detachResize(),this.detachMutationObserver()},methods:{attachScroll:function(){var t=this;"undefined"!=typeof window&&(this.scrollListener=window.addEventListener("scroll",function(){t.getScrollPosition(),t.getElementPosition()}))},detachScroll:function(){"undefined"!=typeof window&&window.removeEventListener("scroll",this.scrollListener)},attachResize:function(){var t=this;"undefined"!=typeof window&&(this.resizeListener=window.addEventListener("resize",function(){setTimeout(function(){t.getScrollPosition(),t.getElementPosition({recalcWidth:!0,recalcHeight:!0})},16)}))},detachResize:function(){"undefined"!=typeof window&&window.removeEventListener("resize",this.resizeListener)},attachMutationObserver:function(){var t=this;if("undefined"!=typeof window){var e=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver;if(e){var n={attributes:!0};this.mutationObserver=new e(function(){t.getElementPosition({recalcWidth:!0,recalcHeight:!0}),t.scrollTop=t.getScrollY()+1,t.$nextTick(function(){t.scrollTop=t.getScrollY()})}),this.target&&this.mutationObserver.observe(this.target,n)}}},detachMutationObserver:function(){this.mutationObserver&&this.mutationObserver.disconnect()},getElementPosition:function(t){var e=t&&t.recalcWidth||!1,n=t&&t.recalcHeight||!1;this.offsetTop=this.$el.getBoundingClientRect().top+this.getScrollY(),(!this.width>0||e)&&(this.width=this.$el&&this.$el.clientWidth||0),(!this.height>0||n)&&(this.height=this.target&&this.target.clientHeight||0)},getScrollPosition:function(){this.scrollTop=this.getScrollY(),this.offsetTop=this.$el.getBoundingClientRect().top+this.getScrollY()},getScrollY:function(){return"undefined"==typeof window?0:window.scrollY||window.pageYOffset}}}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"scroll-magnet-container",style:"height: "+t.height+"px"},[t._t("default")],2)},staticRenderFns:[]}},function(t,e,n){var i,o;n(9),i=n(11);var r=n(12);o=i=i||{},"object"!=typeof i.default&&"function"!=typeof i.default||(o=i=i.default),"function"==typeof o&&(o=o.options),o.render=r.render,o.staticRenderFns=r.staticRenderFns,o._scopeId="data-v-1c578f50",t.exports=i},function(t,e,n){var i=n(10);"string"==typeof i&&(i=[[t.id,i,""]]);n(5)(i,{});i.locals&&(t.exports=i.locals)},function(t,e,n){e=t.exports=n(4)(),e.push([t.id,".scroll-magnet-item[data-v-1c578f50]{position:relative;width:100%}.is-scrolling[data-v-1c578f50]{position:fixed;top:0}.is-bottomed[data-v-1c578f50]{position:absolute;bottom:0}",""])},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"scroll-magnet-item",data:function(){return{nearestContainer:void 0,width:0,height:0,top:0,scrollDist:0,scrollEnd:0,isBottomed:!1,isScrolling:!1}},props:{offsetTopPad:{type:Number,default:0,required:!1}},created:function(){this.nearestContainer=this.getNearestMagnetContainer()},mounted:function(){var t=this;this.setMagnetHeight(),this.$nextTick(function(){t.setMagnetStatus(t.nearestContainer),t.setMagnetWidth()}),this.$watch("nearestContainer.width",function(){t.width=t.nearestContainer.width}),this.$watch("nearestContainer.scrollTop",function(){t.setMagnetStatus(t.nearestContainer)})},methods:{getNearestMagnetContainer:function(){return this.checkParentForMatch(this.$parent)},checkParentForMatch:function(t){return t&&"scroll-magnet-container"===t.$options._componentTag?t:this.checkParentForMatch(t)},setMagnetWidth:function(){this.width=this.nearestContainer.width},setMagnetHeight:function(){var t=this.$el.getBoundingClientRect();this.height=t.height},setMagnetStatus:function(t){this.setMagnetHeight(),this.scrollDist=t.scrollTop+this.height,this.scrollEnd=t.offsetTop+(t.height-this.offsetTopPad),this.isWithinHeight=this.scrollDist<this.scrollEnd,this.isScrolling=t.scrollTop+this.offsetTopPad>=t.offsetTop&&this.isWithinHeight,this.isBottomed=this.scrollDist>=this.scrollEnd,this.top=this.isBottomed?"auto":this.offsetTopPad+"px"}}}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"scroll-magnet-item",class:{"is-scrolling":t.isScrolling,"is-bottomed":t.isBottomed},style:"width: "+(t.width>0&&t.width)+"px; top: "+t.top},[t._t("default")],2)},staticRenderFns:[]}}])});


--------------------------------------------------------------------------------
/docs/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | Thumbs.db
3 | db.json
4 | *.log
5 | node_modules/
6 | .deploy*/


--------------------------------------------------------------------------------
/docs/_config.yml:
--------------------------------------------------------------------------------
 1 | # Hexo Configuration
 2 | ## Docs: https://hexo.io/docs/configuration.html
 3 | ## Source: https://github.com/hexojs/hexo/
 4 | 
 5 | # Site
 6 | title: Vue Scroll Magnet
 7 | subtitle: Vue Scroll Magnet
 8 | description:
 9 | author: '@toddlawton'
10 | language:
11 | timezone:
12 | 
13 | # URL
14 | ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
15 | url: http://github.com/toddlawton
16 | root: /vue-scroll-magnet/
17 | permalink: :year/:month/:day/:title/
18 | permalink_defaults:
19 | 
20 | # Directory
21 | source_dir: source
22 | public_dir: public
23 | tag_dir: tags
24 | archive_dir: archives
25 | category_dir: categories
26 | code_dir: downloads/code
27 | i18n_dir: :lang
28 | skip_render:
29 | 
30 | # Writing
31 | new_post_name: :title.md # File name of new posts
32 | default_layout: post
33 | titlecase: false # Transform title into titlecase
34 | external_link: true # Open external links in new tab
35 | filename_case: 0
36 | render_drafts: false
37 | post_asset_folder: false
38 | relative_link: false
39 | future: true
40 | highlight:
41 |   enable: true
42 |   line_number: true
43 |   auto_detect: false
44 |   tab_replace:
45 | 
46 | # Category & Tag
47 | default_category: uncategorized
48 | category_map:
49 | tag_map:
50 | 
51 | # Date / Time format
52 | ## Hexo uses Moment.js to parse and display date
53 | ## You can customize the date format as defined in
54 | ## http://momentjs.com/docs/#/displaying/format/
55 | date_format: YYYY-MM-DD
56 | time_format: HH:mm:ss
57 | 
58 | # Pagination
59 | ## Set per_page to 0 to disable pagination
60 | per_page: 10
61 | pagination_dir: page
62 | 
63 | # Extensions
64 | ## Plugins: https://hexo.io/plugins/
65 | ## Themes: https://hexo.io/themes/
66 | theme: apollo
67 | 
68 | archive_generator:
69 |   per_page: 0
70 |   yearly: false
71 |   monthly: false
72 |   daily: false
73 | 
74 | # Deployment
75 | ## Docs: https://hexo.io/docs/deployment.html
76 | deploy:
77 |   type:
78 | 


--------------------------------------------------------------------------------
/docs/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hexo-site",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "hexo": {
 6 |     "version": "3.2.2"
 7 |   },
 8 |   "dependencies": {
 9 |     "hexo": "^3.2.0",
10 |     "hexo-browsersync": "^0.2.0",
11 |     "hexo-generator-archive": "^0.1.4",
12 |     "hexo-generator-category": "^0.1.3",
13 |     "hexo-generator-feed": "^1.2.0",
14 |     "hexo-generator-index": "^0.2.0",
15 |     "hexo-generator-sitemap": "^1.1.2",
16 |     "hexo-generator-tag": "^0.2.0",
17 |     "hexo-renderer-ejs": "^0.2.0",
18 |     "hexo-renderer-jade": "^0.3.0",
19 |     "hexo-renderer-marked": "^0.2.10",
20 |     "hexo-renderer-stylus": "^0.3.1",
21 |     "hexo-server": "^0.2.0"
22 |   }
23 | }


--------------------------------------------------------------------------------
/docs/public/2016/11/29/a/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="X-UA-Compatible" content="IE=edge"><title>  · Vue Scroll Magnet</title><meta name="description" content=" - @toddlawton"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="short icon" href="/vue-scroll-magnet/favicon.png"><link rel="stylesheet" href="/vue-scroll-magnet/css/apollo.css"><link rel="search" type="application/opensearchdescription+xml" href="http://github.com/toddlawton/atom.xml" title="Vue Scroll Magnet"></head><body><div class="wrap"><header><a href="/vue-scroll-magnet/docs" class="logo-link"><p><b>Vue Scroll Magnet</b></p></a><ul class="nav nav-list"><li class="nav-list-item"><a href="/vue-scroll-magnet/docs/" target="_self" class="nav-list-link">DOCS</a></li><li class="nav-list-item"><a href="/vue-scroll-magnet/examples/" target="_self" class="nav-list-link">EXAMPLES</a></li><li class="nav-list-item"><a href="https://github.com/toddlawton/vue-scroll-magnet" target="_blank" class="nav-list-link">GITHUB</a></li></ul></header><section class="container"><div class="post"><article class="post-block"><div class="post-content"></div></article></div></section><footer><div class="paginator"></div><div class="copyright"><p>© 2016 <a href="http://github.com/toddlawton">@toddlawton</a></p></div></footer></div><script async src="//cdn.bootcss.com/mathjax/2.6.1/MathJax.js?config=TeX-MML-AM_CHTML"></script><script>(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;e=o.createElement(i);r=o.getElementsByTagName(i)[0];e.src='//www.google-analytics.com/analytics.js';r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));ga('create',"UA-65933410-1",'auto');ga('send','pageview');</script></body></html>


--------------------------------------------------------------------------------
/docs/public/archives/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="X-UA-Compatible" content="IE=edge"><title> Vue Scroll Magnet</title><meta name="description" content="A Blog Powered By Hexo"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="short icon" href="/vue-scroll-magnet/favicon.png"><link rel="stylesheet" href="/vue-scroll-magnet/css/apollo.css"><link rel="search" type="application/opensearchdescription+xml" href="http://github.com/toddlawton/atom.xml" title="Vue Scroll Magnet"></head><body><div class="wrap"><header><a href="/vue-scroll-magnet/docs" class="logo-link"><p><b>Vue Scroll Magnet</b></p></a><ul class="nav nav-list"><li class="nav-list-item"><a href="/vue-scroll-magnet/docs/" target="_self" class="nav-list-link">DOCS</a></li><li class="nav-list-item"><a href="/vue-scroll-magnet/examples/" target="_self" class="nav-list-link">EXAMPLES</a></li><li class="nav-list-item"><a href="https://github.com/toddlawton/vue-scroll-magnet" target="_blank" class="nav-list-link">GITHUB</a></li></ul></header><section class="container"><div class="archive"><h2 class="archive-year">2016</h2><div class="post-item"><div class="post-info">Nov 29, 2016</div><a href="/vue-scroll-magnet/2016/11/29/a/" class="post-title-link"></a></div></div></section><footer><div class="paginator"></div><div class="copyright"><p>© 2016 <a href="http://github.com/toddlawton">@toddlawton</a></p></div></footer></div><script async src="//cdn.bootcss.com/mathjax/2.6.1/MathJax.js?config=TeX-MML-AM_CHTML"></script><script>(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;e=o.createElement(i);r=o.getElementsByTagName(i)[0];e.src='//www.google-analytics.com/analytics.js';r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));ga('create',"UA-65933410-1",'auto');ga('send','pageview');</script></body></html>


--------------------------------------------------------------------------------
/docs/public/atom.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <feed xmlns="http://www.w3.org/2005/Atom">
 3 |   <title>Vue Scroll Magnet</title>
 4 |   <subtitle>Vue Scroll Magnet</subtitle>
 5 |   <link href="/vue-scroll-magnet/atom.xml" rel="self"/>
 6 |   
 7 |   <link href="http://github.com/toddlawton/"/>
 8 |   <updated>2016-11-29T22:15:04.000Z</updated>
 9 |   <id>http://github.com/toddlawton/</id>
10 |   
11 |   <author>
12 |     <name>@toddlawton</name>
13 |     
14 |   </author>
15 |   
16 |   <generator uri="http://hexo.io/">Hexo</generator>
17 |   
18 |   <entry>
19 |     <title></title>
20 |     <link href="http://github.com/toddlawton/2016/11/29/a/"/>
21 |     <id>http://github.com/toddlawton/2016/11/29/a/</id>
22 |     <published>2016-11-29T22:15:03.000Z</published>
23 |     <updated>2016-11-29T22:15:04.000Z</updated>
24 |     
25 |     <summary type="html">
26 |     
27 |     </summary>
28 |     
29 |     
30 |   </entry>
31 |   
32 | </feed>
33 | 


--------------------------------------------------------------------------------
/docs/public/css/apollo.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}::-moz-selection{color:#FFFFFF;background-color:#42b983}::selection{color:#FFFFFF;background-color:#42b983}html,body{width:100%;height:100%}body{margin:0;color:#34495e;font-size:15px;line-height:1.6;background-color:#fff;font-family:'sourcesanspro', 'Helvetica Neue', Arial, sans-serif}ul.nav,ul.post-list{margin:0;padding:0;list-style-type:none}ul{margin:1rem 0}a,a:active{color:#2c3e50;text-decoration:none}a.nav-list-link.active,a.nav-list-link:hover,a.post-title-link:hover{border-bottom:2px solid #42b983}hr{border:0}code{margin:0 2px;padding:3px 5px;color:#e96900;border-radius:2px;white-space:inherit}iframe,video{max-width:100%;margin:1rem auto;display:block}table{width:100%;margin:1em auto}table thead{background-color:#ddd}table thead th{padding:5px;min-width:20px}table tbody tr:nth-child(2n){background-color:#eee}table tbody td{padding:5px;vertical-align:text-top}header{min-height:60px}header .logo-link{float:left}header .nav{float:right;left:80px}header .logo-link img{height:60px}header .nav-list-item{display:inline-block;padding:19px  10px}header .nav-list-item a{font-size:16px;line-height:1.4}.home.post-list{margin:2em 0}.home.post-list .post-list-item{padding:1em 0 2em;border-bottom:1px solid #ddd}.home.post-list .post-list-item:last-child{border-bottom:0px}.home.post-list .post-content h2:before,.home.post-list .post-content h3:before,.home.post-list .post-content h4:before,.home.post-list .post-content h5:before,.home.post-list .post-content h6:before{content:''}.home.post-list .post-content>ul{list-style:initial}.home.post-list .read-more{color:#42b983}.archive{max-width:500px;margin:5em auto}.archive .post-item{padding:2px 0 0 50px}.archive .post-time,.archive .post-title-link{font-size:1rem}.archive .post-title-link{display:block;margin-left:125px;color:#42b983;word-break:break-all}.archive .post-title-link:hover{border-bottom:0;color:#267B54}.archive .post-info{float:left;width:125px;color:#7f8c8d}.post{padding-top:1em}.post-block .post-title{margin:0.65em 0;color:#2c3e50;font-size:1.5em}.post-block .post-info{color:#7f8c8d;margin:1.2em 0}.post-block .post-info span{margin-left:0.5rem}.post-block .post-info a.post-from{margin-left:0.5rem;padding:3px 6px;border-radius:5px;font-size:12px;color:white;background-color:#E36B6B}.post-content h2,.post-content h3,.post-content h4,.post-content h5,.post-content h6{position:relative;margin:1em 0}.post-content h2:before,.post-content h3:before,.post-content h4:before,.post-content h5:before,.post-content h6:before{content:"#";color:#42b983;position:absolute;left:-0.7em;top:-4px;font-size:1.2em;font-weight:bold}.post-content h4:before,.post-content h5:before,.post-content h6:before{content:""}.post-content h2,.post-content h3{font-size:22px}.post-content h4,.post-content h5,.post-content h6{font-size:18px}.post-content a{color:#42b983;word-break:break-all}.post-content blockquote{margin:2em 0;padding-left:20px;border-left:4px solid #42b983}.post-content img{display:block;max-width:100%;margin:1em auto}.post-content>table,.post-content>figure.highlight{box-shadow:0 1px 2px rgba(0,0,0,0.125)}.post-content .tip{position:relative;margin:2em 0;padding:12px 24px 12px 30px;border-left:4px solid #f66;border-top-right-radius:2px;border-bottom-right-radius:2px;background-color:#f8f8f8}.post-content .tip br{display:none}.post-content .tip:before{position:absolute;top:14px;left:-12px;content:"!";width:20px;height:20px;border-radius:100%;color:#fff;font-size:14px;line-height:20px;font-weight:bold;text-align:center;background-color:#f66;font-family:'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif}#mask{position:fixed;overflow:scroll;width:100%;height:100%;padding:1em 0;background-color:rgba(0,0,0,0.5);z-index:10}#mask #mask-image{max-width:95%}code,pre{font-size:0.8em;background-color:#f8f8f8;font-family:'Roboto Mono', Monaco, courier, monospace}.highlight{position:relative;margin:1em 0;border-radius:2px;line-height:1.1em;background-color:#f8f8f8;overflow-x:auto}.highlight table,.highlight tr,.highlight td{width:100%;border-collapse:collapse;padding:0;margin:0}.highlight .gutter{display:none}.highlight .code pre{padding:1.2em 1.4em;line-height:1.5em;margin:0}.highlight .code pre .line{width:auto;height:18px}.highlight.html .code:after,.highlight.js .code:after,.highlight.bash .code:after,.highlight.css .code:after,.highlight.scss .code:after,.highlight.diff .code:after,.highlight.java .code:after,.highlight.xml .code:after,.highlight.python .code:after,.highlight.json .code:after,.highlight.swift .code:after,.highlight.ruby .code:after,.highlight.perl .code:after,.highlight.php .code:after,.highlight.c .code:after,.highlight.cpp .code:after,.highlight.ts .code:after{position:absolute;top:0;right:0;color:#ccc;text-align:right;font-size:0.75em;padding:5px 10px 0;line-height:15px;height:15px;font-weight:600}.highlight.html .code:after{content:"HTML"}.highlight.js .code:after{content:"JS"}.highlight.bash .code:after{content:"BASH"}.highlight.css .code:after{content:"CSS"}.highlight.scss .code:after{content:"SCSS"}.highlight.diff .code:after{content:"DIFF"}.highlight.java .code:after{content:"JAVA"}.highlight.xml .code:after{content:"XML"}.highlight.python .code:after{content:"PYTHON"}.highlight.json .code:after{content:"JSON"}.highlight.swift .code:after{content:"SWIFT"}.highlight.ruby .code:after{content:"RUBY"}.highlight.perl .code:after{content:"PERL"}.highlight.php .code:after{content:"PHP"}.highlight.c .code:after{content:"C"}.highlight.java .code:after{content:"JAVA"}.highlight.cpp .code:after{content:"CPP"}.highlight.ts .code:after{content:"TS"}.highlight.cpp .code:after{content:'C++'}pre{color:#525252}pre .function .keyword,pre .constant{color:#0092db}pre .keyword,pre .attribute{color:#e96900}pre .number,pre .literal{color:#ae81ff}pre .tag,pre .tag .title,pre .change,pre .winutils,pre .flow,pre .lisp .title,pre .clojure .built_in,pre .nginx .title,pre .tex .special{color:#2973b7}pre .symbol,pre .symbol .string,pre .value,pre .regexp{color:#42b983}pre .title{color:#83B917}pre .tag .value,pre .string,pre .subst,pre .haskell .type,pre .preprocessor,pre .ruby .class .parent,pre .built_in,pre .sql .aggregate,pre .django .template_tag,pre .django .variable,pre .smalltalk .class,pre .javadoc,pre .django .filter .argument,pre .smalltalk .localvars,pre .smalltalk .array,pre .attr_selector,pre .pseudo,pre .addition,pre .stream,pre .envvar,pre .apache .tag,pre .apache .cbracket,pre .tex .command,pre .prompt{color:#42b983}pre .comment,pre .java .annotation,pre .python .decorator,pre .template_comment,pre .pi,pre .doctype,pre .shebang,pre .apache .sqbracket,pre .tex .formula{color:#b3b3b3}pre .deletion{color:#BA4545}pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .javascript,pre .xml .vbscript,pre .xml .css,pre .xml .cdata{opacity:0.5}.paginator{margin:4em 0;text-align:center}.paginator .prev,.paginator .next{display:inline-block;margin:0 4px;padding:4px 12px;border-radius:4px;border-bottom:4px solid #3aa373;font-size:14px;color:#fff;background-color:#4fc08d}.paginator .prev:hover,.paginator .next:hover{background-color:#22bd77}.ds-thread,#disqus_thread{margin-bottom:2em}section.container{margin:2em 10px}@media screen and (min-width: 700px){.wrap{width:700px;margin:0 auto}header{padding:20px 10px}}@media screen and (max-width: 700px){.wrap{width:100%}header{padding:20px 0}header a.logo-link,header ul.nav.nav-list{float:none;display:block;text-align:center}header li.nav-list-item{padding:10px 10px}section.container,.home.post-list,.archive{margin-top:0}.archive .post-item{padding-left:20px}.post-content h2,.post-content h3,.post-content h4,.post-content h5,.post-content h6{max-width:300px;left:15px}.ds-thread,#disqus_thread{margin:2em 10px}}footer{padding-bottom:1px}footer .copyright{margin:4em 0;border-top:1px solid #ddd;text-align:center}footer .copyright p,footer .copyright a{color:#aaa;font-size:14px;font-weight:100}footer .copyright a:hover{color:#888}@font-face{font-family:'sourcesanspro';src:url("/vue-scroll-magnet/font/sourcesanspro.woff2") format("woff2"),url("/vue-scroll-magnet/font/sourcesanspro.woff") format("woff");font-weight:normal;font-style:normal}
2 | 


--------------------------------------------------------------------------------
/docs/public/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="X-UA-Compatible" content="IE=edge"><title> Docs · Vue Scroll Magnet</title><meta name="description" content="Docs - @toddlawton"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="short icon" href="/vue-scroll-magnet/favicon.png"><link rel="stylesheet" href="/vue-scroll-magnet/css/apollo.css"><link rel="search" type="application/opensearchdescription+xml" href="http://github.com/toddlawton/atom.xml" title="Vue Scroll Magnet"></head><body><div class="wrap"><header><a href="/vue-scroll-magnet/docs" class="logo-link"><p><b>Vue Scroll Magnet</b></p></a><ul class="nav nav-list"><li class="nav-list-item"><a href="/vue-scroll-magnet/docs/" target="_self" class="nav-list-link">DOCS</a></li><li class="nav-list-item"><a href="/vue-scroll-magnet/examples/" target="_self" class="nav-list-link">EXAMPLES</a></li><li class="nav-list-item"><a href="https://github.com/toddlawton/vue-scroll-magnet" target="_blank" class="nav-list-link">GITHUB</a></li></ul></header><section class="container"><div class="post"><article class="post-block"><div class="post-content"><h1 id="Documentation"><a href="#Documentation" class="headerlink" title="Documentation"></a>Documentation</h1><h2 id="What-is-Vue-Scroll-Magnet"><a href="#What-is-Vue-Scroll-Magnet" class="headerlink" title="What is Vue Scroll Magnet?"></a>What is Vue Scroll Magnet?</h2><p>Vue Scroll Magnet is a pair of component wrappers which allow elements to follow the viewport while scrolling and then anchor at the upper and lower extremeties of their parent container. This module is inspired by a jQuery plugin called <a href="//github.com/leafo/sticky-kit">Sticky kit</a>.</p>
 2 | <h2 id="Installation"><a href="#Installation" class="headerlink" title="Installation"></a>Installation</h2><blockquote>
 3 | <p>This component relies on ES6 and may not be compatible with Vue 1.x projects.</p>
 4 | </blockquote>
 5 | <figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm install -S vue-scroll-magnet</div></pre></td></tr></table></figure>
 6 | <h2 id="Usage-Global"><a href="#Usage-Global" class="headerlink" title="Usage (Global)"></a>Usage (Global)</h2><p>Install the components globally:<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span>;</div><div class="line"><span class="keyword">import</span> VueScrollMagnet <span class="keyword">from</span> <span class="string">'vue-scroll-magnet'</span>;</div><div class="line"></div><div class="line">Vue.use(VueScrollMagnet);</div></pre></td></tr></table></figure></p>
 7 | <h2 id="Usage-Component"><a href="#Usage-Component" class="headerlink" title="Usage (Component)"></a>Usage (Component)</h2><p>Include the wrappers into your component using import:<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="comment">/* inside your Vue component's script tag */</span></div><div class="line"></div><div class="line"><span class="keyword">import</span> &#123; ScrollMagnetContainer, ScrollMagnetItem &#125; <span class="keyword">from</span> <span class="string">'vue-scroll-magnet'</span>;</div><div class="line"></div><div class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</div><div class="line">  ...</div><div class="line">  components: &#123;</div><div class="line">    ScrollMagnetContainer,</div><div class="line">    ScrollMagnetItem</div><div class="line">  &#125;</div><div class="line">  ...</div><div class="line">&#125;;</div></pre></td></tr></table></figure></p>
 8 | <h3 id="HTML-structure"><a href="#HTML-structure" class="headerlink" title="HTML structure"></a>HTML structure</h3><p>The scrollable height boundary will be determined as the direct parent of the &lt;scroll-magnet-container&gt; by default, however it can be configured using an element selector which it can use as a fixed context.</p>
 9 | <p>In the example below, &lt;scroll-magnet-container&gt; will automatically use the top of #app as its upper boundary and its height of 500px as its lower boundary unless a specific element context is provided.</p>
10 | <figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span> <span class="attr">style</span>=<span class="string">"height: 500px;"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">scroll-magnet-container</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">scroll-magnet-item</span>&gt;</span>This content will scroll<span class="tag">&lt;/<span class="name">scroll-magnet-item</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">scroll-magnet-container</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
11 | <h3 id="Tests"><a href="#Tests" class="headerlink" title="Tests"></a>Tests</h3><p>To run unit tests &amp; code coverage:<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm <span class="built_in">test</span></div></pre></td></tr></table></figure></p>
12 | </div></article></div></section><footer><div class="paginator"></div><div class="copyright"><p>© 2016 <a href="http://github.com/toddlawton">@toddlawton</a></p></div></footer></div><script async src="//cdn.bootcss.com/mathjax/2.6.1/MathJax.js?config=TeX-MML-AM_CHTML"></script><script>(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;e=o.createElement(i);r=o.getElementsByTagName(i)[0];e.src='//www.google-analytics.com/analytics.js';r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));ga('create',"UA-65933410-1",'auto');ga('send','pageview');</script></body></html>


--------------------------------------------------------------------------------
/docs/public/examples/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="X-UA-Compatible" content="IE=edge"><title> Examples · Vue Scroll Magnet</title><meta name="description" content="Examples - @toddlawton"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="short icon" href="/vue-scroll-magnet/favicon.png"><link rel="stylesheet" href="/vue-scroll-magnet/css/apollo.css"><link rel="search" type="application/opensearchdescription+xml" href="http://github.com/toddlawton/atom.xml" title="Vue Scroll Magnet"></head><body><div class="wrap"><header><a href="/vue-scroll-magnet/docs" class="logo-link"><p><b>Vue Scroll Magnet</b></p></a><ul class="nav nav-list"><li class="nav-list-item"><a href="/vue-scroll-magnet/docs/" target="_self" class="nav-list-link">DOCS</a></li><li class="nav-list-item"><a href="/vue-scroll-magnet/examples/" target="_self" class="nav-list-link">EXAMPLES</a></li><li class="nav-list-item"><a href="https://github.com/toddlawton/vue-scroll-magnet" target="_blank" class="nav-list-link">GITHUB</a></li></ul></header><section class="container"><div class="post"><article class="post-block"><div class="post-content"><h1 id="Examples"><a href="#Examples" class="headerlink" title="Examples"></a>Examples</h1><h2 id="Basic-example"><a href="#Basic-example" class="headerlink" title="Basic example"></a>Basic example</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"example-container"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">scroll-magnet-container</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">scroll-magnet-item</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"example-sticky-item"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"text"</span>&gt;</span>This item will stick as you scroll!<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">scroll-magnet-item</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">scroll-magnet-container</span>&gt;</span></div><div class="line">  <span class="comment">&lt;!-- Placeholder paragraphs --&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
 2 | <figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="selector-class">.example-container</span> &#123;</div><div class="line">  <span class="attribute">min-height</span>: <span class="number">600px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.example-item</span> &#123;</div><div class="line">  <span class="attribute">min-height</span>: <span class="number">200px</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
 3 | <style>
 4 |   .paragraphs {
 5 |     margin-bottom: 40px;
 6 |   }
 7 | 
 8 |   .paragraph {
 9 |     width: 100%;
10 |     min-height: 15px;
11 |     background: rgba(0,0,0,0.1);
12 |     margin-bottom: 15px;
13 |   }
14 |   .paragraph.short {
15 |     width: 80%;
16 |   }
17 |   .example-container {
18 |     min-height: 600px;
19 |   }
20 |   .example-item {
21 |     position: relative;
22 |     font-size: 24px;
23 |     text-align: center;
24 |     width: 100%;
25 |     min-height: 200px;
26 |     background: #34495e;
27 |     color: white;
28 |   }
29 |   .text {
30 |     position: absolute;
31 |     top: 50%;
32 |     left: 50%;
33 |     transform: translate(-50%, -50%);
34 |   }
35 | </style>
36 | 
37 | <div class="content"></div>
38 | 
39 | <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.js"></script>
40 | <script type="text/javascript" src="https://cdn.rawgit.com/toddlawton/vue-scroll-magnet/master/dist/vue-scroll-magnet.min.js"></script>
41 | <script type="text/javascript">
42 |   function paragraphs(ct) {
43 |     var paras = '';
44 |     var short = '';
45 |     for (var i = 0; i <= ct; i++) {
46 |       if (i === ct) {
47 |         short = ' short';
48 |       }
49 |       paras += '<div class="paragraph'+short+'"></div>';
50 |     }
51 |     return '<div class="paragraphs">' + paras +  '</div>';
52 |   }
53 | 
54 |   new Vue({
55 |     el: '.content',
56 |     components: {
57 |       'scroll-magnet-container': VueScrollMagnet.ScrollMagnetContainer,
58 |       'scroll-magnet-item': VueScrollMagnet.ScrollMagnetItem
59 |     },
60 |     template: '<div class="example-container"><scroll-magnet-container><scroll-magnet-item><div class="example-item"><div class="text">This item will stick as you scroll!</div></div></scroll-magnet-item></scroll-magnet-container>'+ paragraphs(20) + paragraphs(20) +'</div>'
61 |   });
62 | </script></div></article></div></section><footer><div class="paginator"></div><div class="copyright"><p>© 2016 <a href="http://github.com/toddlawton">@toddlawton</a></p></div></footer></div><script async src="//cdn.bootcss.com/mathjax/2.6.1/MathJax.js?config=TeX-MML-AM_CHTML"></script><script>(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;e=o.createElement(i);r=o.getElementsByTagName(i)[0];e.src='//www.google-analytics.com/analytics.js';r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));ga('create',"UA-65933410-1",'auto');ga('send','pageview');</script></body></html>


--------------------------------------------------------------------------------
/docs/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SSENSE/vue-scroll-magnet/3b938ccd37ba2453cd088d8a91c242136f699a57/docs/public/favicon.png


--------------------------------------------------------------------------------
/docs/public/font/sourcesanspro.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SSENSE/vue-scroll-magnet/3b938ccd37ba2453cd088d8a91c242136f699a57/docs/public/font/sourcesanspro.woff


--------------------------------------------------------------------------------
/docs/public/font/sourcesanspro.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SSENSE/vue-scroll-magnet/3b938ccd37ba2453cd088d8a91c242136f699a57/docs/public/font/sourcesanspro.woff2


--------------------------------------------------------------------------------
/docs/public/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="X-UA-Compatible" content="IE=edge"><title> Vue Scroll Magnet</title><meta name="description" content="A Blog Powered By Hexo"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="short icon" href="/vue-scroll-magnet/favicon.png"><link rel="stylesheet" href="/vue-scroll-magnet/css/apollo.css"><link rel="search" type="application/opensearchdescription+xml" href="http://github.com/toddlawton/atom.xml" title="Vue Scroll Magnet"></head><body><div class="wrap"><header><a href="/vue-scroll-magnet/docs" class="logo-link"><p><b>Vue Scroll Magnet</b></p></a><ul class="nav nav-list"><li class="nav-list-item"><a href="/vue-scroll-magnet/docs/" target="_self" class="nav-list-link">DOCS</a></li><li class="nav-list-item"><a href="/vue-scroll-magnet/examples/" target="_self" class="nav-list-link">EXAMPLES</a></li><li class="nav-list-item"><a href="https://github.com/toddlawton/vue-scroll-magnet" target="_blank" class="nav-list-link">GITHUB</a></li></ul></header><section class="container"><ul class="home post-list"><li class="post-list-item"><article class="post-block"><h2 class="post-title"><a href="/vue-scroll-magnet/2016/11/29/a/" class="post-title-link"></a></h2><div class="post-info">Nov 29, 2016</div><div class="post-content"></div><a href="/vue-scroll-magnet/2016/11/29/a/" class="read-more">...more</a></article></li></ul></section><footer><div class="paginator"></div><div class="copyright"><p>© 2016 <a href="http://github.com/toddlawton">@toddlawton</a></p></div></footer></div><script async src="//cdn.bootcss.com/mathjax/2.6.1/MathJax.js?config=TeX-MML-AM_CHTML"></script><script>(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;e=o.createElement(i);r=o.getElementsByTagName(i)[0];e.src='//www.google-analytics.com/analytics.js';r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));ga('create',"UA-65933410-1",'auto');ga('send','pageview');</script></body></html>


--------------------------------------------------------------------------------
/docs/public/scss/apollo.scss:
--------------------------------------------------------------------------------
 1 | @charset "utf-8";
 2 | 
 3 | @import "_partial/normalize";
 4 | @import "_partial/base";
 5 | @import "_partial/header";
 6 | @import "_partial/home-post-list";
 7 | @import "_partial/archive-post-list";
 8 | @import "_partial/post";
 9 | @import "_partial/footer";
10 | @import "_partial/mq";
11 | @import "_partial/copyright";
12 | 
13 | @font-face {
14 |     font-family: 'sourcesanspro';
15 |     src: url('/vue-scroll-magnet/font/sourcesanspro.woff2') format('woff2'),
16 |          url('/vue-scroll-magnet/font/sourcesanspro.woff') format('woff');
17 |     font-weight: normal;
18 |     font-style: normal;
19 | }
20 | 


--------------------------------------------------------------------------------
/docs/public/sitemap.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 3 |   
 4 |   <url>
 5 |     <loc>http://github.com/toddlawton/examples/index.html</loc>
 6 |     
 7 |     <lastmod>2016-11-29T23:45:59.000Z</lastmod>
 8 |     
 9 |   </url>
10 |   
11 |   <url>
12 |     <loc>http://github.com/toddlawton/docs/index.html</loc>
13 |     
14 |     <lastmod>2016-11-29T23:40:17.000Z</lastmod>
15 |     
16 |   </url>
17 |   
18 |   <url>
19 |     <loc>http://github.com/toddlawton/vue-scroll-magnet/2016/11/29/a/</loc>
20 |     
21 |     <lastmod>2016-11-29T22:15:04.000Z</lastmod>
22 |     
23 |   </url>
24 |   
25 | </urlset>
26 | 


--------------------------------------------------------------------------------
/docs/scaffolds/draft.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: {{ title }}
3 | tags:
4 | ---
5 | 


--------------------------------------------------------------------------------
/docs/scaffolds/page.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: {{ title }}
3 | ---
4 | 


--------------------------------------------------------------------------------
/docs/scaffolds/post.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: {{ title }}
3 | tags:
4 | ---
5 | 


--------------------------------------------------------------------------------
/docs/source/_posts/a.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SSENSE/vue-scroll-magnet/3b938ccd37ba2453cd088d8a91c242136f699a57/docs/source/_posts/a.md


--------------------------------------------------------------------------------
/docs/source/docs/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Docs
 3 | ---
 4 | 
 5 | # Documentation
 6 | 
 7 | ## What is Vue Scroll Magnet?
 8 | 
 9 | Vue Scroll Magnet is a pair of component wrappers which allow elements to follow the viewport while scrolling and then anchor at the upper and lower extremeties of their parent container. This module is inspired by a jQuery plugin called <a href="//github.com/leafo/sticky-kit">Sticky kit</a>.
10 | 
11 | ## Installation
12 | 
13 | > This component relies on ES6 and may not be compatible with Vue 1.x projects.
14 | 
15 | ``` bash
16 | npm install -S vue-scroll-magnet
17 | ```
18 | 
19 | ## Usage (Global)
20 | Install the components globally:
21 | ``` js
22 | import Vue from 'vue';
23 | import VueScrollMagnet from 'vue-scroll-magnet';
24 | 
25 | Vue.use(VueScrollMagnet);
26 | ```
27 | 
28 | ## Usage (Component)
29 | Include the wrappers into your component using import:
30 | ``` js
31 | /* inside your Vue component's script tag */
32 | 
33 | import { ScrollMagnetContainer, ScrollMagnetItem } from 'vue-scroll-magnet';
34 | 
35 | export default {
36 |   ...
37 |   components: {
38 |     ScrollMagnetContainer,
39 |     ScrollMagnetItem
40 |   }
41 |   ...
42 | };
43 | ```
44 | 
45 | ### HTML structure
46 | The scrollable height boundary will be determined as the direct parent of the &lt;scroll-magnet-container&gt; by default, however it can be configured using an element selector which it can use as a fixed context.
47 | 
48 | In the example below, &lt;scroll-magnet-container&gt; will automatically use the top of #app as its upper boundary and its height of 500px as its lower boundary unless a specific element context is provided.
49 | 
50 | ``` html
51 | <div id="app" style="height: 500px;">
52 |   <scroll-magnet-container>
53 |     <scroll-magnet-item>This content will scroll</scroll-magnet-item>
54 |   </scroll-magnet-container>
55 | </div>
56 | ```
57 | 
58 | ### Tests
59 | To run unit tests & code coverage:
60 | ``` bash
61 | npm test
62 | ```


--------------------------------------------------------------------------------
/docs/source/examples/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Examples
 3 | ---
 4 | 
 5 | # Examples
 6 | 
 7 | ## Basic example
 8 | 
 9 | ``` html
10 | <div class="example-container">
11 |   <scroll-magnet-container>
12 |     <scroll-magnet-item>
13 |       <div class="example-sticky-item">
14 |         <div class="text">This item will stick as you scroll!</div>
15 |       </div>
16 |     </scroll-magnet-item>
17 |   </scroll-magnet-container>
18 |   <!-- Placeholder paragraphs -->
19 | </div>
20 | ```
21 | 
22 | ``` css
23 | .example-container {
24 |   min-height: 600px;
25 | }
26 | .example-item {
27 |   min-height: 200px;
28 | }
29 | ```
30 | 
31 | <style>
32 |   .paragraphs {
33 |     margin-bottom: 40px;
34 |   }
35 | 
36 |   .paragraph {
37 |     width: 100%;
38 |     min-height: 15px;
39 |     background: rgba(0,0,0,0.1);
40 |     margin-bottom: 15px;
41 |   }
42 |   .paragraph.short {
43 |     width: 80%;
44 |   }
45 |   .example-container {
46 |     min-height: 600px;
47 |   }
48 |   .example-item {
49 |     position: relative;
50 |     font-size: 24px;
51 |     text-align: center;
52 |     width: 100%;
53 |     min-height: 200px;
54 |     background: #34495e;
55 |     color: white;
56 |   }
57 |   .text {
58 |     position: absolute;
59 |     top: 50%;
60 |     left: 50%;
61 |     transform: translate(-50%, -50%);
62 |   }
63 | </style>
64 | 
65 | <div class="content"></div>
66 | 
67 | <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.js"></script>
68 | <script type="text/javascript" src="https://cdn.rawgit.com/toddlawton/vue-scroll-magnet/master/dist/vue-scroll-magnet.min.js"></script>
69 | <script type="text/javascript">
70 |   function paragraphs(ct) {
71 |     var paras = '';
72 |     var short = '';
73 |     for (var i = 0; i <= ct; i++) {
74 |       if (i === ct) {
75 |         short = ' short';
76 |       }
77 |       paras += '<div class="paragraph'+short+'"></div>';
78 |     }
79 |     return '<div class="paragraphs">' + paras +  '</div>';
80 |   }
81 | 
82 |   new Vue({
83 |     el: '.content',
84 |     components: {
85 |       'scroll-magnet-container': VueScrollMagnet.ScrollMagnetContainer,
86 |       'scroll-magnet-item': VueScrollMagnet.ScrollMagnetItem
87 |     },
88 |     template: '<div class="example-container"><scroll-magnet-container><scroll-magnet-item><div class="example-item"><div class="text">This item will stick as you scroll!</div></div></scroll-magnet-item></scroll-magnet-container>'+ paragraphs(20) + paragraphs(20) +'</div>'
89 |   });
90 | </script>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>Vue Scroll Magnet</title>
 6 |     <style>
 7 |       #nav,.sidebar ul{list-style-type:none}#highlights .point,.search-query,a.button{box-sizing:border-box}.gutter pre{color:#999}pre{color:#525252}pre .constant,pre .function .keyword{color:#0092db}pre .attribute,pre .keyword{color:#e96900}pre .literal,pre .number{color:#ae81ff}pre .change,pre .clojure .built_in,pre .flow,pre .lisp .title,pre .nginx .title,pre .tag,pre .tag .title,pre .tex .special,pre .winutils{color:#2973b7}pre .class .title{color:#fff}pre .regexp,pre .symbol,pre .symbol .string,pre .value{color:#42b983}pre .title{color:#a6e22e}pre .addition,pre .apache .cbracket,pre .apache .tag,pre .attr_selector,pre .built_in,pre .django .filter .argument,pre .django .template_tag,pre .django .variable,pre .envvar,pre .haskell .type,pre .javadoc,pre .preprocessor,pre .prompt,pre .pseudo,pre .ruby .class .parent,pre .smalltalk .array,pre .smalltalk .class,pre .smalltalk .localvars,pre .sql .aggregate,pre .stream,pre .string,pre .subst,pre .tag .value,pre .tex .command{color:#42b983}pre .apache .sqbracket,pre .comment,pre .deletion,pre .doctype,pre .java .annotation,pre .pi,pre .python .decorator,pre .shebang,pre .template_comment,pre .tex .formula{color:#b3b3b3}a,body{color:#34495e}pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .cdata,pre .xml .css,pre .xml .javascript,pre .xml .vbscript{opacity:.5}body{font-family:'Source Sans Pro','Helvetica Neue',Arial,sans-serif;font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}body.docs{padding-top:61px}@media screen and (max-width:900px){body.docs{padding-top:0}}a{text-decoration:none}img{border:none}h1,h2,h3,h4,strong{font-weight:600;color:#2c3e50}code,pre{font-family:'Roboto Mono',Monaco,courier,monospace;font-size:.8em;background-color:#f8f8f8;-webkit-font-smoothing:initial;-moz-osx-font-smoothing:initial}#hero h2,#logo{font-family:Dosis,'Source Sans Pro','Helvetica Neue',Arial,sans-serif}code{color:#e96900;padding:3px 5px;margin:0 2px;border-radius:2px;white-space:nowrap}em{color:#7f8c8d}p{word-spacing:.05em}a.button{padding:.75em 2em;border-radius:2em;display:inline-block;color:#fff;background-color:#4fc08d;transition:all .15s ease;border:1px solid #4fc08d}a.button.white{background-color:#fff;color:#42b983}.highlight{overflow-x:auto;position:relative;background-color:#f8f8f8;padding:.8em .8em .4em;line-height:1.1em;border-radius:2px}#main,.sidebar{overflow-x:hidden}#ad,#header,#nav .nav-dropdown{background-color:#fff}.highlight table,.highlight td,.highlight tr{width:100%;border-collapse:collapse;padding:0;margin:0}.highlight .gutter{width:1.5em}#ad,#ad img{width:125px}.highlight .code pre{padding:1.2em 1.4em;line-height:1.5em;margin:0}.highlight .code .line{min-height:1.5em}.highlight.bash .code:after,.highlight.css .code:after,.highlight.html .code:after,.highlight.js .code:after{position:absolute;top:0;right:0;color:#ccc;text-align:right;font-size:.75em;padding:5px 10px 0;line-height:15px;height:15px;font-weight:600}#ad a,#ad span{color:#7f8c8d;display:inline-block}.highlight.html .code:after{content:'HTML'}.highlight.js .code:after{content:'JS'}.highlight.bash .code:after{content:'Shell'}.highlight.css .code:after{content:'CSS'}#main{position:relative;z-index:1;padding:0 60px 30px}#ad{position:fixed;z-index:99;bottom:10px;right:10px;padding:10px;border-radius:3px;font-size:13px}#ad a{font-weight:400}#ad span{margin-bottom:5px}#ad .carbon-img,#ad .carbon-text{display:block;margin-bottom:6px;font-weight:400;color:#34495e}#ad .carbon-poweredby{color:#aaa;font-weight:400}#nav .nav-link{cursor:pointer}#nav .nav-dropdown-container .nav-link:hover{border-bottom:none}#nav .nav-dropdown-container:hover .nav-dropdown{display:block}#nav .nav-dropdown-container.ecosystem{margin-left:20px}#nav .nav-dropdown{display:none;position:absolute;top:100%;left:0;padding:10px 0;border:1px solid #ddd;border-bottom-color:#ccc;text-align:left;border-radius:4px;white-space:nowrap}#nav .nav-dropdown li{line-height:1.8em;margin:0;display:block}#nav .nav-dropdown a{color:#7f8c8d;font-size:.9em;display:block;padding:0 24px 0 20px}#nav .nav-dropdown a:hover{color:#42b983}#nav .arrow{display:inline-block;vertical-align:middle;margin-top:-1px;margin-left:6px;margin-right:-14px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #ccc}#mobile-bar,#nav .break{display:none}#mobile-bar,body.docs #header{position:fixed;top:0;width:100%}#header{height:$heading-inner-height;padding:10px 60px;position:relative;z-index:2}body.docs #nav{position:fixed}#nav{margin:0;padding:0;position:absolute;right:60px;top:10px;height:40px;line-height:40px}#logo,#nav li{display:inline-block}#nav li{position:relative;margin:0 .6em}.nav-link{padding-bottom:3px}.nav-link.current,.nav-link:hover{border-bottom:3px solid #42b983}.search-query{height:30px;line-height:30px;padding:0 15px 0 30px;border:1px solid #e3e3e3;color:#2c3e50;outline:0;border-radius:15px;margin-right:10px;transition:border-color .2s ease;background:url(/images/search.png) 8px 5px no-repeat #fff;background-size:20px;vertical-align:middle!important}.search-query:focus{border-color:#42b983}#logo{font-size:1.5em;line-height:40px;color:#2c3e50;font-weight:500}#logo img{vertical-align:middle;margin-right:6px;width:40px;height:40px}#mobile-bar{left:0;height:40px;background-color:#fff;z-index:9;box-shadow:0 0 2px rgba(0,0,0,.25)}#mobile-bar .menu-button{position:absolute;width:24px;height:24px;top:8px;left:12px;background:url(../images/menu.png) center center no-repeat;background-size:24px}#mobile-bar .logo{position:absolute;width:30px;height:30px;background:url(../images/logo.png) center center no-repeat;top:5px;left:50%;margin-left:-15px;background-size:30px}.sidebar{position:absolute;z-index:10;top:61px;left:0;bottom:0;padding:40px 0 30px 60px;width:260px;margin-right:20px;overflow-y:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:none}.sidebar h2{margin-top:.2em}.sidebar ul{margin:0;line-height:1.8em;padding-left:1em}.sidebar .sidebar-link.new:after,.sidebar .version-select{margin-left:5px;vertical-align:middle}.sidebar .menu-root{padding-left:0}.sidebar .menu-sub{font-size:.85em}.sidebar .sidebar-link{color:#7f8c8d}.sidebar .sidebar-link.current{font-weight:600;color:#42b983}.sidebar .sidebar-link.new:after{content:"NEW";display:inline-block;font-size:10px;font-weight:600;color:#fff;background-color:#42b983;line-height:14px;padding:0 4px;border-radius:3px;position:relative;top:-1px}.sidebar .sidebar-link:hover{border-bottom:2px solid #42b983}.sidebar .section-link.active{font-weight:700;color:#42b983}.sidebar .main-menu{margin-bottom:20px;display:none;padding-left:0}.sidebar .become-backer,.sidebar .main-sponsor a,.sidebar .main-sponsor img{display:inline-block;width:125px}.sidebar .main-sponsor{color:#7f8c8d;font-size:.85em}.sidebar .main-sponsor a{margin:10px 0}.sidebar .become-backer{border:1px solid #42b983;border-radius:2em;color:#42b983;font-size:.8em;padding:4px 0;text-align:center;margin-bottom:20px}@media screen and (max-width:900px){.sidebar{position:fixed;z-index:8;background-color:#f9f9f9;height:100%;top:0;left:0;padding:60px 30px 20px;box-shadow:0 0 10px rgba(0,0,0,.2);box-sizing:border-box;transition:all .4s cubic-bezier(.4,0,0,1);-webkit-transform:translate(-280px,0);transform:translate(-280px,0)}.sidebar .search-query{width:200px;margin-bottom:10px}.sidebar .main-menu{display:block}.sidebar.open{-webkit-transform:translate(0,0);transform:translate(0,0)}}#logo img,#mobile-bar.top .logo,.sidebar{display:none}body{background-color:#727f80}#logo span{font-size:1.2em}#mobile-bar.top{background-color:transparent;box-shadow:none}#hero,#highlights{background-color:#fff}#hero{padding:50px 40px}#hero .inner{max-width:900px;margin:0 auto}#hero .left,#hero .right{display:inline-block;vertical-align:top}#hero .left{width:39%}#hero .right{width:61%}#hero .hero-logo{width:215px;height:215px;float:right;margin-right:60px}#hero h1{font-weight:300;margin:0;font-size:3.2em}#hero h2{font-weight:500;font-size:2.4em;margin:0 0 10px;display:none}#hero .button{margin:1em 0;font-size:1.05em;font-weight:600;letter-spacing:.1em}#hero .button:first-child{margin-right:1em}#hero .social-buttons{list-style-type:none;padding:0}#hero .social-buttons li{display:inline-block;vertical-align:middle;margin-right:15px}#highlights{padding-bottom:70px}#highlights .inner{max-width:900px;margin:0 auto;text-align:center}#highlights .point{width:33%;display:inline-block;vertical-align:top;padding:0 2em}#highlights .point h2{color:#42b983;font-size:1.5em;font-weight:400;margin:0;padding:.5em 0}#highlights .point p{color:#7f8c8d}#sponsors{text-align:center;padding:35px 40px 45px;background-color:#f6f6f6}#sponsors .inner{max-width:700px;margin:0 auto}#sponsors h3{color:#999;font-size:.9em;margin:0 0 10px}#sponsors a{margin:20px 15px 0;position:relative}#sponsors a,#sponsors img{width:100px;display:inline-block;vertical-align:middle}#sponsors img{transition:all .3s ease;filter:contrast(0)}#sponsors img:hover{filter:none}#sponsors a.vip{display:block;margin:30px auto 15px;width:200px}#sponsors a.vip img{width:200px}#sponsors .become-sponsor{margin-top:40px;font-size:.9em;font-weight:700;width:auto;background-color:transparent}#footer{padding:50px 0;color:#fff;text-align:center}#footer a{font-weight:700;color:#fff}@media screen and (max-width:900px){body{-webkit-text-size-adjust:none;font-size:14px}.sidebar{display:block}#header{display:none}#hero h2,#mobile-bar{display:block}#hero{padding:50px 40px 30px}#hero .hero-logo{float:none;margin:30px 0 15px;width:140px;height:140px}#hero .left,#hero .right{text-align:center;width:100%}#hero h1{font-size:2em}#hero .button{font-size:.9em}#highlights .point{display:block;margin:0 auto;width:300px;padding:0 40px 30px}#highlights .point:before{content:"—";color:#42b983}}
 8 | 
 9 |       #nav,.sidebar ul{list-style-type:none}.gutter pre{color:#999}pre{color:#525252}pre .constant,pre .function .keyword{color:#0092db}pre .attribute,pre .keyword{color:#e96900}pre .literal,pre .number{color:#ae81ff}pre .change,pre .clojure .built_in,pre .flow,pre .lisp .title,pre .nginx .title,pre .tag,pre .tag .title,pre .tex .special,pre .winutils{color:#2973b7}pre .class .title{color:#fff}pre .regexp,pre .symbol,pre .symbol .string,pre .value{color:#42b983}pre .title{color:#a6e22e}pre .addition,pre .apache .cbracket,pre .apache .tag,pre .attr_selector,pre .built_in,pre .django .filter .argument,pre .django .template_tag,pre .django .variable,pre .envvar,pre .haskell .type,pre .javadoc,pre .preprocessor,pre .prompt,pre .pseudo,pre .ruby .class .parent,pre .smalltalk .array,pre .smalltalk .class,pre .smalltalk .localvars,pre .sql .aggregate,pre .stream,pre .string,pre .subst,pre .tag .value,pre .tex .command{color:#42b983}pre .apache .sqbracket,pre .comment,pre .deletion,pre .doctype,pre .java .annotation,pre .pi,pre .python .decorator,pre .shebang,pre .template_comment,pre .tex .formula{color:#b3b3b3}a,body{color:#34495e}pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .cdata,pre .xml .css,pre .xml .javascript,pre .xml .vbscript{opacity:.5}body{font-family:'Source Sans Pro','Helvetica Neue',Arial,sans-serif;font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff;margin:0}body.docs{padding-top:61px}@media screen and (max-width:900px){body.docs{padding-top:0}}a{text-decoration:none}img{border:none}h1,h2,h3,h4,strong{font-weight:600;color:#2c3e50}code,pre{font-family:'Roboto Mono',Monaco,courier,monospace;font-size:.8em;background-color:#f8f8f8;-webkit-font-smoothing:initial;-moz-osx-font-smoothing:initial}#logo,.content p.tip:before{font-family:Dosis,'Source Sans Pro','Helvetica Neue',Arial,sans-serif}code{color:#e96900;padding:3px 5px;margin:0 2px;border-radius:2px;white-space:nowrap}em{color:#7f8c8d}p{word-spacing:.05em}a.button{padding:.75em 2em;border-radius:2em;display:inline-block;color:#fff;background-color:#4fc08d;transition:all .15s ease;box-sizing:border-box;border:1px solid #4fc08d}a.button.white{background-color:#fff;color:#42b983}.highlight{overflow-x:auto;position:relative;background-color:#f8f8f8;padding:.8em .8em .4em;line-height:1.1em;border-radius:2px}#ad,#header,#nav .nav-dropdown{background-color:#fff}.highlight table,.highlight td,.highlight tr{width:100%;border-collapse:collapse;padding:0;margin:0}.highlight .gutter{width:1.5em}#ad,#ad img{width:125px}.highlight .code pre{padding:1.2em 1.4em;line-height:1.5em;margin:0}.highlight .code .line{min-height:1.5em}.highlight.bash .code:after,.highlight.css .code:after,.highlight.html .code:after,.highlight.js .code:after{position:absolute;top:0;right:0;color:#ccc;text-align:right;font-size:.75em;padding:5px 10px 0;line-height:15px;height:15px;font-weight:600}#ad a,#ad span{color:#7f8c8d;display:inline-block}.highlight.html .code:after{content:'HTML'}.highlight.js .code:after{content:'JS'}.highlight.bash .code:after{content:'Shell'}.highlight.css .code:after{content:'CSS'}#main{position:relative;z-index:1;padding:0 60px 30px;overflow-x:hidden}#ad{position:fixed;z-index:99;bottom:10px;right:10px;padding:10px;border-radius:3px;font-size:13px}#ad a{font-weight:400}#ad span{margin-bottom:5px}#ad .carbon-img,#ad .carbon-text{display:block;margin-bottom:6px;font-weight:400;color:#34495e}#ad .carbon-poweredby{color:#aaa;font-weight:400}#nav .nav-link{cursor:pointer}#nav .nav-dropdown-container .nav-link:hover{border-bottom:none}#nav .nav-dropdown-container:hover .nav-dropdown{display:block}#nav .nav-dropdown-container.ecosystem{margin-left:20px}#nav .nav-dropdown{display:none;position:absolute;top:100%;left:0;padding:10px 0;border:1px solid #ddd;border-bottom-color:#ccc;text-align:left;border-radius:4px;white-space:nowrap}#nav .nav-dropdown li{line-height:1.8em;margin:0;display:block}#nav .nav-dropdown a{color:#7f8c8d;font-size:.9em;display:block;padding:0 24px 0 20px}#nav .nav-dropdown a:hover{color:#42b983}#nav .arrow{display:inline-block;vertical-align:middle;margin-top:-1px;margin-left:6px;margin-right:-14px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #ccc}#mobile-bar,#nav .break{display:none}#mobile-bar,body.docs #header{position:fixed;top:0;width:100%}#header{height:$heading-inner-height;padding:10px 60px;position:relative;z-index:2}body.docs #nav{position:fixed}#nav{margin:0;padding:0;position:absolute;right:60px;top:10px;height:40px;line-height:40px}#logo,#nav li{display:inline-block}#nav li{position:relative;margin:0 .6em}.nav-link{padding-bottom:3px}.nav-link.current,.nav-link:hover{border-bottom:3px solid #42b983}.search-query{height:30px;line-height:30px;box-sizing:border-box;padding:0 15px 0 30px;border:1px solid #e3e3e3;color:#2c3e50;outline:0;border-radius:15px;margin-right:10px;transition:border-color .2s ease;background:url(/images/search.png) 8px 5px no-repeat #fff;background-size:20px;vertical-align:middle!important}.search-query:focus{border-color:#42b983}#logo{font-size:1.5em;line-height:40px;color:#2c3e50;font-weight:500}#logo img{vertical-align:middle;margin-right:6px;width:40px;height:40px}#mobile-bar{left:0;height:40px;background-color:#fff;z-index:9;box-shadow:0 0 2px rgba(0,0,0,.25)}#mobile-bar .menu-button{position:absolute;width:24px;height:24px;top:8px;left:12px;background:url(../images/menu.png) center center no-repeat;background-size:24px}#mobile-bar .logo{position:absolute;width:30px;height:30px;background:url(../images/logo.png) center center no-repeat;top:5px;left:50%;margin-left:-15px;background-size:30px}#demo,.demo{border:1px solid #eee;border-radius:2px;padding:25px 35px;margin-bottom:40px;font-size:1.2em;line-height:1.5em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow-x:scroll}#demo h1,.demo h1{margin:0 0 .5em;font-size:1.8em}#demo ol:first-child,#demo p:first-child,#demo ul:first-child,.demo ol:first-child,.demo p:first-child,.demo ul:first-child{margin-top:0}#demo ol:last-child,#demo p:last-child,#demo ul:last-child,.demo ol:last-child,.demo p:last-child,.demo ul:last-child{margin-bottom:0}#demo ol,#demo ul,.demo ol,.demo ul{padding-left:1.5em}#demo li,.demo li{color:#34495e}#demo li.done,.demo li.done{color:#7f8c8d;text-decoration:line-through}#demo textarea,.demo textarea{width:100%;resize:vertical}ul#demo li,ul.demo li{margin-left:1.5em}@media screen and (max-width:900px){#demo,.demo{margin-left:0}}.benchmark-table{margin:0 auto;text-align:center}.benchmark-table tbody>tr>th{text-align:right}.benchmark-table td,.benchmark-table th{padding:3px 7px}.sponsors-page a,.sponsors-page img{width:120px;display:inline-block;vertical-align:middle}.sponsors-page a{margin:10px 20px}.content.guide[class*=migration] h2>sup,.content.guide[class*=migration] h3>sup{margin-left:.3em;color:#b9465c}.content.guide[class*=migration] .upgrade-path{padding:2em;background:rgba(73,195,140,.1);border-radius:2px}.content.guide[class*=migration] .upgrade-path>h4{margin-top:0}.content.guide[class*=migration] .upgrade-path>p:last-child{margin-bottom:0}.sidebar{position:absolute;z-index:10;top:61px;left:0;bottom:0;padding:40px 0 30px 60px;width:260px;margin-right:20px;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:none}.sidebar h2{margin-top:.2em}.sidebar ul{margin:0;line-height:1.8em;padding-left:1em}.sidebar .sidebar-link.new:after,.sidebar .version-select{margin-left:5px;vertical-align:middle}.sidebar .menu-root{padding-left:0}.sidebar .menu-sub{font-size:.85em}.sidebar .sidebar-link{color:#7f8c8d}.sidebar .sidebar-link.current{font-weight:600;color:#42b983}.sidebar .sidebar-link.new:after{content:"NEW";display:inline-block;font-size:10px;font-weight:600;color:#fff;background-color:#42b983;line-height:14px;padding:0 4px;border-radius:3px;position:relative;top:-1px}.sidebar .sidebar-link:hover{border-bottom:2px solid #42b983}.sidebar .section-link.active{font-weight:700;color:#42b983}.sidebar .main-menu{margin-bottom:20px;display:none;padding-left:0}.sidebar .become-backer,.sidebar .main-sponsor a,.sidebar .main-sponsor img{display:inline-block;width:125px}.sidebar .main-sponsor{color:#7f8c8d;font-size:.85em}.sidebar .main-sponsor a{margin:10px 0}.sidebar .become-backer{border:1px solid #42b983;border-radius:2em;color:#42b983;font-size:.8em;padding:4px 0;text-align:center;margin-bottom:20px}@media screen and (max-width:900px){.sidebar{position:fixed;z-index:8;background-color:#f9f9f9;height:100%;top:0;left:0;padding:60px 30px 20px;box-shadow:0 0 10px rgba(0,0,0,.2);box-sizing:border-box;transition:all .4s cubic-bezier(.4,0,0,1);-webkit-transform:translate(-280px,0);transform:translate(-280px,0)}.sidebar .search-query{width:200px;margin-bottom:10px}.sidebar .main-menu{display:block}.sidebar.open{-webkit-transform:translate(0,0);transform:translate(0,0)}}.content a.button,.content span.info{display:inline-block;vertical-align:middle}#header{box-shadow:0 0 1px rgba(0,0,0,.25);transition:background-color .3s ease-in-out}.content{position:relative;padding:2.2em 0;max-width:600px;margin:0 auto}.content.api>a:first-of-type>h2{margin-top:0;padding-top:0}.content.api ul{padding-left:1.25em;line-height:1.4em}.content.api ul p,.content.api ul ul{margin:.6em 0}.content a.button{font-size:.9em;color:#fff;margin:.2em 0;width:180px;text-align:center;padding:12px 24px}.content img{max-width:100%}.content span.light{color:#7f8c8d}.content span.info{font-size:.85em;width:280px;margin-left:20px}.content h1{margin:0 0 1em}.content h2:before,.content h3:before{content:'';display:block;margin-top:-91px;height:91px;visibility:hidden}.content h2{margin:45px 0 .8em;padding-bottom:.7em;border-bottom:1px solid #ddd;z-index:-1}.content h3{margin:52px 0 1.2em;position:relative;z-index:-1}.content h3:after{content:"#";color:#42b983;position:absolute;left:-.7em;bottom:-2px;font-size:1.2em;font-weight:700}.content figure,.content ol,.content p,.content ul{margin:1.2em 0}.content ol,.content p,.content ul{line-height:1.6em}.content ol,.content ul{padding-left:1.5em}.content a{color:#42b983;font-weight:600}.content blockquote{margin:2em 0;padding-left:20px;border-left:4px solid #42b983}.content blockquote p{font-weight:600;margin-left:0}.content iframe{margin:1em 0}.content p.tip{padding:12px 24px 12px 30px;margin:2em 0;border-left:4px solid #f66;background-color:#f8f8f8;position:relative;border-bottom-right-radius:2px;border-top-right-radius:2px}.content p.tip:before{position:absolute;top:14px;left:-12px;background-color:#f66;color:#fff;content:"!";width:20px;height:20px;border-radius:100%;text-align:center;line-height:20px;font-weight:700;font-size:14px}.content p.tip code{background-color:#efefef}.content p.tip em{color:#34495e}.guide-links{margin-top:2em;height:1em}.footer{color:#7f8c8d;margin-top:2em;padding-top:2em;border-top:1px solid #e5e5e5;font-size:.9em}#main.fix-sidebar .sidebar{position:fixed}@media screen and (min-width:1360px){#header{background-color:rgba(255,255,255,.4)}}@media screen and (max-width:1300px){.content.with-sidebar{margin-left:290px}#ad{z-index:7;position:relative;bottom:0;right:0;float:right;padding:0 0 20px 30px}}@media screen and (max-width:900px){body{-webkit-text-size-adjust:none;font-size:14px}#header,#logo{display:none}.nav-link{padding-bottom:1px}.nav-link.current,.nav-link:hover{border-bottom:2px solid #42b983}#mobile-bar{display:block}#main{padding:2em 1.4em 0}.highlight pre{padding:1.2em 1em}.content.with-sidebar{margin:auto}.content h2:before,.content h3:before{content:'';display:block;margin-top:-70px;height:70px;visibility:hidden}.footer{margin-left:0;text-align:center}}@media screen and (max-width:560px){#downloads{text-align:center;margin-bottom:25px}#downloads .info{margin-top:5px;margin-left:0}iframe{margin:0!important}}
10 |     </style>
11 |   </head>
12 |   <body>
13 |     <div id="app"></div>
14 |     <!-- built files will be auto injected -->
15 |   </body>
16 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-scroll-magnet",
 3 |   "version": "0.3.7",
 4 |   "description": "Wrappers for Vue components which follow the viewport while scrolling within the bounds of their parent container",
 5 |   "author": "Todd Beauchamp <toddbee@gmail.com>",
 6 |   "main": "src/index.js",
 7 |   "scripts": {
 8 |     "build": "webpack --config build/webpack.min.conf.js",
 9 |     "unit": "./node_modules/.bin/karma start test/unit/karma.conf.js --single-run",
10 |     "test": "npm run unit",
11 |     "lint": "eslint --ext .js,.vue src test/unit/specs"
12 |   },
13 |   "devDependencies": {
14 |     "autoprefixer": "^6.4.0",
15 |     "babel-core": "^6.0.0",
16 |     "babel-eslint": "^7.1.1",
17 |     "babel-loader": "^6.0.0",
18 |     "babel-plugin-transform-runtime": "^6.0.0",
19 |     "babel-preset-es2015": "^6.0.0",
20 |     "babel-preset-stage-2": "^6.0.0",
21 |     "babel-register": "^6.0.0",
22 |     "chai": "^3.5.0",
23 |     "chai-jquery": "^2.0.0",
24 |     "chalk": "^1.1.3",
25 |     "connect-history-api-fallback": "^1.1.0",
26 |     "copy-webpack-plugin": "^4.0.1",
27 |     "css-loader": "^0.25.0",
28 |     "eslint": "^3.13.1",
29 |     "eslint-config-airbnb-base": "^8.0.0",
30 |     "eslint-config-ssense": "^0.1.0",
31 |     "eslint-friendly-formatter": "^2.0.5",
32 |     "eslint-import-resolver-webpack": "^0.6.0",
33 |     "eslint-loader": "^1.5.0",
34 |     "eslint-plugin-fp": "^2.3.0",
35 |     "eslint-plugin-html": "^1.3.0",
36 |     "eslint-plugin-import": "^1.16.0",
37 |     "eslint-plugin-vue": "^1.0.0",
38 |     "eventsource-polyfill": "^0.9.6",
39 |     "express": "^4.13.3",
40 |     "extract-text-webpack-plugin": "^1.0.1",
41 |     "file-loader": "^0.9.0",
42 |     "function-bind": "^1.0.2",
43 |     "html-webpack-plugin": "^2.8.1",
44 |     "http-proxy-middleware": "^0.17.2",
45 |     "inject-loader": "^2.0.1",
46 |     "isparta-loader": "^2.0.0",
47 |     "jquery": "^3.1.1",
48 |     "json-loader": "^0.5.4",
49 |     "karma": "^1.3.0",
50 |     "karma-chrome-launcher": "^2.0.0",
51 |     "karma-coverage": "^1.1.1",
52 |     "karma-jquery": "^0.1.0",
53 |     "karma-mocha": "^1.2.0",
54 |     "karma-phantomjs-launcher": "^1.0.0",
55 |     "karma-sinon-chai": "^1.2.0",
56 |     "karma-sourcemap-loader": "^0.3.7",
57 |     "karma-spec-reporter": "0.0.26",
58 |     "karma-verbose-reporter": "0.0.3",
59 |     "karma-webpack": "^1.7.0",
60 |     "lolex": "^1.4.0",
61 |     "mocha": "^3.1.0",
62 |     "opn": "^4.0.2",
63 |     "ora": "^0.3.0",
64 |     "phantomjs-prebuilt": "^2.1.3",
65 |     "semver": "^5.3.0",
66 |     "shelljs": "^0.7.4",
67 |     "sinon": "^1.17.3",
68 |     "sinon-chai": "^2.8.0",
69 |     "url-loader": "^0.5.7",
70 |     "vue": "^2.0.1",
71 |     "vue-loader": "^9.4.0",
72 |     "vue-router": "^2.0.3",
73 |     "vue-style-loader": "^1.0.0",
74 |     "webpack": "^1.13.2",
75 |     "webpack-dev-middleware": "^1.8.3",
76 |     "webpack-hot-middleware": "^2.12.2",
77 |     "webpack-merge": "^0.14.1"
78 |   },
79 |   "engines": {
80 |     "node": ">= 4.0.0",
81 |     "npm": ">= 3.0.0"
82 |   }
83 | }
84 | 


--------------------------------------------------------------------------------
/src/ScrollMagnetContainer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="scroll-magnet-container" :style="`height: ${height}px`">
  3 |     <slot></slot>
  4 |   </div>
  5 | </template>
  6 | 
  7 | <script>
  8 |   /* eslint-disable no-undef */
  9 |   export default {
 10 |     name: "scroll-magnet-container",
 11 |     data() {
 12 |       return {
 13 |         width: 0,
 14 |         height: 0,
 15 |         offsetTop: 0,
 16 |         scrollTop: 0,
 17 |         mutationObserver: null,
 18 |         target: null,
 19 |       }
 20 |     },
 21 |     props: {
 22 |       boundsElementSelector: {
 23 |         type: String,
 24 |         default: "",
 25 |         required: false,
 26 |       },
 27 |     },
 28 |     created() {
 29 |       this.attachScroll()
 30 |       this.attachResize()
 31 |     },
 32 |     mounted() {
 33 |       // Assign a target element to the container. This element will be used as a reference
 34 |       // for the height of the scrollable area.
 35 |       if (!this.boundsElementSelector) {
 36 |         // If no prop is provided, use the parent element of <scroll-magnet-container>
 37 |         this.target = this.$el.parentElement
 38 |       } else {
 39 |         // Find the element by its selector and assign it as the target
 40 |         const $el = document.querySelector(this.boundsElementSelector)
 41 |         if ($el) {
 42 |           this.target = $el
 43 |         }
 44 |       }
 45 | 
 46 |       this.getElementPosition()
 47 |       this.attachMutationObserver()
 48 |     },
 49 |     beforeUpdate() {
 50 |       this.$nextTick(() => {
 51 |         this.getScrollPosition();
 52 |         this.getElementPosition({ recalcWidth: true, recalcHeight: true });
 53 |       });
 54 |     },
 55 |     destroyed() {
 56 |       this.detachScroll()
 57 |       this.detachResize()
 58 |       this.detachMutationObserver()
 59 |     },
 60 |     methods: {
 61 |       /**
 62 |        * Attach a scroll listener to the window and update scrollTop data attribute
 63 |        * Child scroll magnets will listen on this scroll value to determine their position
 64 |        */
 65 |       attachScroll() {
 66 |         if (typeof window !== "undefined") {
 67 |           this.scrollListener = window.addEventListener("scroll", () => {
 68 |             this.getScrollPosition()
 69 |             this.getElementPosition()
 70 |           })
 71 |         }
 72 |       },
 73 |       /**
 74 |        * Remove the scroll event listener
 75 |        */
 76 |       detachScroll() {
 77 |         if (typeof window !== "undefined") {
 78 |           window.removeEventListener("scroll", this.scrollListener)
 79 |         }
 80 |       },
 81 |       /**
 82 |        * Attach the resize event listener
 83 |        */
 84 |       attachResize() {
 85 |         if (typeof window !== "undefined") {
 86 |           this.resizeListener = window.addEventListener("resize", () => {
 87 |             setTimeout(() => {
 88 |               this.getScrollPosition()
 89 |               this.getElementPosition({ recalcWidth: true, recalcHeight: true })
 90 |             }, 16)
 91 |           })
 92 |         }
 93 |       },
 94 |       /**
 95 |        * Remove the resize event listener
 96 |        */
 97 |       detachResize() {
 98 |         if (typeof window !== "undefined") {
 99 |           window.removeEventListener("resize", this.resizeListener)
100 |         }
101 |       },
102 |       /**
103 |        * A mutation observer is used to detect changes to the containing node
104 |        * in order to keep the magnet container in sync with the height its reference node.
105 |        */
106 |       attachMutationObserver() {
107 |         if (typeof window !== "undefined") {
108 |           const MutationObserver = window.MutationObserver
109 |            || window.WebKitMutationObserver
110 |            || window.MozMutationObserver
111 | 
112 |           if (MutationObserver) {
113 |             const config = { attributes: true }
114 | 
115 |             this.mutationObserver = new MutationObserver(() => {
116 |               // When the reference element changes, we must recompute the scroll attributes
117 |               this.getElementPosition({ recalcWidth: true, recalcHeight: true })
118 | 
119 |               // The child magnet item listens for changes to this.scrollTop in this component
120 |               // to update itself. this.scrollTop is manually adjusted so that the child updates
121 |               // when the parent does.
122 |               this.scrollTop = this.getScrollY() + 1
123 |               this.$nextTick(() => { this.scrollTop = this.getScrollY() })
124 |             })
125 |             if (this.target) {
126 |               this.mutationObserver.observe(this.target, config)
127 |             }
128 |           }
129 |         }
130 |       },
131 |       /**
132 |        * Stop listening to mutation changes
133 |        */
134 |       detachMutationObserver() {
135 |         if (this.mutationObserver) {
136 |           this.mutationObserver.disconnect()
137 |         }
138 |       },
139 |       /**
140 |        * Get the container"s dimensions and offset and update data attributes
141 |        * @param  {object} options Configuration object for options
142 |        */
143 |       getElementPosition(options) {
144 |         const recalcWidth = (options && options.recalcWidth) || false
145 |         const recalcHeight = (options && options.recalcHeight) || false
146 | 
147 |         this.offsetTop = this.$el.getBoundingClientRect().top + this.getScrollY()
148 | 
149 |         if (!this.width > 0 || recalcWidth) {
150 |           this.width = (this.$el && this.$el.clientWidth) || 0
151 |         }
152 | 
153 |         if (!this.height > 0 || recalcHeight) {
154 |           this.height = (this.target && this.target.clientHeight) || 0
155 |         }
156 |       },
157 |       /**
158 |        * Recalculate the scroll container"s position
159 |        */
160 |       getScrollPosition() {
161 |         this.scrollTop = this.getScrollY()
162 |         this.offsetTop = this.$el.getBoundingClientRect().top + this.getScrollY()
163 |       },
164 |       /**
165 |        * Get the current scroll position
166 |        * @return {number} Scroll position
167 |        */
168 |       getScrollY() {
169 |         if (typeof window === "undefined") {
170 |           return 0
171 |         }
172 | 
173 |         // pageYOffset for IE compatibility
174 |         return window.scrollY || window.pageYOffset
175 |       },
176 |     },
177 |   }
178 | </script>
179 | 
180 | <style scoped>
181 |   .scroll-magnet-container {
182 |     position: relative;
183 |   }
184 | </style>


--------------------------------------------------------------------------------
/src/ScrollMagnetItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="scroll-magnet-item"
  4 |     v-bind:style="`width: ${width > 0 && width}px; top: ${top}`"
  5 |     v-bind:class="{ 'is-scrolling': isScrolling, 'is-bottomed': isBottomed }">
  6 |     <slot></slot>
  7 |   </div>
  8 | </template>
  9 | 
 10 | <script>
 11 |   export default {
 12 |     name: "scroll-magnet-item",
 13 |     data() {
 14 |       return {
 15 |         nearestContainer: undefined,
 16 |         width: 0,
 17 |         height: 0,
 18 |         top: 0,
 19 |         scrollDist: 0,
 20 |         scrollEnd: 0,
 21 |         isBottomed: false,
 22 |         isScrolling: false,
 23 |       }
 24 |     },
 25 |     props: {
 26 |       offsetTopPad: {
 27 |         type: Number,
 28 |         default: 0,
 29 |         required: false,
 30 |       },
 31 |     },
 32 |     created() {
 33 |       this.nearestContainer = this.getNearestMagnetContainer()
 34 |     },
 35 |     mounted() {
 36 |       // Get and set initial state dependend on DOM attributes
 37 |       this.setMagnetHeight()
 38 | 
 39 |       this.$nextTick(() => {
 40 |         this.setMagnetStatus(this.nearestContainer)
 41 |         this.setMagnetWidth()
 42 |       })
 43 | 
 44 |       // Listen on changes to the parent container"s width and update the item"s width accordingly
 45 |       this.$watch("nearestContainer.width", () => {
 46 |         this.width = this.nearestContainer.width
 47 |       })
 48 | 
 49 |       // Listen on changes to the scroll position from the parent and update the magnet"s status
 50 |       this.$watch("nearestContainer.scrollTop", () => {
 51 |         this.setMagnetStatus(this.nearestContainer)
 52 |       })
 53 |     },
 54 |     methods: {
 55 |       /**
 56 |        * Find the nearest container component
 57 |        * @return {object} The matching Vue component object
 58 |        */
 59 |       getNearestMagnetContainer() {
 60 |         return this.checkParentForMatch(this.$parent)
 61 |       },
 62 |       /**
 63 |        * Recursively lookup nearest parent which is a scroll magnet container
 64 |        * @param  {object} parent The parent"s Vue component object
 65 |        * @return {object}        The matching Vue component object
 66 |        */
 67 |       checkParentForMatch(parent) {
 68 |         return (
 69 |           parent && parent.$options._componentTag === "scroll-magnet-container" // eslint-disable-line no-underscore-dangle,max-len
 70 |           ) ? parent : this.checkParentForMatch(parent)
 71 |       },
 72 |       /**
 73 |        * Assign the magnet"s width to match the parent"s width
 74 |        * This will be used as an inline CSS property on the magnet
 75 |        */
 76 |       setMagnetWidth() {
 77 |         this.width = this.nearestContainer.width
 78 |       },
 79 |       /**
 80 |        * Assign the magnet"s height to match its content
 81 |        * This is used as a reference for how tall the magnet is while scrolling
 82 |        */
 83 |       setMagnetHeight() {
 84 |         const viewportOffset = this.$el.getBoundingClientRect()
 85 | 
 86 |         this.height = viewportOffset.height
 87 |       },
 88 |       /**
 89 |        * Update the magnet"s status while scrolling
 90 |        */
 91 |       setMagnetStatus(nearestContainer) {
 92 |         this.setMagnetHeight() // Recheck for any changes in magnet height
 93 | 
 94 |         // The distance scrolled within the bounds (Number)
 95 |         this.scrollDist = (nearestContainer.scrollTop + this.height)
 96 | 
 97 |         // The maximum scrollable distance (Number)
 98 |         this.scrollEnd = (nearestContainer.offsetTop + (nearestContainer.height - this.offsetTopPad))
 99 | 
100 |         // Is the item still within the bounds? (Boolean)
101 |         this.isWithinHeight = (this.scrollDist < this.scrollEnd)
102 | 
103 |         // Is the item currently scrolling? (Boolean)
104 |         this.isScrolling = (
105 |           (nearestContainer.scrollTop + this.offsetTopPad)
106 |           >= nearestContainer.offsetTop && this.isWithinHeight
107 |         )
108 | 
109 |         // Should the item stick to the bottom of the bounds? (Boolean)
110 |         this.isBottomed = (this.scrollDist >= this.scrollEnd)
111 | 
112 |         // Item"s CSS top value (Number)
113 |         this.top = (this.isBottomed ? "auto" : `${this.offsetTopPad}px`)
114 |       },
115 |     },
116 |   }
117 | </script>
118 | 
119 | <style scoped>
120 |   .scroll-magnet-item {
121 |     position: relative;
122 |     width: 100%;
123 |   }
124 | 
125 |   .is-scrolling {
126 |     position: fixed;
127 |     top: 0;
128 |   }
129 | 
130 |   .is-bottomed {
131 |     position: absolute;
132 |     bottom: 0;
133 |   }
134 | </style>


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | 
 3 | var ScrollMagnetContainer = require('./ScrollMagnetContainer.vue'),
 4 |     ScrollMagnetItem = require('./ScrollMagnetItem.vue');
 5 | 
 6 | module.exports = {
 7 |   install: function(Vue) {
 8 |     Vue.component('scroll-magnet-container', ScrollMagnetContainer);
 9 |     Vue.component('scroll-magnet-item', ScrollMagnetItem);
10 |   },
11 |   ScrollMagnetContainer: ScrollMagnetContainer,
12 |   ScrollMagnetItem: ScrollMagnetItem
13 | };
14 | 


--------------------------------------------------------------------------------
/test/unit/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "mocha": true
 4 |   },
 5 |   "globals": {
 6 |     "expect": true,
 7 |     "sinon": true
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/test/unit/index.js:
--------------------------------------------------------------------------------
 1 | // Polyfill fn.bind() for PhantomJS
 2 | /* eslint-disable no-extend-native */
 3 | Function.prototype.bind = require('function-bind')
 4 | 
 5 | // require all test files (files that ends with .spec.js)
 6 | var testsContext = require.context('./specs', true, /\.spec$/)
 7 | testsContext.keys().forEach(testsContext)
 8 | 
 9 | // require all src files except main.js for coverage.
10 | // you can also change this to match only the subset of files that
11 | // you want coverage for.
12 | var srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
13 | srcContext.keys().forEach(srcContext)
14 | 


--------------------------------------------------------------------------------
/test/unit/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // This is a karma config file. For more details see
 2 | //   http://karma-runner.github.io/0.13/config/configuration-file.html
 3 | // we are also using it with karma-webpack
 4 | //   https://github.com/webpack/karma-webpack
 5 | 
 6 | var path = require('path')
 7 | var merge = require('webpack-merge')
 8 | var baseConfig = require('../../build/webpack.base.conf.js')
 9 | //var utils = require('../../build/utils')
10 | var projectRoot = path.resolve(__dirname, '../../')
11 | 
12 | var webpackConfig = merge(baseConfig, {
13 |   // use inline sourcemap for karma-sourcemap-loader
14 |   /*module: {
15 |     loaders: utils.styleLoaders()
16 |   },*/
17 |   devtool: '#inline-source-map',
18 |   vue: {
19 |     loaders: {
20 |       js: 'isparta'
21 |     }
22 |   }
23 | })
24 | 
25 | // no need for app entry during tests
26 | delete webpackConfig.entry
27 | 
28 | // make sure isparta loader is applied before eslint
29 | webpackConfig.module.preLoaders = webpackConfig.module.preLoaders || []
30 | webpackConfig.module.preLoaders.unshift({
31 |   test: /\.js$/,
32 |   loader: 'isparta',
33 |   include: projectRoot,
34 |   exclude: /test\/unit|node_modules/
35 | })
36 | 
37 | // only apply babel for test files when using isparta
38 | webpackConfig.module.loaders.some(function (loader, i) {
39 |   if (loader.loader === 'babel') {
40 |     loader.include = /test\/unit/
41 |     return true
42 |   }
43 | })
44 | 
45 | module.exports = function (config) {
46 |   config.set({
47 |     // to run in additional browsers:
48 |     // 1. install corresponding karma launcher
49 |     //    http://karma-runner.github.io/0.13/config/browsers.html
50 |     // 2. add it to the `browsers` array below.
51 |     browsers: ['Chrome'],
52 |     frameworks: ['mocha', 'sinon-chai'],
53 |     reporters: ['spec', 'coverage'],
54 |     files: ['./index.js'],
55 |     preprocessors: {
56 |       './index.js': ['webpack', 'sourcemap']
57 |     },
58 |     logLevel: config.LOG_DEBUG,
59 |     webpack: webpackConfig,
60 |     webpackMiddleware: {
61 |       noInfo: true
62 |     },
63 |     coverageReporter: {
64 |       dir: './coverage',
65 |       reporters: [
66 |         { type: 'lcov', subdir: '.' },
67 |         { type: 'text-summary' }
68 |       ]
69 |     }
70 |   })
71 | }
72 | 


--------------------------------------------------------------------------------
/test/unit/specs/ScrollMagnetContainer.spec.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | 
 3 | import Vue from 'vue';
 4 | import VueScrollMagnet from '../../../src/index.js';
 5 | import ScrollMagnetContainer from '../../../src/ScrollMagnetContainer.vue';
 6 | import { createAppContainer, simulateScroll } from '../utils';
 7 | 
 8 | simulateScroll(0); // Reset scroll position
 9 | 
10 | describe('ScrollMagnetContainer.vue', () => {
11 |   it('should install successfully when used globally', () => {
12 |     const ContainerInstance = Vue.extend(ScrollMagnetContainer);
13 |     createAppContainer();
14 |     Vue.use(VueScrollMagnet);
15 |     const vm = new Vue({
16 |       el: '#appInner',
17 |       template: '<scroll-magnet-container></scroll-magnet-container>',
18 |     });
19 |     vm.$mount;
20 |     expect(vm.$children[0]._isMounted).to.equal(true);
21 |   });
22 | 
23 |   it('should mount successfully', () => {
24 |     const ContainerInstance = Vue.extend(ScrollMagnetContainer);
25 |     createAppContainer();
26 |     Vue.component('scroll-magnet-container', ContainerInstance);
27 |     const vm = new Vue({
28 |       el: '#appInner',
29 |       template: '<scroll-magnet-container></scroll-magnet-container>',
30 |     });
31 |     vm.$mount;
32 |     expect(vm.$children[0]._isMounted).to.equal(true);
33 |   });
34 | 
35 |   it('should match an element when targetElement prop is set', (done) => {
36 |     const ContainerInstance = Vue.extend(ScrollMagnetContainer);
37 |     createAppContainer();
38 |     Vue.component('scroll-magnet-container', ContainerInstance);
39 |     const vm = new Vue({
40 |       el: '#appInner',
41 |       template: '<scroll-magnet-container targetElement="#app"></scroll-magnet-container>'
42 |     });
43 |     vm.$mount;
44 |     expect(vm.$children[0].target).to.not.equal(undefined);
45 |     expect(vm.$children[0].target.id).to.equal('app');
46 |     done();
47 |   });
48 | 
49 |   it('should update scrollTop attribute when scroll occurs', (done) => {
50 |     const ContainerInstance = Vue.extend(ScrollMagnetContainer);
51 |     createAppContainer();
52 |     Vue.component('scroll-magnet-container', ContainerInstance);
53 |     const vm = new Vue({
54 |       el: '#appInner',
55 |       template: '<scroll-magnet-container></scroll-magnet-container>'
56 |     });
57 |     vm.$mount;
58 |     simulateScroll(600);
59 |     expect(vm.$children[0].scrollTop).to.equal(600);
60 |     done();
61 |   });
62 | 
63 |   it('should not attach listeners if window is not defined', (done) => {
64 |     const ContainerInstance = Vue.extend(ScrollMagnetContainer);
65 |     createAppContainer();
66 |     Vue.component('scroll-magnet-container', ContainerInstance);
67 |     const vm = new Vue({
68 |       el: '#appInner',
69 |       template: '<scroll-magnet-container></scroll-magnet-container>'
70 |     });
71 |     vm.$mount;
72 |     simulateScroll(600);
73 |     expect(vm.$children[0].scrollTop).to.equal(600);
74 |     done();
75 |   });
76 | 
77 |   it('should unmount successfully', () => {
78 |     const ContainerInstance = Vue.extend(ScrollMagnetContainer);
79 |     createAppContainer();
80 |     Vue.component('scroll-magnet-container', ContainerInstance);
81 |     const vm = new Vue({
82 |       el: '#appInner',
83 |       template: '<scroll-magnet-container></scroll-magnet-container>'
84 |     });
85 |     vm.$mount;
86 |     vm.$destroy();
87 |     expect(vm.$children[0]._isDestroyed).to.equal(true);
88 |   });
89 | });
90 | 


--------------------------------------------------------------------------------
/test/unit/specs/ScrollMagnetItem.spec.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | 
 3 | import Vue from 'vue';
 4 | import ScrollMagnetContainer from '../../../src/ScrollMagnetContainer';
 5 | import ScrollMagnetItem from '../../../src/ScrollMagnetItem';
 6 | import { createAppContainer, simulateScroll } from '../utils';
 7 | 
 8 | describe('ScrollMagnetItem.vue', () => {
 9 |   it('should mount successfully', () => {
10 |     const ContainerInstance = Vue.extend(ScrollMagnetContainer);
11 |     const ItemInstance = Vue.extend(ScrollMagnetItem);
12 |     const vm = new ContainerInstance();
13 |     vm.$children.push(ItemInstance);
14 |     vm.$mount();
15 |     expect(vm._isMounted).to.equal(true);
16 |   });
17 | 
18 |   it('should update default data attributes to match parent container context', (done) => {
19 |     const ContainerInstance = Vue.extend(ScrollMagnetContainer);
20 |     const ItemInstance = Vue.extend(ScrollMagnetItem);
21 |     const appContainer = document.createElement('div');
22 |     createAppContainer();
23 |     Vue.component('scroll-magnet-container', ContainerInstance);
24 |     Vue.component('scroll-magnet-item', ItemInstance);
25 |     const vm = new Vue({
26 |       el: '#appInner',
27 |       template: '<scroll-magnet-container><scroll-magnet-item></scroll-magnet-item></scroll-magnet-container>'
28 |     });
29 |     vm.$mount();
30 |     const $container = vm.$children[0];
31 |     const $item = $container.$children[0];
32 |     setTimeout(() => {
33 |       // Data attributes
34 |       expect($item.nearestContainer).to.equal(vm.$children[0]);
35 |       expect($item.width).to.equal($item.nearestContainer.$el.clientWidth);
36 |       expect($item.height).to.equal(0);
37 |       expect($item.scrollDist).to.equal(600);
38 |       expect($item.scrollEnd).to.equal(($item.nearestContainer.offsetTop + ($item.nearestContainer.height - $item.offsetTopPad)));
39 |       expect($item.isBottomed).to.equal(false);
40 |       expect($item.isScrolling).to.equal(false);
41 |       // Props
42 |       expect($item.offsetTopPad).to.equal(0);
43 |       done();
44 |     }, 100);
45 |   });
46 | 
47 |   it('should use default top value if not isBottomed', (done) => {
48 |     const ContainerInstance = Vue.extend(ScrollMagnetContainer);
49 |     const ItemInstance = Vue.extend(ScrollMagnetItem);
50 |     createAppContainer();
51 |     Vue.component('scroll-magnet-container', ContainerInstance);
52 |     Vue.component('scroll-magnet-item', ItemInstance);
53 |     const vm = new Vue({
54 |       el: '#appInner',
55 |       template: '<scroll-magnet-container><scroll-magnet-item></scroll-magnet-item></scroll-magnet-container>'
56 |     });
57 |     vm.$mount();
58 |     const $container = vm.$children[0];
59 |     const $item = $container.$children[0];
60 |     Vue.set(vm.$children[0], 'scrollTop', 0);
61 |     setTimeout(() => {
62 |       expect($item.top).to.not.equal('initial');
63 |       done();
64 |     }, 100);
65 |   });
66 | 
67 |   it('should unmount successfully', () => {
68 |     const ContainerInstance = Vue.extend(ScrollMagnetContainer);
69 |     const ItemInstance = Vue.extend(ScrollMagnetItem);
70 |     const vm = new ContainerInstance();
71 |     vm.$children.push(ItemInstance);
72 |     vm.$mount();
73 |     vm.$destroy();
74 |     expect(vm._isDestroyed).to.equal(true);
75 |   });
76 | });
77 | 


--------------------------------------------------------------------------------
/test/unit/utils/index.js:
--------------------------------------------------------------------------------
 1 | var simulateScroll = function(distance) {
 2 |   var e = new CustomEvent('scroll')
 3 |   document.body.style.minHeight = '10000px';
 4 |   window.pageYOffset = distance;
 5 |   window.dispatchEvent(e);
 6 | }
 7 | 
 8 | var createAppContainer = function() {
 9 |   // Remove existing app nodes
10 |   var element = document.getElementById('app');
11 |   if (element) {
12 |     element.parentNode.removeChild(element);
13 |   }
14 |   const appContainer = document.createElement('div');
15 |   const innerContainer = document.createElement('div');
16 |   appContainer.id = 'app';
17 |   innerContainer.id = 'appInner';
18 |   appContainer.style.height = '800px';
19 |   appContainer.appendChild(innerContainer);
20 |   document.body.appendChild(appContainer);
21 | }
22 | 
23 | module.exports = {
24 |   'simulateScroll': simulateScroll,
25 |   'createAppContainer': createAppContainer
26 | };
27 | 


--------------------------------------------------------------------------------