Make Traits label configurable. Closes #447

src/dom_components/model/Component.js

@@ -138,6 +138,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
         this.set('void', true);
     }
 
+    opt.em = em;
     this.opt = opt;
     this.sm = em;
     this.em = em;
@@ -384,7 +385,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
    * @private
    */
   loadTraits(traits, opts = {}) {
-    var trt = new Traits();
+    var trt = new Traits([], this.opt);
     trt.setTarget(this);
     traits = traits || this.get('traits');
 

src/editor/model/Editor.js

@@ -13,11 +13,11 @@ const deps = [
   require('style_manager'),
   require('asset_manager'),
   require('css_composer'),
+  require('trait_manager'),
   require('dom_components'),
   require('canvas'),
   require('commands'),
-  require('block_manager'),
+  require('block_manager')
-  require('trait_manager'),
 ];
 
 const Backbone = require('backbone');

src/trait_manager/config/config.js

@@ -1,4 +1,19 @@
 module.exports = {
+
   stylePrefix: 'trt-',
+
   labelContainer: 'Component settings',
+
+  // Placeholder label for text input types
+  labelPlhText: 'eg. Text here',
+
+  // Placeholder label for href input
+  labelPlhHref: 'eg. https://google.com',
+
+  // Default options for the target input
+  optionsTarget: [
+    { value: '', name: 'This window' },
+    { value: '_blank', name: 'New window' }
+  ]
+
 };

src/trait_manager/index.js

@@ -1,9 +1,10 @@
+import { defaults } from 'underscore';
+
 module.exports = () => {
-  var c = {},
+  let c = {};
-  defaults = require('./config/config'),
+  const defaultOpts = require('./config/config');
-  Traits = require('./model/Traits'),
+  const TraitsView = require('./view/TraitsView');
-  TraitsView = require('./view/TraitsView');
+  let TraitsViewer;
-  var TraitsViewer;
 
   return {
 
@@ -29,16 +30,11 @@ module.exports = () => {
      * Initialize module. Automatically called with a new instance of the editor
      * @param {Object} config Configurations
      */
-    init(config) {
+    init(config = {}) {
-      c = config || {};
+      c = config;
-      for (var name in defaults) {
+      defaults(c, defaultOpts);
-        if (!(name in c))
+      const ppfx = c.pStylePrefix;
-          c[name] = defaults[name];
+      ppfx && (c.stylePrefix = `${ppfx}${c.stylePrefix}`);
-      }
-
-      var ppfx = c.pStylePrefix;
-      if(ppfx)
-        c.stylePrefix = ppfx + c.stylePrefix;
       TraitsViewer = new TraitsView({
         collection: [],
         editor: c.em,

src/trait_manager/model/TraitFactory.js

@@ -1,6 +1,4 @@
-var Backbone = require('backbone');
+module.exports = (config = {}) => ({
-
-module.exports = (() => ({
   /**
    * Build props object by their name
    * @param  {Array<string>|string} props Array of properties name
@@ -27,10 +25,10 @@ module.exports = (() => ({
       // Define placeholder
       switch (prop) {
         case 'title': case 'alt': case 'id':
-          obj.placeholder = 'eg. Text here';
+          obj.placeholder = config.labelPlhText;
           break;
         case 'href':
-          obj.placeholder = 'eg. https://google.com';
+          obj.placeholder = config.labelPlhHref;
           break;
       }
 
@@ -38,10 +36,7 @@ module.exports = (() => ({
       // Define options
       switch (prop) {
         case 'target':
-          obj.options = [
+          obj.options = config.optionsTarget;
-            {value: '', name: 'This window'},
-            {value: '_blank', name: 'New window'}
-          ];
           break;
       }
 
@@ -50,4 +45,4 @@ module.exports = (() => ({
 
     return objs;
   }
-}))();
+});

src/trait_manager/model/Traits.js

@@ -1,28 +1,41 @@
-var Backbone = require('backbone');
+import { isString, isArray } from 'underscore';
-var Trait = require('./Trait');
+const Backbone = require('backbone');
-var TraitFactory = require('./TraitFactory');
+const Trait = require('./Trait');
+const TraitFactory = require('./TraitFactory');
 
 module.exports = Backbone.Collection.extend({
 
   model: Trait,
 
+  initialize(coll, options = {}) {
+    this.em = options.em || '';
+  },
+
   setTarget(target) {
     this.target = target;
   },
 
   add(models, opt) {
+    const em = this.em;
+
     // Use TraitFactory if necessary
-    if(typeof models === 'string' || models instanceof Array) {
+    if (isString(models) || isArray(models)) {
-      if(typeof models === 'string')
+      const tm = em.get('TraitManager');
-        models = [models];
+      const tmOpts = tm && tm.getConfig();
-      for(var i = 0, len = models.length; i < len; i++) {
+      const tf = TraitFactory(tmOpts);
-        var str = models[i];
+
-        var model = typeof str === 'string' ? TraitFactory.build(str)[0] : str;
+      if (isString(models)) {
+          models = [models];
+      }
+
+      for (var i = 0, len = models.length; i < len; i++) {
+        const str = models[i];
+        const model = isString(str) ? tf.build(str)[0] : str;
         model.target = this.target;
         models[i] = model;
       }
     }
-    return Backbone.Collection.prototype.add.apply(this, [models, opt]);
-  },
 
+    return Backbone.Collection.prototype.add.apply(this, [models, opt]);
+  }
 });