mobility-toolbox-js 2.0.0 → 2.0.1-beta.13

package/common/mixins/CopyrightMixin.js

@@ -1,48 +1,24 @@
-/* eslint-disable class-methods-use-this */
-/* eslint-disable max-classes-per-file */
-
-/**
- * Copyright control interface.
- *
- */
 export class CopyrightInterface {
-  /**
-   * Return an array of layer's copyright.
-   *
-   * @return {String[]} A list of copyrights to render.
-   */
-  getCopyrights() {}
+  getCopyrights() {
+  }
 }
-
-/**
- * Mixin for CopyrightInterface.
- *
- * @param {Class} Base  A class to extend with {CopyrightInterface} functionnalities.
- * @return {Class}  A class that implements <CopyrightInterface> class and extends Base;
- * @private
- */
-const CopyrightMixin = (Base) =>
-  class extends Base {
-    render() {
-      if (!this.element) {
-        return;
-      }
-      this.element.innerHTML = this.active
-        ? this.getCopyrights().join(' | ')
-        : '';
+const CopyrightMixin = (Base) => class extends Base {
+  render() {
+    if (!this.element) {
+      return;
     }
-
-    createDefaultElement() {
-      this.element = document.createElement('div');
-      this.element.id = 'mbt-copyright';
-      Object.assign(this.element.style, {
-        position: 'absolute',
-        bottom: 0,
-        right: 0,
-        fontSize: '.8rem',
-        padding: '0 10px',
-      });
-    }
-  };
-
+    this.element.innerHTML = this.active ? this.getCopyrights().join(" | ") : "";
+  }
+  createDefaultElement() {
+    this.element = document.createElement("div");
+    this.element.id = "mbt-copyright";
+    Object.assign(this.element.style, {
+      position: "absolute",
+      bottom: 0,
+      right: 0,
+      fontSize: ".8rem",
+      padding: "0 10px"
+    });
+  }
+};
 export default CopyrightMixin;

package/common/mixins/SearchMixin.js

@@ -1,176 +1,110 @@
-/* eslint-disable no-empty-function */
-/* eslint-disable no-useless-constructor */
-/* eslint-disable class-methods-use-this */
-/* eslint-disable max-classes-per-file */
-import StopsAPI from '../../api/stops/StopsAPI';
-
-/**
- * Search control interface.
- *
- * @classproperty {StopsSearchParams} apiParams - Default request parameters used by the search method. See [Stops service documentation](https://developer.geops.io/apis/5dcbd702a256d90001cf1361/).
- */
+import { StopsAPI } from "../../api";
 export class SearchInterface {
-  /**
-   * Constructor.
-   *
-   * @param {Object} options Map options
-   * @param {string} options.apiKey Access key for [geOps services](https://developer.geops.io/). See StopsAPI.
-   * @param {string} [options.url='https://api.geops.io/tracker/v1'] Stops service url. See StopsAPI.
-   * @param {string} [options.placeholder='Search for a stop...'] Input field placeholder.
-   * @param {StopsSearchParams} [options.apiParams={ limit: 20 }] Request parameters. See [Stops service documentation](https://developer.geops.io/apis/5dcbd702a256d90001cf1361/).
-   */
-  // eslint-disable-next-line no-unused-vars
-  constructor(options = {}) {}
-
-  /**
-   * Launch a search.
-   *
-   * @param {String} query The query to search for.
-   * @param {AbortController} abortController Abort controller used to cancel the request.
-   * @return {Promise<Array<GeoJSONFeature>>} An array of GeoJSON features with coordinates in [EPSG:4326](http://epsg.io/4326).
-   */
-  // eslint-disable-next-line no-unused-vars
-  search(query, abortController) {}
+  constructor(options = {}) {
+  }
+  search(query, abortController) {
+  }
 }
-
-/**
- * Mixin for SearchInterface.
- *
- * @param {Class} Base  A class to extend with {SearchInterface} functionnalities.
- * @return {Class}  A class that implements <SearchInterface> class and extends Base;
- * @private
- */
-const SearchMixin = (Base) =>
-  class extends Base {
-    constructor(options = {}) {
-      super(options);
-      const { apiParams, apiKey, url } = options;
-
-      this.apiParams = { limit: 20, ...(apiParams || {}) };
-      this.placeholder = options.placeholder || 'Search for a stop...';
-
-      const apiOptions = { apiKey };
-      if (url) {
-        apiOptions.url = url;
-      }
-      this.api = new StopsAPI(apiOptions);
-      this.abortController = new AbortController();
+const SearchMixin = (Base) => class extends Base {
+  constructor(options = {}) {
+    super(options);
+    const { apiParams, apiKey, url } = options;
+    this.apiParams = { limit: 20, ...apiParams || {} };
+    this.placeholder = options.placeholder || "Search for a stop...";
+    const apiOptions = { apiKey };
+    if (url) {
+      apiOptions.url = url;
     }
-
-    render(suggestions = []) {
-      if (!this.suggestionsElt) {
-        return;
-      }
-
-      this.suggestionsElt.style.display = suggestions.length ? 'block' : 'none';
-
-      this.suggestionsElt.innerHTML = '';
-
-      suggestions.forEach((suggestion) => {
-        const { properties } = suggestion;
-        const suggElt = document.createElement('div');
-        suggElt.innerHTML = properties.name;
-        suggElt.onclick = () => {
-          this.onSuggestionClick(suggestion);
-        };
-        Object.assign(suggElt.style, {
-          padding: '5px 12px',
-        });
-        this.suggestionsElt.appendChild(suggElt);
-      });
+    this.api = new StopsAPI(apiOptions);
+    this.abortController = new AbortController();
+  }
+  render(featureCollection) {
+    const suggestions = featureCollection?.features || [];
+    if (!this.suggestionsElt) {
+      return;
     }
-
-    createDefaultElement() {
-      /**
-       * Define a default element.
-       */
-      this.element = document.createElement('div');
-      this.element.id = 'mbt-search';
-      Object.assign(this.element.style, {
-        position: 'absolute',
-        top: 0,
-        left: '50px',
-        margin: '10px',
-        display: 'flex',
-        flexDirection: 'column',
-        width: '320px',
-      });
-
-      // Create input element
-      this.inputElt = document.createElement('input');
-      this.inputElt.type = 'text';
-      this.inputElt.placeholder = this.placeholder;
-      this.inputElt.autoComplete = 'off';
-      this.inputElt.onkeyup = (evt) => {
-        this.abortController.abort();
-        this.abortController = new AbortController();
-        this.search(evt.target.value, this.abortController);
+    this.suggestionsElt.style.display = suggestions.length ? "block" : "none";
+    this.suggestionsElt.innerHTML = "";
+    suggestions.forEach((suggestion) => {
+      const { properties } = suggestion;
+      const suggElt = document.createElement("div");
+      suggElt.innerHTML = properties.name;
+      suggElt.onclick = () => {
+        this.onSuggestionClick(suggestion);
       };
-      Object.assign(this.inputElt.style, {
-        padding: '10px 30px 10px 10px',
+      Object.assign(suggElt.style, {
+        padding: "5px 12px"
       });
-      this.element.appendChild(this.inputElt);
-
-      // Create suggestions list element
-      this.suggestionsElt = document.createElement('div');
-      Object.assign(this.suggestionsElt.style, {
-        backgroundColor: 'white',
-        overflowY: 'auto',
-        cursor: 'pointer',
-      });
-      this.element.appendChild(this.suggestionsElt);
-
-      this.clearElt = document.createElement('div');
-      Object.assign(this.clearElt.style, {
-        display: 'none',
-        position: 'absolute',
-        right: '0',
-        padding: '0 10px',
-        fontSize: '200%',
-        cursor: 'pointer',
-      });
-      this.clearElt.innerHTML = '×';
-      this.clearElt.onclick = () => this.clear();
-      this.element.appendChild(this.clearElt);
+      this.suggestionsElt.appendChild(suggElt);
+    });
+  }
+  createDefaultElement() {
+    this.element = document.createElement("div");
+    this.element.id = "mbt-search";
+    Object.assign(this.element.style, {
+      position: "absolute",
+      top: 0,
+      left: "50px",
+      margin: "10px",
+      display: "flex",
+      flexDirection: "column",
+      width: "320px"
+    });
+    this.inputElt = document.createElement("input");
+    this.inputElt.type = "text";
+    this.inputElt.placeholder = this.placeholder;
+    this.inputElt.autoComplete = "off";
+    this.inputElt.onkeyup = (evt) => {
+      this.abortController.abort();
+      this.abortController = new AbortController();
+      this.search(evt.target.value, this.abortController);
+    };
+    Object.assign(this.inputElt.style, {
+      padding: "10px 30px 10px 10px"
+    });
+    this.element.appendChild(this.inputElt);
+    this.suggestionsElt = document.createElement("div");
+    Object.assign(this.suggestionsElt.style, {
+      backgroundColor: "white",
+      overflowY: "auto",
+      cursor: "pointer"
+    });
+    this.element.appendChild(this.suggestionsElt);
+    this.clearElt = document.createElement("div");
+    Object.assign(this.clearElt.style, {
+      display: "none",
+      position: "absolute",
+      right: "0",
+      padding: "0 10px",
+      fontSize: "200%",
+      cursor: "pointer"
+    });
+    this.clearElt.innerHTML = "\xD7";
+    this.clearElt.onclick = () => this.clear();
+    this.element.appendChild(this.clearElt);
+  }
+  search(q, abortController) {
+    if (q !== void 0 || q !== null) {
+      this.apiParams.q = q;
     }
-
-    search(q, abortController) {
-      if (q !== undefined || q !== null) {
-        this.apiParams.q = q;
-      }
-
-      if (this.clearElt) {
-        this.clearElt.style.display = 'block';
-      }
-
-      return this.api
-        .search(this.apiParams, abortController)
-        .then((data) => {
-          this.render(data);
-        })
-        .catch(() => {
-          this.render();
-        });
+    if (this.clearElt) {
+      this.clearElt.style.display = "block";
     }
-
-    /**
-     * To be defined in inherited class
-     */
-    // eslint-disable-next-line no-unused-vars
-    onSuggestionClick(suggestion) {}
-
-    /**
-     * Clear the search field and close the control.
-     */
-    clear() {
-      if (!this.suggestionsElt) {
-        return;
-      }
-
-      this.inputElt.value = '';
-      this.suggestionsElt.innerHTML = '';
-      this.clearElt.style.display = 'none';
+    return this.api.search(this.apiParams, abortController).then((data) => {
+      this.render(data);
+    }).catch(() => {
+      this.render();
+    });
+  }
+  onSuggestionClick(suggestion) {
+  }
+  clear() {
+    if (!this.suggestionsElt) {
+      return;
     }
-  };
-
+    this.inputElt.value = "";
+    this.suggestionsElt.innerHTML = "";
+    this.clearElt.style.display = "none";
+  }
+};
 export default SearchMixin;