From fda7fc749093b19baaa8a66729070947864122db Mon Sep 17 00:00:00 2001 From: Vergil Penkov Date: Tue, 15 Mar 2016 19:24:49 +0200 Subject: [PATCH] Fixes https://github.com/VPenkov/okayNav/issues/31 --- app/css/okayNav-base.css | 6 +++--- app/js/jquery.okayNav.js | 7 +++++++ app/less/okayNav-base.less | 9 ++++----- dist/css/okayNav.min.css | 2 +- dist/js/jquery.okayNav-min.js | 2 +- gulpfile.js | 2 +- 6 files changed, 17 insertions(+), 11 deletions(-) diff --git a/app/css/okayNav-base.css b/app/css/okayNav-base.css index cc1f8af..1fe889b 100644 --- a/app/css/okayNav-base.css +++ b/app/css/okayNav-base.css @@ -40,9 +40,6 @@ body.okayNav-loaded { position: relative; z-index: 1; } -.okayNav a:only-of-type { - top: 0; -} .okayNav__nav--visible { overflow: hidden; white-space: nowrap; @@ -56,6 +53,9 @@ body.okayNav-loaded { padding: 15px 15px; transition: color 200ms cubic-bezier(0.55, 0, 0.1, 1); } +.okayNav__nav--visible:empty ~ .okayNav__menu-toggle { + top: 0; +} /* Link styling for the off-screen part of the nav */ .okayNav__nav--invisible { position: fixed; diff --git a/app/js/jquery.okayNav.js b/app/js/jquery.okayNav.js index 66df373..50815d0 100644 --- a/app/js/jquery.okayNav.js +++ b/app/js/jquery.okayNav.js @@ -111,6 +111,12 @@ // Events are up once everything is set self.initEvents(); + + // Trim white spaces between visible nav elements + $nav_visible.contents().filter(function() { + return this.nodeType = Node.TEXT_NODE && /\S/.test(this.nodeValue) === false; + }).remove(); + if (_options.swipe_enabled == true) self.initSwipeEvents(); }, @@ -371,6 +377,7 @@ self._expandNavItem(); } + // Hide the kebab icon if no items are hidden self.getHiddenItemCount() == 0 ? $nav_toggle_icon.addClass('okay-invisible') : diff --git a/app/less/okayNav-base.less b/app/less/okayNav-base.less index 59bbdb2..861ac5a 100644 --- a/app/less/okayNav-base.less +++ b/app/less/okayNav-base.less @@ -45,11 +45,6 @@ body.okayNav-loaded {overflow-x: hidden} a { position: relative; z-index: 1; - - &:only-of-type { - // Bring the kebab icon back to the top if it's alone - top: 0; - } } } @@ -68,6 +63,10 @@ body.okayNav-loaded {overflow-x: hidden} transition: color @oknav-transition-speed @oknav-transition-curve; } + + &:empty { + & ~ .okayNav__menu-toggle {top: 0} + } } /* Link styling for the off-screen part of the nav */ diff --git a/dist/css/okayNav.min.css b/dist/css/okayNav.min.css index 3b3c984..b9460e6 100644 --- a/dist/css/okayNav.min.css +++ b/dist/css/okayNav.min.css @@ -1 +1 @@ -header{-webkit-align-items:center;-ms-flex-align:center;align-items:center;background-color:#fff;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;height:7rem;padding:0 15px;position:fixed;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;top:0;width:100%}.site-logo{transition:color .2s cubic-bezier(.55,0,.1,1);color:#30acff;font-size:3rem}.ok-header__logo:hover{color:#546edb}.okayNav-header{height:7rem;background-color:#fff}.okayNav a{color:#2e2e33;font-size:1.4rem;font-weight:700}.okayNav__nav--visible a:hover,.okayNav a:hover{color:#546edb}.okayNav__nav--invisible{background:#fff}.okayNav__menu-toggle span{background:#2e2e33}.okayNav__menu-toggle.icon--active span{background:#546edb} \ No newline at end of file +header{-webkit-align-items:center;-ms-flex-align:center;align-items:center;background-color:#fff;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;height:7rem;padding:0 15px;position:fixed;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;top:0;width:100%}.site-logo{transition:color .2s cubic-bezier(.55,0,.1,1);color:#30acff;font-size:3rem}.ok-header__logo:hover{color:#546edb}body.okayNav-loaded{overflow-x:hidden}.okayNav-header{position:fixed;top:0;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-direction:row;width:100%;padding:0 15px;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-flex-direction:row;-ms-flex-direction:row;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.okayNav:not(.loaded){visibility:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.okayNav ul{float:left}.okayNav a{position:relative;z-index:1}.okayNav__nav--visible{overflow:hidden;white-space:nowrap}.okayNav__nav--visible li{display:inline-block}.okayNav__nav--visible a{display:block;padding:15px;transition:color .2s cubic-bezier(.55,0,.1,1)}.okayNav__nav--visible:empty~.okayNav__menu-toggle{top:0}.okayNav__nav--invisible{position:fixed;top:7rem;bottom:0;overflow-y:scroll;-webkit-overflow-scrolling:touch}.okayNav__nav--invisible a{display:block;width:240px;padding:15px;background:#fff}.okayNav__nav--invisible.nav-left{left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.okayNav__nav--invisible.nav-right{right:0;-webkit-transform:translateX(100%);transform:translateX(100%)}.okayNav__nav--invisible.transition-enabled{transition:-webkit-transform .4s cubic-bezier(.55,0,.1,1);transition:transform .4s cubic-bezier(.55,0,.1,1);transition:transform .4s cubic-bezier(.55,0,.1,1),-webkit-transform .4s cubic-bezier(.55,0,.1,1)}.okayNav__nav--invisible.nav-open{-webkit-transform:translateX(0);transform:translateX(0)}.okayNav__menu-toggle{position:relative;z-index:1;top:15px;float:left;width:40px;height:20px;cursor:pointer;transition:-webkit-transform .4s cubic-bezier(.55,0,.1,1);transition:transform .4s cubic-bezier(.55,0,.1,1);transition:transform .4s cubic-bezier(.55,0,.1,1),-webkit-transform .4s cubic-bezier(.55,0,.1,1)}.okayNav__menu-toggle.okay-invisible{position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;opacity:0}.okayNav__menu-toggle span{position:absolute;right:0;left:0;display:block;width:4px;height:4px;margin:auto;pointer-events:none;border-radius:50%}.okayNav__menu-toggle span:nth-child(1){top:0}.okayNav__menu-toggle span:nth-child(2){top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.okayNav__menu-toggle span:nth-child(3){bottom:0}.okayNav__menu-toggle.icon--active{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.okayNav-header{height:7rem;background-color:#fff}.okayNav a{color:#2e2e33;font-size:1.4rem;font-weight:700}.okayNav__nav--visible a:hover,.okayNav a:hover{color:#546edb}.okayNav__nav--invisible{background:#fff}.okayNav__menu-toggle span{background:#2e2e33}.okayNav__menu-toggle.icon--active span{background:#546edb} \ No newline at end of file diff --git a/dist/js/jquery.okayNav-min.js b/dist/js/jquery.okayNav-min.js index 88ea8fc..8456cf7 100644 --- a/dist/js/jquery.okayNav-min.js +++ b/dist/js/jquery.okayNav-min.js @@ -3,4 +3,4 @@ * Author: Vergil Penkov (http://vergilpenkov.com/) * MIT license: https://opensource.org/licenses/MIT */ -!function(n){"function"==typeof define&&define.amd?define(["jquery"],n):"object"==typeof module&&module.exports?module.exports=function(i,e){return void 0===e&&(e="undefined"!=typeof window?require("jquery"):require("jquery")(i)),n(e),e}:n(jQuery)}(function(n){function i(i,e){self=this,this.options=n.extend({},t,e),_options=this.options,$navigation=n(i),$document=n(document),$window=n(window),""==this.options.parent?this.options.parent=$navigation.parent():"",_nav_visible=!1,_nav_full_width=0,_parent_full_width=0,radCoef=180/Math.PI,_sTouch={x:0,y:0},_cTouch={x:0,y:0},_sTime=0,_nav_position=0,_percent_open=0,_nav_moving=!1,self.init()}var e="okayNav",t={parent:"",toggle_icon_class:"okayNav__menu-toggle",toggle_icon_content:"",align_right:!0,swipe_enabled:!0,threshold:50,resize_delay:10,beforeOpen:function(){},afterOpen:function(){},beforeClose:function(){},afterClose:function(){},itemHidden:function(){},itemDisplayed:function(){}};i.prototype={init:function(){n("body").addClass("okayNav-loaded"),$navigation.addClass("okayNav loaded").children("ul").addClass("okayNav__nav--visible"),self.options.align_right?$navigation.append('
    ').append(''+_options.toggle_icon_content+""):$navigation.prepend('
      ').prepend(''+_options.toggle_icon_content+""),$nav_visible=$navigation.children(".okayNav__nav--visible"),$nav_invisible=$navigation.children(".okayNav__nav--invisible"),$nav_toggle_icon=$navigation.children("."+_options.toggle_icon_class),_toggle_icon_width=$nav_toggle_icon.outerWidth(!0),_nav_default_width=self.getChildrenWidth($navigation),_parent_full_width=n(_options.parent).outerWidth(!0),_last_visible_child_width=0,self.initEvents(),1==_options.swipe_enabled&&self.initSwipeEvents()},initEvents:function(){$document.on("click.okayNav",function(i){var e=n(i.target);_nav_visible===!0&&0==e.closest(".okayNav").length&&self.closeInvisibleNav(),e.hasClass(_options.toggle_icon_class)&&(i.preventDefault(),self.toggleInvisibleNav())});var i=self._debounce(function(){self.recalcNav()},_options.recalc_delay);$window.on("load.okayNav resize.okayNav",i)},initSwipeEvents:function(){$document.on("touchstart.okayNav",function(i){if($nav_invisible.removeClass("transition-enabled"),1==i.originalEvent.touches.length){var e=i.originalEvent.touches[0];(e.pageX<25&&0==self.options.align_right||e.pageX>n(_options.parent).outerWidth(!0)-25&&1==self.options.align_right||_nav_visible===!0)&&(_sTouch.x=_cTouch.x=e.pageX,_sTouch.y=_cTouch.y=e.pageY,_sTime=Date.now())}}).on("touchmove.okayNav",function(n){var i=n.originalEvent.touches[0];self._triggerMove(i.pageX,i.pageY),_nav_moving=!0}).on("touchend.okayNav",function(n){_sTouch={x:0,y:0},_cTouch={x:0,y:0},_sTime=0,_percent_open>100-self.options.threshold?(_nav_position=0,self.closeInvisibleNav()):1==_nav_moving&&(_nav_position=$nav_invisible.width(),self.openInvisibleNav()),_nav_moving=!1,$nav_invisible.addClass("transition-enabled")})},_getDirection:function(n){return self.options.align_right?n>0?-1:1:0>n?-1:1},_triggerMove:function(n,i){_cTouch.x=n,_cTouch.y=i;var e=Date.now(),t=_cTouch.x-_sTouch.x,o=_cTouch.y-_sTouch.y,a=o*o,s=Math.sqrt(t*t+a),l=Math.sqrt(a),_=Math.asin(Math.sin(l/s))*radCoef;s/(e-_sTime);if(_sTouch.x=n,_sTouch.y=i,20>_){var v=self._getDirection(t),c=_nav_position+v*s,r=$nav_invisible.width(),d=0;0>c?d=-c:c>r&&(d=r-c);var p=r-(_nav_position+v*s+d),u=p/r*100;_nav_position+=v*s+d,_percent_open=u,$nav_invisible.css("transform","translateX("+(self.options.align_right?1:-1)*u+"%)")}},getParent:function(){return _options.parent},getVisibleNav:function(){return $nav_visible},getInvisibleNav:function(){return $nav_invisible},getNavToggleIcon:function(){return $nav_toggle_icon},_debounce:function(n,i,e){var t;return function(){var o=this,a=arguments,s=function(){t=null,e||n.apply(o,a)},l=e&&!t;clearTimeout(t),t=setTimeout(s,i),l&&n.apply(o,a)}},openInvisibleNav:function(){_options.enable_swipe?"":_options.beforeOpen.call(),$nav_toggle_icon.addClass("icon--active"),$nav_invisible.addClass("nav-open"),_nav_visible=!0,$nav_invisible.css({"-webkit-transform":"translateX(0%)",transform:"translateX(0%)"}),_options.afterOpen.call()},closeInvisibleNav:function(){_options.enable_swipe?"":_options.beforeClose.call(),$nav_toggle_icon.removeClass("icon--active"),$nav_invisible.removeClass("nav-open"),self.options.align_right?$nav_invisible.css({"-webkit-transform":"translateX(100%)",transform:"translateX(100%)"}):$nav_invisible.css({"-webkit-transform":"translateX(-100%)",transform:"translateX(-100%)"}),_nav_visible=!1,_options.afterClose.call()},toggleInvisibleNav:function(){_nav_visible?self.closeInvisibleNav():self.openInvisibleNav()},getChildrenWidth:function(i){for(var e=0,t=n(i).children(),o=0;ol?(self._expandAllItems(),void $nav_toggle_icon.addClass("okay-invisible")):(o>0&&a>=t&&s>=i&&self._collapseNavItem(),i>s+_toggle_icon_width+15&&self._expandNavItem(),void(0==self.getHiddenItemCount()?$nav_toggle_icon.addClass("okay-invisible"):$nav_toggle_icon.removeClass("okay-invisible")))},_collapseNavItem:function(){var i=n("li:last-child",$nav_visible);_last_visible_child_width=i.outerWidth(!0),$document.trigger("okayNav:collapseItem",i),i.detach().prependTo($nav_invisible),_options.itemHidden.call(),self.recalcNav()},_expandNavItem:function(){var i=n("li:first-child",$nav_invisible);$document.trigger("okayNav:expandItem",i),i.detach().appendTo($nav_visible),_options.itemDisplayed.call()},_expandAllItems:function(){n("li",$nav_invisible).detach().appendTo($nav_visible),_options.itemDisplayed.call()},_collapseAllItems:function(){n("li",$nav_visible).detach().appendTo($nav_invisible),_options.itemHidden.call()},destroy:function(){n("li",$nav_invisible).appendTo($nav_visible),$nav_invisible.remove(),$nav_visible.removeClass("okayNav__nav--visible"),$nav_toggle_icon.remove(),$document.unbind(".okayNav"),$window.unbind(".okayNav")}},n.fn[e]=function(t){var o=arguments;if(void 0===t||"object"==typeof t)return this.each(function(){n.data(this,"plugin_"+e)||n.data(this,"plugin_"+e,new i(this,t))});if("string"==typeof t&&"_"!==t[0]&&"init"!==t){var a;return this.each(function(){var s=n.data(this,"plugin_"+e);s instanceof i&&"function"==typeof s[t]&&(a=s[t].apply(s,Array.prototype.slice.call(o,1))),"destroy"===t&&n.data(this,"plugin_"+e,null)}),void 0!==a?a:this}}}); \ No newline at end of file +!function(n){"function"==typeof define&&define.amd?define(["jquery"],n):"object"==typeof module&&module.exports?module.exports=function(i,e){return void 0===e&&(e="undefined"!=typeof window?require("jquery"):require("jquery")(i)),n(e),e}:n(jQuery)}(function(n){function i(i,e){self=this,this.options=n.extend({},t,e),_options=this.options,$navigation=n(i),$document=n(document),$window=n(window),""==this.options.parent?this.options.parent=$navigation.parent():"",_nav_visible=!1,_nav_full_width=0,_parent_full_width=0,radCoef=180/Math.PI,_sTouch={x:0,y:0},_cTouch={x:0,y:0},_sTime=0,_nav_position=0,_percent_open=0,_nav_moving=!1,self.init()}var e="okayNav",t={parent:"",toggle_icon_class:"okayNav__menu-toggle",toggle_icon_content:"",align_right:!0,swipe_enabled:!0,threshold:50,resize_delay:10,beforeOpen:function(){},afterOpen:function(){},beforeClose:function(){},afterClose:function(){},itemHidden:function(){},itemDisplayed:function(){}};i.prototype={init:function(){n("body").addClass("okayNav-loaded"),$navigation.addClass("okayNav loaded").children("ul").addClass("okayNav__nav--visible"),self.options.align_right?$navigation.append('
        ').append(''+_options.toggle_icon_content+""):$navigation.prepend('
          ').prepend(''+_options.toggle_icon_content+""),$nav_visible=$navigation.children(".okayNav__nav--visible"),$nav_invisible=$navigation.children(".okayNav__nav--invisible"),$nav_toggle_icon=$navigation.children("."+_options.toggle_icon_class),_toggle_icon_width=$nav_toggle_icon.outerWidth(!0),_nav_default_width=self.getChildrenWidth($navigation),_parent_full_width=n(_options.parent).outerWidth(!0),_last_visible_child_width=0,self.initEvents(),$nav_visible.contents().filter(function(){return this.nodeType=Node.TEXT_NODE&&/\S/.test(this.nodeValue)===!1}).remove(),1==_options.swipe_enabled&&self.initSwipeEvents()},initEvents:function(){$document.on("click.okayNav",function(i){var e=n(i.target);_nav_visible===!0&&0==e.closest(".okayNav").length&&self.closeInvisibleNav(),e.hasClass(_options.toggle_icon_class)&&(i.preventDefault(),self.toggleInvisibleNav())});var i=self._debounce(function(){self.recalcNav()},_options.recalc_delay);$window.on("load.okayNav resize.okayNav",i)},initSwipeEvents:function(){$document.on("touchstart.okayNav",function(i){if($nav_invisible.removeClass("transition-enabled"),1==i.originalEvent.touches.length){var e=i.originalEvent.touches[0];(e.pageX<25&&0==self.options.align_right||e.pageX>n(_options.parent).outerWidth(!0)-25&&1==self.options.align_right||_nav_visible===!0)&&(_sTouch.x=_cTouch.x=e.pageX,_sTouch.y=_cTouch.y=e.pageY,_sTime=Date.now())}}).on("touchmove.okayNav",function(n){var i=n.originalEvent.touches[0];self._triggerMove(i.pageX,i.pageY),_nav_moving=!0}).on("touchend.okayNav",function(n){_sTouch={x:0,y:0},_cTouch={x:0,y:0},_sTime=0,_percent_open>100-self.options.threshold?(_nav_position=0,self.closeInvisibleNav()):1==_nav_moving&&(_nav_position=$nav_invisible.width(),self.openInvisibleNav()),_nav_moving=!1,$nav_invisible.addClass("transition-enabled")})},_getDirection:function(n){return self.options.align_right?n>0?-1:1:0>n?-1:1},_triggerMove:function(n,i){_cTouch.x=n,_cTouch.y=i;var e=Date.now(),t=_cTouch.x-_sTouch.x,o=_cTouch.y-_sTouch.y,a=o*o,s=Math.sqrt(t*t+a),l=Math.sqrt(a),_=Math.asin(Math.sin(l/s))*radCoef;s/(e-_sTime);if(_sTouch.x=n,_sTouch.y=i,20>_){var v=self._getDirection(t),c=_nav_position+v*s,r=$nav_invisible.width(),d=0;0>c?d=-c:c>r&&(d=r-c);var p=r-(_nav_position+v*s+d),u=p/r*100;_nav_position+=v*s+d,_percent_open=u,$nav_invisible.css("transform","translateX("+(self.options.align_right?1:-1)*u+"%)")}},getParent:function(){return _options.parent},getVisibleNav:function(){return $nav_visible},getInvisibleNav:function(){return $nav_invisible},getNavToggleIcon:function(){return $nav_toggle_icon},_debounce:function(n,i,e){var t;return function(){var o=this,a=arguments,s=function(){t=null,e||n.apply(o,a)},l=e&&!t;clearTimeout(t),t=setTimeout(s,i),l&&n.apply(o,a)}},openInvisibleNav:function(){_options.enable_swipe?"":_options.beforeOpen.call(),$nav_toggle_icon.addClass("icon--active"),$nav_invisible.addClass("nav-open"),_nav_visible=!0,$nav_invisible.css({"-webkit-transform":"translateX(0%)",transform:"translateX(0%)"}),_options.afterOpen.call()},closeInvisibleNav:function(){_options.enable_swipe?"":_options.beforeClose.call(),$nav_toggle_icon.removeClass("icon--active"),$nav_invisible.removeClass("nav-open"),self.options.align_right?$nav_invisible.css({"-webkit-transform":"translateX(100%)",transform:"translateX(100%)"}):$nav_invisible.css({"-webkit-transform":"translateX(-100%)",transform:"translateX(-100%)"}),_nav_visible=!1,_options.afterClose.call()},toggleInvisibleNav:function(){_nav_visible?self.closeInvisibleNav():self.openInvisibleNav()},getChildrenWidth:function(i){for(var e=0,t=n(i).children(),o=0;ol?(self._expandAllItems(),void $nav_toggle_icon.addClass("okay-invisible")):(o>0&&a>=t&&s>=i&&self._collapseNavItem(),i>s+_toggle_icon_width+15&&self._expandNavItem(),void(0==self.getHiddenItemCount()?$nav_toggle_icon.addClass("okay-invisible"):$nav_toggle_icon.removeClass("okay-invisible")))},_collapseNavItem:function(){var i=n("li:last-child",$nav_visible);_last_visible_child_width=i.outerWidth(!0),$document.trigger("okayNav:collapseItem",i),i.detach().prependTo($nav_invisible),_options.itemHidden.call(),self.recalcNav()},_expandNavItem:function(){var i=n("li:first-child",$nav_invisible);$document.trigger("okayNav:expandItem",i),i.detach().appendTo($nav_visible),_options.itemDisplayed.call()},_expandAllItems:function(){n("li",$nav_invisible).detach().appendTo($nav_visible),_options.itemDisplayed.call()},_collapseAllItems:function(){n("li",$nav_visible).detach().appendTo($nav_invisible),_options.itemHidden.call()},destroy:function(){n("li",$nav_invisible).appendTo($nav_visible),$nav_invisible.remove(),$nav_visible.removeClass("okayNav__nav--visible"),$nav_toggle_icon.remove(),$document.unbind(".okayNav"),$window.unbind(".okayNav")}},n.fn[e]=function(t){var o=arguments;if(void 0===t||"object"==typeof t)return this.each(function(){n.data(this,"plugin_"+e)||n.data(this,"plugin_"+e,new i(this,t))});if("string"==typeof t&&"_"!==t[0]&&"init"!==t){var a;return this.each(function(){var s=n.data(this,"plugin_"+e);s instanceof i&&"function"==typeof s[t]&&(a=s[t].apply(s,Array.prototype.slice.call(o,1))),"destroy"===t&&n.data(this,"plugin_"+e,null)}),void 0!==a?a:this}}}); \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 2316399..b73b9c0 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -41,7 +41,7 @@ gulp.task('clean:dist', function() { }); gulp.task('watch', ['browserSync', 'less'], function(){ - gulp.watch('app/less/**/*.less', ['less']); + gulp.watch('app/less/**/*.less', ['less', browserSync.reload]); gulp.watch('app/js/**/*.js', browserSync.reload); gulp.watch('app/*.html', browserSync.reload); });