mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 19:06:15 -08:00
update setting
This commit is contained in:
Harvey committed
1 parent
d540b7f32e
commit
2f51e3d546
5 files changed
+180
-229
No files matched your search
@@ -4442,84 +4442,25 @@ class Setting extends _componentDefault.default {
|
||||
this.events.push(event);
|
||||
return $item;
|
||||
}
|
||||
creatSelector(item) {
|
||||
creatItem(type, item) {
|
||||
const { icons , events: { proxy } , } = this.art;
|
||||
const hasChildren = item.selector && item.selector.length;
|
||||
const $item = document.createElement('div');
|
||||
_utils.addClass($item, 'art-setting-item');
|
||||
if (item.default) _utils.addClass($item, 'art-current');
|
||||
if (item.name) _utils.addClass($item, `art-setting-item-${item.name}`);
|
||||
const $left = _utils.append($item, '<div class="art-setting-item-left"></div>');
|
||||
const $right = _utils.append($item, '<div class="art-setting-item-right"></div>');
|
||||
const $icon = document.createElement('div');
|
||||
_utils.addClass($icon, 'art-setting-item-left-icon');
|
||||
_utils.append($icon, hasChildren ? item.icon || icons.config : icons.check);
|
||||
_utils.append($left, $icon);
|
||||
item._$icon = $icon;
|
||||
_utils.def(item, 'icon', {
|
||||
get () {
|
||||
return $icon.innerHTML;
|
||||
},
|
||||
set (value) {
|
||||
if (typeof value === 'string' || typeof value === 'number') $icon.innerHTML = value;
|
||||
}
|
||||
});
|
||||
const $html = document.createElement('div');
|
||||
_utils.addClass($html, 'art-setting-item-left-text');
|
||||
_utils.append($html, item.html || '');
|
||||
_utils.append($left, $html);
|
||||
item._$html = $html;
|
||||
_utils.def(item, 'html', {
|
||||
get () {
|
||||
return $html.innerHTML;
|
||||
},
|
||||
set (value) {
|
||||
if (typeof value === 'string' || typeof value === 'number') $html.innerHTML = value;
|
||||
}
|
||||
});
|
||||
if (hasChildren) {
|
||||
const $tooltip = document.createElement('div');
|
||||
_utils.addClass($tooltip, 'art-setting-item-right-tooltip');
|
||||
_utils.append($tooltip, item.tooltip || '');
|
||||
_utils.append($right, $tooltip);
|
||||
item._$tooltip = $tooltip;
|
||||
_utils.def(item, 'tooltip', {
|
||||
get () {
|
||||
return $tooltip.innerHTML;
|
||||
},
|
||||
set (value) {
|
||||
if (typeof value === 'string' || typeof value === 'number') $tooltip.innerHTML = value;
|
||||
}
|
||||
});
|
||||
const $arrow = document.createElement('div');
|
||||
_utils.addClass($arrow, 'art-setting-item-right-icon');
|
||||
_utils.append($arrow, icons.arrowRight);
|
||||
_utils.append($right, $arrow);
|
||||
switch(type){
|
||||
case 'switch':
|
||||
_utils.append($icon, item.icon || icons.config);
|
||||
break;
|
||||
case 'selector':
|
||||
_utils.append($icon, item.selector && item.selector.length ? item.icon || icons.config : icons.check);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
const event1 = proxy($item, 'click', async (event)=>{
|
||||
if (hasChildren) this.init(item.selector, item.width);
|
||||
else {
|
||||
_utils.inverseClass($item, 'art-current');
|
||||
if (item._parentList) this.init(item._parentList);
|
||||
if (item._parentItem && item._parentItem.onSelect) {
|
||||
const result = await item._parentItem.onSelect.call(this.art, item, $item, event);
|
||||
if (item._parentItem._$tooltip) {
|
||||
if (typeof result === 'string' || typeof result === 'number') item._parentItem._$tooltip.innerHTML = result;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
this.events.push(event1);
|
||||
return $item;
|
||||
}
|
||||
creatSwitch(item) {
|
||||
const { icons , events: { proxy } , } = this.art;
|
||||
const $item = document.createElement('div');
|
||||
_utils.addClass($item, 'art-setting-item');
|
||||
const $left = _utils.append($item, '<div class="art-setting-item-left"></div>');
|
||||
const $right = _utils.append($item, '<div class="art-setting-item-right"></div>');
|
||||
const $icon = document.createElement('div');
|
||||
_utils.addClass($icon, 'art-setting-item-left-icon');
|
||||
_utils.append($icon, item.icon || icons.config);
|
||||
_utils.append($left, $icon);
|
||||
item._$icon = $icon;
|
||||
_utils.def(item, 'icon', {
|
||||
@@ -4553,35 +4494,78 @@ class Setting extends _componentDefault.default {
|
||||
return $tooltip.innerHTML;
|
||||
},
|
||||
set (value) {
|
||||
if (typeof value === 'string' || typeof value === 'number') $tooltip.innerHTML = value;
|
||||
$tooltip.innerHTML = String(value || '');
|
||||
}
|
||||
});
|
||||
const $switch = document.createElement('div');
|
||||
_utils.addClass($switch, 'art-setting-item-right-icon');
|
||||
const $switchOn = _utils.append($switch, icons.switchOn);
|
||||
const $switchOff = _utils.append($switch, icons.switchOff);
|
||||
_utils.setStyle(item.switch ? $switchOff : $switchOn, 'display', 'none');
|
||||
_utils.append($right, $switch);
|
||||
item._$switch = item.switch;
|
||||
_utils.def(item, 'switch', {
|
||||
get () {
|
||||
return item._$switch;
|
||||
},
|
||||
set (value) {
|
||||
item._$switch = value;
|
||||
if (value) {
|
||||
_utils.setStyle($switchOff, 'display', 'none');
|
||||
_utils.setStyle($switchOn, 'display', null);
|
||||
} else {
|
||||
_utils.setStyle($switchOff, 'display', null);
|
||||
_utils.setStyle($switchOn, 'display', 'none');
|
||||
switch(type){
|
||||
case 'switch':
|
||||
{
|
||||
const $state = document.createElement('div');
|
||||
_utils.addClass($state, 'art-setting-item-right-icon');
|
||||
const $switchOn = _utils.append($state, icons.switchOn);
|
||||
const $switchOff = _utils.append($state, icons.switchOff);
|
||||
_utils.setStyle(item.switch ? $switchOff : $switchOn, 'display', 'none');
|
||||
_utils.append($right, $state);
|
||||
item._$switch = item.switch;
|
||||
_utils.def(item, 'switch', {
|
||||
get () {
|
||||
return item._$switch;
|
||||
},
|
||||
set (value) {
|
||||
item._$switch = value;
|
||||
if (value) {
|
||||
_utils.setStyle($switchOff, 'display', 'none');
|
||||
_utils.setStyle($switchOn, 'display', null);
|
||||
} else {
|
||||
_utils.setStyle($switchOff, 'display', null);
|
||||
_utils.setStyle($switchOn, 'display', 'none');
|
||||
}
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'selector':
|
||||
if (item.selector && item.selector.length) {
|
||||
const $state = document.createElement('div');
|
||||
_utils.addClass($state, 'art-setting-item-right-icon');
|
||||
_utils.append($state, icons.arrowRight);
|
||||
_utils.append($right, $state);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
const event1 = proxy($item, 'click', async (event)=>{
|
||||
switch(type){
|
||||
case 'switch':
|
||||
if (item.onSwitch) item.switch = await item.onSwitch.call(this.art, item, $item, event);
|
||||
break;
|
||||
case 'selector':
|
||||
if (item.selector && item.selector.length) this.init(item.selector, item.width);
|
||||
else {
|
||||
_utils.inverseClass($item, 'art-current');
|
||||
if (item._parentList) this.init(item._parentList);
|
||||
if (item._parentItem && item._parentItem.onSelect) {
|
||||
const result = await item._parentItem.onSelect.call(this.art, item, $item, event);
|
||||
if (item._parentItem._$tooltip) item._parentItem._$tooltip.innerHTML = String(result || '');
|
||||
}
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
const event2 = proxy($item, 'click', async (event)=>{
|
||||
if (item.onSwitch) item.switch = await item.onSwitch.call(this.art, item, $item, event);
|
||||
});
|
||||
this.events.push(event2);
|
||||
this.events.push(event1);
|
||||
switch(type){
|
||||
case 'switch':
|
||||
if (item.mounted) item.mounted.call(this.art, item, $item);
|
||||
break;
|
||||
case 'selector':
|
||||
if (item.default) _utils.addClass($item, 'art-current');
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return $item;
|
||||
}
|
||||
init(option, width) {
|
||||
@@ -4602,8 +4586,8 @@ class Setting extends _componentDefault.default {
|
||||
}
|
||||
for(let index = 0; index < option.length; index++){
|
||||
const item = option[index];
|
||||
if (_utils.has(item, 'switch')) _utils.append($panel, this.creatSwitch(item));
|
||||
else _utils.append($panel, this.creatSelector(item));
|
||||
if (_utils.has(item, 'switch')) _utils.append($panel, this.creatItem('switch', item));
|
||||
else _utils.append($panel, this.creatItem('selector', item));
|
||||
}
|
||||
_utils.append(this.$parent, $panel);
|
||||
this.cache.set(option, $panel);
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"mappings":"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 truncated
|
||||
{"mappings":"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 truncated
|
||||
@@ -117,6 +117,7 @@ var art = new Artplayer({
|
||||
| `icon` | `String`、`Element` | Icon of selector |
|
||||
| `switch` | `Boolean` | Button default state |
|
||||
| `onSwitch` | `Function` | Button toggle event |
|
||||
| `tooltip` | `String` | Tooltip text |
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
|
||||
@@ -119,6 +119,7 @@ var art = new Artplayer({
|
||||
| `icon` | `String`、`Element` | 元素的图标 |
|
||||
| `switch` | `Boolean` | 按钮默认状态 |
|
||||
| `onSwitch` | `Function` | 按钮切换事件 |
|
||||
| `tooltip` | `String` | 提示文本 |
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
|
||||
@@ -122,108 +122,7 @@ export default class Setting extends Component {
|
||||
return $item;
|
||||
}
|
||||
|
||||
creatSelector(item) {
|
||||
const {
|
||||
icons,
|
||||
events: { proxy },
|
||||
} = this.art;
|
||||
|
||||
const hasChildren = item.selector && item.selector.length;
|
||||
const $item = document.createElement('div');
|
||||
addClass($item, 'art-setting-item');
|
||||
|
||||
if (item.default) {
|
||||
addClass($item, 'art-current');
|
||||
}
|
||||
|
||||
const $left = append($item, '<div class="art-setting-item-left"></div>');
|
||||
const $right = append($item, '<div class="art-setting-item-right"></div>');
|
||||
|
||||
const $icon = document.createElement('div');
|
||||
addClass($icon, 'art-setting-item-left-icon');
|
||||
append($icon, hasChildren ? item.icon || icons.config : icons.check);
|
||||
append($left, $icon);
|
||||
item._$icon = $icon;
|
||||
|
||||
def(item, 'icon', {
|
||||
get() {
|
||||
return $icon.innerHTML;
|
||||
},
|
||||
set(value) {
|
||||
if (typeof value === 'string' || typeof value === 'number') {
|
||||
$icon.innerHTML = value;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const $html = document.createElement('div');
|
||||
addClass($html, 'art-setting-item-left-text');
|
||||
append($html, item.html || '');
|
||||
append($left, $html);
|
||||
item._$html = $html;
|
||||
|
||||
def(item, 'html', {
|
||||
get() {
|
||||
return $html.innerHTML;
|
||||
},
|
||||
set(value) {
|
||||
if (typeof value === 'string' || typeof value === 'number') {
|
||||
$html.innerHTML = value;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
if (hasChildren) {
|
||||
const $tooltip = document.createElement('div');
|
||||
addClass($tooltip, 'art-setting-item-right-tooltip');
|
||||
append($tooltip, item.tooltip || '');
|
||||
append($right, $tooltip);
|
||||
item._$tooltip = $tooltip;
|
||||
|
||||
def(item, 'tooltip', {
|
||||
get() {
|
||||
return $tooltip.innerHTML;
|
||||
},
|
||||
set(value) {
|
||||
if (typeof value === 'string' || typeof value === 'number') {
|
||||
$tooltip.innerHTML = value;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const $arrow = document.createElement('div');
|
||||
addClass($arrow, 'art-setting-item-right-icon');
|
||||
append($arrow, icons.arrowRight);
|
||||
append($right, $arrow);
|
||||
}
|
||||
|
||||
const event = proxy($item, 'click', async (event) => {
|
||||
if (hasChildren) {
|
||||
this.init(item.selector, item.width);
|
||||
} else {
|
||||
inverseClass($item, 'art-current');
|
||||
|
||||
if (item._parentList) {
|
||||
this.init(item._parentList);
|
||||
}
|
||||
|
||||
if (item._parentItem && item._parentItem.onSelect) {
|
||||
const result = await item._parentItem.onSelect.call(this.art, item, $item, event);
|
||||
if (item._parentItem._$tooltip) {
|
||||
if (typeof result === 'string' || typeof result === 'number') {
|
||||
item._parentItem._$tooltip.innerHTML = result;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.events.push(event);
|
||||
|
||||
return $item;
|
||||
}
|
||||
|
||||
creatSwitch(item) {
|
||||
creatItem(type, item) {
|
||||
const {
|
||||
icons,
|
||||
events: { proxy },
|
||||
@@ -232,14 +131,28 @@ export default class Setting extends Component {
|
||||
const $item = document.createElement('div');
|
||||
addClass($item, 'art-setting-item');
|
||||
|
||||
if (item.name) {
|
||||
addClass($item, `art-setting-item-${item.name}`);
|
||||
}
|
||||
|
||||
const $left = append($item, '<div class="art-setting-item-left"></div>');
|
||||
const $right = append($item, '<div class="art-setting-item-right"></div>');
|
||||
|
||||
const $icon = document.createElement('div');
|
||||
addClass($icon, 'art-setting-item-left-icon');
|
||||
append($icon, item.icon || icons.config);
|
||||
append($left, $icon);
|
||||
|
||||
switch (type) {
|
||||
case 'switch':
|
||||
append($icon, item.icon || icons.config);
|
||||
break;
|
||||
case 'selector':
|
||||
append($icon, item.selector && item.selector.length ? item.icon || icons.config : icons.check);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
append($left, $icon);
|
||||
item._$icon = $icon;
|
||||
|
||||
def(item, 'icon', {
|
||||
@@ -281,44 +194,96 @@ export default class Setting extends Component {
|
||||
return $tooltip.innerHTML;
|
||||
},
|
||||
set(value) {
|
||||
if (typeof value === 'string' || typeof value === 'number') {
|
||||
$tooltip.innerHTML = value;
|
||||
}
|
||||
$tooltip.innerHTML = String(value || '');
|
||||
},
|
||||
});
|
||||
|
||||
const $switch = document.createElement('div');
|
||||
addClass($switch, 'art-setting-item-right-icon');
|
||||
const $switchOn = append($switch, icons.switchOn);
|
||||
const $switchOff = append($switch, icons.switchOff);
|
||||
setStyle(item.switch ? $switchOff : $switchOn, 'display', 'none');
|
||||
append($right, $switch);
|
||||
item._$switch = item.switch;
|
||||
switch (type) {
|
||||
case 'switch': {
|
||||
const $state = document.createElement('div');
|
||||
addClass($state, 'art-setting-item-right-icon');
|
||||
const $switchOn = append($state, icons.switchOn);
|
||||
const $switchOff = append($state, icons.switchOff);
|
||||
setStyle(item.switch ? $switchOff : $switchOn, 'display', 'none');
|
||||
append($right, $state);
|
||||
item._$switch = item.switch;
|
||||
|
||||
def(item, 'switch', {
|
||||
get() {
|
||||
return item._$switch;
|
||||
},
|
||||
set(value) {
|
||||
item._$switch = value;
|
||||
if (value) {
|
||||
setStyle($switchOff, 'display', 'none');
|
||||
setStyle($switchOn, 'display', null);
|
||||
} else {
|
||||
setStyle($switchOff, 'display', null);
|
||||
setStyle($switchOn, 'display', 'none');
|
||||
def(item, 'switch', {
|
||||
get() {
|
||||
return item._$switch;
|
||||
},
|
||||
set(value) {
|
||||
item._$switch = value;
|
||||
if (value) {
|
||||
setStyle($switchOff, 'display', 'none');
|
||||
setStyle($switchOn, 'display', null);
|
||||
} else {
|
||||
setStyle($switchOff, 'display', null);
|
||||
setStyle($switchOn, 'display', 'none');
|
||||
}
|
||||
},
|
||||
});
|
||||
break;
|
||||
}
|
||||
case 'selector':
|
||||
if (item.selector && item.selector.length) {
|
||||
const $state = document.createElement('div');
|
||||
addClass($state, 'art-setting-item-right-icon');
|
||||
append($state, icons.arrowRight);
|
||||
append($right, $state);
|
||||
}
|
||||
},
|
||||
});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
const event = proxy($item, 'click', async (event) => {
|
||||
if (item.onSwitch) {
|
||||
item.switch = await item.onSwitch.call(this.art, item, $item, event);
|
||||
switch (type) {
|
||||
case 'switch':
|
||||
if (item.onSwitch) {
|
||||
item.switch = await item.onSwitch.call(this.art, item, $item, event);
|
||||
}
|
||||
break;
|
||||
case 'selector':
|
||||
if (item.selector && item.selector.length) {
|
||||
this.init(item.selector, item.width);
|
||||
} else {
|
||||
inverseClass($item, 'art-current');
|
||||
|
||||
if (item._parentList) {
|
||||
this.init(item._parentList);
|
||||
}
|
||||
|
||||
if (item._parentItem && item._parentItem.onSelect) {
|
||||
const result = await item._parentItem.onSelect.call(this.art, item, $item, event);
|
||||
if (item._parentItem._$tooltip) {
|
||||
item._parentItem._$tooltip.innerHTML = String(result || '');
|
||||
}
|
||||
}
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
this.events.push(event);
|
||||
|
||||
switch (type) {
|
||||
case 'switch':
|
||||
if (item.mounted) {
|
||||
item.mounted.call(this.art, item, $item);
|
||||
}
|
||||
break;
|
||||
case 'selector':
|
||||
if (item.default) {
|
||||
addClass($item, 'art-current');
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
return $item;
|
||||
}
|
||||
|
||||
@@ -344,9 +309,9 @@ export default class Setting extends Component {
|
||||
for (let index = 0; index < option.length; index++) {
|
||||
const item = option[index];
|
||||
if (has(item, 'switch')) {
|
||||
append($panel, this.creatSwitch(item));
|
||||
append($panel, this.creatItem('switch', item));
|
||||
} else {
|
||||
append($panel, this.creatSelector(item));
|
||||
append($panel, this.creatItem('selector', item));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user