@vaadin-component-factory/vcf-anchor-nav - npm Package Compare versions

Comparing version 0.1.8 to 0.1.9

demo/demo.js

 import '@polymer/iron-demo-helpers/demo-pages-shared-styles';
 import '@polymer/iron-demo-helpers/demo-snippet';
+import '@vaadin/vaadin-button';
+import '@vaadin/vaadin-lumo-styles/icons';
+import '@vaadin/vaadin-lumo-styles/typography';
 import '../theme/lumo/vcf-anchor-nav';

package.json

 {
   "name": "@vaadin-component-factory/vcf-anchor-nav",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Component with tabs used as anchor navigation and content sections. Automates the linking of tabs and sections.",
@@ -64,2 +64,3 @@ "main": "theme/lumo/vcf-anchor-nav.js",
     "@rollup/plugin-node-resolve": "^7.1.3",
+    "@vaadin/vaadin-button": "^2.3.0",
     "@webcomponents/webcomponentsjs": "^2.0.0",
@@ -66,0 +67,0 @@ "babel-eslint": "^10.0.2",

src/vcf-anchor-nav.js

@@ -36,3 +36,5 @@ /**
  * ----------------|-------------|-------------
- * `--_anchor-nav-inner-max-width` | Max-width of the inner container | `auto`
+ * `--_anchor-nav-inner-max-width` | `max-width` of inner container (`[part="container"]`) | `auto`
+ * `--_anchor-nav-inner-background` | `background` of inner container (`[part="container"]`) | `var(--lumo-base-color)` (`#ffffff`)
+ * `--_anchor-nav-inner-padding` | `padding` of inner container (`[part="container"]`) | `0 0 20vh 0`
  *
@@ -61,7 +63,9 @@ * The following shadow DOM parts are available for styling:
           --_anchor-nav-inner-max-width: auto;
+          --_anchor-nav-inner-background: var(--lumo-base-color);
+          --_anchor-nav-inner-padding: 0;
         }
 
-        :host([theme~='fullscreen']) {
+        :host([fullscreen]) {
           height: 100vh;
-          position: absolute;
+          position: fixed;
           top: 0;
@@ -71,2 +75,4 @@ bottom: 0;
           left: 0;
+          z-index: 1;
+          transition: all 0.2s;
         }
@@ -78,4 +84,6 @@
           width: 100%;
+          margin: auto;
           max-width: var(--_anchor-nav-inner-max-width);
-          margin: auto;
+          padding: var(--_anchor-nav-inner-padding);
+          background: var(--_anchor-nav-inner-background);
         }
@@ -115,3 +123,3 @@
   static get version() {
-    return '0.1.8';
+    return '0.1.9';
   }
@@ -137,10 +145,9 @@
       /**
-       * Component theme presets.
-       *
-       * - _fullscreen_: Component fills the entire screen.
+       * Component fills the entire screen.
        * @type {String}
        */
-      theme: {
-        type: String,
-        reflectToAttribute: true
+      fullscreen: {
+        type: Boolean,
+        reflectToAttribute: true,
+        observer: '_fullscreenChanged'
       }
@@ -151,3 +158,3 @@ };
   /**
-   * Returns an array of the section elements.
+   * Returns array of the section elements.
    * @returns {Array<VcfAnchorNavSection>}
@@ -159,2 +166,10 @@ */
 
+  /**
+   * Returns the last section.
+   * @returns {VcfAnchorNavSection}
+   */
+  get last() {
+    return this.sections[this.sections.length - 1];
+  }
+
   ready() {
@@ -207,8 +222,8 @@ super.ready();
   _initTabHighlight() {
-    const callback = (entries, _) => {
+    const callback = (entries, observer) => {
       const lastEntry = entries[entries.length - 1];
-      lastEntry.target.isIntersecting = lastEntry.isIntersecting && lastEntry.intersectionRatio >= this._thresholds[lastEntry.target.id];
+      // Threshold comparison required for Firefox
+      lastEntry.target.isIntersecting = lastEntry.isIntersecting && lastEntry.intersectionRatio >= observer.thresholds[0];
       this._updateSelected();
     };
-    this._thresholds = {};
     this.sections.forEach(element => {
@@ -219,4 +234,2 @@ const options = {
       };
-      // Store thresholds for debugging purposes
-      this._thresholds[element.id] = options.threshold;
       const observer = new IntersectionObserver(callback, options);
@@ -289,2 +302,15 @@ observer.observe(element);
 
+  _fullscreenChanged(fullscreen) {
+    const body = document.querySelector('body');
+    if (fullscreen) {
+      const windowHeight = window.innerHeight - this.$.tabs.clientHeight;
+      const paddingBottom = this.last.clientHeight < windowHeight ? windowHeight - this.last.clientHeight : 0;
+      body.style.overflow = 'hidden';
+      this.style.setProperty('--_anchor-nav-inner-padding', `0 0 ${paddingBottom}px 0`);
+    } else {
+      body.style.removeProperty('overflow');
+      this.style.setProperty('--_anchor-nav-inner-padding', '0');
+    }
+  }
+
   /**
@@ -291,0 +317,0 @@ * @protected

No alert changes

Improved metrics

Total package byte prevSize

172092

increased by2.34%

Lines of code

1821

increased by0.55%

Worsened metrics

Dev dependency count

45

increased by2.27%

Number of package files

23

decreased by-4.17%

No dependency changes