@kddy/vue-scrollactive
Version:
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.
1 lines • 16.9 kB
JavaScript
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["vue-scrollactive"]=e():t.vueScrollactive=e()}("undefined"!=typeof self?self:this,(function(){return function(t){var e={};function r(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=t,r.c=e,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)r.d(n,o,function(e){return t[e]}.bind(null,o));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="/dist/",r(r.s=12)}([function(t,e,r){t.exports=r(11)},function(t,e){t.exports=function(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}},function(t,e,r){var n=r(7),o=r(8),i=r(9),a=r(10);t.exports=function(t){return n(t)||o(t)||i(t)||a()}},function(t,e){function r(t,e,r,n,o,i,a){try{var c=t[i](a),s=c.value}catch(t){return void r(t)}c.done?e(s):Promise.resolve(s).then(n,o)}t.exports=function(t){return function(){var e=this,n=arguments;return new Promise((function(o,i){var a=t.apply(e,n);function c(t){r(a,o,i,c,s,"next",t)}function s(t){r(a,o,i,c,s,"throw",t)}c(void 0)}))}}},function(t,e){var r="function"==typeof Float32Array;function n(t,e){return 1-3*e+3*t}function o(t,e){return 3*e-6*t}function i(t){return 3*t}function a(t,e,r){return((n(e,r)*t+o(e,r))*t+i(e))*t}function c(t,e,r){return 3*n(e,r)*t*t+2*o(e,r)*t+i(e)}function s(t){return t}t.exports=function(t,e,n,o){if(!(0<=t&&t<=1&&0<=n&&n<=1))throw new Error("bezier x values must be in [0, 1] range");if(t===e&&n===o)return s;for(var i=r?new Float32Array(11):new Array(11),u=0;u<11;++u)i[u]=a(.1*u,t,n);function l(e){for(var r=0,o=1;10!==o&&i[o]<=e;++o)r+=.1;--o;var s=r+.1*((e-i[o])/(i[o+1]-i[o])),u=c(s,t,n);return u>=.001?function(t,e,r,n){for(var o=0;o<4;++o){var i=c(e,r,n);if(0===i)return e;e-=(a(e,r,n)-t)/i}return e}(e,s,t,n):0===u?s:function(t,e,r,n,o){var i,c,s=0;do{(i=a(c=e+(r-e)/2,n,o)-t)>0?r=c:e=c}while(Math.abs(i)>1e-7&&++s<10);return c}(e,r,r+.1,t,n)}return function(t){return 0===t?0:1===t?1:a(l(t),e,o)}}},function(t,e){t.exports=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}},function(t,e){function r(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}t.exports=function(t,e,n){return e&&r(t.prototype,e),n&&r(t,n),t}},function(t,e,r){var n=r(1);t.exports=function(t){if(Array.isArray(t))return n(t)}},function(t,e){t.exports=function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}},function(t,e,r){var n=r(1);t.exports=function(t,e){if(t){if("string"==typeof t)return n(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?n(t,e):void 0}}},function(t,e){t.exports=function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}},function(t,e,r){var n=function(t){"use strict";var e=Object.prototype,r=e.hasOwnProperty,n="function"==typeof Symbol?Symbol:{},o=n.iterator||"@@iterator",i=n.asyncIterator||"@@asyncIterator",a=n.toStringTag||"@@toStringTag";function c(t,e,r,n){var o=e&&e.prototype instanceof l?e:l,i=Object.create(o.prototype),a=new S(n||[]);return i._invoke=function(t,e,r){var n="suspendedStart";return function(o,i){if("executing"===n)throw new Error("Generator is already running");if("completed"===n){if("throw"===o)throw i;return I()}for(r.method=o,r.arg=i;;){var a=r.delegate;if(a){var c=w(a,r);if(c){if(c===u)continue;return c}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if("suspendedStart"===n)throw n="completed",r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);n="executing";var l=s(t,e,r);if("normal"===l.type){if(n=r.done?"completed":"suspendedYield",l.arg===u)continue;return{value:l.arg,done:r.done}}"throw"===l.type&&(n="completed",r.method="throw",r.arg=l.arg)}}}(t,r,a),i}function s(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}t.wrap=c;var u={};function l(){}function f(){}function h(){}var d={};d[o]=function(){return this};var v=Object.getPrototypeOf,p=v&&v(v(E([])));p&&p!==e&&r.call(p,o)&&(d=p);var m=h.prototype=l.prototype=Object.create(d);function y(t){["next","throw","return"].forEach((function(e){t[e]=function(t){return this._invoke(e,t)}}))}function g(t,e){var n;this._invoke=function(o,i){function a(){return new e((function(n,a){!function n(o,i,a,c){var u=s(t[o],t,i);if("throw"!==u.type){var l=u.arg,f=l.value;return f&&"object"==typeof f&&r.call(f,"__await")?e.resolve(f.__await).then((function(t){n("next",t,a,c)}),(function(t){n("throw",t,a,c)})):e.resolve(f).then((function(t){l.value=t,a(l)}),(function(t){return n("throw",t,a,c)}))}c(u.arg)}(o,i,n,a)}))}return n=n?n.then(a,a):a()}}function w(t,e){var r=t.iterator[e.method];if(void 0===r){if(e.delegate=null,"throw"===e.method){if(t.iterator.return&&(e.method="return",e.arg=void 0,w(t,e),"throw"===e.method))return u;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return u}var n=s(r,t.iterator,e.arg);if("throw"===n.type)return e.method="throw",e.arg=n.arg,e.delegate=null,u;var o=n.arg;return o?o.done?(e[t.resultName]=o.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,u):o:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,u)}function b(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function x(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function S(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(b,this),this.reset(!0)}function E(t){if(t){var e=t[o];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var n=-1,i=function e(){for(;++n<t.length;)if(r.call(t,n))return e.value=t[n],e.done=!1,e;return e.value=void 0,e.done=!0,e};return i.next=i}}return{next:I}}function I(){return{value:void 0,done:!0}}return f.prototype=m.constructor=h,h.constructor=f,h[a]=f.displayName="GeneratorFunction",t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===f||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,h):(t.__proto__=h,a in t||(t[a]="GeneratorFunction")),t.prototype=Object.create(m),t},t.awrap=function(t){return{__await:t}},y(g.prototype),g.prototype[i]=function(){return this},t.AsyncIterator=g,t.async=function(e,r,n,o,i){void 0===i&&(i=Promise);var a=new g(c(e,r,n,o),i);return t.isGeneratorFunction(r)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},y(m),m[a]="Generator",m[o]=function(){return this},m.toString=function(){return"[object Generator]"},t.keys=function(t){var e=[];for(var r in t)e.push(r);return e.reverse(),function r(){for(;e.length;){var n=e.pop();if(n in t)return r.value=n,r.done=!1,r}return r.done=!0,r}},t.values=E,S.prototype={constructor:S,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(x),!t)for(var e in this)"t"===e.charAt(0)&&r.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var e=this;function n(r,n){return a.type="throw",a.arg=t,e.next=r,n&&(e.method="next",e.arg=void 0),!!n}for(var o=this.tryEntries.length-1;o>=0;--o){var i=this.tryEntries[o],a=i.completion;if("root"===i.tryLoc)return n("end");if(i.tryLoc<=this.prev){var c=r.call(i,"catchLoc"),s=r.call(i,"finallyLoc");if(c&&s){if(this.prev<i.catchLoc)return n(i.catchLoc,!0);if(this.prev<i.finallyLoc)return n(i.finallyLoc)}else if(c){if(this.prev<i.catchLoc)return n(i.catchLoc,!0)}else{if(!s)throw new Error("try statement without catch or finally");if(this.prev<i.finallyLoc)return n(i.finallyLoc)}}}},abrupt:function(t,e){for(var n=this.tryEntries.length-1;n>=0;--n){var o=this.tryEntries[n];if(o.tryLoc<=this.prev&&r.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,u):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),u},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),x(r),u}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;x(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,r){return this.delegate={iterator:E(t),resultName:e,nextLoc:r},"next"===this.method&&(this.arg=void 0),u}},t}(t.exports);try{regeneratorRuntime=n}catch(t){Function("r","regeneratorRuntime = r")(n)}},function(t,e,r){"use strict";r.r(e),r.d(e,"Scrollactive",(function(){return S}));var n=function(){var t=this.$createElement;return(this._self._c||t)(this.tag,{ref:"scrollactive-nav-wrapper",tag:"component",staticClass:"scrollactive-nav"},[this._t("default")],2)};n._withStripped=!0;var o=r(2),i=r.n(o),a=r(0),c=r.n(a),s=r(3),u=r.n(s),l=r(4),f=r.n(l),h=r(5),d=r.n(h),v=r(6),p=r.n(v),m=function(){function t(e){d()(this,t);var r=window;e&&(r=document.querySelector(e)||window),this.container=r}return p()(t,[{key:"addScrollListener",value:function(t){this.scrollListenerCallback=t,this.container.addEventListener("scroll",t)}},{key:"removeScrollListener",value:function(){this.container.removeEventListener("scroll",this.scrollListenerCallback)}},{key:"getDistanceFromTop",value:function(){return this.container.scrollTop||this.container.pageYOffset}},{key:"scrollTo",value:function(t,e){return this.container.scrollTo(t,e)}},{key:"getOffsetTop",value:function(){return this.container.offsetTop}}]),t}(),y=function(t,e){return[].forEach.call(t,e)},g=function(t){return decodeURI(t.substr(1))},w=function(t){window.history.pushState?window.history.pushState(null,null,t):window.location.hash=t},b=function(t){return t.dataset.sectionSelector?t.dataset.sectionSelector:t.hash?"#".concat(g(t.hash)):""};var x=function(t,e,r,n,o,i,a,c){var s,u="function"==typeof t?t.options:t;if(e&&(u.render=e,u.staticRenderFns=r,u._compiled=!0),n&&(u.functional=!0),i&&(u._scopeId="data-v-"+i),a?(s=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},u._ssrRegister=s):o&&(s=c?function(){o.call(this,(u.functional?this.parent:this).$root.$options.shadowRoot)}:o),s)if(u.functional){u._injectStyles=s;var l=u.render;u.render=function(t,e){return s.call(e),l(t,e)}}else{var f=u.beforeCreate;u.beforeCreate=f?[].concat(f,s):[s]}return{exports:t,options:u}}({props:{activeClass:{type:String,default:"is-active"},offset:{type:Number,default:20},scrollOffset:{type:Number,default:null},scrollContainerSelector:{type:String,default:""},clickToScroll:{type:Boolean,default:!0},duration:{type:Number,default:600},alwaysTrack:{type:Boolean,default:!1},bezierEasingValue:{type:String,default:".5,0,.35,1"},modifyUrl:{type:Boolean,default:!0},exact:{type:Boolean,default:!1},highlightFirstItem:{type:Boolean,default:!1},tag:{type:String,default:"nav"},scrollOnStart:{type:Boolean,default:!0}},data:function(){return{observer:null,items:[],currentItem:null,lastActiveItem:null,scrollAnimationFrame:null,bezierEasing:f.a}},computed:{cubicBezierArray:function(){return this.bezierEasingValue.split(",")},scrollContainer:function(){return new m(this.scrollContainerSelector)}},mounted:function(){this.resetOnDOMChange(),this.initScrollactiveItems(),this.removeActiveClass(),this.currentItem=this.getItemInsideWindow(),this.currentItem&&this.currentItem.classList.add(this.activeClass),this.scrollOnStart&&this.scrollToHashElement(),this.scrollContainer.addScrollListener(this.onScroll)},updated:function(){this.initScrollactiveItems()},beforeDestroy:function(){this.scrollContainer.removeScrollListener(),window.cancelAnimationFrame(this.scrollAnimationFrame)},methods:{resetOnDOMChange:function(){var t=window.MutationObserver||window.WebKitMutationObserver;this.observer||(this.observer=new t(this.initScrollactiveItems),this.observer.observe(this.$refs["scrollactive-nav-wrapper"],{childList:!0,subtree:!0}))},initScrollactiveItems:function(){var t=this,e=this.$el.querySelectorAll(".scrollactive-item"),r=[];y(e,(function(t){var e=document.querySelector(b(t));e&&r.push({section:e,menuElement:t})})),this.items=r,this.clickToScroll?y(e,(function(e){return e.addEventListener("click",t.onMenuItemClick)})):y(e,(function(e){return e.removeEventListener("click",t.onMenuItemClick)}))},onScroll:function(t){this.currentItem=this.getItemInsideWindow(),this.currentItem!==this.lastActiveItem&&(this.removeActiveClass(),this.$emit("itemchanged",t,this.currentItem,this.lastActiveItem),this.lastActiveItem=this.currentItem),this.currentItem&&this.currentItem.classList.add(this.activeClass)},getItemInsideWindow:function(){var t,e=this;return y(this.items,(function(r,n){var o=r.menuElement,i=r.section,a=0===n,c=e.scrollContainer.getDistanceFromTop(),s=e.getOffsetTop(i)-e.offset,u=c>=s,l=c<s+i.offsetHeight,f=u&&l;a&&e.highlightFirstItem&&l&&(t=o),e.exact&&f&&(t=o),!e.exact&&u&&(t=o)})),t},onMenuItemClick:function(t){var e=this;return u()(c.a.mark((function r(){var n,o,i;return c.a.wrap((function(r){for(;;)switch(r.prev=r.next){case 0:if(t.preventDefault(),n=t.target,o=b(n),i=document.querySelector(o)){r.next=7;break}return console.warn("[vue-scrollactive] Element '".concat(o,"' was not found. Make sure it is set in the DOM.")),r.abrupt("return");case 7:return e.alwaysTrack||(e.scrollContainer.removeScrollListener(),window.cancelAnimationFrame(e.scrollAnimationFrame),e.removeActiveClass(),n.classList.add(e.activeClass)),r.next=10,e.scrollTo(i);case 10:e.alwaysTrack||(e.scrollContainer.addScrollListener(e.onScroll),e.currentItem=n,e.currentItem!==e.lastActiveItem&&(e.$emit("itemchanged",t,e.currentItem,e.lastActiveItem),e.lastActiveItem=e.currentItem)),e.modifyUrl&&w((a=n).dataset.sectionSelector&&"#"===a.dataset.sectionSelector.substr(0,1)?a.dataset.sectionSelector:a.hash);case 12:case"end":return r.stop()}var a}),r)})))()},scrollTo:function(t){var e=this;return new Promise((function(r){var n=e.getOffsetTop(t),o=e.scrollContainer.getDistanceFromTop(),a=n-o,c=e.bezierEasing.apply(e,i()(e.cubicBezierArray)),s=null;window.requestAnimationFrame((function t(n){s||(s=n);var i=n-s,u=i/e.duration;i>=e.duration&&(i=e.duration),u>=1&&(u=1);var l=e.scrollOffset||e.offset,f=o+c(u)*(a-l);e.scrollContainer.scrollTo(0,f),i<e.duration?e.scrollAnimationFrame=window.requestAnimationFrame(t):r()}))}))},getOffsetTop:function(t){for(var e=0,r=t;r;)e+=r.offsetTop,r=r.offsetParent;return this.scrollContainer.getOffsetTop()&&(e-=this.scrollContainer.getOffsetTop()),e},removeActiveClass:function(){var t=this;y(this.items,(function(e){e.menuElement.classList.remove(t.activeClass)}))},scrollToHashElement:function(){var t=this,e=window.location.hash;if(e){var r=document.getElementById(g(e));r&&(window.location.hash="",setTimeout((function(){var n=r.offsetTop-t.offset;t.scrollContainer.scrollTo(0,n),w(e)}),0))}}}},n,[],!1,null,null,null);x.options.__file="src/scrollactive.vue";var S=x.exports,E={install:function(t){E.install.installed||t.component("scrollactive",S)}};"undefined"!=typeof window&&window.Vue&&E.install(window.Vue);e.default=E}])}));