Actualiza Topbar, elimina contenedores Dijit (c0697404) · Commits · REDMIC Project / Client / Web

public/javascript/app/_app.js

+0 −5

Original line number	Diff line number	Diff line
		@@ -80,11 +80,6 @@ define([
		this._emitEvt('MODULE_SHOWN', {
		key: moduleKey
		});
		},

		_getNodeToShow: function() {

		return this.domNode;
		}
		});
		});

public/javascript/app/components/Topbar.js

+86 −28

Original line number	Diff line number	Diff line
		define([
		"dijit/layout/ContentPane"
		, "dojo/_base/declare"
		, "dojo/_base/lang"
		, "put-selector/put"
		, "redmic/modules/base/Manager"
		'dojo/_base/declare'
		, 'dojo/_base/lang'
		, 'put-selector/put'
		, 'redmic/modules/base/_Module'
		, 'redmic/modules/base/_Show'
		, 'redmic/modules/base/Manager'
		, 'redmic/modules/user/FullscreenToggle'
		, 'redmic/modules/user/LanguageSelector'
		, 'redmic/modules/user/UserArea'
		], function(
		ContentPane
		, declare
		declare
		, lang
		, put
		, _Module
		, _Show
		, Manager
		, FullscreenToggle
		, LanguageSelector
		, UserArea
		) {
		return declare(ContentPane, {

		return declare([_Module, _Show], {
		// summary:
		// Widget que controla la barra superior, siempre visible y compartida.
		// description:
		@@ -20,37 +29,48 @@ define([
		constructor: function(args) {

		this.config = {
		region: "top",
		'class': "topbar",
		'class': 'topbar',

		collapseButtonClass: 'collapseSidebarButton',

		logoClass: 'topbarLogo',
		logoHref: '/home',
		logoImgSrc: '/resources/images/logos/logo.svg',
		logoTextContent: 'REDMIC',
		doLayout: false,
		show: {
		left: true,
		right: true
		}
		logoTextContent: 'REDMIC'
		};

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

		_initialize: function() {

		this.userArea = new UserArea({
		parentChannel: this.getChannel()
		});

		this.languageSelector = new LanguageSelector({
		parentChannel: this.getChannel()
		});

		this.fullscreenToggle = new FullscreenToggle({
		parentChannel: this.getChannel()
		});
		},

		postCreate: function() {

		// Se crean los nodos
		this._collapseNode = put(this.domNode, "div.collapseSidebarButton");
		this._collapseNode.onclick = lang.hitch(this, this._onCollapseClicked);
		this.inherited(arguments);

		this._createCollapseNode();
		this._createLogoNode();
		this._createContentNode();
		},

		if (this.show.left) {
		this.leftNode = put(this.domNode, "div.manager");
		}
		_createCollapseNode: function() {

		this.manager = new Manager({
		parentChannel: this.parentChannel
		}, this.leftNode);
		var collapseNode = put(this.domNode, 'div.' + this.collapseButtonClass);

		collapseNode.onclick = lang.hitch(this, this._onCollapseClicked);
		},

		_createLogoNode: function() {
		@@ -65,10 +85,48 @@ define([
		put(logoNode, 'span', this.logoTextContent);
		},

		_createContentNode: function() {

		var contentNode = put(this.domNode, 'div.topbarContent'),
		managerNode = put(contentNode, 'div.manager'),
		buttonsNode = put(contentNode, 'div.buttons');

		this._createManagerNode(managerNode);
		this._showModules(buttonsNode);
		},

		_createManagerNode: function(containerNode) {

		// TODO integrar manager con topbar, manager está desfasado casi por completo
		this._manager = new Manager({
		//parentChannel: this.getChannel()
		parentChannel: this.parentChannel
		}, containerNode);
		},

		_showModules: function(containerNode) {

		// TODO notification es global, pero se podría separar su botón como módulo independiente y crearlo aquí
		this._publish(this._buildChannel(this.notificationChannel, this.actions.SHOW), {
		node: containerNode
		});

		this._publish(this.fullscreenToggle.getChannel('SHOW'), {
		node: containerNode
		});

		this._publish(this.languageSelector.getChannel('SHOW'), {
		node: containerNode
		});

		this._publish(this.userArea.getChannel('SHOW'), {
		node: containerNode
		});
		},

		_onCollapseClicked: function() {

		// TODO hacerlo en this en lugar de this.manager cuando topbar sea módulo
		this.manager._publish(this.manager._buildChannel(this.manager.rootChannel, 'toggleSidebar'));
		this._publish(this._buildChannel(this.rootChannel, 'toggleSidebar'));
		}
		});
		});

public/javascript/app/innerApp.js

+31 −87

Original line number	Diff line number	Diff line
		define([
		'app/_app'
		, 'app/components/Topbar'
		, 'dijit/layout/ContentPane'
		, 'dijit/layout/LayoutContainer'
		, 'dojo/_base/declare'
		, 'dojo/_base/lang'
		, 'dojo/aspect'
		, "dojo/dom-class"
		, 'dojo/on'
		, 'dojo/query'
		, 'put-selector/put'
		, 'redmic/base/Credentials'
		, 'redmic/modules/base/Selector'
		@@ -21,20 +18,14 @@ define([
		, 'redmic/modules/socket/_Worms'
		, 'redmic/modules/socket/Socket'
		, 'redmic/modules/socket/Task'
		, 'redmic/modules/user/FullscreenToggle'
		, 'redmic/modules/user/LanguageSelector'
		, 'redmic/modules/user/UserArea'
		], function(
		App
		, Topbar
		, ContentPane
		, LayoutContainer
		, declare
		, lang
		, aspect
		, domClass
		, on
		, query
		, put
		, Credentials
		, Selector
		@@ -47,11 +38,9 @@ define([
		, _Worms
		, Socket
		, Task
		, FullscreenToggle
		, LanguageSelector
		, UserArea
		) {
		return declare([LayoutContainer, App], {

		return declare(App, {
		// Summary:
		// Implementación del módulo App, encargada de mostrar las vistas de la parte interna de la aplicación
		//
		@@ -62,12 +51,13 @@ define([
		constructor: function(args) {

		this.config = {
		design: 'sidebar',
		'class': 'mainContainer',
		reducedWidthClass: 'reducedWidth',
		contentContainerClass: 'contentContainer',
		collapseButtonClass: 'collapseSidebarButton',
		uncollapsedSidebarClass: 'uncollapsedSidebar',
		overlaySidebarBackgroundClass: 'overlaySidebarBackground',
		isLayoutContainer: true,

		innerAppEvents: {
		UPDATE_ACTIVE: 'updateActive'
		},
		@@ -131,34 +121,12 @@ define([

		this.inherited(arguments);

		this.addChild(this.bc);
		this.addChild(this.sidebarNode);
		this.addChild(this.topbar);

		this._publish(this.sidebar.getChannel('SHOW'), {
		this._publish(this.topbar.getChannel('SHOW'), {
		node: this.domNode
		});

		// TODO esto es un abuso, no deberíamos acceder a los nodos de un módulo desde fuera. Crear canal para
		// añadir hijos al topbar
		//
		// TODO realmente, Topbar habría que replantearlo, ya que no es un módulo sino un ContentPane decorado.
		var topbarRightNode = this.topbar.domNode.lastChild;

		this._publish(this._buildChannel(this.notificationChannel, this.actions.SHOW), {
		node: topbarRightNode
		});

		this._publish(this.fullscreenToggle.getChannel('SHOW'), {
		node: topbarRightNode
		});

		this._publish(this.languageSelector.getChannel('SHOW'), {
		node: topbarRightNode
		});

		this._publish(this.userArea.getChannel('SHOW'), {
		node: topbarRightNode
		this._publish(this.sidebar.getChannel('SHOW'), {
		node: this.domNode
		});

		this._evaluateAppSize();
		@@ -170,9 +138,6 @@ define([

		this._handleListenersOnToggleSidebar();

		// TODO vestigio de dijit, desaparecerá
		this.layout();

		this._propagateActionToChildren('RESIZE', {});
		},

		@@ -185,8 +150,7 @@ define([
		var overlayMainSidebarIsOpen = domClass.contains(this.ownerDocumentBody, this.uncollapsedSidebarClass);

		if (overlayMainSidebarIsOpen) {
		// TODO setTimeout permite click sobre botón de Topbar para mostrar Sidebar, puede haber mejor solución
		setTimeout(lang.hitch(this._appClickHandler, this._appClickHandler.resume), 0);
		this._appClickHandler.resume();
		} else {
		this._appClickHandler.pause();
		}
		@@ -215,10 +179,6 @@ define([
		// tags:
		// private

		this.sidebar = new MainSidebarImpl({
		parentChannel: this.ownChannel
		});

		new QueryStore({
		parentChannel: this.ownChannel
		});
		@@ -252,15 +212,12 @@ define([
		parentChannel: this.ownChannel
		});

		this.userArea = new UserArea({
		parentChannel: this.ownChannel
		});

		this.languageSelector = new LanguageSelector({
		parentChannel: this.ownChannel
		this.topbar = new Topbar({
		parentChannel: this.ownChannel,
		collapseButtonClass: this.collapseButtonClass
		});

		this.fullscreenToggle = new FullscreenToggle({
		this.sidebar = new MainSidebarImpl({
		parentChannel: this.ownChannel
		});
		},
		@@ -271,22 +228,9 @@ define([
		// tags:
		// private

		put(this.domNode, 'div.' + this.overlaySidebarBackgroundClass);
		this._contentContainer = put(this.domNode, 'div.' + this.contentContainerClass);

		this.sidebarNode = new ContentPane({
		region: 'left',
		'class': 'mainSidebar'
		});

		this.topbar = new Topbar({
		parentChannel: this.ownChannel,
		i18n: this.i18n
		});

		this.bc = new ContentPane({
		region: 'center',
		'class': 'contentContainer'
		});
		put(this.domNode, 'div.' + this.overlaySidebarBackgroundClass);
		},

		_createListeners: function() {
		@@ -304,21 +248,19 @@ define([
		// returns: Object
		// Nodo central del layout

		return this.bc.domNode;
		return this._contentContainer;
		},

		_onAppResize: function(evt) {

		if (!this._getNodeToShow()) {
		// TODO evita que entren instancias viejas (login, logout, login), cuando se destruya bien app, eliminar
		if (!this.domNode) {
		return;
		}

		this._appClickHandler.pause();

		this._evaluateAppSize();

		// TODO vestigio de dijit, desaparecerá
		this.layout();
		},

		_evaluateAppSize: function() {
		@@ -359,11 +301,8 @@ define([
		this._appClickHandler.pause();

		// TODO reemplazo a destroy de todo 'app', eliminar cuando router no comparta canal y destruir solo 'app'
		this._publish(this.topbar.getChannel('DESTROY'));
		this._publish(this.sidebar.getChannel('DESTROY'));
		this._publish(this.fullscreenToggle.getChannel('DESTROY'));
		this._publish(this.languageSelector.getChannel('DESTROY'));
		this._publish(this.userArea.getChannel('DESTROY'));

		this._publish(this._buildChannel(this.storeChannel, this.actions.DESTROY));
		this._publish(this._buildChannel(this.selectorChannel, this.actions.DESTROY));
		this._publish(this._buildChannel(this.managerChannel, this.actions.DESTROY));
		@@ -371,22 +310,27 @@ define([
		this._publish(this._buildChannel(this.taskChannel, this.actions.DESTROY));
		this._publish(this._buildChannel(this.socketChannel, this.actions.DESTROY));
		this._publish(this._buildChannel(this.notificationChannel, this.actions.DESTROY));

		this.sidebarNode.destroy();
		this.topbar.destroy();
		this.bc.destroy();
		},

		_onAppClicked: function(evt) {

		var clickedNode = evt.target,
		nodeParents = query(clickedNode).parents(),
		nodeDoesNotBelongToMainSidebar = nodeParents.indexOf(this.sidebar.domNode) === -1;
		targets = this._getClickTargets(evt),
		nodeDoesNotBelongToMainSidebar = targets.indexOf(this.sidebar.domNode) === -1,
		nodeDoesNotBelongToToggleButton = !this._findCollapseButtonNode(targets).length;

		if (nodeDoesNotBelongToMainSidebar) {
		if (nodeDoesNotBelongToMainSidebar && nodeDoesNotBelongToToggleButton) {
		this._appClickHandler.pause();
		this._collapseMainSidebar();
		}
		},

		_findCollapseButtonNode: function(nodes) {

		return nodes.filter(lang.hitch(this, function(target) {

		return target && target.classList && target.classList.contains(this.collapseButtonClass);
		}));
		}
		});
		});

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

+1 −0

Original line number	Diff line number	Diff line
		@@ -262,6 +262,7 @@ function(
		if (showBtn[key2] && (!btn.node)) {
		btn.props.onClick = lang.hitch(this, this[btn.props.action]);
		btn.node = new Button(btn.props).placeAt(zone.node);
		btn.node.domNode.removeAttribute('widgetId');
		btn.shared += 1;
		} else if (showBtn[key2] && (btn.node)) { // Hay más de un widget usando este botón
		btn.shared += 1;

stylesheets @ ba42280f

Original line number	Diff line number	Diff line
		Subproject commit ff2241a385b4a63ff5652761d25dd3bf46ec0984
		Subproject commit ba42280f939daf31773d3183b0003cab62df9aa1