Merge remote-tracking branch 'origin/open591' into open-master

platform/commonUI/README.md

@@ -1,3 +1,17 @@
-This directory contains bundles containing common user interface 
-elements of Open MCT Web; that is, the user interface for the application 
-as a whole (as opposed to for specific features) is implemented here. 
+This directory contains bundles containing common user interface
+elements of Open MCT Web; that is, the user interface for the application
+as a whole (as opposed to for specific features) is implemented here.
+
+# Extensions
+
+This bundles adds a `stylesheets` extension category used to inject CSS
+from bundles. These extensions are declaration-only (no scripted
+implementation is needed or used); a single property, `stylesheetUrl`,
+should be provided, with a path to the relevant CSS file (including
+extension) relative to the resources directory for that bundle.
+
+Links to these CSS files are appended to the head when the application
+is started. These are added in standard priority order (see documentation
+for the framework layer); the order of inclusion of style sheets can
+change the way they are handled/understood by the browser, so priority
+can be used to provide control over this order.

platform/commonUI/general/bundle.json

@@ -3,6 +3,30 @@
     "description": "General UI elements, meant to be reused across modes.",
     "resources": "res",
     "extensions": {
+        "runs": [
+            {
+                "implementation": "StyleSheetLoader.js",
+                "depends": [ "stylesheets[]", "$document" ]
+            }
+        ],
+        "stylesheets": [
+            {
+                "stylesheetUrl": "css/normalize.min.css",
+                "priority": "mandatory"
+            },
+            {
+                "stylesheetUrl": "css/theme-espresso.css",
+                "priority": 1000
+            },
+            {
+                "stylesheetUrl": "css/items.css",
+                "priority": 901
+            },
+            {
+                "stylesheetUrl": "css/tree.css",
+                "priority": 900
+            }
+        ],
         "templates": [
             {
                 "key": "bottombar",

platform/commonUI/general/src/StyleSheetLoader.js

@@ -0,0 +1,44 @@
+/*global define*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * The StyleSheetLoader adds links to style sheets exposed from
+         * various bundles as extensions of category `stylesheets`.
+         * @constructor
+         * @param {object[]} stylesheets stylesheet extension definitions
+         * @param $document Angular's jqLite-wrapped document element
+         */
+        function StyleSheetLoader(stylesheets, $document) {
+            var head = $document.find('head'),
+                document = $document[0];
+
+            // Procedure for adding a single stylesheet
+            function addStyleSheet(stylesheet) {
+                // Create a link element, and construct full path
+                var link = document.createElement('link'),
+                    path = [
+                        stylesheet.bundle.path,
+                        stylesheet.bundle.resources,
+                        stylesheet.stylesheetUrl
+                    ].join("/");
+
+                // Initialize attributes on the link
+                link.setAttribute("rel", "stylesheet");
+                link.setAttribute("type", "text/css");
+                link.setAttribute("href", path);
+
+                // Append the link to the head element
+                head.append(link);
+            }
+
+            // Add all stylesheets from extensions
+            stylesheets.forEach(addStyleSheet);
+        }
+
+        return StyleSheetLoader;
+    }
+);

platform/commonUI/general/test/StyleSheetLoaderSpec.js

@@ -0,0 +1,57 @@
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ["../src/StyleSheetLoader"],
+    function (StyleSheetLoader) {
+        "use strict";
+
+        describe("The style sheet loader", function () {
+            var testStyleSheets,
+                mockDocument,
+                mockPlainDocument,
+                mockHead,
+                mockElement,
+                loader;
+
+            beforeEach(function () {
+                var testBundle = {
+                    path: "a/b",
+                    resources: "c"
+                };
+
+                testStyleSheets = [
+                    { stylesheetUrl: "d.css", bundle: testBundle },
+                    { stylesheetUrl: "e.css", bundle: testBundle },
+                    { stylesheetUrl: "f.css", bundle: testBundle }
+                ];
+
+                mockPlainDocument =
+                    jasmine.createSpyObj("document", ["createElement"]);
+                mockDocument = [ mockPlainDocument ];
+                mockDocument.find = jasmine.createSpy("$document.find");
+                mockHead = jasmine.createSpyObj("head", ["append"]);
+                mockElement = jasmine.createSpyObj("link", ["setAttribute"]);
+
+                mockDocument.find.andReturn(mockHead);
+                mockPlainDocument.createElement.andReturn(mockElement);
+
+                loader = new StyleSheetLoader(testStyleSheets, mockDocument);
+            });
+
+            it("appends one link per stylesheet extension", function () {
+                expect(mockHead.append.calls.length)
+                    .toEqual(testStyleSheets.length);
+            });
+
+            it("appends links to the head", function () {
+                expect(mockDocument.find).toHaveBeenCalledWith('head');
+            });
+
+            it("adjusts link locations", function () {
+                expect(mockElement.setAttribute)
+                    .toHaveBeenCalledWith('href', "a/b/c/d.css");
+            });
+        });
+    }
+);
+

platform/commonUI/general/test/suite.json

@@ -9,5 +9,6 @@
     "controllers/ViewSwitcherController",
     "directives/MCTContainer",
     "directives/MCTDrag",
-    "directives/MCTResize"
+    "directives/MCTResize",
+    "StyleSheetLoader"
 ]