[libvirt] [PATCH 0/2] 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. Daniel P. Berrangé (2): docs: move javascript logic into a standalone file docs: add advanced search capabilities docs/libvirt.css | 40 ++++++++++++++++++++++++++++ docs/main.js | 69 ++++++++++++++++++++++++++++++++++++++++++++++++ docs/mobile.css | 7 +++++ docs/page.xsl | 50 ++++++++++------------------------- 4 files changed, 130 insertions(+), 36 deletions(-) create mode 100644 docs/main.js -- 2.20.1
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/main.js | 25 +++++++++++++++++++++++++ docs/page.xsl | 35 +++-------------------------------- 2 files changed, 28 insertions(+), 32 deletions(-) create mode 100644 docs/main.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..679e3f6822 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}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 14:30 +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/main.js | 25 +++++++++++++++++++++++++ docs/page.xsl | 35 +++-------------------------------- 2 files changed, 28 insertions(+), 32 deletions(-) create mode 100644 docs/main.js
Don't we need to add the new file to docs/Makefile.am so that it's included in release archives and... Possibly installed? I'm actually unclear on how we handle this kind of content :) The change itself looks good though. -- Andrea Bolognani / Red Hat / Virtualization
On Fri, Apr 05, 2019 at 04:35:27PM +0200, Andrea Bolognani wrote:
On Fri, 2019-04-05 at 14:30 +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/main.js | 25 +++++++++++++++++++++++++ docs/page.xsl | 35 +++-------------------------------- 2 files changed, 28 insertions(+), 32 deletions(-) create mode 100644 docs/main.js
Don't we need to add the new file to docs/Makefile.am so that it's included in release archives and... Possibly installed?
Oooh, pre-existing bug ! Doesn't affect libvirt.org, but does affect normal installs. 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/libvirt.css | 40 ++++++++++++++++++++++++++++++++++++++++ docs/main.js | 44 ++++++++++++++++++++++++++++++++++++++++++++ docs/mobile.css | 7 +++++++ docs/page.xsl | 15 +++++++++++---- 4 files changed, 102 insertions(+), 4 deletions(-) diff --git a/docs/libvirt.css b/docs/libvirt.css index ed797d5d91..c53825019a 100644 --- a/docs/libvirt.css +++ b/docs/libvirt.css @@ -542,3 +542,43 @@ 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 index 723e2fb16d..2c4443de90 100644 --- a/docs/main.js +++ b/docs/main.js @@ -22,4 +22,48 @@ function pageload() { } } }); + + /* 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"); + form.setAttribute("action", "https://google.com/search"); + + newq = document.createElement("input"); + newq.setAttribute("type", "hidden"); + newq.setAttribute("name", "q"); + 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") { + newq.value = "site:libvirt.org " + q.value; + } else if (what == "wiki") { + newq.value = "site:wiki.libvirt.org " + q.value; + } else if (what == "lists") { + newq.value = "site:redhat.com inurl:/archives/libvir " + q.value; + } + + document.body.appendChild(form); + form.submit(); + + return false; } 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 679e3f6822..39ac095e53 100644 --- a/docs/page.xsl +++ b/docs/page.xsl @@ -126,11 +126,18 @@ </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="whatlists" value="lists"/><label for="whatlists">Mailing lists</label></span> + </div> </div> </div> <div id="footer"> -- 2.20.1
On Fri, 2019-04-05 at 14:30 +0100, Daniel P. Berrangé wrote:
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.
I'm sure if the fallback doesn't work one of the many libvirt developers who configured their browsers to block JavaScript will complain swiftly and loudly :) [...]
+#search:hover div.advancedsearch { + display: table; +} + +
Extra line here. [...]
+ for (var i = 0; i < whats.length; i++) { + if (whats[i].checked) { + what = whats[i].value; + break; + } + }
Alignment is out of whack here (and also in the pseudo-switch below). [...]
+ } else if (what == "wiki") { + newq.value = "site:wiki.libvirt.org " + q.value;
MediaWiki has its own integrated search functionality, eg. https://wiki.libvirt.org/index.php?search=foo Do you think we should still use Google for it?
+ } else if (what == "lists") { + newq.value = "site:redhat.com inurl:/archives/libvir " + q.value;
This doesn't seem to work the way you'd expect. When I search site:redhat.com inurl:/archives/libvirt-users/ "macvtap and tagged VLANs to the VM" I get a few hits[1], but if I change it to site:redhat.com inurl:/archives/libvir "macvtap and tagged VLANs to the VM" then I get zero hits. If you don't feel like digging into why that's the case, I'm okay with either searching libvir-list only or having separate checkboxes for libvir-list and libvirt-users. Other than what mentioned above, and with the disclaimer that I'm not an expert in Web development, the implementation seem to work and I couldn't spot anything obviously wrong with it. [1] More recent threads, for whatever reason, don't seem to pop up among the search results. -- Andrea Bolognani / Red Hat / Virtualization
On Fri, Apr 05, 2019 at 04:53:49PM +0200, Andrea Bolognani wrote:
On Fri, 2019-04-05 at 14:30 +0100, Daniel P. Berrangé wrote:
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.
I'm sure if the fallback doesn't work one of the many libvirt developers who configured their browsers to block JavaScript will complain swiftly and loudly :)
[...]
+#search:hover div.advancedsearch { + display: table; +} + +
Extra line here.
[...]
+ for (var i = 0; i < whats.length; i++) { + if (whats[i].checked) { + what = whats[i].value; + break; + } + }
Alignment is out of whack here (and also in the pseudo-switch below).
[...]
+ } else if (what == "wiki") { + newq.value = "site:wiki.libvirt.org " + q.value;
MediaWiki has its own integrated search functionality, eg.
https://wiki.libvirt.org/index.php?search=foo
Do you think we should still use Google for it?
Yeah, for consistency when we should use the mediawiki search, since we've styled the two sites to look the same for the navbar.
+ } else if (what == "lists") { + newq.value = "site:redhat.com inurl:/archives/libvir " + q.value;
This doesn't seem to work the way you'd expect.
When I search
site:redhat.com inurl:/archives/libvirt-users/ "macvtap and tagged VLANs to the VM"
I get a few hits[1], but if I change it to
site:redhat.com inurl:/archives/libvir "macvtap and tagged VLANs to the VM"
then I get zero hits.
Odd that substring works for libvir-list, i guess they must give the match because the index breaking "libvir-list" on the "-"
If you don't feel like digging into why that's the case, I'm okay with either searching libvir-list only or having separate checkboxes for libvir-list and libvirt-users.
Separate checkboxes is easy enough. 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é