Skip to content

Commit f0e5d73

Browse files
cdrinicdrini
committed
Experiment with hideable chrome
1 parent 80e3c45 commit f0e5d73

13 files changed

Lines changed: 152 additions & 118 deletions

File tree

‎BookReaderDemo/demo-internetarchive.html‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,12 @@
4040

4141
</head>
4242

43-
<body>
43+
<body data-variant="attached">
4444
<section class="theater" style="width: 100%; overflow: hidden; background-color: black;">
4545
<ia-bookreader
4646
baseHost="archive.org"
4747
>
48+
<!-- <div id="IABookReaderMessageWrapper" style="height: 55px" slot="header">Borrow Bar</div> -->
4849
<div id="IABookReaderWrapper" slot="main">
4950
<div id="BookReader" class="BookReader"></div>
5051
</div>
@@ -202,6 +203,15 @@
202203
</li>
203204
</ul>
204205
</details>
206+
<div class="demo">
207+
Variant:
208+
<label>
209+
<input type="radio" name="variant" value="floating"> Floating
210+
</label>
211+
<label>
212+
<input type="radio" name="variant" value="attached" checked> Attached
213+
</label>
214+
</div>
205215
<div class="demo">
206216
<button id="toggle-loggedin">Toggle Logged in view</button>
207217
<p>Features behind signed in gate: Bookmarks</p>
@@ -235,6 +245,11 @@ <h3>Placeholder div to allow scrolling</h3>
235245
<!-- Certain features, like Bookmarks, use modal-manager to draw their interface -->
236246
<modal-manager></modal-manager>
237247
<script >
248+
// Variant toggle
249+
$('input[name="variant"]').on('change', (e) => {
250+
const variant = e.target.value;
251+
document.body.setAttribute('data-variant', variant);
252+
});
238253
// Set up demo things
239254
const iaBR = document.querySelector('ia-bookreader');
240255
const toggleLoginBtn = document.querySelector('#toggle-loggedin');

‎package-lock.json‎

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"dependencies": {
3434
"@internetarchive/bergamot-translator": "^0.4.9-ia.1",
3535
"@internetarchive/ia-activity-indicator": "^0.0.4",
36-
"@internetarchive/ia-item-navigator": "2.2.2",
36+
"@internetarchive/ia-item-navigator": "2.3.0-0",
3737
"@internetarchive/icon-bookmark": "^1.3.4",
3838
"@internetarchive/icon-dl": "^1.3.4",
3939
"@internetarchive/icon-edit-pencil": "^1.3.4",

‎src/BookReader.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,11 @@ BookReader.prototype.setup = function(options) {
173173
this.subPrefix = options.subPrefix;
174174
/** @deprecated */
175175
this.bookPath = options.bookPath;
176+
this.fader = utils.debounce(
177+
() => $(document.body).addClass('faded'),
178+
2000,
179+
() => $(document.body).removeClass('faded'),
180+
);
176181

177182
// Construct the usual plugins first to get type hints
178183
this.plugins = {
@@ -742,6 +747,9 @@ BookReader.prototype.init = function() {
742747
}
743748
}
744749

750+
this.refs.$br.on('mousemove', this.fader);
751+
this.refs.$brContainer.on('scroll', utils.onScrollUp(this.fader));
752+
745753
this.init.initComplete = true;
746754
this.trigger(BookReader.eventNames.PostInit);
747755

@@ -1019,12 +1027,12 @@ BookReader.prototype.resizeBRcontainer = function(animate) {
10191027
if (animate) {
10201028
this.refs.$brContainer.animate({
10211029
top: this.getToolBarHeight(),
1022-
bottom: this.getFooterHeight(),
1030+
// bottom: this.getFooterHeight(),
10231031
}, this.constResizeAnimationDuration, 'linear');
10241032
} else {
10251033
this.refs.$brContainer.css({
10261034
top: this.getToolBarHeight(),
1027-
bottom: this.getFooterHeight(),
1035+
// bottom: this.getFooterHeight(),
10281036
});
10291037
}
10301038
};

‎src/BookReader/Mode1Up.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { Mode1UpLit } from './Mode1UpLit.js';
33
import { DragScrollable } from './DragScrollable.js';
44
import { ModeAbstract } from './ModeAbstract.js';
5+
import { onScrollUp } from './utils.js';
56
/** @typedef {import('../BookReader.js').default} BookReader */
67
/** @typedef {import('./BookModel.js').BookModel} BookModel */
78
/** @typedef {import('./BookModel.js').PageIndex} PageIndex */
@@ -24,7 +25,8 @@ export class Mode1Up extends ModeAbstract {
2425
// We CANNOT use `br-mode-1up` as a class, because it's the same
2526
// as the name of the web component, and the webcomponents polyfill
2627
// uses the name of component as a class for style scoping 😒
27-
.addClass('br-mode-1up__root BRmode1up');
28+
.addClass('br-mode-1up__root BRmode1up')
29+
.on('scroll', onScrollUp(this.br.fader));
2830

2931
/** Has mode1up ever been rendered before? */
3032
this.everShown = false;
@@ -34,6 +36,10 @@ export class Mode1Up extends ModeAbstract {
3436
/** @private */
3537
get $brContainer() { return this.br.refs.$brContainer; }
3638

39+
get scrollContainer() {
40+
return this.mode1UpLit;
41+
}
42+
3743
/**
3844
* This is called when we switch to one page view
3945
*/

‎src/BookReader/Mode2Up.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,18 @@
22
import { Mode2UpLit } from './Mode2UpLit.js';
33
import { DragScrollable } from './DragScrollable.js';
44
import { ModeAbstract } from './ModeAbstract.js';
5+
import { onScrollUp } from './utils.js';
56
/** @typedef {import('../BookReader.js').default} BookReader */
67
/** @typedef {import('./BookModel.js').BookModel} BookModel */
78
/** @typedef {import('./BookModel.js').PageIndex} PageIndex */
89

910
export class Mode2Up extends ModeAbstract {
1011
name = '2up';
1112

13+
get scrollContainer() {
14+
return this.mode2UpLit;
15+
}
16+
1217
/**
1318
* @param {BookReader} br
1419
* @param {BookModel} bookModel
@@ -26,7 +31,8 @@ export class Mode2Up extends ModeAbstract {
2631
// We CANNOT use `br-mode-2up` as a class, because it's the same
2732
// as the name of the web component, and the webcomponents polyfill
2833
// uses the name of component as a class for style scoping 😒
29-
.addClass('br-mode-2up__root BRmode2up');
34+
.addClass('br-mode-2up__root BRmode2up')
35+
.on('scroll', onScrollUp(this.br.fader));
3036

3137
/** Has mode2up ever been rendered before? */
3238
this.everShown = false;

‎src/BookReader/ModeAbstract.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,11 @@ export class ModeAbstract {
1414
/** @type {BookModel} */
1515
book;
1616

17+
/** @type {HTMLElement} */
18+
get scrollContainer() {
19+
throw new Error('Not implemented');
20+
}
21+
1722
/**
1823
* Get the page at the given index or direction
1924
* @param {PageIndex | 'left' | 'right' | 'next' | 'prev'} indexOrDirection

‎src/BookReader/ModeThumb.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ import { ModeAbstract } from './ModeAbstract.js';
1212
export class ModeThumb extends ModeAbstract {
1313
name = 'thumb'
1414

15+
get scrollContainer() {
16+
return this.br.refs.$brContainer[0];
17+
}
18+
1519
/**
1620
* @param {BookReader} br
1721
* @param {BookModel} bookModel

‎src/BookReader/utils.js‎

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,9 @@ export function encodeURIComponentPlus(value) {
107107
*
108108
* @param {T} func
109109
* @param {number} wait
110-
* @param {boolean} immediate
110+
* @param {boolean | function} immediate If true, calls func on the leading edge. If a
111+
* function is provided, that function is called on the leading edge instead of `func`.
112+
* `func` is still called on the trailing edge.
111113
* @return {T}
112114
*/
113115
export function debounce(func, wait, immediate) {
@@ -117,12 +119,18 @@ export function debounce(func, wait, immediate) {
117119
const args = arguments;
118120
const later = () => {
119121
timeout = null;
120-
if (!immediate) func.apply(context, args);
122+
if (!immediate || typeof immediate === 'function') func.apply(context, args);
121123
};
122124
const callNow = immediate && !timeout;
123125
clearTimeout(timeout);
124126
timeout = setTimeout(later, wait);
125-
if (callNow) func.apply(context, args);
127+
if (callNow) {
128+
if (typeof immediate === 'function') {
129+
immediate.apply(context, args);
130+
} else {
131+
func.apply(context, args);
132+
}
133+
}
126134
};
127135
}
128136

@@ -311,3 +319,25 @@ export function sortBy(array, valueFn) {
311319
return aValue < bValue ? -1 : aValue > bValue ? 1 : 0;
312320
});
313321
}
322+
323+
/**
324+
* @param {Function} callback
325+
* @param {Object} options
326+
* @param {number} [options.scrollDelay=20] How many pixels to scroll before triggering
327+
* @returns {function(): void}
328+
*/
329+
export function onScrollUp(callback, {scrollDelay = 20} = {}) {
330+
let lastScrollTop = 0;
331+
let accumulatedScroll = 0;
332+
return function() {
333+
const st = this.scrollTop;
334+
if (st < lastScrollTop) {
335+
accumulatedScroll += lastScrollTop - st;
336+
if (accumulatedScroll >= scrollDelay) {
337+
callback();
338+
accumulatedScroll = 0;
339+
}
340+
}
341+
lastScrollTop = st;
342+
};
343+
}

‎src/css/BookReader.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,8 @@ $searchResultText: $lightBlue;
5656
$searchResultBG: $darkBlue;
5757

5858
@mixin brDarkControls {
59-
background-color: $brColorDarkGreyBg;
59+
background-color: rgba($brColorDarkGreyBg, 0.9);
60+
backdrop-filter: blur(5px);
6061
color: white;
6162
a { color: white; }
6263
}

0 commit comments

Comments
 (0)