class Dashboard { //@TODO: // - Pouvoir indiquer que la dashboard à une taille dynamique : // - On laisse toujours 2-3 lignes de placeholder sous le dernier widget // - On recalcule le nb de lignes de placeholder en plus à afficher sous le dernier widget à chaque add / resize / move / delete d'un widget constructor(options) { this.options = $.extend({ columnNumber : 1, lineNumber : 1, placeHolderPadding : 10 },options); this.widgets = {}; var grid = '
'; for(var u=0 ; u
'; } } grid += ''; this.grid = $(grid); this.options.element.addClass('dashboard-container'); this.options.element.css({width:'100%',height:'100%'}); this.options.element.append(this.grid); this.widgetTemplate = $('#dashboard-widget-template').html(); this.placeHolders = $('.dashboard-placeholder'); this.placeHolders.initialWidth = this.placeHolders.eq(0).outerWidth(); this.placeHolders.initialHeight = this.placeHolders.eq(0).outerHeight(); this.placeHolders.render = function(placeholder, offsets, delay){ var delay = delay!=null ? delay : 200; var offsets = $.extend({ rowStart: 0, rowEnd: 0, columnStart: 0, columnEnd: 0 }, offsets); var rowStart = parseInt(placeholder.attr('data-row'))+1+parseInt(offsets.rowStart); var rowEnd = parseInt(placeholder.attr('data-row'))+1+parseInt(offsets.rowEnd); var columnStart = parseInt(placeholder.attr('data-column'))+1+parseInt(offsets.columnStart); var columnEnd = parseInt(placeholder.attr('data-column'))+1+parseInt(offsets.columnEnd); setTimeout(function(){ placeholder.css({ 'grid-row': rowStart+'/'+rowEnd, 'grid-column': columnStart+'/'+columnEnd, }); }, delay); } this.triggers = []; var object = this; this.placeHolders.droppable({ tolerance: 'pointer', classes: { "ui-droppable-hover": 'drag-over' }, over: function(event, ui){ //@TODO: // - Gérer les overflow de la grid => ex: lacher un widget en bas de gris doit recalculer le placeholder le plus bas possible sans sortir du cadre // - Ne pas pouvoir superposer des widgets var currentWidget = ui.draggable; var offsets = { rowEnd: currentWidget.attr('data-height'), columnEnd: currentWidget.attr('data-width') } //On custom la grid du placeholder avec la taille du widget object.placeHolders.render($(this), offsets, 0); }, out: function(event, ui){ //On reset la grid du placeholder object.placeHolders.render($(this)); }, drop: function(event, ui) { var placeholder = $(this); //On reset la grid du placeholder object.placeHolders.render(placeholder); var data = placeholder.data(); var widgetId = ui.draggable.attr('data-id'); object.widgets[widgetId].column = data.column; object.widgets[widgetId].row = data.row; object.renderPositions(); object.trigger('move', object.widgetToArray(object.widgets[widgetId])); } }); $(window).resize(function() { object.renderPositions(); }); $(window).mousemove(function(e){ if(!object.resizing) return; $('.dashboard-widget').css('z-index', ''); object.resizing.element.css('z-index', 1000); var objectPosition = object.resizing.element.position(); object.resizing.element.css('width',(e.clientX - objectPosition.left)+'px'); object.resizing.element.css('height',(e.clientY - objectPosition.top - 50)+'px'); //On affiche la taille finale du widget avec de la couleur sur les placeholders pour guider le resize object.placeHolders.removeClass('drag-over'); var width = Math.round(object.resizing.element.outerWidth() / object.placeHolders.initialWidth); var height = Math.round(object.resizing.element.outerHeight() / object.placeHolders.initialHeight); var resizePlaceholder = []; for(var i=parseInt(object.resizing.column); i