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',
		onSelectModel: 'dashboard_widget_select_model',
		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]);
		});
	});

	component.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){


		var selectMenu = function(id,menu){
			$('#widget-types').fill({
		        action : data.onConfigure,
		        id : id,
		        menu : menu
		    },function(response){
		    	$('#widget-types li').click(function(){
		    		$('#widget-types li').removeClass('active');
		    		$(this).addClass('active');
		    		$.action({
				        action : data.onSelectModel,
				        id : id,
				        model : $(this).attr('data-model')
				    },function(response){

				    });
		    	});
		    });
		}

		selectMenu(id,"type");

		$('#dashboard-configure-menu li').click(function(){
		    var li = $(this);
		    var menu = li.attr('data-menu');
		    li.parent().find('>li').removeClass('active');
		    li.addClass('active');

		    selectMenu(id,menu);
		});
	});
}