[libvirt] [PATCH v2 0/3] docs: add advanced search capability
Andrea suggested it would be nice to redirect the search box to a local search page which then let the user submit a site-restricted search to google for website vs wiki vs mailing lists. I took a slightly different approach here, and instead simply popup an extra set of radio buttons below the main search field. This lets the user select the site to search straightaway without the intermediate page. Changed in v2: - Add missing rules for installing javascript - Use mediawiki search - Search dev & users lists separately - Whitespace fixes Daniel P. Berrangé (3): docs: ensure javascript files are included in dist & install rules docs: move javascript logic into a standalone file docs: add advanced search capabilities docs/Makefile.am | 15 +++++++++- docs/js/main.js | 77 ++++++++++++++++++++++++++++++++++++++++++++++++ docs/libvirt.css | 39 ++++++++++++++++++++++++ docs/mobile.css | 7 +++++ docs/page.xsl | 51 ++++++++++---------------------- 5 files changed, 152 insertions(+), 37 deletions(-) create mode 100644 docs/js/main.js -- 2.20.1
Signed-off-by: Daniel P. Berrangé <berrange@redhat.com> --- docs/Makefile.am | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/docs/Makefile.am b/docs/Makefile.am index ebdc734ddd..2a9d99071c 100644 --- a/docs/Makefile.am +++ b/docs/Makefile.am @@ -55,6 +55,12 @@ css = \ mobile.css \ main.css +javascript = \ + js/jquery-3.1.1.min.js \ + js/jquery.rss.min.js \ + js/moment.min.js + + fonts = \ fonts/LICENSE.md \ fonts/stylesheet.css \ @@ -171,7 +177,7 @@ EXTRA_DIST= \ $(dot_html) $(dot_html_in) $(gif) $(apihtml) $(apipng) \ $(devhelphtml) $(devhelppng) $(devhelpcss) $(devhelpxsl) \ $(xml) $(qemu_xml) $(lxc_xml) $(admin_xml) $(fig) $(png) $(css) \ - $(logofiles) \ + $(javascript) $(logofiles) \ $(internals_html_in) $(internals_html) $(fonts) \ aclperms.htmlinc \ hvsupport.pl \ @@ -353,6 +359,9 @@ install-data-local: $(mkinstalldirs) $(DESTDIR)$(HTML_DIR) for f in $(css) $(dot_html) $(gif) $(png); do \ $(INSTALL) -m 0644 $(srcdir)/$$f $(DESTDIR)$(HTML_DIR); done + $(mkinstalldirs) $(DESTDIR)$(HTML_DIR)/js + for f in $(javascript); do \ + $(INSTALL) -m 0644 $(srcdir)/$$f $(DESTDIR)$(HTML_DIR)/js/; done $(mkinstalldirs) $(DESTDIR)$(HTML_DIR)/logos for f in $(logofiles); do \ $(INSTALL) -m 0644 $(srcdir)/$$f $(DESTDIR)$(HTML_DIR)/logos; done @@ -380,6 +389,9 @@ uninstall-local: for f in $(logofiles); do \ rm -f $(DESTDIR)$(HTML_DIR)/$$f; \ done + for f in $(javascript); do \ + rm -f $(DESTDIR)$(HTML_DIR)/$$f; \ + done for h in $(apihtml); do rm -f $(DESTDIR)$(HTML_DIR)/$$h; done for p in $(apipng); do rm -f $(DESTDIR)$(HTML_DIR)/$$p; done for f in $(internals_html); do \ -- 2.20.1
On Fri, 2019-04-05 at 16:12 +0100, Daniel P. Berrangé wrote:
Signed-off-by: Daniel P. Berrangé <berrange@redhat.com> --- docs/Makefile.am | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-)
Reviewed-by: Andrea Bolognani <abologna@redhat.com> -- Andrea Bolognani / Red Hat / Virtualization
Instead of duplicating javascript in every single page, put it in a standalone file which can be cached by the browser. Signed-off-by: Daniel P. Berrangé <berrange@redhat.com> --- docs/Makefile.am | 1 + docs/main.js | 25 +++++++++++++++++++++++++ docs/page.xsl | 35 +++-------------------------------- 3 files changed, 29 insertions(+), 32 deletions(-) create mode 100644 docs/main.js diff --git a/docs/Makefile.am b/docs/Makefile.am index 2a9d99071c..29b0761a2b 100644 --- a/docs/Makefile.am +++ b/docs/Makefile.am @@ -56,6 +56,7 @@ css = \ main.css javascript = \ + js/main.js \ js/jquery-3.1.1.min.js \ js/jquery.rss.min.js \ js/moment.min.js diff --git a/docs/main.js b/docs/main.js new file mode 100644 index 0000000000..723e2fb16d --- /dev/null +++ b/docs/main.js @@ -0,0 +1,25 @@ +function pageload() { + window.addEventListener('scroll', function(e){ + var distanceY = window.pageYOffset || document.documentElement.scrollTop + var shrinkOn = 94 + home = document.getElementById("home"); + links = document.getElementById("jumplinks"); + search = document.getElementById("search"); + body = document.getElementById("body"); + if (distanceY > shrinkOn) { + if (home.className != "navhide") { + body.className = "navhide" + home.className = "navhide" + links.className = "navhide" + search.className = "navhide" + } + } else { + if (home.className == "navhide") { + body.className = "" + home.className = "" + links.className = "" + search.className = "" + } + } + }); +} diff --git a/docs/page.xsl b/docs/page.xsl index beb864f26b..136f3106e4 100644 --- a/docs/page.xsl +++ b/docs/page.xsl @@ -99,40 +99,11 @@ <meta name="description" content="libvirt, virtualization, virtualization API"/> <xsl:apply-templates select="/html:html/html:head/*" mode="content"/> - <script type="text/javascript"> - <xsl:comment> - <![CDATA[ - function init() { - window.addEventListener('scroll', function(e){ - var distanceY = window.pageYOffset || document.documentElement.scrollTop, - shrinkOn = 94 - home = document.getElementById("home"); - links = document.getElementById("jumplinks"); - search = document.getElementById("search"); - body = document.getElementById("body"); - if (distanceY > shrinkOn) { - if (home.className != "navhide") { - body.className = "navhide" - home.className = "navhide" - links.className = "navhide" - search.className = "navhide" - } - } else { - if (home.className == "navhide") { - body.className = "" - home.className = "" - links.className = "" - search.className = "" - } - } - }); - } - window.onload = init(); - ]]> - </xsl:comment> + <script type="text/javascript" src="{$href_base}js/main.js"> + <xsl:comment>// forces non-empty element</xsl:comment> </script> </head> - <body> + <body onload="pageload()"> <xsl:if test="html:html/html:body/@class"> <xsl:attribute name="class"> <xsl:value-of select="html:html/html:body/@class"/> -- 2.20.1
On Fri, 2019-04-05 at 16:12 +0100, Daniel P. Berrangé wrote:
Instead of duplicating javascript in every single page, put it in a standalone file which can be cached by the browser.
Signed-off-by: Daniel P. Berrangé <berrange@redhat.com> --- docs/Makefile.am | 1 + docs/main.js | 25 +++++++++++++++++++++++++ docs/page.xsl | 35 +++-------------------------------- 3 files changed, 29 insertions(+), 32 deletions(-) create mode 100644 docs/main.js
Reviewed-by: Andrea Bolognani <abologna@redhat.com> -- Andrea Bolognani / Red Hat / Virtualization
On Fri, 2019-04-05 at 17:38 +0200, Andrea Bolognani wrote:
On Fri, 2019-04-05 at 16:12 +0100, Daniel P. Berrangé wrote:
Instead of duplicating javascript in every single page, put it in a standalone file which can be cached by the browser.
Signed-off-by: Daniel P. Berrangé <berrange@redhat.com> --- docs/Makefile.am | 1 + docs/main.js | 25 +++++++++++++++++++++++++ docs/page.xsl | 35 +++-------------------------------- 3 files changed, 29 insertions(+), 32 deletions(-) create mode 100644 docs/main.js
Reviewed-by: Andrea Bolognani <abologna@redhat.com>
Actually, not so fast: you've moved the existing JavaScript code to docs/main.js instead of js/docs/main.js, which is of course completely wrong. Please fix that before pushing. -- Andrea Bolognani / Red Hat / Virtualization
On Fri, Apr 05, 2019 at 05:45:10PM +0200, Andrea Bolognani wrote:
On Fri, 2019-04-05 at 17:38 +0200, Andrea Bolognani wrote:
On Fri, 2019-04-05 at 16:12 +0100, Daniel P. Berrangé wrote:
Instead of duplicating javascript in every single page, put it in a standalone file which can be cached by the browser.
Signed-off-by: Daniel P. Berrangé <berrange@redhat.com> --- docs/Makefile.am | 1 + docs/main.js | 25 +++++++++++++++++++++++++ docs/page.xsl | 35 +++-------------------------------- 3 files changed, 29 insertions(+), 32 deletions(-) create mode 100644 docs/main.js
Reviewed-by: Andrea Bolognani <abologna@redhat.com>
Actually, not so fast: you've moved the existing JavaScript code to docs/main.js instead of js/docs/main.js, which is of course completely wrong. Please fix that before pushing.
Opps, squashed that into the 3rd patch by mistake. Regards, Daniel -- |: https://berrange.com -o- https://www.flickr.com/photos/dberrange :| |: https://libvirt.org -o- https://fstop138.berrange.com :| |: https://entangle-photo.org -o- https://www.instagram.com/dberrange :|
Allow targetting the search scope to the website, wiki or mailing lists only. When javascript is disabled this should gracefully fallback to only searching the website. Signed-off-by: Daniel P. Berrangé <berrange@redhat.com> --- docs/js/main.js | 77 ++++++++++++++++++++++++++++++++++++++++++++++++ docs/libvirt.css | 39 ++++++++++++++++++++++++ docs/main.js | 25 ---------------- docs/mobile.css | 7 +++++ docs/page.xsl | 16 +++++++--- 5 files changed, 135 insertions(+), 29 deletions(-) create mode 100644 docs/js/main.js delete mode 100644 docs/main.js diff --git a/docs/js/main.js b/docs/js/main.js new file mode 100644 index 0000000000..aea7c999fc --- /dev/null +++ b/docs/js/main.js @@ -0,0 +1,77 @@ +function pageload() { + window.addEventListener('scroll', function(e){ + var distanceY = window.pageYOffset || document.documentElement.scrollTop + var shrinkOn = 94 + home = document.getElementById("home"); + links = document.getElementById("jumplinks"); + search = document.getElementById("search"); + body = document.getElementById("body"); + if (distanceY > shrinkOn) { + if (home.className != "navhide") { + body.className = "navhide" + home.className = "navhide" + links.className = "navhide" + search.className = "navhide" + } + } else { + if (home.className == "navhide") { + body.className = "" + home.className = "" + links.className = "" + search.className = "" + } + } + }); + + /* Setting this class makes the advanced search options visible */ + advancedSearch = document.getElementById("advancedsearch") + advancedSearch.className = "advancedsearch" + + simpleSearch = document.getElementById("simplesearch") + simplesearch.addEventListener("submit", advancedsearch) +} + +function advancedsearch(e) { + e.preventDefault(); + e.stopPropagation(); + + form = document.createElement("form"); + form.setAttribute("method", "get"); + + newq = document.createElement("input"); + newq.setAttribute("type", "hidden"); + form.appendChild(newq); + + q = document.getElementById("searchq"); + whats = document.getElementsByName("what"); + what = "website"; + for (var i = 0; i < whats.length; i++) { + if (whats[i].checked) { + what = whats[i].value; + break; + } + } + + if (what == "website") { + form.setAttribute("action", "https://google.com/search"); + newq.setAttribute("name", "q"); + newq.value = "site:libvirt.org " + q.value; + } else if (what == "wiki") { + form.setAttribute("action", "https://wiki.libvirt.org/index.php"); + newq.setAttribute("name", "search"); + newq.value = q.value; + } else if (what == "devs") { + form.setAttribute("action", "https://google.com/search"); + newq.setAttribute("name", "q"); + newq.value = "site:redhat.com inurl:/archives/libvir-list " + q.value; + } else if (what == "users") { + form.setAttribute("action", "https://google.com/search"); + newq.setAttribute("name", "q"); + newq.value = "site:redhat.com inurl:/archives/libvirt-users " + q.value; + } + + document.body.appendChild(form); + form.submit(); + + return false; +} diff --git a/docs/libvirt.css b/docs/libvirt.css index ed797d5d91..0d2d5f8ace 100644 --- a/docs/libvirt.css +++ b/docs/libvirt.css @@ -542,3 +542,42 @@ dl.mail dt a:hover { td.enumvalue { white-space: nowrap; } + +#advancedsearch { + display: none; + vertical-align: bottom; + position: absolute; + padding: 1em; + padding-top: 0em; + margin-top: 0em; + top: 100px; + right: 0px; + width: 13em; + text-align: left; + color: white; + background: rgb(0, 95, 97); + border-left: 3px solid rgb(60, 133, 124); + border-bottom: 3px solid rgb(60, 133, 124); +} + +/* Use div.advancedsearch, not #advancedsearch because the + * 'advancedsearch' class is set dynamically when javascript + * loads. This ensures that the advancedsearch options are + * not displayed when javascript is disabled. +*/ +#search:hover div.advancedsearch { + display: table; +} + +#advancedsearch span { + display: block; +} + +#advancedsearch input[type=radio] { + height: inherit; + display: inline; +} + +#advancedsearch label { + display: inline; +} diff --git a/docs/main.js b/docs/main.js deleted file mode 100644 index 723e2fb16d..0000000000 --- a/docs/main.js +++ /dev/null @@ -1,25 +0,0 @@ -function pageload() { - window.addEventListener('scroll', function(e){ - var distanceY = window.pageYOffset || document.documentElement.scrollTop - var shrinkOn = 94 - home = document.getElementById("home"); - links = document.getElementById("jumplinks"); - search = document.getElementById("search"); - body = document.getElementById("body"); - if (distanceY > shrinkOn) { - if (home.className != "navhide") { - body.className = "navhide" - home.className = "navhide" - links.className = "navhide" - search.className = "navhide" - } - } else { - if (home.className == "navhide") { - body.className = "" - home.className = "" - links.className = "" - search.className = "" - } - } - }); -} diff --git a/docs/mobile.css b/docs/mobile.css index 85ca497525..366d0f1a5d 100644 --- a/docs/mobile.css +++ b/docs/mobile.css @@ -15,6 +15,7 @@ margin: 0px; background: white; padding: 0px; + height: 2em; } #search form { padding: 5px; @@ -91,4 +92,10 @@ float: none; margin-bottom: 2em; } + #advancedsearch { + margin-top: 4em; + border: 0px; + background: white; + color: black; + } } diff --git a/docs/page.xsl b/docs/page.xsl index 136f3106e4..65ddeb2bb7 100644 --- a/docs/page.xsl +++ b/docs/page.xsl @@ -126,11 +126,19 @@ </ul> </div> <div id="search"> - <form action="https://www.google.com/search" enctype="application/x-www-form-urlencoded" method="get"> - <input name="sitesearch" type="hidden" value="libvirt.org"/> - <input name="q" type="text" size="12" value=""/> - <input type="submit" value="Go"/> + <form id="simplesearch" action="https://www.google.com/search" enctype="application/x-www-form-urlencoded" method="get"> + <div> + <input id="searchsite" name="sitesearch" type="hidden" value="libvirt.org"/> + <input id="searchq" name="q" type="text" size="12" value=""/> + <input name="submit" type="submit" value="Go"/> + </div> </form> + <div id="advancedsearch"> + <span><input type="radio" name="what" id="whatwebsite" checked="checked" value="website"/><label for="whatwebsite">Website</label></span> + <span><input type="radio" name="what" id="whatwiki" value="wiki"/><label for="whatwiki">Wiki</label></span> + <span><input type="radio" name="what" id="whatdevs" value="devs"/><label for="whatdevs">Developers list</label></span> + <span><input type="radio" name="what" id="whatusers" value="users"/><label for="whatusers">Users list</label></span> + </div> </div> </div> <div id="footer"> -- 2.20.1
On Fri, 2019-04-05 at 16:12 +0100, Daniel P. Berrangé wrote: [...]
+ } else if (what == "devs") { + form.setAttribute("action", "https://google.com/search"); + newq.setAttribute("name", "q"); + newq.value = "site:redhat.com inurl:/archives/libvir-list " + q.value; + } else if (what == "users") { + form.setAttribute("action", "https://google.com/search"); + newq.setAttribute("name", "q"); + newq.value = "site:redhat.com inurl:/archives/libvirt-users " + q.value; + }
It seems like site:redhat.com/archives/libvir-list site:redhat.com/archives/libvirt-users would work just as well, and at least to my eyes that looks less alien that what you have up there. Your version works too, though, so feel free to change it or leave it alone based on your personal preference. [...]
+++ b/docs/mobile.css @@ -15,6 +15,7 @@ margin: 0px; background: white; padding: 0px; + height: 2em; } #search form { padding: 5px; @@ -91,4 +92,10 @@ float: none; margin-bottom: 2em; } + #advancedsearch { + margin-top: 4em; + border: 0px; + background: white; + color: black; + } }
Oh boy, what is even going on with indentation in this file? It's one most insane indentation styles I've ever seen. Your additions are entirely consistent with existing code, though, so I'll just look the other way and try to forget what I've just witnessed. Reviewed-by: Andrea Bolognani <abologna@redhat.com> -- Andrea Bolognani / Red Hat / Virtualization
On Fri, Apr 05, 2019 at 05:54:41PM +0200, Andrea Bolognani wrote:
On Fri, 2019-04-05 at 16:12 +0100, Daniel P. Berrangé wrote: [...]
+ } else if (what == "devs") { + form.setAttribute("action", "https://google.com/search"); + newq.setAttribute("name", "q"); + newq.value = "site:redhat.com inurl:/archives/libvir-list " + q.value; + } else if (what == "users") { + form.setAttribute("action", "https://google.com/search"); + newq.setAttribute("name", "q"); + newq.value = "site:redhat.com inurl:/archives/libvirt-users " + q.value; + }
It seems like
site:redhat.com/archives/libvir-list site:redhat.com/archives/libvirt-users
would work just as well, and at least to my eyes that looks less alien that what you have up there. Your version works too, though, so feel free to change it or leave it alone based on your personal preference.
[...]
+++ b/docs/mobile.css @@ -15,6 +15,7 @@ margin: 0px; background: white; padding: 0px; + height: 2em; } #search form { padding: 5px; @@ -91,4 +92,10 @@ float: none; margin-bottom: 2em; } + #advancedsearch { + margin-top: 4em; + border: 0px; + background: white; + color: black; + } }
Oh boy, what is even going on with indentation in this file? It's one most insane indentation styles I've ever seen. Your additions are entirely consistent with existing code, though, so I'll just look the other way and try to forget what I've just witnessed.
It isn't that insane - it is just using tabs so it appears wierd when your tab indent < 8. We should just extend our no-tabs checking to cover the CSS too. Regards, Daniel -- |: https://berrange.com -o- https://www.flickr.com/photos/dberrange :| |: https://libvirt.org -o- https://fstop138.berrange.com :| |: https://entangle-photo.org -o- https://www.instagram.com/dberrange :|
On Thu, 2019-04-11 at 12:24 +0100, Daniel P. Berrangé wrote:
On Fri, Apr 05, 2019 at 05:54:41PM +0200, Andrea Bolognani wrote:
On Fri, 2019-04-05 at 16:12 +0100, Daniel P. Berrangé wrote:
@@ -91,4 +92,10 @@ float: none; margin-bottom: 2em; } + #advancedsearch { + margin-top: 4em; + border: 0px; + background: white; + color: black; + } }
Oh boy, what is even going on with indentation in this file? It's one most insane indentation styles I've ever seen. Your additions are entirely consistent with existing code, though, so I'll just look the other way and try to forget what I've just witnessed.
It isn't that insane - it is just using tabs so it appears wierd when your tab indent < 8.
The problem is not that it uses tabs, but that it *mixes* spaces and tabs: <4 spaces>#advancedsearch { <1 tab>margin-top:4em; <1 tab>border: 0px; <1 tab>background: white; <1 tab>color: black; <4 spaces>} Using either tabs or spaces for indentation (not alignment!) is fine in my book, but you should never, *ever* mix the two or you'll end up with, well, the mess above.
We should just extend our no-tabs checking to cover the CSS too.
Sounds good to me! -- Andrea Bolognani / Red Hat / Virtualization
On Fri, Apr 05, 2019 at 05:54:41PM +0200, Andrea Bolognani wrote:
On Fri, 2019-04-05 at 16:12 +0100, Daniel P. Berrangé wrote: [...]
+ } else if (what == "devs") { + form.setAttribute("action", "https://google.com/search"); + newq.setAttribute("name", "q"); + newq.value = "site:redhat.com inurl:/archives/libvir-list " + q.value; + } else if (what == "users") { + form.setAttribute("action", "https://google.com/search"); + newq.setAttribute("name", "q"); + newq.value = "site:redhat.com inurl:/archives/libvirt-users " + q.value; + }
It seems like
site:redhat.com/archives/libvir-list site:redhat.com/archives/libvirt-users
would work just as well, and at least to my eyes that looks less alien that what you have up there. Your version works too, though, so feel free to change it or leave it alone based on your personal preference.
Oh yes, that does work now - in the past it only supported domain name, not path. Regards, Daniel -- |: https://berrange.com -o- https://www.flickr.com/photos/dberrange :| |: https://libvirt.org -o- https://fstop138.berrange.com :| |: https://entangle-photo.org -o- https://www.instagram.com/dberrange :|
participants (2)
-
Andrea Bolognani -
Daniel P. Berrangé