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

创建组件父类

Browse Source
This commit is contained in:
Harvey committed 2019-11-22 15:35:21 +08:00
1 parent 0c1c1273a6
commit 1d859e2049
20 files changed
+770 -921
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/contextmenu/index.js
+82 -101
View File
@@ -1,4 +1,5 @@
import { setStyle, addClass, removeClass } from '../utils';
import { setStyle } from '../utils';
import Component from '../utils/components';
import component from '../utils/component';
import playbackRate from './playbackRate';
import aspectRatio from './aspectRatio';
@@ -6,13 +7,89 @@ import info from './info';
import version from './version';
import close from './close';
export default class Contextmenu {
export default class Contextmenu extends Component {
constructor(art) {
this.id = 0;
this.art = art;
super(art);
art.on('ready', () => {
this.init();
const {
option,
template: { $player, $contextmenu },
events: { proxy },
} = art;
this.add(
playbackRate({
disable: !option.playbackRate,
name: 'playbackRate',
index: 10,
}),
);
this.add(
aspectRatio({
disable: !option.aspectRatio,
name: 'aspectRatio',
index: 20,
}),
);
this.add(
info({
disable: false,
name: 'info',
index: 30,
}),
);
this.add(
version({
disable: false,
name: 'version',
index: 40,
}),
);
this.add(
close({
disable: false,
name: 'close',
index: 50,
}),
);
option.contextmenu.forEach(item => {
this.add(item);
});
proxy($player, 'contextmenu', event => {
event.preventDefault();
this.show = true;
const mouseX = event.clientX;
const mouseY = event.clientY;
const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = $player.getBoundingClientRect();
const { height: mHeight, width: mWidth } = $contextmenu.getBoundingClientRect();
let menuLeft = mouseX - cLeft;
let menuTop = mouseY - cTop;
if (mouseX + mWidth > cLeft + cWidth) {
menuLeft = cWidth - mWidth;
}
if (mouseY + mHeight > cTop + cHeight) {
menuTop = cHeight - mHeight;
}
setStyle($contextmenu, 'left', `${menuLeft}px`);
setStyle($contextmenu, 'top', `${menuTop}px`);
});
proxy($player, 'click', event => {
if (!event.composedPath().includes($contextmenu)) {
this.show = false;
}
});
});
art.on('blur', () => {
@@ -20,105 +97,9 @@ export default class Contextmenu {
});
}
init() {
const {
option,
template: { $player, $contextmenu },
events: { proxy },
} = this.art;
this.add(
playbackRate({
disable: !option.playbackRate,
name: 'playbackRate',
index: 10,
}),
);
this.add(
aspectRatio({
disable: !option.aspectRatio,
name: 'aspectRatio',
index: 20,
}),
);
this.add(
info({
disable: false,
name: 'info',
index: 30,
}),
);
this.add(
version({
disable: false,
name: 'version',
index: 40,
}),
);
this.add(
close({
disable: false,
name: 'close',
index: 50,
}),
);
option.contextmenu.forEach(item => {
this.add(item);
});
proxy($player, 'contextmenu', event => {
event.preventDefault();
this.show = true;
this.setPos(event);
});
proxy($player, 'click', event => {
if (!event.composedPath().includes($contextmenu)) {
this.show = false;
}
});
}
add(item, callback) {
this.id += 1;
const { $contextmenu } = this.art.template;
return component(this.art, this, $contextmenu, item, callback, 'contextmenu');
}
setPos(event) {
const { $player, $contextmenu } = this.art.template;
const mouseX = event.clientX;
const mouseY = event.clientY;
const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = $player.getBoundingClientRect();
const { height: mHeight, width: mWidth } = $contextmenu.getBoundingClientRect();
let menuLeft = mouseX - cLeft;
let menuTop = mouseY - cTop;
if (mouseX + mWidth > cLeft + cWidth) {
menuLeft = cWidth - mWidth;
}
if (mouseY + mHeight > cTop + cHeight) {
menuTop = cHeight - mHeight;
}
setStyle($contextmenu, 'left', `${menuLeft}px`);
setStyle($contextmenu, 'top', `${menuTop}px`);
}
set show(value) {
const { $player } = this.art.template;
if (value) {
addClass($player, 'art-contextmenu-show');
this.art.emit('contextmenu:show');
} else {
removeClass($player, 'art-contextmenu-show');
this.art.emit('contextmenu:hide');
}
}
}