grapesjs_codeapps/src/commands/view/LocationManager.js

Free and Open Source Web Builder Framework/SC Modification

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

module.exports = {
  run(editor, sender) {
    const bm = editor.BgManager;
    const pn = editor.Panels;

    // language=HTML
    const template = `
      <div class="gjs-traits-label">${window.lang['popupSettingsTitle']}</div>
      <form class="pp-data">
        <div class="pp-field">
          <input type="radio" name="pp-position" id="pp-center" value="center">
          <label for="pp-center">
            <img src="http://ninewaw.com/kreator/center.png">
          </label>
        </div>
        <div class="pp-field">
        <input type="radio" name="pp-position" id="pp-left" value="left">
        <label for="pp-left">
          <img src="http://ninewaw.com/kreator/left.png">
        </label>
        </div>
          <div class="pp-field">
        <input type="radio" name="pp-position" id="pp-right" value="right">
        <label for="pp-right">
          <img src="http://ninewaw.com/kreator/right.png">
        </label>
          </div>
            <div class="pp-field">
        <input type="radio" name="pp-position" id="pp-top" value="top">
        <label for="pp-top">
          <img src="http://ninewaw.com/kreator/top.png">
        </label>
            </div>
              <div class="pp-field">
        <input type="radio" name="pp-position" id="pp-bottom" value="bottom">
        <label for="pp-bottom">
          <img src="http://ninewaw.com/kreator/bottom.png">
        </label>
              </div>
                <div class="pp-field">
        <input type="radio" name="pp-position" id="pp-custom" value="custom">
        <label for="pp-custom">
          ${window.lang['custom']}
        </label>
        </div>
        <div class="gjs-trt-trait">
          <div class="gjs-label" title="Top">${window.lang['top']}</div>
          <div class="gjs-field gjs-field-text">
            <div class="gjs-input-holder">
                <input type="text" name="popup-top" id="popup-top" placeholder="eg. 10px">
            </div>
          </div>
        </div>
        <div class="gjs-trt-trait">
          <div class="gjs-label" title="Bottom">${window.lang['bottom']}</div>
          <div class="gjs-field gjs-field-text">
            <div class="gjs-input-holder">
                <input type="text" name="popup-bottom" id="popup-bottom" placeholder="eg. 10px">
            </div>
          </div>
        </div>
        <div class="gjs-trt-trait">
          <div class="gjs-label" title="Left">${window.lang['left']}</div>
          <div class="gjs-field gjs-field-text">
            <div class="gjs-input-holder">
                <input type="text" name="popup-left" id="popup-left" placeholder="eg. 10px">
            </div>
          </div>
        </div>
        <div class="gjs-trt-trait">
          <div class="gjs-label" title="Right">${window.lang['right']}</div>
          <div class="gjs-field gjs-field-text">
            <div class="gjs-input-holder">
                <input type="text" name="popup-right" id="popup-right" placeholder="eg. 10px">
            </div>
          </div>
        </div>
        <div class="pp-field" style="padding-top: 10px;padding-left: 5px;">
          <input type="checkbox" name="pp-float" value="true" id="#pp-float">
          <label for="pp-float">
            ${window.lang['fixed']}
          </label>
        </div>
      </form>
    `;

    if (!this.blocks) {
      bm.render();
      const id = 'location-manager';
      this.$el = $('<div></div>');
      this.$el.append(template);
      let data = bm.getData();

      let check = this.$el.find(
        `input[name='pp-position'][value='${data.position}']`
      );
      check.prop('checked', true);

      let float = this.$el.find(`input[name='pp-float']`);
      if (float) float.prop('checked', data.float);

      this.$el.find(`input[name='popup-top']`).val(data.top);
      this.$el.find(`input[name='popup-left']`).val(data.left);
      this.$el.find(`input[name='popup-right']`).val(data.right);
      this.$el.find(`input[name='popup-bottom']`).val(data.bottom);

      this.$el.find('form').change(ev => {
        let val;
        let name = ev.target.name;
        let key = name.split('-');
        key[1] !== 'float'
          ? (val = ev.target.value)
          : (val = ev.target.checked);

        bm.setData(key[1], val);

        let values = bm.getData();

        if (key[1] === 'position') {
          this.setPosition(ev.target.value);
        }

        if (data.position === 'custom') {
          this.setPosition('custom', {
            top: data.top,
            bottom: data.bottom,
            left: data.left,
            right: data.right
          });
        }
      });

      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();
  },

  setPosition(position, data = {}) {
    const el = $('.gjs-frame');
    if (position && position !== 'custom') {
      el.css({ top: '', left: '', bottom: '', right: '' });
      el.removeClass(
        'gjs-position-center gjs-position-custom gjs-position-left gjs-position-right gjs-position-top gjs-position-bottom'
      );
      el.addClass(`gjs-position-${position}`);
    } else {
      el.addClass('gjs-position-custom');
      el.css(data);
    }
  },

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