@foxford/sdk 5.0.0

package/plugins/autocomplete-email.js

@@ -0,0 +1,270 @@
+// src/plugins/autocomplete-email/index.ts
+import levenstein from "js-levenshtein";
+import merge from "lodash/merge";
+var DEFAULT_DOMAINS = [
+  "gmail.com",
+  "mail.ru",
+  "yandex.ru",
+  "icloud.com",
+  "bk.ru",
+  "list.ru",
+  "inbox.ru",
+  "rambler.ru",
+  "internet.ru",
+  "ya.ru",
+  "mail.com",
+  "yandex.com",
+  "foxford.ru",
+  "hotmail.com",
+  "vk.com",
+  "yahoo.com",
+  "outlook.com",
+  "yandex.by",
+  "yandex.kz",
+  "xmail.ru",
+  "tut.by",
+  "msn.com",
+  "me.com"
+];
+var DEFAULT_OPTIONS = {
+  emailDomains: DEFAULT_DOMAINS,
+  suggestionClass: "emailAutoSugg",
+  suggestionColor: "var(--silver, #b8b8b8)",
+  suitableColor: "var(--silver, #b8b8b8)",
+  suitableEmailColor: "var(--accent, #1A96F6)",
+  suitableFontSize: "12px",
+  suitableLevenshteinTreshold: 5,
+  suitableLineHeight: "1.7"
+};
+var KEY_CODES = {
+  BACKSPACE: "Backspace",
+  DELETE: "Delete",
+  DOWN_ARROW: "ArrowDown",
+  ENTER: "Enter",
+  RIGHT_ARROW: "ArrowRight",
+  TAB: "Tab"
+};
+var EmailAutocomplete = class {
+  constructor(node, options) {
+    this.options = DEFAULT_OPTIONS;
+    this.containerValue = null;
+    this.suggOverlay = null;
+    this.value = "";
+    this.suggestion = "";
+    this.leftOffset = null;
+    this.suitableExists = false;
+    this.suitableContainer = null;
+    this.bindListeners = () => {
+      if (this.suggOverlay) this.suggOverlay.addEventListener("mousedown touchstart", this.onFocus);
+      this.node.addEventListener("keyup", this.displaySuggestion);
+      this.node.addEventListener("paste", this.onPaste);
+      this.node.addEventListener("blur", this.autocomplete);
+      this.node.addEventListener("keydown", this.onKeydown);
+    };
+    this.onFocus = () => {
+      this.node.focus();
+    };
+    this.onKeydown = (e) => {
+      if ([KEY_CODES.BACKSPACE, KEY_CODES.DELETE].includes(e.code)) {
+        this.hideSuitableEmail();
+        return;
+      }
+      if (![KEY_CODES.DOWN_ARROW, KEY_CODES.ENTER, KEY_CODES.RIGHT_ARROW, KEY_CODES.TAB].includes(e.code) || KEY_CODES.TAB === e.code && !this.suggestion)
+        return;
+      this.node.addEventListener("blur", this.autocomplete);
+      const { target } = e;
+      if (target instanceof HTMLElement) {
+        target.blur();
+      }
+    };
+    this.onPaste = (e) => {
+      if (!e.clipboardData) throw new Error("Not found clipboardData");
+      const text = e.clipboardData.getData("text/plain");
+      this.value = text;
+      this.node.removeEventListener("blur", this.autocomplete);
+      const list = this.findSuitableEmails(text);
+      this.showSuitableEmail(list);
+    };
+    this.findSuitableEmails = (text) => {
+      const strArr = text.split("@");
+      let lastPart = text;
+      if (strArr.length <= 1) return [];
+      lastPart = strArr.pop() || "";
+      const distances = (this.options.emailDomains || []).map((item) => ({ distance: levenstein(lastPart, item), item }));
+      const treshold = this.options.suitableLevenshteinTreshold;
+      const preparedDistances = distances.sort((a, b) => a.distance - b.distance).filter((item) => item.distance <= treshold);
+      const suitableList = preparedDistances.slice(0, 3).map((obj) => `${strArr.join("")}@${obj.item}`);
+      return suitableList;
+    };
+    this.showSuitableEmail = (suitableList) => {
+      if (suitableList.length === 0) return;
+      if (this.suitableContainer) this.hideSuitableEmail();
+      const suitableEmail = suitableList[0];
+      if (this.value === suitableEmail) return;
+      const text = document.createTextNode("\u0412\u043E\u0437\u043C\u043E\u0436\u043D\u043E, \u0432\u044B \u0438\u043C\u0435\u043B\u0438 \u0432 \u0432\u0438\u0434\u0443 ");
+      const email = document.createElement("span");
+      const suitableMessage = document.createElement("span");
+      suitableMessage.style.display = "block";
+      suitableMessage.style.fontFamily = this.nodeStyle.getPropertyValue("font-family");
+      suitableMessage.style.fontWeight = this.nodeStyle.getPropertyValue("font-weight");
+      suitableMessage.style.letterSpacing = this.nodeStyle.getPropertyValue("letter-spacing");
+      suitableMessage.style.color = this.options.suitableColor || "";
+      suitableMessage.style.fontSize = this.options.suitableFontSize || "";
+      suitableMessage.style.lineHeight = this.options.suitableLineHeight || "";
+      email.style.fontFamily = this.nodeStyle.getPropertyValue("font-family");
+      email.style.fontWeight = this.nodeStyle.getPropertyValue("font-weight");
+      email.style.letterSpacing = this.nodeStyle.getPropertyValue("letter-spacing");
+      email.style.color = this.options.suitableEmailColor || "";
+      email.style.fontSize = this.options.suitableFontSize || "";
+      email.style.lineHeight = this.options.suitableLineHeight || "";
+      email.style.cursor = "pointer";
+      if (suitableEmail) email.textContent = suitableEmail;
+      suitableMessage.append(text);
+      suitableMessage.append(email);
+      this.suitableContainer = suitableMessage;
+      this.node.after(this.suitableContainer);
+      email.addEventListener("click", this.onClickSuitableEmail, { once: true });
+      this.suitableExists = true;
+      if (typeof this.options.onShowSuitableEmail === "function") this.options.onShowSuitableEmail();
+    };
+    this.hideSuitableEmail = () => {
+      if (this.suitableContainer) {
+        this.suitableContainer.remove();
+        this.suitableContainer = null;
+      }
+      if (this.suggOverlay) {
+        this.suggOverlay.textContent = "";
+      }
+      this.suitableExists = false;
+      if (typeof this.options.onHideSuitableEmail === "function") this.options.onHideSuitableEmail();
+    };
+    this.onClickSuitableEmail = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!(e.target instanceof HTMLSpanElement)) return;
+      this.changeValue(e.target.textContent || "");
+      this.hideSuitableEmail();
+      this.node.addEventListener("blur", this.autocomplete);
+      if (typeof this.options.onClickSuitableEmail === "function") this.options.onClickSuitableEmail();
+    };
+    this.autocomplete = (e) => {
+      e.stopPropagation();
+      if (this.suitableExists) this.hideSuitableEmail();
+      if (typeof this.suggestion === "undefined" || typeof this.suggestion === "string" && this.suggestion.length < 1) {
+        const list = this.findSuitableEmails(this.value || "");
+        this.showSuitableEmail(list);
+        return false;
+      }
+      const value = `${this.value || ""}${this.suggestion || ""}`;
+      this.clear();
+      this.changeValue(value);
+      return true;
+    };
+    this.changeValue = (value) => {
+      if (typeof this.options.onAutocomplete === "function") this.options.onAutocomplete(value);
+      else this.node.value = value;
+    };
+    this.displaySuggestion = (event) => {
+      this.value = this.node.value;
+      this.suggestion = this.suggest(this.value);
+      if (!this.suggOverlay || !this.containerValue) return;
+      if (!this.suggestion.length) {
+        this.suggOverlay.textContent = "";
+      } else {
+        event.preventDefault();
+      }
+      this.suggOverlay.textContent = this.suggestion;
+      this.containerValue.textContent = this.value || "";
+      if (this.leftOffset === null) {
+        let w = this.node.clientWidth;
+        w -= parseFloat(this.nodeStyle.paddingLeft) + parseFloat(this.nodeStyle.paddingRight);
+        this.leftOffset = (this.node.offsetWidth - w) / 2;
+      }
+      const cvalWidth = this.containerValue.clientWidth;
+      if (this.node.offsetWidth > cvalWidth) {
+        this.suggOverlay.style.left = `${this.leftOffset + cvalWidth}px`;
+      }
+    };
+    this.destroy = () => {
+      var _a;
+      (_a = this.suggOverlay) == null ? void 0 : _a.removeEventListener("mousedown touchstart", this.onFocus);
+      this.node.removeEventListener("keyup", this.displaySuggestion);
+      this.node.removeEventListener("paste", this.onPaste);
+      this.node.removeEventListener("blur", this.autocomplete);
+      this.node.removeEventListener("keydown", this.onKeydown);
+      this.suggOverlay = null;
+      this.containerValue = null;
+      this.suitableContainer = null;
+    };
+    this.clear = () => {
+      if (this.suggOverlay instanceof HTMLSpanElement) this.suggOverlay.textContent = "";
+      if (this.containerValue instanceof HTMLSpanElement) this.containerValue.textContent = "";
+    };
+    if (!(node instanceof HTMLInputElement)) throw new TypeError("Node must be html input element");
+    this.node = node;
+    this.nodeRects = this.node.getBoundingClientRect();
+    this.options = merge(this.options, options);
+    this.suggOverlay = document.createElement("span");
+    this.containerValue = document.createElement("span");
+    this.suitableContainer = document.createElement("span");
+    this.nodeStyle = getComputedStyle(this.node);
+  }
+  apply() {
+    if (this.node.eac !== void 0 && this.node.eac !== null) return;
+    this.node.eac = this;
+    const parentNode = this.node.parentElement;
+    let topOffset = 0;
+    if (parentNode) {
+      const parentRects = parentNode.getBoundingClientRect();
+      topOffset = Math.abs(parentRects.top - this.nodeRects.top);
+    }
+    this.containerValue = document.createElement("span");
+    this.containerValue.style.visibility = "hidden";
+    this.containerValue.style.position = "absolute";
+    this.containerValue.style.display = "inline-block";
+    this.containerValue.style.fontFamily = this.nodeStyle.getPropertyValue("font-family");
+    this.containerValue.style.fontWeight = this.nodeStyle.getPropertyValue("font-weight");
+    this.containerValue.style.fontSize = this.nodeStyle.getPropertyValue("font-size");
+    this.containerValue.style.letterSpacing = this.nodeStyle.getPropertyValue("letter-spacing");
+    const border = (this.node.offsetHeight - this.node.clientHeight) / 2;
+    this.suggOverlay = document.createElement("span");
+    if (typeof this.options.suggestionClass === "string") this.suggOverlay.classList.add(this.options.suggestionClass);
+    this.suggOverlay.style.display = "flex";
+    this.suggOverlay.style.alignItems = "center";
+    this.suggOverlay.style.position = "absolute";
+    this.suggOverlay.style.top = `${topOffset}px`;
+    this.suggOverlay.style.left = "0";
+    this.suggOverlay.style.height = `${this.node.offsetHeight}px`;
+    this.suggOverlay.style.paddingTop = `${parseInt(this.nodeStyle.getPropertyValue("padding-top"), 10) + border}px`;
+    this.suggOverlay.style.paddingBottom = `${parseInt(this.nodeStyle.getPropertyValue("padding-bottom"), 10) + border}px`;
+    this.suggOverlay.style.lineHeight = this.nodeStyle.getPropertyValue("line-height");
+    this.suggOverlay.style.fontSize = this.nodeStyle.getPropertyValue("font-size");
+    this.suggOverlay.style.color = this.options.suggestionColor || "";
+    this.containerValue.style.fontFamily = this.nodeStyle.getPropertyValue("font-family");
+    this.containerValue.style.fontWeight = this.nodeStyle.getPropertyValue("font-weight");
+    this.containerValue.style.fontSize = this.nodeStyle.getPropertyValue("font-size");
+    this.containerValue.style.letterSpacing = this.nodeStyle.getPropertyValue("letter-spacing");
+    this.node.after(this.containerValue);
+    this.containerValue.after(this.suggOverlay);
+    this.bindListeners();
+  }
+  suggest(str) {
+    const strArr = str.split("@");
+    let lastPart = str;
+    if (strArr.length > 1) {
+      lastPart = strArr.pop() || "";
+      if (!lastPart.length) {
+        return "";
+      }
+    } else {
+      return "";
+    }
+    const match = (this.options.emailDomains || []).filter((domain) => {
+      return domain.indexOf(lastPart) === 0;
+    }).shift() || "";
+    return match.replace(lastPart, "");
+  }
+};
+export {
+  EmailAutocomplete
+};

package/plugins/autocomplete-email.js.flow

@@ -0,0 +1,24 @@
+// @flow
+import type { SdkPlugin } from "../index";
+
+declare interface EacOptions {
+  emailDomains?: Array<string>;
+  suggestionClass?: string;
+  suggestionColor?: string;
+  onAutocomplete?: (_value: string) => void;
+  onShowSuitableEmail?: () => void;
+  onClickSuitableEmail?: () => void;
+  onHideSuitableEmail?: () => void;
+  suitableColor?: string;
+  suitableEmailColor?: string;
+  suitableFontSize?: string;
+  suitableLineHeight?: string;
+  suitableLevenshteinTreshold?: number;
+}
+declare class EmailAutocomplete implements SdkPlugin {
+  constructor(node: HTMLInputElement, options?: EacOptions): this;
+  apply(): void;
+  destroy: () => void;
+  clear: () => void;
+}
+declare export { EmailAutocomplete };