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

Cambia diseño por nuevo módulo para QueryOnMap 

Migra desde el diseño llamado primaryAndSecondaryContent (que sólo se
usaba para mostrar datos de consultas sobre mapa) hacia nuevo módulo
llamado NestedContent e implementación NestedBrowsersImpl. Esta
estructura es más clara y manejable, delimitando mejor las
responsabilidades de cada componente implicado.

Se aprovecha el módulo GenericDisplayer y su implementación para mostrar
el contenido de las consultas, en forma de un par de Browsers que
manejan información anidada junto con el topbar de la implementación.
Refactoriza el código.

Mantiene la misma funcionalidad pero reescribiendo la base de código y
aprovechando los recursos ya disponibles.

Actualiza submódulo de estilos para adaptarse a la nueva estructura
simplificada.
parent 6c369795

public/javascript/app/designs/primaryAndSecondaryContent/Controller.js

deleted100644 → 0
+0 −189
Original line number Diff line number Diff line 
define([

	"app/designs/base/_Controller"

	, "dojo/_base/declare"

	, "dojo/_base/lang"

	, "put-selector/put"

	, "RWidgets/Button"

], function (

	_Controller

	, declare

	, lang

	, put

	, Button

){

	return declare(_Controller, {

		//	summary:

		//		Diseño para doble contenido, donde el principal despliega sus contenidos en el secundario.



		constructor: function(args) {



			this.config = {

				title: this.i18n.info,

				'class': 'dualContent',



				primaryInClass: "primaryIn",

				primaryOutClass: "primaryOut",

				secondaryInClass: "secondaryIn",

				secondaryOutClass: "secondaryOut",

				hiddenClass: "hidden",



				primaryContentChannel: null,

				secondaryContentChannel: null,



				controllerActions: {

					CHANGE_TO_SECONDARY: "changeToSecondary"

				}

			};



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

		},



		_setControllerOwnCallbacksForEvents: function () {



			this._onEvt('HIDE', lang.hitch(this, this._onHide));

		},



		_defineControllerSubscriptions: function() {



			this.subscriptionsConfig.push({

				channel : this.getChannel("CHANGE_TO_SECONDARY"),

				callback: "_subChangeToSecondary"

			});

		},



		postCreate: function() {



			this.inherited(arguments);



			this.addNewButton = new Button({

				label: this.i18n.back,

				'class': "success",

				title: this.i18n.back,

				onClick: lang.hitch(this, this._changeToPrimary)

			}).placeAt(this._backButtonNode);



			if (!this.primaryContentChannel) {

				console.error('Primary content channel is not specified');

			}

		},



		_subChangeToSecondary: function(req) {



			var secondaryChannel = req.channel;



			if (secondaryChannel) {

				this._changeToSecondary(secondaryChannel, req);

			} else if (this.secondaryContentChannel) {

				this._changeToSecondary(this.secondaryContentChannel, req);

			} else {

				console.error('Secondary content channel is not specified');

			}

		},



		_changeToSecondary: function(channel, args) {



			this.currentSecondaryContentChannel = channel;



			var primaryData = args.primaryData,

				title = args.title,

				showAnimation = this.secondaryInClass,

				hideAnimation = this.secondaryOutClass;



			put(this._secondaryContentNode, "!" + this.hiddenClass);



			if (args.showAnimation !== undefined) {

				showAnimation = args.showAnimation;

			}



			if (args.showAnimation !== undefined) {

				hideAnimation = args.hideAnimation;

			}



			this._showContent(channel, {

				node: this._secondaryContentNode,

				data: primaryData,

				showAnimation: showAnimation,

				hideAnimation: hideAnimation

			});



			var hiddenChannel = this._buildChannel(this.primaryContentChannel, this.actions.HIDDEN);



			this._once(hiddenChannel, lang.hitch(this, function(title) {



				put(this._backButtonNode, "!" + this.hiddenClass);

				put(this._primaryContentNode, "." + this.hiddenClass);

				this._updateTitle(title);

			}, title));



			this._hideContent(this.primaryContentChannel);

		},



		_changeToPrimary: function() {



			put(this._primaryContentNode, "!" + this.hiddenClass);

			put(this._backButtonNode, "." + this.hiddenClass);



			this._showContent(this.primaryContentChannel, {

				node: this._primaryContentNode,

				showAnimation: this.primaryInClass,

				hideAnimation: this.primaryOutClass

			});



			var hiddenChannel = this._buildChannel(this.currentSecondaryContentChannel, this.actions.HIDDEN);



			this._once(hiddenChannel, lang.hitch(this, function() {



				put(this._secondaryContentNode, "." + this.hiddenClass);

				this._updateTitle();

			}));



			this._hideContent(this.currentSecondaryContentChannel);

		},



		_showContent: function(channel, args) {



			var node = args.node,

				data = args.data,

				showAnimationClass = args.showAnimation,

				hideAnimationClass = args.hideAnimation,

				showChannel = this._buildChannel(channel, this.actions.SHOW);



			this._publish(showChannel, {

				node: node,

				data: data,

				animation: {

					showAnimation: showAnimationClass,

					hideAnimation: hideAnimationClass

				}

			});

		},



		_hideContent: function(channel, omitAnimation) {



			var hideChannel = this._buildChannel(channel, this.actions.HIDE);



			this._publish(hideChannel, {

				omitAnimation: omitAnimation

			});

		},



		_beforeShow: function() {



			put(this._backButtonNode, "." + this.hiddenClass);

			put(this._primaryContentNode, "!" + this.hiddenClass);

			put(this._secondaryContentNode, "." + this.hiddenClass);



			this._updateTitle();

			this._showContent(this.primaryContentChannel, {

				node: this._primaryContentNode,

				hideAnimation: this.primaryOutClass

			});

		},



		_onHide: function() {



			this._hideContent(this.primaryContentChannel, true);

			this.currentSecondaryContentChannel && this._hideContent(this.currentSecondaryContentChannel, true);

		}

	});

});

public/javascript/app/designs/primaryAndSecondaryContent/layout/Layout.js

deleted100644 → 0
+0 −42
Original line number Diff line number Diff line 
define([

	'app/designs/base/_Layout'

	, 'dojo/_base/declare'

	, 'dojo/_base/lang'

	, 'put-selector/put'

], function(

	_Layout

	, declare

	, lang

	, put

) {



	return declare(_Layout, {

		//	summary:

		//		Layout de doble contenido primario y secundario, con barra de título y vuelta hacia atrás.



		constructor: function(args) {



			this.config = {};



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

		},



		postCreate: function() {



			this.inherited(arguments);



			var topNode = put(this.domNode, 'div.topZone'),

				buttonsNode = put(topNode, 'div.buttonZone'),

				centerNode = put(this.domNode, 'div.dualCenterZone');



			this._backButtonNode = put(buttonsNode, 'div');



			this._titleNode = put(topNode, 'div.widthLimitTitleZone.titleZone');



			this._setTitle(this.title);



			this._primaryContentNode = put(centerNode, 'div.dualListZone.noBorderList');

			this._secondaryContentNode = put(centerNode, 'div.dualListZone.noBorderList');

		}

	});

});

public/javascript/app/designs/primaryAndSecondaryContent/main/HierarchicalLists.js→public/javascript/redmic/modules/layout/nestedContent/NestedBrowsersImpl.js

+71 −78
Original line number Diff line number Diff line 
define([

	"app/designs/base/_Main"

	, "app/designs/primaryAndSecondaryContent/Controller"

	, "app/designs/primaryAndSecondaryContent/layout/Layout"

	, "dojo/_base/declare"

	, "dojo/_base/lang"

	, "put-selector/put"

	, "RWidgets/Utilities"

	, "redmic/modules/base/_Store"

	, "redmic/modules/browser/bars/Total"

	, "redmic/modules/browser/_ButtonsInRow"

	, "redmic/modules/browser/_Framework"

	, "redmic/modules/browser/_MultiTemplate"

	, "redmic/modules/browser/ListImpl"

	, "templates/DefaultList"

	'dojo/_base/declare'

	, 'dojo/_base/lang'

	, 'redmic/modules/base/_Store'

	, 'redmic/modules/browser/bars/Total'

	, 'redmic/modules/browser/_ButtonsInRow'

	, 'redmic/modules/browser/_Framework'

	, 'redmic/modules/browser/_MultiTemplate'

	, 'redmic/modules/browser/ListImpl'

	, 'templates/DefaultList'

	, 'RWidgets/Utilities'

	, './NestedContent'

], function (

	_Main

	, Controller

	, Layout

	, declare

	declare

	, lang

	, put

	, Utilities

	, _Store

	, Total

	, _ButtonsInRow
@@ -28,8 +20,11 @@ define([ 
	, _MultiTemplate

	, ListImpl

	, DefaultListTemplate

	, Utilities

	, NestedContent

) {

	return declare([Layout, Controller, _Main, _Store], {



	return declare([NestedContent, _Store], {

		//	summary:

		//		Main de contenido primario y secundario de tipo listado, donde un item del primero despliega sus

		//		descendientes en el segundo.
@@ -37,35 +32,29 @@ define([ 
		constructor: function(args) {



			this.config = {

				idProperty: "id",

				typeGroupProperty: "category",

				primaryTarget: "primaryTarget",

				secondaryTarget: "secondaryTarget",

				idProperty: 'id',

				typeGroupProperty: 'category',

				primaryTarget: 'primaryTarget',

				secondaryTarget: 'secondaryTarget',

				primaryListTemplate: null,

				secondaryListTemplate: null,

				_defaultTemplate: DefaultListTemplate,

				_defaultPrimaryListButtons: [{

					icon: "fa-chevron-right",

					btnId: "changeToSecondary",

					icon: 'fa-chevron-right',

					btnId: 'changeToSecondary',

					title: 'info',

					returnItem: true

				}],



				_defaultSecondaryListButtons: [],



				mainActions: {

					NEW_DATA: "newData",

					CLEAR: "clear",

					ADD_NEW_TEMPLATES: "addNewTemplates"

				},



				_secondaryTemplatesByTypeGroup: {}

			};



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

		},



		_setMainConfigurations: function() {

		_setConfigurations: function() {



			var browserConfig = {

				parentChannel: this.getChannel(),
@@ -79,17 +68,10 @@ define([ 
			var primaryListButtons = Utilities.uniq(this._merge([

				this._defaultPrimaryListButtons,

				this.primaryListButtons || []

			], {arrayMergingStrategy: "concatenate"}));

			], {arrayMergingStrategy: 'concatenate'}));



			primaryListButtons.reverse();



			var secondaryListButtons = Utilities.uniq(this._merge([

				this._defaultSecondaryListButtons,

				this.secondaryListButtons || []

			], {arrayMergingStrategy: "concatenate"}));



			secondaryListButtons.reverse();



			var primaryBrowserConfig = this._merge([{

				target: this.primaryTarget,

				template: this.primaryListTemplate || this._defaultTemplate,
@@ -102,6 +84,13 @@ define([ 


			this.primaryBrowserConfig = this._merge([primaryBrowserConfig, this.primaryBrowserConfig || {}]);



			var secondaryListButtons = Utilities.uniq(this._merge([

				this._defaultSecondaryListButtons,

				this.secondaryListButtons || []

			], {arrayMergingStrategy: 'concatenate'}));



			secondaryListButtons.reverse();



			var secondaryBrowserConfig = this._merge([{

				target: this.secondaryTarget,

				template: this.secondaryListTemplate || this._defaultTemplate,
@@ -115,43 +104,47 @@ define([ 
			this.secondaryBrowserConfig = this._merge([secondaryBrowserConfig, this.secondaryBrowserConfig || {}]);

		},



		_initializeMain: function() {

		_initialize: function() {



			this.inherited(arguments);



			var exts = [ListImpl, _Framework, _ButtonsInRow, _MultiTemplate];

			var BrowserDefinition = declare([ListImpl, _Framework, _ButtonsInRow, _MultiTemplate]);



			this._primaryContentInstance = new declare(exts)(this.primaryBrowserConfig);

			this._primaryContentInstance = new BrowserDefinition(this.primaryBrowserConfig);

			this.primaryContentChannel = this._primaryContentInstance.getChannel();



			this._secondaryContentInstance = new declare(exts)(this.secondaryBrowserConfig);

			this._secondaryContentInstance = new BrowserDefinition(this.secondaryBrowserConfig);

			this.secondaryContentChannel = this._secondaryContentInstance.getChannel();

		},



		_defineMainSubscriptions: function() {

		_defineSubscriptions: function() {



			this.inherited(arguments);



			this.subscriptionsConfig.push({

				channel : this._primaryContentInstance.getChannel("BUTTON_EVENT"),

				callback: "_subListBtnEvent"

				channel : this._primaryContentInstance.getChannel('BUTTON_EVENT'),

				callback: '_subListBtnEvent'

			},{

				channel : this._secondaryContentInstance.getChannel("BUTTON_EVENT"),

				callback: "_subListBtnEvent"

				channel : this._secondaryContentInstance.getChannel('BUTTON_EVENT'),

				callback: '_subListBtnEvent'

			},{

				channel : this.getChannel("NEW_DATA"),

				callback: "_subNewData",

				channel : this.getChannel('NEW_DATA'),

				callback: '_subNewData',

				options: {

					predicate: function(req) { return !!req; }

				}

			},{

				channel : this.getChannel("CLEAR"),

				callback: "_subClear"

				channel : this.getChannel('CLEAR'),

				callback: '_subClear'

			},{

				channel : this.getChannel("ADD_NEW_TEMPLATES"),

				callback: "_subAddNewTemplates"

				channel : this.getChannel('ADD_NEW_TEMPLATES'),

				callback: '_subAddNewTemplates'

			});

		},



		_subListBtnEvent: function(evt) {



			var callback = "_" + evt.btnId + "Callback";

			var callback = '_' + evt.btnId + 'Callback';

			this[callback] && this[callback](evt);

		},
@@ -162,35 +155,35 @@ define([ 


		_beforeShow: function() {



			this.inherited(arguments);



			this._once(this._primaryContentInstance.getChannel('GOT_DATA'), lang.hitch(this,

				this._subOnceGetData));



			this._publish(this._primaryContentInstance.getChannel("GET_DATA"));

			this._publish(this._primaryContentInstance.getChannel('GET_DATA'));

		},



		_subOnceGetData: function(data) {



			data = data.data;



			this._updateTitle();

			this._setTitle(this.title);



			if (data.length === 1) {

				var item = data[0];



				this._changeToSecondaryCallback({

					btnId: "changeToSecondary",

					btnId: 'changeToSecondary',

					id: item[this.idProperty],

					item: item

				}, {

					showAnimation: null

					showAnimation: null,

					title: item.parent[item.parentName]

				});

			} else {

				put(this._backButtonNode, "." + this.hiddenClass);

				put(this._primaryContentNode, "!" + this.hiddenClass);

				put(this._secondaryContentNode, "." + this.hiddenClass);

				this._removeBackButton();



				this._showContent(this.primaryContentChannel, {

					node: this._primaryContentNode,

				this._showContent(this._primaryContentInstance, {

					hideAnimation: this.primaryOutClass

				});

			}
@@ -208,8 +201,8 @@ define([ 


		_subClear: function() {



			this._publish(this._primaryContentInstance.getChannel("CLEAR"));

			this._publish(this._secondaryContentInstance.getChannel("CLEAR"));

			this._publish(this._primaryContentInstance.getChannel('CLEAR'));

			this._publish(this._secondaryContentInstance.getChannel('CLEAR'));

		},



		_subAddNewTemplates: function(req) {
@@ -218,14 +211,14 @@ define([ 
				parentTemplate = req.parentTemplate,

				childrenTemplate = req.childrenTemplate;



			this._publish(this._primaryContentInstance.getChannel("ADD_TEMPLATE"), {

			this._publish(this._primaryContentInstance.getChannel('ADD_TEMPLATE'), {

				typeGroup: typeGroup,

				template: parentTemplate

			});



			if (typeof childrenTemplate === "object") {

			if (typeof childrenTemplate === 'object') {

				for (var key in childrenTemplate) {

					this._publish(this._secondaryContentInstance.getChannel("ADD_TEMPLATE"), {

					this._publish(this._secondaryContentInstance.getChannel('ADD_TEMPLATE'), {

						typeGroup: key,

						template: childrenTemplate[key]

					});
@@ -239,16 +232,16 @@ define([ 


			var typeGroup = itemData.item[this.typeGroupProperty];



			if (!typeGroup || typeof this._secondaryTemplatesByTypeGroup[typeGroup] === "object") {

			if (!typeGroup || typeof this._secondaryTemplatesByTypeGroup[typeGroup] === 'object') {

				this._emitInjectData(itemData.item.children);

			} else {

				var template = this._secondaryTemplatesByTypeGroup[typeGroup] || this.secondaryListTemplate ||

					this._defaultTemplate;



				this._once(this._secondaryContentInstance.getChannel("TEMPLATE_UPDATED"), lang.hitch(this,

				this._once(this._secondaryContentInstance.getChannel('TEMPLATE_UPDATED'), lang.hitch(this,

					this._emitInjectData, itemData.item.children));



				this._publish(this._secondaryContentInstance.getChannel("UPDATE_TEMPLATE"), {

				this._publish(this._secondaryContentInstance.getChannel('UPDATE_TEMPLATE'), {

					template: template

				});

			}
@@ -257,7 +250,7 @@ define([ 
				parentData = itemData.item.parent,

				title;



			if (typeof parentName === "function") {

			if (typeof parentName === 'function') {

				title = parentName(parentData) || this.title;

			} else {

				title = Utilities.getDeepProp(parentData, parentName) || this.title;
@@ -265,7 +258,7 @@ define([ 


			options = options || { title: title };



			this._changeToSecondary(this.secondaryContentChannel, options);

			this._changeToSecondary(options);

		},



		_emitInjectData: function(data) {

public/javascript/redmic/modules/layout/nestedContent/NestedContent.js

0 → 100644
+192 −0
Original line number Diff line number Diff line 
define([

	'dojo/_base/declare'

	, 'dojo/_base/lang'

	, 'redmic/modules/base/_Module'

	, 'redmic/modules/base/_Show'

	, 'redmic/modules/layout/genericDisplayer/GenericWithTopbarDisplayerImpl'

	, 'RWidgets/Button'

], function (

	declare

	, lang

	, _Module

	, _Show

	, GenericWithTopbarDisplayerImpl

	, Button

) {



	return declare([_Module, _Show], {

		//	summary:

		//		Módulo para albergar a una pareja de componentes que manejan información con anidamiento, donde el

		//		primero representa los datos de nivel superior y el segundo muestra los datos anidados en el nivel

		//		superior seleccionado. El nivel superior se denomina primario y el anidado recibe el nombre de

		//		secundario. Se apoya en una barra superior para mostrar el título del contenido actual y un botón que

		//		permite volver desde el contenido secundario al primario.



		constructor: function(args) {



			this.config = {

				ownChannel: 'nestedContent',

				actions: {

					NEW_DATA: 'newData',

					CLEAR: 'clear',

					ADD_NEW_TEMPLATES: 'addNewTemplates'

				},



				additionalContentClasses: 'nestedContent',

				additionalTopbarContentClasses: 'compactContent',

				primaryInClass: 'primaryIn',

				primaryOutClass: 'primaryOut',

				secondaryInClass: 'secondaryIn',

				secondaryOutClass: 'secondaryOut',



				title: this.i18n.info,

				primaryContentChannel: null,

				secondaryContentChannel: null

			};



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

		},



		_initialize: function() {



			this._nestedContentWithTopbar = new GenericWithTopbarDisplayerImpl({

				parentChannel: this.getChannel(),

				content: this.browserWork,

				title: this.title,

				additionalContentClasses: this.additionalContentClasses

			});

		},



		postCreate: function() {



			this.inherited(arguments);



			this._createBackButton();

			this._addBackButton();



			if (!this.primaryContentChannel) {

				console.error('Primary content channel is not specified at module "%s"', this.getChannel());

			}

		},



		_createBackButton: function() {



			this._backButton = new Button({

				label: this.i18n.back,

				'class': 'success',

				title: this.i18n.back,

				onClick: lang.hitch(this, this._changeToPrimary)

			});

		},



		_addBackButton: function() {



			this._publish(this._nestedContentWithTopbar.getChannel('ADD_TOPBAR_CONTENT'), {

				content: this._backButton.domNode,

				prependToTitle: true,

				additionalTopbarContentClasses: this.additionalTopbarContentClasses

			});

		},



		_removeBackButton: function() {



			this._publish(this._nestedContentWithTopbar.getChannel('REMOVE_TOPBAR_CONTENT'), {

				content: this._backButton.domNode

			});

		},



		_setTitle: function(title) {



			this._publish(this._nestedContentWithTopbar.getChannel('SET_PROPS'), {

				title: title

			});

		},



		_changeToSecondary: function(args) {



			var primaryData = args.primaryData,

				title = args.title,

				showAnimation = this.secondaryInClass,

				hideAnimation = this.secondaryOutClass;



			var hiddenChannel = this._buildChannel(this.primaryContentChannel, this.actions.HIDDEN);



			this._once(hiddenChannel, lang.hitch(this, function(titleArg) {



				this._addBackButton();

				this._setTitle(titleArg);

			}, title));



			if (args.showAnimation !== undefined) {

				showAnimation = args.showAnimation;

			}



			if (args.hideAnimation !== undefined) {

				hideAnimation = args.hideAnimation;

			}



			this._showContent(this._secondaryContentInstance, {

				data: primaryData,

				showAnimation: showAnimation,

				hideAnimation: hideAnimation

			});

		},



		_changeToPrimary: function() {



			var hiddenChannel = this._buildChannel(this.secondaryContentChannel, this.actions.HIDDEN);



			this._once(hiddenChannel, lang.hitch(this, function() {



				this._setTitle(this.title);

			}));



			this._removeBackButton();



			this._showContent(this._primaryContentInstance, {

				showAnimation: this.primaryInClass,

				hideAnimation: this.primaryOutClass

			});

		},



		_showContent: function(contentModule, args) {



			var data = args.data,

				showAnimationClass = args.showAnimation,

				hideAnimationClass = args.hideAnimation;



			this._publish(this._nestedContentWithTopbar.getChannel('ADD_CONTENT'), {

				content: contentModule,

				showProps: {

					data: data,

					animation: {

						showAnimation: showAnimationClass,

						hideAnimation: hideAnimationClass

					}

				}

			});

		},



		_getNodeToShow: function() {



			return this._nestedContentWithTopbar._getNodeToShow();

		},



		_beforeShow: function() {



			this._removeBackButton();



			this._setTitle(this.title);

			this._showContent(this._primaryContentInstance, {

				hideAnimation: this.primaryOutClass

			});

		},



		_afterHide: function() {



			this._publish(this._nestedContentWithTopbar.getChannel('HIDE'), {

				omitAnimation: true

			});

		}

	});

});

public/javascript/redmic/modules/mapQuery/_ResultsBrowser.js

+5 −5
Original line number Diff line number Diff line 
define([

	'app/designs/primaryAndSecondaryContent/main/HierarchicalLists'

	, 'dojo/_base/declare'

	'dojo/_base/declare'

	, 'dojo/_base/lang'

	, 'dojo/aspect'

	, 'put-selector/put'

	, 'redmic/modules/base/_Show'

	, 'redmic/modules/layout/nestedContent/NestedBrowsersImpl'

], function(

	HierarchicalLists

	, declare

	declare

	, lang

	, aspect

	, put

	, _Show

	, NestedBrowsersImpl

) {



	return declare(_Show, {
@@ -32,7 +32,7 @@ define([ 


		_initializeResultsBrowser: function() {



			this._layersInfo = new HierarchicalLists({

			this._layersInfo = new NestedBrowsersImpl({

				parentChannel: this.getChannel(),

				typeGroupProperty: this.typeGroupProperty,

				primaryTitle: this.i18n.presentElements,