ay-menu-button - npm Package Compare versions

Comparing version 1.1.1 to 2.0.0

dist-es6/button.d.ts

@@ -1,2 +0,2 @@
-/*! Copyright 2016 Ayogo Health Inc. */
+/*! Copyright 2016 - 2023 Ayogo Health Inc. */
 export declare class MenuButtonBehaviour {
@@ -3,0 +3,0 @@ private el;

dist-es6/button.js

@@ -1,2 +0,2 @@
-/*! Copyright 2016 Ayogo Health Inc. */
+/*! Copyright 2016 - 2023 Ayogo Health Inc. */
 import { MenuManager } from './manager';
@@ -3,0 +3,0 @@ export class MenuButtonBehaviour {

dist-es6/index.d.ts

@@ -1,3 +0,3 @@
-/*! Copyright 2016 Ayogo Health Inc. */
+/*! Copyright 2016 - 2023 Ayogo Health Inc. */
 import { MenuButtonBehaviour } from './button';
 export default function MenuButton(el: HTMLButtonElement): MenuButtonBehaviour;

dist-es6/index.js

@@ -1,7 +0,12 @@
-/*! Copyright 2016 Ayogo Health Inc. */
+/*! Copyright 2016 - 2023 Ayogo Health Inc. */
+import { MenuManager } from './manager';
 import { MenuButtonBehaviour } from './button';
 const MENU_STYLES = `
+menu[type="context"]:not([popover]),
+menu[data-owner="button"]:not([popover]) {
+    display: none;
+}
+
 menu[type="context"],
 menu[data-owner="button"] {
-    display: none;
     padding: 0.125em;
@@ -16,4 +21,4 @@ margin: 0;
 
-menu[type="context"][data-dir="up"],
-menu[data-owner="button"][data-dir="up"] {
+menu[type="context"][data-dir="up"]:not([popover]),
+menu[data-owner="button"][data-dir="up"]:not([popover]) {
     transform-origin: bottom center;
@@ -65,4 +70,4 @@ }
 
-menu[type="context"][data-dir="up"],
-menu[data-owner="button"][data-dir="up"] {
+menu[type="context"][data-dir="up"]:not([popover]),
+menu[data-owner="button"][data-dir="up"]:not([popover]) {
     -webkit-transform-origin: bottom center;
@@ -94,2 +99,12 @@ }
 export default function MenuButton(el) {
+    if (!el.hasAttribute('menu')) {
+        throw new Error('Cannot construct a menu button without a menu attribute');
+    }
+    const menu = document.getElementById(el.getAttribute('menu'));
+    if (!menu) {
+        throw new Error(`Could not find menu element #${el.getAttribute('menu')} for button`);
+    }
+    if (MenuManager.usePopover) {
+        menu.setAttribute('popover', 'manual');
+    }
     let behaviour = new MenuButtonBehaviour(el);
@@ -96,0 +111,0 @@ if (gcCache) {

dist-es6/manager.d.ts

@@ -1,3 +0,4 @@
-/*! Copyright 2016 Ayogo Health Inc. */
+/*! Copyright 2016 - 2023 Ayogo Health Inc. */
 export declare class MenuManager {
+    private static supportsPopover;
     private static curMenu;
@@ -10,2 +11,3 @@ private static curButton;
     static get open(): boolean;
+    static get usePopover(): boolean;
     static openMenu(btn: HTMLButtonElement, focus?: boolean): void;
@@ -12,0 +14,0 @@ static closeMenu(): void;

dist-es6/manager.js

@@ -1,2 +0,2 @@
-/*! Copyright 2016 Ayogo Health Inc. */
+/*! Copyright 2016 - 2023 Ayogo Health Inc. */
 export class MenuManager {
@@ -6,2 +6,8 @@ static get open() {
     }
+    static get usePopover() {
+        if (this.supportsPopover === null) {
+            this.supportsPopover = HTMLElement.prototype.hasOwnProperty('popover');
+        }
+        return this.supportsPopover;
+    }
     static openMenu(btn, focus = false) {
@@ -25,3 +31,8 @@ if (this.transitionEndHandler !== null) {
         this.curButton.addEventListener('blur', this.handleBlur);
-        this.curButton.parentNode.insertBefore(this.curMenu, this.curButton.nextSibling);
+        if (this.usePopover) {
+            this.curMenu.showPopover();
+        }
+        else {
+            this.curButton.parentNode.insertBefore(this.curMenu, this.curButton.nextSibling);
+        }
         let offset = this.getScrollOffset();
@@ -53,2 +64,5 @@ this.addMenuStyle();
         this.transitionEndHandler = () => {
+            if (this.usePopover) {
+                oldMenu.hidePopover();
+            }
             oldMenu.removeAttribute('style');
@@ -125,4 +139,6 @@ oldMenu.removeEventListener('transitionend', this.transitionEndHandler);
         let btnSize = btn.getBoundingClientRect();
-        menu.style.display = 'block';
-        menu.style.position = 'fixed';
+        if (!this.usePopover) {
+            menu.style.display = 'block';
+            menu.style.position = 'fixed';
+        }
         menu.setAttribute('role', 'menu');
@@ -298,2 +314,3 @@ menu.setAttribute('data-owner', 'button');
 }
+MenuManager.supportsPopover = null;
 MenuManager.curMenu = null;
@@ -300,0 +317,0 @@ MenuManager.curButton = null;

dist/index.js

@@ -1,2 +0,2 @@
-/*! Copyright 2017 Ayogo Health Inc. */
+/*! Copyright 2016 - 2023 Ayogo Health Inc. */
 (function (global, factory) {
@@ -8,3 +8,3 @@ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
 
-    /*! Copyright 2016 Ayogo Health Inc. */
+    /*! Copyright 2016 - 2023 Ayogo Health Inc. */
     var MenuManager = (function () {
@@ -20,2 +20,12 @@ function MenuManager() {
         });
+        Object.defineProperty(MenuManager, "usePopover", {
+            get: function () {
+                if (this.supportsPopover === null) {
+                    this.supportsPopover = HTMLElement.prototype.hasOwnProperty('popover');
+                }
+                return this.supportsPopover;
+            },
+            enumerable: false,
+            configurable: true
+        });
         MenuManager.openMenu = function (btn, focus) {
@@ -40,3 +50,8 @@ if (focus === void 0) { focus = false; }
             this.curButton.addEventListener('blur', this.handleBlur);
-            this.curButton.parentNode.insertBefore(this.curMenu, this.curButton.nextSibling);
+            if (this.usePopover) {
+                this.curMenu.showPopover();
+            }
+            else {
+                this.curButton.parentNode.insertBefore(this.curMenu, this.curButton.nextSibling);
+            }
             var offset = this.getScrollOffset();
@@ -69,2 +84,5 @@ this.addMenuStyle();
             this.transitionEndHandler = function () {
+                if (_this.usePopover) {
+                    oldMenu.hidePopover();
+                }
                 oldMenu.removeAttribute('style');
@@ -142,4 +160,6 @@ oldMenu.removeEventListener('transitionend', _this.transitionEndHandler);
             var btnSize = btn.getBoundingClientRect();
-            menu.style.display = 'block';
-            menu.style.position = 'fixed';
+            if (!this.usePopover) {
+                menu.style.display = 'block';
+                menu.style.position = 'fixed';
+            }
             menu.setAttribute('role', 'menu');
@@ -314,2 +334,3 @@ menu.setAttribute('data-owner', 'button');
         };
+        MenuManager.supportsPopover = null;
         MenuManager.curMenu = null;
@@ -324,3 +345,3 @@ MenuManager.curButton = null;
 
-    /*! Copyright 2016 Ayogo Health Inc. */
+    /*! Copyright 2016 - 2023 Ayogo Health Inc. */
     var MenuButtonBehaviour = (function () {
@@ -372,5 +393,5 @@ function MenuButtonBehaviour(btn) {
 
-    /*! Copyright 2016 Ayogo Health Inc. */
-    var MENU_STYLES = "\nmenu[type=\"context\"],\nmenu[data-owner=\"button\"] {\n    display: none;\n    padding: 0.125em;\n    margin: 0;\n    border: 1px solid;\n    background: Menu;\n    will-change: transform;\n    transform-origin: top center;\n    transition: transform 225ms cubic-bezier(0.4, 0.0, 0.2, 1);\n}\n\nmenu[type=\"context\"][data-dir=\"up\"],\nmenu[data-owner=\"button\"][data-dir=\"up\"] {\n    transform-origin: bottom center;\n}\n\nmenuitem {\n    display: list-item;\n    list-style-type: none;\n    background: Menu;\n    font: menu;\n    padding: 0.25em 0.5em;\n    cursor: default;\n}\n\nmenuitem::after {\n    content: attr(label);\n}\n\nmenuitem[disabled] {\n    color: GrayText;\n}\n\nmenuitem:not([disabled]):hover,\nmenuitem:not([disabled]):focus {\n    background: Highlight;\n    color: HighlightText;\n}\n\nbutton[type=\"menu\"]::after,\nbutton[data-type=\"menu\"]:after { content: ' \u25BE'; }\n\nbutton[type=\"menu\"]:empty::after,\nbutton[data-type=\"menu\"]:empty:after { content: '\u25BE'; } /* No space character */\n\nbutton[type=\"menu\"][data-dir=\"up\"]::after,\nbutton[data-type=\"menu\"][data-dir=\"up\"]:after { content: ' \u25B4'; }\n\nbutton[type=\"menu\"][data-dir=\"up\"]:empty::after,\nbutton[data-type=\"menu\"][data-dir=\"up\"]:empty:after { content: '\u25B4'; } /* No space character */\n";
-    var PREFIX_STYLES = "\nmenu[type=\"context\"],\nmenu[data-owner=\"button\"] {\n    -webkit-transform-origin: top center;\n    -webkit-transition: -webkit-transform 225ms cubic-bezier(0.4, 0.0, 0.2, 1);\n    transition: -webkit-transform 225ms cubic-bezier(0.4, 0.0, 0.2, 1);\n}\n\nmenu[type=\"context\"][data-dir=\"up\"],\nmenu[data-owner=\"button\"][data-dir=\"up\"] {\n    -webkit-transform-origin: bottom center;\n}\n";
+    /*! Copyright 2016 - 2023 Ayogo Health Inc. */
+    var MENU_STYLES = "\nmenu[type=\"context\"]:not([popover]),\nmenu[data-owner=\"button\"]:not([popover]) {\n    display: none;\n}\n\nmenu[type=\"context\"],\nmenu[data-owner=\"button\"] {\n    padding: 0.125em;\n    margin: 0;\n    border: 1px solid;\n    background: Menu;\n    will-change: transform;\n    transform-origin: top center;\n    transition: transform 225ms cubic-bezier(0.4, 0.0, 0.2, 1);\n}\n\nmenu[type=\"context\"][data-dir=\"up\"]:not([popover]),\nmenu[data-owner=\"button\"][data-dir=\"up\"]:not([popover]) {\n    transform-origin: bottom center;\n}\n\nmenuitem {\n    display: list-item;\n    list-style-type: none;\n    background: Menu;\n    font: menu;\n    padding: 0.25em 0.5em;\n    cursor: default;\n}\n\nmenuitem::after {\n    content: attr(label);\n}\n\nmenuitem[disabled] {\n    color: GrayText;\n}\n\nmenuitem:not([disabled]):hover,\nmenuitem:not([disabled]):focus {\n    background: Highlight;\n    color: HighlightText;\n}\n\nbutton[type=\"menu\"]::after,\nbutton[data-type=\"menu\"]:after { content: ' \u25BE'; }\n\nbutton[type=\"menu\"]:empty::after,\nbutton[data-type=\"menu\"]:empty:after { content: '\u25BE'; } /* No space character */\n\nbutton[type=\"menu\"][data-dir=\"up\"]::after,\nbutton[data-type=\"menu\"][data-dir=\"up\"]:after { content: ' \u25B4'; }\n\nbutton[type=\"menu\"][data-dir=\"up\"]:empty::after,\nbutton[data-type=\"menu\"][data-dir=\"up\"]:empty:after { content: '\u25B4'; } /* No space character */\n";
+    var PREFIX_STYLES = "\nmenu[type=\"context\"],\nmenu[data-owner=\"button\"] {\n    -webkit-transform-origin: top center;\n    -webkit-transition: -webkit-transform 225ms cubic-bezier(0.4, 0.0, 0.2, 1);\n    transition: -webkit-transform 225ms cubic-bezier(0.4, 0.0, 0.2, 1);\n}\n\nmenu[type=\"context\"][data-dir=\"up\"]:not([popover]),\nmenu[data-owner=\"button\"][data-dir=\"up\"]:not([popover]) {\n    -webkit-transform-origin: bottom center;\n}\n";
     var mnuStyle = document.createElement('style');
@@ -399,2 +420,12 @@ mnuStyle.appendChild(document.createTextNode(MENU_STYLES));
     function MenuButton(el) {
+        if (!el.hasAttribute('menu')) {
+            throw new Error('Cannot construct a menu button without a menu attribute');
+        }
+        var menu = document.getElementById(el.getAttribute('menu'));
+        if (!menu) {
+            throw new Error("Could not find menu element #".concat(el.getAttribute('menu'), " for button"));
+        }
+        if (MenuManager.usePopover) {
+            menu.setAttribute('popover', 'manual');
+        }
         var behaviour = new MenuButtonBehaviour(el);
@@ -401,0 +432,0 @@ if (gcCache) {

package.json

 {
   "name": "ay-menu-button",
-  "version": "1.1.1",
-  "copyright": "Copyright 2016 Ayogo Health Inc.",
+  "version": "2.0.0",
+  "copyright": "Copyright 2016 - 2023 Ayogo Health Inc.",
   "license": "MIT",
@@ -32,14 +32,8 @@ "homepage": "http://ayogo.com",
   "devDependencies": {
-    "@types/angular": "^1.7.0",
-    "@vue/compiler-sfc": "^3.0.11",
-    "angular": "^1.8.0",
     "rollup": "^2.3.3",
     "rollup-plugin-cleanup": "^3.1.1",
     "rollup-plugin-sourcemaps": "^0.6.0",
-    "rollup-plugin-typescript2": "^0.34.1",
-    "rollup-plugin-vue": "^6.0.0",
+    "rollup-plugin-typescript2": "^0.35.0",
     "tslib": "^2.2.0",
-    "typescript": "^4.2.4",
-    "vue": "^2.6.11",
-    "vue-template-compiler": "^2.6.11"
+    "typescript": "^5.2.2"
   },
@@ -49,8 +43,6 @@ "scripts": {
     "build:es5:base": "tsc -p tsconfig.es5.json && rollup dist-es5/index.js -n MenuButton -c rollup.config.js -o dist/index.js",
-    "build:es5:ng1": "tsc -p tsconfig.es5.json && rollup dist-es5/angular1.js -n ayMenuButton -c rollup.config.js -o dist/angular1.js",
-    "build:vue": "rollup src/component.vue -n ayMenuButton -c rollup.config.vue.js -o dist/vue.js",
-    "build:es5": "npm run build:es5:base && npm run build:es5:ng1",
-    "build": "npm run build:es6 && npm run build:es5 && npm run build:vue",
+    "build:es5": "npm run build:es5:base",
+    "build": "npm run build:es6 && npm run build:es5",
     "version": "npm run build && git add -A dist dist-es6"
   }
 }

rollup.config.js

@@ -1,2 +0,2 @@
-/*! Copyright 2016 Ayogo Health Inc. */
+/*! Copyright 2016 - 2023 Ayogo Health Inc. */
 
@@ -9,7 +9,4 @@ import cleanup from 'rollup-plugin-cleanup';
         format: 'umd',
-        banner: '/*! Copyright 2017 Ayogo Health Inc. */',
-        sourcemap: true,
-        globals: {
-            'angular': 'angular'
-        }
+        banner: '/*! Copyright 2016 - 2023 Ayogo Health Inc. */',
+        sourcemap: true
     },
@@ -16,0 +13,0 @@ plugins: [

src/button.ts

@@ -1,2 +0,2 @@
-/*! Copyright 2016 Ayogo Health Inc. */
+/*! Copyright 2016 - 2023 Ayogo Health Inc. */
 
@@ -3,0 +3,0 @@ import { MenuManager } from './manager';

src/index.ts

@@ -1,10 +0,15 @@
-/*! Copyright 2016 Ayogo Health Inc. */
+/*! Copyright 2016 - 2023 Ayogo Health Inc. */
 
 
+import { MenuManager } from './manager';
 import { MenuButtonBehaviour } from './button';
 
 const MENU_STYLES = `
+menu[type="context"]:not([popover]),
+menu[data-owner="button"]:not([popover]) {
+    display: none;
+}
+
 menu[type="context"],
 menu[data-owner="button"] {
-    display: none;
     padding: 0.125em;
@@ -19,4 +24,4 @@ margin: 0;
 
-menu[type="context"][data-dir="up"],
-menu[data-owner="button"][data-dir="up"] {
+menu[type="context"][data-dir="up"]:not([popover]),
+menu[data-owner="button"][data-dir="up"]:not([popover]) {
     transform-origin: bottom center;
@@ -70,4 +75,4 @@ }
 
-menu[type="context"][data-dir="up"],
-menu[data-owner="button"][data-dir="up"] {
+menu[type="context"][data-dir="up"]:not([popover]),
+menu[data-owner="button"][data-dir="up"]:not([popover]) {
     -webkit-transform-origin: bottom center;
@@ -110,2 +115,15 @@ }
 export default function MenuButton(el : HTMLButtonElement) {
+    if (!el.hasAttribute('menu')) {
+        throw new Error('Cannot construct a menu button without a menu attribute');
+    }
+
+    const menu = document.getElementById(el.getAttribute('menu')!);
+    if (!menu) {
+        throw new Error(`Could not find menu element #${el.getAttribute('menu')} for button`);
+    }
+
+    if (MenuManager.usePopover) {
+        menu.setAttribute('popover', 'manual');
+    }
+
     let behaviour = new MenuButtonBehaviour(el);
@@ -112,0 +130,0 @@

src/manager.ts

@@ -1,4 +0,5 @@
-/*! Copyright 2016 Ayogo Health Inc. */
+/*! Copyright 2016 - 2023 Ayogo Health Inc. */
 
 export class MenuManager {
+    private static supportsPopover : boolean | null             = null;
     private static curMenu : HTMLMenuElement | null             = null;
@@ -16,2 +17,9 @@ private static curButton : HTMLButtonElement | null         = null;
 
+    static get usePopover() {
+        if (this.supportsPopover === null) {
+            this.supportsPopover = HTMLElement.prototype.hasOwnProperty('popover');
+        }
+        return this.supportsPopover;
+    }
+
     static openMenu(btn : HTMLButtonElement, focus : boolean = false) {
@@ -40,5 +48,9 @@ if (this.transitionEndHandler !== null) {
 
-        // Before we open the menu, we need to move it in the DOM so that is
-        // is directly after the button element for tab ordering
-        this.curButton.parentNode!.insertBefore(this.curMenu, this.curButton.nextSibling);
+        if (this.usePopover) {
+            this.curMenu.showPopover();
+        } else {
+            // Before we open the menu, we need to move it in the DOM so that is
+            // is directly after the button element for tab ordering
+            this.curButton.parentNode!.insertBefore(this.curMenu, this.curButton.nextSibling);
+        }
 
@@ -81,2 +93,5 @@ let offset = this.getScrollOffset();
         this.transitionEndHandler = () => {
+            if (this.usePopover) {
+                oldMenu.hidePopover();
+            }
             oldMenu.removeAttribute('style');
@@ -173,4 +188,6 @@ oldMenu.removeEventListener('transitionend', this.transitionEndHandler!);
         // Add the menu to the DOM for measuring
-        menu.style.display = 'block';
-        menu.style.position = 'fixed';
+        if (!this.usePopover) {
+            menu.style.display = 'block';
+            menu.style.position = 'fixed';
+        }
         menu.setAttribute('role', 'menu');
@@ -177,0 +194,0 @@ menu.setAttribute('data-owner', 'button');

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

6

decreased by-50%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

113515

decreased by-36.69%

Number of package files

24

decreased by-29.41%

Lines of code

1476

decreased by-35.83%

No dependency changes