UI Plugin: Use new format

bfederle · bfederle · commit 347ac311a072 · 2012-12-20T11:55:44.000-08:00
Define plugins as namespaced objects instead of as function calls. This
is easier to implement and manage by the framework.

New format changes for defining plugins:

Now create 2 JS files in plugin folder:
  -config.js
  -[pluginName].js

plugins.js (listing) format:

  cloudStack.plugins = [
    'testPlugin'
  ];

config.js format:

  cloudStack.plugins.testPlugin.config = {
    title: 'Test Plugin',
    desc: 'Sample plugin'
  };

[pluginName].js format:

  cloudStack.plugins.testPlugin = function(plugin) {
    //
    // Plugin code goes here
    //
  };
diff --git a/ui/index.jsp b/ui/index.jsp
@@ -1674,11 +1674,12 @@ under the License.
     <script type="text/javascript" src="scripts/system.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/domains.js?t=<%=now%>"></script>
     <script type="text/javascript" src="scripts/docs.js?t=<%=now%>"></script>
-    <script type="text/javascript" src="scripts/ui-custom/plugins.js?t=<%=now%>"></script>
-    <script type="text/javascript" src="scripts/plugins.js?t=<%=now%>"></script>
 
-    <!-- Plugin listing -->
+    <script type="text/javascript" src="scripts/ui-custom/plugins.js?t=<%=now%>"></script>
+    
+    <!-- Plugins -->
     <script type="text/javascript" src="plugins/plugins.js?t=<%=now%>"></script>
+    <script type="text/javascript" src="scripts/plugins.js?t=<%=now%>"></script>
   </body>
 </html>
 <jsp:include page="dictionary.jsp" />
diff --git a/ui/plugins/plugins.js b/ui/plugins/plugins.js
@@ -1,6 +1,5 @@
 (function($, cloudStack) {
-  cloudStack.plugins.load([
-    'testPlugin1',
-    'testPlugin2'
-  ]);
+  cloudStack.plugins = [
+    'testPlugin'
+  ];
 }(jQuery, cloudStack));
diff --git a/ui/plugins/testPlugin/config.js b/ui/plugins/testPlugin/config.js
@@ -0,0 +1,6 @@
+(function (cloudStack) {
+  cloudStack.plugins.testPlugin.config = {
+    title: 'Test Plugin',
+    desc: 'Sample plugin'
+  };
+}(cloudStack));
diff --git a/ui/plugins/testPlugin/testPlugin.js b/ui/plugins/testPlugin/testPlugin.js
@@ -0,0 +1,7 @@
+(function (cloudStack) {
+  cloudStack.plugins.testPlugin = function(plugin) {
+    //
+    // Plugin code goes here
+    //
+  };
+}(cloudStack));
diff --git a/ui/plugins/testPlugin1/testPlugin1.js b/ui/plugins/testPlugin1/testPlugin1.js
diff --git a/ui/plugins/testPlugin2/testPlugin2.js b/ui/plugins/testPlugin2/testPlugin2.js
diff --git a/ui/scripts/plugins.js b/ui/scripts/plugins.js
@@ -1,35 +1,26 @@
-(function($, cloudStack) {
-  cloudStack.plugin = function(args) {
-    var id = args.id;
-    var title = args.title;
-    var desc = args.desc;
-
-    cloudStack.plugins.registry[id] = {
-      title: title,
-      desc: desc
-    };
+(function($, cloudStack, require) {
+  cloudStack.sections.plugins = {
+    title: 'Plugins',
+    show: cloudStack.uiCustom.plugins
   };
 
-  cloudStack.plugins = {
-    loaded: [], // Lists loaded plugins by ID
-    registry: {}, // Stores metadata for plugins
-
-    // Loads/executes script
-    load: function(plugins) {
-      $(plugins).map(function(index, pluginID) {
-        var path = '/client/plugins/' + pluginID + '/' + pluginID + '.js';
+  // Load plugins
+  $(cloudStack.plugins).map(function(index, pluginID) {
+    var basePath = 'plugins/' + pluginID + '/';
+    var pluginJS = basePath + pluginID + '.js';
+    var configJS = basePath + 'config.js';
 
-        require([path], function() {
-          cloudStack.plugins.loaded.push(pluginID);
-        });
+    require([pluginJS], function() {
+      require([configJS]);
 
-        return path;
+      // Execute plugin
+      cloudStack.plugins[pluginID]({
+        ui: {
+          extend: function(obj) {
+            $.extend(true, cloudStack, obj);
+          }
+        }
       });
-    }
-  };
-
-  cloudStack.sections.plugins = {
-    title: 'Plugins',
-    show: cloudStack.uiCustom.plugins
-  }
-}(jQuery, cloudStack));
+    });
+  });
+}(jQuery, cloudStack, require));
diff --git a/ui/scripts/ui-custom/plugins.js b/ui/scripts/ui-custom/plugins.js
@@ -37,14 +37,14 @@
   };
 
   cloudStack.uiCustom.plugins = function() {
-    var plugins = cloudStack.plugins.loaded;
+    var plugins = cloudStack.plugins;
 
     return elems.pluginListing({
       plugins: $(plugins).map(function(index, pluginID) {
-        var plugin = cloudStack.plugins.registry[pluginID];
+        var plugin = cloudStack.plugins[pluginID].config;
 
         return {
-          id: plugin.id,
+          id: pluginID,
           title: plugin.title,
           desc: plugin.desc
         };
