ember-arcgis-page-layout
Version:
Page Layout infrastructure components
85 lines (77 loc) • 2.51 kB
JavaScript
/**
* card-controls/component.js
*/
import Ember from 'ember';
import layout from './template';
export default Ember.Component.extend({
layout:layout,
classNames:['card-controls-container'],
classNameBindings: ['invisible'],
attributeBindings:['style'],
layoutCoordinator: Ember.inject.service('layout-coordinator'),
invisible: Ember.computed.not('visible'),
componentPosition:null,
sectionComponent:null,
style:Ember.String.htmlSafe('display:none;'),
init(){
this._super(...arguments);
//add handlers for layoutCoordinator events
this.get('layoutCoordinator').on('showControls', Ember.run.bind(this, this.showControls));
},
willDestroyElement(){
this.set('sectionComponent', null);
this.get('layoutCoordinator').off('showControls');
},
showControls(cardComponent){
this.set('cardComponent', cardComponent);
if(cardComponent){
this.updateStyle( cardComponent.get('componentPosition') );
this.set('invisible', false);
}else{
this.updateStyle( null );
this.set('invisible', true);
}
},
updateStyle(componentPosition){
let styleString = Ember.String.htmlSafe('display:none;');
let pos = componentPosition;
if(pos){
//Upper-right
let lf = pos.right - 98;
let tp = pos.top;
//Upper-left
//let lf = pos.left + 10;
//let tp = pos.top + 10;
styleString = Ember.String.htmlSafe('top:' + tp + 'px; left:' + lf + 'px;');
}
this.set('style', styleString);
},
mouseEnter() {
//show the hilight around the current card
if(this.get('cardComponent')){
this.set('cardComponent.highlight', true);
}
},
mouseLeave() {
//hide the hilight
if(this.get('cardComponent.highlight')){
this.set('cardComponent.highlight', false);
}
},
actions: {
removeCard(){
this.updateStyle();
this.sendAction('onRemoveCard', this.get('cardComponent'));
},
editCard(){
// TODO: better way to identify which types of cards use inline editor
if (this.get('cardComponent.model.component.name') === 'markdown-card') {
// toggle inline editing
this.set('cardComponent.model.showEditor', !this.get('cardComponent.model.showEditor'));
} else {
// signal to the container to show the eidtor for this card
this.sendAction('onEditCard', this.get('cardComponent.model.component.settings'), this.get('cardComponent.model.component.name') + '-editor');
}
}
}
});