Source: suxess/mockup-editor/layer/layerManager.js

/**
 * 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));
    }
};