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 <[email protected]> Authored: Tue Jan 29 13:56:36 2013 -0800 Committer: Brian Federle <[email protected]> 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));
