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

调整组件嵌入规则

Browse Source
This commit is contained in:
Harvey Zack committed 2018-11-22 16:09:56 +08:00
1 parent 88533c1023
commit 8619fa1b8b
22 files changed
+553 -392
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/setting/flip.js
+34 -42
View File
@@ -1,46 +1,38 @@
import { append, inverseClass } from '../utils';
import { inverseClass } from '../utils';
export default class Flip {
constructor(option) {
this.option = option;
}
apply(art, $setting) {
const {
i18n,
events: { proxy },
player,
} = art;
this.$header = $setting.querySelector('.art-setting-header');
this.$body = $setting.querySelector('.art-setting-body');
this.$btns = append(
this.$body,
`
<div class="art-setting-btns">
<div class="art-setting-btn current">
<span data-flip="normal">${i18n.get('Normal')}</span>
export default function flip(settingOption) {
return art => {
const { i18n, player } = art;
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>
</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>
`,
);
proxy(this.$btns, 'click', event => {
const { target } = event;
const { flip } = target.dataset;
if (flip) {
player.flip(flip);
}
});
art.on('flipChange', flip => {
const $current = Array.from(this.$btns.querySelectorAll('span')).find(item => item.dataset.flip === flip);
inverseClass($current.parentElement, 'current');
});
}
click: event => {
const { target } = event;
const { flip } = target.dataset;
if (flip) {
player.flip(flip);
}
},
mounted: $setting => {
art.on('flipChange', flip => {
const $current = Array.from($setting.querySelectorAll('span')).find(
item => item.dataset.flip === flip,
);
inverseClass($current.parentElement, 'current');
});
},
};
};
}
packages/artplayer/src/setting/index.js
+34 -22
View File
@@ -1,5 +1,5 @@
import { setStyle, append, insertByIndex } from '../utils';
import Flip from './flip';
import flip from './flip';
let id = 0;
export default class Setting {
@@ -24,35 +24,47 @@ export default class Setting {
this.hide();
});
this.add(
new Flip({
name: 'flip',
title: 'Flip',
disable: false,
index: 10,
}),
);
this.add(flip({
disable: false,
title: 'Flip',
name: 'flip',
index: 10,
}));
}
add(setting, callback) {
const { option } = setting;
if (option && !option.disable) {
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 { refs, i18n } = this.art;
const name = option.name || `setting${id}`;
const title = option.title || name;
const name = setting.name || `setting${id}`;
const title = setting.title || name;
const $setting = document.createElement('div');
$setting.setAttribute('class', `art-setting art-setting-${name}`);
$setting.classList.value = `art-setting art-setting-${name}`;
append($setting, `<div class="art-setting-header">${i18n.get(title)}</div>`);
append($setting, '<div class="art-setting-body"></div>');
if (setting.apply) {
setting.apply(this.art, $setting);
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);
}
insertByIndex(refs.$settingBody, $setting, option.index || id);
this[name] = $setting;
if (callback) {
callback($setting);
callback($settingInner);
}
this[name] = $setting;
this.art.emit('setting:add', $setting);
}
}