grapesjs_codeapps/src/commands/view/BgManager.js

Free and Open Source Web Builder Framework/SC Modification

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

var InputColor = require('domain_abstract/ui/InputColor');
const Property = require('style_manager/model/Property');
// const SectorsView = require('style_manager/view/SectorsView');
// const Sectors = require('style_manager/model/Sectors');

module.exports = {
  run(editor, sender) {
    const bm = editor.BgManager;
    const pn = editor.Panels;
    const data = bm.getData();
    // let sectors, SectView;

    const ppfx = this.ppfx;
    const mod = new Property({
      id: 'sc-behind',
      name: 'Color',
      defaults: data.color
    });

    const inputColor = new InputColor({
      target: editor,
      model: mod,
      ppfx
    });
    const input = inputColor.render();

    mod.setValue(data.color);
    input.setValue(data.color, { fromTarget: true });

    this.listenTo(mod, 'change', el => {
      bm.setData('color', el.attributes.value);
    });

    this.listenTo(editor, 'change:bg', el => {
      console.log('changed bb');
    });

    //editor.select(editor.getWrapper());
    //editor.trigger('styleManager:update:target', editor.getWrapper());

    // sectors = new Sectors([], config);
    //
    // sectors.add({
    //   id: 'mySector',
    //   name: 'Tło',
    //   open: true,
    //   // buildProps: ['background-color', 'background'],
    //   properties: [{ name: 'My property', type: 'background-color'}]
    // });
    //
    // let sector = sectors.where({ id: 'mySector' });
    // console.log(sector);
    // sector[0].get('properties').add('min-height');
    //
    // SectView = new SectorsView({
    //   collection: sectors,
    //   target: editor,
    //   config: config
    // });

    // language=HTML
    const template = `
      <div class="gjs-traits-label">Tło za kreacją</div>
      <form class="pp-data" style="margin-bottom: 15px;">
        <div class="gjs-trt-trait" style="display: none">
          <div class="gjs-label" title="Top">Kolor</div>
          <div class="gjs-field gjs-field-text">
            <div class="gjs-input-holder">
                <input type="text" id="popup-top" placeholder="eg. 10px">
            </div>
          </div>
        </div>
        <div class="gjs-trt-trait sc-behind">
          <div class="gjs-label" title="Top">${window.lang['color']}</div>
        </div>
      </form>
    `;

    if (!this.blocks) {
      bm.render();
      const id = 'bg-manager';
      this.$el = $('<div></div>');
      this.$el.append(template);
      this.$el.find('.sc-behind').append(input.el);
      this.$el.append(editor.StyleManagerBg.render());
      const panels = pn.getPanel(id) || pn.addPanel({ id });
      panels.set('appendContent', this.$el).trigger('change:appendContent');
      this.blocks = this.$el;
    }

    this.blocks.show();
    this.blocks.parent().show();
  },

  stop() {
    const blocks = this.blocks;
    blocks && blocks.parent().hide();
  }
};