x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-24 06:31:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

分离组件函数

Browse Source
This commit is contained in:
Harvey Zack committed 2018-11-22 17:14:30 +08:00
1 parent c882814fb0
commit cce1eda7eb
7 files changed
+162 -405
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/setting/flip.js
+12 -9
View File
@@ -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>
`,
packages/artplayer/src/setting/index.js
+7 -64
View File
@@ -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);