调整switcher结构

packages/artplayer/src/utils/component.js

@@ -1,4 +1,4 @@
-import { hasClass, addClass, removeClass, append, setStyles, tooltip } from './dom';
+import { hasClass, addClass, removeClass, append, setStyles, tooltip, getStyle } from './dom';
 import { has, def } from './property';
 import { errorHandle } from './error';
 
@@ -36,64 +36,76 @@ export default class Component {
         errorHandle(!has(this, name), `Cannot add an existing name [${name}] to the [${this.name}]`);
 
         this.id += 1;
-        const $ref = document.createElement('div');
-        $ref.classList.value = `art-${this.name} art-${this.name}-${name}`;
+        const result = {};
+
+        result.$ref = document.createElement('div');
+        addClass(result.$ref, `art-${this.name}`);
+        addClass(result.$ref, `art-${this.name}-${name}`);
 
-        const $value = document.createElement('div');
         if (option.html) {
-            append($value, option.html);
-            append($ref, $value);
+            append(result.$ref, option.html);
         }
 
-        if (option.switcher) {
-            //
+        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.style) {
-            setStyles($ref, option.style);
+            setStyles(result.$ref, option.style);
         }
 
         if (option.tooltip) {
-            tooltip($ref, option.tooltip);
+            tooltip(result.$ref, option.tooltip);
         }
 
         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));
+        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', $ref);
+            nextChild.insertAdjacentElement('beforebegin', result.$ref);
         } else {
-            append(this.$parent, $ref);
+            append(this.$parent, result.$ref);
         }
 
-        const result = {
-            $ref,
-            $value,
-            get value() {
-                return $value.innerHTML;
-            },
-            set value(html) {
-                $value.innerHTML = html;
-            },
-        };
-
         def(this, name, {
             get: () => result,
         });
 
         if (option.click) {
-            this.art.events.proxy($ref, 'click', (event) => {
+            this.art.events.proxy(result.$ref, 'click', (event) => {
+                result.event = event;
                 event.preventDefault();
-                option.click.call(this.art, event);
+                option.click.call(this.art, result);
             });
         }
 
         if (option.mounted) {
-            option.mounted.call(this.art, $ref);
-        }
-
-        if (option.position !== 'top' && !($ref.firstElementChild && $ref.firstElementChild.tagName === 'I')) {
-            addClass($ref, 'art-control-onlyText');
+            option.mounted.call(this.art, result.$ref);
         }
     }
 }