完成selector

2026-10-27 01:21:20 -08:00 · 2020-08-25 14:24:34 +08:00
1 parent 4d77887c03
commit c621687988
@@ -5,4 +5,4 @@
 * Released under the MIT License.
 */

-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Artplayer=e()}(this,(function(){"use strict";var t=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")};function e(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var n=function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t};"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function r(t,e){return t(e={exports:{}},e.exports),e.exports}var o=r((function(t){function e(n){return"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?t.exports=e=function(t){return typeof t}:t.exports=e=function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},e(n)}t.exports=e}));var i=function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t};var a=function(t,e){return!e||"object"!==o(e)&&"function"!=typeof e?i(t):e},c=r((function(t){function e(n){return t.exports=e=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},e(n)}t.exports=e})),s=r((function(t){function e(n,r){return t.exports=e=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},e(n,r)}t.exports=e}));var l=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&s(t,e)};!function(t,e){void 0===e&&(e={});var n=e.insertAt;if(t&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}('.art-undercover{background:#000;position:fixed;top:0;left:0;display:none;height:100%;width:100%;opacity:.9;z-index:10}.art-video-player{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;margin:0 auto;z-index:20;width:100%;height:100%;outline:0;zoom:1;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-touch-action:manipulation;touch-action:manipulation;-ms-high-contrast-adjust:none}.art-video-player *{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.art-video-player ::-webkit-scrollbar{width:5px}.art-video-player ::-webkit-scrollbar-thumb{background-color:#666}.art-video-player ::-webkit-scrollbar-thumb:hover{background-color:#ccc}.art-video-player .art-icon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1.5}.art-video-player .art-icon svg{fill:#fff}.art-video-player img{max-width:100%;vertical-align:top}.art-video-player>object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}@supports ((-webkit-backdrop-filter:initial) or (backdrop-filter:initial)){.art-video-player .art-backdrop-filter{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);background-color:rgba(0,0,0,.7)!important}}.art-video-player .art-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;cursor:pointer}.art-video-player .art-subtitle{display:none;position:absolute;z-index:20;bottom:10px;width:100%;padding:0 20px;text-align:center;color:#fff;font-size:20px;pointer-events:none;text-shadow:.5px .5px .5px rgba(0,0,0,.5)}.art-video-player .art-subtitle p{word-break:break-all;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin:5px 0}.art-video-player.art-subtitle-show .art-subtitle{display:block}.art-video-player.art-control-show .art-subtitle{bottom:40px}.art-video-player .art-danmuku{z-index:30}.art-video-player .art-danmuku,.art-video-player .art-layers{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.art-video-player .art-layers{display:none;z-index:40}.art-video-player .art-layers .art-layer{pointer-events:auto}.art-video-player.art-layer-show .art-layers{display:block}.art-video-player .art-mask{display:none;z-index:50;left:0;top:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.art-video-player .art-mask,.art-video-player .art-mask .art-state{-webkit-box-align:center;-ms-flex-align:center;align-Line truncated
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Artplayer=e()}(this,(function(){"use strict";var t=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")};function e(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var n=function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t};"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function r(t,e){return t(e={exports:{}},e.exports),e.exports}var o=r((function(t){function e(n){return"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?t.exports=e=function(t){return typeof t}:t.exports=e=function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},e(n)}t.exports=e}));var i=function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t};var a=function(t,e){return!e||"object"!==o(e)&&"function"!=typeof e?i(t):e},c=r((function(t){function e(n){return t.exports=e=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},e(n)}t.exports=e})),s=r((function(t){function e(n,r){return t.exports=e=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},e(n,r)}t.exports=e}));var l=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&s(t,e)};!function(t,e){void 0===e&&(e={});var n=e.insertAt;if(t&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}('.art-undercover{background:#000;position:fixed;top:0;left:0;display:none;height:100%;width:100%;opacity:.9;z-index:10}.art-video-player{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;margin:0 auto;z-index:20;width:100%;height:100%;outline:0;zoom:1;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-touch-action:manipulation;touch-action:manipulation;-ms-high-contrast-adjust:none}.art-video-player *{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.art-video-player ::-webkit-scrollbar{width:5px}.art-video-player ::-webkit-scrollbar-thumb{background-color:#666}.art-video-player ::-webkit-scrollbar-thumb:hover{background-color:#ccc}.art-video-player .art-icon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1.5}.art-video-player .art-icon svg{fill:#fff}.art-video-player img{max-width:100%;vertical-align:top}.art-video-player>object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}@supports ((-webkit-backdrop-filter:initial) or (backdrop-filter:initial)){.art-video-player .art-backdrop-filter{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);background-color:rgba(0,0,0,.7)!important}}.art-video-player .art-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;cursor:pointer}.art-video-player .art-subtitle{display:none;position:absolute;z-index:20;bottom:10px;width:100%;padding:0 20px;text-align:center;color:#fff;font-size:20px;pointer-events:none;text-shadow:.5px .5px .5px rgba(0,0,0,.5)}.art-video-player .art-subtitle p{word-break:break-all;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;margin:5px 0}.art-video-player.art-subtitle-show .art-subtitle{display:block}.art-video-player.art-control-show .art-subtitle{bottom:40px}.art-video-player .art-danmuku{z-index:30}.art-video-player .art-danmuku,.art-video-player .art-layers{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.art-video-player .art-layers{display:none;z-index:40}.art-video-player .art-layers .art-layer{pointer-events:auto}.art-video-player.art-layer-show .art-layers{display:block}.art-video-player .art-mask{display:none;z-index:50;left:0;top:0;right:0;bottom:0;width:100%;height:100%;overflow:hidden;pointer-events:none}.art-video-player .art-mask,.art-video-player .art-mask .art-state{-webkit-box-align:center;-ms-flex-align:center;align-Line truncated
@@ -16,6 +16,8 @@ const component = {
    click: 'function|undefined',
    mounted: 'function|undefined',
    tooltip: 'string|undefined',
+    selector: 'array|undefined',
+    onSelect: 'string|undefined',
 };

 export default {
@@ -17,5 +17,5 @@
@import './mini.scss';
@import './autoSize.scss';
@import './flip.scss';
-@import './switcher.scss';
+@import './selector.scss';
@import './balloon.scss';
@@ -1,7 +1,7 @@
 .art-video-player {
-    .art-control-switcher {
+    .art-control-selector {
        position: relative;
-        .art-switcher-list {
+        .art-selector-list {
            display: none;
            position: absolute;
            bottom: 35px;
@@ -11,7 +11,7 @@
            color: #fff;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 3px;
-            .art-switcher-item {
+            .art-selector-item {
                height: 30px;
                line-height: 30px;
                overflow: hidden;
@@ -23,7 +23,7 @@
                }
            }
        }
-        &:hover .art-switcher-list {
+        &:hover .art-selector-list {
            display: block;
        }
    }
@@ -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);
+                        }
+                    }
+                });
+            }
        }
    }
 }
@@ -8,6 +8,8 @@ type Component = {
    mounted?: Function;
    tooltip?: string;
    position?: 'top' | 'left' | 'right';
+    selector?: string[];
+    onSelect?: Function,
 };

 export default class Artplayer {