grapesjs_codeapps/src/commands/view/OpenTraitManager.js

Free and Open Source Web Builder Framework/SC Modification

const $ = require('backbone').$;

module.exports = {
  run(editor, sender) {
    this.sender = sender;

    var config = editor.Config;
    var pfx = config.stylePrefix;
    var tm = editor.TraitManager;
    var panelC;

    if (!this.$cn) {
      var tmView = tm.getTraitsViewer();
      var confTm = tm.getConfig();
      this.$cn = $('<div></div>');
      this.$cn2 = $('<div></div>');
      this.$cn3 = $('<div></div>');
      this.$cn.append(this.$cn2);

      this.$cn.append(this.$cn3);

      this.$header = $('<div>').append(
        `<div class="${confTm.stylePrefix}header">${confTm.textNoElement}</div>`
      );

      this.$cn.append(this.$header);

      /*

      this.$cn3.append(`<div class="gjs-traits-label">Pop-up settings</div>
        <div class="gjs-trt-traits gjs-one-bg gjs-two-color">
        <div class="gjs-trt-trait">
        <div class="gjs-label" title="Width">Width</div>
        <div class="gjs-field gjs-field-text">
        <div class="gjs-input-holder">
        <input type="text" id="popup-width" placeholder="eg. 600"></div></div></div>
        <div class="gjs-trt-trait"><div class="gjs-label" title="Title">Height</div>
        <div class="gjs-field gjs-field-text"><div class="gjs-input-holder">
        <input type="text" id="popup-height" placeholder="eg. 400"></div></div></div></div>`);

        */

      this.$cn2.append(
        `<div class="${pfx}traits-label">${confTm.labelContainer}</div>`
      );

      //this.$cn2.append(`tm-code`);

      this.$cn2.append(tmView.render().el);

      var clm = editor.SelectorManager;
      if (clm) this.$cn2.append(clm.render([]));
      this.$cn2.append(editor.StyleManager.render());

      var panels = editor.Panels;

      if (!panels.getPanel('views-container'))
        panelC = panels.addPanel({ id: 'views-container' });
      else panelC = panels.getPanel('views-container');

      panelC
        .set('appendContent', this.$cn.get(0))
        .trigger('change:appendContent');

      this.target = editor.getModel();
      this.listenTo(this.target, 'component:toggled', this.toggleTm);
    }

    this.toggleTm();
  },

  /**
   * Toggle Trait Manager visibility
   * @private
   */
  toggleTm() {
    const sender = this.sender;
    this.$cn3.show();
    //bindUpdate();
    if (sender && sender.get && !sender.get('active')) return;

    if (this.target.getSelectedAll().length === 1) {
      this.$cn2.show();
      this.$header.hide();
    } else {
      this.$cn2.hide();
      this.$header.show();
    }
  },

  stop() {
    this.$cn2 && this.$cn2.hide();
    this.$cn3 && this.$cn3.hide();
    this.$header && this.$header.hide();
  }
};