Add Library Search form styles for radios and checkboxes

[imcbride]

The Library is switching from Summon to Ebsco for a default search provider and has some new markup for this which I've adapted to our design here:

<script src="https://support.ebsco.com/eit/scripts/ebscohostsearch.js" type="text/javascript"></script>
<form class="ebscohostCustomSearchBox" action="" onsubmit="return ebscoHostSearchGo(this);" method="post" style="overflow:hidden;">
  <input id="ebscohostwindow" name="ebscohostwindow" type="hidden" value="1" />
  <input id="ebscohosturl" name="ebscohosturl" type="hidden" value="http://search.ebscohost.com/login.aspx?direct=true&scope=site&type=0&site=eds-live&lang=en" />
  <input id="ebscohostsearchsrc" name="ebscohostsearchsrc" type="hidden" value="db" />
  <input id="ebscohostsearchmode" name="ebscohostsearchmode" type="hidden" value="+" />
  <input id="ebscohostkeywords" name="ebscohostkeywords" type="hidden" value="" />
  <div class="form-group">
    <label for="lib-summon-search">Search Everything</label>
    <div class="input-group">
      <input id="ebscohostsearchtext" class="form-control" name="ebscohostsearchtext" type="text" size="40" placeholder="Enter a keyword...">
      <button type="submit" class="button button--primary"> Search </button>
    </div>
    <div class="input-group">
      <input class="radio" type="radio" name="searchFieldSelector" id="guidedField_0" value="" checked="checked" />
      <label class="label" for="guidedField_0"> Keyword</label>
      <input class="radio" type="radio" name="searchFieldSelector" id="guidedField_1" value="TI" />
      <label class="label" for="guidedField_1"> Title</label>
      <input class="radio" type="radio" name="searchFieldSelector" id="guidedField_2" value="AU" />
      <label class="label" for="guidedField_2"> Author</label>
    </div>
    <div id="limiterblock" class="input-group" style="display:none;">
            <div id="limitertitle">Limit Your Results</div>

            <div class="limiter" style="display:none;">
                <input type="checkbox" class="form-control" id="chkFullText" name="chkFullText"  />
                <label for="chkFullText">Full Text</label>
            </div>

            <div class="limiter" style="display:none;">
                <input type="checkbox" class="form-control" id="chkLibraryCollection" name="chkLibraryCollection"  />
                <label for="chkLibraryCollection">Available in Library Collection</label>
            </div>

            <div class="limiter" style="display:none;">
                <input type="checkbox" class="form-control" id="chkPeerReviewed" name="chkPeerReviewed"  />
                <label for="chkPeerReviewed">Peer Reviewed</label>
            </div>

            <div class="limiter" style="display:none;">
                <input type="checkbox" class="form-control" id="chkCatalogOnly" name="chkCatalogOnly"  />
                <label for="chkCatalogOnly">Catalog Only</label>
            </div>

            <div class="limiter" style="display:none;">
                <input type="checkbox" class="form-control" id="chkIROnly" name="chkIROnly"  />
                <label for="chkIROnly">Institutional Repository Only</label>
            </div>

        </div>
  </div>
</form>

In Drupal, the script is added through a backend process so that it gets properly aggregated and cached, but I've added the raw tag at the top here for clarity. Here's a test site with it applied: http://saw.middlebury.edu/~imcbride/library/

As you can see, we need some styles for the radio buttons. In the markup above, there is also a hidden div with some limiting checkbox fields. These are set to not display and nothing in the JavaScript references them, so I have a question out to the librarians about whether we need to include them, but I've done so here just in case.

[imcbride]

RE: the limiter fields with “display:none”. Those shouldn’t appear. The widget code comes from EBSCO’s widget builder and I noticed that when you uncheck the unwanted features, it still leaves them in the code, so you end up with the “display:none” stuff crowding the code. On a similar note, I’m waiting for to see if they powers that be even want the “keyword, title, or author” radio buttons, or whether they want it to be as simple as the Summon one. For now, just the Keyword, Title, Author should show up.

[zebapy]

Here's what I recommend for the checkbox markup https://github.com/middlebury/midd-frontend/blob/279d592b50eb9c4509826e45b563fd2db13ce38e/src/templates/partials/lib-search-tabs.twig#L26-L48