grapesjs/src/dom_components/model/Component.js

import { isUndefined, isArray } from 'underscore';
import Styleable from 'domain_abstract/model/Styleable';

var Backbone = require('backbone');
var Components = require('./Components');
var Selectors = require('selector_manager/model/Selectors');
var Traits = require('trait_manager/model/Traits');

const escapeRegExp = (str) => {
  return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
}

module.exports = Backbone.Model.extend(Styleable).extend({

  defaults: {
    // HTML tag of the component
    tagName: 'div',

    // Component type, eg. 'text', 'image', 'video', etc.
    type: '',

    // True if the component is removable from the canvas
    removable: true,

    // Indicates if it's possible to drag the component inside others
    // Tip: Indicate an array of selectors where it could be dropped inside
    draggable: true,

    // Indicates if it's possible to drop other components inside
    // Tip: Indicate an array of selectors which could be dropped inside
    droppable: true,

    // Set false if don't want to see the badge (with the name) over the component
    badgable: true,

    // True if it's possible to style it
    // Tip:
    // Indicate an array of CSS properties which is possible to style, eg. ['color', 'width']
    // All other properties will be hidden from the style manager
    stylable: true,

    // Indicate an array of style properties which should be hidden from the style manager
    unstylable: '',

    // Highlightable with 'dotted' style if true
    highlightable: true,

    // True if it's possible to clone the component
    copyable: true,

    // Indicates if it's possible to resize the component (at the moment implemented only on Image Components)
    // It's also possible to pass an object as options for the Resizer
    resizable: false,

    // Allow to edit the content of the component (used on Text components)
    editable: false,

    // Hide the component inside Layers
    layerable: true,

    // This property is used by the HTML exporter as void elements do not
    // have closing tag, eg. <br/>, <hr/>, etc.
    void: false,

    // Indicates if the component is in some CSS state like ':hover', ':active', etc.
    state: '',

    // State, eg. 'selected'
    status: '',

    // Content of the component (not escaped) which will be appended before children rendering
    content: '',

    // Component icon, this string will be inserted before the name, eg. '<i class="fa fa-square-o"></i>'
    icon: '',

    // Component related style
    style: '',

    // Key-value object of the component's attributes
    attributes: '',

    // Array of classes
    classes: '',

    // Component's javascript
    script: '',

    // Traits
    traits: ['id', 'title'],

    // Indicates an array of properties which will be inhereted by
    // all NEW appended children
    //
    // If you create a model likes this
    //  removable: false,
    //  draggable: false,
    //  propagate: ['removable', 'draggable']
    // When you append some new component inside, the new added model
    // will get the exact same properties indicated in `propagate` array
    // (as the `propagate` property itself)
    //
    propagate: '',

    /**
      * Set an array of items to show up inside the toolbar (eg. move, clone, delete)
      * when the component is selected
      * toolbar: [{
      *     attributes: {class: 'fa fa-arrows'},
      *     command: 'tlb-move',
      *   },{
      *     attributes: {class: 'fa fa-clone'},
      *     command: 'tlb-clone',
      * }]
    */
    toolbar: null,
  },


  initialize(props = {}, opt = {}) {
    const em = opt.sm || opt.em || {};

    // Propagate properties from parent if indicated
    const parent = this.parent();
    const parentAttr = parent && parent.attributes;

    if (parentAttr && parentAttr.propagate) {
      let newAttr = {};
      const toPropagate = parentAttr.propagate;
      toPropagate.forEach(prop => newAttr[prop] = parent.get(prop));
      newAttr.propagate = toPropagate;
      newAttr = {...newAttr, ...props};
      this.set(newAttr);
    }

    const propagate = this.get('propagate');
    propagate && this.set('propagate', isArray(propagate) ? propagate : [propagate]);


    // Check void elements
    if(opt && opt.config &&
      opt.config.voidElements.indexOf(this.get('tagName')) >= 0) {
        this.set('void', true);
    }

    opt.em = em;
    this.opt = opt;
    this.sm = em;
    this.em = em;
    this.config = props;
    this.set('attributes', this.get('attributes') || {});
    this.listenTo(this, 'change:script', this.scriptUpdated);
    this.listenTo(this, 'change:traits', this.traitsUpdated);
    this.loadTraits();
    this.initClasses();
    this.initComponents();
    this.initToolbar();

    // Normalize few properties from strings to arrays
    var toNormalize = ['stylable'];
    toNormalize.forEach(function(name) {
      var value = this.get(name);

      if (typeof value == 'string') {
        var newValue = value.split(',').map(prop => prop.trim());
        this.set(name, newValue);
      }
    }, this);

    this.set('status', '');
    this.init();
  },


  /**
   * Update attributes of the model
   * @param {Object} attrs Key value attributes
   * @example
   * model.setAttributes({id: 'test', 'data-key': 'value'});
   */
  setAttributes(attrs) {
    attrs = { ...attrs };

    // Handle classes
    const classes = attrs.class;
    classes && this.setClass(classes);
    delete attrs.class;

    // Handle style
    const style = attrs.style;
    style && this.setStyle(style);
    delete attrs.style;

    this.set('attributes', attrs);
  },


  /**
   * Return attributes
   * @return {Object}
   */
  getAttributes() {
    return this.get('attributes');
  },


  /**
   * Add classes
   * @param {Array|string} classes Array or string of classes
   * @return {Array} Array of added selectors
   * @example
   * model.addClass('class1');
   * model.addClass('class1 class2');
   * model.addClass(['class1', 'class2']);
   * // -> [SelectorObject, ...]
   */
  addClass(classes) {
    const added = this.em.get('SelectorManager').addClass(classes);
    return this.get('classes').add(added);
  },


  /**
   * Set classes (resets current collection)
   * @param {Array|string} classes Array or string of classes
   * @return {Array} Array of added selectors
   * @example
   * model.setClass('class1');
   * model.setClass('class1 class2');
   * model.setClass(['class1', 'class2']);
   * // -> [SelectorObject, ...]
   */
  setClass(classes) {
    this.get('classes').reset();
    return this.addClass(classes);
  },


  initClasses() {
    const classes = this.normalizeClasses(this.get('classes') || this.config.classes || []);
    this.set('classes', new Selectors(classes));
    return this;
  },


  initComponents() {
    // Have to add components after the init, otherwise the parent
    // is not visible
    const comps = new Components(null, this.opt);
    comps.parent = this;
    comps.reset(this.get('components'));
    this.set('components', comps);
    return this;
  },


  /**
   * Initialize callback
   */
  init() {},


  /**
   * Add new component children
   * @param  {Component|string} components Component to add
   * @param {Object} [opts={}] Options, same as in `model.add()`(from backbone)
   * @return {Array} Array of appended components
   * @example
   * someModel.get('components').lenght // -> 0
   * const videoComponent = someModel.append('<video></video><div></div>')[0];
   * // This will add 2 components (`video` and `div`) to your `someModel`
   * someModel.get('components').lenght // -> 2
   * // You can pass components directly
   * otherModel.append(otherModel2);
   * otherModel.append([otherModel3, otherModel4]);
   */
  append(components, opts = {}) {
    const result = this.components().add(components, opts);
    return isArray(result) ? result : [result];
  },


  /**
   * Set new collection if `components` are provided, otherwise the
   * current collection is returned
   * @param  {Component|string} [components] Components to set
   * @return {Collection|undefined}
   * @example
   * // Get current collection
   * const collection = model.components();
   * // Set new collection
   * model.components('<span></span><div></div>');
   */
  components(components) {
    const coll = this.get('components');

    if (isUndefined(components)) {
      return coll;
    } else {
      coll.reset();
      components && this.append(components);
    }
  },


  /**
   * Get parent model
   * @return {Component}
   */
  parent() {
    const coll = this.collection;
    return coll && coll.parent;
  },


  /**
   * Script updated
   */
  scriptUpdated() {
    this.set('scriptUpdated', 1);
  },


  /**
   * Once traits are updated I have to populates model's attributes
   */
  traitsUpdated() {
    let found = 0;
    const attrs = Object.assign({}, this.get('attributes'));
    const traits = this.get('traits');

    if (!(traits instanceof Traits)) {
      this.loadTraits();
      return;
    }

    traits.each((trait) => {
      found = 1;
      if (!trait.get('changeProp')) {
        const value = trait.getInitValue();
        if (value) {
          attrs[trait.get('name')] = value;
        }
      }
    });

    found && this.set('attributes', attrs);
  },


  /**
   * Init toolbar
   */
   initToolbar() {
    var model = this;
    if(!model.get('toolbar')) {
      var tb = [];
      if(model.collection) {
        tb.push({
          attributes: {class: 'fa fa-arrow-up'},
          command: 'select-parent',
        });
      }
      if(model.get('draggable')) {
        tb.push({
          attributes: {class: 'fa fa-arrows'},
          command: 'tlb-move',
        });
      }
      if(model.get('copyable')) {
        tb.push({
          attributes: {class: 'fa fa-clone'},
          command: 'tlb-clone',
        });
      }
      if(model.get('removable')) {
        tb.push({
          attributes: {class: 'fa fa-trash-o'},
          command: 'tlb-delete',
        });
      }
      model.set('toolbar', tb);
    }
  },


  /**
   * Load traits
   * @param  {Array} traits
   * @private
   */
  loadTraits(traits, opts = {}) {
    var trt = new Traits([], this.opt);
    trt.setTarget(this);
    traits = traits || this.get('traits');

    if (traits.length) {
      trt.add(traits);
    }

    this.set('traits', trt, opts);
    return this;
  },


  /**
   * Normalize input classes from array to array of objects
   * @param {Array} arr
   * @return {Array}
   * @private
   */
  normalizeClasses(arr) {
     var res = [];

     if(!this.sm.get)
      return;

    var clm = this.sm.get('SelectorManager');
    if(!clm)
      return;

    arr.forEach(val => {
      var name = '';

      if(typeof val === 'string')
        name = val;
      else
        name = val.name;

      var model = clm.add(name);
      res.push(model);
    });
    return res;
  },


  /**
   * Override original clone method
   * @private
   */
  clone(reset) {
    var attr = _.clone(this.attributes),
    comp = this.get('components'),
    traits = this.get('traits'),
    cls = this.get('classes');
    attr.components = [];
    attr.classes = [];
    attr.traits = [];

    comp.each((md, i) => {
      attr.components[i]	= md.clone(1);
    });
    traits.each((md, i) => {
      attr.traits[i] = md.clone();
    });
    cls.each((md, i) => {
      attr.classes[i]	= md.get('name');
    });

    attr.status = '';
    attr.view = '';

    if(reset){
      this.opt.collection = null;
    }

    return new this.constructor(attr, this.opt);
  },


  /**
   * Get the name of the component
   * @return {string}
   * */
  getName() {
    let customName = this.get('custom-name');
    let tag = this.get('tagName');
    tag = tag == 'div' ? 'box' : tag;
    let name = this.get('type') || tag;
    name = name.charAt(0).toUpperCase() + name.slice(1);
    return customName || name;
  },


  /**
   * Get the icon string
   * @return {string}
   */
  getIcon() {
    let icon = this.get('icon');
    return icon ? icon + ' ' : '';
  },


  /**
   * Return HTML string of the component
   * @param {Object} opts Options
   * @return {string} HTML string
   * @private
   */
  toHTML(opts) {
    var code = '';
    var m = this;
    var tag = m.get('tagName');
    var idFound = 0;
    var sTag = m.get('void');
    var attrId = '';
    var strAttr = '';
    var attr = this.getAttrToHTML();

    for (var prop in attr) {
      if (prop == 'id') {
        idFound = 1;
      }
      var val = attr[prop];
      strAttr += typeof val !== undefined && val !== '' ?
        ' ' + prop + '="' + val + '"' : '';
    }

    // Build the string of classes
    var strCls = '';
    m.get('classes').each(m => {
      strCls += ' ' + m.get('name');
    });
    strCls = strCls !== '' ? ' class="' + strCls.trim() + '"' : '';

    // If style is not empty I need an ID attached to the component
    if(!_.isEmpty(m.get('style')) && !idFound)
      attrId = ' id="' + m.getId() + '" ';

    code += '<' + tag + strCls + attrId + strAttr + (sTag ? '/' : '') + '>' + m.get('content');

    m.get('components').each(m => {
      code += m.toHTML();
    });

    if(!sTag)
      code += '</'+tag+'>';

    return code;
  },


  /**
   * Returns object of attributes for HTML
   * @return {Object}
   * @private
   */
  getAttrToHTML() {
    var attr = this.get('attributes') || {};
    delete attr.style;
    return attr;
  },


  /**
   * Return a shallow copy of the model's attributes for JSON
   * stringification.
   * @return {Object}
   * @private
   */
  toJSON(...args) {
    var obj = Backbone.Model.prototype.toJSON.apply(this, args);
    var scriptStr = this.getScriptString();
    delete obj.toolbar;

    if (scriptStr) {
      obj.script = scriptStr;
    }

    return obj;
  },


  /**
   * Return model id
   * @return {string}
   */
  getId() {
    let attrs = this.get('attributes') || {};
    return attrs.id || this.cid;
  },


  /**
   * Return script in string format, cleans 'function() {..' from scripts
   * if it's a function
   * @param {string|Function} script
   * @return {string}
   * @private
   */
  getScriptString(script) {
    var scr = script || this.get('script');

    if (!scr) {
      return scr;
    }

    // Need to convert script functions to strings
    if (typeof scr == 'function') {
      var scrStr = scr.toString().trim();
      scrStr = scrStr.replace(/^function[\s\w]*\(\)\s?\{/, '').replace(/\}$/, '');
      scr = scrStr.trim();
    }

    var config = this.sm.config || {};
    var tagVarStart = escapeRegExp(config.tagVarStart || '{[ ');
    var tagVarEnd = escapeRegExp(config.tagVarEnd || ' ]}');
    var reg = new RegExp(`${tagVarStart}(\\w+)${tagVarEnd}`, 'g');
    scr = scr.replace(reg, (match, v) => {
      // If at least one match is found I have to track this change for a
      // better optimization inside JS generator
      this.scriptUpdated();
      return this.attributes[v];
    })

    return scr;
  }

},{

  /**
   * Detect if the passed element is a valid component.
   * In case the element is valid an object abstracted
   * from the element will be returned
   * @param {HTMLElement}
   * @return {Object}
   * @private
   */
  isComponent(el) {
    return {tagName: el.tagName ? el.tagName.toLowerCase() : ''};
  },

});