@matdata/yasgui 4.6.1

package/src/endpointSelect.scss

@@ -0,0 +1,122 @@
+.yasgui {
+  .autocomplete {
+    padding: 3px 6px;
+    margin: 4px 0px;
+    border: 2px solid #ccc;
+    width: 100%;
+    &:hover {
+      border-color: #bbb;
+    }
+    &:focus {
+      border-color: #337ab7;
+      background: none;
+      outline: none;
+    }
+    box-sizing: border-box;
+    transition: border-color ease-in 200ms;
+  }
+  .autocompleteWrapper {
+    width: 100%;
+    max-width: 700px;
+    margin-left: 10px;
+    position: relative;
+  }
+  .autocompleteList {
+    position: absolute;
+    max-height: 300px;
+    overflow-y: auto;
+    z-index: 6;
+    margin: 0;
+    margin-top: -4px;
+    padding: 0;
+    list-style: none;
+    background: white;
+    border: 1px solid #aaa;
+    box-sizing: border-box;
+    left: 0;
+    right: 0;
+    &:hover {
+      .autoComplete_result.autoComplete_selected:not(:hover) {
+        background: unset;
+        .removeItem {
+          visibility: hidden;
+        }
+      }
+    }
+    .autoComplete_result {
+      cursor: pointer;
+      padding: 5px 10px;
+      margin: 0;
+      overflow: hidden;
+      display: flex;
+      transition: background visibility ease-in 200ms;
+      b {
+        color: #1f49a3;
+      }
+      .autoComplete_highlighted {
+        font-weight: bold;
+      }
+      &.autoComplete_selected {
+        background: #ccc;
+        .removeItem {
+          visibility: visible;
+        }
+      }
+      &:hover {
+        background: #ccc;
+        .removeItem {
+          visibility: visible;
+        }
+      }
+    }
+    .noResults {
+      padding: 5px 10px;
+      margin: 0;
+    }
+    .removeItem {
+      color: #000;
+      font-size: 15px;
+      text-shadow: 0 1px 0 #fff;
+      opacity: 0.5;
+      font-weight: 700;
+      text-align: end;
+      margin-left: auto; // Make sure x always appears at the same place
+      visibility: hidden;
+      background: none;
+      border: none;
+      cursor: pointer;
+      margin-right: -10px;
+      padding-right: 20px;
+      &:hover {
+        opacity: 0.8;
+        color: #1f49a3;
+      }
+    }
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  .clearEndpointBtn {
+    border: 1px solid #d1d1d1;
+    background-color: #d1d1d1;
+    color: #505050;
+    border-radius: 3px;
+    cursor: pointer;
+
+    padding: 4px 8px;
+    margin: 4px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    opacity: 1;
+    transition: opacity ease-in 200ms;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}

package/src/endpointSelect.ts

@@ -0,0 +1,339 @@
+import Autocomplete from "@tarekraafat/autocomplete.js";
+import { EventEmitter } from "events";
+import { pick } from "lodash-es";
+import { addClass } from "@matdata/yasgui-utils";
+require("./endpointSelect.scss");
+import parse from "autosuggest-highlight/parse";
+import DOMPurify from "dompurify";
+
+//Export this here instead of from our custom-types folder of autocomplete-js
+//as this interface is exported via the yasgui config. The custom typings are
+//not exported as part of the yasgui typings, so we'd get typing errors.
+//instead, include this interface in the yasgui typings itself by defining it here
+interface AutocompleteItem<T> {
+  index: number; //index of suggestion in array of suggestions
+  value: T; //suggestion object
+  key: keyof T; //key that matches search string. In our case, always 'all'
+  match: string; //suggestion value of the key above
+}
+export interface CatalogueItem {
+  endpoint: string;
+  type?: "history";
+}
+
+export interface RenderedCatalogueItem<T> {
+  matches: { [k in keyof T]?: ReturnType<typeof parse> } & { endpoint?: ReturnType<typeof parse> };
+}
+
+const { sanitize } = DOMPurify;
+
+function listElementIsFullyVissible(el: HTMLLIElement) {
+  const { top, bottom } = el.getBoundingClientRect();
+  // Check if bottom of the element is off the page
+  if (bottom < 0) return false;
+  // Check its within the document viewport
+  if (top > document.documentElement.clientHeight) return false;
+
+  const ulRect = (el.parentNode as HTMLUListElement).getBoundingClientRect();
+  if (bottom <= ulRect.bottom === false) return false;
+  // Check if the element is out of view due to a container scrolling
+  if (top <= ulRect.top) return false;
+  return true;
+}
+
+function splitSearchString(searchString: string): string[] {
+  return searchString.match(/\S+/g) || [];
+}
+
+export interface EndpointSelectConfig<T = CatalogueItem> {
+  // Omit endpoint since it will be used as default, this makes sure elements don't appear twice in the list
+  keys: (keyof T)[];
+  getData: () => T[];
+  renderItem: (data: AutocompleteItem<T> & RenderedCatalogueItem<T>, source: HTMLElement) => void;
+}
+export interface EndpointSelect {
+  on(event: string | symbol, listener: (...args: any[]) => void): this;
+  on(event: "remove", listener: (endpoint: string, history: string[]) => void): this;
+  emit(event: "remove", endpoint: string, history: string[]): boolean;
+  on(event: "select", listener: (endpoint: string, history: string[]) => void): this;
+  emit(event: "select", endpoint: string, history: string[]): boolean;
+}
+
+export class EndpointSelect extends EventEmitter {
+  private container: HTMLDivElement;
+  private options: EndpointSelectConfig;
+  private value: string;
+  private history: CatalogueItem[];
+  private inputField!: HTMLInputElement;
+  constructor(initialValue: string, container: HTMLDivElement, options: EndpointSelectConfig, history: string[]) {
+    super();
+    this.container = container;
+    this.options = options;
+    this.value = initialValue;
+    this.history = history.map((endpoint) => {
+      return { endpoint: sanitize(endpoint), type: "history" };
+    });
+    // Add endpoint if not defined
+    if (this.options.keys.indexOf("endpoint") <= 0) this.options.keys.push("endpoint");
+    this.draw();
+  }
+  private draw() {
+    // Create container, we don't need to interact with it anymore
+    const autocompleteWrapper = document.createElement("div");
+    addClass(autocompleteWrapper, "autocompleteWrapper");
+    this.container.appendChild(autocompleteWrapper);
+
+    // Create field
+    this.inputField = document.createElement("input");
+    addClass(this.inputField, "autocomplete");
+    this.inputField.value = this.value;
+    autocompleteWrapper.appendChild(this.inputField);
+
+    // Create clear button
+    const clearBtn = document.createElement("button");
+    clearBtn.title = "Clear endpoint";
+    addClass(clearBtn, "clearEndpointBtn");
+    clearBtn.innerText = "✖";
+    clearBtn.addEventListener("click", () => {
+      this.inputField.value = "";
+      this.inputField.focus();
+    });
+    this.container.appendChild(clearBtn);
+
+    // Init autocomplete library
+    new Autocomplete<CatalogueItem>({
+      placeholder: "Search or add an endpoint",
+      highlight: false,
+      maxResults: 100,
+      trigger: {
+        event: ["input", "focusin"],
+        //we always want to show the autocomplete, even if no query is set
+        //in that case, we'd just show the full list
+        condition: () => true,
+      },
+      // threshold: -1,
+      searchEngine: (query, record) => {
+        if (!query || query.trim().length === 0) {
+          //show everything when we've got an empty search string
+          return true;
+        }
+        return splitSearchString(query).every((m) => record.indexOf(m) >= 0);
+      },
+      data: {
+        src: async () => {
+          return [...this.history, ...this.options.getData()].map((item) => ({
+            ...item,
+            all: Object.values(pick(item, ["endpoint", ...this.options.keys])).join(" "),
+          }));
+        },
+        key: ["all" as any], // All is something we add as a workaround for getting multiple results of the library
+        cache: false,
+      },
+      // Use a selector coming from the container, this is to make sure we grab our own autocomplete element
+      selector: () => this.inputField,
+      resultsList: {
+        render: true,
+        destination: this.inputField,
+        container: (element) => {
+          // Remove id, there can be multiple yasgui's active on one page, we can't delete since the library will then add the default
+          element.id = "";
+          addClass(element, "autocompleteList");
+        },
+      },
+      resultItem: {
+        content: (data, source) => {
+          const endpoint = sanitize(data.value.endpoint);
+
+          // Custom handling of items with history, these are able to be removed
+          if (data.value.type && data.value.type === "history") {
+            // Add a container to make folding work correctly
+            const resultsContainer = document.createElement("div");
+            // Match is highlighted text
+            resultsContainer.innerHTML = parse(endpoint, createHighlights(endpoint, this.inputField.value)).reduce(
+              (current, object) => (object.highlight ? current + object.text.bold() : current + object.text),
+              "",
+            );
+            source.append(resultsContainer);
+
+            // Remove button
+            const removeBtn = document.createElement("button");
+            removeBtn.textContent = "✖";
+            addClass(removeBtn, "removeItem");
+            removeBtn.addEventListener("mousedown", (event) => {
+              this.history = this.history.filter((item) => item.endpoint !== endpoint);
+              this.emit(
+                "remove",
+                this.value,
+                this.history.map((value) => value.endpoint),
+              );
+              source.remove();
+              event.stopPropagation();
+            });
+
+            source.appendChild(removeBtn);
+          } else {
+            // Add our own field highlighting
+            const matches: RenderedCatalogueItem<CatalogueItem> = { matches: {} };
+            for (const key of [...this.options.keys]) {
+              const val = data.value[key];
+              if (val) {
+                matches.matches[key] = parse(val, createHighlights(val, this.inputField.value));
+              }
+            }
+            this.options.renderItem({ ...data, ...matches }, source);
+          }
+        },
+        element: "li",
+      },
+      onSelection: (feedback) => {
+        const item = feedback.selection.value;
+        this.value = item.endpoint;
+        this.inputField.value = this.value;
+        this.emit(
+          "select",
+          this.value,
+          this.history.map((value) => value.endpoint),
+        );
+      },
+      noResults: () => {
+        const container = this.container.querySelector(".autocompleteList");
+        if (container) {
+          const noResults = document.createElement("div");
+          addClass(noResults, "noResults");
+          noResults.innerText = 'Press "enter" to add this endpoint';
+          container.appendChild(noResults);
+        }
+      },
+    });
+    // New data handler
+    this.inputField.addEventListener("keyup", (event) => {
+      const target = <HTMLInputElement>event.target;
+      // Enter
+      if (event.keyCode === 13) {
+        if (this.value === target.value) {
+          //we have typed exactly the same value the one from the suggestion list
+          //So, just close the suggestion list
+          this.clearListSuggestionList();
+          this.inputField.blur();
+          return;
+        }
+        if (!target.value || !target.value.trim()) {
+          this.clearListSuggestionList();
+          this.inputField.blur();
+          return;
+        }
+        if (
+          this.options.getData().find((i) => i.endpoint === this.inputField.value) ||
+          this.history.find((item) => item.endpoint === this.inputField.value)
+        ) {
+          //the value you typed is already in our catalogue or in our history
+          this.value = target.value;
+          this.clearListSuggestionList();
+          this.emit(
+            "select",
+            this.value,
+            this.history.map((h) => h.endpoint),
+          );
+          this.inputField.blur();
+          return;
+        }
+        this.value = target.value;
+        this.history.push({ endpoint: target.value, type: "history" });
+        this.emit(
+          "select",
+          this.value,
+          this.history.map((value) => value.endpoint),
+        );
+        this.clearListSuggestionList();
+        this.inputField.blur();
+      }
+      // Blur and set value on enter
+      if (event.keyCode === 27) {
+        this.inputField.blur();
+        this.inputField.value = this.value;
+        this.clearListSuggestionList();
+      }
+
+      // Stop moving caret around when hitting up and down keys
+      if (event.keyCode === 38 || event.keyCode === 40) {
+        event.stopPropagation();
+        const selected: HTMLLIElement | null = this.container.querySelector(
+          ".autocompleteList .autoComplete_result.autoComplete_selected",
+        );
+        if (selected && !listElementIsFullyVissible(selected)) {
+          selected.scrollIntoView(false);
+        }
+      }
+    });
+    this.inputField.addEventListener("blur", (event) => {
+      const target = <HTMLInputElement>event.target;
+      // Tabbing blur event
+      if (target.className === this.inputField.className && event.relatedTarget) {
+        this.clearListSuggestionList();
+        this.inputField.value = this.value;
+      }
+    });
+    // Improvised clickAway handler, Blur will fire before select or click events, causing interactive suggestion to no longer work
+    document.addEventListener("mousedown", (event) => {
+      if (event.button !== 2) {
+        const target = <HTMLElement>event.target;
+        if (
+          target.className === "removeItem" ||
+          target.className === "autoComplete_result" ||
+          target.className === "autocomplete"
+        )
+          return;
+        this.clearListSuggestionList();
+        this.inputField.value = this.value;
+      }
+    });
+  }
+  private clearListSuggestionList = () => {
+    const autocompleteList = this.container.querySelector(".autocompleteList");
+    if (autocompleteList) autocompleteList.innerHTML = "";
+  };
+
+  public setEndpoint(endpoint: string, endpointHistory?: string[]) {
+    this.value = endpoint;
+    if (endpointHistory) {
+      this.history = endpointHistory.map((endpoint) => {
+        return { endpoint, type: "history" };
+      });
+    }
+    // Force focus when the endpoint is open
+    if (this.inputField === document.activeElement) {
+      this.inputField.focus();
+    } else {
+      // Only set when the user is not using the widget at this time
+      this.inputField.value = endpoint;
+    }
+  }
+  public destroy() {
+    this.removeAllListeners();
+    this.inputField.remove();
+  }
+}
+
+function createHighlights(text: string, query: string) {
+  return splitSearchString(query)
+    .reduce((result: Array<[number, number]>, word: string) => {
+      if (!word.length) return result;
+      const wordLen = word.length;
+      // const regex = new RegExp(escapeRegexCharacters(word), 'i');
+      // const { index = -1 } = text.match(regex);
+      const index = text.indexOf(word);
+      if (index > -1) {
+        result.push([index, index + wordLen]);
+
+        // Replace what we just found with spaces so we don't find it again.
+        text = text.slice(0, index) + new Array(wordLen + 1).join(" ") + text.slice(index + wordLen);
+      }
+
+      return result;
+    }, [])
+    .sort((match1: [number, number], match2: [number, number]) => {
+      return match1[0] - match2[0];
+    });
+}
+
+export default EndpointSelect;

package/src/index.scss

@@ -0,0 +1,97 @@
+.yasgui {
+  a {
+    color: #337ab7;
+    text-decoration: none;
+  }
+
+  // Keep tabs visible when yasqe is in fullscreen
+  &:has(.yasqe.fullscreen) .tabsList {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 9999;
+    background: white;
+    border-bottom: 1px solid #ddd;
+    padding: 5px;
+    margin: 0;
+
+    .tab {
+      span {
+        display: inline !important;
+      }
+
+      a {
+        display: flex !important;
+        align-items: center !important;
+      }
+    }
+  }
+
+  //css taken from https://www.muicss.com/docs/v1/css-js/forms
+  $focusColor: #337ab7;
+  $font-size: 15px;
+  $font-color: rgba(0, 0, 0, 0.87);
+  $border-color: rgba(0, 0, 0, 0.26);
+  $label-font-size: 12px;
+  $label-font-color: rgba(0, 0, 0, 0.54);
+  $label-line-height: 15px;
+  .yasgui_textfield {
+    display: block;
+    padding-top: $font-size * 1.25;
+    // margin-bottom: $mui-form-group-margin-bottom;
+    position: relative;
+
+    > label {
+      // Positioning
+      position: absolute;
+      top: 0;
+
+      // Display
+      display: block;
+      width: 100%;
+
+      // Other
+      color: $label-font-color;
+      font-size: $label-font-size;
+      font-weight: 400;
+      line-height: $label-line-height;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    & > input,
+    & > textarea {
+      box-sizing: border-box;
+      display: block;
+      color: $font-color;
+      border: none;
+      border-bottom: 1px solid $border-color;
+      outline: none;
+      width: 100%;
+      padding: 0;
+      box-shadow: none;
+      border-radius: 0px;
+
+      // Typography
+      font-size: $font-size;
+      font-family: inherit;
+      line-height: inherit;
+
+      // Bugfix for firefox-android
+      background-image: none;
+
+      &:focus {
+        border-color: $focusColor;
+        border-width: 2px;
+      }
+    }
+    > input,
+    > textarea {
+      &:focus ~ label {
+        color: $focusColor;
+      }
+    }
+  }
+}