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

update component.js

Browse Source
This commit is contained in:
Harvey Zack committed 2019-06-25 16:34:11 +08:00
1 parent c5355ed6d5
commit d3d1c83eb8
4 files changed
+142 -148
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/utils/component.js
+68 -71
View File
@@ -2,78 +2,75 @@ import { append, setStyles, setStyle, remove, errorHandle, hasOwnProperty } from
export default function component(art, parent, target, getOption, callback, title) {
const option = typeof getOption === 'function' ? getOption(art) : getOption;
if (!option.disable) {
const componentID = parent.id;
const name = option.name || `${title}${componentID}`;
errorHandle(
!hasOwnProperty(parent, name),
`Cannot create a component that already has the same name: ${title} -> ${name}`,
);
const $element = document.createElement('div');
$element.classList.value = `art-${title} art-${title}-${name}`;
if (option.disable) return null;
const componentID = parent.id;
const name = option.name || `${title}${componentID}`;
errorHandle(
!hasOwnProperty(parent, name),
`Cannot create a component that already has the same name: ${title} -> ${name}`,
);
const $element = document.createElement('div');
$element.classList.value = `art-${title} art-${title}-${name}`;
if (option.html) {
append($element, option.html);
}
if (option.style) {
setStyles($element, option.style);
}
const childs = Array.from(target.children);
$element.dataset.index = option.index || componentID;
const nextChild = childs.find(item => Number(item.dataset.index) >= Number($element.dataset.index));
if (nextChild) {
nextChild.insertAdjacentElement('beforebegin', $element);
} else {
append(target, $element);
}
if (option.click) {
art.events.proxy($element, 'click', event => {
event.preventDefault();
option.click.call(parent, event, art);
art.emit(`${title}:click`, $element);
});
}
if (option.mounted) {
option.mounted($element, parent, art);
}
if (callback) {
callback($element, parent, art);
}
Object.defineProperty(parent, name, {
value: {
get id() {
return componentID;
},
get $ref() {
return $element;
},
set show(value) {
if (value) {
setStyle($element, 'display', 'block');
art.emit(`${title}:show`, $element);
} else {
setStyle($element, 'display', 'none');
art.emit(`${title}:hide`, $element);
}
},
set remove(value) {
if (value) {
remove($element);
art.emit(`${title}:remove`, $element);
}
},
},
});
art.emit(`${title}:add`, option);
return parent[name];
if (option.html) {
append($element, option.html);
}
return null;
if (option.style) {
setStyles($element, option.style);
}
const childs = Array.from(target.children);
$element.dataset.index = option.index || componentID;
const nextChild = childs.find(item => Number(item.dataset.index) >= Number($element.dataset.index));
if (nextChild) {
nextChild.insertAdjacentElement('beforebegin', $element);
} else {
append(target, $element);
}
if (option.click) {
art.events.proxy($element, 'click', event => {
event.preventDefault();
option.click.call(art, parent, event);
art.emit(`${title}:click`, $element);
});
}
if (option.mounted) {
option.mounted($element, parent, art);
}
if (callback) {
callback($element, parent, art);
}
Object.defineProperty(parent, name, {
value: {
get id() {
return componentID;
},
get $ref() {
return $element;
},
set show(value) {
if (value) {
setStyle($element, 'display', 'block');
art.emit(`${title}:show`, $element);
} else {
setStyle($element, 'display', 'none');
art.emit(`${title}:hide`, $element);
}
},
set remove(value) {
if (value) {
remove($element);
art.emit(`${title}:remove`, $element);
}
},
},
});
art.emit(`${title}:add`, option);
return parent[name];
}