nitdoc: migrate github modalbox to JQuery.UI widget
authorAlexandre Terrasa <alexandre@moz-code.org>
Tue, 18 Feb 2014 23:25:34 +0000 (18:25 -0500)
committerAlexandre Terrasa <alexandre@moz-code.org>
Tue, 25 Feb 2014 17:47:02 +0000 (12:47 -0500)
ModalBox plugin is now standalone and can be used without github plugin

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

Conflicts:
src/nitdoc.nit

share/nitdoc/js/plugins/github.js
share/nitdoc/js/plugins/github/modalbox.js [deleted file]
share/nitdoc/js/plugins/modalbox.js [new file with mode: 0644]
share/nitdoc/styles/Nitdoc.GitHub.css
share/nitdoc/styles/Nitdoc.ModalBox.css [new file with mode: 0644]
share/nitdoc/styles/main.css
src/nitdoc.nit

index 5b8ca2f..92405d9 100644 (file)
 define([\r
        "jquery",\r
        "github-api",\r
+       "plugins/modalbox",\r
        "plugins/github/loginbox",\r
-       "plugins/github/modalbox",\r
        "plugins/github/commentbox",\r
        "utils",\r
        "Markdown.Converter"\r
-], function($, GithubAPI, LoginBox, ModalBox, CommentBox) {\r
+], function($, GithubAPI) {\r
        var GithubUser = function(login, password, repo, branch) {\r
                this.login = login;\r
                this.password = password;\r
@@ -92,11 +92,13 @@ define([
 \r
                _checkLoginInfos: function(infos) {\r
                        if(!infos.login || !infos.password || !infos.repo || !infos.branch) {\r
-                               ModalBox.open(\r
-                                       "Sign in error",\r
-                                       "Please enter your GitHub username, password, repository and branch.",\r
-                                       true\r
-                               );\r
+                               $("<p/>")\r
+                               .text("Please enter your GitHub username, password, repository and branch.")\r
+                               .modalbox({\r
+                                       title: "Sign in error",\r
+                                       isError: true\r
+                               })\r
+                               .modalbox("open");\r
                                return false;\r
                        } else {\r
                                return true;\r
@@ -110,25 +112,31 @@ define([
                                        this.activate(this.user, this.origin);\r
                                } else {\r
                                        if(isok == "error:login") {\r
-                                               ModalBox.open(\r
-                                                       "Sign in error",\r
-                                                       "The username, password, repo or branch you entered is incorrect.",\r
-                                                       true\r
-                                               );\r
+                                               $("<p/>")\r
+                                               .text("The username, password, repo or branch you entered is incorrect.")\r
+                                               .modalbox({\r
+                                                       title: "Github sign in error",\r
+                                                       isError: true\r
+                                               })\r
+                                               .modalbox("open");\r
                                        } else if(isok == "error:sha") {\r
-                                               ModalBox.open(\r
-                                                       "Base commit not found",\r
-                                                       "The provided Github repository must contain the base commit '" + UI.origin.sha + "'",\r
-                                                       true\r
-                                               );\r
+                                               $("<p/>")\r
+                                               .text("The provided Github repository must contain the base commit '" + UI.origin.sha + "'.")\r
+                                               .modalbox({\r
+                                                       title: "Github base commit error",\r
+                                                       isError: true\r
+                                               })\r
+                                               .modalbox("open");\r
                                        } else if(isok == "error:profile") {\r
-                                               ModalBox.open(\r
-                                                       "Incomplete Github profile",\r
-                                                       "Please set your public name and email in your " +\r
+                                               $("<p/>")\r
+                                               .text("Please set your public name and email in your " +\r
                                                        "<a href='https://github.com/settings/profile'>GitHub profile</a>." +\r
-                                                       "<br/><br/>Your public profile informations are used to sign-off your commits.",\r
-                                                       true\r
-                                               );\r
+                                                       "<br/><br/>Your public profile informations are used to sign-off your commits.")\r
+                                               .modalbox({\r
+                                                       title: "Github profile error",\r
+                                                       isError: true\r
+                                               })\r
+                                               .modalbox("open");\r
                                        }\r
                                }\r
                        }\r
@@ -223,7 +231,12 @@ define([
                                .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
+                                       $("<p/>")\r
+                                       .html(html)\r
+                                       .modalbox({\r
+                                               title: "Preview comment"\r
+                                       })\r
+                                       .modalbox("open");\r
                                })\r
                                .bind("commentbox_open", function(event, data) {\r
                                        GithubUI.openedComments++;\r
@@ -318,7 +331,13 @@ define([
                        edit.newContent = this._mergeComment(edit.oldContent, edit.newComment, edit.location);\r
                        edit.request = this._pushChanges(edit)\r
                        if(!edit.request) {\r
-                               ModalBox.open("Unable to commit changes!", response, true);\r
+                               $("<p/>")\r
+                               .text("Unable to commit changes.<br/>" + response)\r
+                               .modalbox({\r
+                                       title: "Github commit error",\r
+                                       isError: true\r
+                               })\r
+                               .modalbox("open");\r
                                return;\r
                        }\r
                        this._saveRequest(edit);\r
@@ -349,31 +368,61 @@ define([
                _pushChanges: function(edit) {\r
                        var baseTree = GithubAPI.getTree(this.user, this.origin.sha);\r
                        if(!baseTree.sha) {\r
-                               ModalBox.open("Unable to locate base tree!", baseTree.status + ": " + baseTree.statusText, true);\r
+                               $("<p/>")\r
+                               .text("Unable to locate base tree.<br/>" + baseTree.status + ": " + baseTree.statusText)\r
+                               .modalbox({\r
+                                       title: "Github commit error",\r
+                                       isError: true\r
+                               })\r
+                               .modalbox("open");\r
                                return false;\r
                        }\r
                        console.log("Base tree: " + baseTree.url);\r
                        var newBlob = GithubAPI.createBlob(this.user, edit.newContent);\r
                        if(!newBlob.sha) {\r
-                               ModalBox.open("Unable to create new blob!", newBlob.status + ": " + newBlob.statusText, true);\r
+                               $("<p/>")\r
+                               .text("Unable to create new blob.<br/>" + newBlob.status + ": " + newBlob.statusText)\r
+                               .modalbox({\r
+                                       title: "Github commit error",\r
+                                       isError: true\r
+                               })\r
+                               .modalbox("open");\r
                                return false;\r
                        }\r
                        console.log("New blob: " + newBlob.url);\r
                        var newTree = GithubAPI.createTree(this.user, baseTree, edit.location.path, newBlob);\r
                        if(!newTree.sha) {\r
-                               ModalBox.open("Unable to create new tree!", newTree.status + ": " + newTree.statusText, true);\r
+                               $("<p/>")\r
+                               .text("Unable to create new tree.<br/>" + newTree.status + ": " + newTree.statusText)\r
+                               .modalbox({\r
+                                       title: "Github commit error",\r
+                                       isError: true\r
+                               })\r
+                               .modalbox("open");\r
                                return false;\r
                        }\r
                        console.log("New tree: " + newTree.url);\r
                        var newCommit = GithubAPI.createCommit(this.user, edit.message, baseTree.sha, newTree);\r
                        if(!newCommit.sha) {\r
-                               ModalBox.open("Unable to create new commit!", newCommit.status + ": " + newCommit.statusText, true);\r
+                               $("<p/>")\r
+                               .text("Unable to create new commit.<br/>" + newCommit.status + ": " + newCommit.statusText)\r
+                               .modalbox({\r
+                                       title: "Github commit error",\r
+                                       isError: true\r
+                               })\r
+                               .modalbox("open");\r
                                return false;\r
                        }\r
                        console.log("New commit: " + newCommit.url);\r
                        var pullRequest = GithubAPI.createPullRequest(this.user, edit.title, "Pull request from Nitdoc", this.origin, newCommit.sha);\r
                        if(!pullRequest.number) {\r
-                               ModalBox.open("Unable to create pull request!", pullRequest.status + ": " + pullRequest.statusText, true);\r
+                               $("<p/>")\r
+                               .text("Unable to create pull request.<br/>" + pullRequest.status + ": " + pullRequest.statusText)\r
+                               .modalbox({\r
+                                       title: "Github commit error",\r
+                                       isError: true\r
+                               })\r
+                               .modalbox("open");\r
                                return false;\r
                        }\r
                        console.log("New pull request: " + pullRequest.url);\r
@@ -384,13 +433,25 @@ define([
                _closePullRequest: function(number) {\r
                        var requests = JSON.parse(localStorage.requests);\r
                        if(!requests[number]) {\r
-                               ModalBox.open("Unable to close pull request!", "Pull request " + number + "not found", true);\r
+                               $("<p/>")\r
+                               .text("Unable to close pull request.<br/>" + "Pull request " + number + "not found")\r
+                               .modalbox({\r
+                                       title: "Github commit error",\r
+                                       isError: true\r
+                               })\r
+                               .modalbox("open");\r
                                return false;\r
                        }\r
                        // close pull request\r
                        var res = GithubAPI.updatePullRequest(this.user, "Closed from Nitdoc", "", "closed", requests[number].request);\r
                        if(!res.id) {\r
-                               ModalBox.open("Unable to close pull request!", res.status + ": " + res.statusText, true);\r
+                               $("<p/>")\r
+                               .text("Unable to close pull request.<br/>" + res.status + ": " + res.statusText)\r
+                               .modalbox({\r
+                                       title: "Github commit error",\r
+                                       isError: true\r
+                               })\r
+                               .modalbox("open");\r
                                return false;\r
                        }\r
                        // update in localstorage\r
@@ -413,7 +474,13 @@ define([
                _getFileContent: function(githubUrl) {\r
                        var origFile = GithubAPI.getFile(this.user, githubUrl);\r
                        if(!origFile.content) {\r
-                               ModalBox.open("Unable to locate source file!", origFile.status + ": " + origFile.statusText, true);\r
+                               $("<p/>")\r
+                               .text("Unable to locate source file.<br/>" + origFile.status + ": " + origFile.statusText)\r
+                               .modalbox({\r
+                                       title: "Github commit error",\r
+                                       isError: true\r
+                               })\r
+                               .modalbox("open");\r
                                return;\r
                        }\r
                        var base64Content = origFile.content.substring(0, origFile.content.length - 1)\r
@@ -458,7 +525,7 @@ define([
 \r
                _doUpdateRequest: function(event, baseArea, request) {\r
                        baseArea.commentbox("open", this.user, request.request.number);\r
-               }\r
+               },\r
        }\r
 \r
        // Get github plugin data\r
diff --git a/share/nitdoc/js/plugins/github/modalbox.js b/share/nitdoc/js/plugins/github/modalbox.js
deleted file mode 100644 (file)
index 6070a3e..0000000
+++ /dev/null
@@ -1,82 +0,0 @@
-/* This file is part of NIT ( http://www.nitlanguage.org ).\r
-\r
-   Licensed under the Apache License, Version 2.0 (the "License");\r
-   you may not use this file except in compliance with the License.\r
-   You may obtain a copy of the License at\r
-\r
-   http://www.apache.org/licenses/LICENSE-2.0\r
-\r
-   Unless required by applicable law or agreed to in writing, software\r
-   distributed under the License is distributed on an "AS IS" BASIS,\r
-   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.ModalBox class\r
- */\r
-define([\r
-       "jquery",\r
-], function($) {\r
-       // Init new modal box instance\r
-       //TODO use DJQuery.UI Dialog: https://jqueryui.com/dialog/#modal-message\r
-       var ModalBox = {\r
-\r
-               // Open modal box instance\r
-               open: function(title, content, isError) {\r
-                       $("body").append(\r
-                               $(document.createElement("div"))\r
-                               .attr("id", "nitdoc-github-modal-fade")\r
-                               .addClass("nitdoc-github-fade")\r
-                       )\r
-                       .append(\r
-                               $(document.createElement("div"))\r
-                               .attr("id", "nitdoc-github-modal")\r
-                               .addClass("nitdoc-github-modal")\r
-                               .append(\r
-                                       $(document.createElement("a"))\r
-                                       .addClass("nitdoc-github-close")\r
-                                       .attr("title", "Close")\r
-                                       .append("x")\r
-                                       .click(function() { ModalBox.close() })\r
-                               )\r
-                               .append("<h3>" + title + "</h3>")\r
-                               .append("<div>" + content + "</div>")\r
-                               .append(\r
-                                       $(document.createElement("div"))\r
-                                       .addClass("nitdoc-github-buttons")\r
-                                       .append(\r
-                                               $(document.createElement("button"))\r
-                                               .addClass("nitdoc-github-button")\r
-                                               .append("Ok")\r
-                                               .click(function() { ModalBox.close() })\r
-                                       )\r
-                               )\r
-                       );\r
-\r
-                       if(isError) {\r
-                               $("#nitdoc-github-modal").addClass("nitdoc-github-error");\r
-                       }\r
-\r
-                       $("#nitdoc-github-modal")\r
-                       .css({\r
-                               top: "50%",\r
-                               marginTop: -($("#nitdoc-github-modal").outerHeight() / 2) + "px",\r
-                               left: "50%",\r
-                               marginLeft: -($("#nitdoc-github-modal").outerWidth() / 2) + "px"\r
-                       })\r
-                       .find("button.nitdoc-github-button").focus();\r
-               },\r
-\r
-               // Close modal box instance\r
-               close: function() {\r
-                       $("#nitdoc-github-modal").remove();\r
-                       $("#nitdoc-github-modal-fade").remove();\r
-               }\r
-       };\r
-       return ModalBox;\r
-});\r
diff --git a/share/nitdoc/js/plugins/modalbox.js b/share/nitdoc/js/plugins/modalbox.js
new file mode 100644 (file)
index 0000000..86e244f
--- /dev/null
@@ -0,0 +1,101 @@
+/* This file is part of NIT ( http://www.nitlanguage.org ).\r
+\r
+   Licensed under the Apache License, Version 2.0 (the "License");\r
+   you may not use this file except in compliance with the License.\r
+   You may obtain a copy of the License at\r
+\r
+   http://www.apache.org/licenses/LICENSE-2.0\r
+\r
+   Unless required by applicable law or agreed to in writing, software\r
+   distributed under the License is distributed on an "AS IS" BASIS,\r
+   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
+define([\r
+       "jquery",\r
+       "jQueryUI"\r
+], function($) {\r
+       $.widget("nitdoc.modalbox", {\r
+               options: {\r
+                       id: "nitdoc-dialog",\r
+                       title: "Title",\r
+                       isError: false,\r
+               },\r
+\r
+               _create: function() {\r
+                       this._addFade();\r
+                       this._makeDialog();\r
+               },\r
+\r
+               open: function() {\r
+                       this._dialog\r
+                       .show()\r
+                       .css({\r
+                               top: "50%",\r
+                               marginTop: -(this._dialog.outerHeight() / 2) + "px",\r
+                               left: "50%",\r
+                               marginLeft: -(this._dialog.outerWidth() / 2) + "px"\r
+                       })\r
+                       .find(".nitdoc-dialog-buttons button:first").focus();\r
+\r
+                       this._fade.show();\r
+               },\r
+\r
+               close: function() {\r
+                       this._fade.hide();\r
+                       this._dialog.hide();\r
+               },\r
+\r
+               _addFade: function() {\r
+                       this._fade = $("<div/>")\r
+                       .hide()\r
+                       .attr("id", "nitdoc-dialog-fade-" + this.options.id)\r
+                       .addClass("nitdoc-dialog-fade");\r
+                       $("body").append(this._fade);\r
+               },\r
+\r
+               _makeDialog: function() {\r
+                       this._dialog = $("<div/>")\r
+                       .hide()\r
+                       .attr("id", this.options.id)\r
+                       .addClass("nitdoc-dialog")\r
+                       .append(\r
+                               $("<div/>")\r
+                               .addClass("nitdoc-dialog-header")\r
+                               .append(\r
+                                       $("<h3/>")\r
+                                       .text(this.options.title)\r
+                               )\r
+                               .append(\r
+                                       $("<button/>")\r
+                                       .addClass("nitdoc-dialog-close")\r
+                                       .append("x")\r
+                                       .click($.proxy(this.close, this))\r
+                               )\r
+                       )\r
+                       .append(\r
+                               $("<div/>")\r
+                               .addClass("nitdoc-dialog-content")\r
+                               .html(this.element)\r
+                       )\r
+                       .append(\r
+                               $("<div/>")\r
+                               .addClass("nitdoc-dialog-buttons")\r
+                               .append(\r
+                                       $("<button/>")\r
+                                       .append("Ok")\r
+                                       .click($.proxy(this.close, this))\r
+                               )\r
+                       );\r
+                       if(this.options.isError) {\r
+                               this._dialog.addClass("nitdoc-dialog-error");\r
+                       }\r
+                       $("body").append(this._dialog);\r
+               }\r
+       });\r
+});\r
index 97fa9c4..ee847cc 100644 (file)
  * Nitdoc Github buttons\r
  */\r
 \r
-button.nitdoc-github-button {\r
+.nitdoc-github-button {\r
        display: inline-block;\r
        cursor: pointer;\r
        background-color: #92C929;\r
@@ -177,66 +177,6 @@ button.nitdoc-github-button img {
        width: 16px;\r
 }\r
 \r
-/*\r
- * Modal Box\r
- */\r
-\r
-.nitdoc-github-fade {\r
-       background: #000;\r
-       position: fixed; left: 0; top: 0;\r
-       width: 100%; height: 100%;\r
-       opacity: .80;\r
-       filter: alpha(opacity=80);\r
-       z-index: 9999;\r
-}\r
-\r
-.nitdoc-github-modal {\r
-       background: #fff;\r
-       padding: 20px;\r
-       border: 1px solid #ddd;\r
-       float: left;\r
-       position: fixed;\r
-       z-index: 99999;\r
-       /* fix Box Shadow CSS3 */\r
-       -webkit-box-shadow: 0px 0px 20px #000;\r
-       -moz-box-shadow: 0px 0px 20px #000;\r
-       box-shadow: 0px 0px 20px #000;\r
-       /* round corners CSS3 */\r
-       -webkit-border-radius: 2px;\r
-       -moz-border-radius: 2px;\r
-       border-radius: 2px;\r
-       text-align: left;\r
-}\r
-\r
-.nitdoc-github-buttons, .nitdoc-github-modal h3 {\r
-       text-align: center;\r
-}\r
-\r
-.nitdoc-github-modal.nitdoc-github-error h3 {\r
-       color: red;\r
-}\r
-\r
-.nitdoc-github-modal textarea {\r
-       min-width: 300px;\r
-       width: 100%;\r
-}\r
-\r
-.nitdoc-github-modal button {\r
-       line-height: 20px;\r
-       margin-bottom: 0;\r
-       padding: 4px 12px;\r
-       margin-top: 20px;\r
-}\r
-\r
-.nitdoc-github-close {\r
-       float: right;\r
-       margin: -22px -17px 0 0;\r
-       cursor: pointer;\r
-       font-size: 1.3em;\r
-       font-weight: bold;\r
-       text-transform: lowercase;\r
-}\r
-\r
 /* Comment editing */\r
 \r
 .nitdoc-github-commentbox {\r
diff --git a/share/nitdoc/styles/Nitdoc.ModalBox.css b/share/nitdoc/styles/Nitdoc.ModalBox.css
new file mode 100644 (file)
index 0000000..79e2d33
--- /dev/null
@@ -0,0 +1,108 @@
+/* This file is part of NIT ( http://www.nitlanguage.org ).\r
+\r
+   Licensed under the Apache License, Version 2.0 (the "License");\r
+   you may not use this file except in compliance with the License.\r
+   You may obtain a copy of the License at\r
+\r
+   http://www.apache.org/licenses/LICENSE-2.0\r
+\r
+   Unless required by applicable law or agreed to in writing, software\r
+   distributed under the License is distributed on an "AS IS" BASIS,\r
+   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 ModalBox style\r
+ */\r
+\r
+.nitdoc-dialog-fade {\r
+       background: #000;\r
+       position: fixed; left: 0; top: 0;\r
+       width: 100%; height: 100%;\r
+       opacity: .80;\r
+       filter: alpha(opacity=80);\r
+       z-index: 9999;\r
+}\r
+\r
+.nitdoc-dialog {\r
+       background: #fff;\r
+       border: 1px solid #ddd;\r
+       float: left;\r
+       position: fixed;\r
+       z-index: 99999;\r
+       -webkit-box-shadow: 0px 0px 20px #000;\r
+       -moz-box-shadow: 0px 0px 20px #000;\r
+       box-shadow: 0px 0px 20px #000;\r
+       -webkit-border-radius: 2px;\r
+       -moz-border-radius: 2px;\r
+       border-radius: 2px;\r
+       text-align: left;\r
+       min-width: 300px;\r
+}\r
+\r
+.nitdoc-dialog-header {\r
+       padding: 10px 10px 10px 20px;\r
+       background: #f1f1f1;\r
+       border-bottom: 1px solid #ddd;\r
+}\r
+\r
+.nitdoc-dialog-error .nitdoc-dialog-header {\r
+       background: #C92020;\r
+}\r
+.nitdoc-dialog-error .nitdoc-dialog-header h3 {\r
+       color: white;\r
+}\r
+\r
+.nitdoc-dialog h3 {\r
+       display: inline;\r
+       margin: 0;\r
+}\r
+\r
+.nitdoc-dialog-content {\r
+       padding: 10px;\r
+}\r
+\r
+.nitdoc-dialog-buttons {\r
+       text-align: right;\r
+       padding: 5px;\r
+       border-top: 1px solid #ddd;\r
+}\r
+\r
+.nitdoc-dialog textarea {\r
+       min-width: 300px;\r
+       width: 100%;\r
+}\r
+\r
+.nitdoc-dialog button {\r
+       cursor: pointer;\r
+       border-radius: 2px;\r
+       -moz-border-radius: 2px;\r
+       -webkit-border-radius: 2px;\r
+       font-size: 14px;\r
+       padding: 5px 7px 5px 7px;\r
+       text-align: center;\r
+       background: #eee;\r
+       color: #333;\r
+       border: 1px solid #ddd;\r
+       font-weight: bold;\r
+}\r
+\r
+.nitdoc-dialog button:hover {\r
+       background: #0D8921;\r
+       color: #fff;\r
+       border: 1px solid #1d7900;\r
+}\r
+\r
+.nitdoc-dialog-close {\r
+       float: right;\r
+       padding: 5px;\r
+       margin: 0px;\r
+       line-height: 10px;\r
+       text-transform: lowercase;\r
+}\r
+\r
index d617b92..6bef48b 100644 (file)
@@ -76,7 +76,7 @@ body {
 \r
 header {\r
        position: fixed;\r
-       z-index: 600;\r
+       z-index: 50;\r
        left: 0;\r
        right: 0;\r
 }\r
@@ -88,7 +88,7 @@ header {
 \r
 .sidebar {\r
        position: fixed;\r
-       z-index: 500;\r
+       z-index: 10;\r
        top: 50px;\r
        bottom: 1em;\r
        width: 250px;\r
@@ -101,7 +101,7 @@ header {
 \r
 .content {\r
        position: fixed;\r
-       z-index: 500;\r
+       z-index: 10;\r
        top: 50px;\r
        bottom: 1em;\r
        left: 0;\r
@@ -123,7 +123,7 @@ header {
 \r
 footer {\r
        position: fixed;\r
-       z-index: 500;\r
+       z-index: 50;\r
        bottom: 0;\r
        width: 100%;\r
 }\r
index eb92064..f2ef835 100644 (file)
@@ -239,6 +239,7 @@ abstract class NitdocPage
                append("<link rel='stylesheet' href='{shareurl}/styles/Nitdoc.UI.css' type='text/css' media='screen'/>")
                append("<link rel='stylesheet' href='{shareurl}/styles/Nitdoc.QuickSearch.css' type='text/css' media='screen'/>")
                append("<link rel='stylesheet' href='{shareurl}/styles/Nitdoc.GitHub.css' type='text/css' media='screen'/>")
+               append("<link rel='stylesheet' href='{shareurl}/styles/Nitdoc.ModalBox.css' type='text/css' media='screen'/>")
                var title = ""
                if ctx.opt_custom_title.value != null then
                        title = " | {ctx.opt_custom_title.value.to_s}"