display top plugins

dashboard-ui/scripts/plugincatalogpage.js

@@ -45,7 +45,7 @@
         var availablePlugins = options.availablePlugins;
         var installedPlugins = options.installedPlugins;
 
-        availablePlugins = availablePlugins.filter(function (p) {
+        var allPlugins = availablePlugins.filter(function (p) {
 
             p.category = p.category || "General";
             p.categoryDisplayName = Globalize.translate('PluginCategory' + p.category.replace(' ', ''));
@@ -64,21 +64,74 @@
 
             return p.type == "UserInstalled";
 
-        }).sort(function (a, b) {
-
-            var aName = (a.category) + " " + a.name;
-            var bame = (b.category) + " " + b.name;
-
-            return aName > bame ? 1 : -1;
         });
 
-        var pluginhtml = '';
+        availablePlugins = allPlugins.sort(function (a, b) {
 
-        var currentCategory;
+            var aName = (a.category);
+            var bName = (b.category);
+
+            if (aName > bName) {
+                return 1;
+            }
+            if (bName > aName) {
+                return -1;
+            }
+
+            aName = (a.name);
+            bName = (b.name);
+
+            if (aName > bName) {
+                return 1;
+            }
+            if (bName > aName) {
+                return -1;
+            }
+
+            if (a.installs > b.installs) {
+                return 1;
+            }
+            if (b.installs > a.installs) {
+                return -1;
+            }
+
+            return 0;
+        });
 
-        for (var i = 0, length = availablePlugins.length; i < length; i++) {
         var html = '';
-            var plugin = availablePlugins[i];
+        var i, length, plugin;
+
+        var currentCategory = Globalize.translate('HeaderTopPlugins');
+        html += '<div class="detailSectionHeader">' + currentCategory + '</div>';
+        var topPlugins = allPlugins.slice(0).sort(function (a, b) {
+
+            if (a.installs > b.installs) {
+                return 1;
+            }
+            if (b.installs > a.installs) {
+                return -1;
+            }
+
+            var aName = (a.name);
+            var bName = (b.name);
+
+            if (aName > bName) {
+                return 1;
+            }
+            if (bName > aName) {
+                return -1;
+            }
+
+            return 0;
+        });
+
+        for (i = 0, length = Math.min(topPlugins.length, 12) ; i < length; i++) {
+            html += getPluginHtml(topPlugins[i], options, installedPlugins);
+        }
+
+        for (i = 0, length = availablePlugins.length; i < length; i++) {
+
+            plugin = availablePlugins[i];
 
             var category = plugin.categoryDisplayName;
 
@@ -97,6 +150,23 @@
                 currentCategory = category;
             }
 
+            html += getPluginHtml(plugin, options, installedPlugins);
+
+        }
+
+        if (!availablePlugins.length && options.noItemsElement) {
+            $(options.noItemsElement).hide();
+        }
+
+        $(options.catalogElement).html(html);
+
+        Dashboard.hideLoadingMsg();
+    }
+
+    function getPluginHtml(plugin, options, installedPlugins) {
+
+        var html = '';
+
         var href = plugin.externalUrl ? plugin.externalUrl : "addplugin.html?name=" + encodeURIComponent(plugin.name) + "&guid=" + plugin.guid;
 
         if (options.context) {
@@ -173,17 +243,7 @@
         // card
         html += "</div>";
 
-            pluginhtml += html;
-
-        }
-
-        if (!availablePlugins.length && options.noItemsElement) {
-            $(options.noItemsElement).hide();
-        }
-
-        $(options.catalogElement).html(pluginhtml);
-
-        Dashboard.hideLoadingMsg();
+        return html;
     }
 
     $(document).on('pageinitdepends', "#pluginCatalogPage", function () {

dashboard-ui/strings/javascript/javascript.json

@@ -847,6 +847,6 @@
     "OptionBanner": "Banner",
     "NoSlideshowContentFound": "No slideshow images were found.",
     "OptionPhotoSlideshow": "Photo slideshow",
-    "OptionBackdropSlideshow": "Backdrop slideshow"
-
+    "OptionBackdropSlideshow": "Backdrop slideshow",
+    "HeaderTopPlugins": "Top Plugins"
 }