|
|
@@ -1,72 +1,136 @@
|
|
|
class Dashboard {
|
|
|
- constructor(options) {
|
|
|
- this.options = $.extend({
|
|
|
+ //@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 = {};
|
|
|
+ },options);
|
|
|
+ this.widgets = {};
|
|
|
|
|
|
- var grid = '<div class="dashboard-grid" >';
|
|
|
- for(var u =0 ; u<options.lineNumber;u++){
|
|
|
- for(var i =0 ; i<options.columnNumber;i++){
|
|
|
- grid += '<div data-row="'+u+'" data-column="'+i+'" style="grid-row: '+(u+1)+" / "+(u+1)+";grid-column: "+(i+1)+" / "+(i+1)+';padding:'+this.options.placeHolderPadding+'px;" class="dashboard-placeholder"><i class="fa fa-plus placeholder-add"></i></div>';
|
|
|
+ var grid = '<div class="dashboard-grid">';
|
|
|
+ for(var u=0 ; u<options.lineNumber;u++){
|
|
|
+ for(var i=0 ; i<options.columnNumber;i++){
|
|
|
+ grid += '<div data-row="'+u+'" data-column="'+i+'" style="grid-area: '+(u+1)+" / "+(i+1)+" / "+(u+1)+" / "+(i+1)+';" class="dashboard-placeholder"><i class="fa fa-plus placeholder-add"></i></div>';
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- grid += '</div>';
|
|
|
- this.grid = $(grid);
|
|
|
- this.options.element.addClass('dashboard-container');
|
|
|
- this.options.element.css({width:'100%',height:'1000px'});
|
|
|
- this.options.element.append(this.grid);
|
|
|
- this.widgetTemplate = $('#dashboard-widget-template').html();
|
|
|
- this.placeHolders = $('.dashboard-placeholder');
|
|
|
- this.triggers = [];
|
|
|
-
|
|
|
-
|
|
|
- var object = this;
|
|
|
-
|
|
|
- this.placeHolders.droppable({
|
|
|
- tolerance : 'pointer',
|
|
|
- classes: {
|
|
|
- "ui-droppable-hover": 'drag-over'
|
|
|
- },
|
|
|
- drop: function( event, ui ) {
|
|
|
- var data = $(this).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');
|
|
|
-
|
|
|
- });
|
|
|
- $(window).mouseup(function(){
|
|
|
- if(!object.resizing) return;
|
|
|
- $('.dashboard-placeholder').removeClass('bordered');
|
|
|
- var firstPlaceHolder = object.placeHolders.eq(0);
|
|
|
- var placeholderWidth = firstPlaceHolder.outerWidth();
|
|
|
- var placeholderHeight = firstPlaceHolder.outerHeight();
|
|
|
-
|
|
|
- object.widgets[object.resizing.id].width = Math.round(object.resizing.element.outerWidth() / placeholderWidth);
|
|
|
- object.widgets[object.resizing.id].height = Math.round(object.resizing.element.outerHeight() / placeholderHeight);
|
|
|
- object.renderPositions();
|
|
|
- object.trigger('resize',object.widgetToArray(object.widgets[object.resizing.id]) );
|
|
|
- object.resizing = null;
|
|
|
- });
|
|
|
+ grid += '</div>';
|
|
|
+
|
|
|
+ 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<parseInt(parseInt(object.resizing.column)+width); i++){
|
|
|
+ for(var j=parseInt(object.resizing.row); j<parseInt(parseInt(object.resizing.row)+height); j++){
|
|
|
+ resizePlaceholder.push($('.dashboard-placeholder[data-row="'+j+'"][data-column="'+i+'"]').get(0));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ $(resizePlaceholder).addClass('drag-over')
|
|
|
+ });
|
|
|
+ $(window).mouseup(function(){
|
|
|
+ if(!object.resizing) return;
|
|
|
+ object.placeHolders.removeClass('drag-over bordered');
|
|
|
+
|
|
|
+ var width = Math.round(object.resizing.element.outerWidth() / object.placeHolders.initialWidth);
|
|
|
+ var height = Math.round(object.resizing.element.outerHeight() / object.placeHolders.initialHeight);
|
|
|
+
|
|
|
+ object.widgets[object.resizing.id].width = width;
|
|
|
+ object.widgets[object.resizing.id].height = height;
|
|
|
+
|
|
|
+ object.widgets[object.resizing.id].element.attr({
|
|
|
+ 'data-width': width,
|
|
|
+ 'data-height': height,
|
|
|
+ })
|
|
|
+
|
|
|
+ object.renderPositions();
|
|
|
+ object.trigger('resize', object.widgetToArray(object.widgets[object.resizing.id]));
|
|
|
+ object.resizing = null;
|
|
|
+ });
|
|
|
|
|
|
$('.dashboard-placeholder').click(function(){
|
|
|
var placeholder = $(this);
|
|
|
@@ -76,103 +140,113 @@ class Dashboard {
|
|
|
column: placeholder.attr('data-column')
|
|
|
});
|
|
|
});
|
|
|
+ }
|
|
|
|
|
|
+ on(event,callback){
|
|
|
+ if(!this.triggers[event]) this.triggers[event] = [];
|
|
|
+ this.triggers[event].push(callback);
|
|
|
|
|
|
- }
|
|
|
-
|
|
|
- on(event,callback){
|
|
|
- if(!this.triggers[event]) this.triggers[event] = [];
|
|
|
- this.triggers[event].push(callback);
|
|
|
- return this;
|
|
|
- }
|
|
|
- trigger(event,data){
|
|
|
- if(!this.triggers[event]) return;
|
|
|
- if(!data) data = {};
|
|
|
- var abort = false;
|
|
|
- for(var k in this.triggers[event]){
|
|
|
- if(this.triggers[event][k](data) === true) abort = true;
|
|
|
- }
|
|
|
- return abort;
|
|
|
- }
|
|
|
-
|
|
|
- //Ajoute un ou plusieurs widgets
|
|
|
- addWidgets(widgets){
|
|
|
- var object = this;
|
|
|
- for(var k in widgets){
|
|
|
- var widgetOptions = $.extend({
|
|
|
- id : Math.floor(Math.random() * 100)+Date.now(),
|
|
|
- draggable : true,
|
|
|
- resizeable : true,
|
|
|
- removable : true,
|
|
|
- width: 1,
|
|
|
- height : 1,
|
|
|
- row : 0,
|
|
|
- column :0,
|
|
|
- options : [],
|
|
|
- label : 'Sans titre',
|
|
|
- content : "Aucun contenu"
|
|
|
- },widgets[k]);
|
|
|
-
|
|
|
-
|
|
|
- widgetOptions.options.push({icon : 'fas fa-ellipsis-v', class:'widget-option-configure' , label : 'Configurer' , click : function(element){ object.configureWidget($(element).closest('.dashboard-widget').attr('data-id')); }});
|
|
|
- widgetOptions.options.push({icon : 'fa fa-times', class:'widget-option-delete' , label : 'Supprimer' , click : function(element){ object.deleteWidget($(element).closest('.dashboard-widget').attr('data-id')); }});
|
|
|
-
|
|
|
-
|
|
|
- var widgetElement = $(object.widgetTemplate);
|
|
|
- widgetOptions.element = widgetElement;
|
|
|
- object.widgets[widgetOptions.id] = widgetOptions;
|
|
|
- object.grid.append(widgetElement);
|
|
|
-
|
|
|
- widgetElement.draggable(
|
|
|
- {
|
|
|
- handle: '.widget-header-title',
|
|
|
- containment: object.grid,
|
|
|
- "ui-draggable-dragging" : "widget-dragging",
|
|
|
- start : function(event){
|
|
|
-
|
|
|
- var element = $(event.currentTarget);
|
|
|
- if(!element.hasClass('widget-draggable'))return false;
|
|
|
-
|
|
|
- $('.dashboard-widget').css('z-index','');
|
|
|
- element.css('z-index',1000);
|
|
|
- }
|
|
|
- }
|
|
|
- );
|
|
|
- widgetElement.find('.dashboard-widget-resize').mousedown(function(){
|
|
|
- var element = $(this).closest('.dashboard-widget');
|
|
|
- if(!element.hasClass('widget-resizeable'))return;
|
|
|
- object.resizing = object.widgets[element.attr('data-id')];
|
|
|
- $('.dashboard-placeholder').addClass('bordered');
|
|
|
- });
|
|
|
- widgetElement.find('.widget-option-delete').click(function(){
|
|
|
- object.deleteWidget($(this).closest('.dashboard-widget').attr('data-id'));
|
|
|
- });
|
|
|
-
|
|
|
- object.trigger('add',object.widgetToArray(widgetOptions));
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+
|
|
|
+ trigger(event,data){
|
|
|
+ if(!this.triggers[event]) return;
|
|
|
+ if(!data) data = {};
|
|
|
+ var abort = false;
|
|
|
+ for(var k in this.triggers[event]){
|
|
|
+ if(this.triggers[event][k](data) === true) abort = true;
|
|
|
+ }
|
|
|
+ return abort;
|
|
|
+ }
|
|
|
+
|
|
|
+ //Ajoute un ou plusieurs widgets
|
|
|
+ addWidgets(widgets){
|
|
|
+ var object = this;
|
|
|
+ for(var k in widgets){
|
|
|
+ var widgetOptions = $.extend({
|
|
|
+ id: Math.floor(Math.random() * 100) + Date.now(),
|
|
|
+ draggable: true,
|
|
|
+ resizeable: true,
|
|
|
+ removable: true,
|
|
|
+ width: 1,
|
|
|
+ height: 1,
|
|
|
+ row: 0,
|
|
|
+ column:0,
|
|
|
+ options: [],
|
|
|
+ label: 'Sans titre',
|
|
|
+ content: "Aucun contenu"
|
|
|
+ }, widgets[k]);
|
|
|
+
|
|
|
+ widgetOptions.options.push({
|
|
|
+ icon: 'fas fa-ellipsis-v',
|
|
|
+ class: 'widget-option-configure',
|
|
|
+ label: 'Configurer',
|
|
|
+ click: function(element){
|
|
|
+ object.configureWidget($(element).closest('.dashboard-widget').attr('data-id'));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ widgetOptions.options.push({
|
|
|
+ icon: 'fa fa-times',
|
|
|
+ class: 'widget-option-delete',
|
|
|
+ label: 'Supprimer',
|
|
|
+ click: function(element){
|
|
|
+ object.deleteWidget($(element).closest('.dashboard-widget').attr('data-id'));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ object.addWidget(widgetOptions)
|
|
|
}
|
|
|
+ //Gestion de la disposition des widgets sur la dashboard
|
|
|
+ this.renderPositions();
|
|
|
+ }
|
|
|
+
|
|
|
+ //Ajout d'un widget en fonction de paramètre
|
|
|
+ addWidget(widgetOptions){
|
|
|
+ var object = this;
|
|
|
+ //Ajout du widget au tableau de widgets interne
|
|
|
+ object.widgets[widgetOptions.id] = widgetOptions;
|
|
|
|
|
|
+ //Render de la template pour les propriétés du widget courant
|
|
|
+ object.renderContent(widgetOptions.id);
|
|
|
|
|
|
- this.renderContents();
|
|
|
- this.renderPositions();
|
|
|
+ var widgetElement = $(object.widgets[widgetOptions.id].element);
|
|
|
+ object.grid.append(widgetElement);
|
|
|
|
|
|
-
|
|
|
- }
|
|
|
+ widgetElement.draggable({
|
|
|
+ handle: '.widget-header-title',
|
|
|
+ containment: object.grid,
|
|
|
+ "ui-draggable-dragging" : "widget-dragging",
|
|
|
+ start: function(event){
|
|
|
+ var element = $(event.currentTarget);
|
|
|
+ if(!element.hasClass('widget-draggable')) return false;
|
|
|
|
|
|
- //Supprime un widget en fonctiond e son id
|
|
|
- deleteWidget(id){
|
|
|
- var widget = this.widgets[id];
|
|
|
- if(this.trigger('delete',this.widgetToArray(widget))) return;
|
|
|
- this.widgets[id].element.remove();
|
|
|
- }
|
|
|
+ $('.dashboard-widget').css('z-index','');
|
|
|
+ element.css('z-index',1000);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ widgetElement.find('.dashboard-widget-resize').mousedown(function(){
|
|
|
+ var element = $(this).closest('.dashboard-widget');
|
|
|
+ if(!element.hasClass('widget-resizeable'))return;
|
|
|
+ object.resizing = object.widgets[element.attr('data-id')];
|
|
|
+ $('.dashboard-placeholder').addClass('bordered');
|
|
|
+ });
|
|
|
+ object.trigger('add', object.widgetToArray(widgetOptions));
|
|
|
+ }
|
|
|
|
|
|
- configureWidget(id){
|
|
|
- $('#dashboardModal').modal('show');
|
|
|
- this.trigger('configure',id);
|
|
|
- }
|
|
|
+ //Supprime un widget en fonction de son id
|
|
|
+ deleteWidget(id){
|
|
|
+ var widget = this.widgets[id];
|
|
|
+ if(this.trigger('delete',this.widgetToArray(widget))) return;
|
|
|
+ this.widgets[id].element.remove();
|
|
|
+ }
|
|
|
+
|
|
|
+ configureWidget(id){
|
|
|
+ $('#dashboardModal').modal('show');
|
|
|
+ this.trigger('configure', id);
|
|
|
+ }
|
|
|
|
|
|
- widgetToArray(widget){
|
|
|
- if(!widget) return {};
|
|
|
- return {
|
|
|
+ widgetToArray(widget){
|
|
|
+ if(!widget) return {};
|
|
|
+ return {
|
|
|
id: widget.id,
|
|
|
draggable: widget.draggable,
|
|
|
resizeable: widget.resizeable,
|
|
|
@@ -186,55 +260,65 @@ class Dashboard {
|
|
|
icon: widget.icon,
|
|
|
headerBackground: widget.headerBackground
|
|
|
};
|
|
|
- }
|
|
|
-
|
|
|
- //rafraichis le contenu des widgets en fonction du tableaud e widgets interne
|
|
|
- renderContents() {
|
|
|
- for(var k in this.widgets){
|
|
|
- var widget = this.widgets[k];
|
|
|
- if(widget.id) widget.element.attr('data-id',widget.id);
|
|
|
- if(widget.label !== null) widget.element.find('.widget-header-title').html(widget.label);
|
|
|
- if(widget.icon !== null) widget.element.find('.widget-header-icon i').attr('class',widget.icon);
|
|
|
+ }
|
|
|
+
|
|
|
+ //Render d'un widget en fonction de ses paramètres
|
|
|
+ //Gère le refresh du widget si l'élément est déjà existant
|
|
|
+ renderContent(id) {
|
|
|
+ var widget = this.widgets[id];
|
|
|
+ var widgetElement = widget.element!=null ? widget.element : $(Mustache.render(this.widgetTemplate, widget));
|
|
|
+
|
|
|
+ if(widget.label !== null) widgetElement.find('.widget-header-title').html(widget.label);
|
|
|
+ if(widget.icon !== null) widgetElement.find('.widget-header-icon i').attr('class', widget.icon);
|
|
|
+ if(widget.headerBackground !== null) widgetElement.find('.dashboard-widget-header').css('backgroundColor',widget.headerBackground);
|
|
|
+
|
|
|
if(widget.options !== null){
|
|
|
var tpl = '<li class="{{class}}" title="{{label}}"><i class="{{icon}}"></i></li>';
|
|
|
- widget.element.find('.widget-header-options').html('');
|
|
|
+ widgetElement.find('.widget-header-options').html('');
|
|
|
for(var u in widget.options){
|
|
|
- var option = $(Mustache.render(tpl,widget.options[u]));
|
|
|
-
|
|
|
+ var option = $(Mustache.render(tpl, widget.options[u]));
|
|
|
+
|
|
|
if(widget.options[u].click){
|
|
|
option.data('click',widget.options[u].click);
|
|
|
option.click(function(){
|
|
|
$(this).data('click')(this);
|
|
|
});
|
|
|
}
|
|
|
- widget.element.find('.widget-header-options').append(option);
|
|
|
+ widgetElement.find('.widget-header-options').append(option);
|
|
|
}
|
|
|
}
|
|
|
- if(widget.headerBackground !== null) widget.element.find('.dashboard-widget-header').css('backgroundColor',widget.headerBackground);
|
|
|
- widget.element
|
|
|
- .toggleClass('widget-draggable',widget.draggable)
|
|
|
- .toggleClass('widget-resizeable',widget.resizeable)
|
|
|
- .toggleClass('widget-removable',widget.removable);
|
|
|
- if(widget.content !== null) widget.element.find('.dashboard-widget-content').html(widget.content);
|
|
|
+ widgetElement
|
|
|
+ .toggleClass('widget-draggable', widget.draggable)
|
|
|
+ .toggleClass('widget-resizeable', widget.resizeable)
|
|
|
+ .toggleClass('widget-removable', widget.removable);
|
|
|
+ if(widget.content !== null) widgetElement.find('.dashboard-widget-content').html(widget.content);
|
|
|
+
|
|
|
+ widget.element = widgetElement;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- //resize / replace les wicgets en fonction de la taille de la fenetre et des cellules de grilles
|
|
|
- renderPositions() {
|
|
|
- var firstPlaceHolder = this.placeHolders.eq(0);
|
|
|
- var placeholderWidth = firstPlaceHolder.outerWidth();
|
|
|
- var placeholderHeight = firstPlaceHolder.outerHeight();
|
|
|
-
|
|
|
- for(var k in this.widgets){
|
|
|
- var widget = this.widgets[k];
|
|
|
- var cell = $('[data-row="'+widget.row+'"][data-column="'+widget.column+'"]').position();
|
|
|
- if(!cell) continue;
|
|
|
- widget.element.css({
|
|
|
- width : ((widget.width * placeholderWidth)-(this.options.placeHolderPadding*2))+'px',
|
|
|
- height : ((widget.height * placeholderHeight)-(this.options.placeHolderPadding*2))+'px',
|
|
|
- top : (cell.top+this.options.placeHolderPadding)+'px',
|
|
|
- left : (cell.left+this.options.placeHolderPadding)+'px'
|
|
|
- });
|
|
|
+
|
|
|
+ //Rafraichit le contenu des widgets en fonction du tableau de widgets interne
|
|
|
+ renderContents() {
|
|
|
+ for(var k in this.widgets){
|
|
|
+ var widget = this.widgets[k];
|
|
|
+ this.renderContent(widget.id);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //Resize / Replace les widgets en fonction de la taille de la fenetre et des cellules de grilles
|
|
|
+ renderPositions(){
|
|
|
+ var placeholderWidth = this.placeHolders.initialWidth;
|
|
|
+ var placeholderHeight = this.placeHolders.initialHeight;
|
|
|
+
|
|
|
+ for(var k in this.widgets){
|
|
|
+ var widget = this.widgets[k];
|
|
|
+ var cell = $('[data-row="'+widget.row+'"][data-column="'+widget.column+'"]').position();
|
|
|
+ if(!cell) continue;
|
|
|
+ widget.element.css({
|
|
|
+ width: ((widget.width * placeholderWidth)-(this.options.placeHolderPadding*2))+'px',
|
|
|
+ height: ((widget.height * placeholderHeight)-(this.options.placeHolderPadding*2))+'px',
|
|
|
+ top: (cell.top+this.options.placeHolderPadding)+'px',
|
|
|
+ left: (cell.left+this.options.placeHolderPadding)+'px'
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
vmorreel