From b95dbbce968d9b617f124f809c8ffb03ebfb1c06 Mon Sep 17 00:00:00 2001 From: Felix Wahner Date: Tue, 11 Dec 2018 10:57:18 +0100 Subject: [PATCH] Bugfix for IE11: empty margin values returned 'auto' and produced NaN-Values --- lib/vue-parallax-js.cjs.js | 2 +- lib/vue-parallax-js.es.js | 2 +- lib/vue-parallax-js.js | 2 +- src/vue-parallax-js.js | 10 ++++++++-- 4 files changed, 11 insertions(+), 5 deletions(-) diff --git a/lib/vue-parallax-js.cjs.js b/lib/vue-parallax-js.cjs.js index 28835cc..e77cdd3 100644 --- a/lib/vue-parallax-js.cjs.js +++ b/lib/vue-parallax-js.cjs.js @@ -1 +1 @@ -"use strict";"undefined"==typeof window&&(global.window=null),"undefined"==typeof document&&(global.document=null);var ParallaxJS=function(t){var e=this;this.os=t,this.container=null,this._bindContainer=function(){e.container=document.querySelector(e.os.container)}};ParallaxJS.prototype={items:[],active:!0,tProp:window&&window.transformProp||function(){var t=document?document.createElement("div"):null;if(t&&null==t.style.transform){var e="Transform",n=!0,i=!1,o=void 0;try{for(var r,a=["Webkit","Moz","ms"][Symbol.iterator]();!(n=(r=a.next()).done);n=!0){var s=r.value;if(void 0!==t.style[s+e])return s+e}}catch(t){i=!0,o=t}finally{try{!n&&a.return&&a.return()}finally{if(i)throw o}}}return"transform"}(),remove:function(t,e){var n=!0,i=!1,o=void 0;try{for(var r,a=this.items[Symbol.iterator]();!(n=(r=a.next()).done);n=!0){r.value.el===t&&this.items.splice(this.items.indexOf(t),1)}}catch(t){i=!0,o=t}finally{try{!n&&a.return&&a.return()}finally{if(i)throw o}}},add:function(t,e){if(window){var n=e.value,i=e.arg,o=t.currentStyle||window.getComputedStyle(t),r=e.modifiers;if("none"!==o.display){var a=r.absY?window.innerHeight:t.clientHeight||t.scrollHeight,s=this.os.className;"string"==typeof s&&(t.className=(t.className+" "+s).trim()),this.items.push({el:t,iOT:t.offsetTop+t.offsetParent.offsetTop-parseInt(o.marginTop),style:o,value:n,arg:i,mod:r,height:a,count:0})}}},update:function(){window&&this.items.forEach(function(t){var e=t.el,n=e.currentStyle||window.getComputedStyle(e);t.height=t.mod.absY?window.innerHeight:e.clientHeight||e.scrollHeight,null!==e.offsetParent&&(t.iOT=e.offsetTop+e.offsetParent.offsetTop-parseInt(n.marginTop))})},move:function(){var t=this;if(window&&this.active)if(window.innerWidth1&&void 0!==arguments[1]?arguments[1]:{};if(window){var n=new ParallaxJS(e);e.container?t.mixin({mounted:function(){this.$parent||(n._bindContainer(),n.container.addEventListener("scroll",function(){n.update(),n.move(n)},{passive:!0}))}}):window.addEventListener("scroll",function(){n.update(),n.move(n)},{passive:!0}),window.addEventListener("resize",function(){n.update(),n.move(n)},{passive:!0}),t.prototype.$parallaxjs=n,window.$parallaxjs=n,t.directive("parallax",{bind:function(t,e){},inserted:function(t,e){n.add(t,e),n.move(n)},unbind:function(t,e){n.remove(t,e)}})}}};module.exports=vueParallaxJs; +"use strict";"undefined"==typeof window&&(global.window=null),"undefined"==typeof document&&(global.document=null);var parseMargin=function(t){return void 0===t.marginTop||"auto"===t.marginTop?0:parseInt(t.marginTop,10)},ParallaxJS=function(t){var e=this;this.os=t,this.container=null,this._bindContainer=function(){e.container=document.querySelector(e.os.container)}};ParallaxJS.prototype={items:[],active:!0,tProp:window&&window.transformProp||function(){var t=document?document.createElement("div"):null;if(t&&null==t.style.transform){var e="Transform",n=!0,i=!1,o=void 0;try{for(var r,a=["Webkit","Moz","ms"][Symbol.iterator]();!(n=(r=a.next()).done);n=!0){var s=r.value;if(void 0!==t.style[s+e])return s+e}}catch(t){i=!0,o=t}finally{try{!n&&a.return&&a.return()}finally{if(i)throw o}}}return"transform"}(),remove:function(t,e){var n=!0,i=!1,o=void 0;try{for(var r,a=this.items[Symbol.iterator]();!(n=(r=a.next()).done);n=!0){r.value.el===t&&this.items.splice(this.items.indexOf(t),1)}}catch(t){i=!0,o=t}finally{try{!n&&a.return&&a.return()}finally{if(i)throw o}}},add:function(t,e){if(window){var n=e.value,i=e.arg,o=t.currentStyle||window.getComputedStyle(t),r=e.modifiers;if("none"!==o.display){var a=r.absY?window.innerHeight:t.clientHeight||t.scrollHeight,s=this.os.className;"string"==typeof s&&(t.className=(t.className+" "+s).trim()),this.items.push({el:t,iOT:t.offsetTop+t.offsetParent.offsetTop-parseMargin(o.marginTop),style:o,value:n,arg:i,mod:r,height:a,count:0})}}},update:function(){window&&this.items.forEach(function(t){var e=t.el,n=e.currentStyle||window.getComputedStyle(e);t.height=t.mod.absY?window.innerHeight:e.clientHeight||e.scrollHeight,null!==e.offsetParent&&(t.iOT=e.offsetTop+e.offsetParent.offsetTop-parseMargin(n.marginTop))})},move:function(){var t=this;if(window&&this.active)if(window.innerWidth1&&void 0!==arguments[1]?arguments[1]:{};if(window){var n=new ParallaxJS(e);e.container?t.mixin({mounted:function(){this.$parent||(n._bindContainer(),n.container.addEventListener("scroll",function(){n.update(),n.move(n)},{passive:!0}))}}):window.addEventListener("scroll",function(){n.update(),n.move(n)},{passive:!0}),window.addEventListener("resize",function(){n.update(),n.move(n)},{passive:!0}),t.prototype.$parallaxjs=n,window.$parallaxjs=n,t.directive("parallax",{bind:function(t,e){},inserted:function(t,e){n.add(t,e),n.move(n)},unbind:function(t,e){n.remove(t,e)}})}}};module.exports=vueParallaxJs; diff --git a/lib/vue-parallax-js.es.js b/lib/vue-parallax-js.es.js index 007858d..f0be35e 100644 --- a/lib/vue-parallax-js.es.js +++ b/lib/vue-parallax-js.es.js @@ -1 +1 @@ -"undefined"==typeof window&&(global.window=null),"undefined"==typeof document&&(global.document=null);var ParallaxJS=function(t){var e=this;this.os=t,this.container=null,this._bindContainer=function(){e.container=document.querySelector(e.os.container)}};ParallaxJS.prototype={items:[],active:!0,tProp:window&&window.transformProp||function(){var t=document?document.createElement("div"):null;if(t&&null==t.style.transform){var e="Transform",n=!0,i=!1,o=void 0;try{for(var r,a=["Webkit","Moz","ms"][Symbol.iterator]();!(n=(r=a.next()).done);n=!0){var l=r.value;if(void 0!==t.style[l+e])return l+e}}catch(t){i=!0,o=t}finally{try{!n&&a.return&&a.return()}finally{if(i)throw o}}}return"transform"}(),remove:function(t,e){var n=!0,i=!1,o=void 0;try{for(var r,a=this.items[Symbol.iterator]();!(n=(r=a.next()).done);n=!0){r.value.el===t&&this.items.splice(this.items.indexOf(t),1)}}catch(t){i=!0,o=t}finally{try{!n&&a.return&&a.return()}finally{if(i)throw o}}},add:function(t,e){if(window){var n=e.value,i=e.arg,o=t.currentStyle||window.getComputedStyle(t),r=e.modifiers;if("none"!==o.display){var a=r.absY?window.innerHeight:t.clientHeight||t.scrollHeight,l=this.os.className;"string"==typeof l&&(t.className=(t.className+" "+l).trim()),this.items.push({el:t,iOT:t.offsetTop+t.offsetParent.offsetTop-parseInt(o.marginTop),style:o,value:n,arg:i,mod:r,height:a,count:0})}}},update:function(){window&&this.items.forEach(function(t){var e=t.el,n=e.currentStyle||window.getComputedStyle(e);t.height=t.mod.absY?window.innerHeight:e.clientHeight||e.scrollHeight,null!==e.offsetParent&&(t.iOT=e.offsetTop+e.offsetParent.offsetTop-parseInt(n.marginTop))})},move:function(){var t=this;if(window&&this.active)if(window.innerWidth1&&void 0!==arguments[1]?arguments[1]:{};if(window){var n=new ParallaxJS(e);e.container?t.mixin({mounted:function(){this.$parent||(n._bindContainer(),n.container.addEventListener("scroll",function(){n.update(),n.move(n)},{passive:!0}))}}):window.addEventListener("scroll",function(){n.update(),n.move(n)},{passive:!0}),window.addEventListener("resize",function(){n.update(),n.move(n)},{passive:!0}),t.prototype.$parallaxjs=n,window.$parallaxjs=n,t.directive("parallax",{bind:function(t,e){},inserted:function(t,e){n.add(t,e),n.move(n)},unbind:function(t,e){n.remove(t,e)}})}}};export default vueParallaxJs; +"undefined"==typeof window&&(global.window=null),"undefined"==typeof document&&(global.document=null);var parseMargin=function(t){return void 0===t.marginTop||"auto"===t.marginTop?0:parseInt(t.marginTop,10)},ParallaxJS=function(t){var e=this;this.os=t,this.container=null,this._bindContainer=function(){e.container=document.querySelector(e.os.container)}};ParallaxJS.prototype={items:[],active:!0,tProp:window&&window.transformProp||function(){var t=document?document.createElement("div"):null;if(t&&null==t.style.transform){var e="Transform",n=!0,i=!1,o=void 0;try{for(var r,a=["Webkit","Moz","ms"][Symbol.iterator]();!(n=(r=a.next()).done);n=!0){var s=r.value;if(void 0!==t.style[s+e])return s+e}}catch(t){i=!0,o=t}finally{try{!n&&a.return&&a.return()}finally{if(i)throw o}}}return"transform"}(),remove:function(t,e){var n=!0,i=!1,o=void 0;try{for(var r,a=this.items[Symbol.iterator]();!(n=(r=a.next()).done);n=!0){r.value.el===t&&this.items.splice(this.items.indexOf(t),1)}}catch(t){i=!0,o=t}finally{try{!n&&a.return&&a.return()}finally{if(i)throw o}}},add:function(t,e){if(window){var n=e.value,i=e.arg,o=t.currentStyle||window.getComputedStyle(t),r=e.modifiers;if("none"!==o.display){var a=r.absY?window.innerHeight:t.clientHeight||t.scrollHeight,s=this.os.className;"string"==typeof s&&(t.className=(t.className+" "+s).trim()),this.items.push({el:t,iOT:t.offsetTop+t.offsetParent.offsetTop-parseMargin(o.marginTop),style:o,value:n,arg:i,mod:r,height:a,count:0})}}},update:function(){window&&this.items.forEach(function(t){var e=t.el,n=e.currentStyle||window.getComputedStyle(e);t.height=t.mod.absY?window.innerHeight:e.clientHeight||e.scrollHeight,null!==e.offsetParent&&(t.iOT=e.offsetTop+e.offsetParent.offsetTop-parseMargin(n.marginTop))})},move:function(){var t=this;if(window&&this.active)if(window.innerWidth1&&void 0!==arguments[1]?arguments[1]:{};if(window){var n=new ParallaxJS(e);e.container?t.mixin({mounted:function(){this.$parent||(n._bindContainer(),n.container.addEventListener("scroll",function(){n.update(),n.move(n)},{passive:!0}))}}):window.addEventListener("scroll",function(){n.update(),n.move(n)},{passive:!0}),window.addEventListener("resize",function(){n.update(),n.move(n)},{passive:!0}),t.prototype.$parallaxjs=n,window.$parallaxjs=n,t.directive("parallax",{bind:function(t,e){},inserted:function(t,e){n.add(t,e),n.move(n)},unbind:function(t,e){n.remove(t,e)}})}}};export default vueParallaxJs; diff --git a/lib/vue-parallax-js.js b/lib/vue-parallax-js.js index e034d7d..bca9e20 100644 --- a/lib/vue-parallax-js.js +++ b/lib/vue-parallax-js.js @@ -1 +1 @@ -var ParallaxJS=function(){"use strict";"undefined"==typeof window&&(global.window=null),"undefined"==typeof document&&(global.document=null);var t=function(t){var e=this;this.os=t,this.container=null,this._bindContainer=function(){e.container=document.querySelector(e.os.container)}};return t.prototype={items:[],active:!0,tProp:window&&window.transformProp||function(){var t=document?document.createElement("div"):null;if(t&&null==t.style.transform){var e="Transform",n=!0,i=!1,o=void 0;try{for(var r,a=["Webkit","Moz","ms"][Symbol.iterator]();!(n=(r=a.next()).done);n=!0){var s=r.value;if(void 0!==t.style[s+e])return s+e}}catch(t){i=!0,o=t}finally{try{!n&&a.return&&a.return()}finally{if(i)throw o}}}return"transform"}(),remove:function(t,e){var n=!0,i=!1,o=void 0;try{for(var r,a=this.items[Symbol.iterator]();!(n=(r=a.next()).done);n=!0){r.value.el===t&&this.items.splice(this.items.indexOf(t),1)}}catch(t){i=!0,o=t}finally{try{!n&&a.return&&a.return()}finally{if(i)throw o}}},add:function(t,e){if(window){var n=e.value,i=e.arg,o=t.currentStyle||window.getComputedStyle(t),r=e.modifiers;if("none"!==o.display){var a=r.absY?window.innerHeight:t.clientHeight||t.scrollHeight,s=this.os.className;"string"==typeof s&&(t.className=(t.className+" "+s).trim()),this.items.push({el:t,iOT:t.offsetTop+t.offsetParent.offsetTop-parseInt(o.marginTop),style:o,value:n,arg:i,mod:r,height:a,count:0})}}},update:function(){window&&this.items.forEach(function(t){var e=t.el,n=e.currentStyle||window.getComputedStyle(e);t.height=t.mod.absY?window.innerHeight:e.clientHeight||e.scrollHeight,null!==e.offsetParent&&(t.iOT=e.offsetTop+e.offsetParent.offsetTop-parseInt(n.marginTop))})},move:function(){var t=this;if(window&&this.active)if(window.innerWidth1&&void 0!==arguments[1]?arguments[1]:{};if(window){var i=new t(n);n.container?e.mixin({mounted:function(){this.$parent||(i._bindContainer(),i.container.addEventListener("scroll",function(){i.update(),i.move(i)},{passive:!0}))}}):window.addEventListener("scroll",function(){i.update(),i.move(i)},{passive:!0}),window.addEventListener("resize",function(){i.update(),i.move(i)},{passive:!0}),e.prototype.$parallaxjs=i,window.$parallaxjs=i,e.directive("parallax",{bind:function(t,e){},inserted:function(t,e){i.add(t,e),i.move(i)},unbind:function(t,e){i.remove(t,e)}})}}}}(); +var ParallaxJS=function(){"use strict";"undefined"==typeof window&&(global.window=null),"undefined"==typeof document&&(global.document=null);var t=function(t){return void 0===t.marginTop||"auto"===t.marginTop?0:parseInt(t.marginTop,10)},n=function(t){var n=this;this.os=t,this.container=null,this._bindContainer=function(){n.container=document.querySelector(n.os.container)}};return n.prototype={items:[],active:!0,tProp:window&&window.transformProp||function(){var t=document?document.createElement("div"):null;if(t&&null==t.style.transform){var n="Transform",e=!0,i=!1,o=void 0;try{for(var r,a=["Webkit","Moz","ms"][Symbol.iterator]();!(e=(r=a.next()).done);e=!0){var s=r.value;if(void 0!==t.style[s+n])return s+n}}catch(t){i=!0,o=t}finally{try{!e&&a.return&&a.return()}finally{if(i)throw o}}}return"transform"}(),remove:function(t,n){var e=!0,i=!1,o=void 0;try{for(var r,a=this.items[Symbol.iterator]();!(e=(r=a.next()).done);e=!0){r.value.el===t&&this.items.splice(this.items.indexOf(t),1)}}catch(t){i=!0,o=t}finally{try{!e&&a.return&&a.return()}finally{if(i)throw o}}},add:function(n,e){if(window){var i=e.value,o=e.arg,r=n.currentStyle||window.getComputedStyle(n),a=e.modifiers;if("none"!==r.display){var s=a.absY?window.innerHeight:n.clientHeight||n.scrollHeight,l=this.os.className;"string"==typeof l&&(n.className=(n.className+" "+l).trim()),this.items.push({el:n,iOT:n.offsetTop+n.offsetParent.offsetTop-t(r.marginTop),style:r,value:i,arg:o,mod:a,height:s,count:0})}}},update:function(){window&&this.items.forEach(function(n){var e=n.el,i=e.currentStyle||window.getComputedStyle(e);n.height=n.mod.absY?window.innerHeight:e.clientHeight||e.scrollHeight,null!==e.offsetParent&&(n.iOT=e.offsetTop+e.offsetParent.offsetTop-t(i.marginTop))})},move:function(){var t=this;if(window&&this.active)if(window.innerWidth1&&void 0!==arguments[1]?arguments[1]:{};if(window){var i=new n(e);e.container?t.mixin({mounted:function(){this.$parent||(i._bindContainer(),i.container.addEventListener("scroll",function(){i.update(),i.move(i)},{passive:!0}))}}):window.addEventListener("scroll",function(){i.update(),i.move(i)},{passive:!0}),window.addEventListener("resize",function(){i.update(),i.move(i)},{passive:!0}),t.prototype.$parallaxjs=i,window.$parallaxjs=i,t.directive("parallax",{bind:function(t,n){},inserted:function(t,n){i.add(t,n),i.move(i)},unbind:function(t,n){i.remove(t,n)}})}}}}(); diff --git a/src/vue-parallax-js.js b/src/vue-parallax-js.js index 4f38a9f..a37da4b 100644 --- a/src/vue-parallax-js.js +++ b/src/vue-parallax-js.js @@ -7,6 +7,12 @@ if (typeof document === 'undefined') { global.document = null } +const parseMargin = (style) => { + return typeof style.marginTop === 'undefined' || style.marginTop === 'auto' + ? 0 + : parseInt(style.marginTop, 10) +} + const ParallaxJS = function (os) { this.os = os @@ -61,7 +67,7 @@ ParallaxJS.prototype = { this.items.push({ el: el, - iOT: el.offsetTop + el.offsetParent.offsetTop - parseInt(style.marginTop), + iOT: el.offsetTop + el.offsetParent.offsetTop - parseMargin(style.marginTop), style, value, arg, @@ -78,7 +84,7 @@ ParallaxJS.prototype = { item.height = item.mod.absY ? window.innerHeight : t.clientHeight || t.scrollHeight if(t.offsetParent !== null) - item.iOT = t.offsetTop + t.offsetParent.offsetTop - parseInt(n.marginTop) + item.iOT = t.offsetTop + t.offsetParent.offsetTop - parseMargin(n.marginTop) })