Commit eb0cdd47 authored by Pedro Eduardo Trujillo's avatar Pedro Eduardo Trujillo
Browse files

Revisa funcionalidad drag&drop 

Refactoriza parte del código que gestiona el arrastrar y soltar entre
los elementos del listado.

Muestra un elemento para arrastrar las filas del listado, en lugar de
aplicarse a toda la fila la posibilidad de arrastrar.

Implementa canales de actualizar orden, habilitar y deshabilitar los
elementos arrastrables. Permite arrancar con los controles de arrastre
deshabilitados.

Aplica estas mejoras al gestor de temas de atlas y visores como el de
monitorización marina. En este último, coloca en primer lugar una capa
tras habilitarla.

Actualiza submódulo.
parent c7c495f3

client-app/src/component/atlas/_AtlasLayersManagement.js

+13 −0
Original line number Diff line number Diff line
@@ -376,6 +376,15 @@ define([ 
				atlasItem: atlasLayerItem.atlasItem,

				order: order

			});



			this._publish(this._themesBrowser.getChildChannel('browser', 'UPDATE_DRAGGABLE_ITEM_ORDER'), {

				id: atlasLayerItem.id,

				index: 0

			});



			this._publish(this._themesBrowser.getChildChannel('browser', 'ENABLE_DRAG_AND_DROP'), {

				id: atlasLayerItem.id

			});

		},



		_deactivateLayer: function(/*Object*/ atlasLayerItem, order) {
@@ -394,6 +403,10 @@ define([ 
					keepInstance: true

				});

			}



			this._publish(this._themesBrowser.getChildChannel('browser', 'DISABLE_DRAG_AND_DROP'), {

				id: atlasLayerItem.id

			});

		}

	});

});

client-app/src/component/browser/_DragAndDrop.js

+136 −92
Original line number Diff line number Diff line 
define([

	"dojo/_base/declare"

	, "dojo/_base/lang"

	, "dojo/aspect"

	, "dojo/dom-class"

	, "dojo/query"

	, "RWidgets/Utilities"

	'dojo/_base/declare'

	, 'dojo/_base/lang'

	, 'dojo/aspect'

	, 'dojo/dom-class'

	, 'put-selector'

], function(

	declare

	, lang

	, aspect

	, domClass

	, query

	, Utilities

	, put

) {



	return declare(null, {

		//	summary:

		//

		//	description:

		//

		//		Agrega capacidades de arrastrar y soltar a las filas de un listado.



		constructor: function(args) {



			this.config = {

				dragAndDropEvents: {

					DRAG_AND_DROP: "dragAndDrop"

					DRAG_AND_DROP: 'dragAndDrop'

				},

				dragAndDropActions: {

					UPDATE_DRAGGABLE_ITEMS: "updateDraggableItems",

					DRAG_AND_DROP: "dragAndDrop"

				},

				topRowContainerDragAndDropClass: "containerTopRowDragAndDrop",

				topBorderDragAndDropClass: "borderTopDragAndDrop",

				bottomBorderDragAndDropClass: "borderBottomDragAndDrop",

				rowContainerDragAndDropClass: "dragAndDropContainerRow",

				draggableItemIds: null

					UPDATE_DRAGGABLE_ITEM_ORDER: 'updateDraggableItemOrder',

					UPDATE_DRAGGABLE_ITEMS: 'updateDraggableItems',

					DRAG_AND_DROP: 'dragAndDrop',

					ENABLE_DRAG_AND_DROP: 'enableDragAndDrop',

					DISABLE_DRAG_AND_DROP: 'disableDragAndDrop'

				},

				topRowContainerDragAndDropClass: 'dragHandler',

				topBorderDragAndDropClass: 'borderTopDragAndDrop',

				bottomBorderDragAndDropClass: 'borderBottomDragAndDrop',

				rowContainerDragAndDropClass: 'dragAndDrop',

				draggableItemIds: null,

				disableDragHandlerOnCreation: false,

				hiddenClass: 'hidden'

			};



			lang.mixin(this, this.config, args);



			aspect.before(this, "_mixEventsAndActions", lang.hitch(this, this._mixDragAndDropEventsAndActions));

			//aspect.after(this, "_defineSubscriptions", lang.hitch(this, this._defineDragAndDropSubscriptions));

			aspect.after(this, "_definePublications", lang.hitch(this, this._defineDragAndDropPublications));

			aspect.before(this, "_configRow", lang.hitch(this, this._configDragAndDropRow));

			aspect.after(this, "_addRow", lang.hitch(this, this._addDragAndDropRow));

			aspect.before(this, '_mixEventsAndActions', lang.hitch(this, this._mixDragAndDropEventsAndActions));

			aspect.after(this, '_defineSubscriptions', lang.hitch(this, this._defineDragAndDropSubscriptions));

			aspect.after(this, '_definePublications', lang.hitch(this, this._defineDragAndDropPublications));

			aspect.before(this, '_configRow', lang.hitch(this, this._configDragAndDropRow));

			aspect.after(this, '_addRow', lang.hitch(this, this._addDragAndDropRow));



			this._buttonEventRow &&

				aspect.before(this, "_buttonEventRow", lang.hitch(this, this._buttonEventDragAndDropRow));

				aspect.before(this, '_buttonEventRow', lang.hitch(this, this._buttonEventDragAndDropRow));

		},



		_mixDragAndDropEventsAndActions: function () {
@@ -61,12 +61,18 @@ define([ 


		_defineDragAndDropSubscriptions: function () {



			this.subscriptionsConfig.push(/*{

				channel : this.getChannel("UPDATE_ORDER"),

				callback: "_subUpdateOrder"

			},*/{

				channel : this.getChannel("UPDATE_DRAGGABLE_ITEMS"),

				callback: "_subUpdateDraggableItems"

			this.subscriptionsConfig.push({

				channel : this.getChannel('UPDATE_DRAGGABLE_ITEM_ORDER'),

				callback: '_subUpdateDraggableItemOrder'

			},{

				channel : this.getChannel('UPDATE_DRAGGABLE_ITEMS'),

				callback: '_subUpdateDraggableItems'

			},{

				channel : this.getChannel('ENABLE_DRAG_AND_DROP'),

				callback: '_subEnableDragAndDrop'

			},{

				channel : this.getChannel('DISABLE_DRAG_AND_DROP'),

				callback: '_subDisableDragAndDrop'

			});

		},
@@ -74,12 +80,37 @@ define([ 


			this.publicationsConfig.push({

				event: 'DRAG_AND_DROP',

				channel: this.getChannel("DRAG_AND_DROP")

				channel: this.getChannel('DRAG_AND_DROP')

			});

		},



		_subUpdateOrder: function(res) {

		postCreate: function() {



			this.inherited(arguments);



			this.contentListNode.ondragover = lang.hitch(this, this._dragOver, -1, this.contentListNode);

			this.contentListNode.ondrop = lang.hitch(this, this._drop, -1);

			this.contentListNode.ondragleave = lang.hitch(this, this._dragLeaveContainer);

		},



		_subUpdateDraggableItemOrder: function(req) {



			var rowId = req.id,

				newIndex = req.index;



			var rowNodeAtNewIndex = this.contentListNode.firstChild.children.item(newIndex),

				rowNodeToUpdate = this._getRowNodeFromRowId(rowId),

				oldIndex = Array.from(this.contentListNode.firstChild.children).indexOf(rowNodeToUpdate);



			put(rowNodeAtNewIndex, '-', rowNodeToUpdate);



			this._emitEvt('DRAG_AND_DROP', {

				id: rowId,

				item:  this._getRowData(rowId),

				indexOld: oldIndex,

				indexList: newIndex,

				total: Object.keys(this._rows).length

			});

		},



		_subUpdateDraggableItems: function(req) {
@@ -87,13 +118,34 @@ define([ 
			this.draggableItemIds = req.items;

		},



		postCreate: function() {

		_subEnableDragAndDrop: function(req) {



			this.inherited(arguments);

			var rowId = req.id,

				dragHandlerNode = this._getDragHandlerNodeFromRowId(rowId);



			this.contentListNode.ondragover = lang.hitch(this, this._dragOver, -1, this.contentListNode);

			this.contentListNode.ondrop = lang.hitch(this, this._drop, -1);

			this.contentListNode.ondragleave = lang.hitch(this, this._dragLeaveContainer);

			domClass.remove(dragHandlerNode, this.hiddenClass);

		},



		_subDisableDragAndDrop: function(req) {



			var rowId = req.id,

				dragHandlerNode = this._getDragHandlerNodeFromRowId(rowId);



			domClass.add(dragHandlerNode, this.hiddenClass);

		},



		_getRowNodeFromRowId: function(rowId) {



			var rowInstance = this._getRowInstance(rowId);



			return rowInstance.getNodeToShow();

		},



		_getDragHandlerNodeFromRowId: function(rowId) {



			var rowNode = this._getRowNodeFromRowId(rowId);



			return rowNode.firstChild.firstChild;

		},



		_dragOver: function(id, node, evt) {
@@ -102,7 +154,6 @@ define([ 
				return;

			}



			evt.dataTransfer.dropEffect = 'move';

			evt.preventDefault();

			evt.stopPropagation();
@@ -154,9 +205,9 @@ define([ 
				return;

			}



			this._once(instance.getChannel("GOT_PROPS"), lang.hitch(this, this._subDomNodeGotProps, idProperty));

			this._once(instance.getChannel('GOT_PROPS'), lang.hitch(this, this._subDomNodeGotProps, idProperty));



			this._publish(instance.getChannel("GET_PROPS"), {

			this._publish(instance.getChannel('GET_PROPS'), {

				domNode: true

			});

		},
@@ -165,34 +216,44 @@ define([ 


			var node = res.domNode;



			node && this._prepareRowForDragAndDrop(node, idProperty);

		},



		_prepareRowForDragAndDrop: function(node, idProperty) {



			if (!node) {

				return;

			}



			this._prepareRowForDragAndDrop(node, idProperty);

		},



		_prepareRowForDragAndDrop: function(node, idProperty) {



			if (!this.draggableItemIds || this.draggableItemIds.indexOf(idProperty) !== -1) {

				node.setAttribute('draggable', "true");

				put(node.firstChild, '.' + this.topRowContainerDragAndDropClass);

				this._createDragHandlerNode(node);



				node.ondragstart = lang.hitch(this, this._dragStart, idProperty);

				node.ondragend = lang.hitch(this, this._dragEnd, idProperty);

				node.ondragstart = lang.hitch(this, this._onRowDragStart, idProperty);

				node.ondragend = lang.hitch(this, this._onRowDragEnd, idProperty);

				node.ondrop = lang.hitch(this, this._drop, idProperty);

			}



			node.ondragover = lang.hitch(this, this._dragOver, idProperty, node);

		},



		_dragStart: function(id, evt) {

		_createDragHandlerNode: function(parentNode) {



			if (evt.dataTransfer) {

				evt.dataTransfer.setData('Text', 'anything');

			var dragHandlerClasses = this.topRowContainerDragAndDropClass;



			if (this.disableDragHandlerOnCreation) {

				dragHandlerClasses += '.' + this.hiddenClass;

			}



			evt.dataTransfer.effectAllowed = 'move';

			var dragHandlerNode = put(parentNode.firstChild.firstChild,

				'-div.' + dragHandlerClasses + '[draggable=true]');



			var dragIconNodeDefinition = 'span.fa.fa-ellipsis-v';

			put(dragHandlerNode, dragIconNodeDefinition);

			put(dragHandlerNode, dragIconNodeDefinition);

			put(dragHandlerNode, dragIconNodeDefinition);

		},



		_onRowDragStart: function(id, evt) {



			clearTimeout(this.removeBackgroundTimeoutHandler);
@@ -200,10 +261,10 @@ define([ 
				this._removeDragAndDropBackground(this._nodeDrag);

			}



			this._insertDragAndDropBackground(evt.target);

			this._nodeDrag = this._getRowNodeFromRowId(id);

			this._insertDragAndDropBackground(this._nodeDrag);



			this._dropItemIdProperty = null;

			this._nodeDrag = evt.target;

			this._nodeDrop = null;

			this._nodeBorderLast = null;

			this._dragAndDropInUse = true;
@@ -213,16 +274,16 @@ define([ 
			this._idLastNode = null;

		},



		_dragEnd: function(idProperty, evt) {

		_onRowDragEnd: function(idProperty, evt) {



			evt.preventDefault();

			evt.stopPropagation();



			if (this._dropItemIdProperty && idProperty != this._dropItemIdProperty) {

			if (this._dropItemIdProperty && idProperty !== this._dropItemIdProperty) {

				this._updatePositionData(idProperty);

			} else {

				this.removeBackgroundTimeoutHandler = setTimeout(

					lang.hitch(this, this._removeDragAndDropBackground, evt.target), 750);

				var rowNode = this._getRowNodeFromRowId(idProperty);

				this._removeDragAndDropBackground(rowNode);

			}



			this._removeBorder();
@@ -252,7 +313,7 @@ define([ 
			data.indexList = this._calcNodeIndex(this._nodeDrag);



			if (data.indexList !== data.indexOld) {

				this._emitEvt("DRAG_AND_DROP", data);

				this._emitEvt('DRAG_AND_DROP', data);

			}

		},
@@ -271,9 +332,9 @@ define([ 


			// Reordena a la posición correcta

			if (domClass.contains(this._nodeBorderLast, this.topBorderDragAndDropClass)) {

				put(this._nodeBorderLast, "-", this._nodeDrag);

				put(this._nodeBorderLast, '-', this._nodeDrag);

			} if (domClass.contains(this._nodeBorderLast, this.bottomBorderDragAndDropClass)) {

				put(this._nodeBorderLast, "+", this._nodeDrag);

				put(this._nodeBorderLast, '+', this._nodeDrag);

			}



			this._removeDragAndDropBackground(this._nodeDrag);
@@ -362,22 +423,6 @@ define([ 
			return (!node[method] || node[method] !== this._nodeDrag);

		},



		/*_dragToBottom: function(id, node) {



			this._idLastNode = id;

			this._removeBorder();



			if (node.nextSibling) {

				put(node.nextSibling, "." + this.topBorderDragAndDropClass);

				this._nodeBorderLast = node.nextSibling;

			} else {

				put(node, "." + this.bottomBorderDragAndDropClass);

				this._nodeBorderLast = node;

			}



			this._dropCorrect = true;

		},*/



		_dragToNode: function(obj) {



			var id = obj.id,
@@ -386,7 +431,7 @@ define([ 
			this._idLastNode = id;

			this._removeBorder();



			put(node, "." + obj.nameClass);

			put(node, '.' + obj.nameClass);



			this._nodeBorderLast = node;

			this._dropCorrect = true;
@@ -402,16 +447,15 @@ define([ 
		_dragToEmptyBottomZone: function(id, node) {



			// Si la última fila no es la misma que la arrastrada

			if (this.contentListNode.lastChild.lastChild !== this._nodeDrag) {

			if (this.contentListNode.lastChild.lastChild === this._nodeDrag) {

				return;

			}



			this._resetDragPreparation(true);

				put(this.contentListNode.lastChild.lastChild, "." + this.bottomBorderDragAndDropClass);

			put(this.contentListNode.lastChild.lastChild, '.' + this.bottomBorderDragAndDropClass);

			this._inside = false;

			this._nodeBorderLast = this.contentListNode.lastChild.lastChild;

			this._dropCorrect = true;



				return true;

			}

		},



		_isContentRowsContainer: function(pageY) {
@@ -428,8 +472,8 @@ define([ 
		_removeBorder: function() {



			if (this._nodeBorderLast) {

				put(this._nodeBorderLast, "!" + this.topBorderDragAndDropClass);

				put(this._nodeBorderLast, "!" + this.bottomBorderDragAndDropClass);

				put(this._nodeBorderLast, '!' + this.topBorderDragAndDropClass);

				put(this._nodeBorderLast, '!' + this.bottomBorderDragAndDropClass);



				this._nodeBorderLast = null;

			}

client-app/src/component/map/Map.js

+7 −2
Original line number Diff line number Diff line
@@ -561,8 +561,13 @@ define([ 
		_subReorderLayers: function(request) {



			var layerId = request.layerId,

				layerObj = this._overlayLayers[layerId],

				newPosition = request.newPosition + 1,

				layerObj = this._overlayLayers[layerId];



			if (!layerObj) {

				return;

			}



			var newPosition = request.newPosition + 1,

				oldPosition = request.oldPosition + 1,

				diff = newPosition - oldPosition,

				key, layerObject;

client-app/src/viewer/marineMonitoring/MarineMonitoringViewerView.js

+2 −1
Original line number Diff line number Diff line
@@ -70,7 +70,8 @@ define([ 
				themesBrowserConfig: {

					title: this.i18n.contents,

					browserConfig: {

						template: AtlasMixedListTemplate

						template: AtlasMixedListTemplate,

						disableDragHandlerOnCreation: true

					}

				}

			}, this.atlasConfig || {}]);

style @ f181c8f2

Compare 7115a768 to f181c8f2
Original line number Diff line number Diff line 
Subproject commit 7115a7682a3a50d87e03de032af983a56425160f
 
Subproject commit f181c8f21fe23b543b5a0c819198ede50703c0f5