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="container" style="margin-top: 14px">
|
||||||
<div class="row kbcc-background-image">
|
<div class="row kbcc-background-image">
|
||||||
<div class="col-sm-8">
|
<div class="col-sm-8">
|
||||||
<form
|
<onesearch-component></onesearch-component>
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-4">
|
<div class="col-sm-4">
|
||||||
<div class="nav-by-jumbotron">
|
<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 = {
|
const navigComponent = {
|
||||||
template:
|
template:
|
||||||
`<nav class="navbar navbar-default main-nav-container">
|
`<nav class="navbar navbar-default main-nav-container">
|
||||||
@@ -40,13 +49,86 @@ const navigComponent = {
|
|||||||
</nav>`
|
</nav>`
|
||||||
}
|
}
|
||||||
|
|
||||||
const hamburgerComponent = {
|
const onesearchComponent {
|
||||||
template:
|
`<form class="form-inline onesearch-jumbotron"
|
||||||
`<div class="bigger-fancy-text">
|
name="searchPrimoForm1"
|
||||||
<i v-bind:class="item.icon" aria-hidden="true"></i>
|
ref="oneSearchForm"
|
||||||
<strong>{{ item.description }}</strong>
|
role="search"
|
||||||
</div>`,
|
method="get"
|
||||||
props: ['item']
|
: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
|
const { createApp } = Vue
|
||||||
@@ -54,10 +136,76 @@ const { createApp } = Vue
|
|||||||
createApp({
|
createApp({
|
||||||
components: {
|
components: {
|
||||||
'navig-component': navigComponent,
|
'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() {
|
data() {
|
||||||
return {
|
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: [
|
hamburger: [
|
||||||
{
|
{
|
||||||
link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en",
|
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