grapesjs_codeapps/src/trait_manager/view/TraitsView.js

Free and Open Source Web Builder Framework/SC Modification

var DomainViews = require('domain_abstract/view/DomainViews');
var TraitView = require('./TraitView');
var TraitSelectView = require('./TraitSelectView');
var TraitCheckboxView = require('./TraitCheckboxView');
var TraitNumberView = require('./TraitNumberView');
var TraitColorView = require('./TraitColorView');

const $ = Backbone.$;

module.exports = DomainViews.extend({
  itemView: TraitView,

  itemsView: {
    text: TraitView,
    number: TraitNumberView,
    select: TraitSelectView,
    checkbox: TraitCheckboxView,
    color: TraitColorView
  },

  initialize(o = {}) {
    const config = o.config || {};
    this.config = config;
    this.em = o.editor;
    this.pfx = config.stylePrefix || '';
    this.ppfx = config.pStylePrefix || '';
    this.className = this.pfx + 'traits';
    const toListen = 'component:toggled';
    this.listenTo(this.em, toListen, this.updatedCollection);
    this.updatedCollection();
  },

  /**
   * Update view collection
   * @private
   */
  updatedCollection() {
    const ppfx = this.ppfx;
    const comp = this.em.getSelected();
    this.el.className = `${this.className} ${ppfx}one-bg ${ppfx}two-color`;

    if (comp) {
      this.collection = comp.get('traits');
      this.render();
    }

    setTimeout(() => {
      const el = $('.gjs-pn-buttons .fa-cog');
      if (!el.hasClass('gjs-pn-active')) {
        el.trigger('click');
      }
    }, 100);

    // setTimeout(() => {
    //   const el = $('.gjs-pn-buttons .fa-cog');
    //   const el2 = $('.gjs-pn-buttons .fa-picture-o');
    //   try {
    //     if(comp.attributes.type === 'wrapper') {
    //       el2.trigger('click');
    //     } else {
    //       if (!el.hasClass('gjs-pn-active')) {
    //         el.trigger('click');
    //       }
    //     }
    //   } catch(e) {}
    // }, 100);
  }
});