nitdoc: migrate github commentbox to jQuery.UI widget
authorAlexandre Terrasa <alexandre@moz-code.org>
Fri, 14 Feb 2014 05:19:20 +0000 (00:19 -0500)
committerAlexandre Terrasa <alexandre@moz-code.org>
Thu, 20 Feb 2014 19:11:59 +0000 (14:11 -0500)
Signed-off-by: Alexandre Terrasa <alexandre@moz-code.org>

share/nitdoc/js/plugins/github/commentbox.js
share/nitdoc/js/plugins/github/ui.js

index 58707df..c5b8350 100644 (file)
    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
- * Nitdoc.GitHub.CommentBox class\r
+ * CommentBox allows user to edit comments then preview, commit or cancel the changes\r
  */\r
 define([\r
        "jquery",\r
-       "base64",\r
-       "Markdown.Converter",\r
-       "plugins/github/ui",\r
-       "plugins/github/commitbox",\r
-], function($, Base64, mkdown, UI, CommitBox) {\r
-\r
-       // Init new modal box instance\r
-       var CommentBox = function(infos) {\r
-               this.infos = infos;\r
-               this.commentBoxDiv;\r
-       };\r
-\r
-       CommentBox.prototype.open = function(baseArea) {\r
-               //TODO redo\r
-               //UI.addOpenedComments();\r
-               var instance = this;\r
-\r
-               if(this.infos.requestID) {\r
-                       // get comment from last pull request\r
-                       var requests = JSON.parse(localStorage.requests);\r
-                       this.infos.newComment = Base64.decode(requests[this.infos.requestID].comment);\r
-               } else {\r
-                       this.infos.newComment = false;\r
-               }\r
+       "jQueryUI"\r
+], function($) {\r
+       $.widget("nitdoc.commentbox", {\r
+\r
+               options: {\r
+                       previewTxt: "preview",\r
+                       commitTxt: "Commit...",\r
+                       cancelTxt: "Cancel"\r
+               },\r
+\r
+               _create: function() {\r
+                       this.commentBox = $("<div/>")\r
+                       .addClass("nitdoc-github-commentbox")\r
+                       .append(\r
+                               $("<textarea/>")\r
+                               .addClass("nitdoc-github-commentarea")\r
+                               .keyup($.proxy(this._doKeyUp, this))\r
+                               .keydown($.proxy(this._doKeyDown, this))\r
+                       )\r
+                       .append(\r
+                               $("<a/>")\r
+                               .addClass("nitdoc-github-preview")\r
+                               .html(this.options.previewTxt)\r
+                               .click($.proxy(this._doPreviewClick, this))\r
+                       )\r
+                       .append(\r
+                               $("<button/>")\r
+                               .addClass("nitdoc-github-button")\r
+                               .addClass("nitdoc-github-commit")\r
+                               .html(this.options.commitTxt)\r
+                               .click($.proxy(this._doCommitClick, this))\r
+                       )\r
+                       .append(\r
+                               $("<button/>")\r
+                               .addClass("nitdoc-github-button")\r
+                               .addClass("nitdoc-github-cancel")\r
+                               .html(this.options.cancelTxt)\r
+                               .click($.proxy(this._doCancelClick, this))\r
+                       );\r
+\r
+                       this.element.after(this.commentBox);\r
+               },\r
+\r
+               /* public actions */\r
+\r
+               open: function(value) {\r
+                       this._originalValue = value;\r
+                       this._setValue(value);\r
+                       this._autosize();\r
+                       this.commentBox.show();\r
+                       var cbw = this.commentBox.innerWidth();\r
+                       var taw = this._getArea().outerWidth();\r
+                       this._getArea().width(cbw - (taw - cbw));\r
+                       this.commentBox.find("textarea").trigger("keyup");\r
+                       this.commentBox.find("textarea").focus();\r
+                       this._trigger("_open", null, {commentBox: this});\r
+               },\r
+\r
+               close: function() {\r
+                       this.commentBox.hide();\r
+                       this._trigger("_close", null, {commentBox: this});\r
+               },\r
+\r
+               /* internals */\r
+\r
+               _autosize: function() {\r
+                       this._getArea().height(this._getArea().val().split(/\r|\n/).length * 16);\r
+               },\r
 \r
-               // create comment box\r
-               var tarea = $(document.createElement("textarea"))\r
-               .append(this.infos.newComment === false? this.infos.oldComment: this.infos.newComment)\r
-               .keyup(function(event) {\r
-                       $(event.target).css("height", (event.target.value.split(/\r|\n/).length * 16) + "px");\r
-                       if ( (!instance.infos.requestID && $(event.target).val() != instance.infos.oldComment) || (instance.infos.requestID && $(event.target).val() != instance.infos.oldComment && $(event.target).val() != instance.infos.newComment) ) {\r
-                               $(event.target).parent().find("button.nitdoc-github-commit").removeAttr("disabled");\r
+               _getArea: function() {\r
+                       return this.commentBox.find("textarea.nitdoc-github-commentarea");\r
+               },\r
+\r
+               _setValue: function(value) {\r
+                       this._getArea().val(value);\r
+               },\r
+\r
+               _getValue: function() {\r
+                       return this._getArea().val();\r
+               },\r
+\r
+               /* events */\r
+\r
+               _doKeyUp: function() {\r
+                       if(this._getValue() == this._originalValue) {\r
+                               this.commentBox.find("button.nitdoc-github-commit").attr("disabled", "disabled");\r
                        } else {\r
-                               $(event.target).parent().find("button.nitdoc-github-commit").attr("disabled", "disabled");\r
+                               this.commentBox.find("button.nitdoc-github-commit").removeAttr("disabled");\r
                        }\r
-               })\r
-               .keydown(function(event) {\r
+                       this._autosize();\r
+               },\r
+\r
+               _doKeyDown: function(event) {\r
                        if(event.keyCode == 13){\r
-                               $(event.target).css("height", ($(event.target).outerHeight() + 6) + "px");\r
+                               this._getArea().css("height", (this._getArea().outerHeight() + 6) + "px");\r
                        }\r
-               });\r
-\r
-               this.commentBoxDiv = $(document.createElement("div"))\r
-               .addClass("nitdoc-github-commentbox")\r
-               .append(tarea)\r
-               .append(\r
-                       $(document.createElement("a"))\r
-                       .addClass("nitdoc-github-preview")\r
-                       .click(function() {\r
-                               var converter = new Markdown.Converter()\r
-                               var html = converter.makeHtml(tarea.val());\r
-                               ModalBox.open("Preview", html, false);\r
-                       })\r
-               )\r
-               .append(\r
-                       $(document.createElement("button"))\r
-                       .addClass("nitdoc-github-button")\r
-                       .addClass("nitdoc-github-commit")\r
-                       .append("Commit")\r
-                       .click(function() {\r
-                               instance.infos.newComment = tarea.val();\r
-                               instance.infos.commentBox = instance;\r
-                               CommitBox.open(instance.infos);\r
-                       })\r
-               )\r
-               .append(\r
-                       $(document.createElement("button"))\r
-                       .addClass("nitdoc-github-button")\r
-                       .addClass("nitdoc-github-cancel")\r
-                       .append("Cancel")\r
-                       .click(function() {instance.close()})\r
-               );\r
-\r
-               baseArea.after(this.commentBoxDiv);\r
-               var cbWidth = this.commentBoxDiv.innerWidth();\r
-               var taWidth = tarea.outerWidth();\r
-               tarea.width(cbWidth - (taWidth - cbWidth));\r
-               tarea.trigger("keyup");\r
-               tarea.focus();\r
-       };\r
-\r
-       CommentBox.prototype.close = function() {\r
-               //TODO redo\r
-               //UI.remOpenedComments();\r
-               if(this.infos.isNew) {\r
-                       this.commentBoxDiv.next().find("span.nitdoc-github-editComment").show();\r
-               } else if(this.infos.requestID) {\r
-                       this.commentBoxDiv.next().show();\r
-                       this.commentBoxDiv.next().next().show();\r
-               } else {\r
-                       this.commentBoxDiv.next().show();\r
-                       this.commentBoxDiv.next().next().find("span.nitdoc-github-editComment").show();\r
-               }\r
-               this.commentBoxDiv.remove();\r
-       };\r
+               },\r
+\r
+               _doPreviewClick: function(event) {\r
+                       this._trigger("_preview", event, {value: this._getValue()});\r
+               },\r
 \r
-       return CommentBox;\r
+               _doCommitClick: function() {\r
+                       this._trigger("_commit", {value: this._getValue()});\r
+               },\r
+\r
+               _doCancelClick: function() {\r
+                       this.close();\r
+               }\r
+       });\r
 });\r
index e669b9b..edb8035 100644 (file)
  */\r
 define([\r
        "jquery",\r
+       "jQueryUI",\r
        "plugins/github/user",\r
        "plugins/github/github_api",\r
        "plugins/github/utils",\r
        "plugins/github/commentbox",\r
-       "base64",\r
-], function($, User, GithubAPI, Utils, CommentBox, Base64) {\r
+       "plugins/github/modalbox",\r
+       "base64"\r
+], function($, UI, User, GithubAPI, Utils, CommentBox, ModalBox, Base64) {\r
        var UI = {\r
                openedComments: 0,      // currently edited comments count\r
                user: false,            // logged user\r
@@ -57,7 +59,7 @@ define([
 \r
                // clear storage\r
                disactivate: function() {\r
-                       if(UI.getOpenedComments() > 0){\r
+                       if(this.openedComments > 0){\r
                                if(!confirm('There is uncommited modified comments. Are you sure you want to leave this page?')) {\r
                                        return false;\r
                                }\r
@@ -124,8 +126,37 @@ define([
                                        infos.location = Utils.parseLocation(baseTextarea.attr("data-comment-location"));\r
                                        infos.namespace = baseTextarea.attr("data-comment-namespace");\r
                                        infos.oldComment = baseTextarea.val();\r
-                                       var box = new CommentBox(infos);\r
-                                       box.open(baseTextarea);\r
+\r
+                                       if(infos.requestID) {\r
+                                               // get comment from last pull request\r
+                                               var requests = JSON.parse(localStorage.requests);\r
+                                               infos.newComment = Base64.decode(requests[infos.requestID].comment);\r
+                                       } else {\r
+                                               infos.newComment = false;\r
+                                       }\r
+\r
+                                       baseTextarea.commentbox();\r
+                                       baseTextarea.bind("commentbox_preview", function(event, data) {\r
+                                               var converter = new Markdown.Converter()\r
+                                               var html = converter.makeHtml(data.value);\r
+                                               ModalBox.open("Preview", html, false);\r
+                                       });\r
+                                       baseTextarea.bind("commentbox_open", function() {\r
+                                               UI.openedComments++;\r
+                                       });\r
+                                       baseTextarea.bind("commentbox_close", function(event, data) {\r
+                                               UI.openedComments--;\r
+                                               if(infos.isNew) {\r
+                                                       data.commentBox.commentBox.next().find("span.nitdoc-github-editComment").show();\r
+                                               } else if(infos.requestID) {\r
+                                                       data.commentBox.commentBox.next().show();\r
+                                                       data.commentBox.commentBox.next().next().show();\r
+                                               } else {\r
+                                                       data.commentBox.commentBox.next().show();\r
+                                                       data.commentBox.commentBox.next().next().find("span.nitdoc-github-editComment").show();\r
+                                               }\r
+                                       });\r
+                                       baseTextarea.commentbox("open", baseTextarea.val());\r
                                });\r
                        });\r
                },\r