@internetarchive/ia-item-navigator 1.0.4-a1 → 1.0.4

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.
Files changed (33) hide show
  1. package/dist/demo/app-root.d.ts +47 -47
  2. package/dist/demo/app-root.js +199 -199
  3. package/dist/index.d.ts +3 -3
  4. package/dist/index.js +3 -3
  5. package/dist/src/interfaces/custom-theater-interface.d.ts +20 -20
  6. package/dist/src/interfaces/custom-theater-interface.js +1 -1
  7. package/dist/src/interfaces/event-interfaces.d.ts +40 -40
  8. package/dist/src/interfaces/event-interfaces.js +1 -1
  9. package/dist/src/interfaces/menu-interfaces.d.ts +22 -22
  10. package/dist/src/interfaces/menu-interfaces.js +1 -1
  11. package/dist/src/item-navigator.d.ts +69 -69
  12. package/dist/src/item-navigator.js +256 -256
  13. package/dist/src/loader.d.ts +13 -13
  14. package/dist/src/loader.js +31 -31
  15. package/dist/src/menu-slider/ia-menu-slider.d.ts +30 -30
  16. package/dist/src/menu-slider/ia-menu-slider.js +112 -112
  17. package/dist/src/menu-slider/menu-button.d.ts +19 -19
  18. package/dist/src/menu-slider/menu-button.js +75 -75
  19. package/dist/src/menu-slider/styles/menu-button.d.ts +2 -2
  20. package/dist/src/menu-slider/styles/menu-button.js +2 -2
  21. package/dist/src/menu-slider/styles/menu-slider.d.ts +2 -2
  22. package/dist/src/menu-slider/styles/menu-slider.js +9 -20
  23. package/dist/src/menu-slider/styles/menu-slider.js.map +1 -1
  24. package/dist/src/no-theater-available.d.ts +9 -9
  25. package/dist/src/no-theater-available.js +35 -35
  26. package/dist/test/ia-item-navigator.test.d.ts +1 -1
  27. package/dist/test/ia-item-navigator.test.js +296 -296
  28. package/dist/test/ia-stub.d.ts +22 -22
  29. package/dist/test/ia-stub.js +34 -34
  30. package/dist/test/no-theater-available.test.d.ts +1 -1
  31. package/dist/test/no-theater-available.test.js +22 -22
  32. package/package.json +1 -1
  33. package/src/menu-slider/styles/menu-slider.ts +4 -15
@@ -1,303 +1,303 @@
1
- /* eslint-disable camelcase */
2
- import { html, fixture, expect } from '@open-wc/testing';
3
- import Sinon from 'sinon';
4
- import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
5
- import { ModalManager } from '@internetarchive/modal-manager';
6
- import '../src/item-navigator';
7
- import { ItemStub, menuProvider, shortcut } from '../test/ia-stub';
8
- afterEach(() => {
9
- Sinon.restore();
10
- });
11
- describe('ItemNavigator', () => {
12
- describe('Theaters', () => {
13
- it('shows <ia-no-theater-available> if told', async () => {
14
- var _a;
15
- const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
16
- el.viewAvailable = false;
17
- await el.updateComplete;
18
- expect(el.viewAvailable).to.be.false;
19
- expect((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ia-no-theater-available')).to.exist;
20
- });
21
- it('opens main slot by default', async () => {
22
- var _a, _b;
23
- const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
24
- expect(el.viewAvailable).to.be.true;
25
- expect((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ia-no-theater-available')).to.be
26
- .null;
27
- expect((_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('slot[name="main"]')).to.exist;
28
- });
29
- });
30
- describe('`el.loaded`', () => {
31
- it('toggles the spinning loader', async () => {
32
- var _a;
33
- const el = await fixture(html `<ia-item-navigator></ia-item-navigator>`);
34
- expect(el.loaded).to.be.null; // initial load
35
- expect((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ia-itemnav-loader')).to.exist;
36
- });
37
- it('hides reader section if `!loaded`', async () => {
38
- var _a, _b;
39
- const el = await fixture(html `<ia-item-navigator></ia-item-navigator>`);
40
- expect((_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#reader')) === null || _b === void 0 ? void 0 : _b.getAttribute('class')).to.contain('hidden');
41
- });
42
- it('shows reader when `loaded` ', async () => {
43
- var _a, _b;
44
- const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
45
- el.loaded = true;
46
- await el.updateComplete;
47
- const mainTheaterSection = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#reader');
48
- expect(mainTheaterSection === null || mainTheaterSection === void 0 ? void 0 : mainTheaterSection.classList.contains('hide')).to.be.false;
49
- expect(el.loaded).to.be.true;
50
- // `loaded` property is reflected as DOM attribute
51
- expect(el.hasAttribute('loaded')).to.equal(true);
52
- expect((_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('slot[name="main"]')).to.exist;
53
- });
54
- it('listens to `@loadingStateUpdated` to update `loaded` for <no-theater-available>', async () => {
55
- const el = await fixture(html `<ia-item-navigator></ia-item-navigator>`);
56
- await el.updateComplete;
57
- const spy = Sinon.spy();
58
- el.loadingStateUpdated = spy;
59
- el.loaded = null;
60
- el.viewAvailable = false;
61
- await el.updateComplete;
62
- // check base properties
63
- expect(el.loaded).to.equal(null);
64
- expect(el.item).to.be.undefined;
65
- // spy fires
66
- expect(spy.called).to.equal(true);
67
- expect(spy.callCount).to.equal(1);
68
- });
69
- });
70
- describe('`el.sharedObserver`', () => {
71
- it('uses one', async () => {
72
- const sharedObserver = new SharedResizeObserver();
1
+ /* eslint-disable camelcase */
2
+ import { html, fixture, expect } from '@open-wc/testing';
3
+ import Sinon from 'sinon';
4
+ import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
5
+ import { ModalManager } from '@internetarchive/modal-manager';
6
+ import '../src/item-navigator';
7
+ import { ItemStub, menuProvider, shortcut } from '../test/ia-stub';
8
+ afterEach(() => {
9
+ Sinon.restore();
10
+ });
11
+ describe('ItemNavigator', () => {
12
+ describe('Theaters', () => {
13
+ it('shows <ia-no-theater-available> if told', async () => {
14
+ var _a;
15
+ const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
16
+ el.viewAvailable = false;
17
+ await el.updateComplete;
18
+ expect(el.viewAvailable).to.be.false;
19
+ expect((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ia-no-theater-available')).to.exist;
20
+ });
21
+ it('opens main slot by default', async () => {
22
+ var _a, _b;
23
+ const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
24
+ expect(el.viewAvailable).to.be.true;
25
+ expect((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ia-no-theater-available')).to.be
26
+ .null;
27
+ expect((_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('slot[name="main"]')).to.exist;
28
+ });
29
+ });
30
+ describe('`el.loaded`', () => {
31
+ it('toggles the spinning loader', async () => {
32
+ var _a;
33
+ const el = await fixture(html `<ia-item-navigator></ia-item-navigator>`);
34
+ expect(el.loaded).to.be.null; // initial load
35
+ expect((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ia-itemnav-loader')).to.exist;
36
+ });
37
+ it('hides reader section if `!loaded`', async () => {
38
+ var _a, _b;
39
+ const el = await fixture(html `<ia-item-navigator></ia-item-navigator>`);
40
+ expect((_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#reader')) === null || _b === void 0 ? void 0 : _b.getAttribute('class')).to.contain('hidden');
41
+ });
42
+ it('shows reader when `loaded` ', async () => {
43
+ var _a, _b;
44
+ const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
45
+ el.loaded = true;
46
+ await el.updateComplete;
47
+ const mainTheaterSection = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#reader');
48
+ expect(mainTheaterSection === null || mainTheaterSection === void 0 ? void 0 : mainTheaterSection.classList.contains('hide')).to.be.false;
49
+ expect(el.loaded).to.be.true;
50
+ // `loaded` property is reflected as DOM attribute
51
+ expect(el.hasAttribute('loaded')).to.equal(true);
52
+ expect((_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('slot[name="main"]')).to.exist;
53
+ });
54
+ it('listens to `@loadingStateUpdated` to update `loaded` for <no-theater-available>', async () => {
55
+ const el = await fixture(html `<ia-item-navigator></ia-item-navigator>`);
56
+ await el.updateComplete;
57
+ const spy = Sinon.spy();
58
+ el.loadingStateUpdated = spy;
59
+ el.loaded = null;
60
+ el.viewAvailable = false;
61
+ await el.updateComplete;
62
+ // check base properties
63
+ expect(el.loaded).to.equal(null);
64
+ expect(el.item).to.be.undefined;
65
+ // spy fires
66
+ expect(spy.called).to.equal(true);
67
+ expect(spy.callCount).to.equal(1);
68
+ });
69
+ });
70
+ describe('`el.sharedObserver`', () => {
71
+ it('uses one', async () => {
72
+ const sharedObserver = new SharedResizeObserver();
73
73
  const el = await fixture(html `<ia-item-navigator
74
74
  .sharedObserver=${sharedObserver}
75
- ></ia-item-navigator>`);
76
- expect(el.sharedObserver).to.equal(sharedObserver);
77
- expect(typeof el.handleResize).to.equal('function');
78
- });
79
- it('freshly registers handlers', async () => {
80
- const sharedObserver = new SharedResizeObserver();
81
- const addObserverSpy = Sinon.spy(sharedObserver, 'addObserver');
75
+ ></ia-item-navigator>`);
76
+ expect(el.sharedObserver).to.equal(sharedObserver);
77
+ expect(typeof el.handleResize).to.equal('function');
78
+ });
79
+ it('freshly registers handlers', async () => {
80
+ const sharedObserver = new SharedResizeObserver();
81
+ const addObserverSpy = Sinon.spy(sharedObserver, 'addObserver');
82
82
  await fixture(html `<ia-item-navigator
83
83
  .sharedObserver=${sharedObserver}
84
- ></ia-item-navigator>`);
85
- expect(addObserverSpy.callCount).to.equal(2);
86
- });
87
- it('removes handler when component disconnects', async () => {
88
- const sharedObserver = new SharedResizeObserver();
89
- const removeObserverSpy = Sinon.spy(sharedObserver, 'removeObserver');
84
+ ></ia-item-navigator>`);
85
+ expect(addObserverSpy.callCount).to.equal(2);
86
+ });
87
+ it('removes handler when component disconnects', async () => {
88
+ const sharedObserver = new SharedResizeObserver();
89
+ const removeObserverSpy = Sinon.spy(sharedObserver, 'removeObserver');
90
90
  const el = await fixture(html `<ia-item-navigator
91
91
  .sharedObserver=${sharedObserver}
92
- ></ia-item-navigator>`);
93
- el.disconnectedCallback();
94
- await el.updateComplete;
95
- expect(removeObserverSpy.callCount).to.equal(1);
96
- });
97
- it('sets menu to overlay if container width is <= 600px', async () => {
98
- const el = await fixture(html `<ia-item-navigator></ia-item-navigator>`);
99
- expect(el.openMenuState).to.equal('shift'); // as starting point
100
- const overlaySize = {
101
- contentRect: { width: 600 },
102
- };
103
- el.handleResize(overlaySize);
104
- await el.updateComplete;
105
- expect(el.openMenuState).to.equal('overlay'); // changes open menu display to an overlay
106
- const shiftSize = {
107
- contentRect: { width: 601 },
108
- };
109
- el.handleResize(shiftSize);
110
- await el.updateComplete;
111
- expect(el.openMenuState).to.equal('shift');
112
- });
113
- });
114
- describe('`el.modal`', () => {
115
- it('uses one', async () => {
116
- const modal = new ModalManager();
117
- const el = await fixture(html `<ia-item-navigator .modal=${modal}></ia-item-navigator>`);
118
- expect(el.modal).to.equal(modal);
119
- });
120
- });
121
- describe('full browser window immersion "fullscreen"', () => {
122
- it('creates reflected attribute `viewportinfullscreen`', async () => {
123
- /** to help with external styling adjustmnents */
124
- const el = await fixture(html `<ia-item-navigator></ia-item-navigator>`);
125
- expect(el.getAttribute('viewportinfullscreen')).to.be.null;
126
- el.viewportInFullscreen = true;
127
- await el.updateComplete;
128
- expect(el.getAttribute('viewportinfullscreen')).to.exist;
129
- });
130
- it('@ViewportInFullScreen', async () => {
131
- const el = await fixture(html `<ia-item-navigator></ia-item-navigator>`);
132
- expect(el.viewportInFullscreen).to.be.null;
133
- const yesFullscreenEvent = {
134
- detail: {
135
- isFullScreen: true,
136
- },
137
- };
138
- el.manageViewportFullscreen(yesFullscreenEvent);
139
- await el.updateComplete;
140
- expect(el.viewportInFullscreen).to.be.true;
141
- const noFullscreenEvent = {
142
- detail: {
143
- isFullScreen: false,
144
- },
145
- };
146
- el.manageViewportFullscreen(noFullscreenEvent);
147
- await el.updateComplete;
148
- expect(el.viewportInFullscreen).to.be.null;
149
- });
150
- });
151
- /* Side menu & shortcuts tests */
152
- describe('el.menuOpened', () => {
153
- it('toggles side menu open', async () => {
154
- var _a, _b, _c;
155
- const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
156
- el.menuContents = [menuProvider];
157
- await el.updateComplete;
158
- const nav = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('nav');
159
- expect(nav === null || nav === void 0 ? void 0 : nav.querySelector('#menu')).to.exist;
160
- // side menu starts closed
161
- expect(el.menuOpened).to.be.false;
162
- expect((_b = nav === null || nav === void 0 ? void 0 : nav.querySelector('#menu')) === null || _b === void 0 ? void 0 : _b.getAttribute('class')).to.contain('hidden');
163
- // let's open menu
164
- el.toggleMenu();
165
- await el.updateComplete;
166
- expect(el.menuOpened).to.be.true;
167
- expect((_c = nav === null || nav === void 0 ? void 0 : nav.querySelector('#menu')) === null || _c === void 0 ? void 0 : _c.getAttribute('class')).to.not.contain('hidden');
168
- });
169
- it('opens menu shortcut with `@manageSideMenuEvents`', async () => {
170
- var _a;
171
- const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
172
- const detail = {
173
- menuId: 'fullscreen',
174
- action: 'open',
175
- };
176
- el.menuContents = [menuProvider];
177
- await el.updateComplete;
178
- const frame = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#frame');
179
- // default menu open behavior is to side menu open, not overlay
180
- expect(frame === null || frame === void 0 ? void 0 : frame.getAttribute('class')).to.contain('shift');
181
- expect(el.menuOpened).to.be.false;
182
- expect(el.openMenu).to.be.undefined;
183
- expect(frame === null || frame === void 0 ? void 0 : frame.getAttribute('class')).to.not.contain('open');
184
- const event = new CustomEvent('updateSideMenu', {
185
- detail,
186
- });
187
- el.manageSideMenuEvents(event);
188
- await el.updateComplete;
189
- expect(el.shouldRenderMenu).to.be.true;
190
- expect(el.menuOpened).to.be.true;
191
- expect(el.openMenu).to.equal(detail.menuId);
192
- expect(frame === null || frame === void 0 ? void 0 : frame.getAttribute('class')).to.contain('open');
193
- // no menu provided
194
- const openShortcutSpy = Sinon.spy(el, 'openShortcut');
195
- const toggleMenuSpy = Sinon.spy(el, 'toggleMenu');
196
- const noMenuProvidedEvent = new CustomEvent('updateSideMenu', {
197
- detail: {},
198
- });
199
- el.manageSideMenuEvents(noMenuProvidedEvent);
200
- await el.updateComplete;
201
- expect(openShortcutSpy.called).to.be.false;
202
- expect(toggleMenuSpy.called).to.be.false;
203
- // toggle menu
204
- const toggleMenuEvent = new CustomEvent('updateSideMenu', {
205
- detail: { action: 'toggle', menuId: 'fullscreen' },
206
- });
207
- el.manageSideMenuEvents(toggleMenuEvent);
208
- await el.updateComplete;
209
- expect(toggleMenuSpy.callCount).to.equal(1);
210
- // open menu
211
- const openMenuEvent = new CustomEvent('updateSideMenu', {
212
- detail: { action: 'open', menuId: 'fullscreen' },
213
- });
214
- el.manageSideMenuEvents(openMenuEvent);
215
- await el.updateComplete;
216
- expect(openShortcutSpy.callCount).to.equal(1);
217
- });
218
- });
219
- describe('el.menuContents', () => {
220
- it('draws side menu when populated', async () => {
221
- var _a;
222
- const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
223
- el.menuContents = [menuProvider];
224
- await el.updateComplete;
225
- expect(el.menuContents.length).to.exist;
226
- expect(el.shouldRenderMenu).to.be.true;
227
- const nav = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('nav');
228
- expect(nav).to.exist;
229
- const menuSlider = nav === null || nav === void 0 ? void 0 : nav.querySelector('ia-menu-slider');
230
- expect(menuSlider).to.exist;
231
- expect(menuSlider === null || menuSlider === void 0 ? void 0 : menuSlider.getAttribute('manuallyhandleclose')).to.exist;
232
- expect(menuSlider === null || menuSlider === void 0 ? void 0 : menuSlider.getAttribute('open')).to.exist;
233
- });
234
- });
235
- describe('`el.menuShortcuts`', () => {
236
- it('displays shortcut & toggle side menu button', async () => {
237
- var _a;
238
- const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
239
- const anotherShortcut = {
240
- id: 'foo',
241
- icon: html `<i class="foo-shortcut"></i>`,
242
- };
243
- el.menuContents = [menuProvider];
244
- el.menuShortcuts = [shortcut, anotherShortcut];
245
- await el.updateComplete;
246
- const nav = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('nav');
247
- const shortcutsContainer = nav === null || nav === void 0 ? void 0 : nav.querySelector('.shortcuts');
248
- expect(el.menuShortcuts.length).to.exist;
249
- expect(nav).to.exist;
250
- expect(shortcutsContainer).to.exist;
251
- expect(shortcutsContainer === null || shortcutsContainer === void 0 ? void 0 : shortcutsContainer.querySelector('i.fullscreen-test')).to.exist;
252
- expect(shortcutsContainer === null || shortcutsContainer === void 0 ? void 0 : shortcutsContainer.querySelector('button.shortcut.foo')).to.exist;
253
- expect(nav === null || nav === void 0 ? void 0 : nav.querySelector('.toggle-menu')).to.exist;
254
- });
255
- });
256
- describe('Menu events', () => {
257
- it('`el.setMenuShortcuts`', async () => {
258
- const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
259
- expect(el.menuShortcuts.length).to.equal(0);
260
- const menuShortcuts = [shortcut];
261
- el.setMenuShortcuts({
262
- detail: menuShortcuts,
263
- });
264
- await el.updateComplete;
265
- expect(el.menuShortcuts.length).to.equal(1);
266
- });
267
- it('`el.setMenuContents`', async () => {
268
- const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
269
- expect(el.menuContents.length).to.equal(0);
270
- el.setMenuShortcuts({
271
- detail: [menuProvider],
272
- });
273
- await el.updateComplete;
274
- expect(el.menuShortcuts.length).to.equal(1);
275
- });
276
- it('`el.setOpenMenu`', async () => {
277
- const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
278
- el.setOpenMenu({
279
- detail: { id: 'foo' },
280
- });
281
- await el.updateComplete;
282
- expect(el.openMenu).to.equal('foo');
283
- expect(el.selectedMenuId).to.equal('foo');
284
- // toggles it off
285
- el.setOpenMenu({
286
- detail: { id: 'foo' },
287
- });
288
- await el.updateComplete;
289
- expect(el.openMenu).to.be.undefined;
290
- expect(el.selectedMenuId).to.equal('');
291
- });
292
- it('`el.closeMenu`', async () => {
293
- const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
294
- el.menuOpened = true;
295
- await el.updateComplete;
296
- expect(el.menuOpened).to.be.true;
297
- el.closeMenu();
298
- await el.updateComplete;
299
- expect(el.menuOpened).to.be.false;
300
- });
301
- });
302
- });
92
+ ></ia-item-navigator>`);
93
+ el.disconnectedCallback();
94
+ await el.updateComplete;
95
+ expect(removeObserverSpy.callCount).to.equal(1);
96
+ });
97
+ it('sets menu to overlay if container width is <= 600px', async () => {
98
+ const el = await fixture(html `<ia-item-navigator></ia-item-navigator>`);
99
+ expect(el.openMenuState).to.equal('shift'); // as starting point
100
+ const overlaySize = {
101
+ contentRect: { width: 600 },
102
+ };
103
+ el.handleResize(overlaySize);
104
+ await el.updateComplete;
105
+ expect(el.openMenuState).to.equal('overlay'); // changes open menu display to an overlay
106
+ const shiftSize = {
107
+ contentRect: { width: 601 },
108
+ };
109
+ el.handleResize(shiftSize);
110
+ await el.updateComplete;
111
+ expect(el.openMenuState).to.equal('shift');
112
+ });
113
+ });
114
+ describe('`el.modal`', () => {
115
+ it('uses one', async () => {
116
+ const modal = new ModalManager();
117
+ const el = await fixture(html `<ia-item-navigator .modal=${modal}></ia-item-navigator>`);
118
+ expect(el.modal).to.equal(modal);
119
+ });
120
+ });
121
+ describe('full browser window immersion "fullscreen"', () => {
122
+ it('creates reflected attribute `viewportinfullscreen`', async () => {
123
+ /** to help with external styling adjustmnents */
124
+ const el = await fixture(html `<ia-item-navigator></ia-item-navigator>`);
125
+ expect(el.getAttribute('viewportinfullscreen')).to.be.null;
126
+ el.viewportInFullscreen = true;
127
+ await el.updateComplete;
128
+ expect(el.getAttribute('viewportinfullscreen')).to.exist;
129
+ });
130
+ it('@ViewportInFullScreen', async () => {
131
+ const el = await fixture(html `<ia-item-navigator></ia-item-navigator>`);
132
+ expect(el.viewportInFullscreen).to.be.null;
133
+ const yesFullscreenEvent = {
134
+ detail: {
135
+ isFullScreen: true,
136
+ },
137
+ };
138
+ el.manageViewportFullscreen(yesFullscreenEvent);
139
+ await el.updateComplete;
140
+ expect(el.viewportInFullscreen).to.be.true;
141
+ const noFullscreenEvent = {
142
+ detail: {
143
+ isFullScreen: false,
144
+ },
145
+ };
146
+ el.manageViewportFullscreen(noFullscreenEvent);
147
+ await el.updateComplete;
148
+ expect(el.viewportInFullscreen).to.be.null;
149
+ });
150
+ });
151
+ /* Side menu & shortcuts tests */
152
+ describe('el.menuOpened', () => {
153
+ it('toggles side menu open', async () => {
154
+ var _a, _b, _c;
155
+ const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
156
+ el.menuContents = [menuProvider];
157
+ await el.updateComplete;
158
+ const nav = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('nav');
159
+ expect(nav === null || nav === void 0 ? void 0 : nav.querySelector('#menu')).to.exist;
160
+ // side menu starts closed
161
+ expect(el.menuOpened).to.be.false;
162
+ expect((_b = nav === null || nav === void 0 ? void 0 : nav.querySelector('#menu')) === null || _b === void 0 ? void 0 : _b.getAttribute('class')).to.contain('hidden');
163
+ // let's open menu
164
+ el.toggleMenu();
165
+ await el.updateComplete;
166
+ expect(el.menuOpened).to.be.true;
167
+ expect((_c = nav === null || nav === void 0 ? void 0 : nav.querySelector('#menu')) === null || _c === void 0 ? void 0 : _c.getAttribute('class')).to.not.contain('hidden');
168
+ });
169
+ it('opens menu shortcut with `@manageSideMenuEvents`', async () => {
170
+ var _a;
171
+ const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
172
+ const detail = {
173
+ menuId: 'fullscreen',
174
+ action: 'open',
175
+ };
176
+ el.menuContents = [menuProvider];
177
+ await el.updateComplete;
178
+ const frame = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#frame');
179
+ // default menu open behavior is to side menu open, not overlay
180
+ expect(frame === null || frame === void 0 ? void 0 : frame.getAttribute('class')).to.contain('shift');
181
+ expect(el.menuOpened).to.be.false;
182
+ expect(el.openMenu).to.be.undefined;
183
+ expect(frame === null || frame === void 0 ? void 0 : frame.getAttribute('class')).to.not.contain('open');
184
+ const event = new CustomEvent('updateSideMenu', {
185
+ detail,
186
+ });
187
+ el.manageSideMenuEvents(event);
188
+ await el.updateComplete;
189
+ expect(el.shouldRenderMenu).to.be.true;
190
+ expect(el.menuOpened).to.be.true;
191
+ expect(el.openMenu).to.equal(detail.menuId);
192
+ expect(frame === null || frame === void 0 ? void 0 : frame.getAttribute('class')).to.contain('open');
193
+ // no menu provided
194
+ const openShortcutSpy = Sinon.spy(el, 'openShortcut');
195
+ const toggleMenuSpy = Sinon.spy(el, 'toggleMenu');
196
+ const noMenuProvidedEvent = new CustomEvent('updateSideMenu', {
197
+ detail: {},
198
+ });
199
+ el.manageSideMenuEvents(noMenuProvidedEvent);
200
+ await el.updateComplete;
201
+ expect(openShortcutSpy.called).to.be.false;
202
+ expect(toggleMenuSpy.called).to.be.false;
203
+ // toggle menu
204
+ const toggleMenuEvent = new CustomEvent('updateSideMenu', {
205
+ detail: { action: 'toggle', menuId: 'fullscreen' },
206
+ });
207
+ el.manageSideMenuEvents(toggleMenuEvent);
208
+ await el.updateComplete;
209
+ expect(toggleMenuSpy.callCount).to.equal(1);
210
+ // open menu
211
+ const openMenuEvent = new CustomEvent('updateSideMenu', {
212
+ detail: { action: 'open', menuId: 'fullscreen' },
213
+ });
214
+ el.manageSideMenuEvents(openMenuEvent);
215
+ await el.updateComplete;
216
+ expect(openShortcutSpy.callCount).to.equal(1);
217
+ });
218
+ });
219
+ describe('el.menuContents', () => {
220
+ it('draws side menu when populated', async () => {
221
+ var _a;
222
+ const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
223
+ el.menuContents = [menuProvider];
224
+ await el.updateComplete;
225
+ expect(el.menuContents.length).to.exist;
226
+ expect(el.shouldRenderMenu).to.be.true;
227
+ const nav = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('nav');
228
+ expect(nav).to.exist;
229
+ const menuSlider = nav === null || nav === void 0 ? void 0 : nav.querySelector('ia-menu-slider');
230
+ expect(menuSlider).to.exist;
231
+ expect(menuSlider === null || menuSlider === void 0 ? void 0 : menuSlider.getAttribute('manuallyhandleclose')).to.exist;
232
+ expect(menuSlider === null || menuSlider === void 0 ? void 0 : menuSlider.getAttribute('open')).to.exist;
233
+ });
234
+ });
235
+ describe('`el.menuShortcuts`', () => {
236
+ it('displays shortcut & toggle side menu button', async () => {
237
+ var _a;
238
+ const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
239
+ const anotherShortcut = {
240
+ id: 'foo',
241
+ icon: html `<i class="foo-shortcut"></i>`,
242
+ };
243
+ el.menuContents = [menuProvider];
244
+ el.menuShortcuts = [shortcut, anotherShortcut];
245
+ await el.updateComplete;
246
+ const nav = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('nav');
247
+ const shortcutsContainer = nav === null || nav === void 0 ? void 0 : nav.querySelector('.shortcuts');
248
+ expect(el.menuShortcuts.length).to.exist;
249
+ expect(nav).to.exist;
250
+ expect(shortcutsContainer).to.exist;
251
+ expect(shortcutsContainer === null || shortcutsContainer === void 0 ? void 0 : shortcutsContainer.querySelector('i.fullscreen-test')).to.exist;
252
+ expect(shortcutsContainer === null || shortcutsContainer === void 0 ? void 0 : shortcutsContainer.querySelector('button.shortcut.foo')).to.exist;
253
+ expect(nav === null || nav === void 0 ? void 0 : nav.querySelector('.toggle-menu')).to.exist;
254
+ });
255
+ });
256
+ describe('Menu events', () => {
257
+ it('`el.setMenuShortcuts`', async () => {
258
+ const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
259
+ expect(el.menuShortcuts.length).to.equal(0);
260
+ const menuShortcuts = [shortcut];
261
+ el.setMenuShortcuts({
262
+ detail: menuShortcuts,
263
+ });
264
+ await el.updateComplete;
265
+ expect(el.menuShortcuts.length).to.equal(1);
266
+ });
267
+ it('`el.setMenuContents`', async () => {
268
+ const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
269
+ expect(el.menuContents.length).to.equal(0);
270
+ el.setMenuShortcuts({
271
+ detail: [menuProvider],
272
+ });
273
+ await el.updateComplete;
274
+ expect(el.menuShortcuts.length).to.equal(1);
275
+ });
276
+ it('`el.setOpenMenu`', async () => {
277
+ const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
278
+ el.setOpenMenu({
279
+ detail: { id: 'foo' },
280
+ });
281
+ await el.updateComplete;
282
+ expect(el.openMenu).to.equal('foo');
283
+ expect(el.selectedMenuId).to.equal('foo');
284
+ // toggles it off
285
+ el.setOpenMenu({
286
+ detail: { id: 'foo' },
287
+ });
288
+ await el.updateComplete;
289
+ expect(el.openMenu).to.be.undefined;
290
+ expect(el.selectedMenuId).to.equal('');
291
+ });
292
+ it('`el.closeMenu`', async () => {
293
+ const el = await fixture(html `<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`);
294
+ el.menuOpened = true;
295
+ await el.updateComplete;
296
+ expect(el.menuOpened).to.be.true;
297
+ el.closeMenu();
298
+ await el.updateComplete;
299
+ expect(el.menuOpened).to.be.false;
300
+ });
301
+ });
302
+ });
303
303
  //# sourceMappingURL=ia-item-navigator.test.js.map
@@ -1,22 +1,22 @@
1
- import { MetadataResponse, Metadata, File, Review, SpeechMusicASREntry } from '@internetarchive/search-service';
2
- import { MenuShortcutInterface, MenuProviderInterface } from '../src/interfaces/menu-interfaces';
3
- export declare class ItemStub implements MetadataResponse {
4
- constructor();
5
- rawResponse: any;
6
- created: number;
7
- d1: string;
8
- d2: string;
9
- dir: string;
10
- files: File[];
11
- files_count: number;
12
- item_last_updated: number;
13
- item_size: number;
14
- metadata: Metadata;
15
- server: string;
16
- uniq: number;
17
- workable_servers: string[];
18
- speech_vs_music_asr?: SpeechMusicASREntry[] | undefined;
19
- reviews?: Review[] | undefined;
20
- }
21
- export declare const shortcut: MenuShortcutInterface;
22
- export declare const menuProvider: MenuProviderInterface;
1
+ import { MetadataResponse, Metadata, File, Review, SpeechMusicASREntry } from '@internetarchive/search-service';
2
+ import { MenuShortcutInterface, MenuProviderInterface } from '../src/interfaces/menu-interfaces';
3
+ export declare class ItemStub implements MetadataResponse {
4
+ constructor();
5
+ rawResponse: any;
6
+ created: number;
7
+ d1: string;
8
+ d2: string;
9
+ dir: string;
10
+ files: File[];
11
+ files_count: number;
12
+ item_last_updated: number;
13
+ item_size: number;
14
+ metadata: Metadata;
15
+ server: string;
16
+ uniq: number;
17
+ workable_servers: string[];
18
+ speech_vs_music_asr?: SpeechMusicASREntry[] | undefined;
19
+ reviews?: Review[] | undefined;
20
+ }
21
+ export declare const shortcut: MenuShortcutInterface;
22
+ export declare const menuProvider: MenuProviderInterface;