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

Mejora resize de módulos, permite ocultar Sidebar 

Armoniza interacción entre _Show, _Window y _ListenWindowResize. Este
último pasa a incluirse siempre en _Show, y cooperan entre si para
gestionar las redimensiones, de una manera más limpia.

Permite ocultar Sidebar en cualquier tamaño de pantalla.

Mejora redimensión de la aplicación. En lugar de buscar el nodo raíz y
actuar sobre él, se publica 'resize' al módulo App.
parent 9c56672f

public/javascript/app/components/Topbar.js

+2 −18
Original line number Diff line number Diff line 
define([

	"dijit/layout/ContentPane"

	, "dijit/registry"

	, "dojo/_base/declare"

	, "dojo/_base/lang"

	, "dojo/dom"
@@ -9,7 +8,6 @@ define([ 
	, "redmic/modules/base/Manager"

], function(

	ContentPane

	, registry

	, declare

	, lang

	, dom
@@ -68,26 +66,12 @@ define([ 
			}, this.leftNode);

		},



		_getGlobalContainer: function() {



			if (this._globalContainer) {

				return this._globalContainer;

			}



			var rootNode = dom.byId('rootContainer'),

				globalContainerId = rootNode.firstChild.id,

				globalContainer = registry.byId(globalContainerId);



			this._globalContainer = globalContainer;

			return globalContainer;

		},



		_onCollapseClicked: function() {



			domClass.toggle(this.ownerDocumentBody, this.collapsedSidebarClass);



			var globalContainer = this._getGlobalContainer();

			globalContainer && globalContainer.resize();

			// TODO hacerlo en this en lugar de this.module cuando topbar sea módulo

			this.manager._publish(this.manager._buildChannel(this.manager.rootChannel, this.manager.actions.RESIZE));

		}

	});

});

public/javascript/redmic/modules/base/_ListenWindowResize.js

+52 −14
Original line number Diff line number Diff line 
define([

	"dojo/_base/declare"

	, "dojo/_base/lang"

	, "dojo/aspect"

	, "dojo/has"

	'dojo/_base/declare'

	, 'dojo/_base/lang'

	, 'dojo/aspect'

	, 'dojo/has'

], function(

	declare

	, lang
@@ -15,14 +15,20 @@ define([ 
		//		Permite a los módulos escuchar las redimensiones del contexto global.



		listenWindowResizeEvents: {

			WINDOW_RESIZE: "windowResize"

			WINDOW_RESIZE: 'windowResize'

		},



		windowResizeTimeout: 500,

		lowWidthValue: 800,





		constructor: function(args) {



			aspect.after(this, "_mixEventsAndActions", lang.hitch(this, this._mixListenWindowResizeEventsAndActions));

			aspect.after(this, "_doEvtFacade", lang.hitch(this, this._doListenWindowResizeEvtFacade));

			aspect.after(this, "_setOwnCallbacksForEvents", lang.hitch(this,

			this._evaluateCurrentWindowSize();



			aspect.after(this, '_mixEventsAndActions', lang.hitch(this, this._mixListenWindowResizeEventsAndActions));

			aspect.after(this, '_doEvtFacade', lang.hitch(this, this._doListenWindowResizeEvtFacade));

			aspect.after(this, '_setOwnCallbacksForEvents', lang.hitch(this,

				this._setListenWindowResizeOwnCallbacksForEvents));

		},
@@ -34,17 +40,49 @@ define([ 


		_doListenWindowResizeEvtFacade: function() {



			this._getGlobalContext().onresize = lang.hitch(this, this._groupEventArgs, 'WINDOW_RESIZE');

			var globalCtx = this._getGlobalContext(),

				resizeMethod = lang.hitch(this, this._groupEventArgs, 'WINDOW_RESIZE');



			if (!globalCtx.onresize) {

				globalCtx.onresize = resizeMethod;

			} else {

				aspect.after(globalCtx, 'onresize', resizeMethod);

			}

		},



		_setListenWindowResizeOwnCallbacksForEvents: function() {



			this._onEvt('WINDOW_RESIZE', lang.hitch(this, this._onWindowResize));

			this._onEvt('WINDOW_RESIZE', lang.hitch(this, this._prepareResizeAfterWindowResize));

		},



		_prepareResizeAfterWindowResize: function(evt) {



			clearTimeout(this._windowResizeHandler);



			this._windowResizeHandler = setTimeout(lang.hitch(this, this._doResizeAfterWindowResize, evt),

				this.windowResizeTimeout);

		},



		_doResizeAfterWindowResize: function(evt) {



			this._evaluateCurrentWindowSize();



			this._resizeWrapper();

		},



		_evaluateCurrentWindowSize: function() {



			this._setLowWidth(this._getGlobalContext().innerWidth < this.lowWidthValue);

		},



		_getLowWidth: function() {



			return this.statusFlags.lowWidth;

		},



		_onWindowResize: function(evt) {

		_setLowWidth: function(value) {



			this._prepareResize(evt);

			this.statusFlags.lowWidth = value;

		},



		_getGlobalContext: function() {

public/javascript/redmic/modules/base/_Show.js

+32 −33
Original line number Diff line number Diff line
@@ -5,6 +5,7 @@ define([ 
	, "dojo/Deferred"

	, "dojo/query"

	, "put-selector/put"

	, "redmic/modules/base/_ListenWindowResize"

	, "redmic/modules/base/_ShowItfc"

], function(

	declare
@@ -13,9 +14,11 @@ define([ 
	, Deferred

	, query

	, put

	, _ListenWindowResize

	, _ShowItfc

) {

	return declare(_ShowItfc, {



	return declare([_ShowItfc, _ListenWindowResize], {

		//	summary:

		//		Base común para todos los módulos con visualización.

		//	description:
@@ -55,8 +58,6 @@ define([ 
		lockedClass: "lockedWrapper",



		animationSafetyTimeout: 2000,

		additionalResizeTimeout: 500,

		lowWidthValue: 800,





		constructor: function(args) {
@@ -64,7 +65,6 @@ define([ 
			this._setShown(false);

			this._setPreviouslyShown(false);

			this._setStartupStatus(false);

			this._setLowWidth(window.innerWidth < this.lowWidthValue);



			aspect.after(this, "_mixEventsAndActions", lang.hitch(this, this._mixShowEventsAndActions));

			aspect.before(this, "_setOwnCallbacksForEvents", lang.hitch(this, this._setShowOwnCallbacksForEvents));
@@ -569,10 +569,35 @@ define([ 


		_subResize: function(req) {



			this._emitEvt('RESIZE', req);

			this._resizeWrapper(req);



			this._propagateActionToChildren('RESIZE', req);

		},



		_resizeWrapper: function(req) {



			var resizeDfd = this._resize(req),

				emitResize = lang.hitch(this, this._emitResize);



			if (resizeDfd && resizeDfd.then) {

				resizeDfd.then(emitResize);

			} else {

				emitResize();

			}

		},



		_emitResize: function() {



			var evt = {};



			if (this.node) {

				evt.width = this.node.offsetWidth;

				evt.height = this.node.offsetHeight;

			}



			this._emitEvt('RESIZE', evt);

		},



		_subLock: function() {



			this._lock();
@@ -636,23 +661,6 @@ define([ 
			}

		},



		_prepareResize: function(res) {



			clearTimeout(this._additionalResizeHandler);

			this._additionalResizeHandler = setTimeout(lang.hitch(this, this._doShowResize, res),

				this.additionalResizeTimeout);



			// TODO en _Window hay una funcionalidad de emitir el evento RESIZE, que debería usarse

			// aqui para todos. Generalizar lo que se encuentra en _Window y compatibilizar

		},



		_doShowResize: function(res) {



			this._setLowWidth(window.innerWidth < this.lowWidthValue);



			this._resize(res);

		},



		_getShownOrHiddenResponseObject: function() {



			return {
@@ -766,6 +774,7 @@ define([ 


		_onModuleResize: function(evt) {



			// TODO vestigio de dijit, desaparecerá

			if (this.layout) {

				this.layout();

			}
@@ -789,16 +798,6 @@ define([ 
		_setLoadingStatus: function(value) {



			this.statusFlags.loading = value;

		},



		_getLowWidth: function() {



			return this.statusFlags.lowWidth;

		},



		_setLowWidth: function(value) {



			this.statusFlags.lowWidth = value;

		}

	});

});

public/javascript/redmic/modules/base/_Window.js

+17 −25
Original line number Diff line number Diff line
@@ -63,7 +63,7 @@ define([ 
		_resizableForcedMinWidth: 100,

		_validSizeInterval: 100,

		_userResizeTimeout: 100,

		_emitResizeTimeout: 100,

		_moduleWindowResizeTimeout: 100,





		_setShowOwnCallbacksForEvents: function () {
@@ -75,7 +75,7 @@ define([ 


		_onWindowAncestorShown: function() {



			this._prepareToEmitResize();

			this._prepareToResizeModuleWindow();

		},



		_beforeShow: function(req) {
@@ -257,7 +257,7 @@ define([ 
			}



			clearTimeout(self._userResizeTimeoutHandler);

			self._userResizeTimeoutHandler = setTimeout(lang.hitch(self, self._prepareToEmitResize),

			self._userResizeTimeoutHandler = setTimeout(lang.hitch(self, self._prepareToResizeModuleWindow),

				self._userResizeTimeout);

		},
@@ -319,7 +319,7 @@ define([ 
		_onWindowValidSize: function() {



			this._emitEvt('LOADED');

			this._prepareToEmitResize();

			this._prepareToResizeModuleWindow();

		},



		_decorateTitleNode: function() {
@@ -397,7 +397,7 @@ define([ 
			}



			this._minimizeDfd = new Deferred();

			this._minimizeDfd.then(lang.hitch(this, this._prepareToEmitResize), function() {});

			this._minimizeDfd.then(lang.hitch(this, this._prepareToResizeModuleWindow), function() {});

		},



		_maximizeModule: function() {
@@ -444,7 +444,7 @@ define([ 
			domClass.remove(this._windowNode.parentNode, this.windowResizedParentClass);



			this._setResizedByUser(false);

			this._prepareToEmitResize();

			this._prepareToResizeModuleWindow();



			this._maximizeModuleReturn();

		},
@@ -456,7 +456,7 @@ define([ 
			}



			this._maximizeDfd = new Deferred();

			this._maximizeDfd.then(lang.hitch(this, this._prepareToEmitResize), function() {});

			this._maximizeDfd.then(lang.hitch(this, this._prepareToResizeModuleWindow), function() {});

		},



		_updateMaximizeButtonIcon: function(/*Boolean*/ altIcon) {
@@ -479,39 +479,31 @@ define([ 


			domStyle.set(this._windowNode.parentNode, 'display', 'none');



			this._prepareToEmitResize();

			this._prepareToResizeModuleWindow();

		},



		_resize: function() {



			this._limitMaxHeightToAvailableHeight();

			this._prepareToEmitResize();

			this._resizeModuleWindow();



			this.inherited(arguments);

		},



		_prepareToEmitResize: function() {

		_prepareToResizeModuleWindow: function() {



			clearTimeout(this._moduleWindowResizeTimeoutHandler);



			clearTimeout(this._emitResizeTimeoutHandler);

			this._emitResizeTimeoutHandler = setTimeout(lang.hitch(this, this._emitResize), this._emitResizeTimeout);

			this._moduleWindowResizeTimeoutHandler = setTimeout(lang.hitch(this, this._resizeWrapper),

				this._moduleWindowResizeTimeout);

		},



		_emitResize: function() {

		_resizeModuleWindow: function() {



			if (!this.node) {

				return;

			}

			this._limitMaxHeightToAvailableHeight();



			if (!this._getResizedByUser()) {

			if (this.node && !this._getResizedByUser()) {

				this._autoMaximizeOnLowWidth();

			}



			// TODO esto debería ser responsabilidad de _Show, y emitirlo siempre cuando acabe

			// de hacer el _resize (quizá con un dfd de retorno??). Pensar

			this._emitEvt('RESIZE', {

				width: this.node.offsetWidth,

				height: this.node.offsetHeight

			});

		},



		_autoMaximizeOnLowWidth: function() {

public/javascript/redmic/modules/components/Sidebar/Sidebar.js

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

	"dijit/registry"

	, "dojo/_base/declare"

	"dojo/_base/declare"

	, "dojo/_base/lang"

	, "dojo/dom-class"

	, "dojo/on"

	, "dojo/query"

	, "put-selector/put"

	, "redmic/modules/base/_ListenWindowResize"

	, "redmic/modules/base/_Module"

	, "redmic/modules/base/_Show"



	, "dojo/NodeList-dom"

	, "dojo/NodeList-traverse"

], function(

	registry

	, declare

	declare

	, lang

	, domClass

	, on

	, query

	, put

	, _ListenWindowResize

	, _Module

	, _Show

) {



	return declare([_Module, _Show, _ListenWindowResize], {

	return declare([_Module, _Show], {

		//	summary:

		//		Módulo para la creación del Sidebar de la aplicación.

		//	description:
@@ -50,7 +46,6 @@ define([ 
					AVAILABLE_ALLOWED_MODULES: "availableAllowedModules"

				},



				enableCollapseSidebarClass: 'enableCollapseSidebar',

				collapsedSidebarClass: 'collapsedSidebar',

				primaryClass: "primary.main-nav",

				primaryActiveItem: null,
@@ -184,16 +179,9 @@ define([ 


		_updateSidebarCollapseStatus: function(classAction, newLabel) {



			var globalContainerId = query('#rootContainer')[0].children[0].id,

				globalContainer = registry.byId(globalContainerId),

				updateMethod = domClass[classAction];

			domClass[classAction](this.ownerDocumentBody, this.collapsedSidebarClass);



			updateMethod(this.ownerDocumentBody, this.enableCollapseSidebarClass);

			updateMethod(this.ownerDocumentBody, this.collapsedSidebarClass);



			if (globalContainer && typeof globalContainer.resize === 'function') {

				globalContainer.resize();

			}

			this._publish(this._buildChannel(this.rootChannel, this.actions.RESIZE));

		},



		_addItems: function(/*Array*/ items) {