Skip to content
This repository was archived by the owner on May 14, 2024. It is now read-only.

Commit c621fa7

Browse files
barnabyalterbarnabyalter
committed
First commit
0 parents  commit c621fa7

File tree

7 files changed

+209
-0
lines changed

7 files changed

+209
-0
lines changed

‎MIT-LICENSE‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
Copyright 2018 NYU Division of Libraries
2+
3+
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:
4+
5+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6+
7+
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.

‎README.md‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
# primo-explore-search-bar-sub-menu
2+
3+
## Description
4+
5+
Add a nav bar underneath the search bar to provide additional links in the primo-explore UI.
6+
7+
### Screenshot
8+
9+
![screenshot](screenshot.png)
10+
11+
## Installation
12+
13+
1. Assuming you've installed and are using [primo-explore-devenv](https://github.com/ExLibrisGroup/primo-explore-devenv).
14+
15+
2. Navigate to your template/central package root directory. For example:
16+
```
17+
cd primo-explore/custom/MY_VIEW_ID
18+
```
19+
3. If you do not already have a package.json file in this directory, create one:
20+
```
21+
npm init -y
22+
```
23+
4. Install this package:
24+
```
25+
npm install primo-explore-search-bar-sub-menu --save-dev
26+
```
27+
28+
## Usage
29+
30+
Once installed, inject `searchBarSubMenu` as a dependency:
31+
32+
```js
33+
let app = angular.module('viewCustom', ['searchBarSubMenu'])
34+
```
35+
36+
**Note:** If you're using the --browserify build option, you will need to first import the module with:
37+
38+
```js
39+
import 'primo-explore-search-bar-sub-menu';
40+
```
41+
42+
Then add the `search-bar-sub-menu` directive to the `prmSearchBarAfter` component:
43+
44+
```js
45+
app.component('prmSearchBarAfter', {
46+
template: '<search-bar-sub-menu></search-bar-sub-menu>'
47+
})
48+
```
49+
50+
### Config
51+
52+
You'll need to configure the module by passing it an array of objects as an angular `constant`:
53+
54+
| name | type | usage |
55+
|------|-------------|--------|
56+
| `cssClasses` | string | extra css classes to put on the buttons, i.e. 'button-over-dark' if your background color is dark |
57+
| `name` | string | the text that will appear as the button link |
58+
| `description` | string | for the aria label |
59+
| `action` | string | url for the link. always opens in a new window. |
60+
| `icon` | object | defines the icon for the link. must be chosen from <https://material.io/icons/>. you need to specify both the name of the action "set" (see link) and the icon itself, in the form "ic_person_outline_24px". note that all icons do not work so you may have to experiment some |
61+
| `show_xs` | boolean | true is you want to continue to show button text in xs screens and only show the icons. false by default |
62+
63+
### Translations
64+
65+
You can use translations to access back office text by wrapping the value in curly braces, e.g. `{nui.menu.librarycard}`. Anything that works in the primo templates link this `<span translate="nyu.menu.librarycard"></span>` will work if it's available in the current scope.
66+
67+
### Styles
68+
69+
Change the background color of the menu bar:
70+
71+
```css
72+
search-bar-sub-menu div.search-bar-sub-menu {
73+
background-color: green !important;
74+
}
75+
```
76+
77+
Change the padding between the search bar the menu bar, these are the default values:
78+
79+
```css
80+
prm-search-bar {
81+
padding-bottom: 58.5px;
82+
}
83+
.__sm prm-search-bar {
84+
padding-bottom: 49.5px;
85+
}
86+
.__xs prm-search-bar {
87+
padding-bottom: 36pxs;
88+
}
89+
```
90+
91+
Where `36px` is the default height of the menu bar.
92+
93+
### Example
94+
95+
```js
96+
app.constant('searchBarSubMenuItems',
97+
[
98+
{
99+
name: "Back to Primo Classic",
100+
description: "Back to Primo Classic",
101+
action: "http://primo.school.edu/primo_library/libweb/action/search.do?vid=" + viewName,
102+
icon: {
103+
set: 'navigation',
104+
icon: 'ic_arrow_back_24px'
105+
},
106+
show_xs: true,
107+
cssClasses: 'button-over-dark'
108+
},
109+
{
110+
name: "Library Hours",
111+
description: "Library Hours",
112+
action: "https://school.edu/library-hours",
113+
icon: {
114+
set: 'av',
115+
icon: 'ic_av_timer_24px'
116+
},
117+
cssClasses: 'button-over-dark'
118+
}
119+
]
120+
);
121+
122+
```

‎css/custom1.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
prm-search-bar {
2+
padding-bottom: 58.5px;
3+
}
4+
.__sm prm-search-bar {
5+
padding-bottom: 49.5px;
6+
}
7+
.__xs prm-search-bar {
8+
padding-bottom: 36px;
9+
}
10+
search-bar-sub-menu ul {
11+
margin: 0;
12+
}
13+
search-bar-sub-menu ul li {
14+
display: inline;
15+
list-style: none;
16+
padding: 0;
17+
}
18+
search-bar-sub-menu div.search-bar-sub-menu {
19+
background-color: #ccd0d5;
20+
position: absolute;
21+
bottom: 0;
22+
left: 0;
23+
width: 100%;
24+
height: 36px;
25+
}
26+
search-bar-sub-menu .md-button.md-small {
27+
font-size: .75em;
28+
min-width: 42px;
29+
}

‎index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
require('./js/search-bar-sub-menu.module.js')
2+
module.exports = 'searchBarSubMenu'

‎js/search-bar-sub-menu.module.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
angular
2+
.module('searchBarSubMenu', [])
3+
.controller('searchBarSubMenuController', ['searchBarSubMenuItems', '$scope', '$filter', function(items, $scope, $filter) {
4+
this.$onInit = () => {
5+
$scope.items = items;
6+
}
7+
$scope.translate = (original) => {
8+
return original.replace(/\{(.+)\}/g, (match, p1) => $filter('translate')(p1));
9+
}
10+
$scope.goToUrl = (url) => {
11+
window.open(url, '_blank');
12+
}
13+
}])
14+
.component('searchBarSubMenu', {
15+
controller: 'searchBarSubMenuController',
16+
template: `<div class="layout-align-end-center layout-row flex search-bar-sub-menu">
17+
<ul>
18+
<li ng-repeat="item in items">
19+
<button aria-label="{{ translate(item.description) }}" ng-click="goToUrl(translate(item.action))" class="button-with-icon zero-margin md-button md-small {{item.cssClasses}}" type="button">
20+
<md-tooltip md-direction="bottom" md-delay="500">{{ translate(item.description) }}</md-tooltip><prm-icon style="z-index:1" icon-type="svg" svg-icon-set="{{item.icon.set}}" icon-definition="{{item.icon.icon}}"></prm-icon>
21+
<span class="search-bar-sub-menu-item" ng-class="(item.show_xs) ? '' : 'hide-xs'">{{ translate(item.name) }}</span>
22+
</button>
23+
</li>
24+
</ul>
25+
</div>`
26+
27+
});

‎package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "primo-explore-search-bar-sub-menu",
3+
"version": "1.0.0",
4+
"description": "Add a nav bar underneath the search bar to provide additional links in the primo-explore UI.",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/nyulibraries/primo-explore-search-bar-sub-menu.git"
12+
},
13+
"keywords": [
14+
"primo-explore"
15+
],
16+
"author": "Barnaby Alter",
17+
"license": "MIT",
18+
"bugs": {
19+
"url": "https://github.com/nyulibraries/primo-explore-search-bar-sub-menu/issues"
20+
},
21+
"homepage": "https://github.com/nyulibraries/primo-explore-search-bar-sub-menu#readme"
22+
}

‎screenshot.png‎

46.2 KB
Loading

0 commit comments

Comments
 (0)