/**
* Created by z on 12.1.2016.
*/
'use strict';
/**
*
* @param editor
* @param domAttributes
* @constructor
*/
SUXESS.LayerManager = function ( editor, domAttributes ) {
domAttributes = domAttributes || {};
domAttributes.element =
domAttributes.element || '<ul><h3 class="text-muted text-center">Layers</h3></ul>';
SUXESS.Renderable.call( this, domAttributes );
this._domAttributes.class.push( 'editor-layer-manager' );
this._editor = editor;
this._elProperties = null;
this._elements = {};
this._lastRender = null;
this._idCounter = 1;
};
SUXESS.LayerManager.prototype = Object.create( SUXESS.Renderable.prototype );
SUXESS.LayerManager.constructor = SUXESS.LayerManager;
/**
*
* @param e
*/
SUXESS.LayerManager.prototype.addElement = function ( e ) {
var currentId = this._idCounter;
this._elements[currentId] = e;
this._idCounter++;
var layer = this._createLayer( e, currentId );
this._setClickFunction(e, layer);
this.addChild(layer);
if( e.getLayer() === 0){
e.setLayer(currentId);
}
this._children.sort(function(e1,e2){
return e2.canvasElement.getLayer() - e1.canvasElement.getLayer();
}.bind(this));
if ( this._lastRender !== null ) {
$(this._lastRender).children('.editor-layer').remove();
for (var i = 0; i < this._children.length; i++ ) {
$(this._lastRender).append( this._children[i].render() );
}
}
};
/**
*
* @returns {Array}
*/
SUXESS.LayerManager.prototype.getElements = function () {
var elementArray = [];
for( var id in this._elements ) {
elementArray.push(this._elements[id]);
}
return elementArray;
};
/**
*
* @returns {DOM}
*/
SUXESS.LayerManager.prototype.render = function () {
var domManager = SUXESS.Renderable.prototype.render.call(this);
$( domManager ).sortable({
axis: 'y',
items: '> li',
update: this._setLayers.bind(this)
});
this._lastRender = domManager;
return domManager;
};
/**
*
* @param event
* @param ui
* @private
*/
SUXESS.LayerManager.prototype._setLayers = function ( event, ui ) {
var ids = $(this._lastRender).sortable('toArray',{attribute:'layer-id'});
var size = ids.length;
for( var i = 0; i < size; i++ ) {
this._elements[ids[i]].setLayer( size-i );
}
};
/**
*
* @param e
* @param id
* @returns {SUXESS.Layer}
* @private
*/
// TODO create class for layer renderable
SUXESS.LayerManager.prototype._createLayer = function ( e, id ) {
var l = new SUXESS.Layer({
class:['editor-layer'],
attributes: { 'layer-id': id },
element: '<li><span class="editor-element-name">Not named<span></li>'
}, e);
return l;
};
/**
*
* @param props
*/
SUXESS.LayerManager.prototype.setElProperties = function ( props ) {
this._elProperties = props;
};
/**
*
* @param element
* @param layer
* @private
*/
SUXESS.LayerManager.prototype._setClickFunction = function ( element, layer ) {
var props = this._elProperties;
var f = function ( ) {
if(props !== null) {
props.setProperties(element);
}
$('.editor-element-selected').removeClass('editor-element-selected');
$(element.getRender()).addClass('editor-element-selected');
$(layer.getRender()).addClass('editor-element-selected');
};
element.addDomCallback('click',f);
layer.addDomCallback('click',f);
if(props !== null) {
element.addDomCallback('resize', props.updateSize.bind(props));
SUXESS.eventManager.on('suxess:element-name-updated', props.updateName.bind(props));
SUXESS.eventManager.on('suxess:element-url-set', props.updateUrl.bind(props));
}
};