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

Page Layout infrastructure components

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

export default Ember.Component.extend({
  layout:layout,
  classNames: ['card-resizer'],
  classNameBindings:['isResizerVisible:visible'],
  layoutCoordinator: Ember.inject.service('layout-coordinator'),
  attributeBindings:['style'],

  visible:false,
  position : null,
  showRightSizer: false,
  showLeftSizer: false,
  edge: '',
  targetCardModel:null,
  impactedNeighbor:null,

  init(){
    this._super(...arguments);
    this.get('layoutCoordinator').on('showCardResizer', Ember.run.bind(this, this.showCardResizer));

  },
  willDestroyElement(){
    //console.log('card-resizer:: '+ this.get('elementId') + ' is is destroying...');
    this.get('layoutCoordinator').off('showCardResizer');
    this.set('targetCardModel',null);
    this.set('impactedNeighbor',null);
  },

  showCardResizer(options){

    //we use an object to se can just call this.setProperties all at once
    //after we've gatheredd all the info we need.
    let defaultModel = {
      visible:false,
      position : null,
      showRightSizer: false,
      showLeftSizer: false,
      impactedNeighborModel:null,
      targetCardModel:null
    };

    if(options){
      let cardPosition = options.component.get('componentPosition');
      let center = {
        top: cardPosition.top + (cardPosition.height / 2),
        left: cardPosition.left + (cardPosition.width / 2)
      };
      //get the targetRow...
      let rowComponent = this.get('layoutCoordinator').getComponentAtPosition('row',center);
      if(rowComponent){
        let cardCount = rowComponent.get('model.cards.length');
        if(cardCount > 1){
          let cardIdx = rowComponent.get('model.cards').indexOf(options.component.get('model'));

          //if it's not (first card, left edge ||  last card, right edge) we can show something
          if( !(cardIdx === 0 && options.edge === 'left') && !(cardIdx === (cardCount -1) && options.edge === 'right') ){

            let neighborIndex = ( options.edge === 'right' ) ? cardIdx + 1 : cardIdx -1;
            let impactedNeighborModel = rowComponent.get('model.cards').objectAt(neighborIndex);
            // console.log('Resizer Internals: ');
            // console.log('   Edge: ' + options.edge);
            // console.log('  impactedNeighborModel.width :' + impactedNeighborModel.width);
            // console.log('  impactedNeighborModel.minWidth :' + impactedNeighborModel.minWidth);
            // console.log('  card.width :' + options.component.get('model.width'));
            // console.log('  card.minWidth :' + options.component.get('model.minWidth'));

            if(options.edge === 'right' && options.component.get('model.width') > 1){
              defaultModel.showLeftSizer = true;
            }

            if(options.edge === 'left' && options.component.get('model.width') > 1){
              defaultModel.showRightSizer = true;
            }

            let leftPos = cardPosition[options.edge];

            //update the hash that we will apply to this component
            defaultModel.position = {
              "top":cardPosition.top,
              "bottom":cardPosition.bottom,
              "left":leftPos - 9,
              "height":cardPosition.height,
            };
            defaultModel.impactedNeighborModel= impactedNeighborModel;
            defaultModel.visible = true;
            defaultModel.targetCardModel= options.component.get('model');
            defaultModel.cardIndex= cardIdx;
            defaultModel.edge=options.edge;
          }
        }
      }
    }

    this.setProperties(defaultModel);
  },

  isResizerVisible: Ember.computed('visible', function(){
    return this.get('visible');
  }),

  style:Ember.computed('position', function(){
    let styleString = '';
    let pos = this.get('position');
    if(pos){
      let ht = pos.height - 20;
      let tp = pos.top + 10;
      let lf = pos.left + 10;
      styleString = 'top:' + tp + 'px; height:' + ht + 'px;left:' + lf + 'px;';
    }
    return Ember.String.htmlSafe(styleString);
  }),

  controlContainerStyle: Ember.computed('position', function(){
    let styleString = '';
    let pos = this.get('position');
    if(pos){
      let tp = ((pos.height - 20) / 2) - 14;
      styleString = 'top:' + tp + 'px;';
    }
    return Ember.String.htmlSafe(styleString);
  }),

  shiftEdge(edge, direction){
    let rightCard, leftCard;
    if(edge==="right"){
      leftCard  = this.get('targetCardModel');
      rightCard = this.get('impactedNeighborModel');
    }else{
      rightCard =this.get('targetCardModel');
      leftCard = this.get('impactedNeighborModel');
    }
    if(direction ==='right'){
      Ember.set(rightCard, 'width', rightCard.width - 1);
      Ember.set(leftCard, 'width', leftCard.width + 1);
    }else{
      Ember.set(leftCard, 'width', leftCard.width - 1);
      Ember.set(rightCard, 'width', rightCard.width + 1);
    }

    // we updated the model, gotsta let'em know
    this.sendAction('onResize', this.get('targetCardModel'), this.get('impactedNeighborModel'));

    //clear out the properties driving it all
    this.setProperties({
      visible:false,
      position : null,
      showRightSizer: false,
      showLeftSizer: false,
      edge: '',
      targetCardModel:null,
      impactedNeighbor:null
    });
  },

  actions: {
    shiftRight(){
      this.set('visible', false);
      this.shiftEdge( this.get('edge'),'right' );
    },
    shiftLeft(){
      this.set('visible', false);
      this.shiftEdge( this.get('edge'),'left' );
    }

  }
});