@internetarchive/ia-item-navigator 1.0.4-a1 → 1.1.0
Sign up to get free protection for your applications and to get access to all the features.
- package/.github/workflows/ci.yml +4 -5
- package/.github/workflows/gh-pages-main.yml +39 -0
- package/.github/workflows/pr-preview.yml +38 -0
- package/demo/app-root.ts +13 -13
- package/dist/demo/app-root.d.ts +3 -3
- package/dist/demo/app-root.js +2 -1
- package/dist/demo/app-root.js.map +1 -1
- package/dist/src/interfaces/menu-interfaces.d.ts +2 -1
- package/dist/src/interfaces/menu-interfaces.js.map +1 -1
- package/dist/src/item-navigator.js +3 -1
- package/dist/src/item-navigator.js.map +1 -1
- package/dist/src/loader.d.ts +1 -5
- package/dist/src/loader.js +10 -6
- package/dist/src/loader.js.map +1 -1
- package/dist/src/menu-slider/ia-menu-slider.d.ts +3 -2
- package/dist/src/menu-slider/ia-menu-slider.js +14 -15
- package/dist/src/menu-slider/ia-menu-slider.js.map +1 -1
- package/dist/src/menu-slider/menu-button.d.ts +2 -2
- package/dist/src/menu-slider/menu-button.js +3 -3
- package/dist/src/menu-slider/menu-button.js.map +1 -1
- package/dist/src/menu-slider/styles/menu-slider.js +4 -15
- package/dist/src/menu-slider/styles/menu-slider.js.map +1 -1
- package/dist/src/no-theater-available.js.map +1 -1
- package/dist/test/ia-item-navigator.test.js.map +1 -1
- package/dist/test/no-theater-available.test.js.map +1 -1
- package/dist/vite.config.d.ts +2 -0
- package/dist/vite.config.js +25 -0
- package/dist/vite.config.js.map +1 -0
- package/package.json +35 -21
- package/src/interfaces/menu-interfaces.ts +3 -1
- package/src/item-navigator.ts +9 -4
- package/src/loader.ts +5 -7
- package/src/menu-slider/ia-menu-slider.ts +17 -17
- package/src/menu-slider/menu-button.ts +3 -3
- package/src/menu-slider/styles/menu-slider.ts +4 -15
- package/src/no-theater-available.ts +1 -1
- package/test/ia-item-navigator.test.ts +24 -24
- package/test/no-theater-available.test.ts +2 -2
- package/tsconfig.json +2 -1
- package/vite.config.ts +25 -0
@@ -24,7 +24,7 @@ describe('ItemNavigator', () => {
|
|
24
24
|
describe('Theaters', () => {
|
25
25
|
it('shows <ia-no-theater-available> if told', async () => {
|
26
26
|
const el = await fixture<ItemNavigator>(
|
27
|
-
html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator
|
27
|
+
html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`,
|
28
28
|
);
|
29
29
|
el.viewAvailable = false;
|
30
30
|
await el.updateComplete;
|
@@ -33,7 +33,7 @@ describe('ItemNavigator', () => {
|
|
33
33
|
});
|
34
34
|
it('opens main slot by default', async () => {
|
35
35
|
const el = await fixture<ItemNavigator>(
|
36
|
-
html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator
|
36
|
+
html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`,
|
37
37
|
);
|
38
38
|
|
39
39
|
expect(el.viewAvailable).to.be.true;
|
@@ -45,23 +45,23 @@ describe('ItemNavigator', () => {
|
|
45
45
|
describe('`el.loaded`', () => {
|
46
46
|
it('toggles the spinning loader', async () => {
|
47
47
|
const el = await fixture<ItemNavigator>(
|
48
|
-
html`<ia-item-navigator></ia-item-navigator
|
48
|
+
html`<ia-item-navigator></ia-item-navigator>`,
|
49
49
|
);
|
50
50
|
expect(el.loaded).to.be.null; // initial load
|
51
51
|
expect(el.shadowRoot?.querySelector('ia-itemnav-loader')).to.exist;
|
52
52
|
});
|
53
53
|
it('hides reader section if `!loaded`', async () => {
|
54
54
|
const el = await fixture<ItemNavigator>(
|
55
|
-
html`<ia-item-navigator></ia-item-navigator
|
55
|
+
html`<ia-item-navigator></ia-item-navigator>`,
|
56
56
|
);
|
57
57
|
|
58
58
|
expect(
|
59
|
-
el.shadowRoot?.querySelector('#reader')?.getAttribute('class')
|
59
|
+
el.shadowRoot?.querySelector('#reader')?.getAttribute('class'),
|
60
60
|
).to.contain('hidden');
|
61
61
|
});
|
62
62
|
it('shows reader when `loaded` ', async () => {
|
63
63
|
const el = await fixture<ItemNavigator>(
|
64
|
-
html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator
|
64
|
+
html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`,
|
65
65
|
);
|
66
66
|
|
67
67
|
el.loaded = true;
|
@@ -75,7 +75,7 @@ describe('ItemNavigator', () => {
|
|
75
75
|
});
|
76
76
|
it('listens to `@loadingStateUpdated` to update `loaded` for <no-theater-available>', async () => {
|
77
77
|
const el = await fixture<ItemNavigator>(
|
78
|
-
html`<ia-item-navigator></ia-item-navigator
|
78
|
+
html`<ia-item-navigator></ia-item-navigator>`,
|
79
79
|
);
|
80
80
|
|
81
81
|
await el.updateComplete;
|
@@ -100,7 +100,7 @@ describe('ItemNavigator', () => {
|
|
100
100
|
const el = await fixture<ItemNavigator>(
|
101
101
|
html`<ia-item-navigator
|
102
102
|
.sharedObserver=${sharedObserver}
|
103
|
-
></ia-item-navigator
|
103
|
+
></ia-item-navigator>`,
|
104
104
|
);
|
105
105
|
|
106
106
|
expect(el.sharedObserver).to.equal(sharedObserver);
|
@@ -113,7 +113,7 @@ describe('ItemNavigator', () => {
|
|
113
113
|
await fixture<ItemNavigator>(
|
114
114
|
html`<ia-item-navigator
|
115
115
|
.sharedObserver=${sharedObserver}
|
116
|
-
></ia-item-navigator
|
116
|
+
></ia-item-navigator>`,
|
117
117
|
);
|
118
118
|
|
119
119
|
expect(addObserverSpy.callCount).to.equal(2);
|
@@ -125,7 +125,7 @@ describe('ItemNavigator', () => {
|
|
125
125
|
const el = await fixture<ItemNavigator>(
|
126
126
|
html`<ia-item-navigator
|
127
127
|
.sharedObserver=${sharedObserver}
|
128
|
-
></ia-item-navigator
|
128
|
+
></ia-item-navigator>`,
|
129
129
|
);
|
130
130
|
|
131
131
|
el.disconnectedCallback();
|
@@ -135,7 +135,7 @@ describe('ItemNavigator', () => {
|
|
135
135
|
});
|
136
136
|
it('sets menu to overlay if container width is <= 600px', async () => {
|
137
137
|
const el = await fixture<ItemNavigator>(
|
138
|
-
html`<ia-item-navigator></ia-item-navigator
|
138
|
+
html`<ia-item-navigator></ia-item-navigator>`,
|
139
139
|
);
|
140
140
|
|
141
141
|
expect(el.openMenuState).to.equal('shift'); // as starting point
|
@@ -162,7 +162,7 @@ describe('ItemNavigator', () => {
|
|
162
162
|
it('uses one', async () => {
|
163
163
|
const modal = new ModalManager();
|
164
164
|
const el = await fixture<ItemNavigator>(
|
165
|
-
html`<ia-item-navigator .modal=${modal}></ia-item-navigator
|
165
|
+
html`<ia-item-navigator .modal=${modal}></ia-item-navigator>`,
|
166
166
|
);
|
167
167
|
expect(el.modal).to.equal(modal);
|
168
168
|
});
|
@@ -172,7 +172,7 @@ describe('ItemNavigator', () => {
|
|
172
172
|
it('creates reflected attribute `viewportinfullscreen`', async () => {
|
173
173
|
/** to help with external styling adjustmnents */
|
174
174
|
const el = await fixture<ItemNavigator>(
|
175
|
-
html`<ia-item-navigator></ia-item-navigator
|
175
|
+
html`<ia-item-navigator></ia-item-navigator>`,
|
176
176
|
);
|
177
177
|
expect(el.getAttribute('viewportinfullscreen')).to.be.null;
|
178
178
|
|
@@ -183,7 +183,7 @@ describe('ItemNavigator', () => {
|
|
183
183
|
});
|
184
184
|
it('@ViewportInFullScreen', async () => {
|
185
185
|
const el = await fixture<ItemNavigator>(
|
186
|
-
html`<ia-item-navigator></ia-item-navigator
|
186
|
+
html`<ia-item-navigator></ia-item-navigator>`,
|
187
187
|
);
|
188
188
|
expect(el.viewportInFullscreen).to.be.null;
|
189
189
|
|
@@ -211,7 +211,7 @@ describe('ItemNavigator', () => {
|
|
211
211
|
describe('el.menuOpened', () => {
|
212
212
|
it('toggles side menu open', async () => {
|
213
213
|
const el = await fixture<ItemNavigator>(
|
214
|
-
html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator
|
214
|
+
html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`,
|
215
215
|
);
|
216
216
|
|
217
217
|
el.menuContents = [menuProvider];
|
@@ -223,7 +223,7 @@ describe('ItemNavigator', () => {
|
|
223
223
|
// side menu starts closed
|
224
224
|
expect(el.menuOpened).to.be.false;
|
225
225
|
expect(nav?.querySelector('#menu')?.getAttribute('class')).to.contain(
|
226
|
-
'hidden'
|
226
|
+
'hidden',
|
227
227
|
);
|
228
228
|
|
229
229
|
// let's open menu
|
@@ -232,13 +232,13 @@ describe('ItemNavigator', () => {
|
|
232
232
|
|
233
233
|
expect(el.menuOpened).to.be.true;
|
234
234
|
expect(nav?.querySelector('#menu')?.getAttribute('class')).to.not.contain(
|
235
|
-
'hidden'
|
235
|
+
'hidden',
|
236
236
|
);
|
237
237
|
});
|
238
238
|
|
239
239
|
it('opens menu shortcut with `@manageSideMenuEvents`', async () => {
|
240
240
|
const el = await fixture<ItemNavigator>(
|
241
|
-
html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator
|
241
|
+
html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`,
|
242
242
|
);
|
243
243
|
const detail = {
|
244
244
|
menuId: 'fullscreen',
|
@@ -303,7 +303,7 @@ describe('ItemNavigator', () => {
|
|
303
303
|
describe('el.menuContents', () => {
|
304
304
|
it('draws side menu when populated', async () => {
|
305
305
|
const el = await fixture<ItemNavigator>(
|
306
|
-
html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator
|
306
|
+
html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`,
|
307
307
|
);
|
308
308
|
|
309
309
|
el.menuContents = [menuProvider];
|
@@ -324,7 +324,7 @@ describe('ItemNavigator', () => {
|
|
324
324
|
describe('`el.menuShortcuts`', () => {
|
325
325
|
it('displays shortcut & toggle side menu button', async () => {
|
326
326
|
const el = await fixture<ItemNavigator>(
|
327
|
-
html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator
|
327
|
+
html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`,
|
328
328
|
);
|
329
329
|
|
330
330
|
const anotherShortcut = {
|
@@ -350,7 +350,7 @@ describe('ItemNavigator', () => {
|
|
350
350
|
describe('Menu events', () => {
|
351
351
|
it('`el.setMenuShortcuts`', async () => {
|
352
352
|
const el = await fixture<ItemNavigator>(
|
353
|
-
html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator
|
353
|
+
html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`,
|
354
354
|
);
|
355
355
|
expect(el.menuShortcuts.length).to.equal(0);
|
356
356
|
|
@@ -365,7 +365,7 @@ describe('ItemNavigator', () => {
|
|
365
365
|
});
|
366
366
|
it('`el.setMenuContents`', async () => {
|
367
367
|
const el = await fixture<ItemNavigator>(
|
368
|
-
html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator
|
368
|
+
html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`,
|
369
369
|
);
|
370
370
|
expect(el.menuContents.length).to.equal(0);
|
371
371
|
|
@@ -378,7 +378,7 @@ describe('ItemNavigator', () => {
|
|
378
378
|
});
|
379
379
|
it('`el.setOpenMenu`', async () => {
|
380
380
|
const el = await fixture<ItemNavigator>(
|
381
|
-
html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator
|
381
|
+
html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`,
|
382
382
|
);
|
383
383
|
|
384
384
|
el.setOpenMenu({
|
@@ -400,7 +400,7 @@ describe('ItemNavigator', () => {
|
|
400
400
|
});
|
401
401
|
it('`el.closeMenu`', async () => {
|
402
402
|
const el = await fixture<ItemNavigator>(
|
403
|
-
html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator
|
403
|
+
html`<ia-item-navigator .item=${new ItemStub()}></ia-item-navigator>`,
|
404
404
|
);
|
405
405
|
|
406
406
|
el.menuOpened = true;
|
@@ -7,7 +7,7 @@ describe('IANoTheaterAvailable', () => {
|
|
7
7
|
const el = await fixture<IANoTheaterAvailable>(
|
8
8
|
html`<ia-no-theater-available
|
9
9
|
.identifier=${`foo`}
|
10
|
-
></ia-no-theater-available
|
10
|
+
></ia-no-theater-available>`,
|
11
11
|
);
|
12
12
|
let eventFired = false;
|
13
13
|
el.addEventListener('loadingStateUpdated', () => {
|
@@ -24,7 +24,7 @@ describe('IANoTheaterAvailable', () => {
|
|
24
24
|
const el = await fixture<IANoTheaterAvailable>(
|
25
25
|
html`<ia-no-theater-available
|
26
26
|
.identifier=${`foo`}
|
27
|
-
></ia-no-theater-available
|
27
|
+
></ia-no-theater-available>`,
|
28
28
|
);
|
29
29
|
expect(el.downloadUrl).to.equal('/download/foo');
|
30
30
|
expect(el?.shadowRoot?.querySelector('a')?.href).to.contain(el.downloadUrl);
|
package/tsconfig.json
CHANGED
package/vite.config.ts
ADDED
@@ -0,0 +1,25 @@
|
|
1
|
+
import { defineConfig } from 'vite';
|
2
|
+
import { resolve } from 'path';
|
3
|
+
|
4
|
+
// https://vitejs.dev/config/
|
5
|
+
export default defineConfig({
|
6
|
+
base: './',
|
7
|
+
root: resolve(__dirname, './demo'),
|
8
|
+
build: {
|
9
|
+
/**
|
10
|
+
* This is the directory where the built files will be placed
|
11
|
+
* that we upload to GitHub Pages.
|
12
|
+
*/
|
13
|
+
outDir: '../ghpages/demo',
|
14
|
+
emptyOutDir: true,
|
15
|
+
manifest: true,
|
16
|
+
rollupOptions: {
|
17
|
+
input: {
|
18
|
+
main: resolve(__dirname, 'demo/index.html'),
|
19
|
+
},
|
20
|
+
output: {
|
21
|
+
entryFileNames: 'app-root.js',
|
22
|
+
},
|
23
|
+
},
|
24
|
+
},
|
25
|
+
});
|