add onesearch-component
This commit is contained in:
Mark Eaton
+1
-124
@@ -120,130 +120,7 @@
|
||||
<div class="container" style="margin-top: 14px">
|
||||
<div class="row kbcc-background-image">
|
||||
<div class="col-sm-8">
|
||||
<form
|
||||
class="form-inline onesearch-jumbotron"
|
||||
name="searchPrimoForm1"
|
||||
role="search"
|
||||
method="get"
|
||||
action="https://cuny-kb.primo.exlibrisgroup.com/discovery/search"
|
||||
onsubmit="addPrimoQuery();"
|
||||
enctype="application/x-www-form-urlencoded; charset=utf-8"
|
||||
id="formToAppendInputsTo"
|
||||
>
|
||||
<!-- default is "everything" option suggested from OLS widget builder -->
|
||||
<input name="vid" value="01CUNY_KB:CUNY_KB" type="hidden" />
|
||||
<input
|
||||
name="tab"
|
||||
value="Everything"
|
||||
type="hidden"
|
||||
id="tabSetting"
|
||||
/>
|
||||
<input
|
||||
name="search_scope"
|
||||
value="IZ_CI_AW"
|
||||
type="hidden"
|
||||
id="SearchScopeSetting"
|
||||
/>
|
||||
<input name="mode" value="basic" type="hidden" />
|
||||
<input name="highlight" value="true" type="hidden" />
|
||||
<input name="displayMode" value="full" type="hidden" />
|
||||
<input name="bulkSize" value="10" type="hidden" />
|
||||
<input name="dum" value="true" type="hidden" />
|
||||
<input name="displayField" value="all" type="hidden" />
|
||||
<input name="pcAvailabiltyMode" value="false" type="hidden" />
|
||||
<input name="query" id="primoQuery" type="hidden" />
|
||||
<h1 id="onesearch-header">
|
||||
<a
|
||||
href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en"
|
||||
>
|
||||
<img
|
||||
class="image-fail onesearchsubmit"
|
||||
src="https://libapps.s3.amazonaws.com/accounts/16298/images/onesearch_logo.png"
|
||||
alt="OneSearch"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
<div class="form-group" id="flex-search-form">
|
||||
<div class="dropdown input-group zero-margin" id="blue-border1">
|
||||
<button
|
||||
class="btn btn-default dropdown-toggle"
|
||||
type="button"
|
||||
id="dropdownMenu1"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="true"
|
||||
aria-label="Define Your Search"
|
||||
>
|
||||
<span id="defineYourSearch">Define Your Search </span>
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul
|
||||
class="dropdown-menu fade dropdown-margin"
|
||||
aria-labelledby="dropdownMenu1"
|
||||
>
|
||||
<li>
|
||||
<a class="searchmenu" onclick="customizeSearch('Books')">
|
||||
<div class="highlight-menu-item bigger-fancy-text">
|
||||
<strong>Books</strong>
|
||||
</div>
|
||||
</a>
|
||||
<a class="searchmenu" onclick="customizeSearch('Articles')">
|
||||
<div class="highlight-menu-item bigger-fancy-text">
|
||||
<strong>Articles (Peer reviewed)</strong>
|
||||
</div>
|
||||
</a>
|
||||
<a class="searchmenu" onclick="customizeSearch('Reserves')">
|
||||
<div class="highlight-menu-item bigger-fancy-text">
|
||||
<strong>Course reserves</strong>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
class="searchmenu"
|
||||
onclick="customizeSearch('Newspapers')"
|
||||
>
|
||||
<div class="highlight-menu-item bigger-fancy-text">
|
||||
<strong>Newspapers and magazines</strong>
|
||||
</div>
|
||||
</a>
|
||||
<a class="searchmenu" onclick="customizeSearch('Journals')">
|
||||
<div class="highlight-menu-item bigger-fancy-text">
|
||||
<strong>Journals</strong>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&lang=en&mode=advanced"
|
||||
class="searchmenu"
|
||||
>
|
||||
<div class="highlight-menu-item bigger-fancy-text">
|
||||
<strong>Advanced search</strong>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li></li>
|
||||
</ul>
|
||||
</div>
|
||||
<label class="sr-only" for="primoQueryTemp">Search terms</label>
|
||||
<div class="input-group zero-margin form-width" id="blue-border2">
|
||||
<input
|
||||
class="form-control form-width inherit-height-from-flex"
|
||||
name="queryTemp"
|
||||
id="primoQueryTemp"
|
||||
type="search"
|
||||
value=""
|
||||
placeholder="Enter search term here"
|
||||
/>
|
||||
</div>
|
||||
<div class="input-group zero-margin" id="blue-border3">
|
||||
<input
|
||||
type="submit"
|
||||
class="btn btn-default form-control onesearchsubmit inherit-height-from-flex"
|
||||
value="Search"
|
||||
onclick="return addPrimoQuery(event);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<onesearch-component></onesearch-component>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="nav-by-jumbotron">
|
||||
|
||||
+156
-8
@@ -1,3 +1,12 @@
|
||||
const hamburgerComponent = {
|
||||
template:
|
||||
`<div class="bigger-fancy-text">
|
||||
<i v-bind:class="item.icon" aria-hidden="true"></i>
|
||||
<strong>{{ item.description }}</strong>
|
||||
</div>`,
|
||||
props: ['item']
|
||||
}
|
||||
|
||||
const navigComponent = {
|
||||
template:
|
||||
`<nav class="navbar navbar-default main-nav-container">
|
||||
@@ -40,13 +49,86 @@ const navigComponent = {
|
||||
</nav>`
|
||||
}
|
||||
|
||||
const hamburgerComponent = {
|
||||
template:
|
||||
`<div class="bigger-fancy-text">
|
||||
<i v-bind:class="item.icon" aria-hidden="true"></i>
|
||||
<strong>{{ item.description }}</strong>
|
||||
</div>`,
|
||||
props: ['item']
|
||||
const onesearchComponent {
|
||||
`<form class="form-inline onesearch-jumbotron"
|
||||
name="searchPrimoForm1"
|
||||
ref="oneSearchForm"
|
||||
role="search"
|
||||
method="get"
|
||||
:action="selectedItem.baseUrl"
|
||||
enctype="application/x-www-form-urlencoded; charset=utf-8"
|
||||
>
|
||||
<!-- default is "everything" option suggested from OLS widget builder -->
|
||||
<div v-if="selectedItem.input" v-html="selectedItem.input"></div>
|
||||
<input name="vid" value="01CUNY_KB:CUNY_KB" type="hidden" />
|
||||
<input name="tab" :value="selectedItem.tab" type="hidden" />
|
||||
<input name="search_scope" :value="selectedItem.searchScope" type="hidden" />
|
||||
<input name="mode" value="basic" type="hidden" />
|
||||
<input name="highlight" value="true" type="hidden" />
|
||||
<input name="displayMode" value="full" type="hidden" />
|
||||
<input name="bulkSize" value="10" type="hidden" />
|
||||
<input name="dum" value="true" type="hidden" />
|
||||
<input name="displayField" value="all" type="hidden" />
|
||||
<input name="pcAvailabiltyMode" value="false" type="hidden" />
|
||||
<input name="query" ref="primoQueryString" type="hidden" />
|
||||
<h1 id="onesearch-header">
|
||||
<a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en">
|
||||
<img class="image-fail onesearchsubmit" src="https://libapps.s3.amazonaws.com/accounts/16298/images/onesearch_logo.png" alt="OneSearch" />
|
||||
</a>
|
||||
</h1>
|
||||
<div class="form-group" id="flex-search-form">
|
||||
<div class="dropdown input-group zero-margin" id="blue-border1" ref="blueBorder1">
|
||||
<button class="btn btn-default dropdown-toggle"
|
||||
type="button"
|
||||
id="dropdownMenu1"
|
||||
ref="oneSearchMenu"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="true"
|
||||
aria-label="Define Your Search"
|
||||
>
|
||||
<span id="defineYourSearch">{{ displayedItem }} </span>
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu fade dropdown-margin" aria-labelledby="dropdownMenu1">
|
||||
<li>
|
||||
<a v-for="(item, itemName) in materialType"
|
||||
:key="item.id"
|
||||
class="searchmenu"
|
||||
@click="selectDropdown(item, itemName)"
|
||||
>
|
||||
<div class="highlight-menu-item bigger-fancy-text">
|
||||
<strong>{{ item.fullName }}</strong>
|
||||
</div>
|
||||
</a>
|
||||
<a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&lang=en&mode=advanced" class="searchmenu">
|
||||
<div class="highlight-menu-item bigger-fancy-text">
|
||||
<strong>Advanced Search</strong>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<label class="sr-only" for="primoQueryTemp">Search terms</label>
|
||||
<div class="input-group zero-margin form-width" id="blue-border2">
|
||||
<input class="form-control form-width inherit-height-from-flex"
|
||||
name="queryTemp"
|
||||
id="primoQueryTemp"
|
||||
ref="primoQueryTempString"
|
||||
type="search"
|
||||
v-model="searchString"
|
||||
:placeholder="placeholderString"
|
||||
/>
|
||||
</div>
|
||||
<div class="input-group zero-margin" id="blue-border3">
|
||||
<input type="submit"
|
||||
class="btn btn-default form-control onesearchsubmit inherit-height-from-flex"
|
||||
value="Search"
|
||||
@click.stop.prevent="submitSearch"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>`
|
||||
}
|
||||
|
||||
const { createApp } = Vue
|
||||
@@ -54,10 +136,76 @@ const { createApp } = Vue
|
||||
createApp({
|
||||
components: {
|
||||
'navig-component': navigComponent,
|
||||
'hamburger-component': hamburgerComponent
|
||||
'hamburger-component': hamburgerComponent,
|
||||
'onesearch-componet': onesearchComponent
|
||||
},
|
||||
methods: {
|
||||
selectDropdown(item, itemName) {
|
||||
this.displayedItem = itemName; // swap in current item at the top of the dropdown
|
||||
this.selectedItem = item; // store the data from the dropdown selection
|
||||
this.placeholderString = 'Enter search term here';
|
||||
},
|
||||
submitSearch() {
|
||||
if (this.displayedItem === 'Define Your Search') {
|
||||
this.placeholderString = 'Please make a selection';
|
||||
this.searchString = ''; // remove the search string
|
||||
if (!this.$refs.blueBorder1.classList.contains('open')) { // if the dropdown is not open
|
||||
this.$refs.oneSearchMenu.click(); // open the dropdown
|
||||
}
|
||||
} else {
|
||||
this.$refs.primoQueryString.value = `any,contains,${this.$refs.primoQueryTempString.value.replace(/[,]/g, ' ')}`; // vueified OLS widget code
|
||||
this.$refs.oneSearchForm.submit(); // submit the form
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedItem: {}, // initialize the data from the dropdown selection
|
||||
searchString: '', // initialize an empty search string
|
||||
placeholderString: 'Enter search term here', // initialize the placeholder
|
||||
displayedItem: 'Define Your Search', // the text displayed a the top of the OneSearch dropdown
|
||||
materialType: {
|
||||
Books: {
|
||||
fullName: 'Books',
|
||||
baseUrl: 'https://cuny-kb.primo.exlibrisgroup.com/discovery/search',
|
||||
tab: 'Everything',
|
||||
searchScope: 'IZ_CI_AW',
|
||||
input: '<input name="facet" value="rtype,include,books" type="hidden" />',
|
||||
id: 1,
|
||||
},
|
||||
Articles: {
|
||||
fullName: 'Articles (Peer reviewed)',
|
||||
baseUrl: 'https://cuny-kb.primo.exlibrisgroup.com/discovery/search',
|
||||
tab: 'Everything',
|
||||
searchScope: 'IZ_CI_AW',
|
||||
input: '<input name="mfacet" value="rtype,include,articles,1" type="hidden" /><input name="facet" value="tlevel,include,peer_reviewed" type="hidden" />',
|
||||
id: 2,
|
||||
},
|
||||
Reserves: {
|
||||
fullName: 'Course reserves',
|
||||
baseUrl: 'https://cuny-kb.primo.exlibrisgroup.com/discovery/search',
|
||||
tab: 'CourseReserves',
|
||||
searchScope: 'CourseReserves',
|
||||
input: '',
|
||||
id: 3,
|
||||
},
|
||||
Newspapers: {
|
||||
fullName: 'Newspapers and Magazines',
|
||||
baseUrl: 'https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch',
|
||||
tab: 'Everything',
|
||||
searchScope: 'IZ_CI_AW',
|
||||
input: '',
|
||||
id: 4,
|
||||
},
|
||||
Journals: {
|
||||
fullName: 'Journals',
|
||||
baseUrl: 'https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch',
|
||||
tab: 'jsearch_slot',
|
||||
searchScope: 'IZ_CI_AW',
|
||||
input: '',
|
||||
id: 5,
|
||||
},
|
||||
},
|
||||
hamburger: [
|
||||
{
|
||||
link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en",
|
||||
|
||||
Reference in New Issue
Block a user