mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-24 23:03:36 -08:00
分离组件函数
This commit is contained in:
Harvey Zack committed
1 parent
c882814fb0
commit
cce1eda7eb
7 files changed
+162
-405
No files matched your search
@@ -1,14 +1,14 @@
|
||||
import { append, insertByIndex, setStyle } from '../utils';
|
||||
import { setStyle } from '../utils';
|
||||
import componentMethod from '../utils/componentMethod';
|
||||
import playbackRate from './playbackRate';
|
||||
import aspectRatio from './aspectRatio';
|
||||
import info from './info';
|
||||
import version from './version';
|
||||
import close from './close';
|
||||
|
||||
let id = 0;
|
||||
export default class Contextmenu {
|
||||
constructor(art) {
|
||||
id = 0;
|
||||
this.id = 0;
|
||||
this.art = art;
|
||||
this.art.on('firstCanplay', () => {
|
||||
this.init();
|
||||
@@ -70,43 +70,12 @@ export default class Contextmenu {
|
||||
}
|
||||
|
||||
add(item, callback) {
|
||||
const menu = typeof item === 'function' ? item(this.art) : item;
|
||||
if (!menu.disable) {
|
||||
const {
|
||||
refs: { $contextmenu },
|
||||
events: { proxy },
|
||||
} = this.art;
|
||||
id += 1;
|
||||
const name = menu.name || `contextmenu${id}`;
|
||||
const $menu = document.createElement('div');
|
||||
$menu.classList.value = `art-contextmenu art-contextmenu-${name}`;
|
||||
if (menu.html) {
|
||||
append($menu, menu.html);
|
||||
}
|
||||
if (menu.click) {
|
||||
proxy($menu, 'click', event => {
|
||||
event.preventDefault();
|
||||
menu.click.call(this, event);
|
||||
this.art.emit('contextmenu:click', $menu);
|
||||
});
|
||||
}
|
||||
insertByIndex($contextmenu, $menu, menu.index || id);
|
||||
if (menu.mounted) {
|
||||
menu.mounted($menu);
|
||||
}
|
||||
if (callback) {
|
||||
callback($menu);
|
||||
}
|
||||
this.commonMethod(menu, $menu);
|
||||
this[name] = menu;
|
||||
this.art.emit('contextmenu:add', menu);
|
||||
}
|
||||
const { $contextmenu } = this.art.refs;
|
||||
componentMethod(this.art, this, $contextmenu, item, callback, 'contextmenu');
|
||||
}
|
||||
|
||||
setPos(event) {
|
||||
const {
|
||||
refs: { $player, $contextmenu },
|
||||
} = this.art;
|
||||
const { $player, $contextmenu } = this.art.refs;
|
||||
const mouseX = event.clientX;
|
||||
const mouseY = event.clientY;
|
||||
const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = $player.getBoundingClientRect();
|
||||
@@ -126,38 +95,14 @@ export default class Contextmenu {
|
||||
setStyle($contextmenu, 'top', `${menuTop}px`);
|
||||
}
|
||||
|
||||
commonMethod(menu, $menu) {
|
||||
Object.defineProperty(menu, '$ref', {
|
||||
get: () => $menu,
|
||||
});
|
||||
|
||||
Object.defineProperty(menu, 'hide', {
|
||||
value: () => {
|
||||
setStyle($menu, 'display', 'none');
|
||||
this.art.emit('menu:hide', $menu);
|
||||
},
|
||||
});
|
||||
|
||||
Object.defineProperty(menu, 'show', {
|
||||
value: () => {
|
||||
setStyle($menu, 'display', 'block');
|
||||
this.art.emit('menu:show', $menu);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
hide() {
|
||||
const {
|
||||
refs: { $contextmenu },
|
||||
} = this.art;
|
||||
const { $contextmenu } = this.art.refs;
|
||||
setStyle($contextmenu, 'display', 'none');
|
||||
this.art.emit('contextmenu:hide', $contextmenu);
|
||||
}
|
||||
|
||||
show() {
|
||||
const {
|
||||
refs: { $contextmenu },
|
||||
} = this.art;
|
||||
const { $contextmenu } = this.art.refs;
|
||||
setStyle($contextmenu, 'display', 'block');
|
||||
this.art.emit('contextmenu:show', $contextmenu);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { append, setStyles, setStyle, insertByIndex } from './utils';
|
||||
import { setStyle } from './utils';
|
||||
import componentMethod from './utils/componentMethod';
|
||||
|
||||
let id = 0;
|
||||
export default class Layers {
|
||||
constructor(art) {
|
||||
id = 0;
|
||||
this.id = 0;
|
||||
this.art = art;
|
||||
this.add = this.add.bind(this);
|
||||
this.art.option.layers.forEach(item => {
|
||||
@@ -12,58 +12,8 @@ export default class Layers {
|
||||
}
|
||||
|
||||
add(item, callback) {
|
||||
const layer = typeof item === 'function' ? item(this.art) : item;
|
||||
if (!layer.disable) {
|
||||
const {
|
||||
refs: { $layers },
|
||||
events: { proxy },
|
||||
} = this.art;
|
||||
id += 1;
|
||||
const name = layer.name || `layer${id}`;
|
||||
const $layer = document.createElement('div');
|
||||
$layer.classList.value = `art-layer art-layer-${name}`;
|
||||
setStyles($layer, layer.style || {});
|
||||
if (layer.html) {
|
||||
append($layer, layer.html);
|
||||
}
|
||||
if (layer.click) {
|
||||
proxy($layer, 'click', event => {
|
||||
event.preventDefault();
|
||||
layer.click.call(this, event);
|
||||
this.art.emit('layers:click', $layer);
|
||||
});
|
||||
}
|
||||
insertByIndex($layers, $layer, layer.index || id);
|
||||
if (item.mounted) {
|
||||
item.mounted($layer);
|
||||
}
|
||||
if (callback) {
|
||||
callback($layer);
|
||||
}
|
||||
this.commonMethod(layer, $layer);
|
||||
this[name] = layer;
|
||||
this.art.emit('layers:add', layer);
|
||||
}
|
||||
}
|
||||
|
||||
commonMethod(layer, $layer) {
|
||||
Object.defineProperty(layer, '$ref', {
|
||||
get: () => $layer,
|
||||
});
|
||||
|
||||
Object.defineProperty(layer, 'hide', {
|
||||
value: () => {
|
||||
setStyle($layer, 'display', 'none');
|
||||
this.art.emit('layer:hide', $layer);
|
||||
},
|
||||
});
|
||||
|
||||
Object.defineProperty(layer, 'show', {
|
||||
value: () => {
|
||||
setStyle($layer, 'display', 'block');
|
||||
this.art.emit('layer:show', $layer);
|
||||
},
|
||||
});
|
||||
const { $layers } = this.art.refs;
|
||||
componentMethod(this.art, this, $layers, item, callback, 'layer');
|
||||
}
|
||||
|
||||
show() {
|
||||
|
||||
@@ -6,15 +6,18 @@ export default function flip(settingOption) {
|
||||
return {
|
||||
...settingOption,
|
||||
html: `
|
||||
<div class="art-setting-btns">
|
||||
<div class="art-setting-btn current">
|
||||
<span data-flip="normal">${i18n.get('Normal')}</span>
|
||||
</div>
|
||||
<div class="art-setting-btn">
|
||||
<span data-flip="horizontal">${i18n.get('Horizontal')}</span>
|
||||
</div>
|
||||
<div class="art-setting-btn">
|
||||
<span data-flip="vertical">${i18n.get('Vertical')}</span>
|
||||
<div class="art-setting-header">${i18n.get(settingOption.title)}</div>
|
||||
<div class="art-setting-body">
|
||||
<div class="art-setting-btns">
|
||||
<div class="art-setting-btn current">
|
||||
<span data-flip="normal">${i18n.get('Normal')}</span>
|
||||
</div>
|
||||
<div class="art-setting-btn">
|
||||
<span data-flip="horizontal">${i18n.get('Horizontal')}</span>
|
||||
</div>
|
||||
<div class="art-setting-btn">
|
||||
<span data-flip="vertical">${i18n.get('Vertical')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { setStyle, append, insertByIndex } from '../utils';
|
||||
import { setStyle } from '../utils';
|
||||
import componentMethod from '../utils/componentMethod';
|
||||
import flip from './flip';
|
||||
|
||||
let id = 0;
|
||||
export default class Setting {
|
||||
constructor(art) {
|
||||
id = 0;
|
||||
this.id = 0;
|
||||
this.art = art;
|
||||
this.state = false;
|
||||
if (art.option.setting) {
|
||||
@@ -33,76 +33,19 @@ export default class Setting {
|
||||
}
|
||||
|
||||
add(item, callback) {
|
||||
const setting = typeof item === 'function' ? item(this.art) : item;
|
||||
if (!setting.disable) {
|
||||
const {
|
||||
i18n,
|
||||
refs: { $settingBody },
|
||||
events: { proxy },
|
||||
} = this.art;
|
||||
id += 1;
|
||||
const name = setting.name || `setting${id}`;
|
||||
const title = setting.title || name;
|
||||
const $setting = document.createElement('div');
|
||||
$setting.classList.value = `art-setting art-setting-${name}`;
|
||||
append($setting, `<div class="art-setting-header">${i18n.get(title)}</div>`);
|
||||
const $settingInner = append($setting, '<div class="art-setting-body"></div>');
|
||||
if (setting.html) {
|
||||
append($settingInner , setting.html);
|
||||
}
|
||||
if ($settingInner.click) {
|
||||
proxy($settingInner, 'click', event => {
|
||||
event.preventDefault();
|
||||
setting.click.call(this, event);
|
||||
this.art.emit('setting:click', $setting);
|
||||
});
|
||||
}
|
||||
insertByIndex($settingBody, $setting, setting.index || id);
|
||||
if (setting.mounted) {
|
||||
setting.mounted($settingInner);
|
||||
}
|
||||
if (callback) {
|
||||
callback($settingInner);
|
||||
}
|
||||
this.commonMethod(setting, $setting);
|
||||
this[name] = setting;
|
||||
this.art.emit('setting:add', setting);
|
||||
}
|
||||
}
|
||||
|
||||
commonMethod(setting, $setting) {
|
||||
Object.defineProperty(setting, '$ref', {
|
||||
get: () => $setting,
|
||||
});
|
||||
|
||||
Object.defineProperty(setting, 'hide', {
|
||||
value: () => {
|
||||
setStyle($setting, 'display', 'none');
|
||||
this.art.emit('setting:hide', $setting);
|
||||
},
|
||||
});
|
||||
|
||||
Object.defineProperty(setting, 'show', {
|
||||
value: () => {
|
||||
setStyle($setting, 'display', 'block');
|
||||
this.art.emit('setting:show', $setting);
|
||||
},
|
||||
});
|
||||
const { $settingBody } = this.art.refs;
|
||||
componentMethod(this.art, this, $settingBody, item, callback, 'setting');
|
||||
}
|
||||
|
||||
show() {
|
||||
const {
|
||||
refs: { $setting },
|
||||
} = this.art;
|
||||
const { $setting } = this.art.refs;
|
||||
setStyle($setting, 'display', 'flex');
|
||||
this.state = true;
|
||||
this.art.emit('setting:show', $setting);
|
||||
}
|
||||
|
||||
hide() {
|
||||
const {
|
||||
refs: { $setting },
|
||||
} = this.art;
|
||||
const { $setting } = this.art.refs;
|
||||
setStyle($setting, 'display', 'none');
|
||||
this.state = false;
|
||||
this.art.emit('setting:hide', $setting);
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
import { append, insertByIndex, setStyles, setStyle } from './index';
|
||||
|
||||
function commonMethod(art, option, $element, title) {
|
||||
Object.defineProperty(option, '$ref', {
|
||||
get: () => $element,
|
||||
});
|
||||
|
||||
Object.defineProperty(option, 'hide', {
|
||||
value: () => {
|
||||
setStyle($element, 'display', 'none');
|
||||
art.emit(`${title}:hide`, $element);
|
||||
},
|
||||
});
|
||||
|
||||
Object.defineProperty(option, 'show', {
|
||||
value: () => {
|
||||
setStyle($element, 'display', 'block');
|
||||
art.emit(`${title}:show`, $element);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export default function componentMethod(art, parent, target, component, callback, title) {
|
||||
const { proxy } = art.events;
|
||||
const option = typeof component === 'function' ? component(art) : component;
|
||||
if (!option.disable) {
|
||||
parent.id += 1;
|
||||
const name = option.name || `${title}${parent.id}`;
|
||||
const $element = document.createElement('div');
|
||||
$element.classList.value = `art-${title} art-${title}-${name}`;
|
||||
insertByIndex(target, $element, option.index || parent.id);
|
||||
if (option.html) {
|
||||
append($element, option.html);
|
||||
}
|
||||
if (option.style) {
|
||||
setStyles($element, option.style);
|
||||
}
|
||||
if (option.click) {
|
||||
proxy($element, 'click', event => {
|
||||
event.preventDefault();
|
||||
option.click.call(parent, event);
|
||||
art.emit(`${title}:click`, $element);
|
||||
});
|
||||
}
|
||||
if (option.mounted) {
|
||||
option.mounted($element);
|
||||
}
|
||||
if (callback) {
|
||||
callback($element);
|
||||
}
|
||||
commonMethod(art, option, $element, title);
|
||||
parent[name] = option;
|
||||
art.emit(`${title}:add`, option);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user