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

/**
 * Created by thomas on 26.4.2016.
 */

'use strict';

/**
 *
 * @param domAttributes
 * @constructor
 */
SUXESS.ElementProperties = function ( domAttributes ) {

    domAttributes = domAttributes || {};
    domAttributes.element =
        domAttributes.element ||
        '<ul id="propList"><h4 class="text-muted text-center">Element properties</h4></ul>';

    SUXESS.Renderable.call( this, domAttributes );

    this._domAttributes.class.push( 'editor-element-properties' );

    this._lastRender = null;
    this._canvasElement = null;
    this._mockupsHash = null;

};

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

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

    var domManager = SUXESS.Renderable.prototype.render.call(this);

    this._lastRender = domManager;
    return domManager;

};

/**
 *
 * @param hash
 */
SUXESS.ElementProperties.prototype.setMockupsHash = function (hash) {

    this._mockupsHash = hash;

};

/**
 *
 * @returns {*}
 */
SUXESS.ElementProperties.prototype.getMockupsHash = function () {

    return this._mockupsHash;

};

/**
 *
 * @param element
 */
SUXESS.ElementProperties.prototype.setProperties = function ( element ) {

    this._canvasElement = element;
    var elm = this._lastRender;
    var hash = this._mockupsHash;

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

    if(hash !== null) {

        if(hash[element.getMockupUrlId()] == undefined){
            element.setMockupUrlId(-2);
        }

        /* jshint ignore:start */
        $(elm).append(
            "<li class='prop'>" +
            "<span class='text-muted'>Name: </span>" +
            "<span id='name'>" + this.truncateString(element.getName()) + "</span>" +
            "</li>" +
            "<li class='prop'>" +
            "<span class='text-muted'>Width: </span>" +
            "<span id='width'>" + element.getWidth() + "</span>px" +
            "</li>" +
            "<li class='prop'>" +
            "<span class='text-muted'>Height: </span>" +
            "<span id='height'>" + element.getHeight() + "</span>px" +
            "</li>" +
            "<li class='prop'>" +
            "<span class='text-muted'>LeadsTo: </span>" +
            "<span id='url'>" + this.truncateString(hash[element.getMockupUrlId()].name) + "</span>" +
            "</li>");
        /* jshint ignore:end */
    }
    //var widthElm = $(elm).find("#width")[0];
    //var heightElm = $(elm).find("#height")[0];

    //$(widthElm).editable({
    //    type: 'text',
    //    placement: 'right',
    //    validate: this.validateValue.bind(this, 'width', element),
    //    toggle: 'dblclick'
    //});
    //
    //$(heightElm).editable({
    //    type: 'text',
    //    placement: 'right',
    //    validate: this.validateValue.bind(this, 'height', element),
    //    toggle: 'dblclick'
    //});

};
/**
 *
 * @param label
 * @returns {*}
 */
SUXESS.ElementProperties.prototype.truncateString = function( label ){

    if (label.length > 15) {

        label = label.substring(0, 15);
        label += '...';

    }
    return label;
};

//SUXESS.ElementProperties.prototype.validateValue = function(prop, element, value){
//
//    value = parseInt(value);
//
//    if ((typeof(value) == "number") && (value >= 0)) {
//        if(prop === 'width') {
//            element.setWidth(value);
//        }
//        else {
//            element.setHeight(value);
//        }
//    }
//};

/**
 *
 * @param event
 * @param ui
 */
SUXESS.ElementProperties.prototype.updateSize = function ( event, ui ) {

    var elm = this._lastRender;

    this._canvasElement.setWidth(ui.size.width);
    this._canvasElement.setHeight(ui.size.height);

    $( elm ).find('#width').text( ui.size.width );
    $( elm ).find('#height').text( ui.size.height );

};

/**
 *
 * @param event
 * @param name
 */
SUXESS.ElementProperties.prototype.updateName = function ( event, name ) {

    var elm = this._lastRender;
    $( elm ).find('#name').text(this.truncateString(name));

};

/**
 *
 * @param event
 * @param value
 */
SUXESS.ElementProperties.prototype.updateUrl = function ( event, value ) {

    var elm = this._lastRender;
    var hash = this._mockupsHash;
    var element = this._canvasElement;

    if(hash !== null) {

        if(hash[value] == undefined){
            element.setMockupUrlId(-2);
        }

        $(elm).find('#url').text(this.truncateString(hash[value].name));
    }

};

/**
 *
 */
SUXESS.ElementProperties.prototype.clearProperties = function ( ) {

    var elm = this._lastRender;

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

};