From: Alexandre Terrasa Date: Tue, 17 Sep 2013 02:41:32 +0000 (-0400) Subject: ni_nitdoc: moved JS facilities to Nitdoc.UI module X-Git-Tag: v0.6.2~18^2~4 X-Git-Url: http://nitlanguage.org ni_nitdoc: moved JS facilities to Nitdoc.UI module Signed-off-by: Alexandre Terrasa --- diff --git a/share/ni_nitdoc/scripts/Nitdoc.QuickSearch.js b/share/ni_nitdoc/scripts/Nitdoc.QuickSearch.js index c03b526..7f88149 100644 --- a/share/ni_nitdoc/scripts/Nitdoc.QuickSearch.js +++ b/share/ni_nitdoc/scripts/Nitdoc.QuickSearch.js @@ -86,7 +86,7 @@ $(document).ready(function() { }); }); -var Nitdoc = {}; +var Nitdoc = Nitdoc || {}; Nitdoc.QuickSearch = {}; // Do search diff --git a/share/ni_nitdoc/scripts/Nitdoc.UI.js b/share/ni_nitdoc/scripts/Nitdoc.UI.js new file mode 100644 index 0000000..5163c75 --- /dev/null +++ b/share/ni_nitdoc/scripts/Nitdoc.UI.js @@ -0,0 +1,201 @@ +/* This file is part of NIT ( http://www.nitlanguage.org ). + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + + Documentation generator for the nit language. + Generate API documentation in HTML format from nit source code. +*/ + +var Nitdoc = Nitdoc || {}; + +/* + * Nitdoc UI module + * + * Enhance nitdoc usability with JS features + */ + +Nitdoc.UI = function() { + + // Allow user to fold sidebar nav elements on click + var enableFolding = function(containerSelector) { + var container = $(containerSelector); + var foldLink = $(document.createElement("a")) + .addClass("nitdoc-ui-fold") + .html("-"); + + container.find("nav h3") + .prepend(foldLink) + .css("cursor", "pointer") + .toggle( + function() { + $(this).find("a.nitdoc-ui-fold").html("+"); + $(this).nextAll().toggle(); + }, + function() { + $(this).find("a.nitdoc-ui-fold").html("-"); + $(this).nextAll().toggle(); + } + ); + } + + // Allow user to copy signatures to clipboard with ZeroClipboard flahs plugin + // See: https://github.com/zeroclipboard/ZeroClipboard + var enableCopyToClipboard = function(copySelector) { + $(copySelector).each(function() { + var btn = $(document.createElement("button")) + .addClass("nitdoc-ui-copy") + .attr("data-clipboard-text", $(this).attr("data-untyped-signature")) + .append( + $(document.createElement("img")) + .attr("src", './resources/icons/copy.png') + ); + $(this).append(btn); + }); + + var clip = new ZeroClipboard($("button.nitdoc-ui-copy"), { + moviePath: "./ZeroClipboard.swf" + }); + } + + // Allow user to filter sidebar box entries by name + var enableSidebarTextFilters = function(filterSelector) { + var div = $(document.createElement("div")) + .addClass("nitdoc-ui-filter") + .append( + $(document.createElement("input")) + .addClass("nitdoc-ui-notused") + .attr("type", "text") + .attr("value", "filter...") + .keyup(function() { + var box = $(this).parents("nav.filterable"); + var value = $(this).val(); + box.find("ul li:not(:icontains('" + value + "'))").hide(); + box.find("ul li:icontains('" + value + "')").show(); + }) + .focusout(function() { + if($(this).val() == "") { + $(this).addClass("nitdoc-ui-notused"); + $(this).val("filter..."); + } + }) + .focusin(function() { + if($(this).val() == "filter...") { + $(this).removeClass("nitdoc-ui-notused"); + $(this).val(""); + } + }) + ); + $(filterSelector).after(div); + preloadSidebarTextFilters(); + } + + // Prealod filters using search query + var preloadSidebarTextFilters = function() { + var anchor = Nitdoc.Utils.extractAnchor(document.location.hash); + if(!anchor || anchor.indexOf("q=") == -1) return; + + var query = anchor.substring(2); + if(!query) return; + + $(".nitdoc-ui-filter input:text") + .val(query) + .removeClass("nitdoc-ui-notused") + .trigger("keyup"); + } + + // Allow user to filter side bar box entries by Introduced/Refined/inHerited type + var enableSidebarTypeFilters = function(filterSelector) { + var box = $(filterSelector); + var types = {}; + + box.find("li").each(function() { + var span = $(this).find("span:first"); + if(!types[span.html()]) types[span.html()] = { + title: span.attr("title"), + class: $(this).attr("class") + } + }); + + for(var type in types) { + var a = $(document.createElement("a")) + .addClass("nitdoc-ui-filter-link") + .html(type) + .attr("title", "Hide " + types[type].title) + .attr("data-filter-class", types[type].class) + .toggle( + function() { + var hclass = $(this).attr("data-filter-class"); + $(this).parents(filterSelector).find("li." + hclass).hide(); + $(this).addClass("nitdoc-ui-filter-hidden") + }, + function() { + var hclass = $(this).attr("data-filter-class"); + $(this).parents(filterSelector).find("li." + hclass).show(); + $(this).removeClass("nitdoc-ui-filter-hidden") + } + ) + $(filterSelector).find(".nitdoc-ui-filter").append(a); + } + } + + // Public interface + var ui = { + enableFolding: enableFolding, + enableCopyToClipboard: enableCopyToClipboard, + enableSidebarTextFilters: enableSidebarTextFilters, + enableSidebarTypeFilters: enableSidebarTypeFilters + }; + + return ui; +}(); + +// Init UI on page load +$(document).ready(function() { + Nitdoc.UI.enableFolding(".sidebar"); + Nitdoc.UI.enableCopyToClipboard(".signature"); + Nitdoc.UI.enableSidebarTextFilters("nav.filterable h3"); + Nitdoc.UI.enableSidebarTypeFilters("nav.filterable"); +}); + +/* + * Utils module + * + * Utility functions + */ + +Nitdoc.Utils = function() { + + // Extract anchor part (after #) from URL string + var extractAnchor = function(url) { + var index = url.indexOf("#"); + if (index >= 0) { + return url.substring(index + 1); + } + return null; + } + + // Public interface + var utils = { + extractAnchor: extractAnchor + }; + + return utils; +}(); + +// JQuery Case Insensitive :icontains selector +$.expr[':'].icontains = function(obj, index, meta, stack){ + return (obj.textContent.replace(/\[[0-9]+\]/g, "") || obj.innerText.replace(/\[[0-9]+\]/g, "") || jQuery(obj).text().replace(/\[[0-9]+\]/g, "") || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0; +}; + +//rename file +//commit diff --git a/share/ni_nitdoc/scripts/js-facilities.js b/share/ni_nitdoc/scripts/js-facilities.js deleted file mode 100644 index 611f44b..0000000 --- a/share/ni_nitdoc/scripts/js-facilities.js +++ /dev/null @@ -1,191 +0,0 @@ -/* -* JQuery Case Insensitive :icontains selector -*/ -$.expr[':'].icontains = function(obj, index, meta, stack){ - return (obj.textContent.replace(/\[[0-9]+\]/g, "") || obj.innerText.replace(/\[[0-9]+\]/g, "") || jQuery(obj).text().replace(/\[[0-9]+\]/g, "") || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0; -}; - -/* -* Add folding and filtering facilities to class description page. -*/ -$(document).ready(function() { - - // Menu nav folding - $(".menu nav h3") - .prepend( - $(document.createElement("a")) - .html("-") - .addClass("fold") - ) - .css("cursor", "pointer") - .click( function() { - if($(this).find("a.fold").html() == "+") { - $(this).find("a.fold").html("-"); - } else { - $(this).find("a.fold").html("+"); - } - $(this).nextAll().toggle(); - }) - - // Insert filter field - $("article.filterable h2, nav.filterable h3") - .after( - $(document.createElement("div")) - .addClass("filter") - .append( - $(document.createElement("input")) - .attr({ - type: "text", - value: "filter..." - }) - .addClass("notUsed") - .keyup(function() { - $(this).parent().parent().find("ul li:not(:icontains('" + $(this).val() + "'))").addClass("hide"); - $(this).parent().parent().find("ul li:icontains('" + $(this).val() + "')").removeClass("hide"); - }) - .focusout(function() { - if($(this).val() == "") { - $(this).addClass("notUsed"); - $(this).val("filter..."); - } - }) - .focusin(function() { - if($(this).val() == "filter...") { - $(this).removeClass("notUsed"); - $(this).val(""); - } - }) - ) - ); - - // Filter toggle between H I R in nav porperties list - $("nav.properties.filterable .filter") - .append( - $(document.createElement("a")) - .html("H") - .attr({ - title: "hide inherited properties" - }) - .click( function() { - if($(this).hasClass("hidden")) { - $(this).parent().parent().find("li.inherit").show(); - } else { - $(this).parent().parent().find("li.inherit").hide(); - } - - $(this).toggleClass("hidden"); - }) - ) - .append( - $(document.createElement("a")) - .html("R") - .attr({ - title: "hide redefined properties" - }) - .click( function() { - if($(this).hasClass("hidden")) { - $(this).parent().parent().find("li.redef").show(); - } else { - $(this).parent().parent().find("li.redef").hide(); - } - - $(this).toggleClass("hidden"); - }) - ) - .append( - $(document.createElement("a")) - .html("I") - .attr({ - title: "hide introduced properties" - }) - .click( function() { - if($(this).hasClass("hidden")) { - $(this).parent().parent().find("li.intro").show(); - } else { - $(this).parent().parent().find("li.intro").hide(); - } - - $(this).toggleClass("hidden"); - }) - ); - - // Filter toggle between I R in - $("article.properties.filterable .filter, article.classes.filterable .filter") - .append( - $(document.createElement("a")) - .html("I") - .attr({ - title: "hide introduced properties" - }) - .click( function() { - if($(this).hasClass("hidden")) { - $(this).parent().parent().find("li.intro").show(); - } else { - $(this).parent().parent().find("li.intro").hide(); - } - - $(this).toggleClass("hidden"); - }) - ) - .append( - $(document.createElement("a")) - .html("R") - .attr({ - title: "hide redefined properties" - }) - .click( function() { - if($(this).hasClass("hidden")) { - $(this).parent().parent().find("li.redef").show(); - } else { - $(this).parent().parent().find("li.redef").hide(); - } - - $(this).toggleClass("hidden"); - }) - ); - - //Preload filter fields with query string - preloadFilters(); - - //Copy to clipboard utility on signatures - $(".signature").each(function(){ - $(this).append( - $("") - .append($("")) - ) - }); - - var clip = new ZeroClipboard($(".copyButton"), { - moviePath: "./ZeroClipboard.swf" - } ); -}); - -/* Parse current URL and return anchor name */ -function currentAnchor() { - var index = document.location.hash.indexOf("#"); - if (index >= 0) { - return document.location.hash.substring(index + 1); - } - return null; -} - -/* Prealod filters field using search query */ -function preloadFilters() { - // Parse URL and get query string - var search = currentAnchor(); - - if(search == null || search.indexOf("q=") == -1) - return; - - search = search.substring(2, search.length); - - if(search == "" || search == "undefined") - return; - - $(":text").val(search); - $(".filter :text") - .removeClass("notUsed") - .trigger("keyup"); - -} - diff --git a/share/ni_nitdoc/styles/Nitdoc.UI.css b/share/ni_nitdoc/styles/Nitdoc.UI.css new file mode 100644 index 0000000..38c52f1 --- /dev/null +++ b/share/ni_nitdoc/styles/Nitdoc.UI.css @@ -0,0 +1,91 @@ +/* This file is part of NIT ( http://www.nitlanguage.org ). + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + + Documentation generator for the nit language. + Generate API documentation in HTML format from nit source code. +*/ + +/* + * Nitdoc UI JS module + */ + + +/* Folding */ + +a.nitdoc-ui-fold { + margin: 0 5px; + color: #999; + font-family: monospace; + font-weight: bold; + font-size: 120%; +} + +/* Copy signature to clipboard */ + +button.nitdoc-ui-copy.zeroclipboard-is-active { + border-color: #0D8921; +} + +button.nitdoc-ui-copy { + visibility: hidden; + vertical-align: middle; + margin: -2px 0px 0px 10px; + width: 22px; + height: 19px; + padding: 1px; + cursor: pointer; + background: #eee; + border: 1px solid #ccc; + box-shadow: none; +} + +button.nitdoc-ui-copy img { + width: 16px; +} + +article:hover > .signature button.nitdoc-ui-copy, button.nitdoc-ui-copy.zeroclipboard-is-hover { + visibility: visible; +} + +/* Side bar boxes text filtering */ + +.nitdoc-ui-filter .nitdoc-ui-notused { + color: #999; + font-style: italic; +} + +.nitdoc-ui-filter { + text-align: center; + padding: 5px; +} + +/* Side bar boxes type filtering */ + +a.nitdoc-ui-filter-link { + color: #0D8921; + cursor: pointer; + font-family: monospace; + margin-right: 5px; + font-weight: bold; +} + +a.nitdoc-ui-filter-link:hover { + text-decoration: underline; +} + +a.nitdoc-ui-filter-hidden { + color: #999; + font-weight: normal; +} + diff --git a/share/ni_nitdoc/styles/main.css b/share/ni_nitdoc/styles/main.css index f83c781..f371529 100644 --- a/share/ni_nitdoc/styles/main.css +++ b/share/ni_nitdoc/styles/main.css @@ -85,7 +85,7 @@ header { height: 100%; } -.menu { +.sidebar { position: fixed; top: 50px; bottom: 1em; @@ -93,7 +93,7 @@ header { overflow-y: scroll; } -.menu nav:last-child { +.sidebar nav:last-child { margin-bottom: 0; } @@ -114,7 +114,7 @@ header { width: auto; } -.page.footed .content, .page.footed .menu { +.page.footed .content, .page.footed .sidebar { bottom: 2em; } @@ -124,59 +124,34 @@ footer { width: 100%; } -article:hover > .signature .copyButton, .copyButton.zeroclipboard-is-hover { - visibility: visible; -} - -.copyButton.zeroclipboard-is-active { - border-color: #0D8921; -} - -.copyButton { - visibility: hidden; - vertical-align: middle; - margin: -2px 0px 0px 10px; - width: 22px; - height: 19px; - padding: 1px; - cursor: pointer; - background: #eee; - border: 1px solid #ccc; - box-shadow: none; -} - -.copyButton img { - width: 16px; -} - /* Webkit scroll bars */ -.menu { +.sidebar { overflow-y: hidden; } -.menu:hover { +.sidebar:hover { overflow-y: scroll; } -.menu::-webkit-scrollbar, .content::-webkit-scrollbar { +.sidebar::-webkit-scrollbar, .content::-webkit-scrollbar { width: 10px; } -.menu::-webkit-scrollbar-thumb, .content::-webkit-scrollbar-thumb { +.sidebar::-webkit-scrollbar-thumb, .content::-webkit-scrollbar-thumb { background: #CCC; -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07); } -.menu::-webkit-scrollbar-thumb:hover, .content::-webkit-scrollbar-thumb:hover { +.sidebar::-webkit-scrollbar-thumb:hover, .content::-webkit-scrollbar-thumb:hover { background: #999; } -.menu::-webkit-scrollbar-corner, .content::-webkit-scrollbar-corner { +.sidebar::-webkit-scrollbar-corner, .content::-webkit-scrollbar-corner { background: transparent; } -.menu::-webkit-scrollbar-button, .content::-webkit-scrollbar-button { +.sidebar::-webkit-scrollbar-button, .content::-webkit-scrollbar-button { width: 0; height: 0; display: none; @@ -223,43 +198,43 @@ header nav.main ul li.current { color: white; } -/* Latteral Menu */ +/* Sidebar */ -.menu nav { +.sidebar nav { margin: 20px; width: 208px; border: 1px solid #CCC; } -.menu nav:first-child { +.sidebar nav:first-child { margin-top: 0; } -.menu nav h3 { +.sidebar nav h3 { margin: 0; padding: 5px; background: #CCC; font-size: 1em; } -.menu nav h4 { +.sidebar nav h4 { font-weight: bold; color: #555555; margin: 10px 0 0 10px; font-size: 12px; } -.menu nav h4:last-child { +.sidebar nav h4:last-child { margin-bottom: 5px; } -.menu nav ul { +.sidebar nav ul { margin: 10px; padding: 0; list-style-type: none; } -.menu nav ul li { +.sidebar nav ul li { overflow: hidden; color: #CCC; } @@ -410,7 +385,19 @@ article .info .code { margin: 0; } -/* JS facilities */ +/* Icons */ + +.type.public, .interface.public, .abstract.class.public { background-image: url('../resources/icons/vtype_public.png')} +.type.protected, .interface.protected, .abstract.class.protected { background-image: url('../resources/icons/vtype_protected.png')} +.type.private, .interface.private, .abstract.class.private { background-image: url('../resources/icons/vtype_private.png')} +.init.public, .enum.public { background-image: url('../resources/icons/const_public.png')} +.init.protected, .enum.protected { background-image: url('../resources/icons/const_protected.png')} +.init.private, .enum.private { background-image: url('../resources/icons/const_private.png')} +.fun.public, .class.public, .extern.public { background-image: url('../resources/icons/meth_public.png')} +.fun.protected, .class.protected, .extern.protected { background-image: url('../resources/icons/meth_protected.png')} +.fun.private, .class.private, .extern.private { background-image: url('../resources/icons/meth_private.png')} + +/* Form elements */ input[type=text] { width: 150px; @@ -419,16 +406,6 @@ input[type=text] { padding: 1px 2px; } -input[type=text].notUsed { - color: #999; - font-style: italic; -} - -nav .filter { - text-align: center; - padding: 5px; -} - nav.main input[type=text] { margin: -2px 10px; color: black; @@ -439,48 +416,6 @@ nav.main form { float: right; } -.filter a { - color: #0D8921; - cursor: pointer; - font-family: monospace; - margin-right: 5px; - font-weight: bold; -} - -.filter a.hidden { - color: #999; - font-weight: normal; -} - -.filter a:hover { - text-decoration: underline; -} - -nav h3 a.fold { - margin: 0 5px; - color: #999; - font-family: monospace; - font-weight: bold; - font-size: 120%; - cursor: pointer; -} - -.hide { - overflow-y: hidden; - height: 0; -} - -/* Icons */ -.type.public, .interface.public, .abstract.class.public { background-image: url('../resources/icons/vtype_public.png')} -.type.protected, .interface.protected, .abstract.class.protected { background-image: url('../resources/icons/vtype_protected.png')} -.type.private, .interface.private, .abstract.class.private { background-image: url('../resources/icons/vtype_private.png')} -.init.public, .enum.public { background-image: url('../resources/icons/const_public.png')} -.init.protected, .enum.protected { background-image: url('../resources/icons/const_protected.png')} -.init.private, .enum.private { background-image: url('../resources/icons/const_private.png')} -.fun.public, .class.public, .extern.public { background-image: url('../resources/icons/meth_public.png')} -.fun.protected, .class.protected, .extern.protected { background-image: url('../resources/icons/meth_protected.png')} -.fun.private, .class.private, .extern.private { background-image: url('../resources/icons/meth_private.png')} - /* Quick Search */ #search { diff --git a/src/ni_nitdoc.nit b/src/ni_nitdoc.nit index 61f9f7a..ff6f12c 100644 --- a/src/ni_nitdoc.nit +++ b/src/ni_nitdoc.nit @@ -210,13 +210,14 @@ abstract class NitdocPage append("") append("") append("") + append("") append("") append("") append("") append("") - append("") append("") append("") + append("") append("") var title = "" if ctx.opt_custom_title.value != null then @@ -542,7 +543,7 @@ class NitdocModule end redef fun content do - append("
") + append("
") classes_column importation_column append("
") @@ -769,7 +770,7 @@ class NitdocClass end redef fun content do - append("
") + append("
") properties_column inheritance_column append("
")