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