添加样式小工具

src/contextmenu.js

@@ -1,4 +1,4 @@
-import { append, setStyles } from './utils';
+import { append, setStyles, setStyle } from './utils';
 
 let id = 0;
 export default class Contextmenu {
@@ -124,14 +124,14 @@ export default class Contextmenu {
       menuTop = cHeight - mHeight;
     }
 
-    refs.$contextmenu.style.left = `${menuLeft}px`;
-    refs.$contextmenu.style.top = `${menuTop}px`;
+    setStyle(refs.$contextmenu, 'left', `${menuLeft}px`);
+    setStyle(refs.$contextmenu, 'top', `${menuTop}px`);
   }
 
   hide() {
     const { refs: { $contextmenu } } = this.art;
     if ($contextmenu) {
-      $contextmenu.style.display = 'none';
+      setStyle($contextmenu, 'display', 'none');
       this.art.emit('contextmenu:hide', $contextmenu);
     }
   }
@@ -139,7 +139,7 @@ export default class Contextmenu {
   show() {
     const { refs: { $contextmenu } } = this.art;
     if ($contextmenu) {
-      $contextmenu.style.display = 'block';
+      setStyle($contextmenu, 'display', 'block');
       this.art.emit('contextmenu:show', $contextmenu);
     }
   }

src/info.js

@@ -1,4 +1,4 @@
-import { append } from './utils';
+import { append, setStyle } from './utils';
 
 export default class Info {
   constructor(art) {
@@ -15,7 +15,7 @@ export default class Info {
 
   show() {
     const { $info, $infoPanel } = this.art.refs;
-    $info.style.display = 'block';
+    setStyle($info, 'display', 'block');
     if (!$infoPanel.innerHTML) {
       append($infoPanel, this.creatInfo());
       this.getHeader();
@@ -125,7 +125,7 @@ export default class Info {
 
   hide() {
     const { $info } = this.art.refs;
-    $info.style.display = 'none';
+    setStyle($info, 'display', 'none');
     clearTimeout(this.timer);
     this.art.emit('info:hide', $info);
   }

src/layers.js

@@ -1,4 +1,4 @@
-import { append, setStyles } from './utils';
+import { append, setStyles, setStyle } from './utils';
 
 let id = 0;
 export default class Layers {
@@ -25,7 +25,7 @@ export default class Layers {
     const $layer = document.createElement('div');
     $layer.setAttribute('data-art-layer-id', id);
     $layer.setAttribute('class', `art-layer art-layer-${option.name || id}`);
-    $layer.style.zIndex = option.index || id;
+    setStyle($layer, 'z-index', option.index || id);
     append($layer, option.html);
     setStyles($layer, option.style || {});
     refs.$layers.appendChild($layer);
@@ -35,13 +35,13 @@ export default class Layers {
 
   show() {
     const { $layers } = this.art.refs;
-    $layers.style.display = 'block';
+    setStyle($layers, 'display', 'block');
     this.art.emit('layers:show', $layers);
   }
 
   hide() {
     const { $layers } = this.art.refs;
-    $layers.style.display = 'none';
+    setStyle($layers, 'display', 'none');
     this.art.emit('layers:hide', $layers);
   }
 }

src/loading.js

@@ -1,5 +1,5 @@
 import icons from './icons';
-import { append } from './utils';
+import { append, setStyle } from './utils';
 
 export default class Loading {
   constructor(art) {
@@ -14,13 +14,13 @@ export default class Loading {
 
   hide() {
     const { $loading } = this.art.refs;
-    $loading.style.display = 'none';
+    setStyle($loading, 'display', 'none');
     this.art.emit('loading:hide', $loading);
   }
 
   show() {
     const { $loading } = this.art.refs;
-    $loading.style.display = 'flex';
+    setStyle($loading, 'display', 'flex');
     this.art.emit('loading:show', $loading);
   }
 }

src/mask.js

@@ -1,5 +1,5 @@
 import icons from './icons';
-import { append } from './utils';
+import { append, setStyle } from './utils';
 
 export default class Mask {
   constructor(art) {
@@ -24,13 +24,13 @@ export default class Mask {
 
   show() {
     const { $mask } = this.art.refs;
-    $mask.style.display = 'block';
+    setStyle($mask, 'display', 'block');
     this.art.emit('mask:show', $mask);
   }
 
   hide() {
     const { $mask } = this.art.refs;
-    $mask.style.display = 'none';
+    setStyle($mask, 'display', 'none');
     this.art.emit('mask:show', $mask);
   }
 }

src/notice.js

@@ -1,3 +1,5 @@
+import { setStyle } from './utils';
+
 export default class Notice {
   constructor(art) {
     this.art = art;
@@ -6,7 +8,7 @@ export default class Notice {
 
   show(msg, autoHide = true, time = 1000) {
     const { $notice, $noticeInner } = this.art.refs;
-    $notice.style.display = 'block';
+    setStyle($notice, 'display', 'block');
     $noticeInner.innerHTML = msg instanceof Error ? msg.message.trim() : msg;
     if (autoHide) {
       clearTimeout(this.timer);
@@ -19,7 +21,7 @@ export default class Notice {
 
   hide() {
     const { $notice } = this.art.refs;
-    $notice.style.display = 'none';
+    setStyle($notice, 'display', 'none');
     this.art.emit('notice:hide', $notice);
   }
 }

src/player.js

@@ -1,4 +1,4 @@
-import { clamp, secondToTime, setStorage, sleep } from './utils';
+import { clamp, secondToTime, setStorage, sleep, setStyle } from './utils';
 import config from './config';
 
 export default class Player {
@@ -178,13 +178,13 @@ export default class Player {
     const { refs: { $video, $player }, i18n, notice } = this.art;
     if (ratio.length === 2) {
       const rate = Number(ratio[0]) / Number(ratio[1]);
-      $video.style.width = `${100 / rate}%`;
-      $video.style.height = '100%';
-      $video.style.padding = `0 ${($player.clientWidth - $player.clientWidth / rate) / 2}px`;
+      setStyle($video, 'width', `${100 / rate}%`);
+      setStyle($video, 'height', '100%');
+      setStyle($video, 'padding', `0 ${($player.clientWidth - $player.clientWidth / rate) / 2}px`);
     } else {
-      $video.style.width = null;
-      $video.style.height = null;
-      $video.style.padding = null;
+      setStyle($video, 'width', null);
+      setStyle($video, 'height', null);
+      setStyle($video, 'padding', null);
     }
 
     const ratioName = ratio.length === 2 ? `${ratio[0]}:${ratio[1]}` : ratio[0];

src/subtitle.js

@@ -1,4 +1,4 @@
-import { errorHandle, getExt, setStyles } from './utils';
+import { errorHandle, getExt, setStyles, setStyle } from './utils';
 
 export default class Subtitle {
   constructor(art) {
@@ -91,13 +91,13 @@ export default class Subtitle {
 
   show() {
     const { $subtitle } = this.art.refs;
-    $subtitle.style.display = 'block';
+    setStyle($subtitle, 'display', 'block');
     this.art.emit('subtitle:show', $subtitle);
   }
 
   hide() {
     const { $subtitle } = this.art.refs;
-    $subtitle.style.display = 'none';
+    setStyle($subtitle, 'display', 'none');
     this.art.emit('subtitle:hide', $subtitle);
   }