From 2fa3e6dc55648af210583281b624137f5bcb3cf7 Mon Sep 17 00:00:00 2001 From: Mark Goodyear Date: Mon, 8 Jun 2015 22:35:39 +0100 Subject: [PATCH] Fixes #23 --- CHANGELOG.md | 27 ++++++++++++++++----------- bower.json | 2 +- dist/headhesive.js | 8 +++++--- dist/headhesive.min.js | 4 ++-- package.json | 2 +- src/headhesive.js | 15 ++++++++++++--- 6 files changed, 37 insertions(+), 21 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5fb7b1c..45044ba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,28 +1,33 @@ # Headhesive changelog +## v1.2.4 +- Fix resize event when using numerical offset +- Fix destroy method for resize event +- Changelog corrections + ## v1.2.3 -- [Fix] Readme correction +- Readme correction ## v1.2.2 -- [Fix] Fix UMD support +- Fix UMD support ## v1.2.1 -- [Fix] Bump version to publish to npm +- Bump version to publish to npm ## v1.2.0 -- [Feature] Add UMD support -- [Feature] Allow to select either the top or bottom of the offset element -- [Feature] Update the offset position on browser resize +- Add UMD support +- Allow to select either the top or bottom of the offset element +- Update the offset position on browser resize - Publish to npm - Add license file -- [Fix] Make the clone version lower z-index than original. Prevents visual overlap of both when scrolling quickly +- Make the clone version lower z-index than original. Prevents visual overlap of both when scrolling quickly ## v1.1.1 -- [Fix] Fix class naming +- Fix class naming ## v1.1.0 -- [Feature] Call the init method interally on instance creation -- [Fix] Destroy method to only destroy it's instance +- Call the init method internally on instance creation +- Destroy method to only destroy it's instance ## v1.0.0 -- Inital +- Initial diff --git a/bower.json b/bower.json index 245277f..28d9986 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "Headhesive.js", - "version": "1.2.3", + "version": "1.2.4", "homepage": "http://markgoodyear.com/labs/headhesive/", "authors": [ "Mark Goodyear (http://markgoodyear.com)" diff --git a/dist/headhesive.js b/dist/headhesive.js index 51aecc6..8e2e016 100644 --- a/dist/headhesive.js +++ b/dist/headhesive.js @@ -1,5 +1,5 @@ /*! - * Headhesive.js v1.2.1 - An on-demand sticky header + * Headhesive.js v1.2.3 - An on-demand sticky header * Author: Copyright (c) Mark Goodyear <@markgdyr> * Url: http://markgoodyear.com/labs/headhesive * License: MIT @@ -112,12 +112,14 @@ this.options.onInit.call(this); }, _setScrollOffset: function() { - this.scrollOffset = _getElemY(document.querySelector(this.options.offset), this.options.offsetSide); + if (typeof this.options.offset === "string") { + this.scrollOffset = _getElemY(document.querySelector(this.options.offset), this.options.offsetSide); + } }, destroy: function() { document.body.removeChild(this.clonedElem); window.removeEventListener("scroll", this._throttleUpdate); - window.removeEventListener("scroll", this._throttleScrollOffset); + window.removeEventListener("resize", this._throttleScrollOffset); this.options.onDestroy.call(this); }, stick: function() { diff --git a/dist/headhesive.min.js b/dist/headhesive.min.js index 4b179aa..65c1f46 100644 --- a/dist/headhesive.min.js +++ b/dist/headhesive.min.js @@ -1,7 +1,7 @@ /*! - * Headhesive.js v1.2.1 - An on-demand sticky header + * Headhesive.js v1.2.3 - An on-demand sticky header * Author: Copyright (c) Mark Goodyear <@markgdyr> * Url: http://markgoodyear.com/labs/headhesive * License: MIT */ -!function(t,e){"function"==typeof define&&define.amd?define([],function(){return e()}):"object"==typeof exports?module.exports=e():t.Headhesive=e()}(this,function(){"use strict";var t=function(e,s){for(var o in s)s.hasOwnProperty(o)&&(e[o]="object"==typeof s[o]?t(e[o],s[o]):s[o]);return e},e=function(t,e){var s,o,i,n=Date.now||function(){return(new Date).getTime()},l=null,c=0,r=function(){c=n(),l=null,i=t.apply(s,o),s=o=null};return function(){var f=n(),h=e-(f-c);return s=this,o=arguments,0>=h?(clearTimeout(l),l=null,c=f,i=t.apply(s,o),s=o=null):l||(l=setTimeout(r,h)),i}},s=function(){return void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop},o=function(t,e){for(var s=0,o=t.offsetHeight;t;)s+=t.offsetTop,t=t.offsetParent;return"bottom"===e&&(s+=o),s},i=function(e,s){"querySelector"in document&&"addEventListener"in window&&(this.visible=!1,this.options={offset:300,offsetSide:"top",classes:{clone:"headhesive",stick:"headhesive--stick",unstick:"headhesive--unstick"},throttle:250,onInit:function(){},onStick:function(){},onUnstick:function(){},onDestroy:function(){}},this.elem="string"==typeof e?document.querySelector(e):e,this.options=t(this.options,s),this.init())};return i.prototype={constructor:i,init:function(){if(this.clonedElem=this.elem.cloneNode(!0),this.clonedElem.className+=" "+this.options.classes.clone,document.body.insertBefore(this.clonedElem,document.body.firstChild),"number"==typeof this.options.offset)this.scrollOffset=this.options.offset;else{if("string"!=typeof this.options.offset)throw new Error("Invalid offset: "+this.options.offset);this._setScrollOffset()}this._throttleUpdate=e(this.update.bind(this),this.options.throttle),this._throttleScrollOffset=e(this._setScrollOffset.bind(this),this.options.throttle),window.addEventListener("scroll",this._throttleUpdate,!1),window.addEventListener("resize",this._throttleScrollOffset,!1),this.options.onInit.call(this)},_setScrollOffset:function(){this.scrollOffset=o(document.querySelector(this.options.offset),this.options.offsetSide)},destroy:function(){document.body.removeChild(this.clonedElem),window.removeEventListener("scroll",this._throttleUpdate),window.removeEventListener("scroll",this._throttleScrollOffset),this.options.onDestroy.call(this)},stick:function(){this.visible||(this.clonedElem.className=this.clonedElem.className.replace(new RegExp("(^|\\s)*"+this.options.classes.unstick+"(\\s|$)*","g"),""),this.clonedElem.className+=" "+this.options.classes.stick,this.visible=!0,this.options.onStick.call(this))},unstick:function(){this.visible&&(this.clonedElem.className=this.clonedElem.className.replace(new RegExp("(^|\\s)*"+this.options.classes.stick+"(\\s|$)*","g"),""),this.clonedElem.className+=" "+this.options.classes.unstick,this.visible=!1,this.options.onUnstick.call(this))},update:function(){s()>this.scrollOffset?this.stick():this.unstick()}},i}); \ No newline at end of file +!function(t,e){"function"==typeof define&&define.amd?define([],function(){return e()}):"object"==typeof exports?module.exports=e():t.Headhesive=e()}(this,function(){"use strict";var t=function(e,s){for(var o in s)s.hasOwnProperty(o)&&(e[o]="object"==typeof s[o]?t(e[o],s[o]):s[o]);return e},e=function(t,e){var s,o,i,n=Date.now||function(){return(new Date).getTime()},l=null,c=0,r=function(){c=n(),l=null,i=t.apply(s,o),s=o=null};return function(){var f=n(),h=e-(f-c);return s=this,o=arguments,0>=h?(clearTimeout(l),l=null,c=f,i=t.apply(s,o),s=o=null):l||(l=setTimeout(r,h)),i}},s=function(){return void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop},o=function(t,e){for(var s=0,o=t.offsetHeight;t;)s+=t.offsetTop,t=t.offsetParent;return"bottom"===e&&(s+=o),s},i=function(e,s){"querySelector"in document&&"addEventListener"in window&&(this.visible=!1,this.options={offset:300,offsetSide:"top",classes:{clone:"headhesive",stick:"headhesive--stick",unstick:"headhesive--unstick"},throttle:250,onInit:function(){},onStick:function(){},onUnstick:function(){},onDestroy:function(){}},this.elem="string"==typeof e?document.querySelector(e):e,this.options=t(this.options,s),this.init())};return i.prototype={constructor:i,init:function(){if(this.clonedElem=this.elem.cloneNode(!0),this.clonedElem.className+=" "+this.options.classes.clone,document.body.insertBefore(this.clonedElem,document.body.firstChild),"number"==typeof this.options.offset)this.scrollOffset=this.options.offset;else{if("string"!=typeof this.options.offset)throw new Error("Invalid offset: "+this.options.offset);this._setScrollOffset()}this._throttleUpdate=e(this.update.bind(this),this.options.throttle),this._throttleScrollOffset=e(this._setScrollOffset.bind(this),this.options.throttle),window.addEventListener("scroll",this._throttleUpdate,!1),window.addEventListener("resize",this._throttleScrollOffset,!1),this.options.onInit.call(this)},_setScrollOffset:function(){"string"==typeof this.options.offset&&(this.scrollOffset=o(document.querySelector(this.options.offset),this.options.offsetSide))},destroy:function(){document.body.removeChild(this.clonedElem),window.removeEventListener("scroll",this._throttleUpdate),window.removeEventListener("resize",this._throttleScrollOffset),this.options.onDestroy.call(this)},stick:function(){this.visible||(this.clonedElem.className=this.clonedElem.className.replace(new RegExp("(^|\\s)*"+this.options.classes.unstick+"(\\s|$)*","g"),""),this.clonedElem.className+=" "+this.options.classes.stick,this.visible=!0,this.options.onStick.call(this))},unstick:function(){this.visible&&(this.clonedElem.className=this.clonedElem.className.replace(new RegExp("(^|\\s)*"+this.options.classes.stick+"(\\s|$)*","g"),""),this.clonedElem.className+=" "+this.options.classes.unstick,this.visible=!1,this.options.onUnstick.call(this))},update:function(){s()>this.scrollOffset?this.stick():this.unstick()}},i}); \ No newline at end of file diff --git a/package.json b/package.json index 999c935..319b793 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "headhesive", "description": "An on-demand sticky header", - "version": "1.2.3", + "version": "1.2.4", "author": { "name": "Mark Goodyear", "url": "http://markgoodyear.com", diff --git a/src/headhesive.js b/src/headhesive.js index 19cb5dc..8c717fc 100644 --- a/src/headhesive.js +++ b/src/headhesive.js @@ -85,10 +85,11 @@ this._throttleUpdate = _throttle(this.update.bind(this), this.options.throttle); this._throttleScrollOffset = _throttle(this._setScrollOffset.bind(this), this.options.throttle); - // Events + // Events. window.addEventListener('scroll', this._throttleUpdate, false); window.addEventListener('resize', this._throttleScrollOffset, false); + // Callback. this.options.onInit.call(this); }, @@ -96,7 +97,9 @@ * Sets the scrollOffset value. */ _setScrollOffset: function () { - this.scrollOffset = _getElemY(document.querySelector(this.options.offset), this.options.offsetSide); + if (typeof this.options.offset === 'string') { + this.scrollOffset = _getElemY(document.querySelector(this.options.offset), this.options.offsetSide); + } }, /** @@ -105,7 +108,9 @@ destroy: function () { document.body.removeChild(this.clonedElem); window.removeEventListener('scroll', this._throttleUpdate); - window.removeEventListener('scroll', this._throttleScrollOffset); + window.removeEventListener('resize', this._throttleScrollOffset); + + // Callback. this.options.onDestroy.call(this); }, @@ -117,6 +122,8 @@ this.clonedElem.className = this.clonedElem.className.replace(new RegExp('(^|\\s)*' + this.options.classes.unstick + '(\\s|$)*', 'g'), ''); this.clonedElem.className += ' ' + this.options.classes.stick; this.visible = true; + + // Callback. this.options.onStick.call(this); } }, @@ -129,6 +136,8 @@ this.clonedElem.className = this.clonedElem.className.replace(new RegExp('(^|\\s)*' + this.options.classes.stick + '(\\s|$)*', 'g'), ''); this.clonedElem.className += ' ' + this.options.classes.unstick; this.visible = false; + + // Callback. this.options.onUnstick.call(this); } },