v4: Core: Menu - add menu events + app methods

src/core/components/menu/menu.d.ts

@@ -1,9 +1,27 @@
 import Framework7, { CSSSelector, Framework7EventsClass, Framework7Plugin } from '../app/app-class';
 
 export namespace Menu {
-  interface AppMethods {}
+  interface DomEvents {
+    /** Event will be triggered right after menu dropdown will be opened */
+    'menu:opened' : () => void
+    /** Event will be triggered right after menu dropdown will be closed */
+    'menu:closed' : () => void
+  }
+  interface AppMethods {
+    menu: {
+      /** open Menu dropdown */
+      open(el? : HTMLElement | CSSSelector) : void
+      /** close Menu dropdown */
+      close(el? : HTMLElement | CSSSelector) : void
+    }
+  }
   interface AppParams {}
-  interface AppEvents {}
+  interface AppEvents {
+    /** Event will be triggered right after menu dropdown will be opened. As an argument event handler receives menu dropdown item element */
+    menuOpened: (el : HTMLElement) => void
+    /** Event will be triggered right after menu dropdown will be closed. As an argument event handler receives menu dropdown item element */
+    menuClosed: (el : HTMLElement) => void
+  }
 }
 
 declare const MenuComponent: Framework7Plugin;

src/core/components/menu/menu.js

@@ -1,29 +1,58 @@
 import $ from 'dom7';
 
+const Menu = {
+  open(el = '.menu-item-dropdown') {
+    const app = this;
+    if (!el) return;
+    const $el = $(el).closest('.menu-item-dropdown');
+    if (!$el.length) return;
+    $el.eq(0).addClass('menu-item-dropdown-opened').trigger('menu:opened');
+    app.emit('menuOpened', $el.eq(0)[0]);
+  },
+  close(el = '.menu-item-dropdown-opened') {
+    const app = this;
+    if (!el) return;
+    const $el = $(el).closest('.menu-item-dropdown-opened');
+    if (!$el.length) return;
+    $el.eq(0).removeClass('menu-item-dropdown-opened').trigger('menu:closed');
+    app.emit('menuClosed', $el.eq(0)[0]);
+  },
+};
+
 export default {
   name: 'menu',
+  create() {
+    const app = this;
+    app.menu = {
+      open: Menu.open.bind(app),
+      close: Menu.close.bind(app),
+    };
+  },
   on: {
     click(e) {
+      const app = this;
       const openedMenus = $('.menu-item-dropdown-opened');
       if (!openedMenus.length) return;
       openedMenus.each((index, el) => {
         if (!$(e.target).closest('.menu-item-dropdown-opened').length) {
-          $(el).removeClass('menu-item-dropdown-opened');
+          app.menu.close(el);
         }
       });
     },
   },
   clicks: {
     '.menu-item-dropdown': function onClick($clickedEl, dataset, e) {
+      const app = this;
       if ($clickedEl.hasClass('menu-item-dropdown-opened')) {
         if ($(e.target).closest('.menu-dropdown').length) return;
-        $clickedEl.removeClass('menu-item-dropdown-opened');
+        app.menu.close($clickedEl);
       } else {
-        $clickedEl.addClass('menu-item-dropdown-opened');
+        app.menu.open($clickedEl);
       }
     },
     '.menu-close': function onClick() {
-      $('.menu-item-dropdown-opened').removeClass('menu-item-dropdown-opened');
+      const app = this;
+      app.menu.close();
     },
   },
 };