@teipublisher/pb-components 1.31.0 → 1.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teipublisher/pb-components",
-  "version": "1.31.0",
+  "version": "1.33.0",
   "description": "Collection of webcomponents underlying TEI Publisher",
   "repository": "https://github.com/eeditiones/tei-publisher-components.git",
   "main": "index.html",
@@ -76,6 +76,7 @@
     "i18next-xhr-backend": "^3.2.2",
     "js-cookie": "^2.2.1",
     "leaflet": "^1.7.1",
+    "leaflet.markercluster": "^1.5.3",
     "lit-element": "latest",
     "lit-html": "^1.3.0",
     "marked": "^1.2.0",

package/pb-elements.json

@@ -3755,14 +3755,21 @@
         },
         {
           "name": "event",
+          "description": "Name of the event which triggers a pb-geolocation event, e.g. 'click'.\nDefault is 'mouseover'.",
           "type": "string",
           "default": "\"mouseover\""
         },
         {
           "name": "auto",
+          "description": "If set, add location to a map automatically upon load by\nemitting an event. If not set, locations are only added when\nthe configured event is triggered.",
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "zoom",
+          "description": "Zoom level to use for the map if it centers on the location.",
+          "type": "number"
+        },
         {
           "name": "key",
           "description": "The key to which this element is connected.",
@@ -3841,15 +3848,23 @@
         {
           "name": "event",
           "attribute": "event",
+          "description": "Name of the event which triggers a pb-geolocation event, e.g. 'click'.\nDefault is 'mouseover'.",
           "type": "string",
           "default": "\"mouseover\""
         },
         {
           "name": "auto",
           "attribute": "auto",
+          "description": "If set, add location to a map automatically upon load by\nemitting an event. If not set, locations are only added when\nthe configured event is triggered.",
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "zoom",
+          "attribute": "zoom",
+          "description": "Zoom level to use for the map if it centers on the location.",
+          "type": "number"
+        },
         {
           "name": "key",
           "attribute": "key",
@@ -4578,6 +4593,23 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "cluster",
+          "description": "If set, combine markers into clusters if they are located too close together\nto display as single markers",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "fit-markers",
+          "description": "If set, the map will automatically zoom so it can fit all the markers",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disable-clustering-at",
+          "description": "Limits up to which zoom level markers are arranged into clusters.\nUsing a higher zoom level here will result in more markers to be shown.\n\nRequires `cluster` option to be enabled.",
+          "type": "number"
+        },
         {
           "name": "subscribe",
           "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
@@ -4667,6 +4699,26 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "cluster",
+          "attribute": "cluster",
+          "description": "If set, combine markers into clusters if they are located too close together\nto display as single markers",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "fitMarkers",
+          "attribute": "fit-markers",
+          "description": "If set, the map will automatically zoom so it can fit all the markers",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disableClusteringAt",
+          "attribute": "disable-clustering-at",
+          "description": "Limits up to which zoom level markers are arranged into clusters.\nUsing a higher zoom level here will result in more markers to be shown.\n\nRequires `cluster` option to be enabled.",
+          "type": "number"
+        },
         {
           "name": "subscribe",
           "attribute": "subscribe",
@@ -4712,15 +4764,15 @@
         },
         {
           "name": "pb-update-map",
-          "description": "When received, redraws the map to fit markers passed in with the event"
+          "description": "When received, redraws the map to fit markers passed in with the event.\nEvent details should include an array of locations, see `pb-geolocation` event below."
         },
         {
           "name": "pb-update",
-          "description": "When received, redraws the map to show markers for all pb-geolocation elements"
+          "description": "When received, redraws the map to show markers for all pb-geolocation elements found in the content of the pb-view"
         },
         {
           "name": "pb-geolocation",
-          "description": "When received, focuses the map on the geocoordinates passed in with the event"
+          "description": "When received, focuses the map on the geocoordinates passed in with the event.\nThe event details should include an object:\n```\n{\ncoordinates: {\n latitude: Number,\n longitude: Number\n},\nlabel: string - the label to show on mouseover,\nzoom: Number - fixed zoom level to zoom to,\nfitBounds: Boolean - if true, recompute current zoom level to show all markers\n}\n```"
         }
       ],
       "slots": [
@@ -9419,6 +9471,254 @@
         }
       ]
     },
+    {
+      "name": "pb-timeline",
+      "path": "./src/pb-timeline.js",
+      "description": "A timeline component to display time series data in a bar chart like view.\n\nTime series data can be displayed in one of 6 different scales:\n\n- by decade (10Y)\n- by 5 years (5Y)\n- by years (Y)\n- by month (M)\n- by week (W)\n- by day (D)\n\nThe endpoint is expected to return a JSON object. Each property should either be a date or the special\nmarker `?`, which indicates undated resources.\nThe value associated with each entry\nshould either correspond to a count of resources or an object with properties `count` and `info`. \n`info` should be an array, containing HTML to be shown in a list within the tooltips.",
+      "attributes": [
+        {
+          "name": "start-date",
+          "description": "start date for timeline to display",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "end-date",
+          "description": "endDate for timeline to display",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "scope",
+          "description": "The scope for the timeline. Must be one of the pre-defined scopes.\nIf not set, the component automatically tries to determine the best scope fitting the\ngiven time series.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "scopes",
+          "description": "The scopes to consider for automatic scoping.\n\nDefaults to [\"D\", \"W\", \"M\", \"Y\", \"5Y\", \"10Y\"]",
+          "type": "array",
+          "default": "[\"D\",\"W\",\"M\",\"Y\",\"5Y\",\"10Y\"]"
+        },
+        {
+          "name": "url",
+          "description": "Endpoint to load timeline data from. Expects response to be an\nobject with key value pairs for (date, hits).\n\nWill be reloaded whenever 'start-date' or 'end-date' attributes change.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "auto",
+          "description": "If set, data will be retrieved automatically on first load.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "resettable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "subscribe",
+          "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
+          "type": "string"
+        },
+        {
+          "name": "subscribe-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to listen to.",
+          "type": "object"
+        },
+        {
+          "name": "emit",
+          "description": "The name of the channel to send events to.",
+          "type": "string"
+        },
+        {
+          "name": "emit-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to be dispatched.",
+          "type": "object"
+        },
+        {
+          "name": "wait-for",
+          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "Common property to disable the functionality associated with a component.\n`pb-highlight` and `pb-popover` react to this.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "label"
+        },
+        {
+          "name": "maxHeight",
+          "type": "number",
+          "default": "80"
+        },
+        {
+          "name": "multiplier",
+          "type": "number",
+          "default": "0.75"
+        },
+        {
+          "name": "mousedown",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "startDate",
+          "attribute": "start-date",
+          "description": "start date for timeline to display",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "endDate",
+          "attribute": "end-date",
+          "description": "endDate for timeline to display",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "scope",
+          "attribute": "scope",
+          "description": "The scope for the timeline. Must be one of the pre-defined scopes.\nIf not set, the component automatically tries to determine the best scope fitting the\ngiven time series.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "scopes",
+          "attribute": "scopes",
+          "description": "The scopes to consider for automatic scoping.\n\nDefaults to [\"D\", \"W\", \"M\", \"Y\", \"5Y\", \"10Y\"]",
+          "type": "array",
+          "default": "[\"D\",\"W\",\"M\",\"Y\",\"5Y\",\"10Y\"]"
+        },
+        {
+          "name": "url",
+          "attribute": "url",
+          "description": "Endpoint to load timeline data from. Expects response to be an\nobject with key value pairs for (date, hits).\n\nWill be reloaded whenever 'start-date' or 'end-date' attributes change.",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "auto",
+          "attribute": "auto",
+          "description": "If set, data will be retrieved automatically on first load.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "resettable",
+          "attribute": "resettable",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "subscribe",
+          "attribute": "subscribe",
+          "description": "The name of the channel to subscribe to. Only events on a channel corresponding\nto this property are listened to.",
+          "type": "string"
+        },
+        {
+          "name": "subscribeConfig",
+          "attribute": "subscribe-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to listen to.",
+          "type": "object"
+        },
+        {
+          "name": "emit",
+          "attribute": "emit",
+          "description": "The name of the channel to send events to.",
+          "type": "string"
+        },
+        {
+          "name": "emitConfig",
+          "attribute": "emit-config",
+          "description": "Configuration object to define a channel/event mapping. Every property\nin the object is interpreted as the name of a channel and its value should\nbe an array of event names to be dispatched.",
+          "type": "object"
+        },
+        {
+          "name": "waitFor",
+          "attribute": "wait-for",
+          "description": "A selector pointing to other components this component depends on.\nWhen method `wait` is called, it will wait until all referenced\ncomponents signal with a `pb-ready` event that they are ready and listening\nto events.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Common property to disable the functionality associated with a component.\n`pb-highlight` and `pb-popover` react to this.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "pb-timeline-date-changed",
+          "description": "Triggered when user clicks on a single entry"
+        },
+        {
+          "name": "pb-timeline-daterange-changed",
+          "description": "Triggered when user selects a range of entries"
+        },
+        {
+          "name": "pb-timeline-reset-selection",
+          "description": "Requests that the timeline is reset to initial state"
+        },
+        {
+          "name": "pb-timeline-loaded",
+          "description": "Timeline was loaded"
+        }
+      ],
+      "slots": [
+        {
+          "name": "label",
+          "description": "Inserted before the label showing the currently displayed time range"
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--pb-timeline-height"
+        },
+        {
+          "name": "--pb-timeline-padding"
+        },
+        {
+          "name": "--pb-timeline-color-highlight"
+        },
+        {
+          "name": "--pb-timeline-color-light"
+        },
+        {
+          "name": "--pb-timeline-color-dark"
+        },
+        {
+          "name": "--pb-timeline-color-selected"
+        },
+        {
+          "name": "--pb-timeline-color-bin"
+        },
+        {
+          "name": "--pb-timeline-title-font-size"
+        },
+        {
+          "name": "--pb-timeline-tooltip-font-size"
+        }
+      ],
+      "cssParts": [
+        {
+          "name": "label"
+        },
+        {
+          "name": "tooltip"
+        },
+        {
+          "name": "title"
+        }
+      ]
+    },
     {
       "name": "pb-toggle-feature",
       "path": "./src/pb-toggle-feature.js",

package/src/parse-date-service.js

@@ -0,0 +1,266 @@
+export class ParseDateService {
+  /*
+  * PARSE DATE SERVICE
+  * whenever the user types a date, it should be allowed
+  * to type in a lot of dirrerent date formats. This service
+  * should detect all of the supported formats. Some supported formats:
+  * - 1. April 1970 => 1970-04-01
+  * - 1970          => 1970-01-01
+  * - 1970-12-23    => 1970-12-23
+  * - 1900 12 23    => 1900-12-23
+  * - 1 jan 1970    => 1970-01-01
+  * - 2020-W12      => 2020-03-16
+  * - 2020-01       => 2020-01-01
+  * For all formats check the tests written in AVA `test/parse-date-service-test.js`
+  *
+  * public methods
+  *   run()
+  */
+  constructor() {
+  }
+
+  run (input) {
+    this.input = input;
+    this.day = "??";
+    this.month = "??";
+    this.year = "????";
+
+    const resultIsoMatch = this.input.match(this._isoMatchRegex());
+    const resultCustomMatch = this.input.match(this._customRegex());
+    const resultWeekMatch = this.input.match(this._weekMatchRegex());
+    const resultYearAndMonthMatch = this.input.match(this._yearAndMonthRegex());
+    if (resultIsoMatch) {
+      const split = resultIsoMatch[0].split(/-|\/|\s/);
+      this.year  = split[0];
+      this.month = this._setWithLeadingZero(split[1]);
+      this.day   = this._setWithLeadingZero(split[2]);
+    } else if (resultYearAndMonthMatch) {
+      const split = resultYearAndMonthMatch[0].split("-");
+      this.year = split[0];
+      this.month = this._setWithLeadingZero(split[1]);
+      this.day = "01";
+    } else if (resultCustomMatch) {
+      const split = resultCustomMatch[0].split(/\.|\s|\/|-/);
+      this.day = this._setWithLeadingZero(split[0]);
+      this.month = this._setWithLeadingZero(split[1]);
+      this.year = split[2];
+    } else if (resultWeekMatch) {
+      const split = resultWeekMatch[0].split(/\.|\s|\/|-/);
+      const year = Number(split[0]);
+      const week = Number(split[1].replace("W0", "").replace("W", ""));
+      return this._getDateStrOfISOWeek(year, week);
+    } else {
+      this._findYear();
+      this._findMonth();
+      this._findDay();
+    }
+    return this._buildResult();
+  }
+
+  _buildResult() {
+    if (this.year != "????" && this.month === "??") {
+      this.month = "01";
+    }
+    if (this.month != "??" && this.day === "??") {
+      this.day = "01";
+    }
+    return `${this.year}-${this.month}-${this.day}`;
+  }
+
+  /*
+  * matches ISO string format (with some extensions)
+  * | 2012-01-31 | 2012-1-31 | 2012/01/31 |
+  * | 2012/1/31  | 2012 1 31 | 2012 01 31 |
+  */
+  _isoMatchRegex() {
+    return /(?<=\s|^)\d{4}(-|\s|\/)([0][1-9]|[1-9]|10|11|12)(-|\s|\/)([0][1-9]|[1-2][0-9]|3[01]|[1-9])(?=\s|$|\.)/;
+    /*      |        | year         | 01-09 | 1-9 | 10-12   |         |01-09  |10-29     |30,31| 1-9  |
+    *       |             | dash or slash                   | dash or slash                           |
+    *       |preceding with space or start of string                 end with space endofstr or dot <-|*/
+  }
+
+  /*
+  * matches a custom date string format (reversed order, day-month-year)
+  * | 12.3.2000 | 1.2.2012 | 1-2-2012 |
+  * | 12/3/2000 | 1 2 2012 | 1/2/2012 |
+  */
+  _customRegex() {
+    return /\d{1,2}(\.|\s|\/|-)\d{1,2}(\.|\s|\/|-)\d{4}/;
+    /*      | day  |           | month |          | year
+    *              |___________________|
+    *                        |
+    *        seperated by dot, space, slash or dash */
+  }
+
+  /*
+  * matches a date format that specifies the week
+  * | 2012-W1 | 2012 W1  | 2012 W01 |
+  * | 2020.W2 | 2020-W53 | 2012/W1  |
+  */
+  _weekMatchRegex() {
+    return /\d{4}(\.|\s|\/|-)W\d{1,2}(?=\s|$|\.)/;
+    /*      |year |         |W1-W53   |
+    *             |___________________|
+    *                      |
+    *     seperated by dot, space, slash or dash */
+  }
+
+  /*
+  * matches a date format with only year and month
+  * YYYY-MM (1-12)
+  * | 2020-01 | 2020-12 | 2012-1 |
+  */
+  _yearAndMonthRegex() {
+    return /(?<=\s|^)\d{4}-([0][1-9]|[1-9]|10|11|12)(?=\s|$)/;
+  }
+
+  _findYear() {
+    let regex = /[1-9]{1}[0-9]{3}/;
+    const result = this.input.match(regex)
+    if (result) {
+      this.year = result[0];
+      this._removeMatchFromInput(result);
+    }
+  }
+
+  _findMonth() {
+    const months = this._monthDictionaryValues();
+    months.forEach(month => {
+      let re = new RegExp(`(?<=\\s|^)(${month})(?=\\s|$|\\.)`, "i")
+      const result = this.input.match(re);
+      if (result) { // yes => get dict and value + return
+        this.month = this._monthDictionary()[result[0].toLowerCase()];
+        this._removeMatchFromInput(result);
+        return this.month;
+      }
+    })
+    return undefined;
+  }
+
+  /*
+  * find single numbers from 1-31
+  */
+  _findDay() {
+    let regex = /(?<=\s|^)([0][1-9]|[1-2][0-9]|3[01]|[1-9])(?=\s|$|\.|st|nd|rd|th)/;
+    /*           |         | 01-09 | 10-29    |30,31|1-9    | ends with whitespace, endofstr or dot.
+    *            | starts with whitepace or startoftr       | won't be included in match (lookbehind operator)
+    *            | look behind operator (not included)
+    *            | https://stackoverflow.com/a/6713378/6272061 */
+    const result = this.input.match(regex)
+    if (result) {
+      this.day = this._setWithLeadingZero(result[0]);
+    }
+  }
+
+  /*
+  * if a string or number has only 1 digit or char
+  * a leading zro is added
+  * returns a string
+  */
+  _setWithLeadingZero(input) {
+    input = input.toString();
+    if (input.length == 1) {
+      return "0" + input;
+    } else {
+      return input;
+    }
+  }
+
+  _removeMatchFromInput(matchObj) {
+    if (matchObj && matchObj[0] && matchObj.index) {
+      let len = matchObj[0].length;
+      let charArr = this.input.split('');
+      charArr.splice(matchObj.index, len);
+      this.input = charArr.join("");
+    }
+  }
+
+  _monthDictionaryValues() {
+    return Object.keys(this._monthDictionary());
+  }
+  _monthDictionary() {
+    return {
+      // german
+      "jan": "01", "januar":    "01",
+      "feb": "02", "februar":   "02",
+      "mär": "03", "märz":      "03",
+      "apr": "04", "april":     "04",
+      "mai": "05", "mai":       "05",
+      "jun": "06", "juni":      "06",
+      "jul": "07", "juli":      "07",
+      "aug": "08", "august":    "08",
+      "sep": "09", "september": "09",
+      "okt": "10", "oktober":   "10",
+      "nov": "11", "november":  "11",
+      "dez": "12", "dezember":  "12",
+      // english
+      "jan": "01", "january":   "01",
+      "feb": "02", "february":  "02",
+      "mar": "03", "march":     "03",
+      "apr": "04", "april":     "04",
+      "may": "05", "may":       "05",
+      "jun": "06", "june":      "06",
+      "jul": "07", "july":      "07",
+      "aug": "08", "august":    "08",
+      "sep": "09", "september": "09",
+      "oct": "10", "october":   "10",
+      "nov": "11", "november":  "11",
+      "dec": "12", "december":  "12",
+      // french
+      "janv":"01", "janvier":   "01",
+      "févr":"02", "février'":  "02",
+      "mars":"03", "mars":      "03",
+      "avr": "04", "avril":     "04",
+      "mai": "05", "mai":       "05",
+      "juin":"06", "juin":      "06",
+      "juil":"07", "juillet":   "07",
+      "août":"08", "août":      "08",
+      "sept":"09", "septembre": "09",
+      "oct": "10", "octobre":   "10",
+      "nov": "11", "novembre":  "11",
+      "déc": "12", "décembre":  "12",
+      //italian
+      "gen": "01", "gennaio":   "01",
+      "feb": "02", "febbraio":  "02",
+      "mar": "03", "marzo":     "03",
+      "apr": "04", "aprile":    "04",
+      "mag": "05", "maggio":    "05",
+      "giu": "06", "giugno":    "06",
+      "lug": "07", "luglio":    "07",
+      "ago": "08", "agosto":    "08",
+      "set": "09", "settembre": "09",
+      "ott": "10", "ottobre":   "10",
+      "nov": "11", "novembre":  "11",
+      "dic": "12", "dicembre":  "12",
+    }
+  }
+
+  _getDateStrOfISOWeek(y, w) {
+    let simple = new Date(y, 0, 1 + (w - 1) * 7);
+    let dow = simple.getDay();
+    let ISOweekStart = simple;
+    if (dow <= 4) {
+      ISOweekStart.setDate(simple.getDate() - simple.getDay() + 1);
+    } else {
+      ISOweekStart.setDate(simple.getDate() + 8 - simple.getDay());
+    }
+    // do not rollover to next or previous year
+    if (ISOweekStart.getFullYear() > y) {
+      return `${y}-12-31`;
+    } else if (ISOweekStart.getFullYear() < y) {
+      return `${y}-01-01`;
+    }
+    return this._dateToDateStr(ISOweekStart);
+  }
+
+  /*
+  * formats date object to dateStr YYYY-MM-DD
+  */
+  _dateToDateStr(date) {
+    let d = new Date(date);
+    let month = this._setWithLeadingZero((d.getMonth() + 1));
+    let day = this._setWithLeadingZero(d.getDate());
+    let year = d.getFullYear();
+    return `${year}-${month}-${day}`;
+  }
+}

package/src/pb-browse-docs.js

@@ -206,6 +206,7 @@ export class PbBrowseDocs extends PbLoad {
                     }
                 </style>
             </custom-style>
+            <slot name="header"></slot>
             <div class="toolbar">
                 <paper-dropdown-menu id="sort" label="${translate(this.sortLabel)}" part="sort-dropdown">
                     <paper-listbox id="sort-list" selected="${this.sortBy}" slot="dropdown-content" class="dropdown-content" attr-for-selected="value">

package/src/pb-components.js

@@ -58,6 +58,7 @@ import './pb-blacklab-results.js';
 import './pb-blacklab-highlight.js';
 import './pb-table-grid.js';
 import './pb-split-list.js';
+import './pb-timeline.js';
 
 import '@polymer/iron-icons/editor-icons';
 import '@polymer/iron-icons/social-icons';