-Dashboard: Fin amélioration gestion du placeholder au move et au resize

plugin/dashboard/css/component.css

@@ -36,11 +36,11 @@
     background: transparent;
 }
 
-
 .dashboard-container {
 	background-color: #efefef;
 }
 .dashboard-container .dashboard-grid{
+	border: 1px solid transparent;
 	display: grid;
 	list-style-type: none;
 	margin: 0;
@@ -49,27 +49,40 @@
 	grid-row-gap: 0px;
 	position: relative;
 }
+.dashboard-container .dashboard-grid.bordered {
+	border: 1px solid#bbbbbb;
+}
 .dashboard-container .dashboard-placeholder{
+	cursor: pointer;
+	position: relative;
 	box-shadow: inset 0px 0px 1px 2px transparent;
 	border-radius: 10px;
 	list-style-type: none;
 	margin: 0;
+	background-color: transparent;
 	min-height: 100px;
-	transition: all 0.15s ease-in;
+	transition: all 0.15s linear;
+	transition: border-radius 0.3s linear;
 }
-.dashboard-placeholder{
-	transition: background 0.15s linear;
-	cursor: pointer;
-	position: relative;
+.dashboard-container .dashboard-grid.bordered .dashboard-placeholder{
+	border-radius: 0;
+	transition: all 0.05s linear;
+	box-shadow: inset 0px 0px 1px 1px #bbbbbb;
 }
-.dashboard-placeholder:hover{
+.dashboard-container .dashboard-grid .dashboard-placeholder.drag-over{
+	z-index: 10;
+	border-radius:  10px;
+	background-color: #dfeeff;
+	box-shadow: inset 0px 0px 1px 2px #9fcdff;
+}
+.dashboard-container .dashboard-placeholder:hover{
 	background-color: #e6e6e6;
 }
-.dashboard-placeholder .placeholder-add{
+.dashboard-container .dashboard-placeholder .placeholder-add{
 	display: inline-block;
 	opacity: 0;
 	text-align: center;
-	height: 100%;
+	height: auto;
 	vertical-align: bottom;
 	line-height: 100%;
 	position: absolute;
@@ -79,100 +92,93 @@
 	font-size: 30px;
 	transition: opacity 0.15s linear;
 }
-.dashboard-placeholder:hover .placeholder-add{
+.dashboard-container .dashboard-placeholder:hover .placeholder-add{
 	opacity: 1;
 }
-.dashboard-container .dashboard-placeholder.bordered{
-	border-radius: 0;
-	box-shadow: inset 0px 0px 1px 1px #bbbbbb;
-}
-.dashboard-container .dashboard-placeholder.drag-over{
-	background-color: #dfeeff;
-	box-shadow: inset 0px 0px 1px 2px #9fcdff;
-}
 .dashboard-container .dashboard-widget{
+	z-index: 15;
 	position: absolute;
 	background-color: #ffffff;
 	border-radius: 10px;
-	box-shadow: 0 0 20px 0 #cecece!important;
+	box-shadow: 0 0 20px 0 #cecece !important;
 	transition: transform 0.15s ease-in, box-shadow 0.15s ease-in;
 }
-.dashboard-widget.ui-draggable-dragging{
+.dashboard-container .dashboard-widget.ui-draggable-dragging{
 	transform: scale(1.03);
 	box-shadow: 0 0 40px 10px rgba(0,0,0,0.1)!important;
 }
-.dashboard-widget .dashboard-widget-header{
+.dashboard-container .dashboard-widget .dashboard-widget-header{
 	padding: 5px;
 	background-color: #222222;
 	color: #ffffff;
 	border-radius: 10px 10px 0 0;
 	display: flex;
 }
-.dashboard-widget .dashboard-widget-content{
+.dashboard-container .dashboard-widget .dashboard-widget-content{
 	padding: 5px;
 	height: calc(100% - 34px);
 	max-height: calc(100% - 34px);
 	overflow: auto;
 	display: flex;
 }
-.dashboard-widget .dashboard-widget-header .widget-header-icon,
-.dashboard-widget .dashboard-widget-header .widget-header-title,
-.dashboard-widget .dashboard-widget-header .widget-header-options{
+.dashboard-container .dashboard-widget .dashboard-widget-header .widget-header-icon,
+.dashboard-container .dashboard-widget .dashboard-widget-header .widget-header-title,
+.dashboard-container .dashboard-widget .dashboard-widget-header .widget-header-options{
 	display: inline-block;
 	vertical-align: top;
 }
-.dashboard-widget .dashboard-widget-header .widget-header-icon{
+.dashboard-container .dashboard-widget .dashboard-widget-header .widget-header-icon{
 	padding-left: 5px;
 }
-.dashboard-widget .dashboard-widget-header .widget-header-title{
+.dashboard-container .dashboard-widget .dashboard-widget-header .widget-header-title{
 	padding-left: 5px;
 	flex-grow: 1;
 }
-.dashboard-widget.widget-draggable .dashboard-widget-header .widget-header-title{
+.dashboard-container .dashboard-widget.widget-draggable .ui-draggable-handle{
 	cursor: move;
 }
-.dashboard-widget .dashboard-widget-header .widget-header-options{
+.dashboard-container .dashboard-widget .dashboard-widget-header .widget-header-options{
 	list-style-type: none;
 	margin: 0;
 	cursor: pointer;
 	float: right;
 	padding: 0;
 }
-.dashboard-widget .dashboard-widget-header .widget-header-options:after{
+.dashboard-container .dashboard-widget .dashboard-widget-header .widget-header-options:after{
 	content :'';
 	display: block;
 	clear: both;
 }
-.dashboard-widget .widget-header-options li{
+.dashboard-container .dashboard-widget .widget-header-options li{
 	display: inline-block;
 }
-.dashboard-widget .dashboard-widget-resize{
+.dashboard-container .dashboard-widget .dashboard-widget-resize{
 	opacity: 0;
 	position: absolute;
 	bottom: -2px;
 	right: 0px;
 	cursor: all-scroll;
 	transform: rotate(45deg);
-	transition: all 0.2s ease-in-out;
+	transition: all 0.15s ease-in;
 	cursor: nw-resize;
 }
-.dashboard-widget:hover .dashboard-widget-resize {
+.dashboard-container .dashboard-widget:hover .dashboard-widget-resize {
 	opacity: 0.3;
 }
-.dashboard-widget .widget-header-options li{
+.dashboard-container .dashboard-widget .widget-header-options li{
 	padding: 0 0.5rem;
 	opacity: 0.5;
-	transition: opacity 0.2s ease-in-out;
+	transition: opacity 0.15s ease-in;
 }
-.dashboard-widget .widget-header-options .widget-option-delete,
-.dashboard-widget .dashboard-widget-resize{
+.dashboard-container .dashboard-widget .widget-header-options .widget-option-delete,
+.dashboard-container .dashboard-widget .dashboard-widget-resize{
 	display: none;
 }
-.dashboard-widget.widget-removable .widget-header-options .widget-option-delete,
-.dashboard-widget.widget-resizeable .dashboard-widget-resize{
+.dashboard-container .dashboard-widget.widget-removable .widget-header-options .widget-option-delete,
+.dashboard-container .dashboard-widget.widget-resizeable .dashboard-widget-resize{
 	display: inline-block;
 }
-.dashboard-widget .widget-header-options li:hover{
+.dashboard-container .dashboard-widget .widget-header-options li:hover{
 	opacity: 1;
 }
 .dashboard-configure-menu li.active i.text-muted{
@@ -180,7 +186,7 @@
 }
 .dashboard-configure-menu li{
 	cursor: pointer;
-	transition: background 0.2s ease-in-out;
+	transition: background 0.15s ease-in;
 }
 .dashboard-configure-menu li:hover{
 	background: #f3f3f3;

plugin/dashboard/js/component.js

@@ -60,7 +60,6 @@ function init_components_dashboard(input){
 	}]);*/
 
 
-
 	component.on('placeholder-click',function(placeholder){
 		$.action({
 			action : data.onAdd,
@@ -99,21 +98,18 @@ function init_components_dashboard(input){
 		});
 
 	}).on('configure',function(id){
-		
-
-			$('#dashboard-configure-menu li').click(function(){
-				var li = $(this);
-				var menu = li.attr('data-menu');
-				li.parent().find('>li').removeClass('active');
-				li.addClass('active');
-				$('#widget-types').fill({
-					action : data.onConfigure,
-					id : id,
-					menu : menu
-				},function(response){
+		$('#dashboard-configure-menu li').click(function(){
+		    var li = $(this);
+		    var menu = li.attr('data-menu');
+		    li.parent().find('>li').removeClass('active');
+		    li.addClass('active');
+		    $('#widget-types').fill({
+		        action : data.onConfigure,
+		        id : id,
+		        menu : menu
+		    },function(response){
 
-				});
-			});
-		
+		    });
+		});
 	});
 }

plugin/dashboard/js/dashboard.js

@@ -59,6 +59,7 @@ class Dashboard {
 				//@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
+				// - Gérer l'offset du point d'ancrage ne fonction de l'endroit où le curseur drag le widget (centrer le widget avec la placeholder)
 				var currentWidget = ui.draggable;
 				var offsets = {
 					rowEnd: currentWidget.attr('data-height'),
@@ -100,21 +101,21 @@ class Dashboard {
 			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')
+ 			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 placeholder = $('.dashboard-placeholder[data-row="'+parseInt(object.resizing.row)+'"][data-column="'+parseInt(object.resizing.column)+'"]');
+	 		var offsets = {
+	 			rowEnd: height,
+	 			columnEnd: width
+	 		}
+	 		object.placeHolders.render(placeholder, offsets, 0);
+ 			$(placeholder).addClass('drag-over');
 		});
 		$(window).mouseup(function(){
 			if(!object.resizing) return;
-			object.placeHolders.removeClass('drag-over bordered');
+			object.placeHolders.removeClass('drag-over');
+			object.grid.removeClass('bordered');
 
 			var width = Math.round(object.resizing.element.outerWidth() / object.placeHolders.initialWidth);
 			var height = Math.round(object.resizing.element.outerHeight() / object.placeHolders.initialHeight);
@@ -125,7 +126,10 @@ class Dashboard {
 			object.widgets[object.resizing.id].element.attr({
 				'data-width': width,
 				'data-height': height,
-			})
+			});
+			//On reset la grid du placeholder
+			var placeholder = $('.dashboard-placeholder[data-row="'+parseInt(object.resizing.row)+'"][data-column="'+parseInt(object.resizing.column)+'"]');
+			object.placeHolders.render(placeholder);
 
 			object.renderPositions();
 			object.trigger('resize', object.widgetToArray(object.widgets[object.resizing.id]));
@@ -212,22 +216,39 @@ class Dashboard {
 	  	object.grid.append(widgetElement);
 
 	 	widgetElement.draggable({
- 			handle: '.widget-header-title',
+ 			handle: '.widget-header-icon, .widget-header-title',
  			containment: object.grid,
  			"ui-draggable-dragging" : "widget-dragging",
- 			start: function(event){
+ 			cursorAt: {
+ 				left: 7,
+ 				top: 10
+ 			},
+ 			start: function(event, ui){
  				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;
+	 		if(!element.hasClass('widget-resizeable')) return;
 	 		object.resizing = object.widgets[element.attr('data-id')];
-	 		$('.dashboard-placeholder').addClass('bordered');
+
+			//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 placeHolder = $('.dashboard-placeholder[data-row="'+parseInt(object.resizing.row)+'"][data-column="'+parseInt(object.resizing.column)+'"]');
+	 		var offsets = {
+	 			rowEnd: height,
+	 			columnEnd: width
+	 		}
+	 		object.placeHolders.render(placeHolder, offsets, 0);
+ 			$(placeHolder).addClass('drag-over');
+
+	 		object.grid.addClass('bordered');
 	 	});
 	 	object.trigger('add', object.widgetToArray(widgetOptions));
 	}