activator-oce-exporter/test/activator/shared/src/fusion/email/section/index.js

Extract Activator binder and convert it to valid OCE mono pacakge

import { html } from '@polymer/lit-element';
import { FusionBase } from '../../base';
import { MJMLColumn } from '../column';
import { applyMixins, VerticalAlignObservable, EmailComponent } from '../../mixins';

class MJMLSection extends applyMixins(FusionBase, [VerticalAlignObservable, EmailComponent]) {
  static get properties() {
    return {
      'background-url': {
        type: String,
        fieldType: 'Modal',
        assetType: 'Image',
        value: '',
        prop: true,
      },
      'full-width': {
        type: String,
        fieldType: 'Select',
        value: '',
        prop: true,
        selectOptions: [
          'full-width',
          '100%',
          '600px',
        ],
      },
      'border-radius': {
        type: String,
        fieldType: 'Number',
        value: '0px',
      },
      'background-color': {
        type: String,
        fieldType: 'ColorPicker',
        value: 'rgba(255, 255, 255, 0)',
      },
      'background-size': {
        type: String,
        fieldType: 'Number',
        value: '100%',
      },
      'background-repeat': {
        type: String,
        fieldType: 'Select',
        value: 'repeat',
        selectOptions: [
          'repeat',
          'repeat-x',
          'repeat-y',
          'no-repeat',
        ],
      },
      'text-align': {
        type: String,
        fieldType: 'Select',
        value: 'center',
        selectOptions: [
          'center',
          'justify',
          'left',
          'right',
        ],
      },
      'padding-top': {
        type: String,
        fieldType: 'Number',
        value: '20px',
      },
      'padding-right': {
        type: String,
        fieldType: 'Number',
        value: '0px',
      },
      'padding-bottom': {
        type: String,
        fieldType: 'Number',
        value: '20px',
      },
      'padding-left': {
        type: String,
        fieldType: 'Number',
        value: '0px',
      },
      direction: {
        type: String,
        fieldType: 'Select',
        value: 'ltr',
        selectOptions: [
          'ltr',
          'rtl',
        ],
      },
    };
  }

  static get options() {
    return {
      componentName: 'mj-section',
      componentUIName: 'Row container',
      componentScope: 'standard',
      componentType: 'static',
      componentCategory: 'UI',
      componentDescription: 'Group row container for editor',
      componentDomain: 'email',
      isRootNested: true,
      isTextEdit: false,
      nestedTypes: [],
      nestedComponents: ['mj-column'],
      defaultTemplate: '',
      resizable: false,
      draggable: false,
      rotatable: false,
      sortable: true,
    };
  }

  static createListItemData(component) {
    const { componentName } = component.options;
    return {
      component,
      name: componentName,
      events: {
        add: 'rendered',
        remove: `${componentName}:removed`,
        resize: `${componentName}:resized`,
      },
    };
  }

  getExistItems(itemName) {
    return Array.from(this.getElementsByTagName(itemName));
  }

  constructor() {
    super();
    this.columnItem = MJMLSection.createListItemData(MJMLColumn);
  }

  connectedCallback() {
    super.connectedCallback();
    this.columnAddEventFunc = this.columnAddHandler.bind(this);
    this.columnRemoveEventFunc = this.changeContentWidth.bind(this);
    this.columnResizeEventFunc = this.changeContentWidth.bind(this);
    this.addEventListener(this.columnItem.events.add, this.columnAddEventFunc);
    this.addColumnsEventListeners();
  }

  changeContentWidth() {
    const columnItems = this.getExistItems(this.columnItem.name);
    columnItems.forEach((item) => {
      const childItems = Array.from(item.children);
      if (childItems.length) MJMLSection.changeChildWidth(childItems);
    });
  }

  static changeChildWidth(childItems) {
    childItems.forEach(childItem => childItem.updateWidth());
  }

  columnAddHandler(e) {
    this.changeContentWidth();
    e.target.addEventListener(this.columnItem.events.remove, this.columnRemoveEventFunc);
    e.target.addEventListener(this.columnItem.events.resize, this.columnResizeEventFunc);
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    this.removeColumnsEventListeners();
  }

  addColumnsEventListeners() {
    this.getExistItems(this.columnItem.name).forEach((item) => {
      item.addEventListener(this.columnItem.events.remove, this.columnRemoveEventFunc);
      item.addEventListener(this.columnItem.events.resize, this.columnResizeEventFunc);
    });
  }

  removeColumnsEventListeners() {
    this.getExistItems(this.columnItem.name).forEach((item) => {
      item.removeEventListener(this.columnItem.events.remove, this.columnRemoveEventFunc);
      item.removeEventListener(this.columnItem.events.add, this.columnAddEventFunc);
      item.removeEventListener(this.columnItem.events.resize, this.columnResizeEventFunc);
    });
  }

  update(changedProps) {
    super.update(changedProps);
    if (changedProps.has('background-url')) {
      const url = this['background-url'];
      this.style.setProperty('--background-image', `url(${url})`);
    }
  }

  static getStyle() {
    const styleRoot = super.getStyle();
    return `
      ${styleRoot}
      mj-section {
         padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
      }
      :host {
        display: block;
        min-height: 40px;
        border-radius: var(--border-radius);
        background-color: var(--background-color);
        background-image: var(--background-image);
        background-size: var(--background-size);
        background-repeat: var(--background-repeat);
        background-position: top center;
        padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
        direction: var(--direction);
        text-align: var(--text-align);
        vertical-align: var(--vertical-align);
      }
      slot {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
      }`;
  }

  render() {
    super.render();
    return html`
      <style>
      ${MJMLSection.getStyle()}
      </style>
      <div class='mj-section'>
        <slot></slot>
        ${MJMLSection.getSystemSlotTemplate()}
      </div>
    `;
  }
}

export { MJMLSection };