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