webui: facet container

A widget which servers as container for facets. FacetContainer is a base
class. App is specialization.

Doing this abstraction will allow us to implement various facet containers.

https://fedorahosted.org/freeipa/ticket/3903

Reviewed-By: Adam Misnyovszki <amisnyov@redhat.com>

install/ui/src/freeipa/Application_controller.js

@@ -27,15 +27,16 @@ define([
         'dojo/topic',
         'dojo/query',
         'dojo/dom-class',
-       './json2',
+        './json2',
         './widgets/App',
+        './widgets/FacetContainer',
         './ipa',
-       './navigation/Menu',
+        './navigation/Menu',
         './navigation/Router',
         './navigation/menu_spec'
        ],
        function(declare, lang, array, Deferred, on, topic, query, dom_class,
-            JSON, App_widget, IPA, Menu, Router, menu_spec) {
+            JSON, App_widget, FacetContainer, IPA, Menu, Router, menu_spec) {
 
     /**
      * Application controller
@@ -46,6 +47,11 @@ define([
      */
     var App = declare(null, {
 
+        /**
+         * Facet container map
+         */
+        containers: null,
+
         app_widget: null,
 
         router: null,
@@ -56,12 +62,39 @@ define([
 
         facet_changing: false,
 
+        /**
+         * Currently displayed facet
+         *
+         */
+        current_facet: null,
+
+        /**
+         * Currently displayed facet container
+         */
+        current_container: null,
+
         init: function() {
             this.menu = new Menu();
             this.router = new Router();
+
+            var body_node = query('body')[0];
             this.app_widget = new App_widget();
+            this.app_widget.container_node = body_node;
             this.app_widget.menu_widget.set_menu(this.menu);
-            this.app_widget.container_node = query('body')[0];
+
+            var simple_container = new FacetContainer();
+            simple_container.container_node = body_node;
+
+            this.containers = {
+                // Default view
+                main: {
+                    widget: this.app_widget
+                },
+                // Mainly for standalone facets
+                simple: {
+                    widget: simple_container
+                }
+            };
 
             on(this.app_widget.menu_widget, 'item-select', lang.hitch(this, this.on_menu_click));
             on(this.app_widget, 'profile-click', lang.hitch(this, this.on_profile));
@@ -77,6 +110,9 @@ define([
             topic.subscribe('phase-error', lang.hitch(this, this.on_phase_error));
 
             this.app_widget.render();
+            this.app_widget.hide();
+            simple_container.render();
+            simple_container.hide();
         },
 
         /**
@@ -248,12 +284,27 @@ define([
         on_facet_show: function(event) {
             var facet = event.facet;
 
+            // choose container
+            var container = this.containers[facet.preferred_container];
+            if (!container) container = this.containers.main;
+
+            if (this.current_container !== container) {
+
+                if (this.current_container) {
+                    this.current_container.widget.hide();
+                }
+
+                this.current_container = container;
+                this.current_container.widget.show();
+            }
+
             // update menu
             var menu_item = this._find_menu_item(facet);
             if (menu_item) this.menu.select(menu_item);
 
+            // show facet
             if (!facet.container) {
-                facet.container_node = this.app_widget.content_node;
+                facet.container_node = container.widget.content_node;
                 on(facet, 'facet-state-change', lang.hitch(this, this.on_facet_state_changed));
             }
             if (this.current_facet) {

install/ui/src/freeipa/facet.js

@@ -124,6 +124,14 @@ exp.facet = IPA.facet = function(spec, no_init) {
 
     var that = new Evented();
 
+    /**
+     * Name of preferred facet container
+     *
+     * Leave unset to use default container.
+     * @property {string}
+     */
+    that.preferred_container = spec.preferred_container;
+
     /**
      * Entity this facet belongs to
      * @property {entity.entity}

install/ui/src/freeipa/phases.js

@@ -32,6 +32,7 @@ define([
             //'resource-load', // implicit phase
             'customization',
             'registration',
+            'login',
             'init',
             'metadata',
             'post-metadata',

install/ui/src/freeipa/widgets/App.js

@@ -28,14 +28,14 @@ define(['dojo/_base/declare',
         'dojo/dom-style',
         'dojo/query',
         'dojo/on',
-        'dojo/Evented',
-        'dojo/Stateful',
         './Menu',
         './DropdownWidget',
+        './FacetContainer',
         'dojo/NodeList-dom'
        ],
        function(declare, lang, array, dom, construct, prop, dom_class,
-                dom_style, query, on, Stateful, Evented, Menu, DropdownWidget) {
+                dom_style, query, on, Menu, DropdownWidget,
+                FacetContainer) {
 
     /**
      * Main application widget
@@ -45,13 +45,12 @@ define(['dojo/_base/declare',
      *
      * @class widgets.App
      */
-    var app = declare([Stateful, Evented], {
+    var app = declare([FacetContainer], {
 
         //widgets
         menu_widget: null,
 
         //nodes:
-
         dom_node: null,
 
         container_node: null,
@@ -64,9 +63,7 @@ define(['dojo/_base/declare',
 
         menu_node: null,
 
-        content_node: null,
-
-        app_id: 'container',
+        id: 'container',
 
         logged: false,
 
@@ -87,7 +84,7 @@ define(['dojo/_base/declare',
         render: function() {
 
             this.dom_node = construct.create('div', {
-                id: this.app_id,
+                id: this.id,
                 'class': 'app-container'
             });
 

install/ui/src/freeipa/widgets/FacetContainer.js

@@ -0,0 +1,88 @@
+/*  Authors:
+ *    Petr Vobornik <pvoborni@redhat.com>
+ *
+ * Copyright (C) 2013 Red Hat
+ * see file 'COPYING' for use and warranty information
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+define(['dojo/_base/declare',
+        'dojo/_base/lang',
+        'dojo/dom-construct',
+        'dojo/dom-style',
+        'dojo/Evented',
+        'dojo/Stateful',
+        'dojo/NodeList-dom'
+       ],
+       function(declare, lang,  construct, dom_style,
+                Evented, Stateful) {
+
+    /**
+     * Container for standalone facets
+     *
+     * Main feature is that this container doesn't produce any
+     * surroundings. Therefore facets can occupy the entire page.
+     *
+     * @class widgets.FacetContainer
+     */
+    var FacetContainer = declare([Stateful, Evented], {
+
+        id: 'simple-container',
+
+        //nodes:
+        dom_node: null,
+
+        container_node: null,
+
+        content_node: null,
+
+        render: function() {
+
+            this.dom_node = construct.create('div', {
+                id: this.id,
+                'class': 'app-container'
+            });
+
+            if (this.container_node) {
+                construct.place(this.dom_node, this.container_node);
+            }
+
+            this.content_node = construct.create('div', {
+                'class': 'content'
+            }, this.dom_node);
+
+            return this.dom_node;
+        },
+
+        show: function() {
+            if (!this.dom_node) return;
+
+            dom_style.set(this.dom_node, 'display', '');
+        },
+
+        hide: function() {
+            if (!this.dom_node) return;
+
+            dom_style.set(this.dom_node, 'display', 'none');
+        },
+
+        constructor: function(spec) {
+            spec = spec || {};
+            declare.safeMixin(this, spec);
+        }
+    });
+
+    return FacetContainer;
+});