@zanichelli/zanichelli-it-frontend-kit 1.3.0-RC3 → 1.3.0-RC5
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} +78 -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 +15 -0
- package/dist/collection/components/back-to-top/back-to-top.js +124 -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-BJzEFXY7.js} +5 -11
- package/dist/components/p-BJzEFXY7.js.map +1 -0
- package/dist/components/p-Cfa-BVne.js +133 -0
- package/dist/components/p-Cfa-BVne.js.map +1 -0
- package/dist/components/zanit-back-to-top.d.ts +11 -0
- package/dist/components/zanit-back-to-top.js +82 -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} +78 -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-22226d84.entry.js +2 -0
- package/dist/zanichelli-it-frontend-kit/p-22226d84.entry.js.map +1 -0
- 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/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-22226d84.entry.js +2 -0
- package/www/build/p-22226d84.entry.js.map +1 -0
- package/www/build/p-4eac6a5c.js +2 -0
- package/www/build/p-DSdvvVFj.js +3 -0
- package/www/build/p-DSdvvVFj.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,4 +1,56 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { r as registerInstance, a as getElement, h, H as Host, F as Fragment, c as createEvent } from './index-DSdvvVFj.js';
|
|
2
|
+
|
|
3
|
+
const backToTopCss = ".sc-zanit-back-to-top-h{visibility:visible;opacity:1;transition:all 0.2s linear}.hidden.sc-zanit-back-to-top-h{visibility:hidden;opacity:0}.sc-zanit-back-to-top-h .z-fab.sc-zanit-back-to-top{--color-primary01:var(--gray950);outline:1px solid var(--color-white)}";
|
|
4
|
+
|
|
5
|
+
const ZanitBackTop = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
}
|
|
9
|
+
resizeObserver;
|
|
10
|
+
get host() { return getElement(this); }
|
|
11
|
+
/** Indicates whether the back-to-top button is visible and usable. */
|
|
12
|
+
showFab = false;
|
|
13
|
+
/** Indicates the current height of the page. */
|
|
14
|
+
currentPageHeight;
|
|
15
|
+
/** Indicates if the viewport is mobile. */
|
|
16
|
+
isMobile = false;
|
|
17
|
+
/** Min page height from which the back-to-top button must appear. */
|
|
18
|
+
pageMinHeight = 1600;
|
|
19
|
+
/** Min scroll height from which the back-to-top button must appear. */
|
|
20
|
+
scrollMinHeight = 800;
|
|
21
|
+
handleScroll() {
|
|
22
|
+
this.updateFabVisibility();
|
|
23
|
+
}
|
|
24
|
+
handleResize = () => {
|
|
25
|
+
const newHeight = document.documentElement.scrollHeight;
|
|
26
|
+
if (newHeight !== this.currentPageHeight)
|
|
27
|
+
this.currentPageHeight = newHeight;
|
|
28
|
+
};
|
|
29
|
+
connectedCallback() {
|
|
30
|
+
this.currentPageHeight = document.body.scrollHeight;
|
|
31
|
+
this.resizeObserver = new ResizeObserver(this.handleResize);
|
|
32
|
+
this.resizeObserver.observe(document.documentElement);
|
|
33
|
+
this.updateFabVisibility();
|
|
34
|
+
const mobileMediaQuery = window.matchMedia('(width < 768px)');
|
|
35
|
+
this.isMobile = mobileMediaQuery.matches;
|
|
36
|
+
mobileMediaQuery.onchange = (mql) => {
|
|
37
|
+
this.isMobile = mql.matches;
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
disconnectedCallback() {
|
|
41
|
+
this.resizeObserver.disconnect();
|
|
42
|
+
}
|
|
43
|
+
updateFabVisibility() {
|
|
44
|
+
this.showFab = this.currentPageHeight > this.pageMinHeight && window.scrollY > this.scrollMinHeight;
|
|
45
|
+
}
|
|
46
|
+
scroll() {
|
|
47
|
+
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
48
|
+
}
|
|
49
|
+
render() {
|
|
50
|
+
return (h(Host, { key: 'e2585492b2d991aed8c99c02b68fbc5b68c800da', class: { hidden: !this.showFab }, "aria-hidden": this.showFab ? 'false' : 'true' }, h("button", { key: '15ae24d829c4e88e7eefce2f5e9c9a8bee255124', class: { 'z-fab': true, 'z-fab-extended': !this.isMobile }, onClick: () => this.scroll() }, h("z-icon", { key: 'a5f937a661696ea0a68c558f0232f77de70d156e', name: "back-top" }), h("span", { key: '628786873ddc4db46d6fa73211b0c1e1d576a794' }, "Torna su"))));
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
ZanitBackTop.style = backToTopCss;
|
|
2
54
|
|
|
3
55
|
/**
|
|
4
56
|
* Check if an element contains an event target by checking its composedPath.
|
|
@@ -16,14 +68,6 @@ const moveFocus = (current, next) => {
|
|
|
16
68
|
next.tabIndex = 0;
|
|
17
69
|
next.focus({ preventScroll: true });
|
|
18
70
|
};
|
|
19
|
-
/** Check if event key is ArrowUp */
|
|
20
|
-
const isArrowUpKey = (event) => event.key === 'ArrowUp';
|
|
21
|
-
/** Check if event key is ArrowDown */
|
|
22
|
-
const isArrowDownKey = (event) => event.key === 'ArrowDown';
|
|
23
|
-
/** Check if event key is Tab */
|
|
24
|
-
const isTabKey = (event) => event.key === 'Tab';
|
|
25
|
-
/** Check if event key is Escape */
|
|
26
|
-
const isEscKey = (event) => event.key === 'Escape';
|
|
27
71
|
|
|
28
72
|
const DEFAULT_GROUP_KEY = 'default';
|
|
29
73
|
const DEFAULT_GROUP = {
|
|
@@ -65,32 +109,7 @@ const Menu = ({ controlledBy, items, currentPath = [], onItemKeyDown }) => {
|
|
|
65
109
|
}, href: item.href, role: "menuitem", tabIndex: -1, "aria-current": isActive(item) ? 'page' : 'false', onKeyDown: (event) => onItemKeyDown(event), target: item.target }, item.label))))))))))));
|
|
66
110
|
};
|
|
67
111
|
|
|
68
|
-
var
|
|
69
|
-
(function (SearchEnv) {
|
|
70
|
-
SearchEnv["DEV"] = "dev";
|
|
71
|
-
SearchEnv["TEST"] = "test";
|
|
72
|
-
SearchEnv["PROD"] = "prod";
|
|
73
|
-
})(SearchEnv || (SearchEnv = {}));
|
|
74
|
-
const S3_SHOP_URL = {
|
|
75
|
-
dev: 'https://zanichelli-shop-dev.s3.eu-west-1.amazonaws.com',
|
|
76
|
-
test: 'https://zanichelli-shop-test.s3.eu-west-1.amazonaws.com',
|
|
77
|
-
prod: 'https://zanichelli-shop.s3.eu-west-1.amazonaws.com',
|
|
78
|
-
};
|
|
79
|
-
async function getSubjectsByArea(searchEnv) {
|
|
80
|
-
try {
|
|
81
|
-
const response = await fetch(`${S3_SHOP_URL[searchEnv]}/categories.json`);
|
|
82
|
-
if (!response.ok) {
|
|
83
|
-
throw new Error(`HTTP ${response.status}`);
|
|
84
|
-
}
|
|
85
|
-
return await response.json();
|
|
86
|
-
}
|
|
87
|
-
catch (err) {
|
|
88
|
-
console.error('Error fetching subjects:', err);
|
|
89
|
-
return {};
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
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}";
|
|
112
|
+
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}";
|
|
94
113
|
|
|
95
114
|
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}}";
|
|
96
115
|
|
|
@@ -115,10 +134,6 @@ const ZanitMenubar = class {
|
|
|
115
134
|
current = undefined;
|
|
116
135
|
/** Initial search query. */
|
|
117
136
|
searchQuery = undefined;
|
|
118
|
-
/** Environment for search suggestions */
|
|
119
|
-
searchEnv = SearchEnv.PROD;
|
|
120
|
-
/** Search area (e.g. "SCUOLA", "UNIVERSITÀ", "DIZIONARI"). */
|
|
121
|
-
searchArea;
|
|
122
137
|
timerId;
|
|
123
138
|
/** Setup the list of items. */
|
|
124
139
|
async parseData(data) {
|
|
@@ -470,13 +485,13 @@ const ZanitMenubar = class {
|
|
|
470
485
|
}
|
|
471
486
|
render() {
|
|
472
487
|
if (this.isMobile) {
|
|
473
|
-
return (h("zanit-mobile-menubar", { items: this.items, currentPath: this.currentPath, searchQuery: this.searchQuery, loading: this.loading
|
|
488
|
+
return (h("zanit-mobile-menubar", { items: this.items, currentPath: this.currentPath, searchQuery: this.searchQuery, loading: this.loading }));
|
|
474
489
|
}
|
|
475
490
|
return (h("nav", { "aria-label": "Zanichelli.it" }, h("div", { class: "shadow-wrapper" }, h("div", { class: "width-limiter" }, h("ul", { class: "menubar", role: "menubar", "aria-label": "Zanichelli.it" }, this.loading &&
|
|
476
491
|
[...new Array(4)].map((_, index) => (h(Fragment, null, h("li", { role: "none" }, h("div", { class: "menubar-item" }, h("z-ghost-loading", null))), index < 3 && h("li", { role: "separator" })))), this.items?.map((item, index) => (h(Fragment, null, h("li", { role: "none" }, h("a", { class: {
|
|
477
492
|
'menubar-item': true,
|
|
478
493
|
'active': this.isActive(item),
|
|
479
|
-
}, 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 }, h("span", { "data-text": item.label }, item.label), item.menuItems?.length > 0 && (h("z-icon", { name: this.openMenu === item.id ? 'chevron-up' : 'chevron-down', width: "0.875rem", height: "0.875rem" })))), index < this.items?.length - 1 && h("li", { role: "separator" }))))), h("zanit-search-form", { searchQuery: this.searchQuery,
|
|
494
|
+
}, 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 }, h("span", { "data-text": item.label }, item.label), item.menuItems?.length > 0 && (h("z-icon", { name: this.openMenu === item.id ? 'chevron-up' : 'chevron-down', width: "0.875rem", height: "0.875rem" })))), index < this.items?.length - 1 && h("li", { role: "separator" }))))), h("zanit-search-form", { searchQuery: this.searchQuery, onResetSearch: () => (this.searchQuery = undefined) })), this.items.map((item) => this.openMenu === item.id && (h(Menu, { controlledBy: item.id, items: item.menuItems, currentPath: this.currentPath, onItemKeyDown: (event) => this.handleMenuKeydown(event) })))), this.items
|
|
480
495
|
?.filter((item) => this.isActive(item))
|
|
481
496
|
.map((item) => item.navbarItems?.length && (h("nav", { class: { 'sub-menubar': true, 'shadow-wrapper': true }, "aria-label": `Sezioni: ${item.label}` }, h("ul", { role: "menubar" }, item.navbarItems.map((subitem) => (h(Fragment, null, h("li", { role: "none" }, h("a", { class: {
|
|
482
497
|
'menubar-item': true,
|
|
@@ -492,7 +507,7 @@ const ZanitMenubar = class {
|
|
|
492
507
|
};
|
|
493
508
|
ZanitMenubar.style = menubarCss + menuCss$1;
|
|
494
509
|
|
|
495
|
-
const mobileMenubarCss = ":host{position:relative;z-index:2;display:block;width:100%;max-width:100%;
|
|
510
|
+
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}";
|
|
496
511
|
|
|
497
512
|
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}}";
|
|
498
513
|
|
|
@@ -509,10 +524,6 @@ const ZanitMobileMenubar = class {
|
|
|
509
524
|
searchQuery = undefined;
|
|
510
525
|
/** Whether the menubar is loading the data. */
|
|
511
526
|
loading = false;
|
|
512
|
-
/** Environment for search suggestions */
|
|
513
|
-
searchEnv = SearchEnv.PROD;
|
|
514
|
-
/** Search area (e.g. "SCUOLA", "UNIVERSITÀ", "DIZIONARI"). */
|
|
515
|
-
searchArea;
|
|
516
527
|
/** Last active item ID. */
|
|
517
528
|
lastCurrent = undefined;
|
|
518
529
|
parentItem = undefined;
|
|
@@ -642,7 +653,7 @@ const ZanitMobileMenubar = class {
|
|
|
642
653
|
this.open = false;
|
|
643
654
|
}
|
|
644
655
|
render() {
|
|
645
|
-
return (h("nav", { key: '
|
|
656
|
+
return (h("nav", { key: '3c60ac4ac98ee3defb91d07ed2b877031f0a35df', "aria-label": "Zanichelli.it" }, h("button", { key: 'bebe58a827addf39e62deb9c3ef44296f14da700', 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() }, h("z-icon", { key: '0b3e97a6bcb3f54c1b0669f9fe012ac3ff5b5632', name: this.open ? 'multiply' : 'burger-menu', width: "1.5rem", height: "1.5rem" })), h("z-logo", { key: 'a7216fc628ab13b243ace77a89d5dc16bde1f6da', imageAlt: "Logo Zanichelli", link: "/", height: 32, width: 126 }), h("zanit-search-form", { key: 'bdfd612ecc8cf6fb7d4d1941474a8b6cc0b8ff2d', searchQuery: this.searchQuery, onResetSearch: () => (this.searchQuery = undefined) }), this.open && (h("ul", { key: 'bf3f32326a98ff6a47a3734ac98f8afda74f0d12', class: "mobile-menu", role: "menubar" }, !this.loading && this.currentPath && this.currentPath.length > 0 && (h("li", { key: 'a157937b4358cba0a1bc990576051f4a703cedd4', role: "none" }, h("a", { key: '9f36e81c276da144abf96e9e1dd7cf2a84bdc4b7', class: "parent", href: this.parentItem?.href ?? '/', id: this.parentItem?.id ?? undefined, role: "menuitem", tabIndex: -1, onKeyDown: (event) => this.handleItemKeydown(event), target: this.parentItem?.target }, h("z-icon", { key: 'ba4c4e1c0b1132cbcd4be7a4088bf1fb6618f062', name: "arrow-left", width: "0.5rem", height: "0.5rem" }), h("span", { key: 'cc30b285857d7cb7908e35dadf424e0940342949' }, this.parentItem?.label || 'Home')))), this.loading ? (h("div", { class: "items-container", role: "none" }, [...new Array(4)].map(() => (h("li", { role: "none" }, h("div", { class: "menubar-item", role: "none" }, h("z-ghost-loading", null))))))) : this.menuType === 'menu' ? (h(Menu, { items: this.menuItems, controlledBy: this.parentItem?.id, currentPath: this.currentPath, onItemKeyDown: (event) => this.handleItemKeydown(event) })) : (this.menuItems?.length > 0 && (h("div", { class: "items-container", role: "none" }, this.menuItems.map((item) => (h("li", { role: "none" }, h("a", { class: {
|
|
646
657
|
'menu-item': this.menuType === 'menu',
|
|
647
658
|
'menubar-item': this.menuType === 'menubar',
|
|
648
659
|
}, 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 }, h("span", { "data-text": item.label }, item.label))))))))))));
|
|
@@ -655,91 +666,7 @@ const ZanitMobileMenubar = class {
|
|
|
655
666
|
};
|
|
656
667
|
ZanitMobileMenubar.style = mobileMenubarCss + menuCss;
|
|
657
668
|
|
|
658
|
-
var
|
|
659
|
-
(function (AREA_LABELS) {
|
|
660
|
-
AREA_LABELS["SCUOLA"] = "Scuola";
|
|
661
|
-
AREA_LABELS["UNIVERSIT\u00C0"] = "Universit\u00E0";
|
|
662
|
-
AREA_LABELS["GIURIDICO"] = "Giuridico";
|
|
663
|
-
AREA_LABELS["DIZIONARI"] = "Dizionari";
|
|
664
|
-
AREA_LABELS["SAGGISTICA"] = "Saggistica";
|
|
665
|
-
})(AREA_LABELS || (AREA_LABELS = {}));
|
|
666
|
-
const AREA_ORDER = Object.keys(AREA_LABELS);
|
|
667
|
-
function buildSuggestions(query, subjectsByArea, selectedArea) {
|
|
668
|
-
const matchingSubjectAreas = findSubjectAreas(query, subjectsByArea);
|
|
669
|
-
const hasSubject = matchingSubjectAreas.length > 0;
|
|
670
|
-
const subject = hasSubject ? query.toUpperCase() : undefined;
|
|
671
|
-
const suggestions = [];
|
|
672
|
-
if (selectedArea)
|
|
673
|
-
suggestions.push(buildWordSuggestion(query, selectedArea));
|
|
674
|
-
suggestions.push(buildWordSuggestion(query));
|
|
675
|
-
if (hasSubject) {
|
|
676
|
-
if (selectedArea) {
|
|
677
|
-
const orderedSubjectAreas = [
|
|
678
|
-
...matchingSubjectAreas.filter((area) => area === selectedArea),
|
|
679
|
-
...matchingSubjectAreas
|
|
680
|
-
.filter((area) => area !== selectedArea)
|
|
681
|
-
.sort((a, b) => getAreaOrder(a) - getAreaOrder(b)),
|
|
682
|
-
];
|
|
683
|
-
orderedSubjectAreas.forEach((area) => suggestions.push(buildSubjectSuggestion(query, area, subject)));
|
|
684
|
-
}
|
|
685
|
-
else {
|
|
686
|
-
matchingSubjectAreas
|
|
687
|
-
.sort((a, b) => getAreaOrder(a) - getAreaOrder(b))
|
|
688
|
-
.forEach((subjectArea) => suggestions.push(buildSubjectSuggestion(query, subjectArea, subject)));
|
|
689
|
-
}
|
|
690
|
-
}
|
|
691
|
-
return suggestions;
|
|
692
|
-
}
|
|
693
|
-
const buildWordSuggestion = (user_query, area) => {
|
|
694
|
-
return {
|
|
695
|
-
id: buildId(`word-${user_query}-${area}`),
|
|
696
|
-
label: buildLabel(user_query, area, false, false),
|
|
697
|
-
html_label: buildLabel(user_query, area, false, true),
|
|
698
|
-
url: buildUrl({ q: user_query, ...(area ? { area } : {}), user_query }),
|
|
699
|
-
...buildDetail(user_query, user_query, area),
|
|
700
|
-
};
|
|
701
|
-
};
|
|
702
|
-
const buildSubjectSuggestion = (user_query, area, subject) => {
|
|
703
|
-
return {
|
|
704
|
-
id: buildId(`subj-${user_query}-${area}-${subject}`),
|
|
705
|
-
label: buildLabel(user_query, area, true, false),
|
|
706
|
-
html_label: buildLabel(user_query, area, true, true),
|
|
707
|
-
url: buildUrl({ area, materia: subject, user_query }),
|
|
708
|
-
...buildDetail(user_query, undefined, area, subject),
|
|
709
|
-
};
|
|
710
|
-
};
|
|
711
|
-
const buildId = (string) => string
|
|
712
|
-
.split('')
|
|
713
|
-
.map((c) => c.charCodeAt(0).toString(16))
|
|
714
|
-
.join('');
|
|
715
|
-
const buildUrl = (params) => {
|
|
716
|
-
return `ricerca?${new URLSearchParams(params).toString()}`;
|
|
717
|
-
};
|
|
718
|
-
const buildDetail = (user_query, query, area, subject) => ({
|
|
719
|
-
user_query,
|
|
720
|
-
...(query ? { query } : {}),
|
|
721
|
-
...(area ? { area } : {}),
|
|
722
|
-
...(subject ? { subject } : {}),
|
|
723
|
-
});
|
|
724
|
-
const buildLabel = (user_query, area, isSubject = false, isHtml = false) => {
|
|
725
|
-
const openStrong = isHtml ? `<strong>` : ``;
|
|
726
|
-
const closeStrong = isHtml ? `</strong>` : ``;
|
|
727
|
-
return `Cerca la ${isSubject ? `materia` : `parola`} ${openStrong}${user_query}${closeStrong} ${area ? `nel catalogo ${openStrong}${AREA_LABELS[area] ?? area}${closeStrong}` : `in tutto il sito`}`;
|
|
728
|
-
};
|
|
729
|
-
function findSubjectAreas(query, subjectsByArea) {
|
|
730
|
-
const cleanedQuery = cleanSearch(query);
|
|
731
|
-
return Object.entries(subjectsByArea)
|
|
732
|
-
.filter(([, subjects]) => subjects.some((subject) => subject.toLowerCase() === cleanedQuery))
|
|
733
|
-
.map(([area]) => area);
|
|
734
|
-
}
|
|
735
|
-
/** Clear search string: lowercase, remove multiple spaces */
|
|
736
|
-
const cleanSearch = (s) => s.toLowerCase().replace(/\s+/g, ' ');
|
|
737
|
-
const getAreaOrder = (area) => {
|
|
738
|
-
const index = AREA_ORDER.indexOf(area);
|
|
739
|
-
return index >= 0 ? index : 100;
|
|
740
|
-
};
|
|
741
|
-
|
|
742
|
-
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}}";
|
|
669
|
+
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}}";
|
|
743
670
|
|
|
744
671
|
const ZanitSearchForm = class {
|
|
745
672
|
constructor(hostRef) {
|
|
@@ -748,77 +675,44 @@ const ZanitSearchForm = class {
|
|
|
748
675
|
this.resetSearch = createEvent(this, "resetSearch");
|
|
749
676
|
}
|
|
750
677
|
formElement;
|
|
751
|
-
subjectsByArea = {};
|
|
752
|
-
timer;
|
|
753
678
|
get host() { return getElement(this); }
|
|
754
679
|
/** Indicates whether the searchbar is visible and usable. */
|
|
755
680
|
showSearchbar = false;
|
|
756
681
|
/** Search query to apply. */
|
|
757
682
|
_searchQuery = undefined;
|
|
758
|
-
/** Search suggestions to show in the autocomplete dropdown. */
|
|
759
|
-
suggestions = [];
|
|
760
|
-
/** Active suggestion - used for keyboard navigation */
|
|
761
|
-
activeSuggestion = '';
|
|
762
|
-
/** Show suggestions list */
|
|
763
|
-
showSuggestions = false;
|
|
764
683
|
/** Initial search query */
|
|
765
684
|
searchQuery = undefined;
|
|
766
|
-
/** Environment for search suggestions */
|
|
767
|
-
searchEnv = SearchEnv.PROD;
|
|
768
|
-
/** Search area (e.g. "SCUOLA", "UNIVERSITÀ", "DIZIONARI"). */
|
|
769
|
-
searchArea;
|
|
770
685
|
onSearchQueryChange() {
|
|
771
686
|
this._searchQuery = this.searchQuery;
|
|
772
687
|
if (this.searchQuery) {
|
|
773
688
|
this.openSearchbar();
|
|
774
689
|
}
|
|
775
|
-
this.resetSuggestions();
|
|
776
|
-
}
|
|
777
|
-
onSearchAreaChange() {
|
|
778
|
-
this.resetSuggestions();
|
|
779
|
-
}
|
|
780
|
-
onShowSearchbarChange() {
|
|
781
|
-
if (!this.showSearchbar) {
|
|
782
|
-
this.showSuggestions = false;
|
|
783
|
-
}
|
|
784
|
-
}
|
|
785
|
-
onShowSuggestionsChange() {
|
|
786
|
-
this.activeSuggestion = '';
|
|
787
690
|
}
|
|
788
691
|
/** Emitted on search form submission. */
|
|
789
692
|
search;
|
|
790
693
|
resetSearch;
|
|
791
694
|
async connectedCallback() {
|
|
792
|
-
this.subjectsByArea = await getSubjectsByArea(this.searchEnv);
|
|
793
695
|
this.showSearchbar = !!this.searchQuery;
|
|
794
696
|
this._searchQuery = this.searchQuery;
|
|
795
697
|
}
|
|
796
698
|
/** Close open searchbar when clicking outside. */
|
|
797
699
|
handleOutsideClick(event) {
|
|
798
|
-
if (this.showSearchbar && this.
|
|
700
|
+
if (this.showSearchbar && this.formElement && !containsTarget(this.formElement, event)) {
|
|
799
701
|
this.showSearchbar = false;
|
|
800
702
|
}
|
|
801
703
|
}
|
|
802
|
-
/** Close the
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
/** Close the searchbar/suggestions when pressing Tab. */
|
|
815
|
-
handleTab(event) {
|
|
816
|
-
if (!isTabKey(event)) {
|
|
817
|
-
return;
|
|
818
|
-
}
|
|
819
|
-
this.showSuggestions = false;
|
|
820
|
-
if (!containsTarget(this.host, event)) {
|
|
821
|
-
this.showSearchbar = false;
|
|
704
|
+
/** Close the menu when pressing Escape or Tab. */
|
|
705
|
+
handleKeydown(event) {
|
|
706
|
+
switch (event.key) {
|
|
707
|
+
case 'Escape':
|
|
708
|
+
this.showSearchbar = false;
|
|
709
|
+
break;
|
|
710
|
+
case 'Tab':
|
|
711
|
+
if (containsTarget(this.host, event)) {
|
|
712
|
+
break;
|
|
713
|
+
}
|
|
714
|
+
this.showSearchbar = false;
|
|
715
|
+
break;
|
|
822
716
|
}
|
|
823
717
|
}
|
|
824
718
|
openSearchbar() {
|
|
@@ -832,119 +726,35 @@ const ZanitSearchForm = class {
|
|
|
832
726
|
this.searchQuery = undefined;
|
|
833
727
|
this.resetSearch.emit();
|
|
834
728
|
}
|
|
835
|
-
resetSuggestions() {
|
|
836
|
-
this.suggestions = [];
|
|
837
|
-
this.showSuggestions = false;
|
|
838
|
-
}
|
|
839
729
|
handleInputChange(event) {
|
|
840
730
|
this._searchQuery = event.target.value;
|
|
841
731
|
if (!this._searchQuery) {
|
|
842
732
|
this.searchQuery = undefined;
|
|
843
733
|
}
|
|
844
|
-
this.updateSuggestions();
|
|
845
|
-
}
|
|
846
|
-
updateSuggestions() {
|
|
847
|
-
clearTimeout(this.timer);
|
|
848
|
-
const query = (this._searchQuery || '').trim();
|
|
849
|
-
if (query.length < 3) {
|
|
850
|
-
this.resetSuggestions();
|
|
851
|
-
return;
|
|
852
|
-
}
|
|
853
|
-
this.timer = setTimeout(() => {
|
|
854
|
-
this.resetSuggestions();
|
|
855
|
-
this.suggestions = buildSuggestions(query, this.subjectsByArea, this.searchArea?.toUpperCase());
|
|
856
|
-
this.showSuggestions = true;
|
|
857
|
-
}, 300);
|
|
858
734
|
}
|
|
859
735
|
onSearchSubmit(event) {
|
|
860
736
|
event.preventDefault();
|
|
861
737
|
if (!this._searchQuery) {
|
|
862
738
|
return;
|
|
863
739
|
}
|
|
864
|
-
if (this.activeSuggestion) {
|
|
865
|
-
const suggestion = this.suggestions.find((s) => s.id === this.activeSuggestion);
|
|
866
|
-
if (suggestion) {
|
|
867
|
-
this.submitSuggestionSearch(suggestion);
|
|
868
|
-
this.showSuggestions = false;
|
|
869
|
-
return;
|
|
870
|
-
}
|
|
871
|
-
}
|
|
872
740
|
this.showSearchbar = false;
|
|
873
|
-
const searchEv = this.search.emit({ query: this._searchQuery
|
|
741
|
+
const searchEv = this.search.emit({ query: this._searchQuery });
|
|
874
742
|
// do not submit the form if the event default behavior was prevented
|
|
875
743
|
if (searchEv.defaultPrevented) {
|
|
876
744
|
return;
|
|
877
745
|
}
|
|
878
746
|
this.formElement.submit();
|
|
879
747
|
}
|
|
880
|
-
submitSuggestionSearch(suggestion) {
|
|
881
|
-
const ev = this.search.emit({
|
|
882
|
-
user_query: suggestion.user_query,
|
|
883
|
-
query: suggestion.query,
|
|
884
|
-
area: suggestion.area,
|
|
885
|
-
subject: suggestion.subject,
|
|
886
|
-
});
|
|
887
|
-
if (!ev.defaultPrevented) {
|
|
888
|
-
window.location.href = suggestion.url;
|
|
889
|
-
}
|
|
890
|
-
}
|
|
891
|
-
handleSuggestionsNav(event) {
|
|
892
|
-
if (!isArrowDownKey(event) && !isArrowUpKey(event)) {
|
|
893
|
-
return;
|
|
894
|
-
}
|
|
895
|
-
if (!this.suggestions.length) {
|
|
896
|
-
return;
|
|
897
|
-
}
|
|
898
|
-
const options = this.suggestions.map((o) => o.id);
|
|
899
|
-
if (!options.length) {
|
|
900
|
-
return;
|
|
901
|
-
}
|
|
902
|
-
event.preventDefault();
|
|
903
|
-
event.stopPropagation();
|
|
904
|
-
if (!this.showSuggestions) {
|
|
905
|
-
this.showSuggestions = true;
|
|
906
|
-
}
|
|
907
|
-
let nextId = null;
|
|
908
|
-
const firstId = options[0];
|
|
909
|
-
const lastId = options[options.length - 1];
|
|
910
|
-
const currOption = options.indexOf(this.activeSuggestion);
|
|
911
|
-
if (currOption < 0) {
|
|
912
|
-
nextId = isArrowDownKey(event) ? firstId : lastId;
|
|
913
|
-
}
|
|
914
|
-
else {
|
|
915
|
-
if (isArrowDownKey(event)) {
|
|
916
|
-
nextId = options[currOption + 1] || lastId;
|
|
917
|
-
}
|
|
918
|
-
else {
|
|
919
|
-
nextId = options[currOption - 1] || firstId;
|
|
920
|
-
}
|
|
921
|
-
}
|
|
922
|
-
this.activeSuggestion = nextId;
|
|
923
|
-
}
|
|
924
|
-
renderSuggestions() {
|
|
925
|
-
return (h("div", { class: { 'suggestions-wrapper': true, 'hidden': !this.showSuggestions || !this.suggestions.length }, onPointerOver: (e) => e.preventDefault() }, h("div", { id: "search-suggestions", class: "suggestions", role: "listbox", "aria-label": "Seleziona tra i suggerimenti" }, this.suggestions.map((suggestion, k) => {
|
|
926
|
-
return (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) }));
|
|
927
|
-
}))));
|
|
928
|
-
}
|
|
929
748
|
render() {
|
|
930
|
-
return (h(
|
|
931
|
-
// INFO: prevent ESC from clearing input
|
|
932
|
-
if (isEscKey(e)) {
|
|
933
|
-
e.preventDefault();
|
|
934
|
-
}
|
|
935
|
-
this.handleSuggestionsNav(e);
|
|
936
|
-
} })), 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 : h("span", { class: "searchbar-button-label" }, "Cerca"), h("z-icon", { key: '1616128d97c04a1e4768f163fcc20a21664daca4', name: "search" }))), this.renderSuggestions()));
|
|
749
|
+
return (h("form", { key: 'e1d177efbec2aea39cd30cfc8f02fe4e9f5e82d9', 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() }, h("div", { key: '49aeaa97516d5782e1fcf866a5526ff19f8b0c14', class: "input-wrapper", role: "none" }, this.searchQuery && (h("button", { key: '61ec6636b5efd875bcf879b28894ffd1cf8ac802', type: "reset", "aria-label": "Svuota campo di ricerca", disabled: !this.showSearchbar, "aria-hidden": !this.showSearchbar ? 'true' : undefined, tabIndex: !this.showSearchbar ? -1 : 0 }, h("z-icon", { key: 'a896ac0e6ae2762e9d5dbb0351634505b519a684', name: "multiply-circled" }))), h("input", { key: '3ab6655ef669a6c30b5bbe547884c680284d7f14', 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 })), h("button", { key: '3df725da35664493fe70a15ea39184ab00b37e32', 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 : h("span", { class: "searchbar-button-label" }, "Cerca"), h("z-icon", { key: '8f6cfd25fbacbc04b7bc060470667eb9b2a45179', name: "search" }))));
|
|
937
750
|
}
|
|
938
751
|
static get watchers() { return {
|
|
939
|
-
"searchQuery": ["onSearchQueryChange"]
|
|
940
|
-
"searchArea": ["onSearchAreaChange"],
|
|
941
|
-
"showSearchbar": ["onShowSearchbarChange"],
|
|
942
|
-
"showSuggestions": ["onShowSuggestionsChange"]
|
|
752
|
+
"searchQuery": ["onSearchQueryChange"]
|
|
943
753
|
}; }
|
|
944
754
|
};
|
|
945
755
|
ZanitSearchForm.style = searchFormCss;
|
|
946
756
|
|
|
947
|
-
export { ZanitMenubar as zanit_menubar, ZanitMobileMenubar as zanit_mobile_menubar, ZanitSearchForm as zanit_search_form };
|
|
948
|
-
//# sourceMappingURL=zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.js.map
|
|
757
|
+
export { ZanitBackTop as zanit_back_to_top, ZanitMenubar as zanit_menubar, ZanitMobileMenubar as zanit_mobile_menubar, ZanitSearchForm as zanit_search_form };
|
|
758
|
+
//# sourceMappingURL=zanit-back-to-top.zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.js.map
|
|
949
759
|
|
|
950
|
-
//# sourceMappingURL=zanit-
|
|
760
|
+
//# sourceMappingURL=zanit-back-to-top_4.entry.js.map
|