woops

src/active-tab/lib/item-match/handler.js

@@ -0,0 +1,18 @@
+import { getConfig } from "../../../config/Configuration";
+import { applyStyle } from "../../../lib/style";
+
+/**
+ * @param {NodeList} links
+ * @return {Promise<void>}
+ */
+export async function handler(links) {
+  const config = getConfig();
+  const style  = config.styles.values[config.itemMatch.groups["1"].styles[0].toString()];
+  for (const item of config.itemMatch.groups["1"].items) {
+    for (const link of links) {
+      const td = link.parentElement;
+      if (td.textContent.indexOf(item) > -1)
+        applyStyle(style, td);
+    }
+  }
+}

src/active-tab/routes/object/shops/shop-handler.js

@@ -3,10 +3,11 @@
 import * as Store from "../../../../lib/store";
 import { ShopHighlighter } from "./shop-highlighter";
 import { getConfig } from "../../../../config/Configuration";
-import { findAndTransform } from "../../../../lib/dom/query";
+import { findAll, findAndTransform } from "../../../../lib/dom/query";
 import { defaultShopData, newShopData } from "./shop-data";
 import { newElementData } from "./element-data";
 import { newPageData } from "./page-data";
+import * as IM from "../../../lib/item-match/handler"
 
 // = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
 //
@@ -112,7 +113,12 @@ function buildPageData(data) {
  * @return void
  */
 export async function shopHandler(params) {
-  if (!getConfig().miniStock.enabled)
+  const config = getConfig();
+
+  if (config.itemMatch.enabled)
+    IM.handler(findAll(ANCHOR_QUERY));
+
+  if (!config.miniStock.enabled)
     return;
 
   const data = findAndTransform(ANCHOR_QUERY, linkData);

src/config/types/app-config.js

@@ -4,6 +4,8 @@
  * @property {GeneralConfig} general
  *     Global extension config.
  *
+ * @property {ItemMatchConfig} itemMatch
+ *
  * @property {MiniStockConfig} miniStock
  *     Configuration for the MicroStock component of this
  *     extension.

src/config/types/item-highlight-group.js

@@ -1,12 +1,20 @@
 /**
  * @typedef {object} ItemHighlightGroup
  *
+ * @property {number} id
+ *
+ * @property {string} name
+ *
  * @property {[string]} items
  *     List of strings to match against items to determine
  *     what to highlight.
  *
- * @property {[HighlightStyle]} styles
- *     List of styles to apply to the items matched by
+ * @property {number[]} stores
+ *     IDs of stores that the ItemHighlightGroup should
+ *     apply to.
+ *
+ * @property {number[]} styles
+ *     List of style ids to apply to the items matched by
  *     strings in the items list.
  *
  *     Styles will be applied as follows:
@@ -15,17 +23,17 @@
  *     the strings in the `items` array will have this style
  *     applied.
  *
- *     * If 2 styles are present, the items matched by the
- *     first item in the `items` list will have the first
+ *     * If 2 styles are present, the first item from the
+ *     `items` list to appear on the page will the first
  *     style applied, and all items matched by subsequent
  *     `items` strings will have the second style applied.
  *
- *     * If more than 2 styles are present, items matched by
- *     the first string in the `items` array will have the
- *     first highlight style applied, items matched by the
- *     second string in the `items` array will have the
- *     second highlight style applied, and so forth.  Once
- *     the last style is hit all items matched by any
+ *     * If more than 2 styles are present, the first item
+ *     from the items list to appear on the page will have
+ *     the first highlight style applied, the second item
+ *     from the items list to appear on the page will have
+ *     the second highlight style applied, and so forth.
+ *     Once the last style is hit all items matched by any
  *     remaining entries in the `items` list will have the
  *     last style applied.
  *
@@ -48,12 +56,46 @@
  *
  */
 
+import { arrayCopy } from "../../lib/util";
+
 /**
- * Creates a new defaulted ItemHighlightGroup.
+ * Create a new ItemHighlightGroup instance from the given
+ * input params.
+ *
+ * @param {number}   id
+ *     Unique id value
+ * @param {string}   name
+ *     User specified name
+ * @param {number[]} stores
+ *     List of store ids
+ * @param {string[]} items
+ *     List of item match strings
+ * @param {number[]} styles
+ *     List of style ids
  *
- * @returns {ItemHighlightGroup}
+ * @return {ItemHighlightGroup}
  */
-export const newItemHighlightGroup = () => ({
-  items: [],
-  styles: [],
-});
+export function newItemHighlightGroup(
+  id,
+  name,
+  stores = [],
+  items = [],
+  styles = [],
+) {
+  return {id, name, stores, items, styles};
+}
+
+/**
+ * @param {ItemHighlightGroup} group
+ * @return {ItemHighlightGroup}
+ */
+export function copyItemHighlightGroup(group) {
+  return {
+    id: group.id,
+    name: group.name,
+    stores: arrayCopy(group.stores),
+    items: arrayCopy(group.items),
+    styles: arrayCopy(group.styles)
+  };
+}
+

src/config/types/item-match-config.js

@@ -5,10 +5,20 @@
  *     Determines whether or no the item matching
  *     component of this extension should be enabled.
  *
- * @property {[ItemHighlightGroup]} groups
- *     Cascade of item highlight groups to apply.
+ * @property {Object.<string, ItemHighlightGroup>} groups
+ *     Index of item highlight groups by id
+ *
+ * @property {number[]} order
+ *     Array of ItemHighlightGroup ids in the order in
+ *     which they should be rendered.
+ *
+ * @property {Object.<string, number[]>} byShop
+ *     Index of ordered item group id lists by shop id.
  */
 
+import { arrayCopy, arrayOmit } from "../../lib/util";
+import { copyItemHighlightGroup } from "./item-highlight-group";
+
 /**
  * Creates a defaulted instance of the ItemMatchConfig
  * object.
@@ -18,6 +28,60 @@
 export function defaultItemMatchConfig() {
   return {
     enabled: false,
-    groups: [],
+    groups: {
+      "1": {
+        id: 1,
+        name: "Default",
+        items: ["Negg"],
+        stores: [],
+        styles: [1]
+      }
+    },
+    order: [],
+    byShop: {}
   };
-}
+}
+
+/**
+ * @param {ItemMatchConfig} conf
+ *
+ * @return {ItemMatchConfig}
+ */
+export function copyConfig(conf) {
+  return {
+    enabled: conf.enabled,
+    groups: copyGroups(conf.groups),
+    order: arrayCopy(conf.order),
+    byShop: copyByShop(conf.byShop),
+  };
+}
+
+/**
+ * @param {Object.<string, number[]>} bs
+ *
+ * @return {Object.<string, number[]>}
+ */
+function copyByShop(bs) {
+  const out = {};
+
+  for (const key in bs)
+    if (bs.hasOwnProperty(key))
+      out[key] = arrayCopy(bs[key]);
+
+  return out;
+}
+
+/**
+ * @param {Object.<string, ItemHighlightGroup>} groups
+ *
+ * @return {Object.<string, ItemHighlightGroup>}
+ */
+function copyGroups(groups) {
+  const out = {};
+
+  for (const key in groups)
+    if (groups.hasOwnProperty(key))
+      out[key] = copyItemHighlightGroup(groups[key]);
+
+  return out;
+}

src/lib/util.js

@@ -0,0 +1,18 @@
+export function arrayCopy(arr) {
+  const out = new Array(arr.length);
+
+  for (let i = 0; i < arr.length; i++)
+    out[i] = arr[i];
+
+  return out;
+}
+
+export function arrayOmit(arr, val) {
+  const out = [];
+
+  for (const v of out)
+    if (v !== val)
+      out.push(v);
+
+  return out;
+}

src/settings-menu/css/settings.css

@@ -1,4 +1,39 @@
 :root {
-  --text-color: #555;
-  --tab-fade: 750ms;
+  --text-color:        #555;
+  --tab-fade:          500ms;
+
+  --plus-svg:          url("../../../res/plus.svg");
+  --trash-svg:         url("../../../res/trash-alt.svg");
+
+  --general-font:      Cantarell, Arial, sans-serif;
+
+  --input-line-height: 1.6em;
+  --input-font-size:   1.4em;
+  --input-font-family: var(--general-font);
+
+  pointer-events: inherit;
+}
+
+textarea,
+input[type=text] {
+  width:   300px;
+  display: block;
+}
+
+textarea {
+  padding: 10px;
+  border-radius: 5px;
+}
+
+select,
+textarea,
+input[type=text],
+input[type=number] {
+  line-height: var(--input-line-height);
+  font-size:   var(--input-font-size);
+  font-family: var(--input-font-family);
+}
+
+label {
+  display: block;
 }

src/settings-menu/js/app.js

@@ -15,17 +15,19 @@ Store.load(confKey)
     last = JSON.stringify(tmp);
     Conf.setConfig(tmp);
   })
-  .catch(console.log);
-
-Conf.subscribe(v => {
-  const newVal = JSON.stringify(v);
-  if (last !== newVal) {
-    last = newVal;
-    Store.save(confKey, v);
-  }
-});
-
-const app = new App({
-  target: document.body,
-  props: Conf.getConfigStore()
-});
+  .then(_ => {
+    Conf.subscribe(v => {
+      const newVal = JSON.stringify(v);
+      if (last !== newVal) {
+        last = newVal;
+        Store.save(confKey, v);
+      }
+    });
+  })
+  .then(_ => {
+    new App({
+      target: document.body,
+      props: Conf.getConfigStore()
+    });
+  })
+  .catch(console.log);

src/settings-menu/js/lib/debouncer.js

@@ -0,0 +1,22 @@
+/**
+ * @param {function():undefined} onTimeout
+ *     Function to be called on timeout conclusion
+ * @param {number} [delay]
+ *     Debounce delay in milliseconds
+ * @param {function(Event): void} cb
+ *     Optional callback to fire when the debounce
+ *     triggering event is fired.
+ *
+ * @return {function(Event): void}
+ *     Function to be called by the input events that should
+ *     be debounced.
+ */
+export function newDebouncer(onTimeout, delay = 500, cb = null) {
+  let timeout = null;
+
+  return e => {
+    clearTimeout(timeout);
+    timeout = setTimeout(onTimeout, delay);
+    if (cb) cb(e);
+  };
+}

src/settings-menu/js/lib/item-match.js

@@ -0,0 +1,25 @@
+const LINE_END_PATTERN = / +\n|\n{2,}/g;
+const LINE_END_REPLACE = '\n';
+const LINE_START_PATTERN = /^ +/g;
+const LINE_START_REPLACE = '';
+const SPLIT_PATTERN = '\n';
+
+/**
+ * @param {string} input
+ *
+ * @return {string}
+ */
+export function cleanItemString(input) {
+  return input.trim()
+    .replace(LINE_START_PATTERN, LINE_START_REPLACE)
+    .replace(LINE_END_PATTERN, LINE_END_REPLACE);
+}
+
+/**
+ * @param {string} input
+ *
+ * @return {string[]}
+ */
+export function toItemArray(input) {
+  return input.split(SPLIT_PATTERN);
+}