coveragebook_components 0.5.0

data/app/assets/js/app/mixins/dropdown.js

@@ -0,0 +1,18 @@
+import withDropdown from "@js/base/mixins/dropdown";
+
+export default function withAppDropdown(props = {}) {
+  const initDropdown = withDropdown({
+    theme: "coco-app-dropdown",
+    placement: "bottom-start",
+    offset: [0, 0],
+    ...props,
+  });
+
+  function withAppDropdownMixin(component) {
+    return initDropdown(component);
+  }
+
+  withAppDropdownMixin.props = initDropdown.props;
+
+  return withAppDropdownMixin;
+}

data/app/assets/js/app/mixins/index.js

@@ -0,0 +1,3 @@
+import withAppDropdown from "./dropdown";
+
+export { withAppDropdown };

data/app/assets/js/app.js

@@ -0,0 +1,10 @@
+import * as ActiveStorage from "@rails/activestorage";
+
+import "./base/setup";
+import "./base/components";
+import "./book/components";
+import "./app/components";
+
+document.addEventListener("alpine:initialized", () => {
+  ActiveStorage.start();
+});

data/app/assets/js/base/components.js

@@ -0,0 +1,4 @@
+import { registerComponents } from "@helpers/alpine";
+import baseComponents from "@baseComponents/**/*.js";
+
+export default registerComponents(baseComponents);

data/app/assets/js/base/mixins/attr-observer.js

@@ -0,0 +1,54 @@
+const ignoredAttributes = ["class", "style"];
+
+export default function withAttrObserver(props = {}) {
+  return function (component) {
+    const oldDestroy = component.destroy;
+    const toIgnore = props.ignore || ignoredAttributes;
+
+    const attrObserver = Alpine.reactive({
+      observer: null,
+      handler(attrName, newValue, oldValue, target) {
+        if (component.onAttrChange) {
+          component.onAttrChange(attrName, newValue, oldValue, target);
+        }
+      },
+    });
+
+    attrObserver.observer = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (
+          mutation.type !== "attributes" ||
+          toIgnore.includes(mutation.attributeName)
+        ) {
+          return;
+        }
+
+        const { target } = mutation;
+
+        attrObserver.handler(
+          mutation.attributeName,
+          target.getAttribute(mutation.attributeName),
+          mutation.oldValue,
+          target
+        );
+      }
+    });
+
+    Object.assign(component, {
+      destroy() {
+        attrObserver.observer.disconnect();
+        attrObserver.observer = null;
+
+        if (oldDestroy) {
+          oldDestroy.call(this);
+        }
+      },
+    });
+
+    attrObserver.observer.observe(component.$root, { attributes: true });
+
+    return component;
+  };
+}
+
+export { ignoredAttributes };

data/app/assets/js/base/mixins/attrs.js

@@ -0,0 +1,58 @@
+export default function withAttrs(props = {}) {
+  return function (component) {
+    return Object.assign(
+      component,
+      Alpine.reactive({
+        getAttr(name) {
+          return this.$root.getAttribute(name);
+        },
+
+        setAttr(name, value) {
+          this.$root.setAttribute(name, value);
+          return this;
+        },
+
+        hasAttr(name) {
+          return this.$root.hasAttribute(name);
+        },
+
+        removeAttr(name) {
+          component.$root.removeAttribute(name);
+          return this;
+        },
+
+        assertAttr(name, testValue) {
+          return this.$root.getAttribute(name) === String(testValue);
+        },
+
+        refuteAttr(name, testValue) {
+          return !this.assertAttr(name, testValue);
+        },
+
+        getData(name) {
+          return this.getAttr(`data-${name}`);
+        },
+
+        setData(name, value) {
+          return this.setAttr(`data-${name}`, value);
+        },
+
+        hasData(name) {
+          return this.hasAttr(`data-${name}`);
+        },
+
+        removeData(name) {
+          return this.removeAttr(`data-${name}`);
+        },
+
+        assertData(name, testValue) {
+          return this.assertAttr(`data-${name}`, testValue);
+        },
+
+        refuteData(name, testValue) {
+          return !this.assertData(name, testValue);
+        },
+      })
+    );
+  };
+}

data/app/assets/js/base/mixins/dropdown.js

@@ -0,0 +1,69 @@
+import { tippy, hideOnEsc } from "@libs/tippy";
+
+export default function withDropdown(props = {}) {
+  function withDropdownMixin(component) {
+    const tippyEl = component.$refs.dropdownTrigger || component.$root;
+
+    const dropdown = tippy(tippyEl, {
+      trigger: "click",
+      interactive: true,
+      animation: false,
+      content: component.$refs.dropdownPanel,
+      plugins: [hideOnEsc],
+
+      onMount() {
+        if (component.onDropdownMount) {
+          component.onDropdownMount();
+        }
+      },
+
+      onCreate() {
+        if (component.onDropdownCreate) {
+          component.onDropdownCreate();
+        }
+      },
+
+      onShow: () => {
+        component.dropdown.open = true;
+        if (component.onDropdownShow) {
+          return component.onDropdownShow();
+        }
+
+        if (component.setState) {
+          component.setState("active");
+        }
+      },
+
+      onHide: () => {
+        component.dropdown.open = false;
+        if (component.onDropdownHide) {
+          component.onDropdownHide();
+        }
+        if (component.resetState) {
+          component.resetState();
+        }
+      },
+
+      ...props,
+    });
+
+    return Object.assign(component, {
+      dropdown: Alpine.reactive({
+        instance: dropdown,
+        open: false,
+
+        hide() {
+          this.instance.hide();
+        },
+
+        show() {
+          this.instance.show();
+        },
+      }),
+    });
+  }
+
+  withDropdownMixin.props = ["dropdown"];
+
+  return withDropdownMixin;
+}

data/app/assets/js/base/mixins/index.js

@@ -0,0 +1,17 @@
+import withAttrObserver from "./attr-observer";
+import withAttrs from "./attrs";
+import withDropdown from "./dropdown";
+import withOptions from "./options";
+import withSizeObserver from "./size-observer";
+import withTooltip from "./tooltip";
+import withUndo from "./undo";
+
+export {
+  withAttrObserver,
+  withAttrs,
+  withDropdown,
+  withOptions,
+  withSizeObserver,
+  withTooltip,
+  withUndo,
+};

data/app/assets/js/base/mixins/options.js

@@ -0,0 +1,76 @@
+import { kebabCase, camelCase } from "lodash";
+
+export default function withOptions(props = {}) {
+  return function (component) {
+    if (!component.options) {
+      return component;
+    }
+
+    const el = component.$root;
+    const oldDestroy = component.destroy;
+    const optionsProps = component.options || {};
+    const optionsAttrs = Object.keys(optionsProps).map(
+      (name) => `data-${kebabCase(name)}`
+    );
+
+    Object.keys(optionsProps).forEach((name) => {
+      const attrName = `data-${kebabCase(name)}`;
+      if (el.hasAttribute(attrName)) {
+        component.options[name] = el.getAttribute(attrName);
+      }
+    });
+
+    let attrObserver = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (
+          mutation.type !== "attributes" ||
+          !optionsAttrs.includes(mutation.attributeName)
+        ) {
+          return;
+        }
+
+        const propName = camelCase(mutation.attributeName.replace("data-", ""));
+        let value = mutation.target.getAttribute(mutation.attributeName);
+
+        switch (value) {
+          case "true":
+            value = true;
+            break;
+          case "false":
+            value = false;
+            break;
+        }
+
+        component.options[propName] = value;
+      }
+    });
+
+    Object.assign(
+      component,
+      Alpine.reactive({
+        destroy() {
+          attrObserver.disconnect();
+          attrObserver = null;
+
+          if (oldDestroy) {
+            oldDestroy.call(this);
+          }
+        },
+      })
+    );
+
+    attrObserver.observe(el, { attributes: true });
+
+    component.$watch("options", (options, oldOptions) => {
+      for (const [key, value] of Object.entries(options)) {
+        el.setAttribute(`data-${kebabCase(key)}`, value);
+
+        if (component.onOptionChange) {
+          component.onOptionChange(key, value);
+        }
+      }
+    });
+
+    return component;
+  };
+}

data/app/assets/js/base/mixins/size-observer.js

@@ -0,0 +1,34 @@
+export default function withSizeObserver(props = {}) {
+  return function (component) {
+    const resizeTarget = props.target || component.$root;
+    const oldDestroy = component.destroy;
+
+    const sizeObserver = Alpine.reactive({
+      observer: null,
+      handler(target) {
+        if (component.onResize) {
+          component.onResize(target.contentRect, target);
+        }
+      },
+    });
+
+    sizeObserver.observer = new ResizeObserver((entries) =>
+      sizeObserver.handler(entries[0])
+    );
+
+    Object.assign(component, {
+      destroy() {
+        sizeObserver.observer.disconnect();
+        sizeObserver.observer = null;
+
+        if (oldDestroy) {
+          oldDestroy.call(this);
+        }
+      },
+    });
+
+    sizeObserver.observer.observe(resizeTarget);
+
+    return component;
+  };
+}

data/app/assets/js/base/mixins/tooltip.js

@@ -0,0 +1,81 @@
+import tippy from "@libs/tippy";
+
+export default function withTooltip(props = {}) {
+  function withTooltipMixin(component) {
+    const el = component.$root;
+    const oldDestroy = component.destroy;
+
+    if (!component.hasData("tippy-content")) {
+      component.setData("tippy-disabled", true);
+    }
+
+    const content = component.getData("tippy-content");
+    const tooltip = tippy(el, {
+      theme: "coco-tooltip",
+
+      onShow() {
+        if (component.onTooltipShow) {
+          return component.onTooltipShow();
+        } else {
+          return component.refuteData("tippy-disabled", true);
+        }
+      },
+
+      content() {
+        return content;
+      },
+
+      ...props,
+    });
+
+    Object.assign(
+      component,
+      Alpine.reactive({
+        tooltip: {
+          content,
+          instance: tooltip,
+          originalContent: content,
+        },
+
+        getTooltip() {
+          return this.tooltip;
+        },
+
+        setTooltip(content) {
+          this.tooltip.content = content;
+        },
+
+        resetTooltip() {
+          this.tooltip.content = this.tooltip.originalContent;
+        },
+
+        destroy() {
+          if (this.tooltip && this.tooltip.instance) {
+            this.tooltip.instance.destroy();
+            this.tooltip = null;
+          }
+
+          if (oldDestroy) {
+            oldDestroy.call(this);
+          }
+        },
+      })
+    );
+
+    Alpine.effect(() => {
+      if (component.tooltip && component.tooltip.instance) {
+        const value = component.tooltip.content;
+        if (value !== null) {
+          component.tooltip.instance.setContent(value);
+          component.setData("tippy-content", value);
+        }
+      }
+    });
+
+    return component;
+  }
+
+  withTooltipMixin.props = ["tooltip"];
+
+  return withTooltipMixin;
+}

data/app/assets/js/base/mixins/undo.js

@@ -0,0 +1,89 @@
+import { roughSizeOfObject } from "@helpers/lang";
+
+export default function withUndo(props = {}) {
+  function withUndoMixin(component) {
+    const maxHistorySize = props.maxEntries || 100;
+
+    const history = Alpine.reactive({
+      stack: [],
+      stackPos: -1,
+      adding: false,
+
+      clear() {
+        history.stack.length = 0;
+        history.stackPos = -1;
+      },
+
+      add(name, newValue, oldValue) {
+        if (!history.adding && newValue !== oldValue) {
+          if (history.stackPos < history.stackSize - 1) {
+            // clear stack above this position
+            const stack = Alpine.raw(history.stack);
+            history.stack = stack.slice(0, history.stackPos + 1);
+          }
+
+          history.stack.push({ name, newValue, oldValue });
+
+          // Don't let stack grow beyond max size
+          if (history.stackSize > maxHistorySize) {
+            history.stack.pop();
+          } else {
+            history.stackPos++;
+          }
+        }
+      },
+
+      undo() {
+        if (!component.undo) {
+          console.error("Missing `undo` method");
+          return;
+        }
+
+        if (history.undoable) {
+          history.adding = true;
+          const entry = history.stack[history.stackPos];
+          component.undo(entry.name, entry.oldValue);
+          history.stackPos--;
+          this.$nextTick(() => (history.adding = false));
+        }
+      },
+
+      redo() {
+        if (!component.redo) {
+          console.error("Missing `redo` method");
+          return;
+        }
+
+        if (history.redoable) {
+          history.adding = true;
+          history.stackPos++;
+          const entry = history.stack[history.stackPos];
+          component.redo(entry.name, entry.newValue);
+          this.$nextTick(() => (history.adding = false));
+        }
+      },
+
+      get undoable() {
+        return history.stackPos >= 0;
+      },
+
+      get redoable() {
+        return history.stackPos < history.stackSize - 1;
+      },
+
+      get stackSize() {
+        return history.stack.length;
+      },
+
+      get stackMemoryUsage() {
+        return roughSizeOfObject(history.stack);
+      },
+    });
+
+    return Object.assign(component, { history });
+  }
+
+  withUndoMixin.props = ["history"];
+
+  return withUndoMixin;
+}

data/app/assets/js/base/setup.js

@@ -0,0 +1,9 @@
+import "container-query-polyfill";
+import "alpine-turbo-drive-adapter";
+import * as Turbo from "@hotwired/turbo-rails";
+
+import Alpine from "@libs/alpine";
+
+document.addEventListener("DOMContentLoaded", () => {
+  Alpine.start();
+});

data/app/assets/js/book/components.js

@@ -0,0 +1,4 @@
+import { registerComponents } from "@helpers/alpine";
+import bookComponents from "@bookComponents/**/*.js";
+
+export default registerComponents(bookComponents);

data/app/assets/js/book.js

@@ -0,0 +1,4 @@
+import "./base/setup";
+
+import "./base/components";
+import "./book/components";

data/app/assets/js/coco.js

@@ -0,0 +1,53 @@
+import { getData } from "@helpers/alpine";
+
+import { nameFunction } from "@helpers/lang.js";
+import { withAttrs, withOptions } from "@js/base/mixins";
+
+function CocoComponent(name, fn) {
+  const func = nameFunction(name, (...args) => {
+    const data = fn(...args);
+
+    Object.defineProperties(data, {
+      $parent: {
+        get() {
+          return getData(this.$root.parentElement);
+        },
+      },
+    });
+
+    data.$options = {};
+
+    if (data.use === false) return data;
+
+    // TODO - remove all mixin code below once directives are ready
+
+    const originalInit = data.init;
+    const mixins = [withAttrs(), withOptions(), ...(data.use || [])];
+
+    mixins.forEach((mixin) => {
+      if (mixin.props) {
+        mixin.props.forEach((prop) => {
+          if (!data[prop]) {
+            data[prop] = null;
+          }
+        });
+      }
+    });
+
+    return Object.assign(data, {
+      init() {
+        mixins.forEach((mixin) => mixin(this));
+
+        if (originalInit) {
+          originalInit.call(this);
+        }
+      },
+    });
+  });
+
+  func.component = true;
+
+  return func;
+}
+
+export { CocoComponent };

data/app/assets/js/helpers/alpine.js

@@ -0,0 +1,34 @@
+function registerComponents(components) {
+  document.addEventListener("alpine:init", () => {
+    components.forEach((module) => {
+      if (module.default && module.default.component === true) {
+        Alpine.data(module.default.name, module.default);
+      }
+    });
+  });
+  return components;
+}
+
+function getComponent(el, throwOnError = false) {
+  try {
+    return Alpine.$data(el);
+  } catch (error) {
+    if (throwOnError) {
+      throw error;
+    } else {
+      return null;
+    }
+  }
+}
+
+function getData(el) {
+  const root = Alpine.closestRoot(el);
+  return root ? Alpine.$data(root) : null;
+}
+
+function setData(el, newData) {
+  const data = getData(el);
+  return data ? Object.assign(data, newData) : null;
+}
+
+export { registerComponents, getComponent, getData, setData };

data/app/assets/js/helpers/color.js

@@ -0,0 +1,51 @@
+function isDark(color) {
+  // Variables for red, green, blue values
+  let r;
+  let g;
+  let b;
+  let hsp;
+
+  // If hex --> Convert it to RGB: http://gist.github.com/983661
+  color = +`0x${color.slice(1).replace(color.length < 5 && /./g, "$&$&")}`;
+
+  r = color >> 16;
+  g = (color >> 8) & 255;
+  b = color & 255;
+
+  // HSP equation from http://alienryderflex.com/hsp.html
+  hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b));
+
+  // Using the HSP value, determine whether the color is light or dark
+  if (hsp > 127.5) {
+    return false; // light
+  }
+
+  return true; // dark
+}
+
+function isLight(color) {
+  return !isDark(color);
+}
+
+function isValidHex(color) {
+  if (!color || typeof color !== "string") return false;
+
+  if (color.substring(0, 1) === "#") color = color.substring(1);
+
+  switch (color.length) {
+    case 3:
+      return /^[0-9A-F]{3}$/i.test(color);
+    case 6:
+      return /^[0-9A-F]{6}$/i.test(color);
+    case 8:
+      return /^[0-9A-F]{8}$/i.test(color);
+    default:
+      return false;
+  }
+}
+
+function formatHex(str) {
+  return `#${str.toUpperCase().replace("#", "")}`;
+}
+
+export { isLight, isDark, isValidHex, formatHex };