@vaadin/vaadin-context-menu - npm Package Compare versions

Comparing version 4.3.5 to 4.3.6

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-context-menu",
-  "version": "4.3.5",
+  "version": "4.3.6",
   "main": "vaadin-context-menu.js",
@@ -16,0 +16,0 @@ "author": "Vaadin Ltd",

README.md

@@ -39,17 +39,24 @@ [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-context-menu)](https://www.npmjs.com/package/@vaadin/vaadin-context-menu)
 <vaadin-context-menu>
-  <template>
-    <vaadin-list-box>
-      <vaadin-item>First menu item</vaadin-item>
-      <vaadin-item>Second menu item</vaadin-item>
-      <vaadin-item>Third menu item</vaadin-item>
-      <hr>
-      <vaadin-item disabled>Fourth menu item</vaadin-item>
-      <vaadin-item disabled>Fifth menu item</vaadin-item>
-      <hr>
-      <vaadin-item>Sixth menu item</vaadin-item>
-    </vaadin-list-box>
-  </template>
-
   Open a context menu with <b>right click</b> or with <b>long touch.</b>
 </vaadin-context-menu>
+
+<script>
+  const contextMenu = document.querySelector('vaadin-context-menu');
+  contextMenu.renderer = function(root) {
+    let listBox = root.firstElementChild;
+    // Check if there is a list-box generated with the previous renderer call to update its content instead of recreation
+    if (listBox) {
+      listBox.innerHTML = '';
+    } else {
+      listBox = document.createElement('vaadin-list-box');
+      root.appendChild(listBox);
+    }
+
+    ['First', 'Second', 'Third'].forEach(function(name) {
+      const item = document.createElement('vaadin-item');
+      item.textContent = name + ' menu item';
+      listBox.appendChild(item);
+    });
+  };
+</script>
 ```
@@ -56,0 +63,0 @@

src/vaadin-context-menu.js

@@ -264,3 +264,3 @@ /**
   static get version() {
-    return '4.3.5';
+    return '4.3.6';
   }
@@ -366,2 +366,15 @@
 
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.__boundOnScroll = this.__onScroll.bind(this);
+    window.addEventListener('scroll', this.__boundOnScroll, true);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    window.removeEventListener('scroll', this.__boundOnScroll, true);
+  }
+
   ready() {
@@ -535,3 +548,7 @@ super.ready();
         this.__x = this._getEventCoordinate(e, 'x');
+        this.__pageXOffset = window.pageXOffset;
+
         this.__y = this._getEventCoordinate(e, 'y');
+        this.__pageYOffset = window.pageYOffset;
+
         this.$.overlay.style.opacity = '0';
@@ -543,2 +560,27 @@ this._setOpened(true);
 
+  __onScroll() {
+    if (!this.opened) {
+      return;
+    }
+
+    const yDiff = window.pageYOffset - this.__pageYOffset;
+    const xDiff = window.pageXOffset - this.__pageXOffset;
+
+    this.__adjustPosition('left', -xDiff);
+    this.__adjustPosition('right', xDiff);
+
+    this.__adjustPosition('top', -yDiff);
+    this.__adjustPosition('bottom', yDiff);
+
+    this.__pageYOffset += yDiff;
+    this.__pageXOffset += xDiff;
+  }
+
+  __adjustPosition(coord, diff) {
+    const overlay = this.$.overlay;
+    const style = overlay.style;
+
+    style[coord] = (parseInt(style[coord]) || 0) + diff + 'px';
+  }
+
   __alignOverlayPosition() {
@@ -545,0 +587,0 @@ const overlay = this.$.overlay;

No alert changes

Improved metrics

Total package byte prevSize

64446

increased by2.02%

Lines of code

1308

increased by2.27%

Number of lines in readme file

165

increased by4.43%

No dependency changes