-
Notifications
You must be signed in to change notification settings - Fork 0
/
offcanvas.history.js
77 lines (57 loc) · 2.36 KB
/
offcanvas.history.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
// -----------------------------------------------------------------------------
// Omnipedia - Site theme - Off-canvas panel history
// -----------------------------------------------------------------------------
// This adds a history state when the off-canvas panel opens so that the back
// button closes the pop-up. This is especially important on mobile where
// hitting back is very intuitive and having the back button work for other
// modal panels (sidebar menu and header compact search) but not this would be
// pretty counter-intuitive.
//
// @see https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API
AmbientImpact.addComponent('OmnipediaSiteThemeOffcanvasHistory', function(
offcanvasHistory, $
) {
'use strict';
/**
* Event namespace name.
*
* @type {String}
*/
const eventNamespace = this.getName();
this.addBehaviour(
'OmnipediaSiteThemeOffcanvasHistory',
'omnipedia-site-theme-offcanvas-history',
'.offcanvas-panel',
function(context, settings) {
$(this).on('openOffcanvas.' + eventNamespace, function(event) {
let panel = event.target;
history.pushState({offcanvasPanel: 'pushed'}, document.title);
$(window).one('popstate.' + eventNamespace, function(event) {
history.replaceState({offcanvasPanel: 'popped'}, document.title);
// There's no API to open or close the panel yet, so we have to
// trigger a click on the close button.
panel.aiOffcanvas.elements.close.trigger('click');
});
}).on('closeOffcanvas.' + eventNamespace, function(event) {
// Move back one entry in the browser history if the history state does
// not indicate an off-canvas popstate has just occurred. This check is
// necessary so that we don't accidentally navigate to another page if
// the pop-up was closed by means other than hitting back.
if (
typeof history.state === 'object' &&
'offcanvasPanel' in history.state &&
history.state.offcanvasPanel !== 'popped'
) {
history.back();
}
});
},
function(context, settings, trigger) {
$(window).off('popstate.' + eventNamespace);
$(this).off([
'openOffcanvas.' + eventNamespace,
'closeOffcanvas.' + eventNamespace,
].join(' '));
}
);
});