完成selector

packages/artplayer/src/utils/component.js

@@ -1,5 +1,5 @@
 import { hasClass, addClass, removeClass, append, setStyles, tooltip, getStyle } from './dom';
-import { has, def } from './property';
+import { has } from './property';
 import { errorHandle } from './error';
 
 export default class Component {
@@ -31,81 +31,85 @@ export default class Component {
     }
 
     add(option) {
+        const { hover, proxy } = this.art.events;
+
         if (!this.$parent || !this.name || option.disable) return;
         const name = option.name || `${this.name}${this.id}`;
         errorHandle(!has(this, name), `Cannot add an existing name [${name}] to the [${this.name}]`);
 
         this.id += 1;
-        const result = {};
+        const $ref = document.createElement('div');
+        addClass($ref, `art-${this.name}`);
+        addClass($ref, `art-${this.name}-${name}`);
 
-        result.$ref = document.createElement('div');
-        addClass(result.$ref, `art-${this.name}`);
-        addClass(result.$ref, `art-${this.name}-${name}`);
-
-        if (option.html) {
-            append(result.$ref, option.html);
+        const childs = Array.from(this.$parent.children);
+        $ref.dataset.index = option.index || this.id;
+        const nextChild = childs.find((item) => Number(item.dataset.index) >= Number($ref.dataset.index));
+        if (nextChild) {
+            nextChild.insertAdjacentElement('beforebegin', $ref);
+        } else {
+            append(this.$parent, $ref);
         }
 
-        if (option.position !== 'top') {
-            // if (!(result.$ref.firstElementChild && result.$ref.firstElementChild.tagName === 'I')) {
-            //     addClass(result.$ref, 'art-control-onlyText');
-            // }
-
-            if (option.switcher) {
-                const { hover } = this.art.events;
-
-                addClass(result.$ref, 'art-control-switcher');
-                result.$value = document.createElement('div');
-                result.$value.classList.value = `art-switcher-value`;
-                append(result.$value, option.html);
-                result.$ref.innerHTML = '';
-                append(result.$ref, result.$value);
-
-                const $list = option.switcher.map((item) => `<div class="art-switcher-item">${item}</div>`).join('');
-                result.$switcher = document.createElement('div');
-                addClass(result.$switcher, 'art-switcher-list');
-                append(result.$switcher, $list);
-                append(result.$ref, result.$switcher);
-
-                hover(result.$ref, () => {
-                    result.$switcher.style.left = `-${
-                        getStyle(result.$switcher, 'width') / 2 - getStyle(result.$ref, 'width') / 2
-                    }px`;
-                });
-            }
+        if (option.html) {
+            append($ref, option.html);
         }
 
         if (option.style) {
-            setStyles(result.$ref, option.style);
+            setStyles($ref, option.style);
         }
 
         if (option.tooltip) {
-            tooltip(result.$ref, option.tooltip);
+            tooltip($ref, option.tooltip);
         }
 
-        const childs = Array.from(this.$parent.children);
-        result.$ref.dataset.index = option.index || this.id;
-        const nextChild = childs.find((item) => Number(item.dataset.index) >= Number(result.$ref.dataset.index));
-        if (nextChild) {
-            nextChild.insertAdjacentElement('beforebegin', result.$ref);
-        } else {
-            append(this.$parent, result.$ref);
-        }
-
-        def(this, name, {
-            get: () => result,
-        });
-
         if (option.click) {
-            this.art.events.proxy(result.$ref, 'click', (event) => {
-                result.event = event;
+            proxy($ref, 'click', (event) => {
                 event.preventDefault();
-                option.click.call(this.art, result);
+                option.click.call(this.art, event);
             });
         }
 
         if (option.mounted) {
-            option.mounted.call(this.art, result.$ref);
+            option.mounted.call(this.art, $ref);
+        }
+
+        if (['left', 'right'].includes(option.position)) {
+            if (!($ref.firstElementChild && $ref.firstElementChild.tagName === 'I')) {
+                addClass($ref, 'art-control-onlyText');
+            }
+
+            if (option.selector) {
+                addClass($ref, 'art-control-selector');
+                const $value = document.createElement('div');
+                $value.classList.value = `art-selector-value`;
+                append($value, option.html);
+                $ref.innerHTML = '';
+                append($ref, $value);
+
+                const list = option.selector.map((item) => `<div class="art-selector-item">${item}</div>`).join('');
+                const $list = document.createElement('div');
+                addClass($list, 'art-selector-list');
+                append($list, list);
+                append($ref, $list);
+
+                const setLeft = () => {
+                    $list.style.left = `-${getStyle($list, 'width') / 2 - getStyle($ref, 'width') / 2}px`;
+                };
+
+                hover($ref, setLeft);
+
+                proxy($ref, 'click', (event) => {
+                    if (hasClass(event.target, 'art-selector-item')) {
+                        const html = event.target.innerHTML;
+                        $value.innerHTML = html;
+                        setLeft();
+                        if (option.onSelect) {
+                            option.onSelect.call(this.art, event, html);
+                        }
+                    }
+                });
+            }
         }
     }
 }