kiss/plugin/dashboard/js/component.js

function init_components_dashboard(input){
	var data = $.extend({
		column: 8,
		line: 8,
		onMove: 'dashboard_widget_move',
		onRemove: 'dashboard_widget_delete',
		onResize: 'dashboard_widget_resize',
		onConfigure: 'dashboard_widget_configure',
		onAdd: 'dashboard_widget_add'
	},{
		column: input.attr('data-column'),
		line: input.attr('data-line'),
		scope: input.attr('data-scope'),
		uid: input.attr('data-uid'),
		id: input.attr('data-id'),
	});

	component = input.data('component');
	if(!component){
		component = new Dashboard({
			element : input,
			columnNumber : data.column,
			lineNumber : data.line
		});
		input.data('component',component);
	}

	if(data.scope){
		$.action({
			action: 'dashboard_widget_search',
			scope: data.scope,
			uid: data.uid
		},function(response){
			component.addWidgets(response.widgets);
		});
	}

	/*component.addWidgets([{
		width : 1,
		height: 1,
		row: 3,
		column: 5,
		id: 1,
		icon : 'far fa-user',
		headerBackground : 'rgb(0, 123, 255)',
		label : 'Hello monde',
		content : '<p>Wazup ?</p>'
	},
	{
		width : 3,
		height: 3,
		row: 0,
		column: 1,
		id: 2,
		removable : false,
		resizeable : false,
		draggable : false,
		label : 'ByBy',
		content : '<p>Wazup 2 ?</p>'
	}]);*/

	component.on('placeholder-click',function(placeholder){
		$.action({
			action : data.onAdd,
			scope : data.scope,
			uid : data.uid,
			row : placeholder.row,
			column : placeholder.column
		},function(widget){
			component.addWidgets([widget]);
		});
	}).on('move',function(widget){
		console.log('Widget has moved', widget);

		$.action({
			action : data.onMove,
			widget : widget
		});

	}).on('resize',function(widget){
		console.log('Widget has resized', widget);

		$.action({
			action: data.onResize,
			widget: widget
		});

	}).on('delete',function(widget){
		if(!confirm('Êtes-vous sûr de vouloir supprimer ce widget?')) return true;
		console.log('Widget has removed', widget);

		$.action({
			action : data.onRemove,
			widget : widget
		});

	}).on('configure',function(id){
		
		$.action({
		        action : 'dashboard_widget_by_id',
		        id : id
		},function(response){
			var widget = $.extend(component.widgets[response.item.id],response.item);
			
			$('#dashboard-configure-menu li').off('click').click(function(){
					
			    var li = $(this);
			    var menu = li.attr('data-menu');
			    li.addClass('active').parent().find('>li').removeClass('active');
			 	
			 	switch(menu){
			 		case "model":

			 			$('#dashboard-configure-content').html($('#configure-model').html());

			 			init_components('#dashboard-configure-content');
			 			var modelList = $('#widget-models');
			 			modelList.fill({
					        action : 'dashboard_model_search',
					    },function(response){
					    	$('li',modelList).removeClass('active');
					    	$('li[data-model="'+widget.model+'"]',modelList).addClass('active');
					    	$('li',modelList).click(function(){
					    		$('#widget-models li').removeClass('active');
					    		$(this).addClass('active');
					    		$.action({
							        action : data.onConfigure,
							        id : widget.id,
							        model : $(this).attr('data-model')
							    },function(response){
							    });
					    	});
					    });
			 		break;
			 		case "style":
			 			$('#dashboard-configure-content').html($('#configure-style').html());
			 			$.action({
			 				 action : 'dashboard_widget_by_id',
			 				 id : widget.id
			 			},function(response){
			 				$('#configure-style-table').fromJson(response.item).off('change').change(function(){

			 					var form = $('#configure-style-table').toJson();

			 					widget.headerBackground = form['widget-header-background'];
			 					widget.bodyBackground = form['widget-body-background'];
			 					widget.bodyColor= form['widget-body-color'];
			 					widget.iconColor = form['widget-header-icon-color'];
			 					widget.titleColor = form['widget-header-title-color'];
			 					widget.icon = form['widget-header-icon'];

			 					var customiser = $('.dashboard-widget-customizer');
			 					$('.dashboard-widget-header',customiser).css('backgroundColor',widget.headerBackground+'!important');
			 					$('.widget-header-title',customiser).css('color',widget.titleColor+'!important');
			 					$('.dashboard-widget-content',customiser).css({
			 						backgroundColor : widget.bodyBackground+'!important',
			 						color : widget.bodyColor+'!important'
			 					});
			 					$('.widget-header-icon i',customiser).css('color',widget.iconColor+'!important');
			 					$('.widget-header-icon i',customiser).attr('class',widget.icon);

			 					component.widgets[widget.id] = widget;
			 					component.renderContent(widget.id);

			 					$.action({
			 						action :  data.onConfigure,
			 						id :  widget.id,
			 						headerBackground : widget.headerBackground,
									bodyBackground : widget.bodyBackground,
									bodyColor : widget.bodyColor,
									iconColor : widget.iconColor,
									titleColor : widget.titleColor,
									icon : widget.icon
			 					});
			 			});

			 			});
			 			init_components('#dashboard-configure-content');
			 		break;
			 	}
			   
			});
		
			$('#dashboard-configure-menu li[data-menu="model"]').click();
		});

		

	});
}