ember-arcgis-page-layout
Version:
Page Layout infrastructure components
75 lines (68 loc) • 2.12 kB
JavaScript
/**
* section-controls/component.js
*/
import Ember from 'ember';
import layout from './template';
export default Ember.Component.extend({
layout:layout,
classNames:['section-controls-container'],
classNameBindings: ['invisible'],
attributeBindings:['style'],
layoutCoordinator: Ember.inject.service('layout-coordinator'),
invisible: Ember.computed.not('visible'),
componentPosition:null,
sectionComponent:null,
style:'',
init(){
this._super(...arguments);
this.get('layoutCoordinator').on('showSectionControls', Ember.run.bind(this, this.showSectionControls));
},
willDestroyElement(){
//console.log('section-controls:: '+ this.get('elementId') + ' is is destroying...');
this.get('layoutCoordinator').off('showSectionControls');
this.set('sectionComponent',null);
},
showSectionControls(sectionComponent){
if(sectionComponent){
this.set('sectionComponent', sectionComponent);
this.updateStyle( sectionComponent.get('componentPosition') );
this.set('invisible', false);
}else{
this.updateStyle( null );
this.set('invisible', true);
}
},
updateStyle(componentPosition){
let styleString = Ember.String.htmlSafe('');
let pos = componentPosition;
if(pos){
let lf = pos.right - 50;
//let tp = pos.top;
//Align with card controls
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 section
if(this.get('sectionComponent')){
this.set('sectionComponent.highlight', true);
}
},
mouseLeave() {
//hide the hilight
if(this.get('sectionComponent.highlight')){
this.set('sectionComponent.highlight', false);
}
},
actions: {
removeSection(){
this.updateStyle();
this.sendAction('onRemoveSection', this.get('sectionComponent.model'));
},
editSection(){
this.sendAction('onEditSettings', this.get('sectionComponent.model'), 'section-style-editor');
}
}
});