Reimagin

by techunter

HTML

<div id="ri-canvas"></div>
<span>Double click dans le canva pour créer une frame</span>

CSS

#ri-canvas {
    width:800px;
    height:600px;
    background-color: lightgrey;
    position:relative;
}
.ri-frame {
    background-color: #EEE;
    border: 1px solid white;
}
.ri-selected {
    border : 1px dashed red;
    background-color:
}

JavaScript

(function ($) {
    $.reimagin = {
        draggable: {
            containment: 'parent',
            opacity: 0.35,
            stack: ".ri-frame",
            stop: function (event, ui) {
                var left = ($(this).css('left').replace(/[^-\d\.]/g, '') * 1.0).toFixed(2);
                var top = ($(this).css('top').replace(/[^-\d\.]/g, '') * 1.0).toFixed(2);
                $(this).data('rix', left).data('riy', top).css('left', left).css('top', top);
                console.log('x: ' + left + '/' + $(this).css('left') + ' - y :' + top);
            }
        },
        resizable: {
            stop: function (event, ui) {
                var w = ($(this).css('width').replace(/[^-\d\.]/g, '') * 1.0).toFixed(2);
                var h = ($(this).css('height').replace(/[^-\d\.]/g, '') * 1.0).toFixed(2);
                $(this).data('riwidth', w).data('riheight', h).css('width', w).css('height', h);
            }
        }
    };
    var methods = {
        init: function (options) {
            $(this).click(function (e) {
                e.stopPropagation();
                e.preventDefault();
                console.log('dblclick in #ri-canvas');
                $(this).reimagin('addFrame', {
                    riwidth: 200,
                    riheight: 100,
                    rix: 0,
                    riy: 0

                });
            }).click(function (e) {
                e.stopPropagation();
                e.preventDefault();
                console.log('click in #ri-canvas');
                $('.ri-selected', this).removeClass('ri-selected');
            });
        },
        addFrame: function (options) {
            $(this).append($('<div>').addClass('ri-frame ri-frame-new').css({
                width: options.riwidth,
                height: options.riheight,
                position: 'absolute',
                left: options.rix,
                top: options.riy
            }))
                .find('.ri-frame-new')
              ...