Show all contributors in the AboutDialog

src/brackets.config.json

@@ -14,7 +14,7 @@
         "twitter_url"                : "https://twitter.com/brackets",
         "troubleshoot_url"           : "https://github.com/adobe/brackets/wiki/Troubleshooting#wiki-livedev",
         "twitter_name"               : "@brackets",
-        "contributors_url"           : "https://api.github.com/repos/adobe/brackets/contributors?per_page=300",
+        "contributors_url"           : "https://api.github.com/repos/adobe/brackets/contributors?per_page={0}&page={1}",
         "extension_listing_url"      : "",
         "extension_registry"         : "https://s3.amazonaws.com/extend.brackets/registry.json",
         "extension_url"              : "https://s3.amazonaws.com/extend.brackets/{0}/{0}-{1}.zip",

src/config.json

@@ -13,7 +13,7 @@
         "twitter_url": "https://twitter.com/brackets",
         "troubleshoot_url": "https://github.com/adobe/brackets/wiki/Troubleshooting#wiki-livedev",
         "twitter_name": "@brackets",
-        "contributors_url": "https://api.github.com/repos/adobe/brackets/contributors?per_page=300",
+        "contributors_url": "https://api.github.com/repos/adobe/brackets/contributors?per_page={0}&page={1}",
         "extension_listing_url": "",
         "extension_registry": "https://s3.amazonaws.com/extend.brackets/registry.json",
         "extension_url": "https://s3.amazonaws.com/extend.brackets/{0}/{0}-{1}.zip",

src/help/HelpCommandHandlers.js

@@ -29,19 +29,22 @@ define(function (require, exports, module) {
     "use strict";
 
     var AppInit                 = require("utils/AppInit"),
-        Global                  = require("utils/Global"),
         BuildInfoUtils          = require("utils/BuildInfoUtils"),
-        Commands                = require("command/Commands"),
         CommandManager          = require("command/CommandManager"),
+        Commands                = require("command/Commands"),
         Dialogs                 = require("widgets/Dialogs"),
-        Strings                 = require("strings"),
-        UpdateNotification      = require("utils/UpdateNotification"),
         FileUtils               = require("file/FileUtils"),
+        Global                  = require("utils/Global"),
         NativeApp               = require("utils/NativeApp"),
+        Strings                 = require("strings"),
         StringUtils             = require("utils/StringUtils"),
+        UpdateNotification      = require("utils/UpdateNotification"),
         AboutDialogTemplate     = require("text!htmlContent/about-dialog.html"),
         ContributorsTemplate    = require("text!htmlContent/contributors-list.html");
 
+    /** @const This is the thirdparty API's (GitHub) maximum contributors per page limit */
+    var CONTRIBUTORS_PER_PAGE   = 100;
+
     var buildInfo;
 
 
@@ -76,39 +79,78 @@ define(function (require, exports, module) {
         Dialogs.showModalDialogUsingTemplate(Mustache.render(AboutDialogTemplate, templateVars));
 
         // Get containers
-        var $dlg = $(".about-dialog.instance"),
-            $contributors = $dlg.find(".about-contributors"),
-            $spinner = $dlg.find(".spinner");
+        var $dlg            = $(".about-dialog.instance"),
+            $contributors   = $dlg.find(".about-contributors"),
+            $spinner        = $dlg.find(".spinner"),
+            contributorsUrl = brackets.config.contributors_url,
+            page;
+
+        if (contributorsUrl.indexOf("{1}") !== -1) { // pagination enabled
+            page = 1;
+        }
 
         $spinner.addClass("spin");
 
-        // Get all the project contributors and add them to the dialog
-        $.getJSON(brackets.config.contributors_url).done(function (contributorsInfo) {
-
-            // Populate the contributors data
-            var totalContributors = contributorsInfo.length;
-            var contributorsCount = 0;
-
-            $contributors.html(Mustache.render(ContributorsTemplate, contributorsInfo));
-
-            // This is used to create an opacity transition when each image is loaded
-            $contributors.find("img").one("load", function () {
-                $(this).css("opacity", 1);
-
-                // Count the contributors loaded and hide the spinner once all are loaded
-                contributorsCount++;
-                if (contributorsCount >= totalContributors) {
-                    $spinner.removeClass("spin");
-                }
-            }).each(function () {
-                if (this.complete) {
-                    $(this).trigger("load");
-                }
+        function loadContributors(rawUrl, page, contributors, deferred) {
+            deferred = deferred || new $.Deferred();
+            contributors = contributors || [];
+            var url = StringUtils.format(rawUrl, CONTRIBUTORS_PER_PAGE, page);
+
+            $.ajax({
+                url: url,
+                dataType: "json",
+                cache: false
+            })
+                .done(function (response) {
+                    contributors = contributors.concat(response || []);
+                    if (page && response.length === CONTRIBUTORS_PER_PAGE) {
+                        loadContributors(rawUrl, page + 1, contributors, deferred);
+                    } else {
+                        deferred.resolve(contributors);
+                    }
+                })
+                .fail(function () {
+                    if (contributors.length) { // we weren't able to fetch this page, but previous fetches were successful
+                        deferred.resolve(contributors);
+                    } else {
+                        deferred.reject();
+                    }
+                });
+            return deferred.promise();
+        }
+
+        loadContributors(contributorsUrl, page) // Load the contributors
+            .done(function (allContributors) {
+                // Populate the contributors data
+                var totalContributors = allContributors.length,
+                    contributorsCount = 0;
+
+                allContributors.forEach(function (contributor) {
+                    // remove any UrlParams delivered via the GitHub API
+                    contributor.avatar_url = contributor.avatar_url.split("?")[0];
+                });
+
+                $contributors.html(Mustache.render(ContributorsTemplate, allContributors));
+
+                // This is used to create an opacity transition when each image is loaded
+                $contributors.find("img").one("load", function () {
+                    $(this).css("opacity", 1);
+
+                    // Count the contributors loaded and hide the spinner once all are loaded
+                    contributorsCount++;
+                    if (contributorsCount >= totalContributors) {
+                        $spinner.removeClass("spin");
+                    }
+                }).each(function () {
+                    if (this.complete) {
+                        $(this).trigger("load");
+                    }
+                });
+            })
+            .fail(function () {
+                $spinner.removeClass("spin");
+                $contributors.html(Mustache.render("<p class='dialog-message'>{{ABOUT_TEXT_LINE6}}</p>", Strings));
             });
-        }).fail(function () {
-            $spinner.removeClass("spin");
-            $contributors.html(Mustache.render("<p class='dialog-message'>{{ABOUT_TEXT_LINE6}}</p>", Strings));
-        });
     }
 
     // Read "build number" SHAs off disk immediately at APP_READY, instead

src/htmlContent/contributors-list.html

@@ -1 +1 @@
-{{#.}}<a href="{{html_url}}" title="{{login}} - {{html_url}}"><img src="{{avatar_url}}" alt="{{login}}" width="30" height="30" /></a>{{/.}}
+{{#.}}<a href="{{html_url}}" title="{{login}} - {{html_url}}"><img src="{{avatar_url}}?size=30" alt="{{login}}" width="30" height="30" /></a>{{/.}}

src/styles/brackets_patterns_override.less

@@ -988,13 +988,10 @@ a[href^="http"] {
             a {
                 text-decoration: none;
             }
-        }
-        .about-contributors img {
-            opacity: 0;
-            -webkit-transition: opacity 1s;
-            -moz-transition: opacity 1s;
-            -o-transition: opacity 1s;
-            transition: opacity 1s;
+            img {
+                opacity: 0;
+                transition: opacity 1s;
+            }
         }
     }