Source: suxess/mockup-editor/element.js

/**
 * Created by z on 6.12.2015.
 */
//style="width: 315px; right: auto; height: 219px; bottom: auto; left: 61px; top: 95px;"

'use strict';

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

    SUXESS.Renderable.call( this, domAttributes );


    this._image = null;
    this._lastState = {
        position: {x: 100, y:100},
        backgroundColor : 'white',
        layer: 0,
        image: null,
        name: null,
        /*jshint camelcase: false */
        mockup_url_id: -2,
        is_link: null
    };
    this._lastRender = null;

};


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

/**
 *
 * @param image
 */
SUXESS.Element.prototype.setImage = function ( image ) {

    this._lastState.image = image;

};

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

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

    if ( this._lastState.image != null ) {

        $(elm).append(
            '<img src="'+this._lastState.image.url+'" style="width:100%;height:100%" />'
        );

    }

    $(elm).resizable({
        ghost:true
    });

    // TODO  Set properly
    $(elm).draggable({
      scroll: false,
    });

    $(elm).css('position',   'absolute');
    $(elm).css('width',      this._lastState.width);
    $(elm).css('height',     this._lastState.height);
    $(elm).css('left',       this._lastState.position.x);
    $(elm).css('top',        this._lastState.position.y);
    $(elm).css('zIndex',     this._lastState.layer);
    $(elm).css('background', this._lastState.background_color);
    $(elm).addClass('editor-element');

    this._lastRender = elm;
    return elm;

};

/**
 *
 * @returns {{position: {x: number, y: number}, backgroundColor: string, layer: number, image: null, name: null, mockup_url_id: number, is_link: null}|*}
 */
SUXESS.Element.prototype.getState = function () {

    if( this._lastRender != null ){

        var e = $(this._lastRender);
        this._lastState.width = this._normalizeToInt(e.css('width'));
        this._lastState.height = this._normalizeToInt(e.css('height'));
        this._lastState.position.x = this._normalizeToInt(e.css('left'));
        this._lastState.position.y = this._normalizeToInt(e.css('top'));

    }

    return this._lastState;

};

/**
 *
 * @param s
 */
SUXESS.Element.prototype.setState = function (s) {

    for(var p in s) {

        this._lastState[p] = s[p];

    }

};

/**
 *
 * @param a
 * @returns {*}
 * @private
 */
SUXESS.Element.prototype._normalizeToInt = function ( a ) {

    if( typeof a === 'number' ) {

        return a;

    }

    if( typeof a === 'string' ) {

        a.replace(/px/g,'');

    }

    return parseInt(a,10);

};

/**
 *
 * @returns {number}
 */
SUXESS.Element.prototype.getLayer = function () {

    return this._lastState.layer;

};

/**
 *
 * @param l
 */
SUXESS.Element.prototype.setLayer = function ( l ) {

    this._lastState.layer = l;

    if( this._lastRender != null ){

        $(this._lastRender).css('zIndex', this._lastState.layer);

    }

};

/**
 *
 * @param newName
 */
SUXESS.Element.prototype.setName = function ( newName ) {

    this._lastState.name = newName;

};

/**
 *
 * @returns {null}
 */
SUXESS.Element.prototype.getName = function () {

    return this._lastState.name;

};

/**
 *
 * @param width
 */
SUXESS.Element.prototype.setWidth = function ( width ) {

    this._lastState.width = width;

};

/**
 *
 * @returns {*}
 */
SUXESS.Element.prototype.getWidth = function () {

    return this._lastState.width;

};

/**
 *
 * @param height
 */
SUXESS.Element.prototype.setHeight = function ( height ) {

    this._lastState.height = height;

};

/**
 *
 * @returns {*}
 */
SUXESS.Element.prototype.getHeight = function () {

    return this._lastState.height;

};

/**
 *
 * @param newMockupUrlId
 */
SUXESS.Element.prototype.setMockupUrlId = function ( newMockupUrlId ) {

    /*jshint camelcase: false */
    this._lastState.mockup_url_id = newMockupUrlId;
    this._lastState.is_link = ( newMockupUrlId !== -2 );
    SUXESS.eventManager.emit( 'suxess:element-url-set', newMockupUrlId );

};

/**
 *
 * @returns {*}
 */
SUXESS.Element.prototype.getMockupUrlId = function () {

    /*jshint camelcase: false */
    return this._lastState.mockup_url_id;

};

/**
 *
 * @returns {null}
 */
SUXESS.Element.prototype.isLink = function () {

    /*jshint camelcase: false */
    return this._lastState.is_link;

};