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

package/src/pb-formula.js

@@ -1,118 +1,116 @@
-import { LitElement, html, css } from 'lit-element';
-import "@lrnwebcomponents/es-global-bridge";
-import { translate } from "./pb-i18n.js";
+import { LitElement, html, css } from 'lit';
+import '@lrnwebcomponents/es-global-bridge';
+import { translate } from './pb-i18n.js';
 
 /** Import external script dynamically */
 function _import(name, location) {
-    window.ESGlobalBridge.requestAvailability();
-    return new Promise(resolve => {
-        window.ESGlobalBridge.instance.load(name, location);
-        window.addEventListener(
-            `es-bridge-${name}-loaded`,
-            () => resolve(),
-            { once: true }
-        );
-    });
+  window.ESGlobalBridge.requestAvailability();
+  return new Promise(resolve => {
+    window.ESGlobalBridge.instance.load(name, location);
+    window.addEventListener(`es-bridge-${name}-loaded`, () => resolve(), { once: true });
+  });
 }
 
 /**
  * Update the stylesheet required by MathJax.
  * Needs to be done after typesetting has completed.
- * 
- * @param {Element} context 
- * @param {Element} styles 
+ *
+ * @param {Element} context
+ * @param {Element} styles
  */
 function _updateStyles(context, styles) {
-    let root = context.getRootNode();
-    if (root.nodeType === Node.DOCUMENT_NODE) {
-        root = root.head;
-    } else {
-        // fonts need to be declared outside shadow root, so extract
-        // all font-faces and put them into a style in the header
-        const elem = document.querySelector(`style#${styles.id}`);
-        if (elem) {
-            elem.parentNode.removeChild(elem);
-        }
-        const fonts = styles.innerHTML.match(/@font-face[^{]+{.*?}/gs);
-        if (fonts) {
-            const style = document.createElement('style');
-            style.id = styles.id;
-            style.appendChild(document.createTextNode(fonts.join('\n')));
-            document.head.appendChild(style);
-        }
+  let root = context.getRootNode();
+  if (root.nodeType === Node.DOCUMENT_NODE) {
+    root = root.head;
+  } else {
+    // fonts need to be declared outside shadow root, so extract
+    // all font-faces and put them into a style in the header
+    const elem = document.querySelector(`style#${styles.id}`);
+    if (elem) {
+      elem.parentNode.removeChild(elem);
     }
-    const oldStyles = root.querySelector(`#${styles.id}`);
-    if (oldStyles) {
-        oldStyles.parentNode.removeChild(oldStyles);
+    const fonts = styles.innerHTML.match(/@font-face[^{]+{.*?}/gs);
+    if (fonts) {
+      const style = document.createElement('style');
+      style.id = styles.id;
+      style.appendChild(document.createTextNode(fonts.join('\n')));
+      document.head.appendChild(style);
     }
-    root.appendChild(styles);
+  }
+  const oldStyles = root.querySelector(`#${styles.id}`);
+  if (oldStyles) {
+    oldStyles.parentNode.removeChild(oldStyles);
+  }
+  root.appendChild(styles);
 }
 
 /**
  * Iterate through the given `pb-formula` elements and typeset the math.
  */
 function _initMath(context, formulas) {
-    formulas.forEach((formula) => {
-        if (formula.hasChildNodes()) {
-            const display = formula.hasAttribute('display') || false;
-            const mathml = formula.querySelector('math');
-            const options = window.MathJax.getMetricsFor(formula.parentNode, display);
-            options.display = display;
-            let chtml;
-            let source;
-            if (mathml) {
-                source = mathml.outerHTML;
-                chtml = window.MathJax.mathml2chtml(source, options);
-            } else {
-                window.MathJax.texReset();
-                source = formula.innerHTML.replaceAll(/&\w+;/g, function (m) {
-                    return {
-                        '&': '&',
-                        '&lt;' : '<'
-                    }[m];
-                });
-                chtml = window.MathJax.tex2chtml(source, options);
-            }
-            formula.innerHTML = '';
-            formula.appendChild(chtml);
-            formula.setAttribute('loaded', 'loaded');
-            formula.setAttribute('source', source);
-        }
-    });
-    _updateStyles(context, window.MathJax.chtmlStylesheet());
+  formulas.forEach(formula => {
+    if (formula.hasChildNodes()) {
+      const display = formula.hasAttribute('display') || false;
+      const mathml = formula.querySelector('math');
+      const options = window.MathJax.getMetricsFor(formula.parentNode, display);
+      options.display = display;
+      let chtml;
+      let source;
+      if (mathml) {
+        source = mathml.outerHTML;
+        chtml = window.MathJax.mathml2chtml(source, options);
+      } else {
+        window.MathJax.texReset();
+        source = formula.innerHTML.replaceAll(
+          /&\w+;/g,
+          m =>
+            ({
+              '&amp;': '&',
+              '&lt;': '<',
+            }[m]),
+        );
+        chtml = window.MathJax.tex2chtml(source, options);
+      }
+      formula.innerHTML = '';
+      formula.appendChild(chtml);
+      formula.setAttribute('loaded', 'loaded');
+      formula.setAttribute('source', source);
+    }
+  });
+  _updateStyles(context, window.MathJax.chtmlStylesheet());
 }
 
 /**
  * Search the passed in element for `pb-formula` elements and
  * render them via MathJax.
- * 
+ *
  * Formulas need to be processed sequentially or the output will
  * be screwed up. Therefore we cannot call MathJax asynchronously
  * but need to do it from this central controller.
- * 
+ *
  * @param {Element} elem the root element to process
  */
 export function typesetMath(elem) {
-    const formulas = elem.querySelectorAll('pb-formula');
-    console.log(`<pb-formula> Found ${formulas.length} elements to typeset ...`);
-    if (formulas.length > 0) {
-        if (window.MathJax) {
-            _initMath(elem, formulas);
-            return;
-        }
-        const showMenu = elem.querySelector('pb-formula[menu]');
-        window.MathJax = {
-            startup: {
-                typeset: false, // Perform initial typeset?
-                pageReady: () => _initMath(elem, formulas)  // Called when MathJax and page are ready
-            },
-            options: {
-                enableMenu: showMenu !== null
-            }
-        };
-
-        _import('MathJax', 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js');
+  const formulas = elem.querySelectorAll('pb-formula');
+  console.log(`<pb-formula> Found ${formulas.length} elements to typeset ...`);
+  if (formulas.length > 0) {
+    if (window.MathJax) {
+      _initMath(elem, formulas);
+      return;
     }
+    const showMenu = elem.querySelector('pb-formula[menu]');
+    window.MathJax = {
+      startup: {
+        typeset: false, // Perform initial typeset?
+        pageReady: () => _initMath(elem, formulas), // Called when MathJax and page are ready
+      },
+      options: {
+        enableMenu: showMenu !== null,
+      },
+    };
+
+    _import('MathJax', 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js');
+  }
 }
 
 /**
@@ -121,84 +119,84 @@ export function typesetMath(elem) {
  * pass it the root context which should be searched for `pb-notation` elements. The function will
  * then do the actual typesetting. The reason for this is that formulas need to be typeset synchronously, i.e. one
  * after the other.
- * 
+ *
  * The component detects automatically if the formula to typeset is in TeX notation or MathML.
- * 
+ *
  * @slot - should contain math in TeX notation or MathML
  */
 export class PbFormula extends LitElement {
-    static get properties() {
-        return {
-            /**
-             * TeX notation only: render the formula in display mode, i.e. as block level element.
-             */
-            display: {
-                type: Boolean
-            },
-            /**
-             * Option: if set, enable the MathJax context menu. This affects **all** formulas
-             * in the context (the page or pb-view), not just the current component!
-             */
-            menu: {
-                type: Boolean
-            },
-            /**
-             * Will be set once the element has been typeset.
-             */
-            loaded: {
-                type: Boolean
-            },
-            /**
-             * Will contain the source notation once the element has been typeset.
-             */
-            source: {
-                type: String
-            },
-            ...super.properties
-        };
-    }
+  static get properties() {
+    return {
+      /**
+       * TeX notation only: render the formula in display mode, i.e. as block level element.
+       */
+      display: {
+        type: Boolean,
+      },
+      /**
+       * Option: if set, enable the MathJax context menu. This affects **all** formulas
+       * in the context (the page or pb-view), not just the current component!
+       */
+      menu: {
+        type: Boolean,
+      },
+      /**
+       * Will be set once the element has been typeset.
+       */
+      loaded: {
+        type: Boolean,
+      },
+      /**
+       * Will contain the source notation once the element has been typeset.
+       */
+      source: {
+        type: String,
+      },
+      ...super.properties,
+    };
+  }
 
-    constructor() {
-        super();
-        this.display = false;
-    }
+  constructor() {
+    super();
+    this.display = false;
+  }
 
-    attributeChangedCallback(name, oldVal, newVal) {
-        super.attributeChangedCallback(name, oldVal, newVal);
-        switch(name) {
-            case 'loaded':
-                this.loaded = true;
-                break;
-            case 'source':
-                this.source = newVal;
-                break;
-            default:
-                break;
-        }
+  attributeChangedCallback(name, oldVal, newVal) {
+    super.attributeChangedCallback(name, oldVal, newVal);
+    switch (name) {
+      case 'loaded':
+        this.loaded = true;
+        break;
+      case 'source':
+        this.source = newVal;
+        break;
+      default:
+        break;
     }
+  }
 
-    render() {
-        if (!this.hasChildNodes()) {
-            return null;
-        }
-        if (!this.loaded) {
-            return html`<span class="loading">${translate('dialogs.loading')}</span>`;
-        }
-        return html`<div id="content" class="${this.display ? 'block' : ''}"><slot></slot></div>`;
+  render() {
+    if (!this.hasChildNodes()) {
+      return null;
     }
-
-    static get styles() {
-        return css`
-            :host {
-                display: inline-block;
-            }
-            .block {
-                display: block;
-            }
-            .loading {
-                color: #808080;
-            }
-        `;
+    if (!this.loaded) {
+      return html`<span class="loading">${translate('dialogs.loading')}</span>`;
     }
+    return html`<div id="content" class="${this.display ? 'block' : ''}"><slot></slot></div>`;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: inline-block;
+      }
+      .block {
+        display: block;
+      }
+      .loading {
+        color: #808080;
+      }
+    `;
+  }
 }
 customElements.define('pb-formula', PbFormula);

package/src/pb-geolocation.js

@@ -1,13 +1,12 @@
-import { html, css } from 'lit-element';
-import { PbHighlight } from "./pb-highlight.js";
-
+import { html, css } from 'lit';
+import { PbHighlight } from './pb-highlight.js';
 
 /**
  * Represents a geo location. Extends `pb-highlight`, but sends an additional `pb-geolocation` event
  * on mouseover.
- * 
+ *
  * For `pb-leaflet-map` to show markers for `pb-geolocation` elements, make sure that map subscribes to the channel
- * into which `pb-geolocation`s emit and that map is loaded before the emitting component, e.g. `pb-view`, by specifying 
+ * into which `pb-geolocation`s emit and that map is loaded before the emitting component, e.g. `pb-view`, by specifying
  * `wait-for` property.
  *
  * @slot - default unnamed slot for content. May also contain an option `<template>` element for content to be shown in a popup
@@ -15,145 +14,144 @@ import { PbHighlight } from "./pb-highlight.js";
  * @cssprop --pb-highlight-color - Background color to highlight an element
  */
 export class PbGeolocation extends PbHighlight {
-    static get properties() {
-        return {
-            ...super.properties,
-            longitude: {
-                type: Number
-            },
-            latitude: {
-                type: Number
-            },
-            /**
-             * Optional label for the place, e.g. to display a marker
-             */
-            label: {
-                type: String
-            },
-            /**
-             * Name of the event which triggers a pb-geolocation event, e.g. 'click'.
-             * Default is 'mouseover'.
-             */
-            event: {
-                type: String
-            },
-            /**
-             * Zoom level to use for the map if it centers on the location.
-             */
-            zoom: {
-                type: Number
-            },
-            /**
-             * If set, add location to a map automatically upon load by
-             * emitting an event. If not set, locations are only added when
-             * the configured event is triggered.
-             */
-            auto: {
-                type: Boolean
-            }
-        };
-    }
+  static get properties() {
+    return {
+      ...super.properties,
+      longitude: {
+        type: Number,
+      },
+      latitude: {
+        type: Number,
+      },
+      /**
+       * Optional label for the place, e.g. to display a marker
+       */
+      label: {
+        type: String,
+      },
+      /**
+       * Name of the event which triggers a pb-geolocation event, e.g. 'click'.
+       * Default is 'mouseover'.
+       */
+      event: {
+        type: String,
+      },
+      /**
+       * Zoom level to use for the map if it centers on the location.
+       */
+      zoom: {
+        type: Number,
+      },
+      /**
+       * If set, add location to a map automatically upon load by
+       * emitting an event. If not set, locations are only added when
+       * the configured event is triggered.
+       */
+      auto: {
+        type: Boolean,
+      },
+    };
+  }
 
-    constructor() {
-        super();
-        this.event = 'mouseover';
-        this.auto = false;
-        this.zoom = null;
-    }
+  constructor() {
+    super();
+    this.event = 'mouseover';
+    this.auto = false;
+    this.zoom = null;
+  }
 
-    connectedCallback() {
-        super.connectedCallback();
+  connectedCallback() {
+    super.connectedCallback();
 
-        if (this.event) {
-            this.addEventListener(this.event, () =>
-                this.emitTo('pb-geolocation', {
-                    coordinates: {
-                        latitude: this.latitude,
-                        longitude: this.longitude
-                    },
-                    label: this.label,
-                    zoom: this.zoom,
-                    popup: this.popup,
-                    element: this,
-                    event: this.event
-                })
-            );
-        }
-        if (this.auto) {
-            this.waitForChannel(() => {
-                this.emitTo('pb-geolocation', {
-                    coordinates: {
-                        latitude: this.latitude,
-                        longitude: this.longitude
-                    },
-                    label: this.label,
-                    popup: this.popup,
-                    fitBounds: true,
-                    element: this
-                });
-            });
-        }
+    if (this.event) {
+      this.addEventListener(this.event, () =>
+        this.emitTo('pb-geolocation', {
+          coordinates: {
+            latitude: this.latitude,
+            longitude: this.longitude,
+          },
+          label: this.label,
+          zoom: this.zoom,
+          popup: this.popup,
+          element: this,
+          event: this.event,
+        }),
+      );
     }
-
-    render() {
-        return html`<span id="content"><slot></slot></span>`;
+    if (this.auto) {
+      this.waitForChannel(() => {
+        this.emitTo('pb-geolocation', {
+          coordinates: {
+            latitude: this.latitude,
+            longitude: this.longitude,
+          },
+          label: this.label,
+          popup: this.popup,
+          fitBounds: true,
+          element: this,
+        });
+      });
     }
+  }
 
-    get popup() {
-        const template = this.querySelector('template');
-        if (template) {
-            const wrapper = document.createElement('div');
-            wrapper.appendChild(template.content.cloneNode(true));
-            return wrapper;
-        }
-        return null;
-    }
+  render() {
+    return html`<span id="content"><slot></slot></span>`;
+  }
 
-    static get styles() {
-        return css`
-            :host {
-                display: inline;
-                cursor: pointer;
-            }
+  get popup() {
+    const template = this.querySelector('template');
+    if (template) {
+      const wrapper = document.createElement('div');
+      wrapper.appendChild(template.content.cloneNode(true));
+      return wrapper;
+    }
+    return null;
+  }
 
-            [name="popup"] {
-                display: none;
-            }
+  static get styles() {
+    return css`
+      :host {
+        display: inline;
+        cursor: pointer;
+      }
 
-            @keyframes keyFrameBackgroundColorIn {
-                0% {
-                    background-color: inherit;
-                }
-                100% {
-                    background-color: var(--pb-highlight-color, #F9E976);
-                }
-            }
+      [name='popup'] {
+        display: none;
+      }
 
-            #content {
-                display: inline;
-            }
+      @keyframes keyFrameBackgroundColorIn {
+        0% {
+          background-color: inherit;
+        }
+        100% {
+          background-color: var(--pb-highlight-color, #f9e976);
+        }
+      }
 
-            .highlight-on {
-                background-color: var(--pb-highlight-color, #F9E976);
-                animation-name: keyFrameBackgroundColorIn;
-                animation-duration: 500ms;
-                animation-iteration-count: 1;
-                animation-timing-function: ease-in;
+      #content {
+        display: inline;
+      }
 
-            }
+      .highlight-on {
+        background-color: var(--pb-highlight-color, #f9e976);
+        animation-name: keyFrameBackgroundColorIn;
+        animation-duration: 500ms;
+        animation-iteration-count: 1;
+        animation-timing-function: ease-in;
+      }
 
-            .highlight-off {
-                background-color: inherit;
-            }
-        `;
-    }
+      .highlight-off {
+        background-color: inherit;
+      }
+    `;
+  }
 
-    /**
-     * Fired on mouseover
-     *
-     * @event pb-geolocation
-     * @param {Object} coordinates an object with two properties: latitude and longitude
-     * @param {String} label an optional label for the place
-     */
+  /**
+   * Fired on mouseover
+   *
+   * @event pb-geolocation
+   * @param {Object} coordinates an object with two properties: latitude and longitude
+   * @param {String} label an optional label for the place
+   */
 }
-customElements.define('pb-geolocation', PbGeolocation);
+customElements.define('pb-geolocation', PbGeolocation);