msc-any-hint - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

mjs/wc-msc-any-hint.js

@@ -6,5 +6,6 @@ import { _wcl } from './common-lib.js';
   hover: false,
+  autoposition: false
 };
 
-const booleanAttrs = ['hover']; // booleanAttrs default should be false
+const booleanAttrs = ['hover', 'autoposition']; // booleanAttrs default should be false
 const objectAttrs = [];
@@ -111,2 +112,4 @@ const custumEvents = {};
 }
+
+.main__panel--mutation{}
 </style>
@@ -180,3 +183,4 @@
     this.#data = {
-      controller: ''
+      controller: '',
+      refreshController: ''
     };
@@ -188,3 +192,5 @@
       main: this.shadowRoot.querySelector('.main'),
-      button: this.shadowRoot.querySelector('.main__trigger')
+      button: this.shadowRoot.querySelector('.main__trigger'),
+      panel: this.shadowRoot.querySelector('.main__panel__ens'),
+      panelAnchor: this.shadowRoot.querySelector('.main__panel')
     };
@@ -197,2 +203,5 @@
     };
+
+    // evts
+    this._onRefresh = this._onRefresh.bind(this);
   }
@@ -222,2 +231,6 @@
     }
+
+    if (this.#data?.refreshController) {
+      this.#data.refreshController.abort();
+    }
   }
@@ -236,2 +249,3 @@
       switch (attrName) {
+        case 'autoposition':
         case 'hover':
@@ -252,2 +266,21 @@ this.#config[attrName] = true;
     switch (attrName) {
+      case 'autoposition': {
+        this.#nodes.panelAnchor.classList.remove('main__panel--mutation');
+        
+        if (this.autoposition) {
+          this.#data.refreshController = new AbortController();
+          const signal = this.#data.refreshController.signal;
+
+          window.addEventListener('resize', this._onRefresh, { signal });
+          document.addEventListener('scroll', this._onRefresh, { passive:true, signal });
+        
+          this._onRefresh();
+        } else {
+          if (this.#data?.refreshController) {
+            this.#data.refreshController.abort();
+          }
+        }
+        break;
+      }
+
       case 'hover':
@@ -299,2 +332,84 @@ this.#nodes.main.classList.toggle('main--hover', this.hover);
   }
+
+  set autoposition(value) {
+    this.toggleAttribute('autoposition', Boolean(value));
+  }
+
+  get autoposition() {
+    return this.#config.autoposition;
+  }
+
+  _onRefresh() {
+    if (!this.autoposition) {
+      return;
+    }
+
+    const { panel, panelAnchor, styleSheet } = this.#nodes;
+
+    panelAnchor.classList.remove('main__panel--mutation');
+
+    const { width:vW, height:vH } = _wcl.getViewportSize();
+    const { x, y } = _wcl.getPosition(panel);
+    const pX = x - _wcl.scrollX;
+    const pY = y - _wcl.scrollY;
+    const { width, height } = _wcl.getSize(panel);
+    const { horizontalAlign, verticalAlign } = this.dataset;
+    const defaults = {
+      '--vertical': 'start',
+      '--horizontal': 'center',
+      '--inset-block': 'auto calc(var(--gap) * -1)',
+      '--transform-origin-horizontal': '50%',
+      '--transform-origin-vertical': '0%',
+      ...(horizontalAlign === 'start' && {
+        '--horizontal': 'start',
+        '--transform-origin-horizontal': '0%'
+      }),
+      ...(horizontalAlign === 'end' && {
+        '--horizontal': 'end',
+        '--transform-origin-horizontal': '100%'
+      }),
+      ...(verticalAlign === 'start' && {
+        '--vertical': 'end',
+        '--transform-origin-vertical': '100%',
+        '--inset-block': 'calc(var(--gap) * -1) auto'
+      })
+    };
+    const needMutate = (pX < 0) || (pX + width > vW) || (pY < 0) || (pY + height > vH)
+      ? true
+      : false;
+
+    if (needMutate) {
+      _wcl.addStylesheetRules(
+        '.main .main__panel.main__panel--mutation',
+        {
+          ...defaults,
+          ...(pX < 0 && {
+            '--horizontal': 'start',
+            '--transform-origin-horizontal': '0%'
+          }),
+          ...((pX + width > vW) && {
+            '--horizontal': 'end',
+            '--transform-origin-horizontal': '100%'
+          }),
+          ...((pY < 0) && {
+            '--vertical': 'start',
+            '--inset-block': 'auto calc(var(--gap) * -1)',
+            '--transform-origin-vertical': '0%',
+          }),
+          ...((pY + height > vH) && {
+            '--vertical': 'end',
+            '--transform-origin-vertical': '100%',
+            '--inset-block': 'calc(var(--gap) * -1) auto'
+          }),
+        },
+        styleSheet
+      );
+    }
+
+    panelAnchor.classList.toggle('main__panel--mutation', needMutate);
+  }
+
+  refresh() {
+    this._onRefresh();
+  }
 }
@@ -301,0 +416,0 @@

package.json

 {
   "name": "msc-any-hint",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Hint is a very common UI effect to help user easy understand particular nouns. With <msc-any-hint />, developers could adopt this feature to web page easier.",
@@ -5,0 +5,0 @@ "main": "index.html",

README.md

@@ -132,2 +132,18 @@ # msc-any-hint
 
+- **autoposition**
+
+Set autoposition for <msc-any-hint />. Once setting, <msc-any-hint /> will auto position popup panel. Default is `false`（not set）.
+
+```html
+<msc-any-hint autoposition>
+  ...
+</msc-any-hint>
+```
+
+## Method
+
+| Method Signature | Description |
+| ----------- | ----------- |
+| refresh() | Force refresh &lt;msc-any-hint />. (active only when autoposition set) |
+
 ## Property
@@ -138,4 +154,4 @@
 | hover | Boolean | Getter / Setter for hover. Default is false. |
+| autoposition | Boolean | Getter / Setter for autoposition. Default is false. |
 
-
 ## Reference
@@ -142,0 +158,0 @@ - [&lt;msc-any-hint /> demo](https://blog.lalacube.com/mei/webComponent_msc-any-hint.html)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

82752

increased by6.23%

Lines of code

1794

increased by5.84%

Number of lines in readme file

160

increased by11.11%

No dependency changes