Author: violetagg
Date: Fri Jan 26 09:52:34 2018
New Revision: 1822263
URL: http://svn.apache.org/viewvc?rev=1822263&view=rev
Log:
Adjusted searchbox alignment and added menu toggle by hitting enter.
Patch by Igal Sapir.
Modified:
tomcat/site/trunk/docs/res/css/tomcat.css
tomcat/site/trunk/docs/res/js/tomcat.js
tomcat/site/trunk/xdocs/res/css/tomcat.css
tomcat/site/trunk/xdocs/res/js/tomcat.js
tomcat/site/trunk/xdocs/stylesheets/tomcat-site.xsl
Modified: tomcat/site/trunk/docs/res/css/tomcat.css
URL:
http://svn.apache.org/viewvc/tomcat/site/trunk/docs/res/css/tomcat.css?rev=1822263&r1=1822262&r2=1822263&view=diff
==============================================================================
--- tomcat/site/trunk/docs/res/css/tomcat.css (original)
+++ tomcat/site/trunk/docs/res/css/tomcat.css Fri Jan 26 09:52:34 2018
@@ -325,18 +325,22 @@ table.defaultTable th, table.defaultTabl
.searchbox {
position: relative;
+ max-width: 190px;
+ height: 2.25em;
+ overflow: hidden;
}
.searchbox form {
margin: 0;
}
-.searchbox input[type=search], .searchbox button {
- height: 25px;
+.searchbox input, .searchbox button {
+ height: 100%;
}
.searchbox button {
position: absolute;
+ top: 0;
right: 0;
}
Modified: tomcat/site/trunk/docs/res/js/tomcat.js
URL:
http://svn.apache.org/viewvc/tomcat/site/trunk/docs/res/js/tomcat.js?rev=1822263&r1=1822262&r2=1822263&view=diff
==============================================================================
--- tomcat/site/trunk/docs/res/js/tomcat.js (original)
+++ tomcat/site/trunk/docs/res/js/tomcat.js Fri Jan 26 09:52:34 2018
@@ -31,7 +31,6 @@ function addLiveEventListeners(selector,
handler(evt);
return;
}
-
target = target.parentElement;
}
}
@@ -40,6 +39,17 @@ function addLiveEventListeners(selector,
}
+/** adds event listener to the elements that match the selector */
+function addEventListeners(selector, event, handler, useCapture){
+ [].forEach.call(
+ document.querySelectorAll(selector)
+ ,function(el, ix) {
+ el.addEventListener(event, handler, useCapture || false);
+ }
+ );
+}
+
+
/** toggles a class for all of the nodes that match a selector akin to
jQuery's toggleClass() */
function toggleClass(selector, className){
var nodes = document.querySelectorAll(selector);
@@ -51,3 +61,19 @@ function toggleClass(selector, className
});
}
+
+function toggleMenu(){
+ toggleClass("#mainLeft", "opened");
+ toggleClass(".menu-toggler", "opened");
+}
+
+
+addEventListeners(".menu-toggler", "click", function(evt){
+ toggleMenu();
+});
+
+
+addEventListeners(".menu-toggler", "keyup", function(evt){
+ if (evt.which == 13)
+ toggleMenu();
+});
Modified: tomcat/site/trunk/xdocs/res/css/tomcat.css
URL:
http://svn.apache.org/viewvc/tomcat/site/trunk/xdocs/res/css/tomcat.css?rev=1822263&r1=1822262&r2=1822263&view=diff
==============================================================================
--- tomcat/site/trunk/xdocs/res/css/tomcat.css (original)
+++ tomcat/site/trunk/xdocs/res/css/tomcat.css Fri Jan 26 09:52:34 2018
@@ -325,18 +325,22 @@ table.defaultTable th, table.defaultTabl
.searchbox {
position: relative;
+ max-width: 190px;
+ height: 2.25em;
+ overflow: hidden;
}
.searchbox form {
margin: 0;
}
-.searchbox input[type=search], .searchbox button {
- height: 25px;
+.searchbox input, .searchbox button {
+ height: 100%;
}
.searchbox button {
position: absolute;
+ top: 0;
right: 0;
}
Modified: tomcat/site/trunk/xdocs/res/js/tomcat.js
URL:
http://svn.apache.org/viewvc/tomcat/site/trunk/xdocs/res/js/tomcat.js?rev=1822263&r1=1822262&r2=1822263&view=diff
==============================================================================
--- tomcat/site/trunk/xdocs/res/js/tomcat.js (original)
+++ tomcat/site/trunk/xdocs/res/js/tomcat.js Fri Jan 26 09:52:34 2018
@@ -31,7 +31,6 @@ function addLiveEventListeners(selector,
handler(evt);
return;
}
-
target = target.parentElement;
}
}
@@ -40,6 +39,17 @@ function addLiveEventListeners(selector,
}
+/** adds event listener to the elements that match the selector */
+function addEventListeners(selector, event, handler, useCapture){
+ [].forEach.call(
+ document.querySelectorAll(selector)
+ ,function(el, ix) {
+ el.addEventListener(event, handler, useCapture || false);
+ }
+ );
+}
+
+
/** toggles a class for all of the nodes that match a selector akin to
jQuery's toggleClass() */
function toggleClass(selector, className){
var nodes = document.querySelectorAll(selector);
@@ -51,3 +61,19 @@ function toggleClass(selector, className
});
}
+
+function toggleMenu(){
+ toggleClass("#mainLeft", "opened");
+ toggleClass(".menu-toggler", "opened");
+}
+
+
+addEventListeners(".menu-toggler", "click", function(evt){
+ toggleMenu();
+});
+
+
+addEventListeners(".menu-toggler", "keyup", function(evt){
+ if (evt.which == 13)
+ toggleMenu();
+});
\ No newline at end of file
Modified: tomcat/site/trunk/xdocs/stylesheets/tomcat-site.xsl
URL:
http://svn.apache.org/viewvc/tomcat/site/trunk/xdocs/stylesheets/tomcat-site.xsl?rev=1822263&r1=1822262&r2=1822263&view=diff
==============================================================================
--- tomcat/site/trunk/xdocs/stylesheets/tomcat-site.xsl (original)
+++ tomcat/site/trunk/xdocs/stylesheets/tomcat-site.xsl Fri Jan 26 09:52:34 2018
@@ -91,7 +91,7 @@
<div id="wrapper">
<header id="header">
<div class="clearfix">
- <div class="menu-toggler pull-left">
+ <div class="menu-toggler pull-left" tabindex="1">
<div class="hamburger"></div>
</div>
<a href="{$project/@href}"><img class="tomcat-logo pull-left noPrint"
alt="Tomcat Home" src="{$src-home-logo}"/></a>
@@ -107,13 +107,13 @@
<div>
<div id="mainLeft">
<div id="nav-wrapper">
- <div class="searchbox">
- <form action="https://www.google.com/search"; method="get">
+ <form action="https://www.google.com/search"; method="get">
+ <div class="searchbox">
<input value="tomcat.apache.org" name="sitesearch" type="hidden"
/>
<input placeholder="Searchâ¦" required="required" name="q"
id="query" type="search" />
<button>GO</button>
- </form>
- </div>
+ </div>
+ </form>
<!-- Navigation -->
<nav>
<xsl:apply-templates select="$project/body/menu"/>
@@ -141,12 +141,6 @@
</footer>
</div>
<script src="res/js/tomcat.js"></script>
-<script>
- addLiveEventListeners(".menu-toggler", "click", function(evt){
- toggleClass("#mainLeft", "opened");
- toggleClass(".menu-toggler", "opened");
- });
-</script>
</body>
</html>
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
