[19/35] git commit: refs/heads/master - UI plugins: Dynamically load CSS

[bf...@apache.org]

UI plugins: Dynamically load CSS

Adds a CSS file <pluginName>.css to the plugin structure, which allows
developer to specify custom CSS to be loaded after their JS code.


Project: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/commit/806105f9
Tree: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/tree/806105f9
Diff: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/diff/806105f9

Branch: refs/heads/master
Commit: 806105f9a1621a3c626ec4082d5d4fff4d96c629
Parents: bf2691c
Author: Brian Federle <br...@citrix.com>
Authored: Tue Jan 29 13:56:36 2013 -0800
Committer: Brian Federle <br...@citrix.com>
Committed: Tue Jan 29 13:56:36 2013 -0800

----------------------------------------------------------------------
 ui/plugins/testPlugin/testPlugin.css |    2 ++
 ui/scripts/plugins.js                |   16 ++++++++++++++++
 2 files changed, 18 insertions(+), 0 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/806105f9/ui/plugins/testPlugin/testPlugin.css
----------------------------------------------------------------------
diff --git a/ui/plugins/testPlugin/testPlugin.css b/ui/plugins/testPlugin/testPlugin.css
new file mode 100644
index 0000000..19e1241
--- /dev/null
+++ b/ui/plugins/testPlugin/testPlugin.css
@@ -0,0 +1,2 @@
+/* Put your CSS here */
+

http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/806105f9/ui/scripts/plugins.js
----------------------------------------------------------------------
diff --git a/ui/scripts/plugins.js b/ui/scripts/plugins.js
index 5cc3185..f513ed6 100644
--- a/ui/scripts/plugins.js
+++ b/ui/scripts/plugins.js
@@ -1,4 +1,16 @@
 (function($, cloudStack, require) {
+  var loadCSS = function(path) {
+    var $link = $('<link>');
+
+    $link.attr({
+      rel: 'stylesheet',
+      type: 'text/css',
+      href: path
+    });
+
+    $('head').append($link);
+  };
+
   var pluginAPI = {
     addSection: function(section) {
       cloudStack.sections[section.id] = section;
@@ -18,14 +30,18 @@
     var basePath = 'plugins/' + pluginID + '/';
     var pluginJS = basePath + pluginID + '.js';
     var configJS = basePath + 'config.js';
+    var pluginCSS = basePath + pluginID + '.css';
 
     require([pluginJS], function() {
       require([configJS]);
+      loadCSS(pluginCSS);
 
       // Execute plugin
       cloudStack.plugins[pluginID]({
         ui: pluginAPI
       });
     });
+
+    // Load CSS
   });
 }(jQuery, cloudStack, require));