nitdoc: migrate github loginbox to jQuery.UI widget

Signed-off-by: Alexandre Terrasa <alexandre@moz-code.org>

diff --git a/share/nitdoc/js/plugins/github.js b/share/nitdoc/js/plugins/github.js
index c1fe5d6..a258593 100644 (file)
--- a/share/nitdoc/js/plugins/github.js
+++ b/share/nitdoc/js/plugins/github.js
@@ -26,12 +26,40 @@ define([
        "base64",\r
        "plugins/github/ui",\r
        "plugins/github/loginbox",\r
-], function($, Base64, UI, LoginBox) {\r
+       "plugins/github/modalbox",\r
+], function($, Base64, UI, LoginBox, ModalBox) {\r
        // Load GitHub UI\r
        var upstream = $("body").attr("data-github-upstream");\r
        var basesha1 = $("body").attr("data-github-base-sha1");\r
        if(upstream && basesha1) {\r
-               console.log("init GitHub module (upstream: "+ upstream +", base: " + basesha1 + ")");\r
+               console.info("Github plugin: init GitHub module (upstream: "+ upstream +", base: " + basesha1 + ")");\r
+\r
+               $("nav.main ul").append(\r
+                       $("<li/>").attr("id", "nitdoc-github-li")\r
+               );\r
+               $("#nitdoc-github-li")\r
+               .loginbox()\r
+               .bind( "loginbox_logoff", function() {\r
+                       UI.disactivate();\r
+                       $("#nitdoc-github-li").loginbox("toggle");\r
+               })\r
+               .bind( "loginbox_login", function(event, infos) {\r
+                       if(!infos.login || !infos.password || !infos.repo || !infos.branch) {\r
+                               ModalBox.open("Sign in error", "Please enter your GitHub username, password, repository and branch.", true);\r
+                       } else {\r
+                               var user = UI.tryLogin(infos.login, infos.password, infos.repo, infos.branch);\r
+                               if(user == "error:login") {\r
+                                       ModalBox.open("Sign in error", "The username, password, repo or branch you entered is incorrect.", true);\r
+                               } else if(user == "error:sha") {\r
+                                       ModalBox.open("Base commit not found", "The provided GitHub repository must contains the base commit '" + UI.origin.sha + "'", true);\r
+                               } else if(user == "error:profile") {\r
+                                       ModalBox.open("Incomplete GitHub profile", "Please set your public name and email in your <a href='https://github.com/settings/profile'>GitHub profile</a>.<br/><br/>Your public profile informations are used to sign-off your commits.", true);\r
+                               } else {\r
+                                       UI.activate(user);\r
+                                       $("#nitdoc-github-li").loginbox("displayLogout", UI.origin, UI.user);\r
+                               }\r
+                       }\r
+               });\r
 \r
                // parse origin\r
                var parts = upstream.split(":");\r
@@ -48,20 +76,18 @@ define([
                        var session = JSON.parse(localStorage.user);\r
                        UI.user = UI.tryLogin(session.login, Base64.decode(session.password), session.repo, session.branch);\r
                        if(!UI.user.login) {\r
-                               console.log("Session found but authentification failed");\r
+                               console.debug("Github plugin: Session found but authentification failed");\r
                                localStorage.clear();\r
                        }\r
 \r
                        // activate ui\r
-                       LoginBox.init("nav.main ul");\r
                        if(UI.user && UI.user.login) {\r
-                               LoginBox.displayLogout(UI.origin, UI.user);\r
+                               $("#nitdoc-github-li").loginbox("displayLogout", UI.origin, UI.user);\r
                                UI.activate(UI.user);\r
-                       } else {\r
-                               LoginBox.displayLogin();\r
                        }\r
                } else {\r
-                       console.log("No session found");\r
+                       console.debug("Github plugin: No session found");\r
+                       $("#nitdoc-github-li").loginbox("displayLogin");\r
                }\r
        }\r
 });\r

diff --git a/share/nitdoc/js/plugins/github/loginbox.js b/share/nitdoc/js/plugins/github/loginbox.js
index 9a3c42b..119b5e8 100644 (file)
--- a/share/nitdoc/js/plugins/github/loginbox.js
+++ b/share/nitdoc/js/plugins/github/loginbox.js
@@ -11,35 +11,49 @@
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
    See the License for the specific language governing permissions and\r
    limitations under the License.\r
-\r
-   Documentation generator for the nit language.\r
-   Generate API documentation in HTML format from nit source code.\r
 */\r
 \r
+/*\r
+ * LoginBox allows user to login and logoff from GitHub API\r
+ */\r
 define([\r
        "jquery",\r
-       "plugins/github/ui",\r
-       "plugins/github/modalbox",\r
-], function($, UI, ModalBox) {\r
-       var LoginBox = {\r
-               init: function(containerSelector) {\r
-                       this.loginBoxLi = $(document.createElement("li"))\r
-                       .attr("id", "nitdoc-github-li")\r
-                       .append(\r
-                               $(document.createElement("a"))\r
+       "jQueryUI"\r
+], function($) {\r
+       $.widget("nitdoc.loginbox", {\r
+               options: {\r
+                       icon: "resources/icons/github-icon.png",\r
+                       iconActive: "resources/icons/github-icon-green.png",\r
+                       iconAlt: "GitHub",\r
+                       signedinTxt: "Signed in Github",\r
+                       signedoutTxt: "Sign in Github",\r
+                       welcomeTxt: "Hello",\r
+                       upstreamTxt: "Upstream branch",\r
+                       baseTxt: "Base",\r
+                       signoffTxt: "Sign Off",\r
+                       usernameTxt: "Username",\r
+                       passwordTxt: "Password",\r
+                       repoTxt: "Repository",\r
+                       branchTxt: "Branch",\r
+                       signinTxt: "Sign In"\r
+               },\r
+\r
+               _create: function() {\r
+                       this.element.append(\r
+                               $("<a/>")\r
                                .append(\r
-                                       $(document.createElement("img"))\r
+                                       $("<img/>")\r
                                        .attr({\r
-                                               src: "resources/icons/github-icon.png",\r
-                                               alt: "GitHub"\r
+                                               src: this.options.icon,\r
+                                               alt: this.options.iconAlt\r
                                        })\r
                                        .addClass("nitdoc-github-li-img")\r
                                )\r
-                               .click(function() { LoginBox.toggle() })\r
-                       )\r
+                               .click($.proxy(this.toggle, this))\r
+                       );\r
 \r
-                       this.loginBoxContent = $(document.createElement("div"));\r
-                       this.loginBox = $(document.createElement("div"))\r
+                       this.content = $("<div/>");\r
+                       this.loginBox = $("<div/>")\r
                        .attr("id", "nitdoc-github-loginbox")\r
                        .css("display", "none")\r
                        .append(\r
@@ -47,169 +61,174 @@ define([
                                .addClass("nitdoc-github-loginbox-arrow")\r
                                .append("&nbsp;")\r
                        )\r
-                       .append(\r
-                               $(document.createElement("h3"))\r
-                               .append("Github Sign In")\r
-                       )\r
-                       .append(this.loginBoxContent);\r
-\r
-                       this.loginBoxLi.append(this.loginBox);\r
-                       $(containerSelector).append(this.loginBoxLi);\r
+                       .append(this.content);\r
+                       this.element.append(this.loginBox);\r
                },\r
 \r
-               // Panel of login box to display when the user is logged in\r
+               /* public actions */\r
+\r
                displayLogout: function(origin, user) {\r
-                       var panel = $(document.createElement("div"))\r
-                       .append(\r
-                               $(document.createElement("h4"))\r
-                               .append("Hello ")\r
-                               .append(\r
-                                       $(document.createElement("a"))\r
-                                       .attr("href", "https://github.com/" + user.login)\r
-                                       .append(user.login)\r
-                               ).append("!")\r
+                       this.content.empty();\r
+                       this.content.append(\r
+                               $("<h3/>").text(this.options.signedinTxt)\r
                        )\r
-                       .append(\r
-                               $(document.createElement("label"))\r
-                               .attr("for", "github-origin")\r
-                               .append("Origin")\r
-                       )\r
-                       .append(\r
-                               $(document.createElement("input"))\r
-                               .attr({\r
-                                       id: "github-origin",\r
-                                       type: "text",\r
-                                       disabled: "disabled",\r
-                                       value: origin.user + ":" + origin.repo + ":" + origin.branch\r
-                               })\r
-                       )\r
-                       .append(\r
-                               $(document.createElement("label"))\r
-                               .attr("for", "github-base")\r
-                               .append("Base")\r
-                       )\r
-                       .append(\r
-                               $(document.createElement("input"))\r
-                               .attr({\r
-                                       id: "github-base",\r
-                                       type: "text",\r
-                                       disabled: "disabled",\r
-                                       value: user.login + ":" + user.repo + ":" + user.branch\r
-                               })\r
-                       )\r
-                       .append(\r
-                               $(document.createElement("button"))\r
-                               .addClass("nitdoc-github-button")\r
-                               .addClass("nitdoc-github-cancel")\r
-                               .append(\r
-                                       $(document.createElement("img"))\r
-                                       .attr("src", "resources/icons/github-icon.png")\r
-                               ).append("Sign Off")\r
-                               .click(function() { // log out user\r
-                                       UI.disactivate();\r
-                                       LoginBox.toggle();\r
-                               })\r
+                       this.content.append(\r
+                               $("<div/>")\r
+                               .append(\r
+                                       $("<h4/>")\r
+                                       .append(this.options.welcomeTxt + " ")\r
+                                       .append(\r
+                                               $("<a/>")\r
+                                               .attr("href", "https://github.com/" + user.login)\r
+                                               .append(user.login)\r
+                                       ).append(",")\r
+                               )\r
+                               .append(\r
+                                       $("<label/>")\r
+                                       .text("Upstream Branch")\r
+                               )\r
+                               .append(\r
+                                       $("<a/>")\r
+                                       .text(origin.user + ":" + origin.repo + ":" + origin.branch)\r
+                                       .addClass("nitdoc-github-loginbox-githublink")\r
+                                       .attr({\r
+                                               title: "Open branch in GitHub",\r
+                                               href: "https://github.com/" + origin.user + "/" + origin.repo + "/tree/" + origin.branch\r
+                                       })\r
+                               )\r
+                               .append(\r
+                                       $("<label/>")\r
+                                       .attr("for", "github-base")\r
+                                       .append("Your branch")\r
+                               )\r
+                               .append(\r
+                                       $("<a/>")\r
+                                       .text(user.login + ":" + user.repo + ":" + user.branch)\r
+                                       .addClass("nitdoc-github-loginbox-githublink")\r
+                                       .attr({\r
+                                               title: "Open branch in GitHub",\r
+                                               href: "https://github.com/" + user.login + "/" + user.repo + "/tree/" + user.branch\r
+                                       })\r
+                               )\r
+                               .append(\r
+                                       $("<button/>")\r
+                                       .addClass("nitdoc-github-button")\r
+                                       .addClass("nitdoc-github-cancel")\r
+                                       .append(\r
+                                               $("<img/>")\r
+                                               .attr("src", this.options.icon)\r
+                                       ).text(this.options.signoffTxt)\r
+                                       .click($.proxy(this._doClickLogoff, this))\r
+                               )\r
                        );\r
-                       $(".nitdoc-github-li-img").attr("src", "resources/icons/github-icon-green.png");\r
-                       this.loginBoxContent.empty()\r
-                       this.loginBoxContent.append(panel);\r
+                       $(".nitdoc-github-li-img").attr("src", this.options.iconActive);\r
                },\r
 \r
-               // Panel of login box to display when the user is logged out\r
                displayLogin: function() {\r
-                       var panel = $(document.createElement("form"))\r
-                       .append(\r
-                               $(document.createElement("label"))\r
-                               .attr("for", "nitdoc-github-login-field")\r
-                               .append("Username")\r
-                       )\r
-                       .append(\r
-                               $(document.createElement("input"))\r
-                               .attr({\r
-                                       id: "nitdoc-github-login-field",\r
-                                       type: "text"\r
-                               })\r
-                       )\r
-                       .append(\r
-                               $(document.createElement("label"))\r
-                               .attr("for", "nitdoc-github-password-field")\r
-                               .append("Password")\r
-                       )\r
-                       .append(\r
-                               $(document.createElement("input"))\r
-                               .attr({\r
-                                       id: "nitdoc-github-password-field",\r
-                                       type: "password"\r
-                               })\r
-                       )\r
-                       .append(\r
-                               $(document.createElement("label"))\r
-                               .attr("for", "nitdoc-github-repo-field")\r
-                               .append("Repository")\r
+                       this.content.empty();\r
+                       this.content.append(\r
+                               $("<h3/>").text(this.options.signedoutTxt)\r
                        )\r
-                       .append(\r
-                               $(document.createElement("input"))\r
-                               .attr({\r
-                                       id: "nitdoc-github-repo-field",\r
-                                       type: "text"\r
-                               })\r
-                       )\r
-                       .append(\r
-                               $(document.createElement("label"))\r
-                               .attr("for", "nitdoc-github-branch-field")\r
-                               .append("Branch")\r
-                       )\r
-                       .append(\r
-                               $(document.createElement("input"))\r
-                               .attr({\r
-                                       id: "nitdoc-github-branch-field",\r
-                                       type: "text"\r
-                               })\r
-                       )\r
-                       .append(\r
-                               $(document.createElement("button"))\r
-                               .addClass("nitdoc-github-button")\r
-                               .append(\r
-                                       $(document.createElement("img"))\r
-                                       .attr("src", "resources/icons/github-icon.png")\r
-                               ).append("Sign In")\r
-                               .click(function() {\r
-                                       var login = $('#nitdoc-github-login-field').val();\r
-                                       var password = $('#nitdoc-github-password-field').val();\r
-                                       var repo = $('#nitdoc-github-repo-field').val();\r
-                                       var branch = $('#nitdoc-github-branch-field').val();\r
-                                       if(!login || !password || !repo || !branch) {\r
-                                               ModalBox.open("Sign in error", "Please enter your GitHub username, password, repository and branch.", true);\r
-                                       } else {\r
-                                               var user = UI.tryLogin(login, password, repo, branch);\r
-                                               if(user == "error:login") {\r
-                                                       ModalBox.open("Sign in error", "The username, password, repo or branch you entered is incorrect.", true);\r
-                                               } else if(user == "error:sha") {\r
-                                                       ModalBox.open("Base commit not found", "The provided GitHub repository must contains the base commit '" + UI.origin.sha + "'", true);\r
-                                               } else if(user == "error:profile") {\r
-                                                       ModalBox.open("Incomplete GitHub profile", "Please set your public name and email in your <a href='https://github.com/settings/profile'>GitHub profile</a>.<br/><br/>Your public profile informations are used to sign-off your commits.", true);\r
-                                               } else {\r
-                                                       UI.activate(user);\r
-                                                       LoginBox.displayLogout(UI.origin, user);\r
-                                               }\r
-                                       }\r
-                                       return false;\r
-                               })\r
-                       )\r
-                       $(".nitdoc-github-li-img").attr("src", "resources/icons/github-icon.png");\r
-                       this.loginBoxContent.empty()\r
-                       this.loginBoxContent.append(panel);\r
+                       this.content.append(\r
+                               $("<form/>")\r
+                               .keyup($.proxy(this._doFormChange, this))\r
+                               .append(\r
+                                       $("<label/>")\r
+                                       .attr("for", "nitdoc-github-login-field")\r
+                                       .append(this.options.usernameTxt)\r
+                               )\r
+                               .append(\r
+                                       $("<input/>")\r
+                                       .attr({\r
+                                               id: "nitdoc-github-login-field",\r
+                                               type: "text"\r
+                                       })\r
+                               )\r
+                               .append(\r
+                                       $("<label/>")\r
+                                       .attr("for", "nitdoc-github-password-field")\r
+                                       .append(this.options.passwordTxt)\r
+                               )\r
+                               .append(\r
+                                       $("<input/>")\r
+                                       .attr({\r
+                                               id: "nitdoc-github-password-field",\r
+                                               type: "password"\r
+                                       })\r
+                               )\r
+                               .append(\r
+                                       $("<label/>")\r
+                                       .attr("for", "nitdoc-github-repo-field")\r
+                                       .append(this.options.repoTxt)\r
+                               )\r
+                               .append(\r
+                                       $("<input/>")\r
+                                       .attr({\r
+                                               id: "nitdoc-github-repo-field",\r
+                                               type: "text"\r
+                                       })\r
+                               )\r
+                               .append(\r
+                                       $("<label/>")\r
+                                       .attr("for", "nitdoc-github-branch-field")\r
+                                       .append(this.options.branchTxt)\r
+                               )\r
+                               .append(\r
+                                       $("<input/>")\r
+                                       .attr({\r
+                                               id: "nitdoc-github-branch-field",\r
+                                               type: "text"\r
+                                       })\r
+                               )\r
+                               .append(\r
+                                       $("<button/>")\r
+                                       .addClass("nitdoc-github-button")\r
+                                       .attr("disabled", "disabled")\r
+                                       .append(\r
+                                               $("<img/>")\r
+                                               .attr("src", this.options.icon)\r
+                                       ).text(this.options.signinTxt)\r
+                                       .click($.proxy(this._doClickLogin, this))\r
+                               )\r
+                       );\r
+                       $(".nitdoc-github-li-img").attr("src", this.options.icon);\r
                },\r
 \r
                toggle: function() {\r
                        if(this.loginBox.is(':hidden')) {\r
                                this.loginBox.show();\r
-                               if (!$('#loginGit').is(':hidden')) { $('#loginGit').focus(); }\r
+                               if ($('#nitdoc-github-login-field').is(':visible')) { $('#nitdoc-github-login-field').focus(); }\r
                        } else {\r
                                this.loginBox.hide();\r
                        }\r
-               }\r
-       };\r
+               },\r
+\r
+               /* events */\r
+\r
+               _doClickLogoff: function(event) {\r
+                       this._trigger("_logoff", event);\r
+               },\r
 \r
-       return LoginBox;\r
+               _doClickLogin: function(event) {\r
+                       this._trigger("_login", event, {\r
+                               login: $('#nitdoc-github-login-field').val(),\r
+                               password: $('#nitdoc-github-password-field').val(),\r
+                               repo: $('#nitdoc-github-repo-field').val(),\r
+                               branch: $('#nitdoc-github-branch-field').val()\r
+                       });\r
+                       return false;\r
+               },\r
+\r
+               _doFormChange: function(event) {\r
+                       login = $('#nitdoc-github-login-field').val();\r
+                       password = $('#nitdoc-github-password-field').val();\r
+                       repo = $('#nitdoc-github-repo-field').val();\r
+                       branch = $('#nitdoc-github-branch-field').val();\r
+                       if(login && password && repo && branch) {\r
+                               this.loginBox.find("form .nitdoc-github-button").removeAttr("disabled");\r
+                       } else {\r
+                               this.loginBox.find("form .nitdoc-github-button").attr("disabled", "disabled");\r
+                       }\r
+               }\r
+       });\r
 });\r

diff --git a/share/nitdoc/styles/Nitdoc.GitHub.css b/share/nitdoc/styles/Nitdoc.GitHub.css
index 3c7179b..23cb336 100644 (file)
--- a/share/nitdoc/styles/Nitdoc.GitHub.css
+++ b/share/nitdoc/styles/Nitdoc.GitHub.css
@@ -21,9 +21,9 @@
  */\r
 \r
 #nitdoc-github-li {\r
-       float: right;\r
+       float: left;\r
        padding: 0;\r
-       margin: -2px 15px 5px 5px;\r
+       margin: -2px 5px 5px 15px;\r
 }\r
 \r
 #nitdoc-github-li.current {\r
@@ -40,7 +40,7 @@
        position: absolute;\r
        width : 220px;\r
        margin-top: 2px;\r
-       margin-left: -208px;\r
+       margin-left: -10px;\r
        display: block;\r
        padding: 10px;\r
        text-align: left;\r
@@ -68,8 +68,7 @@
        border-style: solid;\r
        border-width: 7px;\r
        top: -7px;\r
-       left: 50%;\r
-       margin-left: 90px;\r
+       margin-left: 2px;\r
        border-bottom-color: #999;\r
        border-bottom-color: rgba(0, 0, 0, 0.25);\r
        border-top-width: 0;\r
@@ -120,6 +119,13 @@
        margin-bottom: 20px;\r
 }\r
 \r
+\r
+#nitdoc-github-loginbox a.nitdoc-github-loginbox-githublink {\r
+       display: block;\r
+       margin: 10px;\r
+       color: #0D8921;\r
+}\r
+\r
 /* \r
  * Nitdoc Github buttons\r
  */\r