@hotosm/ui 0.2.0-b2 → 0.2.0-b4

package/components/{Toolbar.js → toolbar/toolbar.js}

@@ -4,16 +4,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 "../../theme/sl-custom.css";
 import '@shoelace-style/shoelace/dist/components/button/button.js';
 import '@shoelace-style/shoelace/dist/components/button-group/button-group.js';
 import '@shoelace-style/shoelace/dist/components/icon/icon.js';
 import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
 import { LitElement, css, html } from "lit";
 import { property } from "lit/decorators.js";
-import registerBundledIcons from '../components/icons';
+import registerBundledIcons from '../../components/icons';
 registerBundledIcons();
 // import { cva } from "class-variance-authority";
 // const toolbarStyle = cva(
@@ -37,35 +35,35 @@ export class Toolbar extends LitElement {
             // As the original event is also named 'click'
             // stop propagation of the original event
             e.stopPropagation();
-            this.dispatchEvent(new Event("hot-undo-click"));
+            this.dispatchEvent(new Event("undo"));
         };
         this.redo = (e) => {
             e.stopPropagation();
-            this.dispatchEvent(new Event("hot-redo-click"));
+            this.dispatchEvent(new Event("redo"));
         };
         this.bold = (e) => {
             e.stopPropagation();
-            this.dispatchEvent(new Event("hot-bold-click"));
+            this.dispatchEvent(new Event("bold"));
         };
         this.italic = (e) => {
             e.stopPropagation();
-            this.dispatchEvent(new Event("hot-italic-click"));
+            this.dispatchEvent(new Event("italic"));
         };
         this.underline = (e) => {
             e.stopPropagation();
-            this.dispatchEvent(new Event("hot-underline-click"));
+            this.dispatchEvent(new Event("underline"));
         };
         this.alignLeft = (e) => {
             e.stopPropagation();
-            this.dispatchEvent(new Event("hot-leftalign-click"));
+            this.dispatchEvent(new Event("leftalign"));
         };
         this.alignCenter = (e) => {
             e.stopPropagation();
-            this.dispatchEvent(new Event("hot-centeralign-click"));
+            this.dispatchEvent(new Event("centeralign"));
         };
         this.alignRight = (e) => {
             e.stopPropagation();
-            this.dispatchEvent(new Event("hot-rightalign-click"));
+            this.dispatchEvent(new Event("rightalign"));
         };
     }
     // class=${toolbarStyle({

package/components/toolbar/toolbar.ts

@@ -0,0 +1,128 @@
+import "../../theme/sl-custom.css";
+
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import '@shoelace-style/shoelace/dist/components/button-group/button-group.js';
+import '@shoelace-style/shoelace/dist/components/icon/icon.js';
+import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
+
+import { LitElement, css, html, unsafeCSS } from "lit";
+import { property } from "lit/decorators.js";
+
+import registerBundledIcons from '../../components/icons';
+
+registerBundledIcons();
+
+// import { cva } from "class-variance-authority";
+
+// const toolbarStyle = cva(
+//   "some-css-var",
+//   {
+//     variants: {
+//       someProperty: {
+//         true: "some-css-var",
+//         false: "some-css-var",
+//       },
+//     },
+//   },
+// );
+
+export class Toolbar extends LitElement {
+  @property() name = "hot-toolbar";
+
+  /** Change the position of the tooltips relative to buttons. */
+  @property({ type: String, attribute: "tooltip-position" }) tooltipPosition = "top";
+
+  static styles = [
+    css`
+      @unocss-placeholder;
+    `,
+    // unsafeCSS(reset),
+  ];
+
+  // class=${toolbarStyle({
+  //   someProperty: this.someProperty,
+  // })}
+  protected render() {
+    return html`
+      <div class="button-group-toolbar">
+        ${this.renderButtonGroup('History', [
+          { content: 'Undo', icon: 'arrow-counterclockwise', label: 'Undo', action: this.undo },
+          { content: 'Redo', icon: 'arrow-clockwise', label: 'Redo', action: this.redo }
+        ])}
+        ${this.renderButtonGroup('Formatting', [
+          { content: 'Bold', icon: 'type-bold', label: 'Bold', action: this.bold },
+          { content: 'Italic', icon: 'type-italic', label: 'Italic', action: this.italic },
+          { content: 'Underline', icon: 'type-underline', label: 'Underline', action: this.underline }
+        ])}
+        ${this.renderButtonGroup('Alignment', [
+          { content: 'Align Left', icon: 'justify-left', label: 'Align Left', action: this.alignLeft },
+          { content: 'Align Center', icon: 'justify', label: 'Align Center', action: this.alignCenter },
+          { content: 'Align Right', icon: 'justify-right', label: 'Align Right', action: this.alignRight }
+        ])}
+      </div>
+    `;
+  }
+
+  private renderButtonGroup(label: string, buttons: Array<{ content: string, icon: string, label: string, action?: (e: MouseEvent) => void }>) {
+    return html`
+      <sl-button-group label=${label}>
+        ${buttons.map(button => this.renderButton(button))}
+      </sl-button-group>
+    `;
+  }
+
+  private renderButton({ content, icon, label, action }: { content: string, icon: string, label: string, action?: (e: MouseEvent) => void }) {
+    return html`
+      <sl-tooltip content=${content} placement="${this.tooltipPosition}">
+        <sl-button @click=${action ?? (() => {})}><sl-icon library="bundled" name=${icon} label=${label}></sl-icon></sl-button>
+      </sl-tooltip>
+    `;
+  }
+
+  private readonly undo = (e: MouseEvent) => {
+    // As the original event is also named 'click'
+    // stop propagation of the original event
+    e.stopPropagation();
+    this.dispatchEvent(new Event("undo"));
+  }
+
+  private readonly redo = (e: MouseEvent) => {
+    e.stopPropagation();
+    this.dispatchEvent(new Event("redo"));
+  }
+
+  private readonly bold = (e: MouseEvent) => {
+    e.stopPropagation();
+    this.dispatchEvent(new Event("bold"));
+  }
+
+  private readonly italic = (e: MouseEvent) => {
+    e.stopPropagation();
+    this.dispatchEvent(new Event("italic"));
+  }
+
+  private readonly underline = (e: MouseEvent) => {
+    e.stopPropagation();
+    this.dispatchEvent(new Event("underline"));
+  }
+
+  private readonly alignLeft = (e: MouseEvent) => {
+    e.stopPropagation();
+    this.dispatchEvent(new Event("leftalign"));
+  }
+
+  private readonly alignCenter = (e: MouseEvent) => {
+    e.stopPropagation();
+    this.dispatchEvent(new Event("centeralign"));
+  }
+
+  private readonly alignRight = (e: MouseEvent) => {
+    e.stopPropagation();
+    this.dispatchEvent(new Event("rightalign"));
+  }
+}
+
+export default Toolbar;
+
+// Define web component
+customElements.define("hot-toolbar", Toolbar);

package/components/{Tracking.d.ts → tracking/tracking.d.ts}

@@ -1,6 +1,4 @@
-import "../theme/hot.css";
-import '@shoelace-style/shoelace/dist/themes/light.css';
-import '@shoelace-style/shoelace/dist/themes/dark.css';
+import "../../theme/sl-custom.css";
 import '@shoelace-style/shoelace/dist/components/alert/alert.js';
 import { LitElement } from "lit";
 declare global {

package/components/{Tracking.js → tracking/tracking.js}

@@ -4,13 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 "../../theme/sl-custom.css";
 import '@shoelace-style/shoelace/dist/components/alert/alert.js';
 import { LitElement, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
-import registerBundledIcons from '../components/icons';
+import registerBundledIcons from '../../components/icons';
 registerBundledIcons();
 export class Tracking extends LitElement {
     constructor() {
@@ -40,7 +38,7 @@ export class Tracking extends LitElement {
     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"
+        style="color: #d63f3f;"
         href="https://www.hotosm.org/privacy"
         target="_blank"
         rel="noopener noreferrer"
@@ -48,8 +46,8 @@ export class Tracking extends LitElement {
     By clicking "I Agree", you consent to the use of cookies.
     </p>
 
-    <sl-button @click=${this._setAgree}>I Agree</sl-button>
-    <sl-button @click=${this._setDisagree}>I Do Not Agree</sl-button>
+    <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>`;
     }
     _setAgree(_e) {
@@ -76,7 +74,7 @@ export class Tracking extends LitElement {
         super.connectedCallback();
         // Close and halt execution if wrong domain
         if (!this.force && window.location.hostname !== this.domain) {
-            console.warn('Matomo init failed. Provided domain does not match current domain.');
+            console.warn(`Matomo init failed. ${window.location.hostname} does not match ${this.domain}.`);
             this.isOpen = false;
             return;
         }
@@ -133,10 +131,7 @@ Tracking.styles = [
       #tracking-header {
         font-weight: var(--sl-font-weight-bold);
         font-size: var(--sl-font-size-large);
-        color: #d63f3f;
-      }
-      #hot-red-text {
-        color: #d63f3f;
+        text-align: center;
       }
       sl-alert::part(base) {
         position: absolute;
@@ -145,6 +140,7 @@ Tracking.styles = [
         transform: translateX(-50%);
         z-index: 1000;
         width: 80vw;
+        text-align: center;
       }
     `
 ];

package/components/tracking/tracking.ts

@@ -0,0 +1,173 @@
+import "../../theme/sl-custom.css";
+
+import '@shoelace-style/shoelace/dist/components/alert/alert.js';
+
+import { LitElement, css, html, unsafeCSS } from "lit";
+import { property, state } from "lit/decorators.js";
+
+import registerBundledIcons from '../../components/icons';
+
+registerBundledIcons();
+
+declare global {
+  interface Window {
+    _paq: any[];
+  }
+}
+
+export class Tracking extends LitElement {
+  @property() name = "hot-tracking";
+
+  /** The Matomo site id for tracking. */
+  @property({ type: String, attribute: "site-id" }) siteId: string = "";
+
+  /** The domains to apply tracking. */
+  @property({ type: String }) domain: string = "";
+
+  /** Force display the banner. */
+  @property({ type: Boolean }) force: boolean = false;
+
+  @state() isOpen: boolean = true;
+
+  static 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);
+        text-align: center;
+      }
+      sl-alert::part(base) {
+        position: absolute;
+        bottom: 20px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 1000;
+        width: 80vw;
+        text-align: center;
+      }
+    `
+  ];
+
+  protected render() {
+    return html`<sl-alert
+      variant="danger"
+      ?open=${this.isOpen}
+    >
+    <sl-icon id="hot-red-text" library="bundled" 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
+        style="color: #d63f3f;"
+        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: MouseEvent) => {this._setAgree(e)}}>I Agree</sl-button>
+    <sl-button @click=${(e: MouseEvent) => {this._setDisagree(e)}}>I Do Not Agree</sl-button>
+    </sl-alert>`;
+  }
+
+  private _setAgree(_e: MouseEvent) {
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+    const _paq = (window._paq = window._paq || []);
+    if (_paq.length === 0) return;
+
+    _paq.push(['rememberConsentGiven']);
+    this.isOpen = false;
+    localStorage.setItem(`${this.siteId}-matomo-agree`, 'true');
+    this.dispatchEvent(new Event('agree', {bubbles: true, composed: true}));
+  }
+
+  private _setDisagree(_e: MouseEvent) {
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+    const _paq = (window._paq = window._paq || []);
+    if (_paq.length === 0) return;
+
+    _paq.push(['forgetConsentGiven']);
+    this.isOpen = false;
+    localStorage.setItem(`${this.siteId}-matomo-agree`, 'false');
+    this.dispatchEvent(new Event('disagree', {bubbles: true, composed: true}));
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Close and halt execution if wrong domain
+    if (!this.force && window.location.hostname !== this.domain) {
+      console.warn(`Matomo init failed. ${window.location.hostname} does not match ${this.domain}.`);
+      this.isOpen = false;
+      return;
+    }
+  
+    const matomoTrackingId = this.siteId;
+
+    // Close and halt execution if siteId or domain not set
+    if (!this.force && (matomoTrackingId.length === 0 || this.domain.length === 0)) {
+      console.warn('Matomo init failed. No site id or domains provided.');
+      this.isOpen = false;
+      return;
+    }
+
+    // Close and halt execution if already disagreed
+    const consent = localStorage.getItem(`${this.siteId}-matomo-agree`);
+    if (consent === 'false') {
+      this.isOpen = false;
+      return;
+    }
+
+    // Close prompt only if already agreed, continue
+    if (consent === 'true') {
+      this.isOpen = false;
+    }
+
+    console.log(`Setting Matomo tracking for site=${matomoTrackingId} domain=${this.domain}`);
+
+    // 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
+  
+    (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.');
+      }
+    })();
+  }
+}
+
+export default Tracking;
+
+// Define web component
+customElements.define("hot-tracking", Tracking);