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

Añade selección a TagList, mejora elevación 

Implementa la posibilidad de seleccionar tags dentro del listado, con
feedback visual.

Implementa la selección inicial de tags mediante un callback para
evaluar cada item.

Implementa el modo de selección simple de tags, donde sólo uno puede
permanecer seleccionado y no es posible deseleccionarlo pulsando sobre
el mismo.

Aplica este componente actualizado a la selección de dimensión de
elevación de las capas, marcando como elevación seleccionada siempre la
primera que se reciba.

Actualiza submódulo.
parent d5e25214

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

+5 −0
Original line number Diff line number Diff line
@@ -60,6 +60,11 @@ define([ 
			var instance = new TagList({

				parentChannel: this.getChannel(),

				tagsString: elevationDefinition.value,

				simpleSelection: true,

				getSelectedTags: function(_tagValue, tagIndex) {



					return tagIndex === 0;

				},

				getTagLabel: lang.partial(function(unit, tagValue) {



					return tagValue + ' ' + unit;

client-app/src/component/layout/TagList.js

+81 −7
Original line number Diff line number Diff line 
define([

	'dojo/_base/declare'

	, 'dojo/_base/lang'

	, 'dojo/dom-class'

	, 'put-selector'

	, 'src/component/base/_Module'

	, 'src/component/base/_Show'

], function(

	declare

	, lang

	, domClass

	, put

	, _Module

	, _Show
@@ -29,9 +31,13 @@ define([ 


				tagsString: '',

				tagsDelimiter: ',',

				simpleSelection: false,



				_tagsContainerClass: 'tagListContainer',

				_tagsClass: 'tagListItem'

				_tagsClass: 'tagListItem',

				_tagSelectedClass: 'selected',



				_tagPropsByValue: {}

			};



			lang.mixin(this, this.config, args);
@@ -60,19 +66,87 @@ define([ 
		_addTag: function(tagValue, tagIndex) {



			var tagNodeDefinition = 'span.' + this._tagsClass + '[title=' + this.i18n.select + ']',

				tagNodeContent = this.getTagLabel ? this.getTagLabel(tagValue) : tagValue,

				tagNodeContent = this.getTagLabel ? this.getTagLabel(tagValue, tagIndex) : tagValue,

				tagNode = put(this.domNode, tagNodeDefinition, tagNodeContent);



			tagNode.onclick = lang.hitch(this, this._onTagClick, {

				value: tagValue,

			this._tagPropsByValue[tagValue] = {

				label: tagNodeContent,

				index: tagIndex

				index: tagIndex,

				node: tagNode

			};



			tagNode.onclick = lang.hitch(this, this._onTagClick, tagValue);



			this._manageSelectionOnTagAdd(tagValue, tagIndex);

		},



		_onTagClick: function(tagValue) {



			var tagProps = this._tagPropsByValue[tagValue];



			this._emitEvt('TAG_CLICKED', {

				value: tagValue,

				label: tagProps.label,

				index: tagProps.index

			});



			this._manageSelectionOnTagClick(tagValue);

		},



		_onTagClick: function(args) {

		_manageSelectionOnTagAdd: function(tagValue, tagIndex) {



			var tagProps = this._tagPropsByValue[tagValue],

				isTagSelected = this.getSelectedTags ? this.getSelectedTags(tagValue, tagIndex) : false,

				tagNode = tagProps.node;



			if (!isTagSelected) {

				return;

			}



			if (this.simpleSelection) {

				if (this._firstTagSelected) {

					return;

				}

				this._firstTagSelected = true;

			}



			this._selectTagNode(tagNode);

		},



		_manageSelectionOnTagClick: function(tagValue) {



			var tagProps = this._tagPropsByValue[tagValue],

				tagNode = tagProps.node;



			if (this.simpleSelection) {

				this._clearSelectTagNode();

				this._selectTagNode(tagNode);

			} else {

				this._toggleSelectTagNode(tagNode);

			}

		},



		_selectTagNode: function(tagNode) {



			domClass.add(tagNode, this._tagSelectedClass);

		},



		_deselectTagNode: function(tagNode) {



			domClass.remove(tagNode, this._tagSelectedClass);

		},



		_toggleSelectTagNode: function(tagNode) {



			domClass.toggle(tagNode, this._tagSelectedClass);

		},



		_clearSelectTagNode: function() {



			Object.values(this._tagPropsByValue).forEach(lang.hitch(this, function(item) {



			this._emitEvt('TAG_CLICKED', args);

				this._deselectTagNode(item.node);

			}));

		}

	});

});

style @ cd4ad514

Compare 6dd3d393 to cd4ad514
Original line number Diff line number Diff line 
Subproject commit 6dd3d39344b147592feb2fb49b98dcbebb02a643
 
Subproject commit cd4ad514caa73c4c05d6050a20bd098d0ed0df40