@hotosm/ui 0.2.0-a0 → 0.2.0-a10

package/components/Tracking.js

@@ -0,0 +1,162 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import "../theme/hot.css";
+import '@shoelace-style/shoelace/dist/themes/light.css';
+import '@shoelace-style/shoelace/dist/themes/dark.css';
+import '@shoelace-style/shoelace/dist/components/alert/alert.js';
+import { LitElement, css, html } from "lit";
+import { property, state } from "lit/decorators.js";
+export class Tracking extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.name = "hot-tracking";
+        /** The Matomo site id for tracking. */
+        this.siteId = "";
+        /** The domains to apply tracking. */
+        this.domain = "";
+        this.isOpen = true;
+    }
+    render() {
+        return html `<sl-alert
+      variant="danger"
+      ?open=${this.isOpen}
+    >
+    <sl-icon id="hot-red-text" slot="icon" name="info-circle"></sl-icon>
+
+    <p id="tracking-header">
+    About the information we collect
+    </p>
+
+    <p>
+    We use cookies and similar technologies to recognize and analyze your visits,
+    and measure traffic usage and activity. You can learn about how we use the data
+    about your visit or information you provide reading our
+      <a
+        id="hot-red-text"
+        href="https://www.hotosm.org/privacy"
+        target="_blank"
+        rel="noopener noreferrer"
+      >privacy policy</a>.
+    By clicking "I Agree", you consent to the use of cookies.
+    </p>
+
+    <sl-button @click=${(e) => {
+            this._setAgree(e);
+        }}>I Agree</sl-button>
+    <sl-button @click=${(e) => {
+            this._setDisagree(e);
+        }}>I Do Not Agree</sl-button>
+    </sl-alert>`;
+    }
+    _closeAlert() {
+        this.isOpen = false;
+        localStorage.setItem(`${this.siteId}-optout-closed`, 'true');
+    }
+    _setAgree(_e) {
+        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+        const _paq = (window._paq = window._paq || []);
+        if (_paq.length === 0) {
+            return;
+        }
+        _paq.push(['rememberConsentGiven']);
+        this._closeAlert();
+        this.dispatchEvent(new Event('agree', { bubbles: true, composed: true }));
+    }
+    _setDisagree(_e) {
+        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+        const _paq = (window._paq = window._paq || []);
+        if (_paq.length === 0) {
+            return;
+        }
+        _paq.push(['forgetConsentGiven']);
+        this._closeAlert();
+        this.dispatchEvent(new Event('disagree', { bubbles: true, composed: true }));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Close automatically if already optout
+        if (localStorage.getItem(`${this.siteId}-optout-closed`) === 'true') {
+            this.isOpen = false;
+            return;
+        }
+        // Close automatically if wrong domain
+        if (window.location.hostname !== this.domain) {
+            this.isOpen = false;
+            return;
+        }
+        // Configure Matomo tracking
+        const matomoTrackingId = this.siteId;
+        if ((matomoTrackingId.length === 0) || this.domain.length === 0) {
+            console.warn('Matomo init failed. No site id or domains provided.');
+            this.isOpen = false;
+            return;
+        }
+        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+        const _paq = (window._paq = window._paq || []);
+        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+        _paq.push(['requireConsent']);
+        _paq.push(['setDomains', [this.domain]]);
+        _paq.push(['trackPageView']);
+        _paq.push(['enableLinkTracking']); // Tracks downloads
+        _paq.push(['trackVisibleContentImpressions']); // Tracks content blocks
+        (function () {
+            const u = '//matomo.hotosm.org/';
+            _paq.push(['setTrackerUrl', u + 'matomo.php']);
+            _paq.push(['setSiteId', matomoTrackingId]);
+            const d = document;
+            const g = d.createElement('script');
+            const s = d.getElementsByTagName('script')[0];
+            if ((s?.parentNode) != null) {
+                g.async = true;
+                g.src = u + 'matomo.js';
+                s.parentNode.insertBefore(g, s);
+            }
+            else {
+                console.warn('Script insertion failed. Parent node is null.');
+            }
+        })();
+    }
+}
+Tracking.styles = [
+    css `
+      @unocss-placeholder;
+    `,
+    // Temp styles until UnoCSS setup
+    css `
+      #tracking-header {
+        font-weight: var(--sl-font-weight-bold);
+        font-size: var(--sl-font-size-large);
+        color: #d63f3f;
+      }
+      #hot-red-text {
+        color: #d63f3f;
+      }
+      sl-alert::part(base) {
+        position: absolute;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 1000;
+        width: 80vw;
+      }
+    `
+];
+__decorate([
+    property()
+], Tracking.prototype, "name", void 0);
+__decorate([
+    property({ type: String, attribute: "site-id" })
+], Tracking.prototype, "siteId", void 0);
+__decorate([
+    property({ type: String })
+], Tracking.prototype, "domain", void 0);
+__decorate([
+    state()
+], Tracking.prototype, "isOpen", void 0);
+export default Tracking;
+// Define web component
+customElements.define("hot-tracking", Tracking);

package/components/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Button } from './Button';
+export { default as Header } from './Header';
+export { default as Toolbar } from './Toolbar';
+export { default as Tracking } from './Tracking';

package/components/index.js

@@ -0,0 +1,6 @@
+// Index to import all components together
+// import '@hotosm/ui/components';
+export { default as Button } from './Button';
+export { default as Header } from './Header';
+export { default as Toolbar } from './Toolbar';
+export { default as Tracking } from './Tracking';

package/dist/assets/icons/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019-2023 The Bootstrap Authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.