Update Traits

src/common/module.js

@@ -28,6 +28,7 @@ export default {
       ...conf,
     };
     this.em = this.config.em;
+    this.cls = [];
   },
 
   __initListen(opts = {}) {
@@ -116,5 +117,8 @@ export default {
       coll.reset();
     });
     this.em = 0;
+    this.config = 0;
+    this.view?.remove();
+    this.view = 0;
   },
 };

src/trait_manager/index.js

@@ -1,5 +1,4 @@
-import { defaults, isElement } from 'underscore';
-import defaultOpts from './config/config';
+import defaults from './config/config';
 import TraitsView from './view/TraitsView';
 import TraitView from './view/TraitView';
 import TraitSelectView from './view/TraitSelectView';
@@ -7,22 +6,32 @@ import TraitCheckboxView from './view/TraitCheckboxView';
 import TraitNumberView from './view/TraitNumberView';
 import TraitColorView from './view/TraitColorView';
 import TraitButtonView from './view/TraitButtonView';
+import Module from 'common/module';
+
+export const evAll = 'trait';
+export const evPfx = `${evAll}:`;
+export const evCustom = `${evPfx}custom`;
 
 export default () => {
-  let c = {};
-  let TraitsViewer;
   const typesDef = {
     text: TraitView,
     number: TraitNumberView,
     select: TraitSelectView,
     checkbox: TraitCheckboxView,
     color: TraitColorView,
-    button: TraitButtonView
+    button: TraitButtonView,
   };
 
   return {
+    ...Module,
+
     TraitsView,
 
+    events: {
+      all: evAll,
+      custom: evCustom,
+    },
+
     /**
      * Name of the module
      * @type {String}
@@ -32,20 +41,19 @@ export default () => {
 
     /**
      * Get configuration object
+     * @name getConfig
+     * @function
      * @return {Object}
-     * @private
      */
-    getConfig() {
-      return c;
-    },
 
     /**
      * Initialize module. Automatically called with a new instance of the editor
      * @param {Object} config Configurations
+     * @private
      */
     init(config = {}) {
-      c = config;
-      defaults(c, defaultOpts);
+      this.__initConfig(defaults, config);
+      const c = this.config;
       const ppfx = c.pStylePrefix;
       this.types = { ...typesDef };
       ppfx && (c.stylePrefix = `${ppfx}${c.stylePrefix}`);
@@ -53,12 +61,7 @@ export default () => {
     },
 
     postRender() {
-      const elTo = this.getConfig().appendTo;
-
-      if (elTo) {
-        const el = isElement(elTo) ? elTo : document.querySelector(elTo);
-        el.appendChild(this.render());
-      }
+      this.__appendTo();
     },
 
     /**
@@ -67,7 +70,7 @@ export default () => {
      * @private
      */
     getTraitsViewer() {
-      return TraitsViewer;
+      return this.view;
     },
 
     /**
@@ -98,21 +101,23 @@ export default () => {
     },
 
     render() {
-      const el = TraitsViewer && TraitsViewer.el;
-      TraitsViewer = new TraitsView({
+      let { view } = this;
+      const config = this.getConfig();
+      const el = view && view.el;
+      view = new TraitsView({
         el,
         collection: [],
-        editor: c.em,
-        config: c
+        editor: config.em,
+        config,
       });
-      TraitsViewer.itemsView = this.getTypes();
-      TraitsViewer.updatedCollection();
-      return TraitsViewer.el;
+      view.itemsView = this.getTypes();
+      view.updatedCollection();
+      this.view = view;
+      return view.el;
     },
 
     destroy() {
-      TraitsViewer && TraitsViewer.remove();
-      [c, TraitsViewer].forEach(i => (i = {}));
-    }
+      this.__destroy();
+    },
   };
 };