@hotosm/ui 0.2.0-b6 → 0.3.0-b3
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/README.md +25 -17
- package/dist/chunks/chunk.3FANZE43.js +1 -0
- package/dist/chunks/chunk.7KXDULC3.js +86 -0
- package/dist/chunks/chunk.AFGPUO4H.js +1 -0
- package/dist/chunks/chunk.B3MIQKX3.js +66 -0
- package/dist/chunks/chunk.FWYUHKRF.js +1 -0
- package/dist/chunks/chunk.GVYEHPTU.js +17 -0
- package/dist/chunks/chunk.GY32O3WU.js +26 -0
- package/dist/chunks/chunk.JK2P4SXH.js +1 -0
- package/dist/chunks/chunk.KGPID6RT.js +1 -0
- package/dist/chunks/chunk.KTVXG6ZT.js +6 -0
- package/dist/chunks/chunk.N5M5RY5M.js +1 -0
- package/dist/chunks/chunk.NZIJQUIE.js +1 -0
- package/dist/chunks/chunk.PUMXQ24J.js +4 -0
- package/dist/chunks/chunk.Q5SXKMUN.js +18 -0
- package/dist/chunks/chunk.R73PKLI4.js +6 -0
- package/{components/icons.ts → dist/chunks/chunk.WPXUR5EI.js} +12 -47
- package/dist/components/consent/consent.component.d.ts +21 -0
- package/dist/components/consent/consent.component.js +1 -0
- package/dist/components/consent/consent.d.ts +8 -0
- package/dist/components/consent/consent.js +1 -0
- package/dist/components/consent/consent.styles.d.ts +2 -0
- package/dist/components/consent/consent.styles.js +1 -0
- package/dist/components/header/header.component.d.ts +33 -0
- package/dist/components/header/header.component.js +1 -0
- package/dist/components/header/header.d.ts +7 -27
- package/dist/components/header/header.js +1 -0
- package/dist/components/header/header.styles.d.ts +2 -2
- package/dist/components/header/header.styles.js +1 -0
- package/dist/components/icons.js +1 -0
- package/dist/components/logo/logo.component.d.ts +10 -0
- package/dist/components/logo/logo.component.js +1 -0
- package/dist/components/logo/logo.d.ts +7 -9
- package/dist/components/logo/logo.js +1 -0
- package/dist/components/logo/logo.styles.d.ts +1 -1
- package/dist/components/logo/logo.styles.js +1 -0
- package/dist/components/toolbar/toolbar.component.d.ts +24 -0
- package/dist/components/toolbar/toolbar.component.js +1 -0
- package/dist/components/toolbar/toolbar.d.ts +7 -19
- package/dist/components/toolbar/toolbar.js +1 -0
- package/dist/components/toolbar/toolbar.styles.d.ts +1 -1
- package/dist/components/toolbar/toolbar.styles.js +1 -0
- package/dist/components/tracking/tracking.component.d.ts +19 -0
- package/dist/components/tracking/tracking.component.js +1 -0
- package/dist/components/tracking/tracking.d.ts +5 -20
- package/dist/components/tracking/tracking.js +1 -0
- package/{components/index.ts → dist/hotosm-ui.d.ts} +6 -146
- package/dist/hotosm-ui.js +1 -18228
- package/dist/react/consent/index.d.ts +3 -0
- package/dist/react/consent/index.js +1 -0
- package/dist/react/header/index.d.ts +3 -0
- package/dist/react/header/index.js +1 -0
- package/dist/{components/react → react}/index.d.ts +5 -5
- package/dist/react/index.js +1 -0
- package/dist/react/logo/index.d.ts +3 -0
- package/dist/react/logo/index.js +1 -0
- package/dist/react/toolbar/index.d.ts +3 -0
- package/dist/react/toolbar/index.js +1 -0
- package/dist/react/tracking/index.d.ts +3 -0
- package/dist/react/tracking/index.js +1 -0
- package/dist/style.css +2 -1
- package/{theme → dist/themes}/hot.css +59 -2
- package/package.json +39 -62
- package/components/header/header.styles.ts +0 -103
- package/components/header/header.ts +0 -160
- package/components/logo/logo.styles.ts +0 -8
- package/components/logo/logo.ts +0 -37
- package/components/react/Header.ts +0 -16
- package/components/react/Logo.ts +0 -15
- package/components/react/Toolbar.ts +0 -24
- package/components/react/Tracking.ts +0 -17
- package/components/react/index.ts +0 -63
- package/components/toolbar/toolbar.styles.ts +0 -6
- package/components/toolbar/toolbar.ts +0 -171
- package/components/tracking/tracking.styles.ts +0 -23
- package/components/tracking/tracking.ts +0 -177
- package/dist/components/index.d.ts +0 -130
- package/dist/components/react/Header.d.ts +0 -2
- package/dist/components/react/Logo.d.ts +0 -2
- package/dist/components/react/Toolbar.d.ts +0 -2
- package/dist/components/react/Tracking.d.ts +0 -2
- package/dist/components/tracking/tracking.styles.d.ts +0 -2
- package/i18n/en.xliff +0 -24
- package/theme/icons/apple-touch-icon-180x180.png +0 -0
- package/theme/icons/favicon.ico +0 -0
- package/theme/icons/favicon.svg +0 -1
- package/theme/icons/maskable-icon-512x512.png +0 -0
- package/theme/icons/pwa-192x192.png +0 -0
- package/theme/icons/pwa-512x512.png +0 -0
- package/theme/icons/pwa-64x64.png +0 -0
- /package/{theme → dist/assets}/logo/hot-logo-icon.svg +0 -0
- /package/{theme → dist/assets}/logo/hot-logo-png.png +0 -0
- /package/{theme → dist/assets}/logo/hot-logo-text.svg +0 -0
- /package/{theme → dist/themes}/hot-sl.css +0 -0
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
// @ts-ignore
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
import { createComponent } from '@lit/react';
|
|
4
|
-
import Header from '../header/header';
|
|
5
|
-
|
|
6
|
-
const reactWrapper = createComponent({
|
|
7
|
-
tagName: 'hot-header',
|
|
8
|
-
elementClass: Header,
|
|
9
|
-
react: React,
|
|
10
|
-
events: {
|
|
11
|
-
onLogin: 'login',
|
|
12
|
-
},
|
|
13
|
-
displayName: 'HotHeader'
|
|
14
|
-
});
|
|
15
|
-
|
|
16
|
-
export default reactWrapper;
|
package/components/react/Logo.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
// @ts-ignore
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import { createComponent } from '@lit/react';
|
|
5
|
-
import Logo from '../logo/logo';
|
|
6
|
-
|
|
7
|
-
const reactWrapper = createComponent({
|
|
8
|
-
tagName: 'hot-logo',
|
|
9
|
-
elementClass: Logo,
|
|
10
|
-
react: React,
|
|
11
|
-
events: {},
|
|
12
|
-
displayName: 'HotLogo'
|
|
13
|
-
});
|
|
14
|
-
|
|
15
|
-
export default reactWrapper;
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
// @ts-ignore
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import { createComponent } from '@lit/react';
|
|
5
|
-
import Toolbar from '../toolbar/toolbar';
|
|
6
|
-
|
|
7
|
-
const reactWrapper = createComponent({
|
|
8
|
-
tagName: 'hot-toolbar',
|
|
9
|
-
elementClass: Toolbar,
|
|
10
|
-
react: React,
|
|
11
|
-
events: {
|
|
12
|
-
onUndoClick: 'undo',
|
|
13
|
-
onRedoClick: 'redo',
|
|
14
|
-
onBoldClick: 'bold',
|
|
15
|
-
onItalicClick: 'italic',
|
|
16
|
-
onUnderlineClick: 'underline',
|
|
17
|
-
onLeftalignClick: 'leftalign',
|
|
18
|
-
onCenteralignClick: 'centeralign',
|
|
19
|
-
onRightalignClick: 'rightalign',
|
|
20
|
-
},
|
|
21
|
-
displayName: 'HotToolbar'
|
|
22
|
-
});
|
|
23
|
-
|
|
24
|
-
export default reactWrapper;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
// @ts-ignore
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
import { createComponent } from '@lit/react';
|
|
4
|
-
import Tracking from '../tracking/tracking';
|
|
5
|
-
|
|
6
|
-
const reactWrapper = createComponent({
|
|
7
|
-
tagName: 'hot-tracking',
|
|
8
|
-
elementClass: Tracking,
|
|
9
|
-
react: React,
|
|
10
|
-
events: {
|
|
11
|
-
onAgree: 'agree',
|
|
12
|
-
onDisagree: 'disagree',
|
|
13
|
-
},
|
|
14
|
-
displayName: 'HotTracking'
|
|
15
|
-
});
|
|
16
|
-
|
|
17
|
-
export default reactWrapper;
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
export { default as Header } from './Header';
|
|
2
|
-
export { default as Toolbar } from './Toolbar';
|
|
3
|
-
export { default as Tracking } from './Tracking';
|
|
4
|
-
export { default as Logo } from './Logo';
|
|
5
|
-
|
|
6
|
-
export { default as Alert } from '@shoelace-style/shoelace/dist/react/alert/index.js';
|
|
7
|
-
export { default as AnimatedImage } from '@shoelace-style/shoelace/dist/react/animated-image/index.js';
|
|
8
|
-
export { default as Animation } from '@shoelace-style/shoelace/dist/react/animation/index.js';
|
|
9
|
-
export { default as Avatar } from '@shoelace-style/shoelace/dist/react/avatar/index.js';
|
|
10
|
-
export { default as Badge } from '@shoelace-style/shoelace/dist/react/badge/index.js';
|
|
11
|
-
export { default as Breadcrumb } from '@shoelace-style/shoelace/dist/react/breadcrumb/index.js';
|
|
12
|
-
export { default as BreadcrumbItem } from '@shoelace-style/shoelace/dist/react/breadcrumb-item/index.js';
|
|
13
|
-
export { default as Button } from '@shoelace-style/shoelace/dist/react/button/index.js';
|
|
14
|
-
export { default as ButtonGroup } from '@shoelace-style/shoelace/dist/react/button-group/index.js';
|
|
15
|
-
export { default as Card } from '@shoelace-style/shoelace/dist/react/card/index.js';
|
|
16
|
-
export { default as Carousel } from '@shoelace-style/shoelace/dist/react/carousel/index.js';
|
|
17
|
-
export { default as CarouselItem } from '@shoelace-style/shoelace/dist/react/carousel-item/index.js';
|
|
18
|
-
export { default as Checkbox } from '@shoelace-style/shoelace/dist/react/checkbox/index.js';
|
|
19
|
-
export { default as ColorPicker } from '@shoelace-style/shoelace/dist/react/color-picker/index.js';
|
|
20
|
-
export { default as CopyButton } from '@shoelace-style/shoelace/dist/react/copy-button/index.js';
|
|
21
|
-
export { default as Details } from '@shoelace-style/shoelace/dist/react/details/index.js';
|
|
22
|
-
export { default as Dialog } from '@shoelace-style/shoelace/dist/react/dialog/index.js';
|
|
23
|
-
export { default as Divider } from '@shoelace-style/shoelace/dist/react/divider/index.js';
|
|
24
|
-
export { default as Drawer } from '@shoelace-style/shoelace/dist/react/drawer/index.js';
|
|
25
|
-
export { default as Dropdown } from '@shoelace-style/shoelace/dist/react/dropdown/index.js';
|
|
26
|
-
export { default as FormatBytes } from '@shoelace-style/shoelace/dist/react/format-bytes/index.js';
|
|
27
|
-
export { default as FormatDate } from '@shoelace-style/shoelace/dist/react/format-date/index.js';
|
|
28
|
-
export { default as FormatNumber } from '@shoelace-style/shoelace/dist/react/format-number/index.js';
|
|
29
|
-
export { default as Icon } from '@shoelace-style/shoelace/dist/react/icon/index.js';
|
|
30
|
-
export { default as IconButton } from '@shoelace-style/shoelace/dist/react/icon-button/index.js';
|
|
31
|
-
export { default as ImageComparer } from '@shoelace-style/shoelace/dist/react/image-comparer/index.js';
|
|
32
|
-
export { default as Include } from '@shoelace-style/shoelace/dist/react/include/index.js';
|
|
33
|
-
export { default as Input } from '@shoelace-style/shoelace/dist/react/input/index.js';
|
|
34
|
-
export { default as Menu } from '@shoelace-style/shoelace/dist/react/menu/index.js';
|
|
35
|
-
export { default as MenuItem } from '@shoelace-style/shoelace/dist/react/menu-item/index.js';
|
|
36
|
-
export { default as MenuLabel } from '@shoelace-style/shoelace/dist/react/menu-label/index.js';
|
|
37
|
-
export { default as MutationObserver } from '@shoelace-style/shoelace/dist/react/mutation-observer/index.js';
|
|
38
|
-
export { default as Option } from '@shoelace-style/shoelace/dist/react/option/index.js';
|
|
39
|
-
export { default as Popup } from '@shoelace-style/shoelace/dist/react/popup/index.js';
|
|
40
|
-
export { default as ProgressBar } from '@shoelace-style/shoelace/dist/react/progress-bar/index.js';
|
|
41
|
-
export { default as ProgressRing } from '@shoelace-style/shoelace/dist/react/progress-ring/index.js';
|
|
42
|
-
export { default as QRCode } from '@shoelace-style/shoelace/dist/react/qr-code/index.js';
|
|
43
|
-
export { default as Radio } from '@shoelace-style/shoelace/dist/react/radio/index.js';
|
|
44
|
-
export { default as RadioButton } from '@shoelace-style/shoelace/dist/react/radio-button/index.js';
|
|
45
|
-
export { default as RadioGroup } from '@shoelace-style/shoelace/dist/react/radio-group/index.js';
|
|
46
|
-
export { default as Range } from '@shoelace-style/shoelace/dist/react/range/index.js';
|
|
47
|
-
export { default as Rating } from '@shoelace-style/shoelace/dist/react/rating/index.js';
|
|
48
|
-
export { default as RelativeTime } from '@shoelace-style/shoelace/dist/react/relative-time/index.js';
|
|
49
|
-
export { default as ResizeObserver } from '@shoelace-style/shoelace/dist/react/resize-observer/index.js';
|
|
50
|
-
export { default as Select } from '@shoelace-style/shoelace/dist/react/select/index.js';
|
|
51
|
-
export { default as Skeleton } from '@shoelace-style/shoelace/dist/react/skeleton/index.js';
|
|
52
|
-
export { default as Spinner } from '@shoelace-style/shoelace/dist/react/spinner/index.js';
|
|
53
|
-
export { default as SplitPanel } from '@shoelace-style/shoelace/dist/react/split-panel/index.js';
|
|
54
|
-
export { default as Switch } from '@shoelace-style/shoelace/dist/react/switch/index.js';
|
|
55
|
-
export { default as Tab } from '@shoelace-style/shoelace/dist/react/tab/index.js';
|
|
56
|
-
export { default as TabGroup } from '@shoelace-style/shoelace/dist/react/tab-group/index.js';
|
|
57
|
-
export { default as TabPanel } from '@shoelace-style/shoelace/dist/react/tab-panel/index.js';
|
|
58
|
-
export { default as Tag } from '@shoelace-style/shoelace/dist/react/tag/index.js';
|
|
59
|
-
export { default as Textarea } from '@shoelace-style/shoelace/dist/react/textarea/index.js';
|
|
60
|
-
export { default as Tooltip } from '@shoelace-style/shoelace/dist/react/tooltip/index.js';
|
|
61
|
-
export { default as Tree } from '@shoelace-style/shoelace/dist/react/tree/index.js';
|
|
62
|
-
export { default as TreeItem } from '@shoelace-style/shoelace/dist/react/tree-item/index.js';
|
|
63
|
-
export { default as VisuallyHidden } from '@shoelace-style/shoelace/dist/react/visually-hidden/index.js';
|
|
@@ -1,171 +0,0 @@
|
|
|
1
|
-
import "../../theme/hot-sl.css";
|
|
2
|
-
|
|
3
|
-
import "@shoelace-style/shoelace/dist/components/button/button.js";
|
|
4
|
-
import "@shoelace-style/shoelace/dist/components/button-group/button-group.js";
|
|
5
|
-
import "@shoelace-style/shoelace/dist/components/icon/icon.js";
|
|
6
|
-
import "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js";
|
|
7
|
-
|
|
8
|
-
import { LitElement, html } from "lit";
|
|
9
|
-
import { property } from "lit/decorators.js";
|
|
10
|
-
import styles from './toolbar.styles.js';
|
|
11
|
-
import type { CSSResultGroup } from 'lit';
|
|
12
|
-
|
|
13
|
-
import registerBundledIcons from "../../components/icons";
|
|
14
|
-
|
|
15
|
-
registerBundledIcons();
|
|
16
|
-
|
|
17
|
-
export class Toolbar extends LitElement {
|
|
18
|
-
|
|
19
|
-
static styles: CSSResultGroup = [styles];
|
|
20
|
-
|
|
21
|
-
name = "hot-toolbar";
|
|
22
|
-
|
|
23
|
-
/** Change the position of the tooltips relative to buttons. */
|
|
24
|
-
@property({ type: String, attribute: "tooltip-position" })
|
|
25
|
-
accessor tooltipPosition =
|
|
26
|
-
"top";
|
|
27
|
-
|
|
28
|
-
protected render() {
|
|
29
|
-
return html`
|
|
30
|
-
<div class="toolbar">
|
|
31
|
-
${this.renderButtonGroup("History", [
|
|
32
|
-
{
|
|
33
|
-
content: "Undo",
|
|
34
|
-
icon: "arrow-counterclockwise",
|
|
35
|
-
label: "Undo",
|
|
36
|
-
action: this.undo,
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
content: "Redo",
|
|
40
|
-
icon: "arrow-clockwise",
|
|
41
|
-
label: "Redo",
|
|
42
|
-
action: this.redo,
|
|
43
|
-
},
|
|
44
|
-
])}
|
|
45
|
-
${this.renderButtonGroup("Formatting", [
|
|
46
|
-
{
|
|
47
|
-
content: "Bold",
|
|
48
|
-
icon: "type-bold",
|
|
49
|
-
label: "Bold",
|
|
50
|
-
action: this.bold,
|
|
51
|
-
},
|
|
52
|
-
{
|
|
53
|
-
content: "Italic",
|
|
54
|
-
icon: "type-italic",
|
|
55
|
-
label: "Italic",
|
|
56
|
-
action: this.italic,
|
|
57
|
-
},
|
|
58
|
-
{
|
|
59
|
-
content: "Underline",
|
|
60
|
-
icon: "type-underline",
|
|
61
|
-
label: "Underline",
|
|
62
|
-
action: this.underline,
|
|
63
|
-
},
|
|
64
|
-
])}
|
|
65
|
-
${this.renderButtonGroup("Alignment", [
|
|
66
|
-
{
|
|
67
|
-
content: "Align Left",
|
|
68
|
-
icon: "justify-left",
|
|
69
|
-
label: "Align Left",
|
|
70
|
-
action: this.alignLeft,
|
|
71
|
-
},
|
|
72
|
-
{
|
|
73
|
-
content: "Align Center",
|
|
74
|
-
icon: "justify",
|
|
75
|
-
label: "Align Center",
|
|
76
|
-
action: this.alignCenter,
|
|
77
|
-
},
|
|
78
|
-
{
|
|
79
|
-
content: "Align Right",
|
|
80
|
-
icon: "justify-right",
|
|
81
|
-
label: "Align Right",
|
|
82
|
-
action: this.alignRight,
|
|
83
|
-
},
|
|
84
|
-
])}
|
|
85
|
-
</div>
|
|
86
|
-
`;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
private renderButtonGroup(
|
|
90
|
-
label: string,
|
|
91
|
-
buttons: Array<{
|
|
92
|
-
content: string;
|
|
93
|
-
icon: string;
|
|
94
|
-
label: string;
|
|
95
|
-
action?: (e: MouseEvent) => void;
|
|
96
|
-
}>
|
|
97
|
-
) {
|
|
98
|
-
return html`
|
|
99
|
-
<sl-button-group label=${label}>
|
|
100
|
-
${buttons.map((button) => this.renderButton(button))}
|
|
101
|
-
</sl-button-group>
|
|
102
|
-
`;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
private renderButton({
|
|
106
|
-
content,
|
|
107
|
-
icon,
|
|
108
|
-
label,
|
|
109
|
-
action,
|
|
110
|
-
}: {
|
|
111
|
-
content: string;
|
|
112
|
-
icon: string;
|
|
113
|
-
label: string;
|
|
114
|
-
action?: (e: MouseEvent) => void;
|
|
115
|
-
}) {
|
|
116
|
-
return html`
|
|
117
|
-
<sl-tooltip content=${content} placement="${this.tooltipPosition}">
|
|
118
|
-
<sl-button @click=${action ?? (() => {})}
|
|
119
|
-
><sl-icon library="bundled" name=${icon} label=${label}></sl-icon
|
|
120
|
-
></sl-button>
|
|
121
|
-
</sl-tooltip>
|
|
122
|
-
`;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
private readonly undo = (e: MouseEvent) => {
|
|
126
|
-
// As the original event is also named 'click'
|
|
127
|
-
// stop propagation of the original event
|
|
128
|
-
e.stopPropagation();
|
|
129
|
-
this.dispatchEvent(new Event("undo"));
|
|
130
|
-
};
|
|
131
|
-
|
|
132
|
-
private readonly redo = (e: MouseEvent) => {
|
|
133
|
-
e.stopPropagation();
|
|
134
|
-
this.dispatchEvent(new Event("redo"));
|
|
135
|
-
};
|
|
136
|
-
|
|
137
|
-
private readonly bold = (e: MouseEvent) => {
|
|
138
|
-
e.stopPropagation();
|
|
139
|
-
this.dispatchEvent(new Event("bold"));
|
|
140
|
-
};
|
|
141
|
-
|
|
142
|
-
private readonly italic = (e: MouseEvent) => {
|
|
143
|
-
e.stopPropagation();
|
|
144
|
-
this.dispatchEvent(new Event("italic"));
|
|
145
|
-
};
|
|
146
|
-
|
|
147
|
-
private readonly underline = (e: MouseEvent) => {
|
|
148
|
-
e.stopPropagation();
|
|
149
|
-
this.dispatchEvent(new Event("underline"));
|
|
150
|
-
};
|
|
151
|
-
|
|
152
|
-
private readonly alignLeft = (e: MouseEvent) => {
|
|
153
|
-
e.stopPropagation();
|
|
154
|
-
this.dispatchEvent(new Event("leftalign"));
|
|
155
|
-
};
|
|
156
|
-
|
|
157
|
-
private readonly alignCenter = (e: MouseEvent) => {
|
|
158
|
-
e.stopPropagation();
|
|
159
|
-
this.dispatchEvent(new Event("centeralign"));
|
|
160
|
-
};
|
|
161
|
-
|
|
162
|
-
private readonly alignRight = (e: MouseEvent) => {
|
|
163
|
-
e.stopPropagation();
|
|
164
|
-
this.dispatchEvent(new Event("rightalign"));
|
|
165
|
-
};
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
export default Toolbar;
|
|
169
|
-
|
|
170
|
-
// Define web component
|
|
171
|
-
customElements.define("hot-toolbar", Toolbar);
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
2
|
-
|
|
3
|
-
export default css`
|
|
4
|
-
.tracking {
|
|
5
|
-
position: absolute;
|
|
6
|
-
bottom: 20px;
|
|
7
|
-
left: 50%;
|
|
8
|
-
transform: translateX(-50%);
|
|
9
|
-
z-index: 1000;
|
|
10
|
-
width: 80vw;
|
|
11
|
-
text-align: center;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.tracking--header {
|
|
15
|
-
font-weight: var(--sl-font-weight-bold);
|
|
16
|
-
font-size: var(--sl-font-size-large);
|
|
17
|
-
text-align: center;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.tracking--link {
|
|
21
|
-
color: var(--sl-color-primary-700);
|
|
22
|
-
}
|
|
23
|
-
`
|
|
@@ -1,177 +0,0 @@
|
|
|
1
|
-
import "../../theme/hot-sl.css";
|
|
2
|
-
|
|
3
|
-
import "@shoelace-style/shoelace/dist/components/alert/alert.js";
|
|
4
|
-
|
|
5
|
-
import { LitElement, html } from "lit";
|
|
6
|
-
import { property, state } from "lit/decorators.js";
|
|
7
|
-
import styles from './tracking.styles.js';
|
|
8
|
-
import type { CSSResultGroup } from 'lit';
|
|
9
|
-
|
|
10
|
-
import registerBundledIcons from "../../components/icons";
|
|
11
|
-
|
|
12
|
-
registerBundledIcons();
|
|
13
|
-
|
|
14
|
-
declare global {
|
|
15
|
-
interface Window {
|
|
16
|
-
_paq: any[];
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
export class Tracking extends LitElement {
|
|
21
|
-
|
|
22
|
-
static styles: CSSResultGroup = [styles];
|
|
23
|
-
|
|
24
|
-
name = "hot-tracking";
|
|
25
|
-
|
|
26
|
-
/** The Matomo site id for tracking. */
|
|
27
|
-
@property({ type: String, attribute: "site-id" })
|
|
28
|
-
accessor siteId: string = "";
|
|
29
|
-
|
|
30
|
-
/** The domains to apply tracking. */
|
|
31
|
-
@property({ type: String })
|
|
32
|
-
accessor domain: string = "";
|
|
33
|
-
|
|
34
|
-
/** Force display the banner. */
|
|
35
|
-
@property({ type: Boolean })
|
|
36
|
-
accessor force: boolean = false;
|
|
37
|
-
|
|
38
|
-
@property({ type: Boolean })
|
|
39
|
-
accessor isOpen: boolean = true;
|
|
40
|
-
|
|
41
|
-
protected render() {
|
|
42
|
-
return html`<sl-alert class="tracking" variant="danger" ?open=${this.isOpen}>
|
|
43
|
-
<sl-icon
|
|
44
|
-
id="hot-red-text"
|
|
45
|
-
library="bundled"
|
|
46
|
-
slot="icon"
|
|
47
|
-
name="info-circle"
|
|
48
|
-
></sl-icon>
|
|
49
|
-
|
|
50
|
-
<p id="tracking-header" class="tracking--header">About the information we collect</p>
|
|
51
|
-
|
|
52
|
-
<p>
|
|
53
|
-
We use cookies and similar technologies to recognize and analyze your
|
|
54
|
-
visits, and measure traffic usage and activity. You can learn about how
|
|
55
|
-
we use the data about your visit or information you provide reading our
|
|
56
|
-
<a
|
|
57
|
-
class="tracking--link"
|
|
58
|
-
href="https://www.hotosm.org/privacy"
|
|
59
|
-
target="_blank"
|
|
60
|
-
rel="noopener noreferrer"
|
|
61
|
-
>privacy policy</a
|
|
62
|
-
>. By clicking "I Agree", you consent to the use of cookies.
|
|
63
|
-
</p>
|
|
64
|
-
|
|
65
|
-
<sl-button
|
|
66
|
-
@click=${(e: MouseEvent) => {
|
|
67
|
-
this._setAgree(e);
|
|
68
|
-
}}
|
|
69
|
-
>I Agree</sl-button
|
|
70
|
-
>
|
|
71
|
-
<sl-button
|
|
72
|
-
@click=${(e: MouseEvent) => {
|
|
73
|
-
this._setDisagree(e);
|
|
74
|
-
}}
|
|
75
|
-
>I Do Not Agree</sl-button
|
|
76
|
-
>
|
|
77
|
-
</sl-alert>`;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
private _setAgree(_e: MouseEvent) {
|
|
81
|
-
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
|
|
82
|
-
const _paq = (window._paq = window._paq || []);
|
|
83
|
-
if (_paq.length === 0) return;
|
|
84
|
-
|
|
85
|
-
_paq.push(["rememberConsentGiven"]);
|
|
86
|
-
this.isOpen = false;
|
|
87
|
-
localStorage.setItem(`${this.siteId}-matomo-agree`, "true");
|
|
88
|
-
this.dispatchEvent(new Event("agree", { bubbles: true, composed: true }));
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
private _setDisagree(_e: MouseEvent) {
|
|
92
|
-
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
|
|
93
|
-
const _paq = (window._paq = window._paq || []);
|
|
94
|
-
if (_paq.length === 0) return;
|
|
95
|
-
|
|
96
|
-
_paq.push(["forgetConsentGiven"]);
|
|
97
|
-
this.isOpen = false;
|
|
98
|
-
localStorage.setItem(`${this.siteId}-matomo-agree`, "false");
|
|
99
|
-
this.dispatchEvent(
|
|
100
|
-
new Event("disagree", { bubbles: true, composed: true })
|
|
101
|
-
);
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
connectedCallback() {
|
|
105
|
-
super.connectedCallback();
|
|
106
|
-
|
|
107
|
-
// Close and halt execution if wrong domain
|
|
108
|
-
if (!this.force && window.location.hostname !== this.domain) {
|
|
109
|
-
console.warn(
|
|
110
|
-
`Matomo init failed. ${window.location.hostname} does not match ${this.domain}.`
|
|
111
|
-
);
|
|
112
|
-
this.isOpen = false;
|
|
113
|
-
return;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
const matomoTrackingId = this.siteId;
|
|
117
|
-
|
|
118
|
-
// Close and halt execution if siteId or domain not set
|
|
119
|
-
if (
|
|
120
|
-
!this.force &&
|
|
121
|
-
(matomoTrackingId.length === 0 || this.domain.length === 0)
|
|
122
|
-
) {
|
|
123
|
-
console.warn("Matomo init failed. No site id or domains provided.");
|
|
124
|
-
this.isOpen = false;
|
|
125
|
-
return;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
// Close and halt execution if already disagreed
|
|
129
|
-
const consent = localStorage.getItem(`${this.siteId}-matomo-agree`);
|
|
130
|
-
if (consent === "false") {
|
|
131
|
-
this.isOpen = false;
|
|
132
|
-
return;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
// Close prompt only if already agreed, continue
|
|
136
|
-
if (consent === "true") {
|
|
137
|
-
this.isOpen = false;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
console.log(
|
|
141
|
-
`Setting Matomo tracking for site=${matomoTrackingId} domain=${this.domain}`
|
|
142
|
-
);
|
|
143
|
-
|
|
144
|
-
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
|
|
145
|
-
const _paq = (window._paq = window._paq || []);
|
|
146
|
-
|
|
147
|
-
// tracker methods like "setCustomDimension" should be called before "trackPageView"
|
|
148
|
-
_paq.push(["requireConsent"]);
|
|
149
|
-
_paq.push(["setDomains", [this.domain]]);
|
|
150
|
-
_paq.push(["trackPageView"]);
|
|
151
|
-
_paq.push(["enableLinkTracking"]); // Tracks downloads
|
|
152
|
-
_paq.push(["trackVisibleContentImpressions"]); // Tracks content
|
|
153
|
-
|
|
154
|
-
(function () {
|
|
155
|
-
const u = "//matomo.hotosm.org/";
|
|
156
|
-
_paq.push(["setTrackerUrl", u + "matomo.php"]);
|
|
157
|
-
_paq.push(["setSiteId", matomoTrackingId]);
|
|
158
|
-
|
|
159
|
-
const d = document;
|
|
160
|
-
const g = d.createElement("script");
|
|
161
|
-
const s = d.getElementsByTagName("script")[0];
|
|
162
|
-
|
|
163
|
-
if (s?.parentNode != null) {
|
|
164
|
-
g.async = true;
|
|
165
|
-
g.src = u + "matomo.js";
|
|
166
|
-
s.parentNode.insertBefore(g, s);
|
|
167
|
-
} else {
|
|
168
|
-
console.warn("Script insertion failed. Parent node is null.");
|
|
169
|
-
}
|
|
170
|
-
})();
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
export default Tracking;
|
|
175
|
-
|
|
176
|
-
// Define web component
|
|
177
|
-
customElements.define("hot-tracking", Tracking);
|
|
@@ -1,130 +0,0 @@
|
|
|
1
|
-
import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
|
|
2
|
-
import { default as SlAlert } from '@shoelace-style/shoelace/dist/components/alert/alert.component.js';
|
|
3
|
-
import { default as SlAnimatedImage } from '@shoelace-style/shoelace/dist/components/animated-image/animated-image.component.js';
|
|
4
|
-
import { default as SlAnimation } from '@shoelace-style/shoelace/dist/components/animation/animation.component.js';
|
|
5
|
-
import { default as SlAvatar } from '@shoelace-style/shoelace/dist/components/avatar/avatar.component.js';
|
|
6
|
-
import { default as SlBadge } from '@shoelace-style/shoelace/dist/components/badge/badge.component.js';
|
|
7
|
-
import { default as SlBreadcrumb } from '@shoelace-style/shoelace/dist/components/breadcrumb/breadcrumb.component.js';
|
|
8
|
-
import { default as SlBreadcrumbItem } from '@shoelace-style/shoelace/dist/components/breadcrumb-item/breadcrumb-item.component.js';
|
|
9
|
-
import { default as SlButton } from '@shoelace-style/shoelace/dist/components/button/button.component.js';
|
|
10
|
-
import { default as SlButtonGroup } from '@shoelace-style/shoelace/dist/components/button-group/button-group.component.js';
|
|
11
|
-
import { default as SlCard } from '@shoelace-style/shoelace/dist/components/card/card.component.js';
|
|
12
|
-
import { default as SlCarousel } from '@shoelace-style/shoelace/dist/components/carousel/carousel.component.js';
|
|
13
|
-
import { default as SlCarouselItem } from '@shoelace-style/shoelace/dist/components/carousel-item/carousel-item.component.js';
|
|
14
|
-
import { default as SlCheckbox } from '@shoelace-style/shoelace/dist/components/checkbox/checkbox.component.js';
|
|
15
|
-
import { default as SlColorPicker } from '@shoelace-style/shoelace/dist/components/color-picker/color-picker.component.js';
|
|
16
|
-
import { default as SlCopyButton } from '@shoelace-style/shoelace/dist/components/copy-button/copy-button.component.js';
|
|
17
|
-
import { default as SlDetails } from '@shoelace-style/shoelace/dist/components/details/details.component.js';
|
|
18
|
-
import { default as SlDialog } from '@shoelace-style/shoelace/dist/components/dialog/dialog.component.js';
|
|
19
|
-
import { default as SlDivider } from '@shoelace-style/shoelace/dist/components/divider/divider.component.js';
|
|
20
|
-
import { default as SlDrawer } from '@shoelace-style/shoelace/dist/components/drawer/drawer.component.js';
|
|
21
|
-
import { default as SlDropdown } from '@shoelace-style/shoelace/dist/components/dropdown/dropdown.component.js';
|
|
22
|
-
import { default as SlFormatBytes } from '@shoelace-style/shoelace/dist/components/format-bytes/format-bytes.component.js';
|
|
23
|
-
import { default as SlFormatDate } from '@shoelace-style/shoelace/dist/components/format-date/format-date.component.js';
|
|
24
|
-
import { default as SlFormatNumber } from '@shoelace-style/shoelace/dist/components/format-number/format-number.component.js';
|
|
25
|
-
import { default as SlIcon } from '@shoelace-style/shoelace/dist/components/icon/icon.component.js';
|
|
26
|
-
import { default as SlIconButton } from '@shoelace-style/shoelace/dist/components/icon-button/icon-button.component.js';
|
|
27
|
-
import { default as SlImageComparer } from '@shoelace-style/shoelace/dist/components/image-comparer/image-comparer.component.js';
|
|
28
|
-
import { default as SlInclude } from '@shoelace-style/shoelace/dist/components/include/include.component.js';
|
|
29
|
-
import { default as SlInput } from '@shoelace-style/shoelace/dist/components/input/input.component.js';
|
|
30
|
-
import { default as SlMenu } from '@shoelace-style/shoelace/dist/components/menu/menu.component.js';
|
|
31
|
-
import { default as SlMenuItem } from '@shoelace-style/shoelace/dist/components/menu-item/menu-item.component.js';
|
|
32
|
-
import { default as SlMenuLabel } from '@shoelace-style/shoelace/dist/components/menu-label/menu-label.component.js';
|
|
33
|
-
import { default as SlMutationObserver } from '@shoelace-style/shoelace/dist/components/mutation-observer/mutation-observer.component.js';
|
|
34
|
-
import { default as SlOption } from '@shoelace-style/shoelace/dist/components/option/option.component.js';
|
|
35
|
-
import { default as SlPopup } from '@shoelace-style/shoelace/dist/components/popup/popup.component.js';
|
|
36
|
-
import { default as SlProgressBar } from '@shoelace-style/shoelace/dist/components/progress-bar/progress-bar.component.js';
|
|
37
|
-
import { default as SlProgressRing } from '@shoelace-style/shoelace/dist/components/progress-ring/progress-ring.component.js';
|
|
38
|
-
import { default as SlQRCode } from '@shoelace-style/shoelace/dist/components/qr-code/qr-code.component.js';
|
|
39
|
-
import { default as SlRadio } from '@shoelace-style/shoelace/dist/components/radio/radio.component.js';
|
|
40
|
-
import { default as SlRadioButton } from '@shoelace-style/shoelace/dist/components/radio-button/radio-button.component.js';
|
|
41
|
-
import { default as SlRadioGroup } from '@shoelace-style/shoelace/dist/components/radio-group/radio-group.component.js';
|
|
42
|
-
import { default as SlRange } from '@shoelace-style/shoelace/dist/components/range/range.component.js';
|
|
43
|
-
import { default as SlRating } from '@shoelace-style/shoelace/dist/components/rating/rating.component.js';
|
|
44
|
-
import { default as SlRelativeTime } from '@shoelace-style/shoelace/dist/components/relative-time/relative-time.component.js';
|
|
45
|
-
import { default as SlResizeObserver } from '@shoelace-style/shoelace/dist/components/resize-observer/resize-observer.component.js';
|
|
46
|
-
import { default as SlSelect } from '@shoelace-style/shoelace/dist/components/select/select.component.js';
|
|
47
|
-
import { default as SlSkeleton } from '@shoelace-style/shoelace/dist/components/skeleton/skeleton.component.js';
|
|
48
|
-
import { default as SlSpinner } from '@shoelace-style/shoelace/dist/components/spinner/spinner.component.js';
|
|
49
|
-
import { default as SlSplitPanel } from '@shoelace-style/shoelace/dist/components/split-panel/split-panel.component.js';
|
|
50
|
-
import { default as SlSwitch } from '@shoelace-style/shoelace/dist/components/switch/switch.component.js';
|
|
51
|
-
import { default as SlTab } from '@shoelace-style/shoelace/dist/components/tab/tab.component.js';
|
|
52
|
-
import { default as SlTabGroup } from '@shoelace-style/shoelace/dist/components/tab-group/tab-group.component.js';
|
|
53
|
-
import { default as SlTabPanel } from '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.component.js';
|
|
54
|
-
import { default as SlTag } from '@shoelace-style/shoelace/dist/components/tag/tag.component.js';
|
|
55
|
-
import { default as SlTextarea } from '@shoelace-style/shoelace/dist/components/textarea/textarea.component.js';
|
|
56
|
-
import { default as SlTooltip } from '@shoelace-style/shoelace/dist/components/tooltip/tooltip.component.js';
|
|
57
|
-
import { default as SlTree } from '@shoelace-style/shoelace/dist/components/tree/tree.component.js';
|
|
58
|
-
import { default as SlTreeItem } from '@shoelace-style/shoelace/dist/components/tree-item/tree-item.component.js';
|
|
59
|
-
import { default as SlVisuallyHidden } from '@shoelace-style/shoelace/dist/components/visually-hidden/visually-hidden.component.js';
|
|
60
|
-
import { default as HotHeader } from './header/header';
|
|
61
|
-
import { default as HotLogo } from './logo/logo';
|
|
62
|
-
import { default as HotToolbar } from './toolbar/toolbar';
|
|
63
|
-
import { default as HotTracking } from './tracking/tracking';
|
|
64
|
-
|
|
65
|
-
declare global {
|
|
66
|
-
interface HTMLElementTagNameMap {
|
|
67
|
-
'hot-alert': SlAlert;
|
|
68
|
-
'hot-animated-image': SlAnimatedImage;
|
|
69
|
-
'hot-animation': SlAnimation;
|
|
70
|
-
'hot-avatar': SlAvatar;
|
|
71
|
-
'hot-badge': SlBadge;
|
|
72
|
-
'hot-breadcrumb': SlBreadcrumb;
|
|
73
|
-
'hot-breadcrumb-item': SlBreadcrumbItem;
|
|
74
|
-
'hot-button': SlButton;
|
|
75
|
-
'hot-button-group': SlButtonGroup;
|
|
76
|
-
'hot-card': SlCard;
|
|
77
|
-
'hot-carousel': SlCarousel;
|
|
78
|
-
'hot-carousel-item': SlCarouselItem;
|
|
79
|
-
'hot-checkbox': SlCheckbox;
|
|
80
|
-
'hot-color-picker': SlColorPicker;
|
|
81
|
-
'hot-copy-button': SlCopyButton;
|
|
82
|
-
'hot-details': SlDetails;
|
|
83
|
-
'hot-dialog': SlDialog;
|
|
84
|
-
'hot-divider': SlDivider;
|
|
85
|
-
'hot-drawer': SlDrawer;
|
|
86
|
-
'hot-dropdown': SlDropdown;
|
|
87
|
-
'hot-format-bytes': SlFormatBytes;
|
|
88
|
-
'hot-format-date': SlFormatDate;
|
|
89
|
-
'hot-format-number': SlFormatNumber;
|
|
90
|
-
'hot-icon': SlIcon;
|
|
91
|
-
'hot-icon-button': SlIconButton;
|
|
92
|
-
'hot-image-comparer': SlImageComparer;
|
|
93
|
-
'hot-include': SlInclude;
|
|
94
|
-
'hot-input': SlInput;
|
|
95
|
-
'hot-menu': SlMenu;
|
|
96
|
-
'hot-menu-item': SlMenuItem;
|
|
97
|
-
'hot-menu-label': SlMenuLabel;
|
|
98
|
-
'hot-mutation-observer': SlMutationObserver;
|
|
99
|
-
'hot-option': SlOption;
|
|
100
|
-
'hot-popup': SlPopup;
|
|
101
|
-
'hot-progress-bar': SlProgressBar;
|
|
102
|
-
'hot-progress-ring': SlProgressRing;
|
|
103
|
-
'hot-qrcode': SlQRCode;
|
|
104
|
-
'hot-radio': SlRadio;
|
|
105
|
-
'hot-radio-button': SlRadioButton;
|
|
106
|
-
'hot-radio-group': SlRadioGroup;
|
|
107
|
-
'hot-range': SlRange;
|
|
108
|
-
'hot-rating': SlRating;
|
|
109
|
-
'hot-relative-time': SlRelativeTime;
|
|
110
|
-
'hot-resize-observer': SlResizeObserver;
|
|
111
|
-
'hot-select': SlSelect;
|
|
112
|
-
'hot-skeleton': SlSkeleton;
|
|
113
|
-
'hot-spinner': SlSpinner;
|
|
114
|
-
'hot-split-panel': SlSplitPanel;
|
|
115
|
-
'hot-switch': SlSwitch;
|
|
116
|
-
'hot-tab': SlTab;
|
|
117
|
-
'hot-tab-group': SlTabGroup;
|
|
118
|
-
'hot-tab-panel': SlTabPanel;
|
|
119
|
-
'hot-tag': SlTag;
|
|
120
|
-
'hot-textarea': SlTextarea;
|
|
121
|
-
'hot-tooltip': SlTooltip;
|
|
122
|
-
'hot-tree': SlTree;
|
|
123
|
-
'hot-tree-item': SlTreeItem;
|
|
124
|
-
'hot-visually-hidden': SlVisuallyHidden;
|
|
125
|
-
'hot-header': HotHeader;
|
|
126
|
-
'hot-toolbar': HotToolbar;
|
|
127
|
-
'hot-tracking': HotTracking;
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
export { setBasePath, SlAlert as Alert, SlAnimatedImage as AnimatedImage, SlAnimation as Animation, SlAvatar as Avatar, SlBadge as Badge, SlBreadcrumb as Breadcrumb, SlBreadcrumbItem as BreadcrumbItem, SlButton as Button, SlButtonGroup as ButtonGroup, SlCard as Card, SlCarousel as Carousel, SlCarouselItem as CarouselItem, SlCheckbox as Checkbox, SlColorPicker as ColorPicker, SlCopyButton as CopyButton, SlDetails as Details, SlDialog as Dialog, SlDivider as Divider, SlDrawer as Drawer, SlDropdown as Dropdown, SlFormatBytes as FormatBytes, SlFormatDate as FormatDate, SlFormatNumber as FormatNumber, SlIcon as Icon, SlIconButton as IconButton, SlImageComparer as ImageComparer, SlInclude as Include, SlInput as Input, SlMenu as Menu, SlMenuItem as MenuItem, SlMenuLabel as MenuLabel, SlMutationObserver as MutationObserver, SlOption as Option, SlPopup as Popup, SlProgressBar as ProgressBar, SlProgressRing as ProgressRing, SlQRCode as QRCode, SlRadio as Radio, SlRadioButton as RadioButton, SlRadioGroup as RadioGroup, SlRange as Range, SlRating as Rating, SlRelativeTime as RelativeTime, SlResizeObserver as ResizeObserver, SlSelect as Select, SlSkeleton as Skeleton, SlSpinner as Spinner, SlSplitPanel as SplitPanel, SlSwitch as Switch, SlTab as Tab, SlTabGroup as TabGroup, SlTabPanel as TabPanel, SlTag as Tag, SlTextarea as Textarea, SlTooltip as Tooltip, SlTree as Tree, SlTreeItem as TreeItem, SlVisuallyHidden as VisuallyHidden, HotHeader as Header, HotLogo as Logo, HotToolbar as Toolbar, HotTracking as Tracking, };
|