ember-arcgis-page-layout/addon/components/page-layout-editor/component.js

Page Layout infrastructure components

/**
 * page-layout-editor/component.js
 */
import Ember from 'ember';
import layout from './template';
import getDefaultSection from '../../utils/get-default-section';

export default Ember.Component.extend({
  layout:layout,
  classNames: ['page-layout-editor'],
  classNameBindings: ['actionInProgress:disable-user-select'],

  dropTargetModel: null,
  showConfirmModal: false,
  removeAction: 'cancelModal',

  intl: Ember.inject.service(),

  /**
   * Get the coordinator service
   */
  layoutCoordinator: Ember.inject.service('layout-coordinator'),

  init(){
    this._super(...arguments);
    const layoutCoordinator = this.get('layoutCoordinator');
    //add this to the layoutCoordinator
    this.set('layoutCoordinator.layoutEditor', this);
    // bubble up the dragEnd and modelChanged events
    layoutCoordinator.on('dragEnd', this, 'dragEnd');
    layoutCoordinator.on('modelChanged', this, 'modelChanged');
    if(!this.get('model.sections.length')){
      //we have no sections, so create one w/ empty rows
      this.get('model.sections').pushObject({
        "containment": "fixed",
        "rows":[]
      });
    }
  },
  willDestroyElement(){
    //console.log('page-layout-editor:: '+ this.get('elementId') + ' is is destroying...');
    // clean up layout coordinator
    const layoutCoordinator = this.get('layoutCoordinator');
    layoutCoordinator.off('dragEnd', this, 'dragEnd');
    layoutCoordinator.off('modelChanged', this, 'modelChanged');
    layoutCoordinator.reset();
    this.set('layoutCoordinator.layoutEditor', null);
  },

  /**
   * Allow events to bubble up
   */
  dragStarted(){
    console.log('page-layout-editor:dragStarted fires...');
    if(this.get('onDragStart')){
      this.sendAction('onDragStart');
    }
  },

  dragEnd(e) {
    this.sendAction('onDragEnd', e);
  },

  modelChanged() {
    this.sendAction('onModelChanged');
  },

  insertSection(section, targetSection, dockPosition) {
    const sections = this.get('model.sections');
    // where to insert?
    // default to the begining (top)
    let pos = 0;
    if (targetSection) {
      // if inserting before, use target card's current index
      // otherwise (inserting after) use the next index
      pos = sections.indexOf(targetSection);
      if(dockPosition ==='row-bottom'){
        pos++;
      }
    }
    sections.insertAt(pos, section);
    this.modelChanged();
  },

  _removeSection(section){
    let newSections;
    let sections = this.get('model.sections');
    if (sections.length > 1) {
      newSections = sections.without(section);
    } else {
      // TODO: override section to default to theme text color (if any)
      newSections = [getDefaultSection()];
    }
    this.set('model.sections', newSections);
    this.modelChanged();
  },
  //show a dialog to confirm before removing components
  _showConfirmModal: function(titleKey, messageKey) {
    const intl = this.get('intl');
    this.setProperties({
      confrimModalTitle: intl.findTranslationByKey(titleKey),
      confirmModalMessage: intl.findTranslationByKey(messageKey),
      showConfirmModal: true
    });
    Ember.run.schedule('afterRender', () => {
      this.$('#confirmModal').modal();
    });
  },

  // destroy the the confirm modal
  _hideConfirmModal() {
    this.setProperties({
      sectionToRemove: null,
      cardComponentToRemove: null,
      confrimModalTitle: '',
      confirmModalMessage: '',
      showConfirmModal: false
    });
  },

  actions: {
    cancelModal() {
      this._hideConfirmModal();
    },
    removeCard() {
      const cardComponentToRemove = this.get('cardComponentToRemove');
      if (cardComponentToRemove) {
        cardComponentToRemove.removeCard();
        this.modelChanged();
      }
      this._hideConfirmModal();
    },
    // TODO: should this take a section component instead?
    // and call removeSection() on the component for consistency w/ remove card
    onRemoveSection(sectionModel) {
      this.setProperties({
        sectionToRemove: sectionModel,
        removeAction: 'removeSection'
      });
      this._showConfirmModal('layout.pageLayoutEditor.removeSection',
        'layout.pageLayoutEditor.removeSectionMessage');
    },
    removeSection() {
      const sectionToRemove = this.get('sectionToRemove');
      if (sectionToRemove) {
        this._removeSection(this.get('sectionToRemove'));
      }
      this._hideConfirmModal();
      this.sendAction('onRemoveSection', this.get('model.sections'));
    },
    onRemoveCard(cardComponent) {
      this.setProperties({
        cardComponentToRemove: cardComponent,
        removeAction: 'removeCard'
      });
      this._showConfirmModal('layout.pageLayoutEditor.removeCard',
        'layout.pageLayoutEditor.removeCardMessage');
    },
    onEditSettings(sectionModel, editorComponentName){
      this.sendAction('onEditSettings', sectionModel, editorComponentName);
    },
    onModelChanged() {
      this.modelChanged();
    }
  }
});