@internetarchive/bookreader 5.0.0-25-02 → 5.0.0-28-remove-url-defaults
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/.nvmrc +1 -0
- package/BookReader/BookReader.js +1 -1
- package/BookReader/BookReader.js.map +1 -1
- package/BookReader/bookreader-component-bundle.js +2 -2
- package/BookReader/bookreader-component-bundle.js.map +1 -1
- package/BookReader/plugins/plugin.search.js +1 -1
- package/BookReader/plugins/plugin.search.js.map +1 -1
- package/BookReader/plugins/plugin.tts.js.map +1 -1
- package/BookReader/plugins/plugin.url.js +1 -1
- package/BookReader/plugins/plugin.url.js.map +1 -1
- package/BookReaderDemo/demo-internetarchive.html +86 -4
- package/CHANGELOG.md +11 -0
- package/package.json +1 -1
- package/src/BookNavigator/bookmarks/ia-bookmarks.js +1 -0
- package/src/BookNavigator/volumes/volumes-provider.js +41 -9
- package/src/BookNavigator/volumes/volumes.js +14 -3
- package/src/BookReader.js +102 -64
- package/src/plugins/search/plugin.search.js +1 -0
- package/src/plugins/tts/FestivalTTSEngine.js +1 -1
- package/src/plugins/url/UrlPlugin.js +184 -0
- package/src/plugins/{plugin.url.js → url/plugin.url.js} +24 -2
- package/tests/jest/BookReader.keyboard.test.js +190 -0
- package/tests/jest/BookReader.test.js +1 -1
- package/tests/jest/plugins/url/UrlPlugin.test.js +175 -0
- package/tests/jest/plugins/{plugin.url.test.js → url/plugin.url.test.js} +3 -2
- package/tests/karma/BookNavigator/volumes/volumes-provider.test.js +6 -6
- package/webpack.config.js +1 -1
@@ -0,0 +1,184 @@
|
|
1
|
+
export class UrlPlugin {
|
2
|
+
constructor(options = {}) {
|
3
|
+
this.bookReaderOptions = options;
|
4
|
+
|
5
|
+
// the canonical order of elements is important in the path and query string
|
6
|
+
this.urlSchema = [
|
7
|
+
{ name: 'page', position: 'path', default: 'n0' },
|
8
|
+
{ name: 'mode', position: 'path', default: '2up' },
|
9
|
+
{ name: 'search', position: 'path', deprecated_for: 'q' },
|
10
|
+
{ name: 'q', position: 'query_param' },
|
11
|
+
{ name: 'sort', position: 'query_param' },
|
12
|
+
{ name: 'view', position: 'query_param' },
|
13
|
+
{ name: 'admin', position: 'query_param' },
|
14
|
+
];
|
15
|
+
|
16
|
+
this.urlState = {};
|
17
|
+
this.urlMode = this.bookReaderOptions.urlMode || 'hash';
|
18
|
+
this.urlHistoryBasePath = this.bookReaderOptions.urlHistoryBasePath || '/';
|
19
|
+
this.urlLocationPollId = null;
|
20
|
+
this.oldLocationHash = null;
|
21
|
+
this.oldUserHash = null;
|
22
|
+
}
|
23
|
+
|
24
|
+
/**
|
25
|
+
* Parse JSON object URL state to string format
|
26
|
+
* Arrange path names in an order that it is positioned on the urlSchema
|
27
|
+
* @param {Object} urlState
|
28
|
+
* @returns {string}
|
29
|
+
*/
|
30
|
+
urlStateToUrlString(urlState) {
|
31
|
+
const searchParams = new URLSearchParams();
|
32
|
+
const pathParams = {};
|
33
|
+
|
34
|
+
Object.keys(urlState).forEach(key => {
|
35
|
+
let schema = this.urlSchema.find(schema => schema.name === key);
|
36
|
+
if (schema?.deprecated_for) {
|
37
|
+
schema = this.urlSchema.find(schemaKey => schemaKey.name === schema.deprecated_for);
|
38
|
+
}
|
39
|
+
if (schema?.position == 'path') {
|
40
|
+
pathParams[schema?.name] = urlState[key];
|
41
|
+
} else {
|
42
|
+
searchParams.append(schema?.name || key, urlState[key]);
|
43
|
+
}
|
44
|
+
});
|
45
|
+
|
46
|
+
const strPathParams = this.urlSchema
|
47
|
+
.filter(s => s.position == 'path')
|
48
|
+
.map(schema => pathParams[schema.name] ? `${schema.name}/${pathParams[schema.name]}` : '')
|
49
|
+
.join('/');
|
50
|
+
|
51
|
+
// replace consecutive slashes with a single slash + remove trailing slashes
|
52
|
+
const strStrippedTrailingSlash = `${strPathParams.replace(/\/+/g, '/').replace(/\/+$/, '')}`;
|
53
|
+
const concatenatedPath = `${strStrippedTrailingSlash}?${searchParams.toString()}`;
|
54
|
+
return searchParams.toString() ? concatenatedPath : `${strStrippedTrailingSlash}`;
|
55
|
+
}
|
56
|
+
|
57
|
+
/**
|
58
|
+
* Parse string URL and add it in the current urlState
|
59
|
+
* Example:
|
60
|
+
* /page/n7/mode/2up => {page: 'n7', mode: '2up'}
|
61
|
+
* /page/n7/mode/2up/search/hello => {page: 'n7', mode: '2up', q: 'hello'}
|
62
|
+
* @param {string} urlString
|
63
|
+
* @returns {object}
|
64
|
+
*/
|
65
|
+
urlStringToUrlState(urlString) {
|
66
|
+
const urlState = {};
|
67
|
+
|
68
|
+
// Fetch searchParams from given {str}
|
69
|
+
// Note: whole URL path is needed for URL parsing
|
70
|
+
const urlPath = new URL(urlString, 'http://example.com');
|
71
|
+
const urlSearchParamsObj = Object.fromEntries(urlPath.searchParams.entries());
|
72
|
+
const splitUrlMatches = urlPath.pathname.match(/[^\\/]+\/[^\\/]+/g);
|
73
|
+
const urlStrSplitSlashObj = splitUrlMatches ? Object.fromEntries(splitUrlMatches.map(x => x.split('/'))) : {};
|
74
|
+
|
75
|
+
const doesKeyExists = (_object, _key) => {
|
76
|
+
return Object.keys(_object).some(value => value == _key);
|
77
|
+
};
|
78
|
+
|
79
|
+
// Add path objects to urlState
|
80
|
+
this.urlSchema
|
81
|
+
.filter(schema => schema.position == 'path')
|
82
|
+
.forEach(schema => {
|
83
|
+
const hasPropertyKey = doesKeyExists(urlStrSplitSlashObj, schema.name);
|
84
|
+
const hasDeprecatedKey = doesKeyExists(schema, 'deprecated_for') && hasPropertyKey;
|
85
|
+
|
86
|
+
if (hasDeprecatedKey) {
|
87
|
+
urlState[schema.deprecated_for] = urlStrSplitSlashObj[schema.name];
|
88
|
+
return;
|
89
|
+
}
|
90
|
+
|
91
|
+
if (hasPropertyKey) {
|
92
|
+
urlState[schema.name] = urlStrSplitSlashObj[schema.name];
|
93
|
+
return;
|
94
|
+
}
|
95
|
+
});
|
96
|
+
|
97
|
+
// Add searchParams to urlState
|
98
|
+
Object.entries(urlSearchParamsObj).forEach(([key, value]) => {
|
99
|
+
urlState[key] = value;
|
100
|
+
});
|
101
|
+
|
102
|
+
return urlState;
|
103
|
+
}
|
104
|
+
|
105
|
+
/**
|
106
|
+
* Add or update key-value to the urlState
|
107
|
+
* @param {string} key
|
108
|
+
* @param {string} val
|
109
|
+
*/
|
110
|
+
setUrlParam(key, value) {
|
111
|
+
this.urlState[key] = value;
|
112
|
+
|
113
|
+
this.pushToAddressBar();
|
114
|
+
}
|
115
|
+
|
116
|
+
/**
|
117
|
+
* Delete key-value to the urlState
|
118
|
+
* @param {string} key
|
119
|
+
*/
|
120
|
+
removeUrlParam(key) {
|
121
|
+
delete this.urlState[key];
|
122
|
+
|
123
|
+
this.pushToAddressBar();
|
124
|
+
}
|
125
|
+
|
126
|
+
/**
|
127
|
+
* Get key-value from the urlState
|
128
|
+
* @param {string} key
|
129
|
+
* @return {string}
|
130
|
+
*/
|
131
|
+
getUrlParam(key) {
|
132
|
+
return this.urlState[key];
|
133
|
+
}
|
134
|
+
|
135
|
+
/**
|
136
|
+
* Push URL params to addressbar
|
137
|
+
*/
|
138
|
+
pushToAddressBar() {
|
139
|
+
const urlStrPath = this.urlStateToUrlString(this.urlState);
|
140
|
+
const concatenatedPath = urlStrPath !== '/' ? urlStrPath : '';
|
141
|
+
if (this.urlMode == 'history') {
|
142
|
+
if (window.history && window.history.replaceState) {
|
143
|
+
const newUrlPath = `${this.urlHistoryBasePath}${concatenatedPath}`;
|
144
|
+
window.history.replaceState({}, null, newUrlPath);
|
145
|
+
}
|
146
|
+
} else {
|
147
|
+
window.location.replace('#' + concatenatedPath);
|
148
|
+
}
|
149
|
+
this.oldLocationHash = urlStrPath;
|
150
|
+
}
|
151
|
+
|
152
|
+
/**
|
153
|
+
* Get the url and check if it has changed
|
154
|
+
* If it was changeed, update the urlState
|
155
|
+
*/
|
156
|
+
listenForHashChanges() {
|
157
|
+
this.oldLocationHash = window.location.hash.substr(1);
|
158
|
+
if (this.urlLocationPollId) {
|
159
|
+
clearInterval(this.urlLocationPollId);
|
160
|
+
this.urlLocationPollId = null;
|
161
|
+
}
|
162
|
+
|
163
|
+
// check if the URL changes
|
164
|
+
const updateHash = () => {
|
165
|
+
const newFragment = window.location.hash.substr(1);
|
166
|
+
const hasFragmentChange = newFragment != this.oldLocationHash;
|
167
|
+
|
168
|
+
if (!hasFragmentChange) { return; }
|
169
|
+
|
170
|
+
this.urlState = this.urlStringToUrlState(newFragment);
|
171
|
+
};
|
172
|
+
this.urlLocationPollId = setInterval(updateHash, 500);
|
173
|
+
}
|
174
|
+
|
175
|
+
/**
|
176
|
+
* Will read either the hash or URL and return the bookreader fragment
|
177
|
+
*/
|
178
|
+
pullFromAddressBar (location = window.location) {
|
179
|
+
const path = this.urlMode === 'history'
|
180
|
+
? (location.pathname.substr(this.urlHistoryBasePath.length) + location.search)
|
181
|
+
: location.hash.substr(1);
|
182
|
+
this.urlState = this.urlStringToUrlState(path);
|
183
|
+
}
|
184
|
+
}
|
@@ -1,4 +1,7 @@
|
|
1
1
|
/* global BookReader */
|
2
|
+
|
3
|
+
import { UrlPlugin } from "./UrlPlugin";
|
4
|
+
|
2
5
|
/**
|
3
6
|
* Plugin for URL management in BookReader
|
4
7
|
* Note read more about the url "fragment" here:
|
@@ -50,7 +53,7 @@ BookReader.prototype.init = (function(super_) {
|
|
50
53
|
this.bind(BookReader.eventNames.PostInit, () => {
|
51
54
|
const { updateWindowTitle, urlMode } = this.options;
|
52
55
|
if (updateWindowTitle) {
|
53
|
-
document.title = this.shortTitle(50);
|
56
|
+
document.title = this.shortTitle(this.bookTitle, 50);
|
54
57
|
}
|
55
58
|
if (urlMode === 'hash') {
|
56
59
|
this.urlStartLocationPolling();
|
@@ -86,7 +89,7 @@ BookReader.prototype.urlStartLocationPolling = function() {
|
|
86
89
|
this.oldLocationHash = this.urlReadFragment();
|
87
90
|
|
88
91
|
if (this.locationPollId) {
|
89
|
-
clearInterval(this.
|
92
|
+
clearInterval(this.locationPollId);
|
90
93
|
this.locationPollId = null;
|
91
94
|
}
|
92
95
|
|
@@ -196,3 +199,22 @@ BookReader.prototype.urlReadFragment = function() {
|
|
196
199
|
BookReader.prototype.urlReadHashFragment = function() {
|
197
200
|
return window.location.hash.substr(1);
|
198
201
|
};
|
202
|
+
export class BookreaderUrlPlugin extends BookReader {
|
203
|
+
init() {
|
204
|
+
if (this.options.enableUrlPlugin) {
|
205
|
+
this.urlPlugin = new UrlPlugin(this.options);
|
206
|
+
this.bind(BookReader.eventNames.PostInit, () => {
|
207
|
+
const { urlMode } = this.options;
|
208
|
+
|
209
|
+
if (urlMode === 'hash') {
|
210
|
+
this.urlPlugin.listenForHashChanges();
|
211
|
+
}
|
212
|
+
});
|
213
|
+
}
|
214
|
+
|
215
|
+
super.init();
|
216
|
+
}
|
217
|
+
}
|
218
|
+
|
219
|
+
window.BookReader = BookreaderUrlPlugin;
|
220
|
+
export default BookreaderUrlPlugin;
|
@@ -0,0 +1,190 @@
|
|
1
|
+
import BookReader from '@/src/BookReader.js';
|
2
|
+
import * as utils from '@/src/BookReader/utils.js';
|
3
|
+
|
4
|
+
let br;
|
5
|
+
beforeAll(() => {
|
6
|
+
document.body.innerHTML = '<div id="BookReader">';
|
7
|
+
br = new BookReader();
|
8
|
+
});
|
9
|
+
|
10
|
+
afterEach(() => {
|
11
|
+
jest.clearAllMocks();
|
12
|
+
});
|
13
|
+
|
14
|
+
/**
|
15
|
+
* Only run init() once. Otherwise multiple EventListeners will be added.
|
16
|
+
*/
|
17
|
+
test('Initialzation enables IntersectionObserver and defaults', () => {
|
18
|
+
const observe = jest.fn();
|
19
|
+
window.IntersectionObserver = jest.fn(() => ({
|
20
|
+
observe
|
21
|
+
}));
|
22
|
+
br.init();
|
23
|
+
expect(br.hasKeyFocus).toBe(true);
|
24
|
+
expect(observe).toHaveBeenCalledTimes(1);
|
25
|
+
});
|
26
|
+
|
27
|
+
describe('Keyboard shortcuts turned off', () => {
|
28
|
+
|
29
|
+
test('Focus flag disables', () => {
|
30
|
+
br.next = jest.fn();
|
31
|
+
br.hasKeyFocus = false;
|
32
|
+
const keyEvent = new KeyboardEvent('keydown', {'key': 'ArrowDown'});
|
33
|
+
keyEvent.preventDefault = jest.fn();
|
34
|
+
document.dispatchEvent(keyEvent);
|
35
|
+
expect(br.next).toHaveBeenCalledTimes(0);
|
36
|
+
expect(keyEvent.preventDefault).toHaveBeenCalledTimes(0);
|
37
|
+
// Must reset for following tests
|
38
|
+
br.hasKeyFocus = true;
|
39
|
+
});
|
40
|
+
|
41
|
+
test('Input active disables', () => {
|
42
|
+
// eslint-disable-next-line no-import-assign
|
43
|
+
utils.isInputActive = jest.fn(() => true);
|
44
|
+
br.next = jest.fn();
|
45
|
+
const keyEvent = new KeyboardEvent('keydown', {'key': 'ArrowDown'});
|
46
|
+
keyEvent.preventDefault = jest.fn();
|
47
|
+
document.dispatchEvent(keyEvent);
|
48
|
+
expect(br.next).toHaveBeenCalledTimes(0);
|
49
|
+
expect(keyEvent.preventDefault).toHaveBeenCalledTimes(0);
|
50
|
+
// Must reset for following tests
|
51
|
+
utils.isInputActive.mockReset();
|
52
|
+
});
|
53
|
+
|
54
|
+
});
|
55
|
+
|
56
|
+
describe('Keyboard shortcuts', () => {
|
57
|
+
|
58
|
+
test('Home key', () => {
|
59
|
+
br.first = jest.fn();
|
60
|
+
const keyEvent = new KeyboardEvent('keydown', {'key': 'Home'});
|
61
|
+
keyEvent.preventDefault = jest.fn();
|
62
|
+
document.dispatchEvent(keyEvent);
|
63
|
+
expect(br.first).toHaveBeenCalledTimes(1);
|
64
|
+
expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
|
65
|
+
});
|
66
|
+
|
67
|
+
test('End key', () => {
|
68
|
+
br.last = jest.fn();
|
69
|
+
const keyEvent = new KeyboardEvent('keydown', {'key': 'End'});
|
70
|
+
keyEvent.preventDefault = jest.fn();
|
71
|
+
document.dispatchEvent(keyEvent);
|
72
|
+
expect(br.last).toHaveBeenCalledTimes(1);
|
73
|
+
expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
|
74
|
+
});
|
75
|
+
|
76
|
+
test('ArrowDown key', () => {
|
77
|
+
br.mode = br.constMode2up;
|
78
|
+
br.next = jest.fn();
|
79
|
+
const keyEvent = new KeyboardEvent('keydown', {'key': 'ArrowDown'});
|
80
|
+
keyEvent.preventDefault = jest.fn();
|
81
|
+
document.dispatchEvent(keyEvent);
|
82
|
+
expect(br.next).toHaveBeenCalledTimes(1);
|
83
|
+
expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
|
84
|
+
});
|
85
|
+
|
86
|
+
test('PageDown key', () => {
|
87
|
+
br.mode = br.constMode2up;
|
88
|
+
br.next = jest.fn();
|
89
|
+
const keyEvent = new KeyboardEvent('keydown', {'key': 'PageDown'});
|
90
|
+
keyEvent.preventDefault = jest.fn();
|
91
|
+
document.dispatchEvent(keyEvent);
|
92
|
+
expect(br.next).toHaveBeenCalledTimes(1);
|
93
|
+
expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
|
94
|
+
});
|
95
|
+
|
96
|
+
test('ArrowUp key', () => {
|
97
|
+
br.mode = br.constMode2up;
|
98
|
+
br.prev = jest.fn();
|
99
|
+
const keyEvent = new KeyboardEvent('keydown', {'key': 'ArrowUp'});
|
100
|
+
keyEvent.preventDefault = jest.fn();
|
101
|
+
document.dispatchEvent(keyEvent);
|
102
|
+
expect(br.prev).toHaveBeenCalledTimes(1);
|
103
|
+
expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
|
104
|
+
});
|
105
|
+
|
106
|
+
test('PageUp key', () => {
|
107
|
+
br.mode = br.constMode2up;
|
108
|
+
br.prev = jest.fn();
|
109
|
+
const keyEvent = new KeyboardEvent('keydown', {'key': 'PageUp'});
|
110
|
+
keyEvent.preventDefault = jest.fn();
|
111
|
+
document.dispatchEvent(keyEvent);
|
112
|
+
expect(br.prev).toHaveBeenCalledTimes(1);
|
113
|
+
expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
|
114
|
+
});
|
115
|
+
|
116
|
+
test('ArrowLeft key', () => {
|
117
|
+
br.mode = br.constMode2up;
|
118
|
+
br.left = jest.fn();
|
119
|
+
const keyEvent = new KeyboardEvent('keydown', {'key': 'ArrowLeft'});
|
120
|
+
keyEvent.preventDefault = jest.fn();
|
121
|
+
document.dispatchEvent(keyEvent);
|
122
|
+
expect(br.left).toHaveBeenCalledTimes(1);
|
123
|
+
expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
|
124
|
+
});
|
125
|
+
|
126
|
+
test('ArrowRight key', () => {
|
127
|
+
br.mode = br.constMode2up;
|
128
|
+
br.right = jest.fn();
|
129
|
+
const keyEvent = new KeyboardEvent('keydown', {'key': 'ArrowRight'});
|
130
|
+
keyEvent.preventDefault = jest.fn();
|
131
|
+
document.dispatchEvent(keyEvent);
|
132
|
+
expect(br.right).toHaveBeenCalledTimes(1);
|
133
|
+
expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
|
134
|
+
});
|
135
|
+
|
136
|
+
test('Subtract key', () => {
|
137
|
+
br.zoom = jest.fn();
|
138
|
+
const keyEvent = new KeyboardEvent('keydown', {'key': 'Subtract'});
|
139
|
+
keyEvent.preventDefault = jest.fn();
|
140
|
+
document.dispatchEvent(keyEvent);
|
141
|
+
expect(br.zoom).toHaveBeenCalledTimes(1);
|
142
|
+
expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
|
143
|
+
});
|
144
|
+
|
145
|
+
test('- key', () => {
|
146
|
+
br.zoom = jest.fn();
|
147
|
+
const keyEvent = new KeyboardEvent('keydown', {'key': '-'});
|
148
|
+
keyEvent.preventDefault = jest.fn();
|
149
|
+
document.dispatchEvent(keyEvent);
|
150
|
+
expect(br.zoom).toHaveBeenCalledTimes(1);
|
151
|
+
expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
|
152
|
+
});
|
153
|
+
|
154
|
+
test('Add key', () => {
|
155
|
+
br.zoom = jest.fn();
|
156
|
+
const keyEvent = new KeyboardEvent('keydown', {'key': 'Add'});
|
157
|
+
keyEvent.preventDefault = jest.fn();
|
158
|
+
document.dispatchEvent(keyEvent);
|
159
|
+
expect(br.zoom).toHaveBeenCalledTimes(1);
|
160
|
+
expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
|
161
|
+
});
|
162
|
+
|
163
|
+
test('+ key', () => {
|
164
|
+
br.zoom = jest.fn();
|
165
|
+
const keyEvent = new KeyboardEvent('keydown', {'key': '+'});
|
166
|
+
keyEvent.preventDefault = jest.fn();
|
167
|
+
document.dispatchEvent(keyEvent);
|
168
|
+
expect(br.zoom).toHaveBeenCalledTimes(1);
|
169
|
+
expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
|
170
|
+
});
|
171
|
+
|
172
|
+
test('= key', () => {
|
173
|
+
br.zoom = jest.fn();
|
174
|
+
const keyEvent = new KeyboardEvent('keydown', {'key': '='});
|
175
|
+
keyEvent.preventDefault = jest.fn();
|
176
|
+
document.dispatchEvent(keyEvent);
|
177
|
+
expect(br.zoom).toHaveBeenCalledTimes(1);
|
178
|
+
expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
|
179
|
+
});
|
180
|
+
|
181
|
+
test('F key', () => {
|
182
|
+
br.toggleFullscreen = jest.fn();
|
183
|
+
const keyEvent = new KeyboardEvent('keydown', {'key': 'F'});
|
184
|
+
keyEvent.preventDefault = jest.fn();
|
185
|
+
document.dispatchEvent(keyEvent);
|
186
|
+
expect(br.toggleFullscreen).toHaveBeenCalledTimes(1);
|
187
|
+
expect(keyEvent.preventDefault).toHaveBeenCalledTimes(1);
|
188
|
+
});
|
189
|
+
|
190
|
+
});
|
@@ -0,0 +1,175 @@
|
|
1
|
+
import { UrlPlugin } from '@/src/plugins/url/UrlPlugin';
|
2
|
+
|
3
|
+
afterEach(() => {
|
4
|
+
jest.clearAllMocks();
|
5
|
+
});
|
6
|
+
|
7
|
+
describe('UrlPlugin tests', () => {
|
8
|
+
const urlPlugin = new UrlPlugin();
|
9
|
+
|
10
|
+
describe('urlStateToUrlString tests', () => {
|
11
|
+
test('urlStateToUrlString with known states in schema', () => {
|
12
|
+
const urlState = { page: 'n7', mode: '1up', search: 'foo' };
|
13
|
+
const urlStateWithQueries = { page: 'n7', mode: '1up', q: 'hello', view: 'theater', sort: 'title_asc' };
|
14
|
+
|
15
|
+
const expectedUrlFromState = 'page/n7/mode/1up?q=foo';
|
16
|
+
const expectedUrlFromStateWithQueries = 'page/n7/mode/1up?q=hello&view=theater&sort=title_asc';
|
17
|
+
|
18
|
+
expect(urlPlugin.urlStateToUrlString(urlState)).toBe(expectedUrlFromState);
|
19
|
+
expect(urlPlugin.urlStateToUrlString(urlStateWithQueries)).toBe(expectedUrlFromStateWithQueries);
|
20
|
+
});
|
21
|
+
|
22
|
+
test('urlStateToUrlString with unknown states in schema', () => {
|
23
|
+
const urlState = { page: 'n7', mode: '1up' };
|
24
|
+
const urlStateWithQueries = { page: 'n7', mode: '1up', q: 'hello', viewer: 'theater', sortBy: 'title_asc' };
|
25
|
+
|
26
|
+
const expectedUrlFromState = 'page/n7/mode/1up';
|
27
|
+
const expectedUrlFromStateWithQueries = 'page/n7/mode/1up?q=hello&viewer=theater&sortBy=title_asc';
|
28
|
+
|
29
|
+
expect(urlPlugin.urlStateToUrlString(urlState)).toBe(expectedUrlFromState);
|
30
|
+
expect(urlPlugin.urlStateToUrlString(urlStateWithQueries)).toBe(expectedUrlFromStateWithQueries);
|
31
|
+
});
|
32
|
+
|
33
|
+
test('urlStateToUrlString with boolean value', () => {
|
34
|
+
const urlState = { page: 'n7', mode: '1up', search: 'foo', view: 'theater', wrapper: 'false' };
|
35
|
+
const expectedUrlFromState = 'page/n7/mode/1up?q=foo&view=theater&wrapper=false';
|
36
|
+
|
37
|
+
expect(urlPlugin.urlStateToUrlString(urlState)).toBe(expectedUrlFromState);
|
38
|
+
});
|
39
|
+
});
|
40
|
+
|
41
|
+
describe('urlStringToUrlState tests', () => {
|
42
|
+
test('urlStringToUrlState without query string', () => {
|
43
|
+
const url = '/page/n7/mode/2up';
|
44
|
+
const url1 = '/page/n7/mode/1up';
|
45
|
+
|
46
|
+
expect(urlPlugin.urlStringToUrlState(url)).toEqual({page: 'n7', mode: '2up'});
|
47
|
+
expect(urlPlugin.urlStringToUrlState(url1)).toEqual({page: 'n7', mode: '1up'});
|
48
|
+
});
|
49
|
+
|
50
|
+
test('urlStringToUrlState with deprecated_for', () => {
|
51
|
+
const url = '/page/n7/mode/2up/search/hello';
|
52
|
+
|
53
|
+
expect(urlPlugin.urlStringToUrlState(url)).toEqual({page: 'n7', mode: '2up', q: 'hello'});
|
54
|
+
});
|
55
|
+
|
56
|
+
test('urlStringToUrlState with query string', () => {
|
57
|
+
const url = '/page/n7/mode/2up/search/hello?view=theather&foo=bar&sort=title_asc';
|
58
|
+
const url1 = '/mode/2up?ref=ol&ui=embed&wrapper=false&view=theater';
|
59
|
+
|
60
|
+
expect(urlPlugin.urlStringToUrlState(url)).toEqual(
|
61
|
+
{page: 'n7', mode: '2up', q: 'hello', view: 'theather', foo: 'bar', sort: 'title_asc'}
|
62
|
+
);
|
63
|
+
expect(urlPlugin.urlStringToUrlState(url1)).toEqual(
|
64
|
+
{mode: '2up', ref: 'ol', ui: 'embed', wrapper: 'false', view: 'theater'}
|
65
|
+
);
|
66
|
+
});
|
67
|
+
|
68
|
+
test('urlStringToUrlState compare search and ?q', () => {
|
69
|
+
const url = '/page/n7/mode/2up/search/hello';
|
70
|
+
urlPlugin.urlState = { q: 'hello' };
|
71
|
+
|
72
|
+
expect(urlPlugin.urlStringToUrlState(url)).toEqual({page: 'n7', mode: '2up', q: 'hello'});
|
73
|
+
});
|
74
|
+
});
|
75
|
+
|
76
|
+
describe('url plugin helper functions', () => {
|
77
|
+
test('setUrlParam', () => {
|
78
|
+
urlPlugin.urlState = {};
|
79
|
+
urlPlugin.setUrlParam('page', '20');
|
80
|
+
urlPlugin.setUrlParam('mode', '2up');
|
81
|
+
|
82
|
+
expect(urlPlugin.urlState).toEqual({page: '20', mode: '2up'});
|
83
|
+
});
|
84
|
+
|
85
|
+
test('removeUrlParam', () => {
|
86
|
+
urlPlugin.setUrlParam('page', '20');
|
87
|
+
urlPlugin.setUrlParam('mode', '2up');
|
88
|
+
urlPlugin.removeUrlParam('mode');
|
89
|
+
|
90
|
+
expect(urlPlugin.urlState).toEqual({page: '20'});
|
91
|
+
});
|
92
|
+
|
93
|
+
test('getUrlParam', () => {
|
94
|
+
urlPlugin.setUrlParam('page', '20');
|
95
|
+
urlPlugin.setUrlParam('mode', '2up');
|
96
|
+
expect(urlPlugin.getUrlParam('page')).toEqual('20');
|
97
|
+
expect(urlPlugin.getUrlParam('mode')).toEqual('2up');
|
98
|
+
});
|
99
|
+
});
|
100
|
+
|
101
|
+
describe('pullFromAddressBar and pushToAddressBar - hash mode', () => {
|
102
|
+
test('url first load - empty state', () => {
|
103
|
+
urlPlugin.urlState = {};
|
104
|
+
urlPlugin.urlMode = 'hash';
|
105
|
+
|
106
|
+
urlPlugin.pullFromAddressBar({ pathname: '', search: '', hash: '#' });
|
107
|
+
expect(urlPlugin.urlState).toEqual({});
|
108
|
+
|
109
|
+
urlPlugin.pushToAddressBar();
|
110
|
+
expect(window.location.hash).toEqual('');
|
111
|
+
});
|
112
|
+
|
113
|
+
test('url without mode state value - use default', () => {
|
114
|
+
urlPlugin.urlState = {};
|
115
|
+
urlPlugin.urlMode = 'hash';
|
116
|
+
|
117
|
+
urlPlugin.pullFromAddressBar({ pathname: '', search: '', hash: '#page/12' });
|
118
|
+
expect(urlPlugin.urlState).toEqual({page: '12'});
|
119
|
+
|
120
|
+
urlPlugin.pushToAddressBar();
|
121
|
+
expect(window.location.hash).toEqual('#page/12');
|
122
|
+
});
|
123
|
+
|
124
|
+
test('url with query param', () => {
|
125
|
+
urlPlugin.urlState = {};
|
126
|
+
urlPlugin.urlMode = 'hash';
|
127
|
+
|
128
|
+
urlPlugin.pullFromAddressBar({ pathname: '', search: '', hash: '#page/12?q=hello&view=theater' });
|
129
|
+
expect(urlPlugin.urlState).toEqual({page: '12', q: 'hello', view: 'theater'});
|
130
|
+
|
131
|
+
urlPlugin.pushToAddressBar();
|
132
|
+
expect(window.location.hash).toEqual('#page/12?q=hello&view=theater');
|
133
|
+
});
|
134
|
+
});
|
135
|
+
|
136
|
+
describe('pullFromAddressBar and pushToAddressBar - history mode', () => {
|
137
|
+
test('url first load - empty state', () => {
|
138
|
+
urlPlugin.urlState = {};
|
139
|
+
urlPlugin.urlHistoryBasePath = '/details/foo';
|
140
|
+
urlPlugin.urlMode = 'history';
|
141
|
+
|
142
|
+
urlPlugin.pullFromAddressBar({ pathname: '', search: '', hash: '' });
|
143
|
+
expect(urlPlugin.urlState).toEqual({});
|
144
|
+
|
145
|
+
urlPlugin.pushToAddressBar();
|
146
|
+
expect(window.location.pathname).toEqual('/details/foo');
|
147
|
+
});
|
148
|
+
|
149
|
+
test('url without mode state value', () => {
|
150
|
+
urlPlugin.urlState = {};
|
151
|
+
urlPlugin.urlHistoryBasePath = '/details/foo/';
|
152
|
+
urlPlugin.urlMode = 'history';
|
153
|
+
|
154
|
+
urlPlugin.pullFromAddressBar({ pathname: '/details/foo/page/12', search: '', hash: '' });
|
155
|
+
expect(urlPlugin.urlState).toEqual({page: '12'});
|
156
|
+
|
157
|
+
urlPlugin.pushToAddressBar();
|
158
|
+
expect(window.location.pathname).toEqual('/details/foo/page/12');
|
159
|
+
});
|
160
|
+
|
161
|
+
test('url with query param', () => {
|
162
|
+
urlPlugin.urlState = {};
|
163
|
+
urlPlugin.urlHistoryBasePath = '/details/foo/';
|
164
|
+
urlPlugin.urlMode = 'history';
|
165
|
+
|
166
|
+
urlPlugin.pullFromAddressBar({ pathname: '/details/foo/page/12', search: '?q=hello&view=theater', hash: '' });
|
167
|
+
expect(urlPlugin.urlState).toEqual({page: '12', q: 'hello', view: 'theater'});
|
168
|
+
|
169
|
+
urlPlugin.pushToAddressBar();
|
170
|
+
const locationUrl = `${window.location.pathname}${window.location.search}`;
|
171
|
+
expect(locationUrl).toEqual('/details/foo/page/12?q=hello&view=theater');
|
172
|
+
});
|
173
|
+
});
|
174
|
+
|
175
|
+
});
|
@@ -1,6 +1,6 @@
|
|
1
|
-
|
2
1
|
import BookReader from '@/src/BookReader.js';
|
3
|
-
import '@/src/plugins/plugin.url.js';
|
2
|
+
import '@/src/plugins/url/plugin.url.js';
|
3
|
+
import sinon from 'sinon';
|
4
4
|
|
5
5
|
let br;
|
6
6
|
beforeAll(() => {
|
@@ -10,6 +10,7 @@ beforeAll(() => {
|
|
10
10
|
|
11
11
|
afterEach(() => {
|
12
12
|
jest.clearAllMocks();
|
13
|
+
sinon.restore();
|
13
14
|
});
|
14
15
|
|
15
16
|
describe('Plugin: URL controller', () => {
|
@@ -64,7 +64,7 @@ describe('Volumes Provider', () => {
|
|
64
64
|
const baseHost = "https://archive.org";
|
65
65
|
const provider = new volumesProvider(baseHost, brOptions, onSortClick);
|
66
66
|
|
67
|
-
expect(provider.sortOrderBy).to.equal("
|
67
|
+
expect(provider.sortOrderBy).to.equal("default");
|
68
68
|
|
69
69
|
provider.sortVolumes("title_asc");
|
70
70
|
expect(provider.sortOrderBy).to.equal("title_asc");
|
@@ -74,8 +74,8 @@ describe('Volumes Provider', () => {
|
|
74
74
|
expect(provider.sortOrderBy).to.equal("title_desc");
|
75
75
|
expect(provider.sortButton.getHTML()).includes("sort-by desc-icon");
|
76
76
|
|
77
|
-
provider.sortVolumes("
|
78
|
-
expect(provider.sortOrderBy).to.equal("
|
77
|
+
provider.sortVolumes("default");
|
78
|
+
expect(provider.sortOrderBy).to.equal("default");
|
79
79
|
expect(provider.sortButton.getHTML()).includes("sort-by neutral-icon");
|
80
80
|
});
|
81
81
|
|
@@ -88,9 +88,9 @@ describe('Volumes Provider', () => {
|
|
88
88
|
const files = Object.keys(parsedFiles).map(item => parsedFiles[item]).sort((a, b) => a.orig_sort - b.orig_sort);
|
89
89
|
const origSortTitles = files.map(item => item.title);
|
90
90
|
|
91
|
-
provider.sortVolumes("
|
91
|
+
provider.sortVolumes("default");
|
92
92
|
|
93
|
-
expect(provider.sortOrderBy).to.equal("
|
93
|
+
expect(provider.sortOrderBy).to.equal("default");
|
94
94
|
expect(provider.actionButton).to.exist;
|
95
95
|
|
96
96
|
const providerFileTitles = provider.viewableFiles.map(item => item.title);
|
@@ -144,7 +144,7 @@ describe('Volumes Provider', () => {
|
|
144
144
|
const baseHost = "https://archive.org";
|
145
145
|
const provider = new volumesProvider(baseHost, brOptions, onSortClick);
|
146
146
|
|
147
|
-
provider.sortOrderBy = '
|
147
|
+
provider.sortOrderBy = 'default';
|
148
148
|
const origSortButton = await fixture(provider.sortButton);
|
149
149
|
expect(origSortButton.classList.contains('neutral-icon')).to.be.true;
|
150
150
|
|
package/webpack.config.js
CHANGED
@@ -51,7 +51,7 @@ module.exports = [
|
|
51
51
|
'plugins/plugin.search.js': { import: './src/plugins/search/plugin.search.js', dependOn: 'BookReader.js' },
|
52
52
|
'plugins/plugin.text_selection.js': { import: './src/plugins/plugin.text_selection.js', dependOn: 'BookReader.js' },
|
53
53
|
'plugins/plugin.tts.js': { import: './src/plugins/tts/plugin.tts.js', dependOn: 'BookReader.js' },
|
54
|
-
'plugins/plugin.url.js': { import: './src/plugins/plugin.url.js', dependOn: 'BookReader.js' },
|
54
|
+
'plugins/plugin.url.js': { import: './src/plugins/url/plugin.url.js', dependOn: 'BookReader.js' },
|
55
55
|
'plugins/plugin.vendor-fullscreen.js': { import: './src/plugins/plugin.vendor-fullscreen.js', dependOn: 'BookReader.js' },
|
56
56
|
'bookreader-component-bundle.js': { import: './src/BookReaderComponent/BookReaderComponent.js', dependOn: 'BookReader.js' }
|
57
57
|
},
|