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

/**
 * Created by z on 21.2.2016.
 */

'use strict';

/**
 *
 * @param domAttributes
 * @param element
 * @constructor
 */
SUXESS.Layer = function (domAttributes, element) {

    domAttributes = domAttributes || {};

    if ( domAttributes.element === undefined ){

        domAttributes.element = '<li><span class="editor-element-name">Untitled</span></li>';

    }

    SUXESS.Renderable.call( this, domAttributes );

    this.canvasElement = element;

    SUXESS.eventManager.on( 'suxess:element-url-set', this.checkLink.bind(this) );

};

SUXESS.Layer.prototype = Object.create( SUXESS.Renderable.prototype );
SUXESS.Layer.constructor = SUXESS.Layer;

/**
 *
 * @returns {DOM}
 */
SUXESS.Layer.prototype.render = function () {

    var elm = SUXESS.Renderable.prototype.render.call(this);
    var nameElm = $(elm).find('.editor-element-name')[0];

    if( nameElm !== undefined && this.canvasElement !== undefined) {

        var elementName = this.canvasElement.getName();
        if ( elementName !== null )
            nameElm.innerHTML = elementName;

    }

    if( (this.canvasElement != null) && this.canvasElement.isLink() ) {

        var icon = '<span ' +
        'class="editor-element-link flaticon flaticon-link60" ' +
        'aria-hidden="true" ' +
        'data-toggle="tooltip" ' +
        'data-placement="left" ' +
        'title="This element is considered as link">' +
        '</span>';

        $(elm).prepend( icon );
    }

    if ( nameElm !== undefined ) {

        $(nameElm).editable({
            type: 'text',
            placement: 'right',
            validate: this.processNewName.bind(this),
            toggle: 'dblclick'
        });

    }

    return elm;

};

/**
 *
 * @param newName
 * @returns {string}
 */
SUXESS.Layer.prototype.processNewName = function ( newName ) {

    if ( newName === '' ) return 'Cannot be empty';

    this.setElementName( newName );

    SUXESS.eventManager.emit('suxess:element-name-updated', newName);

};

/**
 *
 * @param newName
 */
SUXESS.Layer.prototype.setElementName = function ( newName ) {

    if( this.canvasElement !== undefined ) {

        this.canvasElement.setName( newName );

    }

};

/**
 *
 * @param event
 * @param value
 */
SUXESS.Layer.prototype.checkLink = function ( event, value) {

    var elm = this._lastRender;

    if (elm == null)
        return;

    if( (this.canvasElement != null) && this.canvasElement.isLink() ){

        $(elm).find( '.flaticon' ).remove();

        var icon = '<span ' +
            'class="flaticon flaticon-link60" ' +
            'aria-hidden="true" ' +
            'data-toggle="tooltip" ' +
            'data-placement="left" ' +
            'title="This element is considered as link -> "'+value+'>' +
            '</span>';

        $(elm).prepend( icon );

    }
    else {

        $(elm).find( '.flaticon' ).remove();

    }

};