@vizuaalog/bulmajs - npm Package Compare versions

Comparing version 0.10.1 to 0.10.2

changelog.md

@@ -0,1 +1,4 @@
+# 0.10.2
++ **Bug** [#90](https://github.com/VizuaaLOG/BulmaJS/issues/90) Hiding navbar on scrolls creates empty space, not reappearing as expected [@luksurious](https://github.com/luksurious) [Pull Request](https://github.com/VizuaaLOG/BulmaJS/pull/91).
+
 # 0.10.1
@@ -2,0 +5,0 @@ + **Bug** `Backported from master` [#88](https://github.com/VizuaaLOG/BulmaJS/issues/88) Ensure the keyup event handler is removed then a Modal is destroyed. Thanks to [@luksurious](https://github.com/luksurious) [Pull Request](https://github.com/VizuaaLOG/BulmaJS/pull/89).

package.json

 {
   "name": "@vizuaalog/bulmajs",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "description": "Unofficial javascript extension to the awesome Bulma CSS framework.",
@@ -5,0 +5,0 @@ "main": "src/bulma.js",

src/core.js

@@ -6,3 +6,3 @@ const Bulma = {
      */
-    VERSION: '0.10.1',
+    VERSION: '0.10.2',
 
@@ -9,0 +9,0 @@ /**

src/plugins/navbar.js

@@ -31,2 +31,3 @@ import Bulma from '../core';
             tolerance: element.hasAttribute('data-tolerance') ? element.getAttribute('data-tolerance') : 0,
+            hideOffset: element.hasAttribute('data-hide-offset') ? element.getAttribute('data-hide-offset') : 0,
             shadow: element.hasAttribute('data-sticky-shadow') ? true : false
@@ -46,2 +47,3 @@ });
             tolerance: 0,
+            hideOffset: 0,
             shadow: false
@@ -86,3 +88,3 @@ };
          */
-        this.sticky = this.option('sticky');
+        this.sticky = !!this.option('sticky');
         
@@ -99,3 +101,3 @@ /**
          */
-        this.hideOnScroll = this.option('hideOnScroll');
+        this.hideOnScroll = !!this.option('hideOnScroll');
 
@@ -106,3 +108,3 @@ /**
          */
-        this.tolerance = this.option('tolerance');
+        this.tolerance = parseInt(this.option('tolerance'));
 
@@ -113,5 +115,11 @@ /**
          */
-        this.shadow = this.option('shadow');
+        this.shadow = !!this.option('shadow');
 
         /**
+         * The offset in pixels before the navbar will be hidden, defaults to the height of the navbar
+         * @type {number}
+         */
+        this.hideOffset = parseInt(this.option('hideOffset', Math.max(this.element.scrollHeight, this.stickyOffset)));
+
+        /**
          * The last scroll Y known, this is used to calculate scroll direction
@@ -185,6 +193,12 @@ * @type {number}
 
-            if(triggeredTolerance) {
-                if(scrollDirection === 'down') {
+            if (scrollDirection === 'down') {
+                // only hide the navbar at the top if we reach a certain offset so the hiding is more smooth
+                let isBeyondTopOffset = scrollY > this.hideOffset;
+                if (triggeredTolerance && isBeyondTopOffset) {
                     this.element.classList.add('is-hidden-scroll');
-                } else {
+                }
+            } else {
+                // if scrolling up to the very top where the navbar would be by default always show it
+                let isAtVeryTop = scrollY < this.hideOffset;
+                if (triggeredTolerance || isAtVeryTop) {
                     this.element.classList.remove('is-hidden-scroll');
@@ -191,0 +205,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

837057

increased by0.13%

Lines of code

4496

increased by0.29%

No dependency changes