分离菜单函数

src/contextmenu/index.js

@@ -1,4 +1,4 @@
-import { append, setStyles, setStyle } from '../utils';
+import { append, insertByIndex, setStyles, setStyle } from '../utils';
 import playbackRate from './playbackRate';
 import aspectRatio from './aspectRatio';
 import info from './info';
@@ -23,11 +23,12 @@ export default class Contextmenu {
       close
     );
 
+    option.contextmenu.forEach(item => {
+      this.add(item);
+    });
+
     proxy(refs.$player, 'contextmenu', event => {
       event.preventDefault();
-      if (!refs.$contextmenu) {
-        this.creatMenu();
-      }
       this.show();
       this.setPos(event);
     });
@@ -39,37 +40,25 @@ export default class Contextmenu {
     });
   }
 
-  creatMenu() {
-    const { option, refs, events: { proxy } } = this.art;
-    refs.$contextmenu = document.createElement('div');
-    refs.$contextmenu.classList.add('artplayer-contextmenu');
-    option.contextmenu
-      .filter(item => !item.disable)
-      .map(item => {
-        id++;
-        const menu = typeof item === 'function' ? item(this.art) : item;
-        const $menu = document.createElement('div');
-        $menu.dataset.artMenuId = menu.index || id;
-        $menu.setAttribute('class', `art-menu art-menu-${menu.name || id}`);
-        append($menu, menu.html);
-        setStyles($menu, menu.style || {});
-        if (menu.click) {
-          proxy($menu, 'click', event => {
-            event.preventDefault();
-            menu.click.call(this, event);
-            this.art.emit('contextmenu:click', $menu);
-          });
-        }
-        this[`$${menu.name || id}`] = $menu;
-        return $menu;
-      })
-      .sort(
-        (a, b) =>
-          Number(a.dataset.artMenuId) - Number(b.dataset.artMenuId)
-      ).forEach(item => {
-        append(refs.$contextmenu, item);
-      });
-    append(refs.$player, refs.$contextmenu);
+  add(item) {
+    if (!item.disable) {
+      const { refs, events: { proxy } } = this.art;
+      id++;
+      const menu = typeof item === 'function' ? item(this.art) : item;
+      const $menu = document.createElement('div');
+      $menu.setAttribute('class', `art-menu art-menu-${menu.name || id}`);
+      append($menu, menu.html);
+      setStyles($menu, menu.style || {});
+      if (menu.click) {
+        proxy($menu, 'click', event => {
+          event.preventDefault();
+          menu.click.call(this, event);
+          this.art.emit('contextmenu:click', $menu);
+        });
+      }
+      this[`$${menu.name || id}`] = $menu;
+      insertByIndex(refs.$contextmenu, $menu, menu.index || id);
+    }
   }
 
   setPos(event) {
@@ -95,17 +84,13 @@ export default class Contextmenu {
 
   hide() {
     const { refs: { $contextmenu } } = this.art;
-    if ($contextmenu) {
-      setStyle($contextmenu, 'display', 'none');
-      this.art.emit('contextmenu:hide', $contextmenu);
-    }
+    setStyle($contextmenu, 'display', 'none');
+    this.art.emit('contextmenu:hide', $contextmenu);
   }
 
   show() {
     const { refs: { $contextmenu } } = this.art;
-    if ($contextmenu) {
-      setStyle($contextmenu, 'display', 'block');
-      this.art.emit('contextmenu:show', $contextmenu);
-    }
+    setStyle($contextmenu, 'display', 'block');
+    this.art.emit('contextmenu:show', $contextmenu);
   }
 }

src/layers.js

@@ -12,7 +12,7 @@ export default class Layers {
     const { refs: { $layers } } = this.art;
     id++;
     const $layer = document.createElement('div');
-    $layer.setAttribute('data-art-layer-id', id);
+    $layer.dataset.artLayerIndex = option.index || id;
     $layer.setAttribute('class', `art-layer art-layer-${option.name || id}`);
     setStyle($layer, 'z-index', option.index || id);
     append($layer, option.html);

src/style/contextmenu.scss

@@ -1,5 +1,6 @@
 .artplayer-video-player {
     .artplayer-contextmenu {
+        display: none;
         position: absolute;
         z-index: 110;
         left: 0;

src/template.js

@@ -32,6 +32,7 @@ export default class Template {
           <div class="artplayer-pip-title"></div>
           <div class="artplayer-pip-close">×</div>
         </div>
+        <div class="artplayer-contextmenu"></div>
       </div>
     `;
     refs.$player = refs.$container.querySelector('.artplayer-video-player');
@@ -57,5 +58,6 @@ export default class Template {
     refs.$pipHeader = refs.$container.querySelector('.artplayer-pip-header');
     refs.$pipTitle = refs.$container.querySelector('.artplayer-pip-title');
     refs.$pipClose = refs.$container.querySelector('.artplayer-pip-close');
+    refs.$contextmenu = refs.$container.querySelector('.artplayer-contextmenu');
   }
 }

src/utils/index.js

@@ -46,6 +46,18 @@ export function append(parent, child) {
   return parent.lastElementChild;
 }
 
+export function insertByIndex(parent, child, index) {
+  const childs = Array.from(parent.children);
+  child.dataset.index = index;
+  const nextChild = childs.find(item => Number(item.dataset.index) >= Number(index));
+  if (nextChild) {
+    nextChild.insertAdjacentElement('beforebegin', child);
+  } else {
+    append(parent, child);
+  }
+  return child;
+}
+
 export function setStyle(element, key, value) {
   element.style[key] = value;
   return element;