@teipublisher/pb-components 2.26.1-next.2 → 3.0.0-next-4.1

package/src/pb-map-icon.js

@@ -1,101 +1,101 @@
-import { LitElement } from 'lit-element';
+import { LitElement } from 'lit';
 
 function sizeConverter(value, type) {
-    try {
-        return value.split(/\s*,\s*/).map(s => parseInt(s, 10));
-    } catch (e) {
-        console.error(`<pb-map-icon> Invalid size specified: ${value}`);
-        return null;
-    }
+  try {
+    return value.split(/\s*,\s*/).map(s => parseInt(s, 10));
+  } catch (e) {
+    console.error(`<pb-map-icon> Invalid size specified: ${value}`);
+    return null;
+  }
 }
 /**
- * Configure a map icon type to be used for markers. 
+ * Configure a map icon type to be used for markers.
  * Should be nested inside `pb-leaflet-map`.
  *
  */
 export class PbMapIcon extends LitElement {
-    static get properties() {
-        return {
-            /**
-             * Name of the icon. Set to 'active' to configure the icon used for
-             * places which were target of a previous `pb-geolocation` event (i.e. are currently 'active').
-             */
-            name: {
-                type: String
-            },
-            /**
-             * The URL to load the icon from. Should be relative to the path set via the `imagesPath` property on `pb-leaflet-map`.
-             */
-            iconUrl: {
-                type: String,
-                attribute: 'icon-url'
-            },
-            /**
-             * Size of the icon as comma-separated string, i.e. 'height, width'.
-             */
-            iconSize: {
-                type: Array,
-                converter: sizeConverter,
-                attribute: 'icon-size'
-            },
-            /**
-             * Anchor position of the icon as comma-separated string, i.e. 'height, width'.
-             */
-            iconAnchor: {
-                type: Array,
-                converter: sizeConverter,
-                attribute: 'icon-anchor'
-            },
-            /**
-             * The URL to load the shadow icon from. Should be relative to the path set via the `imagesPath` property on `pb-leaflet-map`.
-             */
-            shadowUrl: {
-                type: String,
-                attribute: 'shadow-url'
-            },
-            /**
-             * Size of the shadow icon as comma-separated string, i.e. 'height, width'.
-             */
-            shadowSize: {
-                type: Array,
-                converter: sizeConverter,
-                attribute: 'shadow-size'
-            },
-            /**
-             * Anchor position of the shadow icon as comma-separated string, i.e. 'height, width'.
-             */
-            shadowAnchor: {
-                type: Array,
-                converter: sizeConverter,
-                attribute: 'shadow-anchor'
-            },
-            /**
-             * Anchor position of the popup as comma-separated string, i.e. 'height, width'.
-             */
-            popupAncor: {
-                type: Array,
-                converter: sizeConverter,
-                attribute: 'popup-anchor'
-            }
-        };
-    }
+  static get properties() {
+    return {
+      /**
+       * Name of the icon. Set to 'active' to configure the icon used for
+       * places which were target of a previous `pb-geolocation` event (i.e. are currently 'active').
+       */
+      name: {
+        type: String,
+      },
+      /**
+       * The URL to load the icon from. Should be relative to the path set via the `imagesPath` property on `pb-leaflet-map`.
+       */
+      iconUrl: {
+        type: String,
+        attribute: 'icon-url',
+      },
+      /**
+       * Size of the icon as comma-separated string, i.e. 'height, width'.
+       */
+      iconSize: {
+        type: Array,
+        converter: sizeConverter,
+        attribute: 'icon-size',
+      },
+      /**
+       * Anchor position of the icon as comma-separated string, i.e. 'height, width'.
+       */
+      iconAnchor: {
+        type: Array,
+        converter: sizeConverter,
+        attribute: 'icon-anchor',
+      },
+      /**
+       * The URL to load the shadow icon from. Should be relative to the path set via the `imagesPath` property on `pb-leaflet-map`.
+       */
+      shadowUrl: {
+        type: String,
+        attribute: 'shadow-url',
+      },
+      /**
+       * Size of the shadow icon as comma-separated string, i.e. 'height, width'.
+       */
+      shadowSize: {
+        type: Array,
+        converter: sizeConverter,
+        attribute: 'shadow-size',
+      },
+      /**
+       * Anchor position of the shadow icon as comma-separated string, i.e. 'height, width'.
+       */
+      shadowAnchor: {
+        type: Array,
+        converter: sizeConverter,
+        attribute: 'shadow-anchor',
+      },
+      /**
+       * Anchor position of the popup as comma-separated string, i.e. 'height, width'.
+       */
+      popupAncor: {
+        type: Array,
+        converter: sizeConverter,
+        attribute: 'popup-anchor',
+      },
+    };
+  }
 
-    constructor() {
-        super();
-        this.name = 'default';
-        this.type = 'image';
-        this.iconUrl = null;
-    }
+  constructor() {
+    super();
+    this.name = 'default';
+    this.type = 'image';
+    this.iconUrl = null;
+  }
 
-    get options() {
-        const options = {};
-        Object.keys(PbMapIcon.properties).forEach(key => {
-            if (this[key]) {
-                options[key] = this[key];
-            }
-        });
-        console.log('<pb-map-icon> Options: %o', options);
-        return options;
-    }
+  get options() {
+    const options = {};
+    Object.keys(PbMapIcon.properties).forEach(key => {
+      if (this[key]) {
+        options[key] = this[key];
+      }
+    });
+    console.log('<pb-map-icon> Options: %o', options);
+    return options;
+  }
 }
-customElements.define('pb-map-icon', PbMapIcon);
+customElements.define('pb-map-icon', PbMapIcon);

package/src/pb-map-layer.js

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit-element';
+import { LitElement } from 'lit';
 
 const ignore = ['type', 'url', 'label', 'base', 'show'];
 
@@ -7,92 +7,92 @@ const ignore = ['type', 'url', 'label', 'base', 'show'];
  *
  */
 export class PbMapLayer extends LitElement {
-    static get properties() {
-        return {
-            /**
-             * Type of the layer: either 'tile' or 'geojson'
-             */
-            type: {
-                type: String
-            },
-            /**
-             * The URL (or URL template) to load layer data from
-             */
-            url: {
-                type: String
-            },
-            /**
-             * Set to indicate that this is a base layer
-             */
-            base: {
-                type: Boolean
-            },
-            /**
-             * Display the layer on the map upon initialization
-             */
-            show: {
-                type: Boolean
-            },
-            /**
-             * A label for the layer to be shown in the layer control
-             */
-            label: {
-                type: String
-            },
-            attribution: {
-                type: String
-            },
-            minZoom: {
-                type: Number,
-                attribute: 'min-zoom'
-            },
-            maxZoom: {
-                type: Number,
-                attribute: 'max-zoom'
-            },
-            zoomOffset: {
-                type: Number,
-                attribute: 'zoom-offset'
-            },
-            opacity: {
-                type: Number
-            },
-            tileSize: {
-                type: Number
-            },
-            id: {
-                type: String
-            },
-            accessToken: {
-                type: String,
-                attribute: 'access-token'
-            }
-        };
-    }
+  static get properties() {
+    return {
+      /**
+       * Type of the layer: either 'tile' or 'geojson'
+       */
+      type: {
+        type: String,
+      },
+      /**
+       * The URL (or URL template) to load layer data from
+       */
+      url: {
+        type: String,
+      },
+      /**
+       * Set to indicate that this is a base layer
+       */
+      base: {
+        type: Boolean,
+      },
+      /**
+       * Display the layer on the map upon initialization
+       */
+      show: {
+        type: Boolean,
+      },
+      /**
+       * A label for the layer to be shown in the layer control
+       */
+      label: {
+        type: String,
+      },
+      attribution: {
+        type: String,
+      },
+      minZoom: {
+        type: Number,
+        attribute: 'min-zoom',
+      },
+      maxZoom: {
+        type: Number,
+        attribute: 'max-zoom',
+      },
+      zoomOffset: {
+        type: Number,
+        attribute: 'zoom-offset',
+      },
+      opacity: {
+        type: Number,
+      },
+      tileSize: {
+        type: Number,
+      },
+      id: {
+        type: String,
+      },
+      accessToken: {
+        type: String,
+        attribute: 'access-token',
+      },
+    };
+  }
 
-    constructor() {
-        super();
-        this.type = 'tile';
-        this.url = null;
-    }
+  constructor() {
+    super();
+    this.type = 'tile';
+    this.url = null;
+  }
 
-    get options() {
-        const options = {};
-        Object.keys(PbMapLayer.properties).forEach(key => {
-            if (ignore.indexOf(key) < 0 && this[key]) {
-                options[key] = this[key];
-            }
-        });
-        console.log('<pb-leaflet-map-layer> Options: %o', options);
-        return options;
-    }
+  get options() {
+    const options = {};
+    Object.keys(PbMapLayer.properties).forEach(key => {
+      if (ignore.indexOf(key) < 0 && this[key]) {
+        options[key] = this[key];
+      }
+    });
+    console.log('<pb-leaflet-map-layer> Options: %o', options);
+    return options;
+  }
 
-    async data() {
-        return new Promise((resolve) => {
-            fetch(this.url)
-                .then((response) => response.json())
-                .then((json) => resolve(json));
-        });
-    }
+  async data() {
+    return new Promise(resolve => {
+      fetch(this.url)
+        .then(response => response.json())
+        .then(json => resolve(json));
+    });
+  }
 }
-customElements.define('pb-map-layer', PbMapLayer);
+customElements.define('pb-map-layer', PbMapLayer);

package/src/pb-markdown.js

@@ -1,139 +1,136 @@
-import { LitElement, html, css } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { LitElement, html, css } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { marked } from 'marked';
 import { pbMixin, waitOnce } from './pb-mixin.js';
-import * as marked from 'marked/lib/marked.js';
 import './pb-code-highlight.js';
 
-const renderer = new window.marked.Renderer();
-renderer.code = function code(code, infostring, escaped) {
-    return `<pb-code-highlight language="${infostring}" line-numbers>
-        <template>${code}</template>
-    </pb-code-highlight>`;
+// Configure marked with custom renderer
+const renderer = {
+  code(code, infostring, escaped) {
+    const language = code.lang || infostring || 'undefined';
+    const content = code.text || code;
+    return `<pb-code-highlight language="${language}" line-numbers>
+      <template>${content}</template>
+  </pb-code-highlight>`;
+  },
 };
 
-window.marked.setOptions({
-    renderer
-});
+marked.use({ renderer });
 
 function removeIndent(input) {
-    const indents = input.match(/^[^\S]*(?=\S)/gm);
+  const indents = input.match(/^[^\S]*(?=\S)/gm);
 
-    if (!indents || !indents[0].length)
-        return input;
+  if (!indents || !indents[0].length) return input;
 
-    indents.sort((a, b) => a.length - b.length);
+  indents.sort((a, b) => a.length - b.length);
 
-    if (!indents[0].length)
-        return input;
+  if (!indents[0].length) return input;
 
-    return input.replace(RegExp('^' + indents[0], 'gm'), '');
+  return input.replace(RegExp(`^${indents[0]}`, 'gm'), '');
 }
 
 /**
  * A component to render markdown. Content to render may either
- * 
+ *
  * 1. be specified via the `content` property
  * 2. included in the body of the element
  * 3. loaded from an external URL
- * 
+ *
  * Using option 2, if the markdown includes embedded HTML, make sure to wrap
  * the content into an `template` HTML element to prevent the browser from interpreting
  * it.
- * 
+ *
  * Using option 3, you can either specify an absolute or relative URL. Relative URLs
  * will be interpreted relative to the endpoint set by `pb-page`.
  */
 export class PbMarkdown extends pbMixin(LitElement) {
-    static get properties() {
-        return {
-            /**
-             * The markdown content to be rendered. If undefined,
-             * markdown will be taken from the content of the element
-             * or loaded from the specified URL.
-             */
-            content: {
-                type: String,
-            },
-            /**
-             * An absolute or relative URL to load the markdown from.
-             */
-            url: {
-                type: String,
-            },
-            ...super.properties,
-        };
+  static get properties() {
+    return {
+      /**
+       * The markdown content to be rendered. If undefined,
+       * markdown will be taken from the content of the element
+       * or loaded from the specified URL.
+       */
+      content: {
+        type: String,
+      },
+      /**
+       * An absolute or relative URL to load the markdown from.
+       */
+      url: {
+        type: String,
+      },
+      ...super.properties,
+    };
+  }
+
+  constructor() {
+    super();
+    this._url = null;
+  }
+
+  set url(value) {
+    this._url = value;
+    waitOnce('pb-page-ready', options => {
+      this._load(options.endpoint);
+    });
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.style.display = 'block';
+
+    if (!this.content) {
+      const content = document.createElement('div');
+      for (let i = 0; i < this.childNodes.length; i++) {
+        const node = this.childNodes[i];
+        content.appendChild(document.importNode(node.content || node, true));
+      }
+      this.content = removeIndent(content.innerHTML);
     }
 
-    constructor() {
-        super();
-        this._url = null;
-    }
-
-    set url(value) {
-        this._url = value;
-        waitOnce("pb-page-ready", (options) => {
-            this._load(options.endpoint);
-        });
-    }
-
-    connectedCallback() {
-        super.connectedCallback();
-        this.style.display = "block";
-
-        if (!this.content) {
-            const content = document.createElement("div");
-            for (let i = 0; i < this.childNodes.length; i++) {
-                const node = this.childNodes[i];
-                content.appendChild(
-                    document.importNode(node.content || node, true)
-                );
-            }
-            this.content = removeIndent(content.innerHTML);
-        }
-
-        this.subscribeTo("pb-zoom", (ev) => {
-            this.zoom(ev.detail.direction);
-        });
-    }
-
-    _load(server) {
-        const url = this.toAbsoluteURL(this._url, server);
-        fetch(url, { credentials: "same-origin" })
-            .then((response) => response.text())
-            .catch(() => {
-                console.error(
-                    "<pb-markdown> failed to load content from %s",
-                    url.toString()
-                );
-                return Promise.resolve(this.content);
-            })
-            .then((text) => {
-                this.content = text;
-            });
-    }
-
-    createRenderRoot() {
-        return this;
-    }
-
-    render() {
-        if (!this.content) {
-            return null;
-        }
-        return html`<div>${unsafeHTML(window.marked(this.content))}</div>`;
-    }
-
-    zoom(direction) {
-        const fontSize = window
-            .getComputedStyle(this)
-            .getPropertyValue("font-size");
-        const size = parseInt(fontSize.replace(/^(\d+)px/, "$1"));
-
-        if (direction === "in") {
-            this.style.fontSize = size + 1 + "px";
-        } else {
-            this.style.fontSize = size - 1 + "px";
-        }
+    this.subscribeTo('pb-zoom', ev => {
+      this.zoom(ev.detail.direction);
+    });
+  }
+
+  _load(server) {
+    const url = this.toAbsoluteURL(this._url, server);
+    fetch(url, { credentials: 'same-origin' })
+      .then(response => response.text())
+      .catch(() => {
+        console.error('<pb-markdown> failed to load content from %s', url.toString());
+        return Promise.resolve(this.content);
+      })
+      .then(text => {
+        this.content = text;
+      });
+  }
+
+  createRenderRoot() {
+    return this;
+  }
+
+  render() {
+    if (!this.content) {
+      return null;
     }
+    return html`<div>${unsafeHTML(marked.parse(this.content))}</div>`;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        font-size: calc(var(--pb-content-font-size, 1rem) * var(--pb-zoom-factor, 1));
+      }
+    `;
+  }
+
+  zoom(direction) {
+    // Zoom is now handled globally by pb-zoom component using CSS custom properties
+    // This method is kept for compatibility but does nothing
+    // The component should rely on CSS: font-size: calc(var(--pb-content-font-size, 1rem) * var(--pb-zoom-factor, 1));
+  }
 }
-customElements.define('pb-markdown', PbMarkdown);
+customElements.define('pb-markdown', PbMarkdown);