@zanichelli/zanichelli-it-frontend-kit 1.3.0-RC3 → 1.3.0-RC4
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/dist/cjs/{index-CRwLFnL1.js → index-BLzQAHAI.js} +46 -4
- package/dist/cjs/index-BLzQAHAI.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/zanichelli-it-frontend-kit.cjs.js +2 -2
- package/dist/cjs/zanit-back-to-top.zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.cjs.js.map +1 -0
- package/dist/cjs/{zanit-menubar_3.cjs.entry.js → zanit-back-to-top_4.cjs.entry.js} +80 -267
- package/dist/cjs/zanit-back-to-top_4.cjs.entry.js.map +1 -0
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/back-to-top/back-to-top.css +4 -0
- package/dist/collection/components/back-to-top/back-to-top.js +126 -0
- package/dist/collection/components/back-to-top/back-to-top.js.map +1 -0
- package/dist/collection/components/menubar/menubar.css +0 -2
- package/dist/collection/components/menubar/menubar.js +2 -52
- package/dist/collection/components/menubar/menubar.js.map +1 -1
- package/dist/collection/components/menubar/mobile-menubar/mobile-menubar.css +0 -1
- package/dist/collection/components/menubar/mobile-menubar/mobile-menubar.js +1 -51
- package/dist/collection/components/menubar/mobile-menubar/mobile-menubar.js.map +1 -1
- package/dist/collection/components/menubar/search-form/search-form.css +0 -52
- package/dist/collection/components/menubar/search-form/search-form.js +22 -207
- package/dist/collection/components/menubar/search-form/search-form.js.map +1 -1
- package/dist/collection/utils/utils.js +0 -8
- package/dist/collection/utils/utils.js.map +1 -1
- package/dist/components/index.js +42 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/{p-mjHId4_R.js → p-CZOLclk-.js} +5 -11
- package/dist/components/p-CZOLclk-.js.map +1 -0
- package/dist/components/p-FfnLbWCZ.js +133 -0
- package/dist/components/p-FfnLbWCZ.js.map +1 -0
- package/dist/components/zanit-back-to-top.d.ts +11 -0
- package/dist/components/zanit-back-to-top.js +84 -0
- package/dist/components/zanit-back-to-top.js.map +1 -0
- package/dist/components/zanit-menubar.js +5 -11
- package/dist/components/zanit-menubar.js.map +1 -1
- package/dist/components/zanit-mobile-menubar.js +1 -1
- package/dist/components/zanit-search-form.js +1 -1
- package/dist/esm/{index-B82IapZZ.js → index-DSdvvVFj.js} +46 -4
- package/dist/esm/index-DSdvvVFj.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/zanichelli-it-frontend-kit.js +3 -3
- package/dist/esm/zanit-back-to-top.zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.js.map +1 -0
- package/dist/esm/{zanit-menubar_3.entry.js → zanit-back-to-top_4.entry.js} +80 -268
- package/dist/esm/zanit-back-to-top_4.entry.js.map +1 -0
- package/dist/types/components/back-to-top/back-to-top.d.ts +25 -0
- package/dist/types/components/menubar/menubar.d.ts +0 -5
- package/dist/types/components/menubar/mobile-menubar/mobile-menubar.d.ts +0 -5
- package/dist/types/components/menubar/search-form/search-form.d.ts +5 -28
- package/dist/types/components.d.ts +53 -60
- package/dist/types/utils/types.d.ts +0 -7
- package/dist/types/utils/utils.d.ts +0 -8
- package/dist/zanichelli-it-frontend-kit/p-DSdvvVFj.js +3 -0
- package/dist/zanichelli-it-frontend-kit/p-DSdvvVFj.js.map +1 -0
- package/dist/zanichelli-it-frontend-kit/p-bdb5df96.entry.js +2 -0
- package/dist/zanichelli-it-frontend-kit/p-bdb5df96.entry.js.map +1 -0
- package/dist/zanichelli-it-frontend-kit/zanichelli-it-frontend-kit.esm.js +1 -1
- package/dist/zanichelli-it-frontend-kit/zanit-back-to-top.zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.esm.js.map +1 -0
- package/package.json +1 -1
- package/www/build/p-884eb440.js +2 -0
- package/www/build/p-DSdvvVFj.js +3 -0
- package/www/build/p-DSdvvVFj.js.map +1 -0
- package/www/build/p-bdb5df96.entry.js +2 -0
- package/www/build/p-bdb5df96.entry.js.map +1 -0
- package/www/build/zanichelli-it-frontend-kit.esm.js +1 -1
- package/www/build/zanit-back-to-top.zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.esm.js.map +1 -0
- package/www/index.html +2 -2
- package/dist/cjs/index-CRwLFnL1.js.map +0 -1
- package/dist/cjs/zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.cjs.js.map +0 -1
- package/dist/cjs/zanit-menubar_3.cjs.entry.js.map +0 -1
- package/dist/collection/components/menubar/search-form/suggestions.js +0 -84
- package/dist/collection/components/menubar/search-form/suggestions.js.map +0 -1
- package/dist/collection/utils/subjects.api.js +0 -25
- package/dist/collection/utils/subjects.api.js.map +0 -1
- package/dist/components/p-ZtXP-Url.js +0 -375
- package/dist/components/p-ZtXP-Url.js.map +0 -1
- package/dist/components/p-mjHId4_R.js.map +0 -1
- package/dist/esm/index-B82IapZZ.js.map +0 -1
- package/dist/esm/zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.js.map +0 -1
- package/dist/esm/zanit-menubar_3.entry.js.map +0 -1
- package/dist/types/components/menubar/search-form/suggestions.d.ts +0 -11
- package/dist/types/utils/subjects.api.d.ts +0 -6
- package/dist/zanichelli-it-frontend-kit/p-B82IapZZ.js +0 -3
- package/dist/zanichelli-it-frontend-kit/p-B82IapZZ.js.map +0 -1
- package/dist/zanichelli-it-frontend-kit/p-d53e0a87.entry.js +0 -2
- package/dist/zanichelli-it-frontend-kit/p-d53e0a87.entry.js.map +0 -1
- package/dist/zanichelli-it-frontend-kit/zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.esm.js.map +0 -1
- package/www/build/p-82a399e5.js +0 -2
- package/www/build/p-B82IapZZ.js +0 -3
- package/www/build/p-B82IapZZ.js.map +0 -1
- package/www/build/p-d53e0a87.entry.js +0 -2
- package/www/build/p-d53e0a87.entry.js.map +0 -1
- package/www/build/zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.esm.js.map +0 -1
|
@@ -1,6 +1,60 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BLzQAHAI.js');
|
|
4
|
+
|
|
5
|
+
const backToTopCss = ".sc-zanit-back-to-top-h .z-fab.sc-zanit-back-to-top{--color-primary01:var(--gray950);outline:1px solid var(--color-white)}";
|
|
6
|
+
|
|
7
|
+
const ZanitBackTop = class {
|
|
8
|
+
constructor(hostRef) {
|
|
9
|
+
index.registerInstance(this, hostRef);
|
|
10
|
+
}
|
|
11
|
+
resizeObserver;
|
|
12
|
+
get host() { return index.getElement(this); }
|
|
13
|
+
/** Indicates whether the back-to-top button is visible and usable. */
|
|
14
|
+
showFab = false;
|
|
15
|
+
/** Indicates the current height of the page. */
|
|
16
|
+
currentPageHeight;
|
|
17
|
+
/** Indicates if the viewport is mobile. */
|
|
18
|
+
isMobile = false;
|
|
19
|
+
/** Min page height from which the back-to-top button must appear. */
|
|
20
|
+
pageMinHeight = 1600;
|
|
21
|
+
/** Min scroll height from which the back-to-top button must appear. */
|
|
22
|
+
scrollMinHeight = 800;
|
|
23
|
+
handleScroll() {
|
|
24
|
+
this.updateFabVisibility();
|
|
25
|
+
}
|
|
26
|
+
handleResize = () => {
|
|
27
|
+
const newHeight = document.documentElement.scrollHeight;
|
|
28
|
+
if (newHeight !== this.currentPageHeight)
|
|
29
|
+
this.currentPageHeight = newHeight;
|
|
30
|
+
};
|
|
31
|
+
connectedCallback() {
|
|
32
|
+
this.currentPageHeight = document.body.scrollHeight;
|
|
33
|
+
this.resizeObserver = new ResizeObserver(this.handleResize);
|
|
34
|
+
this.resizeObserver.observe(document.documentElement);
|
|
35
|
+
this.updateFabVisibility();
|
|
36
|
+
const mobileMediaQuery = window.matchMedia('(width < 768px)');
|
|
37
|
+
this.isMobile = mobileMediaQuery.matches;
|
|
38
|
+
mobileMediaQuery.onchange = (mql) => {
|
|
39
|
+
this.isMobile = mql.matches;
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
disconnectedCallback() {
|
|
43
|
+
this.resizeObserver.disconnect();
|
|
44
|
+
}
|
|
45
|
+
updateFabVisibility() {
|
|
46
|
+
this.showFab = this.currentPageHeight > this.pageMinHeight && window.scrollY > this.scrollMinHeight;
|
|
47
|
+
}
|
|
48
|
+
scroll() {
|
|
49
|
+
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
50
|
+
}
|
|
51
|
+
render() {
|
|
52
|
+
if (!this.showFab)
|
|
53
|
+
return null;
|
|
54
|
+
return (index.h(index.Host, null, index.h("button", { class: 'z-fab' + (this.isMobile ? '' : ' z-fab-extended'), onClick: () => this.scroll() }, index.h("z-icon", { name: "back-top" }), index.h("span", null, "Torna su"))));
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
ZanitBackTop.style = backToTopCss;
|
|
4
58
|
|
|
5
59
|
/**
|
|
6
60
|
* Check if an element contains an event target by checking its composedPath.
|
|
@@ -18,14 +72,6 @@ const moveFocus = (current, next) => {
|
|
|
18
72
|
next.tabIndex = 0;
|
|
19
73
|
next.focus({ preventScroll: true });
|
|
20
74
|
};
|
|
21
|
-
/** Check if event key is ArrowUp */
|
|
22
|
-
const isArrowUpKey = (event) => event.key === 'ArrowUp';
|
|
23
|
-
/** Check if event key is ArrowDown */
|
|
24
|
-
const isArrowDownKey = (event) => event.key === 'ArrowDown';
|
|
25
|
-
/** Check if event key is Tab */
|
|
26
|
-
const isTabKey = (event) => event.key === 'Tab';
|
|
27
|
-
/** Check if event key is Escape */
|
|
28
|
-
const isEscKey = (event) => event.key === 'Escape';
|
|
29
75
|
|
|
30
76
|
const DEFAULT_GROUP_KEY = 'default';
|
|
31
77
|
const DEFAULT_GROUP = {
|
|
@@ -67,32 +113,7 @@ const Menu = ({ controlledBy, items, currentPath = [], onItemKeyDown }) => {
|
|
|
67
113
|
}, href: item.href, role: "menuitem", tabIndex: -1, "aria-current": isActive(item) ? 'page' : 'false', onKeyDown: (event) => onItemKeyDown(event), target: item.target }, item.label))))))))))));
|
|
68
114
|
};
|
|
69
115
|
|
|
70
|
-
var
|
|
71
|
-
(function (SearchEnv) {
|
|
72
|
-
SearchEnv["DEV"] = "dev";
|
|
73
|
-
SearchEnv["TEST"] = "test";
|
|
74
|
-
SearchEnv["PROD"] = "prod";
|
|
75
|
-
})(SearchEnv || (SearchEnv = {}));
|
|
76
|
-
const S3_SHOP_URL = {
|
|
77
|
-
dev: 'https://zanichelli-shop-dev.s3.eu-west-1.amazonaws.com',
|
|
78
|
-
test: 'https://zanichelli-shop-test.s3.eu-west-1.amazonaws.com',
|
|
79
|
-
prod: 'https://zanichelli-shop.s3.eu-west-1.amazonaws.com',
|
|
80
|
-
};
|
|
81
|
-
async function getSubjectsByArea(searchEnv) {
|
|
82
|
-
try {
|
|
83
|
-
const response = await fetch(`${S3_SHOP_URL[searchEnv]}/categories.json`);
|
|
84
|
-
if (!response.ok) {
|
|
85
|
-
throw new Error(`HTTP ${response.status}`);
|
|
86
|
-
}
|
|
87
|
-
return await response.json();
|
|
88
|
-
}
|
|
89
|
-
catch (err) {
|
|
90
|
-
console.error('Error fetching subjects:', err);
|
|
91
|
-
return {};
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
const menubarCss = ":host{position:relative;z-index:2;display:flex;width:100%;background-color:#fff;color:var(--gray900);font-family:var(--font-family-sans)}:host,*,::before,::after{box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}ul{padding:0;margin:0;list-style:none}a{color:var(--gray900);cursor:pointer;text-decoration:none}button{all:unset;cursor:pointer}:host nav{width:100%}.shadow-wrapper{position:relative;z-index:1;display:flex;width:100%}.shadow-wrapper::after{position:absolute;top:0;right:0;width:100%;height:100%;background:transparent;box-shadow:var(--shadow-1);content:'';pointer-events:none}.width-limiter{position:relative;display:flex;width:100%;max-width:var(--zanit-menubar-max-width, 1366px);margin:0 auto}.shadow-wrapper+.shadow-wrapper{z-index:0}.sub-menubar>ul{gap:28px}.width-limiter>ul,.sub-menubar>ul{position:relative;z-index:3;display:flex;width:100%;align-items:center;padding:0 var(--grid-margin);margin-right:auto;margin-left:auto;gap:20px}.shadow-wrapper>.width-limiter,.shadow-wrapper>ul{width:100%;max-width:var(--zanit-menubar-max-width, 1366px)}ul.menubar{padding-right:0;height:3rem}.menubar z-ghost-loading{display:block;width:120px;height:1.25rem}.menubar>li[role='separator']{width:1px;height:1.25rem;background-color:#000}.menubar-item{position:relative;display:flex;align-items:center;padding:14px 0;font-size:1rem;gap:8px;line-height:1.25rem}.menubar .menubar-item{text-transform:uppercase}.menubar-item [data-text]{display:flex;flex-direction:column}.menubar-item.active>[data-text],.menubar-item:hover>[data-text],.menubar-item:focus:focus-visible>[data-text]{font-weight:var(--font-bd)}.menubar-item>[data-text]::after{height:0;content:attr(data-text) / '';font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;user-select:none;visibility:hidden}.sub-menubar .menubar-item.active::after{position:absolute;z-index:-1;bottom:0;left:-4px;width:calc(100% + 8px);height:4px;background-color:var(--red500);content:''}zanit-search-form{margin-left:auto}";
|
|
116
|
+
const menubarCss = ":host{position:relative;z-index:2;display:flex;width:100%;background-color:#fff;color:var(--gray900);font-family:var(--font-family-sans)}:host,*,::before,::after{box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}ul{padding:0;margin:0;list-style:none}a{color:var(--gray900);cursor:pointer;text-decoration:none}button{all:unset;cursor:pointer}:host nav{width:100%}.shadow-wrapper{position:relative;z-index:1;display:flex;width:100%}.shadow-wrapper::after{position:absolute;top:0;right:0;width:100%;height:100%;background:transparent;box-shadow:var(--shadow-1);content:'';pointer-events:none}.width-limiter{position:relative;display:flex;width:100%;max-width:var(--zanit-menubar-max-width, 1366px);margin:0 auto}.shadow-wrapper+.shadow-wrapper{z-index:0}.sub-menubar>ul{gap:28px}.width-limiter>ul,.sub-menubar>ul{position:relative;display:flex;width:100%;align-items:center;padding:0 var(--grid-margin);margin-right:auto;margin-left:auto;gap:20px}.shadow-wrapper>.width-limiter,.shadow-wrapper>ul{width:100%;max-width:var(--zanit-menubar-max-width, 1366px)}ul.menubar{padding-right:0}.menubar z-ghost-loading{display:block;width:120px;height:1.25rem}.menubar>li[role='separator']{width:1px;height:1.25rem;background-color:#000}.menubar-item{position:relative;display:flex;align-items:center;padding:14px 0;font-size:1rem;gap:8px;line-height:1.25rem}.menubar .menubar-item{text-transform:uppercase}.menubar-item [data-text]{display:flex;flex-direction:column}.menubar-item.active>[data-text],.menubar-item:hover>[data-text],.menubar-item:focus:focus-visible>[data-text]{font-weight:var(--font-bd)}.menubar-item>[data-text]::after{height:0;content:attr(data-text) / '';font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;user-select:none;visibility:hidden}.sub-menubar .menubar-item.active::after{position:absolute;z-index:-1;bottom:0;left:-4px;width:calc(100% + 8px);height:4px;background-color:var(--red500);content:''}zanit-search-form{margin-left:auto}";
|
|
96
117
|
|
|
97
118
|
const menuCss$1 = ".menu-wrapper{width:100%;background-color:#fff}.menu{position:relative;display:flex;width:100%;flex-direction:column;gap:32px 0}.menu .group{display:flex;flex-direction:column}.menu .group .group-name{border-bottom:1px solid currentcolor;margin-bottom:4px;color:var(--red500);font-size:0.875rem;font-weight:var(--font-md)}.menu .group .menu-list{display:flex;flex-direction:column;gap:8px}.menu .group .menu-list .menu-item{display:block;border-bottom:2px solid transparent;font-size:0.875rem;font-weight:var(--font-md)}.menu .menu-list .menu-item.active,.menu .menu-list .menu-item:hover{border-bottom-color:var(--red500)}.menu .group.highlight .menu-list .menu-item{font-size:1rem}@media (width >= 768px){.menu-wrapper{position:absolute;top:100%;left:0;display:flex;justify-content:center;box-shadow:var(--shadow-1)}.menu{display:grid;width:100%;max-width:var(--zanit-menubar-max-width, 1366px);padding:16px var(--grid-margin);gap:0 24px;grid-auto-columns:minmax(0, max-content);grid-auto-flow:column;grid-template-rows:minmax(0, max-content) max-content}.menu .group{display:grid;grid-row:1 / -1;grid-template-columns:1fr;grid-template-rows:subgrid}@supports not (grid-template-rows: subgrid){.menu .group{grid-template-rows:repeat(auto-fit, minmax(0, max-content))}}.menu .group .group-name{border:none;margin-bottom:16px}.menu .group .menu-list .menu-item{font-size:1rem}.menu .group.highlight .menu-list .menu-item{font-size:1.5rem}}";
|
|
98
119
|
|
|
@@ -117,10 +138,6 @@ const ZanitMenubar = class {
|
|
|
117
138
|
current = undefined;
|
|
118
139
|
/** Initial search query. */
|
|
119
140
|
searchQuery = undefined;
|
|
120
|
-
/** Environment for search suggestions */
|
|
121
|
-
searchEnv = SearchEnv.PROD;
|
|
122
|
-
/** Search area (e.g. "SCUOLA", "UNIVERSITÀ", "DIZIONARI"). */
|
|
123
|
-
searchArea;
|
|
124
141
|
timerId;
|
|
125
142
|
/** Setup the list of items. */
|
|
126
143
|
async parseData(data) {
|
|
@@ -472,13 +489,13 @@ const ZanitMenubar = class {
|
|
|
472
489
|
}
|
|
473
490
|
render() {
|
|
474
491
|
if (this.isMobile) {
|
|
475
|
-
return (index.h("zanit-mobile-menubar", { items: this.items, currentPath: this.currentPath, searchQuery: this.searchQuery, loading: this.loading
|
|
492
|
+
return (index.h("zanit-mobile-menubar", { items: this.items, currentPath: this.currentPath, searchQuery: this.searchQuery, loading: this.loading }));
|
|
476
493
|
}
|
|
477
494
|
return (index.h("nav", { "aria-label": "Zanichelli.it" }, index.h("div", { class: "shadow-wrapper" }, index.h("div", { class: "width-limiter" }, index.h("ul", { class: "menubar", role: "menubar", "aria-label": "Zanichelli.it" }, this.loading &&
|
|
478
495
|
[...new Array(4)].map((_, index$1) => (index.h(index.Fragment, null, index.h("li", { role: "none" }, index.h("div", { class: "menubar-item" }, index.h("z-ghost-loading", null))), index$1 < 3 && index.h("li", { role: "separator" })))), this.items?.map((item, index$1) => (index.h(index.Fragment, null, index.h("li", { role: "none" }, index.h("a", { class: {
|
|
479
496
|
'menubar-item': true,
|
|
480
497
|
'active': this.isActive(item),
|
|
481
|
-
}, href: item.href, id: item.id, role: "menuitem", tabIndex: -1, "aria-expanded": item.menuItems?.length ? (this.openMenu === item.id ? 'true' : 'false') : undefined, "aria-haspopup": item.menuItems?.length ? 'true' : 'false', "aria-current": this.current.includes(item.id) ? 'page' : 'false', onPointerOver: () => this.showMenu(item), onKeyDown: (event) => this.handleItemKeydown(event, item), target: item.target }, index.h("span", { "data-text": item.label }, item.label), item.menuItems?.length > 0 && (index.h("z-icon", { name: this.openMenu === item.id ? 'chevron-up' : 'chevron-down', width: "0.875rem", height: "0.875rem" })))), index$1 < this.items?.length - 1 && index.h("li", { role: "separator" }))))), index.h("zanit-search-form", { searchQuery: this.searchQuery,
|
|
498
|
+
}, href: item.href, id: item.id, role: "menuitem", tabIndex: -1, "aria-expanded": item.menuItems?.length ? (this.openMenu === item.id ? 'true' : 'false') : undefined, "aria-haspopup": item.menuItems?.length ? 'true' : 'false', "aria-current": this.current.includes(item.id) ? 'page' : 'false', onPointerOver: () => this.showMenu(item), onKeyDown: (event) => this.handleItemKeydown(event, item), target: item.target }, index.h("span", { "data-text": item.label }, item.label), item.menuItems?.length > 0 && (index.h("z-icon", { name: this.openMenu === item.id ? 'chevron-up' : 'chevron-down', width: "0.875rem", height: "0.875rem" })))), index$1 < this.items?.length - 1 && index.h("li", { role: "separator" }))))), index.h("zanit-search-form", { searchQuery: this.searchQuery, onResetSearch: () => (this.searchQuery = undefined) })), this.items.map((item) => this.openMenu === item.id && (index.h(Menu, { controlledBy: item.id, items: item.menuItems, currentPath: this.currentPath, onItemKeyDown: (event) => this.handleMenuKeydown(event) })))), this.items
|
|
482
499
|
?.filter((item) => this.isActive(item))
|
|
483
500
|
.map((item) => item.navbarItems?.length && (index.h("nav", { class: { 'sub-menubar': true, 'shadow-wrapper': true }, "aria-label": `Sezioni: ${item.label}` }, index.h("ul", { role: "menubar" }, item.navbarItems.map((subitem) => (index.h(index.Fragment, null, index.h("li", { role: "none" }, index.h("a", { class: {
|
|
484
501
|
'menubar-item': true,
|
|
@@ -494,7 +511,7 @@ const ZanitMenubar = class {
|
|
|
494
511
|
};
|
|
495
512
|
ZanitMenubar.style = menubarCss + menuCss$1;
|
|
496
513
|
|
|
497
|
-
const mobileMenubarCss = ":host{position:relative;z-index:2;display:block;width:100%;max-width:100%;
|
|
514
|
+
const mobileMenubarCss = ":host{position:relative;z-index:2;display:block;width:100%;max-width:100%;background-color:#fff;color:var(--gray900);fill:var(--gray900);font-family:var(--font-family-sans)}:host,*,::before,::after{box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}ul{padding:0;margin:0;list-style:none}a{color:var(--gray900);cursor:pointer;text-decoration:none}button{all:unset;cursor:pointer}nav{display:flex;width:100%;align-items:center;padding-left:var(--grid-margin);gap:8px}nav::after{position:absolute;top:0;right:0;width:100%;height:100%;background:transparent;box-shadow:var(--shadow-1);content:'';pointer-events:none}z-logo{margin:8px 0}.mobile-menu{position:absolute;top:100%;left:0;display:flex;overflow:auto;width:100%;max-height:calc(100vh - 48px - var(--zanit-menubar-top-offset, 0px));flex-direction:column;padding:16px var(--grid-margin) 32px;background-color:#fff;box-shadow:var(--shadow-2);gap:8px}.mobile-menu li{width:100%}.mobile-menu .items-container{display:flex;min-height:256px;flex-direction:column;gap:8px}.mobile-menu .items-container z-ghost-loading{width:40%;height:1.2rem}.mobile-menu .items-container .menubar-item{display:block;width:100%;padding:8px 0;font-size:1rem;text-align:left}.mobile-menu .items-container li:not(:last-child) .menubar-item{border-bottom:1px solid #000}[role='menuitem'].parent{display:flex;width:fit-content;align-items:center;padding:0;border:none;font-size:0.875rem;gap:8px}zanit-search-form{margin-left:auto}";
|
|
498
515
|
|
|
499
516
|
const menuCss = ".menu-wrapper{width:100%;background-color:#fff}.menu{position:relative;display:flex;width:100%;flex-direction:column;gap:32px 0}.menu .group{display:flex;flex-direction:column}.menu .group .group-name{border-bottom:1px solid currentcolor;margin-bottom:4px;color:var(--red500);font-size:0.875rem;font-weight:var(--font-md)}.menu .group .menu-list{display:flex;flex-direction:column;gap:8px}.menu .group .menu-list .menu-item{display:block;border-bottom:2px solid transparent;font-size:0.875rem;font-weight:var(--font-md)}.menu .menu-list .menu-item.active,.menu .menu-list .menu-item:hover{border-bottom-color:var(--red500)}.menu .group.highlight .menu-list .menu-item{font-size:1rem}@media (width >= 768px){.menu-wrapper{position:absolute;top:100%;left:0;display:flex;justify-content:center;box-shadow:var(--shadow-1)}.menu{display:grid;width:100%;max-width:var(--zanit-menubar-max-width, 1366px);padding:16px var(--grid-margin);gap:0 24px;grid-auto-columns:minmax(0, max-content);grid-auto-flow:column;grid-template-rows:minmax(0, max-content) max-content}.menu .group{display:grid;grid-row:1 / -1;grid-template-columns:1fr;grid-template-rows:subgrid}@supports not (grid-template-rows: subgrid){.menu .group{grid-template-rows:repeat(auto-fit, minmax(0, max-content))}}.menu .group .group-name{border:none;margin-bottom:16px}.menu .group .menu-list .menu-item{font-size:1rem}.menu .group.highlight .menu-list .menu-item{font-size:1.5rem}}";
|
|
500
517
|
|
|
@@ -511,10 +528,6 @@ const ZanitMobileMenubar = class {
|
|
|
511
528
|
searchQuery = undefined;
|
|
512
529
|
/** Whether the menubar is loading the data. */
|
|
513
530
|
loading = false;
|
|
514
|
-
/** Environment for search suggestions */
|
|
515
|
-
searchEnv = SearchEnv.PROD;
|
|
516
|
-
/** Search area (e.g. "SCUOLA", "UNIVERSITÀ", "DIZIONARI"). */
|
|
517
|
-
searchArea;
|
|
518
531
|
/** Last active item ID. */
|
|
519
532
|
lastCurrent = undefined;
|
|
520
533
|
parentItem = undefined;
|
|
@@ -644,7 +657,7 @@ const ZanitMobileMenubar = class {
|
|
|
644
657
|
this.open = false;
|
|
645
658
|
}
|
|
646
659
|
render() {
|
|
647
|
-
return (index.h("nav", { key: '
|
|
660
|
+
return (index.h("nav", { key: 'd2626f2d4b495a709d763767535149a289928780', "aria-label": "Zanichelli.it" }, index.h("button", { key: '9bef721633c0e50b0632a3570087dc5688111ac1', class: "burger-button", type: "button", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "mobile-menu", "aria-label": this.open ? 'Chiudi menù' : 'Apri menù', onClick: () => this.toggleMenu() }, index.h("z-icon", { key: '3a80e9e7a1a111b51ebec8cb788156b575b0dbdf', name: this.open ? 'multiply' : 'burger-menu', width: "1.5rem", height: "1.5rem" })), index.h("z-logo", { key: '8207e15841cae3814a341b5c0d196637e654425f', imageAlt: "Logo Zanichelli", link: "/", height: 32, width: 126 }), index.h("zanit-search-form", { key: '18677ed749261738894e83057ef37020f305ba3a', searchQuery: this.searchQuery, onResetSearch: () => (this.searchQuery = undefined) }), this.open && (index.h("ul", { key: 'f7106ae095e6c17bcf602e7b1104c6cd18639b30', class: "mobile-menu", role: "menubar" }, !this.loading && this.currentPath && this.currentPath.length > 0 && (index.h("li", { key: 'a2d02aa7496511366e19637676909ff64aaffc0b', role: "none" }, index.h("a", { key: '8e81f272f0c5568157bc67f7e3c62f476b9e9a76', class: "parent", href: this.parentItem?.href ?? '/', id: this.parentItem?.id ?? undefined, role: "menuitem", tabIndex: -1, onKeyDown: (event) => this.handleItemKeydown(event), target: this.parentItem?.target }, index.h("z-icon", { key: 'b7dd58ad912541b2d9703a01e5c07aacfbb51f95', name: "arrow-left", width: "0.5rem", height: "0.5rem" }), index.h("span", { key: '7755b2c9aa025e272ab2f65c3d6b3e45ca1feb4c' }, this.parentItem?.label || 'Home')))), this.loading ? (index.h("div", { class: "items-container", role: "none" }, [...new Array(4)].map(() => (index.h("li", { role: "none" }, index.h("div", { class: "menubar-item", role: "none" }, index.h("z-ghost-loading", null))))))) : this.menuType === 'menu' ? (index.h(Menu, { items: this.menuItems, controlledBy: this.parentItem?.id, currentPath: this.currentPath, onItemKeyDown: (event) => this.handleItemKeydown(event) })) : (this.menuItems?.length > 0 && (index.h("div", { class: "items-container", role: "none" }, this.menuItems.map((item) => (index.h("li", { role: "none" }, index.h("a", { class: {
|
|
648
661
|
'menu-item': this.menuType === 'menu',
|
|
649
662
|
'menubar-item': this.menuType === 'menubar',
|
|
650
663
|
}, href: item.href, id: item.id, role: "menuitem", "aria-current": this.lastCurrent === item.id ? 'page' : 'false', tabIndex: -1, onKeyDown: (event) => this.handleItemKeydown(event), target: item.target }, index.h("span", { "data-text": item.label }, item.label))))))))))));
|
|
@@ -657,91 +670,7 @@ const ZanitMobileMenubar = class {
|
|
|
657
670
|
};
|
|
658
671
|
ZanitMobileMenubar.style = mobileMenubarCss + menuCss;
|
|
659
672
|
|
|
660
|
-
var
|
|
661
|
-
(function (AREA_LABELS) {
|
|
662
|
-
AREA_LABELS["SCUOLA"] = "Scuola";
|
|
663
|
-
AREA_LABELS["UNIVERSIT\u00C0"] = "Universit\u00E0";
|
|
664
|
-
AREA_LABELS["GIURIDICO"] = "Giuridico";
|
|
665
|
-
AREA_LABELS["DIZIONARI"] = "Dizionari";
|
|
666
|
-
AREA_LABELS["SAGGISTICA"] = "Saggistica";
|
|
667
|
-
})(AREA_LABELS || (AREA_LABELS = {}));
|
|
668
|
-
const AREA_ORDER = Object.keys(AREA_LABELS);
|
|
669
|
-
function buildSuggestions(query, subjectsByArea, selectedArea) {
|
|
670
|
-
const matchingSubjectAreas = findSubjectAreas(query, subjectsByArea);
|
|
671
|
-
const hasSubject = matchingSubjectAreas.length > 0;
|
|
672
|
-
const subject = hasSubject ? query.toUpperCase() : undefined;
|
|
673
|
-
const suggestions = [];
|
|
674
|
-
if (selectedArea)
|
|
675
|
-
suggestions.push(buildWordSuggestion(query, selectedArea));
|
|
676
|
-
suggestions.push(buildWordSuggestion(query));
|
|
677
|
-
if (hasSubject) {
|
|
678
|
-
if (selectedArea) {
|
|
679
|
-
const orderedSubjectAreas = [
|
|
680
|
-
...matchingSubjectAreas.filter((area) => area === selectedArea),
|
|
681
|
-
...matchingSubjectAreas
|
|
682
|
-
.filter((area) => area !== selectedArea)
|
|
683
|
-
.sort((a, b) => getAreaOrder(a) - getAreaOrder(b)),
|
|
684
|
-
];
|
|
685
|
-
orderedSubjectAreas.forEach((area) => suggestions.push(buildSubjectSuggestion(query, area, subject)));
|
|
686
|
-
}
|
|
687
|
-
else {
|
|
688
|
-
matchingSubjectAreas
|
|
689
|
-
.sort((a, b) => getAreaOrder(a) - getAreaOrder(b))
|
|
690
|
-
.forEach((subjectArea) => suggestions.push(buildSubjectSuggestion(query, subjectArea, subject)));
|
|
691
|
-
}
|
|
692
|
-
}
|
|
693
|
-
return suggestions;
|
|
694
|
-
}
|
|
695
|
-
const buildWordSuggestion = (user_query, area) => {
|
|
696
|
-
return {
|
|
697
|
-
id: buildId(`word-${user_query}-${area}`),
|
|
698
|
-
label: buildLabel(user_query, area, false, false),
|
|
699
|
-
html_label: buildLabel(user_query, area, false, true),
|
|
700
|
-
url: buildUrl({ q: user_query, ...(area ? { area } : {}), user_query }),
|
|
701
|
-
...buildDetail(user_query, user_query, area),
|
|
702
|
-
};
|
|
703
|
-
};
|
|
704
|
-
const buildSubjectSuggestion = (user_query, area, subject) => {
|
|
705
|
-
return {
|
|
706
|
-
id: buildId(`subj-${user_query}-${area}-${subject}`),
|
|
707
|
-
label: buildLabel(user_query, area, true, false),
|
|
708
|
-
html_label: buildLabel(user_query, area, true, true),
|
|
709
|
-
url: buildUrl({ area, materia: subject, user_query }),
|
|
710
|
-
...buildDetail(user_query, undefined, area, subject),
|
|
711
|
-
};
|
|
712
|
-
};
|
|
713
|
-
const buildId = (string) => string
|
|
714
|
-
.split('')
|
|
715
|
-
.map((c) => c.charCodeAt(0).toString(16))
|
|
716
|
-
.join('');
|
|
717
|
-
const buildUrl = (params) => {
|
|
718
|
-
return `ricerca?${new URLSearchParams(params).toString()}`;
|
|
719
|
-
};
|
|
720
|
-
const buildDetail = (user_query, query, area, subject) => ({
|
|
721
|
-
user_query,
|
|
722
|
-
...(query ? { query } : {}),
|
|
723
|
-
...(area ? { area } : {}),
|
|
724
|
-
...(subject ? { subject } : {}),
|
|
725
|
-
});
|
|
726
|
-
const buildLabel = (user_query, area, isSubject = false, isHtml = false) => {
|
|
727
|
-
const openStrong = isHtml ? `<strong>` : ``;
|
|
728
|
-
const closeStrong = isHtml ? `</strong>` : ``;
|
|
729
|
-
return `Cerca la ${isSubject ? `materia` : `parola`} ${openStrong}${user_query}${closeStrong} ${area ? `nel catalogo ${openStrong}${AREA_LABELS[area] ?? area}${closeStrong}` : `in tutto il sito`}`;
|
|
730
|
-
};
|
|
731
|
-
function findSubjectAreas(query, subjectsByArea) {
|
|
732
|
-
const cleanedQuery = cleanSearch(query);
|
|
733
|
-
return Object.entries(subjectsByArea)
|
|
734
|
-
.filter(([, subjects]) => subjects.some((subject) => subject.toLowerCase() === cleanedQuery))
|
|
735
|
-
.map(([area]) => area);
|
|
736
|
-
}
|
|
737
|
-
/** Clear search string: lowercase, remove multiple spaces */
|
|
738
|
-
const cleanSearch = (s) => s.toLowerCase().replace(/\s+/g, ' ');
|
|
739
|
-
const getAreaOrder = (area) => {
|
|
740
|
-
const index = AREA_ORDER.indexOf(area);
|
|
741
|
-
return index >= 0 ? index : 100;
|
|
742
|
-
};
|
|
743
|
-
|
|
744
|
-
const searchFormCss = ":host,*,::before,::after{box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}button{all:unset;cursor:pointer}.searchbar{--searchbar-button-x-padding:14px;--searchbar-button-icon-width:1.75rem;--closed-searchbar-width:calc((var(--searchbar-button-x-padding) * 2) + var(--searchbar-button-icon-width) + 1px);position:absolute;z-index:5;top:0;right:0;display:flex;width:var(--closed-searchbar-width);height:3rem;justify-content:flex-end;transition:width 0.4s ease-in-out}.searchbar.searchbar-open{width:100%}.searchbar .input-wrapper{display:flex;overflow:hidden;width:100%;align-items:center;padding:8px;padding-left:var(--grid-margin);background-color:#fff;gap:8px;transition-duration:0.4s;transition-property:padding-right, padding-left, width;transition-timing-function:ease-in-out}.searchbar:not(.searchbar-open) .input-wrapper{overflow:hidden;width:0;padding:0}.searchbar button[type='reset']{--z-icon-width:1rem;--z-icon-height:1rem;display:flex;align-items:center;cursor:pointer}.searchbar input{z-index:1;width:100%;height:100%;padding:0;border:none;background-color:#fff;font-family:var(--font-family-sans);font-size:1rem}.searchbar.searchbar-open input:first-child{padding-left:4px;margin-left:-4px;}.searchbar input[type='search']::-webkit-search-cancel-button,.searchbar input[type='search']::-webkit-search-decoration{appearance:none}.searchbar input::placeholder{color:var(--gray500)}.searchbar .searchbar-button{display:flex;align-items:center;justify-content:center;padding:10px var(--searchbar-button-x-padding);border-left:1px solid #000;background:var(--zanit-accent-color);font-family:inherit;font-size:inherit;gap:64px;line-height:1}.searchbar .searchbar-button:focus-visible{z-index:1}.searchbar-button z-icon{--z-icon-width:var(--searchbar-button-icon-width);--z-icon-height:var(--searchbar-button-icon-width)}.suggestions-wrapper{position:absolute;z-index:4;width:100vw;margin-left:-50vw;left:50%;top:3rem;background:#fff;box-shadow:var(--shadow-1);border-top:1px solid var(--gray200)}.suggestions-wrapper.hidden{display:none}.suggestions{display:flex;padding:var(--space-unit);flex-direction:column;align-items:stretch;width:100%;margin:0 auto}.suggestion{cursor:pointer;padding:calc(var(--space-unit) * 0.75) var(--space-unit);font-size:1rem;line-height:1.5rem}.suggestion strong{font-size:1.125rem}.suggestion:hover,.suggestion[aria-selected='true']{background:var(--gray100)}@media (width < 1152px){.searchbar .searchbar-button>.searchbar-button-label{display:none}}@media (width >= 768px){.searchbar{--searchbar-button-x-padding:16px;--searchbar-button-icon-width:2rem}.searchbar .input-wrapper{gap:14px}.searchbar button[type='reset']{--z-icon-width:1.5rem;--z-icon-height:1.5rem}.searchbar input,.searchbar .searchbar-button{font-size:1.5rem}.searchbar .searchbar-button{padding:8px var(--searchbar-button-x-padding)}.suggestions{padding:var(--space-unit) calc(var(--space-unit) * 2)}}@media (width >= 1152px){.searchbar{--closed-searchbar-width:190px}}@media (width >= 1366px){.searchbar .searchbar-button{border-right:1px solid #000}.suggestions{padding:var(--space-unit) calc(var(--space-unit) * 3);max-width:1366px}}";
|
|
673
|
+
const searchFormCss = ":host,*,::before,::after{box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}button{all:unset;cursor:pointer}.searchbar{--searchbar-button-x-padding:14px;--searchbar-button-icon-width:1.75rem;--closed-searchbar-width:calc((var(--searchbar-button-x-padding) * 2) + var(--searchbar-button-icon-width) + 1px);position:absolute;top:0;right:0;display:flex;width:var(--closed-searchbar-width);justify-content:flex-end;transition:width 0.4s ease-in-out}.searchbar.searchbar-open{width:100%}.searchbar .input-wrapper{display:flex;overflow:hidden;width:100%;align-items:center;padding:8px;padding-left:var(--grid-margin);background-color:#fff;gap:8px;transition-duration:0.4s;transition-property:padding-right, padding-left, width;transition-timing-function:ease-in-out}.searchbar:not(.searchbar-open) .input-wrapper{overflow:hidden;width:0;padding:0}.searchbar button[type='reset']{--z-icon-width:1rem;--z-icon-height:1rem;display:flex;align-items:center;cursor:pointer}.searchbar input{z-index:1;width:100%;height:100%;padding:0;border:none;background-color:#fff;font-family:var(--font-family-sans);font-size:1rem}.searchbar.searchbar-open input:first-child{padding-left:4px;margin-left:-4px;}.searchbar input[type='search']::-webkit-search-cancel-button,.searchbar input[type='search']::-webkit-search-decoration{appearance:none}.searchbar input::placeholder{color:var(--gray500)}.searchbar .searchbar-button{display:flex;align-items:center;justify-content:center;padding:10px var(--searchbar-button-x-padding);border-left:1px solid #000;background:var(--zanit-accent-color);font-family:inherit;font-size:inherit;gap:64px;line-height:1}.searchbar .searchbar-button:focus-visible{z-index:1}.searchbar-button z-icon{--z-icon-width:var(--searchbar-button-icon-width);--z-icon-height:var(--searchbar-button-icon-width)}@media (width < 1152px){.searchbar .searchbar-button>.searchbar-button-label{display:none}}@media (width >= 768px){.searchbar{--searchbar-button-x-padding:16px;--searchbar-button-icon-width:2rem}.searchbar .input-wrapper{gap:14px}.searchbar button[type='reset']{--z-icon-width:1.5rem;--z-icon-height:1.5rem}.searchbar input,.searchbar .searchbar-button{font-size:1.5rem}.searchbar .searchbar-button{padding:8px var(--searchbar-button-x-padding)}}@media (width >= 1152px){.searchbar{--closed-searchbar-width:190px}}@media (width >= 1366px){.searchbar .searchbar-button{border-right:1px solid #000}}";
|
|
745
674
|
|
|
746
675
|
const ZanitSearchForm = class {
|
|
747
676
|
constructor(hostRef) {
|
|
@@ -750,77 +679,44 @@ const ZanitSearchForm = class {
|
|
|
750
679
|
this.resetSearch = index.createEvent(this, "resetSearch");
|
|
751
680
|
}
|
|
752
681
|
formElement;
|
|
753
|
-
subjectsByArea = {};
|
|
754
|
-
timer;
|
|
755
682
|
get host() { return index.getElement(this); }
|
|
756
683
|
/** Indicates whether the searchbar is visible and usable. */
|
|
757
684
|
showSearchbar = false;
|
|
758
685
|
/** Search query to apply. */
|
|
759
686
|
_searchQuery = undefined;
|
|
760
|
-
/** Search suggestions to show in the autocomplete dropdown. */
|
|
761
|
-
suggestions = [];
|
|
762
|
-
/** Active suggestion - used for keyboard navigation */
|
|
763
|
-
activeSuggestion = '';
|
|
764
|
-
/** Show suggestions list */
|
|
765
|
-
showSuggestions = false;
|
|
766
687
|
/** Initial search query */
|
|
767
688
|
searchQuery = undefined;
|
|
768
|
-
/** Environment for search suggestions */
|
|
769
|
-
searchEnv = SearchEnv.PROD;
|
|
770
|
-
/** Search area (e.g. "SCUOLA", "UNIVERSITÀ", "DIZIONARI"). */
|
|
771
|
-
searchArea;
|
|
772
689
|
onSearchQueryChange() {
|
|
773
690
|
this._searchQuery = this.searchQuery;
|
|
774
691
|
if (this.searchQuery) {
|
|
775
692
|
this.openSearchbar();
|
|
776
693
|
}
|
|
777
|
-
this.resetSuggestions();
|
|
778
|
-
}
|
|
779
|
-
onSearchAreaChange() {
|
|
780
|
-
this.resetSuggestions();
|
|
781
|
-
}
|
|
782
|
-
onShowSearchbarChange() {
|
|
783
|
-
if (!this.showSearchbar) {
|
|
784
|
-
this.showSuggestions = false;
|
|
785
|
-
}
|
|
786
|
-
}
|
|
787
|
-
onShowSuggestionsChange() {
|
|
788
|
-
this.activeSuggestion = '';
|
|
789
694
|
}
|
|
790
695
|
/** Emitted on search form submission. */
|
|
791
696
|
search;
|
|
792
697
|
resetSearch;
|
|
793
698
|
async connectedCallback() {
|
|
794
|
-
this.subjectsByArea = await getSubjectsByArea(this.searchEnv);
|
|
795
699
|
this.showSearchbar = !!this.searchQuery;
|
|
796
700
|
this._searchQuery = this.searchQuery;
|
|
797
701
|
}
|
|
798
702
|
/** Close open searchbar when clicking outside. */
|
|
799
703
|
handleOutsideClick(event) {
|
|
800
|
-
if (this.showSearchbar && this.
|
|
704
|
+
if (this.showSearchbar && this.formElement && !containsTarget(this.formElement, event)) {
|
|
801
705
|
this.showSearchbar = false;
|
|
802
706
|
}
|
|
803
707
|
}
|
|
804
|
-
/** Close the
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
/** Close the searchbar/suggestions when pressing Tab. */
|
|
817
|
-
handleTab(event) {
|
|
818
|
-
if (!isTabKey(event)) {
|
|
819
|
-
return;
|
|
820
|
-
}
|
|
821
|
-
this.showSuggestions = false;
|
|
822
|
-
if (!containsTarget(this.host, event)) {
|
|
823
|
-
this.showSearchbar = false;
|
|
708
|
+
/** Close the menu when pressing Escape or Tab. */
|
|
709
|
+
handleKeydown(event) {
|
|
710
|
+
switch (event.key) {
|
|
711
|
+
case 'Escape':
|
|
712
|
+
this.showSearchbar = false;
|
|
713
|
+
break;
|
|
714
|
+
case 'Tab':
|
|
715
|
+
if (containsTarget(this.host, event)) {
|
|
716
|
+
break;
|
|
717
|
+
}
|
|
718
|
+
this.showSearchbar = false;
|
|
719
|
+
break;
|
|
824
720
|
}
|
|
825
721
|
}
|
|
826
722
|
openSearchbar() {
|
|
@@ -834,121 +730,38 @@ const ZanitSearchForm = class {
|
|
|
834
730
|
this.searchQuery = undefined;
|
|
835
731
|
this.resetSearch.emit();
|
|
836
732
|
}
|
|
837
|
-
resetSuggestions() {
|
|
838
|
-
this.suggestions = [];
|
|
839
|
-
this.showSuggestions = false;
|
|
840
|
-
}
|
|
841
733
|
handleInputChange(event) {
|
|
842
734
|
this._searchQuery = event.target.value;
|
|
843
735
|
if (!this._searchQuery) {
|
|
844
736
|
this.searchQuery = undefined;
|
|
845
737
|
}
|
|
846
|
-
this.updateSuggestions();
|
|
847
|
-
}
|
|
848
|
-
updateSuggestions() {
|
|
849
|
-
clearTimeout(this.timer);
|
|
850
|
-
const query = (this._searchQuery || '').trim();
|
|
851
|
-
if (query.length < 3) {
|
|
852
|
-
this.resetSuggestions();
|
|
853
|
-
return;
|
|
854
|
-
}
|
|
855
|
-
this.timer = setTimeout(() => {
|
|
856
|
-
this.resetSuggestions();
|
|
857
|
-
this.suggestions = buildSuggestions(query, this.subjectsByArea, this.searchArea?.toUpperCase());
|
|
858
|
-
this.showSuggestions = true;
|
|
859
|
-
}, 300);
|
|
860
738
|
}
|
|
861
739
|
onSearchSubmit(event) {
|
|
862
740
|
event.preventDefault();
|
|
863
741
|
if (!this._searchQuery) {
|
|
864
742
|
return;
|
|
865
743
|
}
|
|
866
|
-
if (this.activeSuggestion) {
|
|
867
|
-
const suggestion = this.suggestions.find((s) => s.id === this.activeSuggestion);
|
|
868
|
-
if (suggestion) {
|
|
869
|
-
this.submitSuggestionSearch(suggestion);
|
|
870
|
-
this.showSuggestions = false;
|
|
871
|
-
return;
|
|
872
|
-
}
|
|
873
|
-
}
|
|
874
744
|
this.showSearchbar = false;
|
|
875
|
-
const searchEv = this.search.emit({ query: this._searchQuery
|
|
745
|
+
const searchEv = this.search.emit({ query: this._searchQuery });
|
|
876
746
|
// do not submit the form if the event default behavior was prevented
|
|
877
747
|
if (searchEv.defaultPrevented) {
|
|
878
748
|
return;
|
|
879
749
|
}
|
|
880
750
|
this.formElement.submit();
|
|
881
751
|
}
|
|
882
|
-
submitSuggestionSearch(suggestion) {
|
|
883
|
-
const ev = this.search.emit({
|
|
884
|
-
user_query: suggestion.user_query,
|
|
885
|
-
query: suggestion.query,
|
|
886
|
-
area: suggestion.area,
|
|
887
|
-
subject: suggestion.subject,
|
|
888
|
-
});
|
|
889
|
-
if (!ev.defaultPrevented) {
|
|
890
|
-
window.location.href = suggestion.url;
|
|
891
|
-
}
|
|
892
|
-
}
|
|
893
|
-
handleSuggestionsNav(event) {
|
|
894
|
-
if (!isArrowDownKey(event) && !isArrowUpKey(event)) {
|
|
895
|
-
return;
|
|
896
|
-
}
|
|
897
|
-
if (!this.suggestions.length) {
|
|
898
|
-
return;
|
|
899
|
-
}
|
|
900
|
-
const options = this.suggestions.map((o) => o.id);
|
|
901
|
-
if (!options.length) {
|
|
902
|
-
return;
|
|
903
|
-
}
|
|
904
|
-
event.preventDefault();
|
|
905
|
-
event.stopPropagation();
|
|
906
|
-
if (!this.showSuggestions) {
|
|
907
|
-
this.showSuggestions = true;
|
|
908
|
-
}
|
|
909
|
-
let nextId = null;
|
|
910
|
-
const firstId = options[0];
|
|
911
|
-
const lastId = options[options.length - 1];
|
|
912
|
-
const currOption = options.indexOf(this.activeSuggestion);
|
|
913
|
-
if (currOption < 0) {
|
|
914
|
-
nextId = isArrowDownKey(event) ? firstId : lastId;
|
|
915
|
-
}
|
|
916
|
-
else {
|
|
917
|
-
if (isArrowDownKey(event)) {
|
|
918
|
-
nextId = options[currOption + 1] || lastId;
|
|
919
|
-
}
|
|
920
|
-
else {
|
|
921
|
-
nextId = options[currOption - 1] || firstId;
|
|
922
|
-
}
|
|
923
|
-
}
|
|
924
|
-
this.activeSuggestion = nextId;
|
|
925
|
-
}
|
|
926
|
-
renderSuggestions() {
|
|
927
|
-
return (index.h("div", { class: { 'suggestions-wrapper': true, 'hidden': !this.showSuggestions || !this.suggestions.length }, onPointerOver: (e) => e.preventDefault() }, index.h("div", { id: "search-suggestions", class: "suggestions", role: "listbox", "aria-label": "Seleziona tra i suggerimenti" }, this.suggestions.map((suggestion, k) => {
|
|
928
|
-
return (index.h("span", { key: k, innerHTML: suggestion.html_label, id: suggestion.id, class: "suggestion", role: "option", "aria-label": suggestion.label, "aria-selected": this.activeSuggestion === suggestion.id ? 'true' : undefined, onClick: () => this.submitSuggestionSearch(suggestion) }));
|
|
929
|
-
}))));
|
|
930
|
-
}
|
|
931
752
|
render() {
|
|
932
|
-
return (index.h(
|
|
933
|
-
// INFO: prevent ESC from clearing input
|
|
934
|
-
if (isEscKey(e)) {
|
|
935
|
-
e.preventDefault();
|
|
936
|
-
}
|
|
937
|
-
this.handleSuggestionsNav(e);
|
|
938
|
-
} })), index.h("button", { key: '836604e75ca90d451cba93236509f20a3a22cf16', class: "searchbar-button", "aria-label": this.showSearchbar ? 'Esegui ricerca' : 'Apri il campo di ricerca', "aria-controls": "searchbar-input", type: this.showSearchbar ? 'submit' : 'button', onClick: () => this.openSearchbar() }, this.showSearchbar ? null : index.h("span", { class: "searchbar-button-label" }, "Cerca"), index.h("z-icon", { key: '1616128d97c04a1e4768f163fcc20a21664daca4', name: "search" }))), this.renderSuggestions()));
|
|
753
|
+
return (index.h("form", { key: 'fe6f284342dbd746e36d5cb3c5707dcce305c161', class: { 'searchbar': true, 'searchbar-open': this.showSearchbar }, ref: (el) => (this.formElement = el), role: "search", "aria-label": "Cerca nel sito", method: "get", action: "/ricerca", onSubmit: (event) => this.onSearchSubmit(event), onReset: () => this.resetSearchQuery() }, index.h("div", { key: '593b2cccc1d01244e4d9dbf5a1cc90cf1e9075f2', class: "input-wrapper", role: "none" }, this.searchQuery && (index.h("button", { key: '2dbf7c03d16d83cc75e10f6931c2f55131794ca3', type: "reset", "aria-label": "Svuota campo di ricerca", disabled: !this.showSearchbar, "aria-hidden": !this.showSearchbar ? 'true' : undefined, tabIndex: !this.showSearchbar ? -1 : 0 }, index.h("z-icon", { key: 'dd4efe874001e675b31317e914b8c0e95dad4a0b', name: "multiply-circled" }))), index.h("input", { key: '8030e45506f54d7478658829dcea62953b0b4659', id: "searchbar-input", name: "q", type: "search", disabled: !this.showSearchbar, placeholder: "Cerca per parola chiave o ISBN", onInput: (event) => this.handleInputChange(event), value: this.searchQuery, required: true, "aria-label": "Cerca per parola chiave o ISBN", "aria-hidden": !this.showSearchbar ? 'true' : undefined, tabIndex: !this.showSearchbar ? -1 : 0 })), index.h("button", { key: 'f9f28df512a832c6ee1327e5dbeb5bd4648e44b7', class: "searchbar-button", "aria-label": this.showSearchbar ? 'Esegui ricerca' : 'Apri il campo di ricerca', "aria-controls": "searchbar-input", type: this.showSearchbar ? 'submit' : 'button', onClick: () => this.openSearchbar() }, this.showSearchbar ? null : index.h("span", { class: "searchbar-button-label" }, "Cerca"), index.h("z-icon", { key: '2b0f78db129b77e011be643da542f392d521dfc8', name: "search" }))));
|
|
939
754
|
}
|
|
940
755
|
static get watchers() { return {
|
|
941
|
-
"searchQuery": ["onSearchQueryChange"]
|
|
942
|
-
"searchArea": ["onSearchAreaChange"],
|
|
943
|
-
"showSearchbar": ["onShowSearchbarChange"],
|
|
944
|
-
"showSuggestions": ["onShowSuggestionsChange"]
|
|
756
|
+
"searchQuery": ["onSearchQueryChange"]
|
|
945
757
|
}; }
|
|
946
758
|
};
|
|
947
759
|
ZanitSearchForm.style = searchFormCss;
|
|
948
760
|
|
|
761
|
+
exports.zanit_back_to_top = ZanitBackTop;
|
|
949
762
|
exports.zanit_menubar = ZanitMenubar;
|
|
950
763
|
exports.zanit_mobile_menubar = ZanitMobileMenubar;
|
|
951
764
|
exports.zanit_search_form = ZanitSearchForm;
|
|
952
|
-
//# sourceMappingURL=zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.cjs.js.map
|
|
765
|
+
//# sourceMappingURL=zanit-back-to-top.zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.cjs.js.map
|
|
953
766
|
|
|
954
|
-
//# sourceMappingURL=zanit-
|
|
767
|
+
//# sourceMappingURL=zanit-back-to-top_4.cjs.entry.js.map
|