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-21 19:45:44 +08:00
1 parent 0454f785be
commit 203ad0d3a0
75 files changed
+3120 -2904
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/setting/flip.js
+39 -34
View File
@@ -1,41 +1,46 @@
import { append, inverseClass } from '../utils';
export default class Flip {
constructor(option) {
this.option = option;
}
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>
</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>
`);
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>
</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);
}
});
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');
});
}
art.on('flipChange', flip => {
const $current = Array.from(this.$btns.querySelectorAll('span')).find(item => item.dataset.flip === flip);
inverseClass($current.parentElement, 'current');
});
}
}
packages/artplayer/src/setting/index.js
+72 -59
View File
@@ -3,70 +3,83 @@ import Flip from './flip';
let id = 0;
export default class Setting {
constructor(art) {
id = 0;
this.art = art;
this.state = false;
if (art.option.setting) {
this.art.on('firstCanplay', () => {
this.init();
});
constructor(art) {
id = 0;
this.art = art;
this.state = false;
if (art.option.setting) {
this.art.on('firstCanplay', () => {
this.init();
});
}
}
}
init() {
const { refs: { $settingClose }, events: { proxy } } = this.art;
init() {
const {
refs: { $settingClose },
events: { proxy },
} = this.art;
proxy($settingClose, 'click', () => {
this.hide();
});
proxy($settingClose, 'click', () => {
this.hide();
});
this.add(new Flip({
name: 'flip',
title: 'Flip',
disable: false,
index: 10
}));
}
add(setting, callback) {
const { option } = setting;
if (option && !option.disable) {
id++;
const { refs, i18n } = this.art;
const name = option.name || `setting${id}`;
const title = option.title || name;
const $setting = document.createElement('div');
$setting.setAttribute('class', `art-setting art-setting-${name}`);
append($setting, `<div class="art-setting-header">${i18n.get(title)}</div>`);
append($setting, '<div class="art-setting-body"></div>');
setting.apply && setting.apply(this.art, $setting);
insertByIndex(refs.$settingBody, $setting, option.index || id);
this[name] = $setting;
callback && callback($setting);
this.art.emit('setting:add', $setting);
this.add(
new Flip({
name: 'flip',
title: 'Flip',
disable: false,
index: 10,
}),
);
}
}
show() {
const { refs: { $setting } } = this.art;
setStyle($setting, 'display', 'flex');
this.state = true;
this.art.emit('setting:show', $setting);
}
hide() {
const { refs: { $setting } } = this.art;
setStyle($setting, 'display', 'none');
this.state = false;
this.art.emit('setting:hide', $setting);
}
toggle() {
if (this.state) {
this.hide();
} else {
this.show();
add(setting, callback) {
const { option } = setting;
if (option && !option.disable) {
id += 1;
const { refs, i18n } = this.art;
const name = option.name || `setting${id}`;
const title = option.title || name;
const $setting = document.createElement('div');
$setting.setAttribute('class', `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);
}
insertByIndex(refs.$settingBody, $setting, option.index || id);
this[name] = $setting;
if (callback) {
callback($setting);
}
this.art.emit('setting:add', $setting);
}
}
show() {
const {
refs: { $setting },
} = this.art;
setStyle($setting, 'display', 'flex');
this.state = true;
this.art.emit('setting:show', $setting);
}
hide() {
const {
refs: { $setting },
} = this.art;
setStyle($setting, 'display', 'none');
this.state = false;
this.art.emit('setting:hide', $setting);
}
toggle() {
if (this.state) {
this.hide();
} else {
this.show();
}
}
}
}