ember-arcgis-page-layout/addon/components/card-drop-targets/component.js

Page Layout infrastructure components

/**
 * card-drop-target/component.js
 */
import Ember from 'ember';
import layout from './template';

export default Ember.Component.extend({
  layout:layout,
  classNames:['card-drop-targets'],
  attributeBindings:['style'],
  layoutCoordinator: Ember.inject.service('layout-coordinator'),
  cardComponent:null,
  targetContainerStyle: Ember.String.htmlSafe('display:none;'),
  hasDockingTarget: Ember.computed.notEmpty('layoutCoordinator.draggingProperties.dockingTarget'),
  dockingTarget: Ember.computed.alias('layoutCoordinator.draggingProperties.dockingTarget'),
  dockMessage: '',

  init(){
    this._super(...arguments);
    this.get('layoutCoordinator').on('showCardDropTargets', Ember.run.bind(this, this.showCardDropTargets));
  },
  willDestroyElement(){
    //console.log('card-drop-targets:: ' + this.get('elementId') + ' is is destroying...');
    this.set('cardComponent',null);
    this.get('layoutCoordinator').off('showCardDropTargets');
  },

  showCardDropTargets(cardComponent){
    if(cardComponent){
      this.set('cardComponent', cardComponent);
      //check if the card is currently at it's minWidht or at 1
      let cardModel = cardComponent.get('model');
      if(cardModel.width === 1 || (cardModel.minWidth && cardModel.width === cardModel.minWidth)){
        console.log('Card is at minimum size - can not be a drop target');
      }else{
        this.updateTargetStyle( cardComponent.get('componentPosition') );
      }

    }else{
      this.set('cardComponent',null);
      this.updateTargetStyle( null );
    }
  },

  // targetContainerStyle:Ember.computed('cardComponent', function(){
  //   let styleString = Ember.String.htmlSafe('display:none;');
  //   let card = this.get('cardComponent');
  //   if(card){
  //     let pos = card.componentPosition;
  //     if(pos){
  //       styleString = Ember.String.htmlSafe('top:' + pos.top + 'px; left:' + pos.left + 'px;height:' + pos.height+ 'px;width:' + pos.width + 'px;');
  //     }
  //   }
  //   return styleString;
  // }),
  /**
   * Set the style of the drop-targets
   * Tried to do this via computed property
   * but it did not seem to work.
   */
  updateTargetStyle(componentPosition){
    let styleString = Ember.String.htmlSafe('display:none;');
    let pos = componentPosition;
    if(pos){
      styleString = Ember.String.htmlSafe('top:' + pos.top + 'px; left:' + pos.left + 'px;height:' + pos.height+ 'px;width:' + pos.width + 'px;');
    }
    this.set('targetContainerStyle',  styleString);
  },

  actions: {
    /**
     * fires on mouseEnter & mouseLeave for the targets
     */
    updateDockingTarget(dockTargetName){
      if(this.get('layoutCoordinator.draggingProperties')){
        if(dockTargetName){
          this.set('layoutCoordinator.draggingProperties.dockingTarget', dockTargetName);
        }else{
          this.set('layoutCoordinator.draggingProperties.dockingTarget', null);
        }
      }

    }
  }
});