Refactor OpenStyleManager

src/commands/view/OpenStyleManager.ts

@@ -5,59 +5,61 @@ export default {
   run(editor, sender) {
     this.sender = sender;
 
-    if (!this.$cn) {
+    if (!this.$cnt) {
       const config = editor.getConfig();
-      const panels = editor.Panels;
+      const { Panels, DeviceManager, SelectorManager, StyleManager } = editor;
       const trgEvCnt = 'change:appendContent';
-      this.$cn = $('<div></div>');
+      const $cnt = $('<div></div>');
-      this.$cn2 = $('<div></div>');
+      const $cntInner = $('<div></div>');
-      this.$cn.append(this.$cn2);
+      const $cntSlm = $('<div></div>');
+      const $cntSm = $('<div></div>');
+      this.$cnt = $cnt;
+      this.$cntInner = $cntInner;
+      $cntInner.append($cntSlm);
+      $cntInner.append($cntSm);
+      $cnt.append($cntInner);
 
       // Device Manager
-      const dvm = editor.DeviceManager;
+      if (DeviceManager && config.showDevices) {
-      if (dvm && config.showDevices) {
         // @ts-ignore
-        const devicePanel = panels.addPanel({ id: 'devices-c' });
+        const devicePanel = Panels.addPanel({ id: 'devices-c' });
-        const dvEl = dvm.render();
+        const dvEl = DeviceManager.render();
         devicePanel.set('appendContent', dvEl).trigger(trgEvCnt);
       }
 
       // Selector Manager container
-      const slm = editor.SelectorManager;
+      const slmConfig = SelectorManager.getConfig();
-      this.slm = slm;
-      const slmConfig = slm.getConfig();
       if (slmConfig.custom) {
-        slm.__trgCustom({ container: this.$cn2.get(0) });
+        SelectorManager.__trgCustom({ container: $cntSlm.get(0) });
       } else if (!slmConfig.appendTo) {
-        this.$cn2.append(slm.render([]));
+        $cntSlm.append(SelectorManager.render([]));
       }
 
       // Style Manager
-      const sm = editor.StyleManager;
+      this.sm = StyleManager;
-      this.sm = sm;
+      const smConfig = StyleManager.getConfig();
-      const smConfig = sm.getConfig();
       const pfx = smConfig.stylePrefix;
       this.$header = $(`<div class="${pfx}header">${editor.t('styleManager.empty')}</div>`);
-      this.$cn.append(this.$header);
+      $cnt.append(this.$header);
 
       if (smConfig.custom) {
-        sm.__trgCustom({ container: this.$cn2.get(0) });
+        StyleManager.__trgCustom({ container: $cntSm.get(0) });
       } else if (!smConfig.appendTo) {
-        this.$cn2.append(sm.render());
+        $cntSm.append(StyleManager.render());
       }
 
       // Create panel if not exists
       const pnCnt = 'views-container';
-      this.panel = panels.getPanel(pnCnt);
+      this.panel = Panels.getPanel(pnCnt);
       // @ts-ignore
-      if (!this.panel) this.panel = panels.addPanel({ id: pnCnt });
+      if (!this.panel) this.panel = Panels.addPanel({ id: pnCnt });
 
       // Add all containers to the panel
-      this.panel.set('appendContent', this.$cn).trigger(trgEvCnt);
+      this.panel.set('appendContent', $cnt).trigger(trgEvCnt);
 
       // Toggle Style Manager on target selection
       this.em = editor.getModel();
-      this.listenTo(this.em, sm.events.target, this.toggleSm);
+      this.listenTo(this.em, StyleManager.events.target, this.toggleSm);
     }
 
     this.toggleSm();
@@ -72,16 +74,16 @@ export default {
     if ((sender && sender.get && !sender.get('active')) || !sm) return;
 
     if (sm.getSelected()) {
-      this.$cn2?.show();
+      this.$cntInner?.show();
       this.$header?.hide();
     } else {
-      this.$cn2?.hide();
+      this.$cntInner?.hide();
       this.$header?.show();
     }
   },
 
   stop() {
-    this.$cn2?.hide();
+    this.$cntInner?.hide();
     this.$header?.hide();
   },
 } as CommandObject<{}, { [k: string]: any }>;