This commit is contained in:
Mark Eaton
2023-07-26 10:17:26 -04:00
4 changed files with 1389 additions and 0 deletions
+21
View File
@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2023 Mark Eaton
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
+516
View File
@@ -0,0 +1,516 @@
<style>
:root {
--kbccblue: #003466;
--kbccorange: #ff4e00;
--text: #111;
}
body {
color: var(--text);
overflow-x: hidden;
}
a,
a:hover {
text-decoration: none;
}
/* style slide out chat */
#lcs_slide_out_button-21944 {
font-size: 1.5em;
}
/* style header */
#header-div {
padding: 30px;
}
/* style the hamburger menu */
#hamburger-container {
float: left;
}
#hamburger,
#hamburger:active {
border: none;
outline: none;
background-color: #fff;
color: var(--kbccblue);
}
#hamburger-ul > li > .searchmenu {
background-color: #fff;
}
#hamburger-ul {
padding: 25px 0;
}
/* have bootstrap dropdowns fade in and out */
.dropdown-menu.fade {
display: block;
opacity: 0;
pointer-events: none;
}
.open > .dropdown-menu.fade {
pointer-events: auto;
opacity: 1;
}
.fade {
-webkit-transition-duration: 5s; /* Safari */
transition-duration: 0.5s;
}
.dropdown:hover .dropdown-menu {
display: block;
}
/* style the login at the top right */
#login-div {
float: right;
padding: 8px 15px 0 0;
color: var(--kbccblue);
font-size: 1.5em;
}
#login-text {
display: inline-block;
vertical-align: -2px;
}
#login-icon {
display: inline-block;
margin-left: 5px;
}
/* style alert */
#corona-alert {
text-align: center;
background-color: #faf870;
padding: 5px 50px;
cursor: pointer;
}
#corona-alert-text {
color: var(--text);
font-size: 1.5em;
}
/* style navbar */
nav.navbar-default.main-nav-container {
background-color: white;
border: none;
font-size: 1.4em;
color: var(--text);
border-radius: 0;
}
.nav .open > a,
.nav .open > a:focus,
.nav .open > a:hover {
background-color: #fff;
}
.nav > li > a:hover {
outline: none;
}
.navbar-default .navbar-nav > li > a {
color: var(--text);
}
#navbar-center {
display: flex;
justify-content: left;
float: none;
}
.ga-main-navbar {
font-size: 1.3em;
}
#dropdownMenu1 {
border-radius: 0;
}
a.searchmenu {
color: var(--text);
}
.highlight-menu-item {
padding: 5px;
}
.highlight-menu-item:hover {
cursor: pointer;
}
/* style background image */
.kbcc-background-image {
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.6) 0%,
rgba(255, 255, 255, 0.6) 100%
),
url("https://libapps.s3.amazonaws.com/accounts/16298/images/library_front_view.jpg");
background-position: 50% 71%;
padding: 20px 0;
border-radius: 5px;
background-size: cover;
margin: -30px 0 30px 0;
}
/* style jumbotron */
.onesearch-jumbotron {
text-align: center;
margin-top: -40px;
}
#onesearch-header {
font-size: 10em;
margin-bottom: 0;
}
.zero-margin {
margin-left: -2px;
margin-right: -2px;
}
.zero-margin {
margin: -2px;
}
/* add flex so that blue box-shadows line up */
#flex-search-form {
display: flex;
flex-direction: row;
justify-content: center;
}
.inherit-height-from-flex {
height: inherit;
}
/* shadow for the search bar */
#blue-border1 {
box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue),
-5px -5px 0 var(--kbccblue), -5px 5px 0 var(--kbccblue);
}
#blue-border2 {
box-shadow: 0 -5px 0 var(--kbccblue), 0 5px 0 var(--kbccblue);
}
#blue-border3 {
box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue),
5px -5px 0 var(--kbccblue), 5px 5px 0 var(--kbccblue);
}
/* style for nav by the jumbotron */
.nav-divs-by-jumbotron {
text-align: center;
padding: 6px;
margin: 6px 0;
color: white;
background-color: var(--kbccblue);
border-radius: 3px;
}
.nav-divs-by-jumbotron > h2 {
font-size: 1.5em;
margin-bottom: 4px;
margin-top: 4px;
}
.nav-divs-by-jumbotron:hover {
background-color: #444;
}
#eq_32886 {
background-color: var(--kbccblue);
border: none;
}
.nav-divs-by-jumbotron:hover > h2 > #eq_32886,
#eq_32886:hover {
background-color: #444;
}
#bookastudyroom {
cursor: pointer;
}
/* style link list */
.link-list {
font-size: 1.7em;
}
/* style the panels with the text content */
.panel > .show-panel {
background-color: var(--kbccblue);
text-align: center;
}
.hide-body-border {
border: none;
box-shadow: none;
}
.glyphicon-panel-title {
font-size: 2em;
}
.content-panel-title {
color: white;
font-size: 2em;
}
.content-panel-title > h2 {
margin: 7px 0;
font-size: 1em;
}
.panel-heading {
padding: 2px;
}
/* style the gallery */
.slick-slide img {
padding: 2px;
max-height: 350px !important;
object-fit: contain;
margin: 0;
}
.s-lib-public-side-header {
display: none;
}
.slick-active {
outline: 0;
}
/* make the slick arrows bigger; adjust margin and padding around big arrows */
.slick-prev:before, .slick-next:before {
font-size: 40px !important;
}
.slick-prev:before {
margin-left: -30px;
}
button.slick-next.slick-arrow, button.slick-prev.slick-arrow {
height: 40px !important;
width: 40px !important;
}
button.slick-next.slick-arrow {
padding-top: 3px;
}
button.slick-prev.slick-arrow {
padding: 3px;
padding-left: 30px;
}
/* style to make all imported boxes floating */
.s-lib-box-title {
display: none;
}
.s-lg-box {
box-shadow: none !important;
}
.s-lib-box .s-lib-box-title {
display: none;
}
.s-lib-box {
box-shadow: none !important;
border: 0 !important;
}
/* style the dropdown menus */
.dropdown-margin {
padding: 20px 0;
}
.bigger-fancy-text {
font-size: 1.2em;
padding: 5px;
}
.bigger-icon {
font-size: 1.5em;
margin-right: 8px;
}
.caret-text {
display: inline-block;
color: var(--kbccblue);
font-weight: bold;
}
.fancy-caret {
display: inline-block;
margin-left: 8px;
color: var(--kbccblue);
}
.open > a > .fancy-caret {
margin-bottom: -4px;
vertical-align: -4px;
display: inline-block;
}
.open > a > .caret-text {
vertical-align: -1px;
}
/* style footer */
#orange-line {
height: 10px;
background-color: var(--kbccorange);
}
#main-blue-footer {
background-color: var(--kbccblue);
color: white;
padding: 30px;
}
.whiteahrefs a:link,
.whiteahrefs a:hover,
.whiteahrefs a:visited,
.whiteahrefs a:active {
color: white;
}
.whiteahrefs a i {
margin: 4px 5px 0 0;
font-size: 1.5em;
}
.whiteahrefs {
margin-top: 10px;
}
#lighthouse-logo > a > img {
max-width: 150px;
}
/* media queries */
@media only screen and (min-width: 1px) {
#library-logo {
max-width: 100%;
max-height: 150px;
}
nav.navbar-default.main-nav-container {
margin-top: -20px;
}
.form-width {
width: 40%;
}
.nav-by-jumbotron {
margin-top: 40px !important;
}
#main-blue-footer {
min-height: 450px;
}
.library-address {
float: left;
}
#cuny-logo {
float: left;
clear: both;
margin-top: 10px;
}
.libapps {
float: left;
clear: left;
}
}
@media only screen and (max-width: 768px) {
#login-text {
display: none;
}
#defineYourSearch {
display: none;
}
}
@media only screen and (min-width: 768px) {
.nav-by-jumbotron {
margin-top: 0 !important;
}
#lighthouse-logo {
display: inline-block;
float: left;
}
#main-blue-footer {
min-height: 210px;
}
.library-address {
display: inline-block;
margin: -10px 30px;
font-size: 1.1em;
}
#cuny-logo {
float: right;
clear: none;
margin: -10px 0;
}
.libapps {
float: right;
clear: both;
}
}
@media only screen and (min-width: 1px) and (max-width: 992px) {
#hamburger-alternative {
display: none;
}
}
@media only screen and (min-width: 992px) {
#header-div {
text-align: center;
}
#hamburger,
#hamburger-ul {
display: none;
}
#library-logo {
max-width: 100%;
max-height: 350px;
}
.form-width {
width: 340px;
}
}
@media only screen and (min-width: 1200px) {
#library-logo {
margin-top: -3px;
}
}
</style>
<!-- scripts to make the Book a Study Room widget run -->
<script src="https://kbcc-cuny.libcal.com/js/equipment.min.js"></script>
<script>
jQuery(function () {
jQuery("#eq_32886, #bookastudyroom").LibCalEquipmentBooking({
iid: 5570,
gid: 32886,
eid: 0,
width: 560,
height: 680,
});
});
</script>
<!-- If browser is pre-ES6, show a warning-->
<script>
window.isES6 = false;
</script>
<script>
<!-- test ES6 functionality -->
// Arrow functions support
() => {};
// Class support
class __ES6FeatureDetectionTest {}
// Object initializer property and method shorthands
let es6a = true;
let es6b = {
es6a,
es6c() {
return true;
},
es6d: [1, 2, 3],
};
// Object destructuring
let { es6c, es6d } = es6b;
// Spread operator
let es6e = [...es6d, 4];
// ternary operator
let es6f = es6a ? "ternary" : "no ternary";
// nullish coalescing
es6a ??= 10;
window.isES6 = true;
</script>
<script type="text/javascript">
window.onload = function () {
<!-- display the error message if feature detection flags old browser -->
if (window.isES6 == false) {
document.getElementById("obsolete_browser_alert").innerHTML =
'<div class="alert alert-danger" style="text-align: center;"><strong>WARNING! Unsupported browser!</strong><br />It looks like you\'re using an old browser.<br />This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge.<br />If you continue with this browser, many parts of this site will not work and you will see unexpected results.</div>';
}
};
</script>
<!-- FontAwesome -->
<script
src="https://kit.fontawesome.com/4c28f38a07.js"
crossorigin="anonymous"
></script>
+407
View File
@@ -0,0 +1,407 @@
<body class="s-lib-public-body">
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-NXHWQX3"
height="0"
width="0"
style="display: none; visibility: hidden"
></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- BEGIN: content -->
<div id="s-lib-public-main" class="s-lib-main container s-lib-side-borders">
<div id="s-lg-index-cols">
<div id="app1">
<!-- vue app -->
<div class="row">
<div id="obsolete_browser_alert"></div>
<div class="col-xs-12" id="header-div">
<div class="dropdown" id="hamburger-container">
<button
class="btn btn-default dropdown-toggle"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="true"
aria-label="Hamburger Menu"
id="hamburger"
>
<i class="fas fa-bars" style="font-size: 2em"></i>
</button>
<ul
class="dropdown-menu fade"
aria-labelledby="hamburger"
id="hamburger-ul"
>
<li>
<a
v-for="item in hamburger"
v-bind:key="item.id"
class="searchmenu"
v-bind:aria-label="item.description"
v-bind:href="item.link"
v-bind:target="item.target_blank"
>
<hamburger-component v-bind:item="item"></hamburger-component>
</a>
</li>
</ul>
</div>
<!-- end of hamburger container -->
<a
href="https://cuny-kb.primo.exlibrisgroup.com/discovery/account?vid=01CUNY_KB:CUNY_KB"
id="login-div"
aria-labelledby="login-text"
>
<div id="login-text">Login</div>
<div id="login-icon"><i class="fas fa-user"></i></div>
</a>
<img
id="library-logo"
class="image-fail"
alt="Kibbee Library logo"
src="https://libapps.s3.amazonaws.com/accounts/16298/images/xsmall-2.jpg"
/>
<div
id="corona-alert"
type="button"
data-toggle="modal"
data-target=".bs-example-modal-sm"
>
<span id="corona-alert-text"
>No fines on KBCC books checked out before the pandemic! Just
return them to any CUNY Library.</span
>
</div>
</div>
<!-- end of header div -->
<!-- Modal -->
<div
class="modal fade bs-example-modal-sm"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel"
>
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content" style="border-radius: 3px">
<div class="modal-body">
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
style="padding: 5px 5px 12px 12px"
>
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Before returning books to another CUNY library, please make
sure you have updated your vaccine information to Cleared4
or checked rules for visiting that campus.
</h4>
</div>
</div>
</div>
</div>
<!-- End of modal -->
</div>
<!-- end of row -->
<div class="row" id="hamburger-alternative">
<div class="col-xs-12">
<navig-component v-bind:navlistofmenus="navlistofmenus"></navig-component>
</div>
<!-- end of col-xs-12 -->
</div>
<!--end of row-->
</div>
<!--end of Vue app1-->
</div>
<div class="container" style="margin-top: 14px">
<div class="row kbcc-background-image">
<div class="col-sm-8">
<div id="app2">
<onesearch-component></onesearch-component>
</div><!-- end of Vue app2 -->
</div>
<div class="col-sm-4">
<div class="nav-by-jumbotron">
<a class="ga-by-jumbotron">
<div class="nav-divs-by-jumbotron" id="bookastudyroom">
<h2><button id="eq_32886">Book A Study Room</button></h2>
</div>
</a>
<a
href="https://library.kbcc.cuny.edu/az.php"
class="ga-by-jumbotron"
>
<div class="nav-divs-by-jumbotron">
<h2>Databases</h2>
</div>
</a>
<a
href="https://library.kbcc.cuny.edu/guides"
class="ga-by-jumbotron"
>
<div class="nav-divs-by-jumbotron">
<h2>Research Guides</h2>
</div>
</a>
<a
href="https://kbcc-cuny.libwizard.com/f/feedback"
class="ga-by-jumbotron"
>
<div class="nav-divs-by-jumbotron">
<h2>Send Us Feedback</h2>
</div>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-7 col-lg-6">
<div class="panel panel-default hide-body-border">
<div class="panel-heading show-panel">
<span class="panel-title content-panel-title">
<h2>Library Links</h2>
</span>
</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-6">
<ul class="link-list">
<li>
<a
href="https://library.kbcc.cuny.edu/ENGLISH24"
class="ga-library-links"
>
How to Use the Library
</a>
</li>
<li>
<a
href="https://library.kbcc.cuny.edu/ebooks"
class="ga-library-links"
>
Find eTextbooks and eBooks
</a>
</li>
<li>
<a
href="https://library.kbcc.cuny.edu/video"
class="ga-library-links"
>
Streaming Video
</a>
</li>
<li>
<a
href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8150765860006129"
class="ga-library-links"
>
Comic Books & Graphic Novels
</a>
</li>
</ul>
</div>
<div class="col-sm-6">
<ul class="link-list">
<li>
<a
href="http://kbcc.ezproxy.cuny.edu:2048/login?url=http://search.ebscohost.com/login.aspx?authtype=ip,uid&custid=s9000138&profile=ehost&defaultdb=a9h"
target="_blank"
class="ga-library-links"
>
Academic Search Complete
</a>
</li>
<li>
<a
href="http://kbcc.ezproxy.cuny.edu:2048/login?url=https://search.proquest.com/usmajordailies/advanced/news/fromDatabasesLayer?accountid=38336"
target="_blank"
class="ga-library-links"
>
US Newspapers
</a>
</li>
<li>
<a
href="http://www.nytimes.com/passes"
target="_blank"
class="ga-library-links"
>
NY Times Free Pass
</a>
</li>
<li>
<a
href="https://library.kbcc.cuny.edu/newarrivals/leisure"
class="ga-library-links"
>
Leisure Reading Collection
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="panel panel-default hide-body-border">
<div class="panel-heading show-panel">
<span class="panel-title content-panel-title">
<h2>Today's Library Hours</h2>
</span>
</div>
<div class="panel-body">{{content_box_29248590}}</div>
</div>
</div>
<div class="col-md-5 col-lg-6">
<div class="panel panel-default hide-body-border">
<div class="panel-heading show-panel">
<span class="panel-title content-panel-title">
<h2>Featured in the Library</h2>
</span>
</div>
<div class="panel-body">{{content_box_25912431}}</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<!-- BEGIN: Page Footer -->
<div id="orange-line"></div>
<div id="main-blue-footer">
<div id="lighthouse-logo">
<a href="https://www.kbcc.cuny.edu">
<img
src="https://libapps.s3.amazonaws.com/accounts/16298/images/Orange_Vector_Mac_Building.png"
alt="Kingsborough Lighthouse logo"
loading="lazy"
/>
</a>
</div>
<div class="library-address">
<div class="whiteahrefs">
<strong>Robert J. Kibbee Library</strong><br />
2001 Oriental Blvd<br />
Brooklyn, NY, 11209<br />
<a href="tel:+1-718-368-5632">718-368-5632</a>
</div>
<div class="whiteahrefs">
<a href="https://kbcc-cuny.libwizard.com/f/reference">
reference.desk@kbcc.cuny.edu
</a>
<br />
<a
aria-label="Twitter"
href="https://twitter.com/KBCCLibrary"
target="_blank"
>
<i aria-hidden="true" class="fab fa-twitter"></i>
</a>
<a
aria-label="Instagram"
href="https://www.instagram.com/kbcclibrary/"
target="_blank"
>
<i aria-hidden="true" class="fab fa-instagram"></i>
</a>
<a
aria-label="Goodreads"
href="https://www.goodreads.com/user/show/51717966-kingsborough-library"
target="_blank"
>
<i aria-hidden="true" class="fab fa-goodreads"></i>
</a>
<a
aria-label="TikTok"
href="https://www.tiktok.com/@kbcclibrary?lang=en"
target="_blank"
>
<i aria-hidden="true" class="fab fa-tiktok"></i>
</a>
<a
aria-label="YouTube"
href="https://www.youtube.com/channel/UCpeJWrnzLXEizw8cMvVp-_Q/videos"
target="_blank"
>
<i aria-hidden="true" class="fab fa-youtube"></i>
</a>
<a
aria-label="Spotify"
href="https://open.spotify.com/user/313lfmvr4ezmkb2mhodzd5ubzg4a"
target="_blank"
>
<i aria-hidden="true" class="fab fa-spotify"></i>
</a>
</div>
</div>
<div id="cuny-logo">
<a href="https://www.cuny.edu" target="_blank">
<img
src="https://libapps.s3.amazonaws.com/accounts/16298/images/CUNYlogo-white.png"
alt="CUNY logo"
loading="lazy"
/>
</a>
</div>
<div class="whiteahrefs libapps">
<a
href="https://kbcc-cuny.libapps.com/libapps/login.php?site_id=2365"
>
Log in to LibApps
</a>
|
<a
href="https://cuny-kb.alma.exlibrisgroup.com/mng/login?auth=SAML"
>
Alma
</a>
</div>
<div style="height: 10px"></div>
</div>
<!-- END: Page Footer -->
</div>
</div>
</div>
<div id="s-lib-alert" title="">
<div id="s-lib-alert-content"></div>
</div>
<div id="s-lib-popover-title" class="hide">
<span class="text-info"><strong>title</strong></span>
<button
type="button"
id="popclose"
class="close"
onclick="jQuery('.s-lib-popover').popover('hide')"
>
&times;
</button>
</div>
<div id="s-lib-popover-content" class="hide">
<i class="fa fa-refresh fa-spin"></i> Loading...
<button class="btn btn-default btn-sm popclose" type="button">Close</button>
</div>
<div id="s-lib-scroll-top" title="Back to Top">
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i
class="fa fa-angle-double-up fa-stack-1x"
style="position: relative; bottom: 2px"
></i>
</span>
</div>
<!-- LibChat widget script -->
<script src="https://kbcc-cuny.libanswers.com/load_chat.php?hash=f7d1629a91e178fd0f799322e803b6e7"></script>
<!-- add Vue scripts -->
<!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> development -->
<script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script><!--production -->
<script
type="text/javascript"
src="https://libapps.s3.amazonaws.com/sites/2365/include/main4.js"
></script>
</body>
+445
View File
@@ -0,0 +1,445 @@
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">
<div class="container-fluid">
<ul class="nav navbar-nav" id="navbar-center">
<li v-for="(navmenu, navkey) in navlistofmenus"
v-bind:key="navmenu.id"
class="dropdown main-nav-dropdown"
>
<a>
<a class="dropdown-toggle ga-main-navbar"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
>
<div class="caret-text">{{ navkey }}</div>
<div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div>
</a>
<ul class="dropdown-menu fade dropdown-margin">
<li>
<a v-for="item in navmenu.data"
v-bind:key="item.id"
class="searchmenu"
v-bind:aria-label="item.description"
v-bind:href="item.link"
v-bind:target="item.target_blank"
>
<div class="bigger-fancy-text">
<i v-bind:class="item.icon" aria-hidden="true"></i>
<strong>{{ item.description }}</strong>
</div>
</a>
</li>
</ul>
</a>
</li>
</ul>
</div>
</nav>`,
props: ["navlistofmenus"],
};
const onesearchComponent = {
template: `<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 }}&nbsp;</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>`,
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,
},
},
};
},
};
const { createApp } = Vue;
const app1 = createApp({
components: {
"navig-component": navigComponent,
"hamburger-component": hamburgerComponent,
},
data() {
return {
hamburger: [
{
link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en",
icon: "fas fa-search fa-fw bigger-icon",
description: "OneSearch",
target_blank: "",
id: 1,
},
{
link: "https://library.kbcc.cuny.edu/az.php",
icon: "fas fa-database fa-fw bigger-icon",
description: "Databases A to Z",
target_blank: "",
id: 2,
},
{
link: "https://library.kbcc.cuny.edu/guides",
icon: "fas fa-telescope fa-fw bigger-icon",
description: "Research Guides",
target_blank: "",
id: 3,
},
{
link: "https://library.kbcc.cuny.edu/faq",
icon: "fas fa-question-circle fa-fw bigger-icon",
description: "FAQ",
target_blank: "",
id: 4,
},
{
link: "https://library.kbcc.cuny.edu/calendar",
icon: "fas fa-clock fa-fw bigger-icon",
description: "Library Hours",
target_blank: "",
id: 5,
},
{
link: "https://library.kbcc.cuny.edu/sitemap",
icon: "fas fa-location-arrow fa-fw bigger-icon",
description: "Site Map",
target_blank: "",
id: 6,
},
],
navlistofmenus: {
"Find It": {
id: 1,
data: [
{
link: "https://library.kbcc.cuny.edu/az.php",
icon: "fas fa-database fa-fw bigger-icon",
description: "Databases A to Z",
target_blank: "",
id: 1,
},
{
link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch?vid=01CUNY_KB:CUNY_KB&search_scope=all",
icon: "fas fa-newspaper fa-fw bigger-icon",
description: "Newspaper Search",
target_blank: "",
id: 2,
},
{
link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&tab=CourseReserves&search_scope=CourseReserves",
icon: "fas fa-cloud-download-alt fa-fw bigger-icon",
description: "Course Reserves",
target_blank: "",
id: 3,
},
{
link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch?vid=01CUNY_KB:CUNY_KB",
icon: "fas fa-book fa-fw bigger-icon",
description: "Search for Specific Journals",
target_blank: "",
id: 4,
},
{
link: "https://library.kbcc.cuny.edu/academicworks",
icon: "fas fa-archive fa-fw bigger-icon",
description: "CUNY Academic Works",
target_blank: "_blank",
id: 5,
},
{
link: "https://www.bkstr.com/kingsboroughccstore/home",
icon: "fas fa-cash-register fa-fw bigger-icon",
description: "KBCC Bookstore",
target_blank: "_blank",
id: 6,
},
],
},
Services: {
id: 2,
data: [
{
link: "http://kbcc.cuny.illiad.oclc.org/illiad/logon.html",
icon: "fas fa-books fa-fw bigger-icon",
description: "Interlibrary Loan",
target_blank: "_blank",
id: 1,
},
{
link: "https://library.kbcc.cuny.edu/libraryservices/informationliteracy",
icon: "fas fa-chalkboard-teacher fa-fw bigger-icon",
description: "Book a Library Instruction Session",
target_blank: "",
id: 2,
},
{
link: "https://library.kbcc.cuny.edu/mediaservices",
icon: "fas fa-photo-video fa-fw bigger-icon",
description: "Media Services",
target_blank: "",
id: 3,
},
{
link: "https://kbcc-cuny.libwizard.com/f/bookrequest",
icon: "fas fa-shopping-basket fa-fw bigger-icon",
description: "Suggest a Book for Purchase",
target_blank: "",
id: 4,
},
{
link: "https://kbcc-cuny.libwizard.com/id/8cdb3f1a787de3c307a8cf5d75cad406",
icon: "fas fa-bookmark fa-fw bigger-icon",
description: "Suggest an Item to Add to Reserves",
target_blank: "",
id: 5,
},
],
},
"About Us": {
id: 3,
data: [
{
link: "https://library.kbcc.cuny.edu/about-us/directory",
icon: "fas fa-address-book fa-fw bigger-icon",
description: "Faculty & Staff Directory",
target_blank: "",
id: 1,
},
{
link: "https://library.kbcc.cuny.edu/newarrivals",
icon: "far fa-mail-bulk fa-fw bigger-icon",
description: "New Arrivals",
target_blank: "",
id: 2,
},
{
link: "https://library.kbcc.cuny.edu/about-us/liaisons",
icon: "fas fa-theater-masks fa-fw bigger-icon",
description: "Subject Liaisons",
target_blank: "",
id: 3,
},
{
link: "https://library.kbcc.cuny.edu/social",
icon: "far fa-hashtag fa-fw bigger-icon",
description: "Social Media",
target_blank: "",
id: 4,
},
],
},
"Location & Hours": {
id: 4,
data: [
{
link: "https://tour.kingsborough.edu/",
icon: "fas fa-map-marked-alt fa-fw bigger-icon",
description: "Campus Map",
target_blank: "",
id: 1,
},
{
link: "https://library.kbcc.cuny.edu/calendar",
icon: "fas fa-clock fa-fw bigger-icon",
description: "Library Hours",
target_blank: "",
id: 2,
},
],
},
Help: {
id: 5,
data: [
{
link: "https://library.kbcc.cuny.edu/askalibrarian",
icon: "fas fa-book-reader fa-fw bigger-icon",
description: "Ask A Librarian",
target_blank: "",
id: 1,
},
{
link: "https://library.kbcc.cuny.edu/faq",
icon: "fas fa-question-circle fa-fw bigger-icon",
description: "FAQ",
target_blank: "",
id: 2,
},
{
link: "https://library.kbcc.cuny.edu/guides",
icon: "fas fa-telescope fa-fw bigger-icon",
description: "Research Guides and Tutorials",
target_blank: "",
id: 3,
},
{
link: "https://library.kbcc.cuny.edu/ENGLISH24",
icon: "fas fa-question fa-fw bigger-icon",
description: "How to Use the Library",
target_blank: "",
id: 4,
},
],
},
},
};
},
});
app1.mount("#app1");
const app2 = createApp({
components: {
"onesearch-component": onesearchComponent,
},
});
app2.mount("#app2");