@internetarchive/ia-book-actions 0.0.24 → 0.0.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/demo/index.html +1 -3
- package/demo/with-bookreader.html +146 -0
- package/package.json +1 -1
- package/src/assets/styles/collapsible-action-group.js +55 -34
- package/src/assets/styles/ia-button.js +74 -32
- package/src/components/collapsible-action-group.js +26 -13
- package/src/core/services/actions-config.js +1 -1
- package/src/core/services/actions-handler/actions-handler.js +1 -3
- package/src/core/services/get-lending-actions.js +0 -2
- package/src/core/services/loan-token-poller.js +6 -17
package/demo/index.html
CHANGED
|
@@ -108,9 +108,7 @@
|
|
|
108
108
|
modalConfig.headerColor = '#d9534f';
|
|
109
109
|
|
|
110
110
|
let lendingBarPostInit = function lendingBarPostInit() {
|
|
111
|
-
setTimeout(function() {
|
|
112
|
-
console.log('executed', 'br.init()');
|
|
113
|
-
}, 100);
|
|
111
|
+
setTimeout(function() {}, 100);
|
|
114
112
|
}
|
|
115
113
|
|
|
116
114
|
// set defaultLendingStatus for unavailable (without borrowables) book
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en-GB">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
|
7
|
+
<style>
|
|
8
|
+
html {
|
|
9
|
+
font-size: 10px;
|
|
10
|
+
/* This is to match petabox's base font size */
|
|
11
|
+
}
|
|
12
|
+
body {
|
|
13
|
+
margin: 0;
|
|
14
|
+
text-align: center;
|
|
15
|
+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
16
|
+
}
|
|
17
|
+
#demo {
|
|
18
|
+
height: 50px;
|
|
19
|
+
}
|
|
20
|
+
ia-book-actions {
|
|
21
|
+
--white: #fff;
|
|
22
|
+
--black: #000;
|
|
23
|
+
--primaryBGColor: var(--black);
|
|
24
|
+
--secondaryBGColor: #222;
|
|
25
|
+
--tertiaryBGColor: #333;
|
|
26
|
+
--primaryTextColor: var(--white);
|
|
27
|
+
--primaryCTAFill: #194880;
|
|
28
|
+
--primaryCTABorder: #c5d1df;
|
|
29
|
+
--secondaryCTAFill: #333;
|
|
30
|
+
--secondaryCTABorder: #999;
|
|
31
|
+
--secondaryCTAFillRGB: 51, 51, 51;
|
|
32
|
+
--primaryErrorCTAFill: #e51c26;
|
|
33
|
+
--primaryErrorCTABorder: #f8c6c8;
|
|
34
|
+
--primaryCTAFillRGB: 25, 72, 128;
|
|
35
|
+
--primaryErrorCTAFillRGB: 229, 28, 38;
|
|
36
|
+
--primaryDisableCTAFill: #767676;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
fieldset {
|
|
40
|
+
width: fit-content;
|
|
41
|
+
margin-top: 50px;
|
|
42
|
+
}
|
|
43
|
+
fieldset legend {
|
|
44
|
+
text-align: left;
|
|
45
|
+
font-size: 12px;
|
|
46
|
+
}
|
|
47
|
+
td {
|
|
48
|
+
color: white;
|
|
49
|
+
font-size: 14px;
|
|
50
|
+
border-radius: 5%;
|
|
51
|
+
display: table-cell;
|
|
52
|
+
text-align: initial;
|
|
53
|
+
margin: 5px 0;
|
|
54
|
+
width: max-content;
|
|
55
|
+
display: block;
|
|
56
|
+
}
|
|
57
|
+
label {
|
|
58
|
+
padding: 10px;
|
|
59
|
+
display: block;
|
|
60
|
+
cursor: pointer;
|
|
61
|
+
margin: 2px;
|
|
62
|
+
background: #4e545a;
|
|
63
|
+
border-radius: 10px;
|
|
64
|
+
}
|
|
65
|
+
input[type="radio"], input[type="checkbox"] {
|
|
66
|
+
margin-top: 0;
|
|
67
|
+
vertical-align: middle;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.initial td {
|
|
71
|
+
float: left;
|
|
72
|
+
margin: 2px;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
body.modal-manager-open {
|
|
76
|
+
overflow: hidden;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
modal-manager[mode='closed'] {
|
|
80
|
+
display: none;
|
|
81
|
+
}
|
|
82
|
+
</style>
|
|
83
|
+
</head>
|
|
84
|
+
|
|
85
|
+
<body>
|
|
86
|
+
<ia-bookreader class="focus-on-child-only" signedin="" fullscreen="">
|
|
87
|
+
<div slot="header">
|
|
88
|
+
<ia-book-actions></ia-book-actions>
|
|
89
|
+
</div>
|
|
90
|
+
<div slot="main">
|
|
91
|
+
<div id="BookReader"></div>
|
|
92
|
+
</div>
|
|
93
|
+
</ia-bookreader>
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
<script type="module">
|
|
97
|
+
/* eslint-disable */
|
|
98
|
+
import '@internetarchive/bookreader';
|
|
99
|
+
import '@internetarchive/bookreader/BookReader/jquery-1.10.1.js';
|
|
100
|
+
import '@internetarchive/bookreader/BookReader/BookReader.js';
|
|
101
|
+
import '../src/ia-book-actions.js';
|
|
102
|
+
import {
|
|
103
|
+
defaultLendingStatus,
|
|
104
|
+
canBrowseAndBorrow,
|
|
105
|
+
} from '../src/assets/data/lending-get-status-service.js';
|
|
106
|
+
import { ModalConfig } from '@internetarchive/modal-manager';
|
|
107
|
+
|
|
108
|
+
const userid = '@neeraj-archive';
|
|
109
|
+
const identifier = 'naturalhistoryof00unse_4111';
|
|
110
|
+
let bwbPurchaseUrl = 'https://www.betterworldbooks.com/product/detail/cambridge-ancient-hist-v04-0521044863';
|
|
111
|
+
|
|
112
|
+
let iaBookActions = document.querySelector('ia-book-actions');
|
|
113
|
+
|
|
114
|
+
// for debugging
|
|
115
|
+
window.iaBookActions = iaBookActions;
|
|
116
|
+
|
|
117
|
+
const modalConfig = new ModalConfig();
|
|
118
|
+
modalConfig.headerColor = '#d9534f';
|
|
119
|
+
|
|
120
|
+
let lendingBarPostInit = function lendingBarPostInit() {
|
|
121
|
+
setTimeout(function() {
|
|
122
|
+
console.log('executed', 'br.init()');
|
|
123
|
+
}, 100);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
// set defaultLendingStatus for unavailable (without borrowables) book
|
|
127
|
+
iaBookActions.userid = userid;
|
|
128
|
+
iaBookActions.identifier = identifier;
|
|
129
|
+
iaBookActions.bookTitle = 'Contemporary Black biography. Volume 39 : profiles from the interContemporary Black biography. Volume 39';
|
|
130
|
+
iaBookActions.lendingStatus = canBrowseAndBorrow;
|
|
131
|
+
iaBookActions.bwbPurchaseUrl = '';
|
|
132
|
+
iaBookActions.modalConfig = modalConfig;
|
|
133
|
+
iaBookActions.lendingBarPostInit = lendingBarPostInit;
|
|
134
|
+
iaBookActions.tokenDelay = 2000; // 2 seconds
|
|
135
|
+
iaBookActions.returnUrl = 'https://openlibrary.org';
|
|
136
|
+
|
|
137
|
+
let lendingStatus1 = iaBookActions.lendingStatus;
|
|
138
|
+
|
|
139
|
+
const manifest = await fetch('https://ia801302.us.archive.org/BookReader/BookReaderJSIA.php?id=goody&itemPath=/29/items/goody&server=ia801302.us.archive.org&format=jsonp&subPrefix=goody&requestUri=/details/goody/mode/1up%3Fview%3Dtheater%26ui%3Dembed%26wrapper%3Dfalse');
|
|
140
|
+
|
|
141
|
+
console.log('manifest ****', manifest).then(res => res.json());
|
|
142
|
+
</script>
|
|
143
|
+
|
|
144
|
+
</div>
|
|
145
|
+
</body>
|
|
146
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
|
|
3
|
+
const whiteColor = css`var(--white, #fff)`;
|
|
4
|
+
const blackColor = css`var(--primaryBGColor, #000)`;
|
|
5
|
+
const dropdownBGColor = css`var(--iaBookActionsDropdownBGColor, #2d2d2d)`;
|
|
6
|
+
|
|
3
7
|
export default css`
|
|
4
8
|
:host {
|
|
5
9
|
display: inline-flex;
|
|
@@ -14,30 +18,54 @@ export default css`
|
|
|
14
18
|
align-items: center;
|
|
15
19
|
}
|
|
16
20
|
.action-buttons .ia-button {
|
|
17
|
-
|
|
18
|
-
align-items: center;
|
|
19
|
-
vertical-align: middle;
|
|
21
|
+
margin: 0;
|
|
20
22
|
height: 3.5rem;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
}
|
|
24
|
+
.action-buttons .desktop {
|
|
25
|
+
background-color: ${whiteColor};
|
|
26
|
+
border-radius: 10px;
|
|
27
|
+
}
|
|
28
|
+
.action-buttons .desktop.purchase {
|
|
29
|
+
margin-left: 5px;
|
|
30
|
+
}
|
|
31
|
+
.action-buttons .mobile.purchase.dark {
|
|
32
|
+
padding-left: 0;
|
|
33
|
+
}
|
|
34
|
+
.primary {
|
|
35
|
+
background-color: ${whiteColor};
|
|
25
36
|
}
|
|
26
37
|
.primary,
|
|
27
38
|
.secondary {
|
|
28
39
|
position: relative;
|
|
40
|
+
border-radius: 5px;
|
|
41
|
+
margin: 0 3px;
|
|
29
42
|
}
|
|
30
43
|
.primary .initial {
|
|
31
|
-
border-radius:
|
|
44
|
+
border-radius: 4px 0 0 4px;
|
|
32
45
|
margin-right: 0;
|
|
33
46
|
}
|
|
47
|
+
.primary svg {
|
|
48
|
+
vertical-align: middle;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.secondary .ia-button.purchase {
|
|
52
|
+
padding: 2px 10px 2px 35px;
|
|
53
|
+
position: relative;
|
|
54
|
+
display: inline-block;
|
|
55
|
+
vertical-align: middle;
|
|
56
|
+
}
|
|
57
|
+
.secondary .ia-button.exit-admin {
|
|
58
|
+
background-color: ${blackColor};
|
|
59
|
+
border: 1px solid ${whiteColor};
|
|
60
|
+
}
|
|
61
|
+
|
|
34
62
|
.dropdown-content {
|
|
35
63
|
position: absolute;
|
|
36
64
|
min-width: 14rem;
|
|
37
65
|
margin: 0;
|
|
38
66
|
padding: 0;
|
|
39
|
-
background:
|
|
40
|
-
border-radius:
|
|
67
|
+
background: ${dropdownBGColor};
|
|
68
|
+
border-radius: 4px;
|
|
41
69
|
border: 1px solid var(--primaryCTABorder);
|
|
42
70
|
top: 3.4rem;
|
|
43
71
|
left: 50%;
|
|
@@ -45,15 +73,15 @@ export default css`
|
|
|
45
73
|
transform: translateX(-50%);
|
|
46
74
|
}
|
|
47
75
|
.dropdown-content li {
|
|
48
|
-
color:
|
|
76
|
+
color: ${blackColor};
|
|
49
77
|
list-style: none;
|
|
50
78
|
height: 3rem;
|
|
51
79
|
}
|
|
52
80
|
.dropdown-content .ia-button {
|
|
53
81
|
background: none;
|
|
82
|
+
color: ${whiteColor};
|
|
54
83
|
border: none;
|
|
55
84
|
box-sizing: border-box;
|
|
56
|
-
display: block;
|
|
57
85
|
width: 100%;
|
|
58
86
|
text-align: left;
|
|
59
87
|
height: 3rem;
|
|
@@ -61,11 +89,14 @@ export default css`
|
|
|
61
89
|
padding: 0.6rem 1.2rem;
|
|
62
90
|
margin: 0;
|
|
63
91
|
}
|
|
92
|
+
.dropdown-content .ia-button:is(:focus-visible, :hover) {
|
|
93
|
+
background: unset;
|
|
94
|
+
}
|
|
64
95
|
.dropdown-content li .ia-button {
|
|
65
96
|
border-radius: 0;
|
|
66
97
|
}
|
|
67
98
|
.dropdown-content li .ia-button:hover {
|
|
68
|
-
background:
|
|
99
|
+
background: ${whiteColor};
|
|
69
100
|
color: rgb(45, 45, 45);
|
|
70
101
|
}
|
|
71
102
|
.dropdown-content li:first-child .ia-button {
|
|
@@ -78,6 +109,15 @@ export default css`
|
|
|
78
109
|
.dropdown-content .purchase:hover svg g {
|
|
79
110
|
fill: black;
|
|
80
111
|
}
|
|
112
|
+
.dropdown-content .purchase {
|
|
113
|
+
padding-left: 35px;
|
|
114
|
+
margin: 0;
|
|
115
|
+
}
|
|
116
|
+
.dropdown-content .purchase small {
|
|
117
|
+
display: initial;
|
|
118
|
+
font-size: 1.4rem;
|
|
119
|
+
}
|
|
120
|
+
|
|
81
121
|
.ia-button.down-arrow {
|
|
82
122
|
border-radius: 0 0.4rem 0.4rem 0;
|
|
83
123
|
padding: 0 0.6rem;
|
|
@@ -93,28 +133,18 @@ export default css`
|
|
|
93
133
|
}
|
|
94
134
|
.open {
|
|
95
135
|
display: block;
|
|
96
|
-
z-index:
|
|
136
|
+
z-index: 2;
|
|
97
137
|
}
|
|
98
138
|
.visible {
|
|
99
139
|
display: inline-block;
|
|
100
140
|
}
|
|
101
141
|
.btn:hover,
|
|
102
142
|
.dropdown:hover .btn {
|
|
103
|
-
background-color:
|
|
143
|
+
background-color: ${whiteColor};
|
|
104
144
|
}
|
|
105
|
-
|
|
106
145
|
a {
|
|
107
146
|
text-decoration: none;
|
|
108
147
|
}
|
|
109
|
-
.primary svg {
|
|
110
|
-
vertical-align: middle;
|
|
111
|
-
}
|
|
112
|
-
.secondary .ia-button.purchase {
|
|
113
|
-
padding: 2px 10px 2px 35px;
|
|
114
|
-
position: relative;
|
|
115
|
-
display: inline-block;
|
|
116
|
-
vertical-align: middle;
|
|
117
|
-
}
|
|
118
148
|
.purchase small {
|
|
119
149
|
display: block;
|
|
120
150
|
font-size: 1rem;
|
|
@@ -124,19 +154,10 @@ export default css`
|
|
|
124
154
|
left: 10px;
|
|
125
155
|
top: 20%;
|
|
126
156
|
}
|
|
127
|
-
.dropdown-content .purchase {
|
|
128
|
-
padding-left: 35px;
|
|
129
|
-
margin: 0;
|
|
130
|
-
}
|
|
131
|
-
.dropdown-content .purchase small {
|
|
132
|
-
display: initial;
|
|
133
|
-
font-size: 1.4rem;
|
|
134
|
-
}
|
|
135
157
|
.unavailable {
|
|
136
158
|
opacity: 0.7;
|
|
137
159
|
pointer-events: none;
|
|
138
160
|
}
|
|
139
|
-
|
|
140
161
|
.disabled {
|
|
141
162
|
opacity: 0.8;
|
|
142
163
|
pointer-events: none;
|
|
@@ -1,65 +1,107 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
|
|
3
|
+
const whiteColor = css`var(--white, #fff)`;
|
|
4
|
+
const disabledButtonFillColor = css`var(--primaryDisableCTAFill, #767676)`;
|
|
5
|
+
const disabledButtonBorderColor = css`var(--secondaryCTABorder, #999)`;
|
|
6
|
+
|
|
7
|
+
const primaryButtonFillColor = css`var(--primaryCTAFill, #194880)`;
|
|
8
|
+
const primaryButtonFillColorRGB = css`var(--primaryCTAFillRGB, 25, 72, 128)`; // RBG format of --primaryCTAFill
|
|
9
|
+
const primaryButtonBorderColor = css`var(--primaryCTABorder, #c5d1df)`;
|
|
10
|
+
|
|
11
|
+
const dangerButtonFillColor = css`var(--primaryErrorCTAFill, #d9534f)`;
|
|
12
|
+
const dangerButtonFillColorRGB = css`var(--primaryErrorCTAFillRGB, 229, 28, 38)`; // RBG format of --primaryErrorCTAFill
|
|
13
|
+
const dangerButtonBorderColor = css`var(--primaryErrorCTABorder, #d43f3a)`;
|
|
14
|
+
|
|
15
|
+
const darkButtonFillColor = css`var(--secondaryCTAFill, #333)`;
|
|
16
|
+
const darkButtonFillColorRGB = css`var(--secondaryCTAFillRGB, 51, 51, 51)`; // RBG format of --secondaryCTAFill
|
|
17
|
+
const darkButtonBorderColor = css`var(--primaryCTABorder, #979797)`;
|
|
18
|
+
|
|
19
|
+
const warningButtonBGColor = css`#ee8950`;
|
|
20
|
+
const warningButtonBorderColor = css`#ec7939`;
|
|
21
|
+
|
|
3
22
|
export default css`
|
|
4
23
|
.ia-button {
|
|
5
24
|
min-height: 3rem;
|
|
6
|
-
border: none;
|
|
7
|
-
outline: none;
|
|
8
25
|
cursor: pointer;
|
|
9
|
-
color:
|
|
26
|
+
color: ${whiteColor};
|
|
10
27
|
line-height: normal;
|
|
11
28
|
border-radius: 0.4rem;
|
|
12
|
-
text-align: center;
|
|
13
|
-
vertical-align: middle;
|
|
14
29
|
font-size: 1.4rem;
|
|
15
30
|
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
16
|
-
display: inline-block;
|
|
17
|
-
padding: 0.85rem 1.2rem;
|
|
18
31
|
border: 1px solid transparent;
|
|
19
32
|
white-space: nowrap;
|
|
20
33
|
appearance: auto;
|
|
21
34
|
box-sizing: border-box;
|
|
35
|
+
display: flex;
|
|
36
|
+
align-items: center;
|
|
37
|
+
transition: all 0.1s ease 0s;
|
|
38
|
+
vertical-align: middle;
|
|
39
|
+
padding: 0 1rem;
|
|
40
|
+
outline-color: ${whiteColor};
|
|
41
|
+
outline-offset: -4px;
|
|
42
|
+
user-select: none;
|
|
43
|
+
text-decoration: none;
|
|
44
|
+
width: fit-content;
|
|
22
45
|
-webkit-user-select: none;
|
|
23
46
|
-moz-user-select: none;
|
|
24
47
|
-ms-user-select: none;
|
|
25
48
|
-o-user-select: none;
|
|
26
|
-
user-select: none;
|
|
27
49
|
}
|
|
28
|
-
.ia-button:
|
|
29
|
-
|
|
50
|
+
.ia-button:focus-visible {
|
|
51
|
+
outline-style: double;
|
|
52
|
+
}
|
|
53
|
+
.ia-button:disabled {
|
|
30
54
|
cursor: not-allowed;
|
|
31
|
-
background-color:
|
|
32
|
-
border: 1px solid
|
|
33
|
-
color: var(--primaryTextColor, #fff);
|
|
55
|
+
background-color: ${disabledButtonFillColor};
|
|
56
|
+
border: 1px solid ${disabledButtonBorderColor};
|
|
34
57
|
}
|
|
35
58
|
.ia-button.transparent {
|
|
36
59
|
background-color: transparent;
|
|
37
60
|
}
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
61
|
+
.ia-button.warning {
|
|
62
|
+
background-color: ${warningButtonBGColor}
|
|
63
|
+
border-color: ${warningButtonBorderColor};
|
|
41
64
|
}
|
|
65
|
+
|
|
42
66
|
.ia-button.primary {
|
|
43
|
-
background-color:
|
|
44
|
-
border-color:
|
|
67
|
+
background-color: ${primaryButtonFillColor};
|
|
68
|
+
border-color: ${primaryButtonBorderColor};
|
|
45
69
|
}
|
|
46
|
-
.ia-button.
|
|
47
|
-
color:
|
|
48
|
-
|
|
49
|
-
|
|
70
|
+
.ia-button.primary:hover {
|
|
71
|
+
background-color: rgba(${primaryButtonFillColorRGB}, 0.9);
|
|
72
|
+
}
|
|
73
|
+
.ia-button.primary:focus-visible {
|
|
74
|
+
background-color: rgba(${primaryButtonFillColorRGB}, 0.8);
|
|
75
|
+
}
|
|
76
|
+
.ia-button.primary:active {
|
|
77
|
+
background-color: rgba(${primaryButtonFillColorRGB}, 0.7);
|
|
50
78
|
}
|
|
79
|
+
|
|
51
80
|
.ia-button.danger {
|
|
52
|
-
color:
|
|
53
|
-
|
|
54
|
-
border-color: #d43f3a;
|
|
81
|
+
background-color: ${dangerButtonFillColor};
|
|
82
|
+
border-color: ${dangerButtonBorderColor};
|
|
55
83
|
}
|
|
56
|
-
.ia-button.
|
|
57
|
-
color:
|
|
58
|
-
|
|
59
|
-
|
|
84
|
+
.ia-button.danger:hover {
|
|
85
|
+
background-color: rgba(${dangerButtonFillColorRGB}, 0.9);
|
|
86
|
+
}
|
|
87
|
+
.ia-button.danger:focus-visible {
|
|
88
|
+
background-color: rgba(${dangerButtonFillColorRGB}, 0.8);
|
|
89
|
+
}
|
|
90
|
+
.ia-button.danger:active {
|
|
91
|
+
background-color: rgba(${dangerButtonFillColorRGB}, 0.7);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.ia-button.dark {
|
|
95
|
+
background-color: ${darkButtonFillColor};
|
|
96
|
+
border-color: ${darkButtonBorderColor};
|
|
97
|
+
}
|
|
98
|
+
.ia-button.dark:hover {
|
|
99
|
+
background-color: rgba(${darkButtonFillColorRGB}, 0.9);
|
|
100
|
+
}
|
|
101
|
+
.ia-button.dark:focus-visible {
|
|
102
|
+
background-color: rgba(${darkButtonFillColorRGB}, 0.8);
|
|
60
103
|
}
|
|
61
|
-
.ia-button.
|
|
62
|
-
background-color:
|
|
63
|
-
border-color: #f8c6c8;
|
|
104
|
+
.ia-button.dark:active {
|
|
105
|
+
background-color: rgba(${darkButtonFillColorRGB}, 0.7);
|
|
64
106
|
}
|
|
65
107
|
`;
|
|
@@ -50,7 +50,10 @@ export class CollapsibleActionGroup extends ActionsHandler {
|
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
updated(changed) {
|
|
53
|
-
if (
|
|
53
|
+
if (
|
|
54
|
+
(changed.has('width') || changed.has('disabled')) &&
|
|
55
|
+
this.isBelowTabletContainer
|
|
56
|
+
) {
|
|
54
57
|
this.resetActions();
|
|
55
58
|
}
|
|
56
59
|
}
|
|
@@ -148,23 +151,25 @@ export class CollapsibleActionGroup extends ActionsHandler {
|
|
|
148
151
|
}
|
|
149
152
|
|
|
150
153
|
/**
|
|
151
|
-
* Render action as a link for secondary actions like admin,
|
|
154
|
+
* Render action as a link for secondary actions like admin, printdisability links.
|
|
152
155
|
* @param { Object } action
|
|
153
156
|
* @param { Boolean } initialButton
|
|
154
157
|
* @returns { HTMLElement }
|
|
155
158
|
*/
|
|
156
159
|
renderActionLink(action, initialButton = false) {
|
|
157
|
-
return html`<
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
160
|
+
return html`<span class="${this.getDeviceType} ${action.className}">
|
|
161
|
+
<a
|
|
162
|
+
class="ia-button ${action.className} ${initialButton ? 'initial' : ''}"
|
|
163
|
+
href="${action.url}"
|
|
164
|
+
target=${action.target}
|
|
165
|
+
@click=${() => {
|
|
166
|
+
this.clickHandler(action.id, action.analyticsEvent);
|
|
167
|
+
}}
|
|
168
|
+
>
|
|
169
|
+
${action.id === 'purchaseBook' ? purchaseIcon : ''} ${action.text}
|
|
170
|
+
<small>${action.subText}</small>
|
|
171
|
+
</a>
|
|
172
|
+
</span>`;
|
|
168
173
|
}
|
|
169
174
|
|
|
170
175
|
/**
|
|
@@ -255,6 +260,14 @@ export class CollapsibleActionGroup extends ActionsHandler {
|
|
|
255
260
|
return this.width <= tabletContainerWidth;
|
|
256
261
|
}
|
|
257
262
|
|
|
263
|
+
/**
|
|
264
|
+
* get device type as per container width
|
|
265
|
+
* @returns { String } mobile | desktop
|
|
266
|
+
*/
|
|
267
|
+
get getDeviceType() {
|
|
268
|
+
return this.isBelowTabletContainer ? 'mobile' : 'desktop';
|
|
269
|
+
}
|
|
270
|
+
|
|
258
271
|
/**
|
|
259
272
|
* toggle dropdown and its icon state
|
|
260
273
|
*/
|
|
@@ -226,7 +226,7 @@ export default class ActionsConfig {
|
|
|
226
226
|
text: message,
|
|
227
227
|
url: URLHelper.getBackHref(),
|
|
228
228
|
target: '_self',
|
|
229
|
-
className: '
|
|
229
|
+
className: 'exit-admin',
|
|
230
230
|
analyticsEvent: {
|
|
231
231
|
category: this.analyticsCategories.adminAccess,
|
|
232
232
|
action: this.analyticsActions.doneBorrowing,
|
|
@@ -22,9 +22,7 @@ export default class ActionsHandler extends LitElement {
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
sendEvent(eventCategory, eventAction) {
|
|
25
|
-
|
|
26
|
-
console?.log('Book action: ', { eventCategory, eventAction });
|
|
27
|
-
window?.archive_analytics?.send_event_no_sampling(
|
|
25
|
+
window?.archive_analytics?.send_event(
|
|
28
26
|
eventCategory,
|
|
29
27
|
eventAction,
|
|
30
28
|
`identifier=${this.identifier}`
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import ActionsHandlerService from './actions-handler/actions-handler-service.js';
|
|
2
2
|
import * as Cookies from './doc-cookies.js';
|
|
3
|
-
import { analyticsCategories } from '../config/analytics-event-and-category.js';
|
|
4
3
|
|
|
5
4
|
/**
|
|
6
5
|
* This class is used to create loan token for borrowed books
|
|
@@ -14,7 +13,6 @@ export class LoanTokenPoller {
|
|
|
14
13
|
this.successCallback = successCallback; // callback function to be called after loan token is created
|
|
15
14
|
this.errorCallback = errorCallback; // callback function to be called after loan token is created
|
|
16
15
|
this.pollerDelay = pollerDelay; // value in ms (1000 ms = 1 sec)
|
|
17
|
-
this.analyticsCategories = analyticsCategories;
|
|
18
16
|
|
|
19
17
|
this.loanTokenInterval = undefined;
|
|
20
18
|
this.enableBookAccess();
|
|
@@ -71,14 +69,11 @@ export class LoanTokenPoller {
|
|
|
71
69
|
}
|
|
72
70
|
}
|
|
73
71
|
|
|
74
|
-
sendEvent(eventCategory, eventAction
|
|
75
|
-
|
|
76
|
-
console?.log('Book action: ', { eventCategory, eventAction, extraParams });
|
|
77
|
-
window?.archive_analytics?.send_event_no_sampling(
|
|
72
|
+
sendEvent(eventCategory, eventAction) {
|
|
73
|
+
window?.archive_analytics?.send_event(
|
|
78
74
|
eventCategory,
|
|
79
75
|
eventAction,
|
|
80
|
-
`identifier=${this.identifier}
|
|
81
|
-
extraParams
|
|
76
|
+
`identifier=${this.identifier}`
|
|
82
77
|
);
|
|
83
78
|
}
|
|
84
79
|
|
|
@@ -88,17 +83,11 @@ export class LoanTokenPoller {
|
|
|
88
83
|
identifier: this.identifier,
|
|
89
84
|
action,
|
|
90
85
|
error: data => {
|
|
91
|
-
window?.Sentry?.captureMessage(
|
|
92
|
-
handleLoanTokenPoller error, identifier:${this.identifier}, borrowType:${this.borrowType}, interval:${this.loanTokenInterval}
|
|
93
|
-
`);
|
|
94
|
-
this.sendEvent(this.analyticsCategories.browse, 'LoanTokenError', {
|
|
95
|
-
identifier: this.identifier,
|
|
96
|
-
isInitial: isInitial,
|
|
97
|
-
borrowType: this.borrowType,
|
|
98
|
-
interval: this.loanTokenInterval,
|
|
99
|
-
});
|
|
86
|
+
window?.Sentry?.captureMessage('handleLoanTokenPoller error');
|
|
100
87
|
this.disconnectedInterval(); // stop token fetch api
|
|
101
88
|
this.errorCallback({ detail: { action, data } });
|
|
89
|
+
// send LendingServiceError to GA
|
|
90
|
+
this.sendEvent('LendingServiceLoanError', action);
|
|
102
91
|
},
|
|
103
92
|
success: () => {
|
|
104
93
|
if (isInitial) this.successCallback();
|