Skip to content

Commit

Permalink
- Fix scrolling to entity in Model view
Browse files Browse the repository at this point in the history 
- Add search help
- Add keyboard shortcuts
  • Loading branch information
@szeiger
szeiger committed Nov 9, 2010
1 parent a0c0901 commit fd9d0f9
Show file tree
Hide file tree
Showing 6 changed files with 220 additions and 23 deletions.
148 changes: 136 additions & 12 deletions src/main/resources/com/novocode/extradoc/explorer/css/extradoc.css
View file
Expand Up @@ -25,6 +25,10 @@ a:hover, a:active {
text-decoration: underline;
}

code, pre {
font-family: Consolas,monospace;
}

/* Header *******************************************************************/

#header {
Expand Down Expand Up @@ -180,22 +184,72 @@ a:hover, a:active {

#search_area {
width: 100%;
padding: 8px 4px;
padding: 8px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

#search_area table {
border: 1px solid #b0b0b0;
width: 100%;
-webkit-border-radius: 13px;
-moz-border-radius: 13px;
border-radius: 13px;
}

#search_area table.active {
border-color: #5096ff;
box-shadow: 0 0 3px #5096ff;
-moz-box-shadow: 0 0 3px #5096ff;
-webkit-box-shadow: 0 0 3px #5096ff;
}

#search_area table td > * { display: block; }

#search_area img {
padding-left: 5px;
opacity: 0.6;
}

#search_area table.active img { opacity: 1; }

#search_area span {
margin-right: 4px;
cursor: pointer;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
width: 16px;
height: 16px;
text-align: center;
font-size: 12px;
line-height: 16px;
color: white;
font-weight: bold;
background-color: #b0b0b0;
}

#search_area table.active span { background-color: #c08080; }

#search_area span:hover, #search_area span:active { background-color: #c05050 !important; }

#search {
margin: 0;
width: 100%;
line-height: 14px;
height: 22px;
border: 0;
padding: 4px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

#navigation {
#search:focus {
outline: none;
}

#navigation ul.packages {
Expand Down Expand Up @@ -408,12 +462,12 @@ a:hover, a:active {
}

#separator div:active, #separator div:hover {
background: #a9dbf6;
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #a9dbf6), color-stop(1, #d6eefb));
background-image: -moz-linear-gradient(left center, #a9dbf6 0%, #d6eefb 100%);
/*border-top-color: #356f9b;
border-right-color: #356f9b;
border-bottom-color: #356f9b;*/
background: #c0daff;
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #b0c8ff), color-stop(1, #c0daff));
background-image: -moz-linear-gradient(left center, #b0c8ff 0%, #c0daff 100%);
border-top-color: #6098ff;
border-right-color: #6098ff;
border-bottom-color: #6098ff;
box-shadow: 2px 1px 3px #d0d0d0;
-moz-box-shadow: 2px 1px 3px #d0d0d0;
-webkit-box-shadow: 2px 1px 3px #d0d0d0;
Expand Down Expand Up @@ -562,10 +616,6 @@ a:hover, a:active {
border-radius: 6px;
}

#page code, #page pre {
font-family: Consolas,monospace;
}

/* Content Area: Model Tab **************************************************/

#content_model > div {
Expand Down Expand Up @@ -762,3 +812,77 @@ a:hover, a:active {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

/* Search Help Overlay ******************************************************/

#search_help {
position: absolute;
left: 273px;
right: 20px;
top: 35px;
z-index: 1;
display: none;
}

#search_help > img {
position: absolute;
left: 0;
top: 8px;
z-index: 2;
}

#search_help > div {
position: absolute;
left: 9px;
right: 0;
top: 0;
padding: 15px 15px 10px 10px;
border: 1px solid #606060;
background-color: #fffff0;
z-index: 1;
box-shadow: 2px 2px 5px #a0a0a0;
-moz-box-shadow: 2px 2px 5px #a0a0a0;
-webkit-box-shadow: 2px 2px 5px #a0a0a0;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
min-width: 200px;
max-width: 400px;
}

#search_help ul {
padding-left: 20px;
font-size: 12px;
}

#search_help pre {
display: block;
margin: 8px 0 10px 0;
border: 1px solid #d0d0c0;
padding: 6px 12px;
background-color: white;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
font: inherit;
font-weight: bold;
color: #404040;
height: 12px;
line-height: 12px;
}

#search_help h3 {
font-size: 1em;
margin: 0 0 0 20px;
padding: 0 0 2px 0;
border-bottom: 1px solid #c09000;
font-weight: bold;
color: #404040;
}

#search_help h3 span {
float: right;
font-weight: normal;
font-size: 12px;
margin-left: 8px;
}
Binary file added src/main/resources/com/novocode/extradoc/explorer/images/search.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/main/resources/com/novocode/extradoc/explorer/images/tooltip-triangle.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 21 additions & 2 deletions src/main/resources/com/novocode/extradoc/explorer/index.html
View file
Expand Up @@ -24,9 +24,14 @@
</tr></table>
<div id="sidebar">
<div id="search_area">
<input type="search" id="search" name="search" autocomplete="on" autofocus="on" placeholder="Search" />
<table cellpadding="0" cellspacing="0"><tr>
<td><img src="images/search.png" alt="" /></td>
<td width="100%"><input type="text" id="search" name="search" autocomplete="on" placeholder="Search / Filter" /></td>
<td><span title="Reset Search">X</span></td>
</table>
</div>
<div id="navigation"></div>
<div id="navfooter"><div>Created with <a href="http://github.com/szeiger/extradoc">Extradoc</a></div></div>
</div>
<div id="separator"><div></div></div>
<div id="content">
Expand All @@ -36,5 +41,19 @@
<div id="content_model"></div>
<div id="content_source"></div>
</div>

<div id="search_help">
<img src="images/tooltip-triangle.png" alt="" />
<div>
<h3>Search this API <span>(Keyboard shortcut: f)</span></h3>
<ul>
<li>Type a part of a template name to search for templates (traits, classes, objects and packages which
are listed in the navigation area), e.g.
<pre>map</pre>
</li>
<li>Type a dot and a part of a member name to search for members (defs, vars, vals, types), e.g.
<pre>.map</pre>
</li>
</ul>
</div>
</div>
</body></html>
70 changes: 61 additions & 9 deletions src/main/resources/com/novocode/extradoc/explorer/js/explorer.js
View file
Expand Up @@ -22,10 +22,10 @@ View.scrollToEntity = function(entity) {
var view = View[View.currentID];
var pos = 0;
if(entity > 0) {
var epos = $($("ol.page > li")[entity]).position();
var epos = $($("#content_model > div > table")[entity]).position();
if(epos) {
pos = epos.top;
pos += view.contentJ.scrollTop() - 6;
pos += view.contentJ.scrollTop();
}
}
view.contentJ.scrollTop(pos);
Expand Down Expand Up @@ -243,9 +243,6 @@ function createNavigationDOM() {
};
for(var i=0; i<packages.length; i++)
if(packages[i].n !== "_root_") createPackageDOM(packages[i]);
var footerE = e("div", null, e("div", { "id": "navfooter" }, divE));
t("Created with ", footerE);
t("Extradoc", e("a", { href: "http://github.com/szeiger/extradoc" }, footerE));
return divE;
}

Expand Down Expand Up @@ -522,7 +519,7 @@ Page.prototype.createOrGetModelDOM = function(cont) {
var thSpanE = e("span", null, thE);
if(no || no === 0) t(no+"", e("span", null, thSpanE));
t(o.name, thSpanE);
t(o.qName || "", thE);
if(o.qName && o.qName !== o.name) t(o.qName, thE);
}
var is = null;
if(o._isEntity) {
Expand Down Expand Up @@ -735,6 +732,7 @@ $(function() {
new View("page"); new View("model"); new View("source"); new View("msg");
new Tab("page"); new Tab("model"); new Tab("source"); Tab.loader = $("#loader img");
var sidebar = $("#sidebar"), navigation = $("#navigation"), contentJ = $("#content");
var searchHelp = $("#search_help");
var inClick = false;
var rememberedPos = 300;
var separator = $("#separator").draggable({
Expand All @@ -757,18 +755,72 @@ $(function() {
sidebar.css("overflow", pos > 0 ? "auto" : "hidden"); // IE8 does not hide scrollbars otherwise
sidebar.css("width", pos);
contentJ.css("left", pos+1);
searchHelp.css("left", pos-27);
separator.css("border-left-color", pos ? sepBorderColor : "transparent");
separatorDiv.css("border-left-color", pos ? sepBorderColor : sepHandleColor);
}
function toggleSidebar() {
var pos = separator.css("left") !== "0px" ? 0 : rememberedPos;
separator.css("left", pos);
syncSeparator(pos);
};
separatorDiv.mousedown(function() {
inClick = true;
return true;
}).click(function() {
if(!inClick) return false;
inClick = false;
var pos = separator.css("left") !== "0px" ? 0 : rememberedPos;
separator.css("left", pos);
syncSeparator(pos);
toggleSidebar();
});
var searchInput = $("#search"), searchTable = $("#search_area table");
searchInput.focus(function() {
searchTable.toggleClass("active", true);
sidebar.scrollTop(0);
searchHelp.show();
});
searchInput.blur(function() {
searchTable.toggleClass("active", false);
searchHelp.hide();
});
$("html").keypress(function(e) {
if(e.srcElement && e.srcElement.nodeName === "INPUT") return true;
if(e.metaKey || e.ctrlKey || e.altKey || e.shiftKey) return true;
switch(e.charCode || e.keyCode) {
case 102: // f
if(separator.attr("offsetLeft") < 200) {
var pos = rememberedPos > 200 ? rememberedPos : 200;
separator.css("left", pos);
syncSeparator(pos);
}
searchInput.focus();
return false;
case 110: // n
toggleSidebar();
return false;
case 112: // p
goToEntity(null, null, "page");
return false;
case 109: // m
goToEntity(null, null, "model");
return false;
case 115: // s
goToEntity(null, null, "source");
return false;
default:
return true;
}
});
searchInput.keydown(function(e) {
if(e.keyCode === 27) {
searchInput.blur();
return false;
} else return true;
});
searchInput.keypress(function(e) {
if(e.keyCode === 13) {
log('TODO: Perform search for "'+searchInput.val()+'"');
return false;
} else return true;
});

function globalReady(global) {
Expand Down
2 changes: 2 additions & 0 deletions src/main/scala/com/novocode/extradoc/json/JsonMultiFactory.scala
View file
Expand Up @@ -35,6 +35,8 @@ class JsonMultiFactory(universe: Universe, explorer: Boolean = false) extends Ab
copyResource(p, "js/jquery-ui-1.8.5.custom.min.js")
copyResource(p, "js/jquery.history.js")
copyResource(p, "images/ajax-loader-white.gif")
copyResource(p, "images/search.png")
copyResource(p, "images/tooltip-triangle.png")
}

val allModels = prepareModel(universe)
Expand Down

0 comments on commit fd9d0f9

Please sign in to comment.