katalyst-kpop 2.0.0 → 2.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bfe556211c8cb27976e75cf940c7ae065fc6fbfb31f8a9fb2c78ec6e3d36db4d
-  data.tar.gz: 7014e09c2697ff7e0d0093f67068b1583a21c8bdb165222df6b990e63869eac0
+  metadata.gz: bd02fdc721febf6d11b4080487d121731b29341deda1b91e9b381cb7fb5719cb
+  data.tar.gz: 8c721692d22bddfc09d0bd77782c6c6c440803cdc46f57c1634ee986c9c0238d
 SHA512:
-  metadata.gz: 7affe4e861d299c11391520a71adf5d7a9fa4e1af699d7bd9938b0c784784c531992fd68d7d8ea14c58a974b2f6a52ff6e021bcab5811874730e006b1d7d31e9
-  data.tar.gz: d087f450b624e8dc6e4c2426672eb697e52f6e5fe3bbac402f2b71458d0c35ce8f956a60b6c6446f9a6bce4100fbb33865dd4af8550ce12fe0342540a59add1d
+  metadata.gz: 58dad52030790bff9def0411edd0df0de10915889d887c6e553409d3d2f502f253ffe7120fadd65749a8847f68a4eb0daaf89b8240241d9d8f735878b0ed5557
+  data.tar.gz: a04b5c53da4ee4afe9dddb7642e88692e8822aab496b12d3b63cc257ecfd09c45bd22644caf60f6b7e389f27a43e10f7cd29e33a045d03bc7f8aeb3e00964092

data/app/assets/builds/katalyst/kpop.js

@@ -0,0 +1,634 @@
+function camelize(value) {
+  return value.replace(/(?:[_-])([a-z0-9])/g, ((_, char) => char.toUpperCase()));
+}
+
+function namespaceCamelize(value) {
+  return camelize(value.replace(/--/g, "-").replace(/__/g, "_"));
+}
+
+function capitalize(value) {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+}
+
+function dasherize(value) {
+  return value.replace(/([A-Z])/g, ((_, char) => `-${char.toLowerCase()}`));
+}
+
+function readInheritableStaticArrayValues(constructor, propertyName) {
+  const ancestors = getAncestorsForConstructor(constructor);
+  return Array.from(ancestors.reduce(((values, constructor) => {
+    getOwnStaticArrayValues(constructor, propertyName).forEach((name => values.add(name)));
+    return values;
+  }), new Set));
+}
+
+function readInheritableStaticObjectPairs(constructor, propertyName) {
+  const ancestors = getAncestorsForConstructor(constructor);
+  return ancestors.reduce(((pairs, constructor) => {
+    pairs.push(...getOwnStaticObjectPairs(constructor, propertyName));
+    return pairs;
+  }), []);
+}
+
+function getAncestorsForConstructor(constructor) {
+  const ancestors = [];
+  while (constructor) {
+    ancestors.push(constructor);
+    constructor = Object.getPrototypeOf(constructor);
+  }
+  return ancestors.reverse();
+}
+
+function getOwnStaticArrayValues(constructor, propertyName) {
+  const definition = constructor[propertyName];
+  return Array.isArray(definition) ? definition : [];
+}
+
+function getOwnStaticObjectPairs(constructor, propertyName) {
+  const definition = constructor[propertyName];
+  return definition ? Object.keys(definition).map((key => [ key, definition[key] ])) : [];
+}
+
+(() => {
+  function extendWithReflect(constructor) {
+    function extended() {
+      return Reflect.construct(constructor, arguments, new.target);
+    }
+    extended.prototype = Object.create(constructor.prototype, {
+      constructor: {
+        value: extended
+      }
+    });
+    Reflect.setPrototypeOf(extended, constructor);
+    return extended;
+  }
+  function testReflectExtension() {
+    const a = function() {
+      this.a.call(this);
+    };
+    const b = extendWithReflect(a);
+    b.prototype.a = function() {};
+    return new b;
+  }
+  try {
+    testReflectExtension();
+    return extendWithReflect;
+  } catch (error) {
+    return constructor => class extended extends constructor {};
+  }
+})();
+
+({
+  controllerAttribute: "data-controller",
+  actionAttribute: "data-action",
+  targetAttribute: "data-target",
+  targetAttributeForScope: identifier => `data-${identifier}-target`,
+  outletAttributeForScope: (identifier, outlet) => `data-${identifier}-${outlet}-outlet`,
+  keyMappings: Object.assign(Object.assign({
+    enter: "Enter",
+    tab: "Tab",
+    esc: "Escape",
+    space: " ",
+    up: "ArrowUp",
+    down: "ArrowDown",
+    left: "ArrowLeft",
+    right: "ArrowRight",
+    home: "Home",
+    end: "End"
+  }, objectFromEntries("abcdefghijklmnopqrstuvwxyz".split("").map((c => [ c, c ])))), objectFromEntries("0123456789".split("").map((n => [ n, n ]))))
+});
+
+function objectFromEntries(array) {
+  return array.reduce(((memo, [k, v]) => Object.assign(Object.assign({}, memo), {
+    [k]: v
+  })), {});
+}
+
+function ClassPropertiesBlessing(constructor) {
+  const classes = readInheritableStaticArrayValues(constructor, "classes");
+  return classes.reduce(((properties, classDefinition) => Object.assign(properties, propertiesForClassDefinition(classDefinition))), {});
+}
+
+function propertiesForClassDefinition(key) {
+  return {
+    [`${key}Class`]: {
+      get() {
+        const {classes: classes} = this;
+        if (classes.has(key)) {
+          return classes.get(key);
+        } else {
+          const attribute = classes.getAttributeName(key);
+          throw new Error(`Missing attribute "${attribute}"`);
+        }
+      }
+    },
+    [`${key}Classes`]: {
+      get() {
+        return this.classes.getAll(key);
+      }
+    },
+    [`has${capitalize(key)}Class`]: {
+      get() {
+        return this.classes.has(key);
+      }
+    }
+  };
+}
+
+function OutletPropertiesBlessing(constructor) {
+  const outlets = readInheritableStaticArrayValues(constructor, "outlets");
+  return outlets.reduce(((properties, outletDefinition) => Object.assign(properties, propertiesForOutletDefinition(outletDefinition))), {});
+}
+
+function propertiesForOutletDefinition(name) {
+  const camelizedName = namespaceCamelize(name);
+  return {
+    [`${camelizedName}Outlet`]: {
+      get() {
+        const outlet = this.outlets.find(name);
+        if (outlet) {
+          const outletController = this.application.getControllerForElementAndIdentifier(outlet, name);
+          if (outletController) {
+            return outletController;
+          } else {
+            throw new Error(`Missing "data-controller=${name}" attribute on outlet element for "${this.identifier}" controller`);
+          }
+        }
+        throw new Error(`Missing outlet element "${name}" for "${this.identifier}" controller`);
+      }
+    },
+    [`${camelizedName}Outlets`]: {
+      get() {
+        const outlets = this.outlets.findAll(name);
+        if (outlets.length > 0) {
+          return outlets.map((outlet => {
+            const controller = this.application.getControllerForElementAndIdentifier(outlet, name);
+            if (controller) {
+              return controller;
+            } else {
+              console.warn(`The provided outlet element is missing the outlet controller "${name}" for "${this.identifier}"`, outlet);
+            }
+          })).filter((controller => controller));
+        }
+        return [];
+      }
+    },
+    [`${camelizedName}OutletElement`]: {
+      get() {
+        const outlet = this.outlets.find(name);
+        if (outlet) {
+          return outlet;
+        } else {
+          throw new Error(`Missing outlet element "${name}" for "${this.identifier}" controller`);
+        }
+      }
+    },
+    [`${camelizedName}OutletElements`]: {
+      get() {
+        return this.outlets.findAll(name);
+      }
+    },
+    [`has${capitalize(camelizedName)}Outlet`]: {
+      get() {
+        return this.outlets.has(name);
+      }
+    }
+  };
+}
+
+function TargetPropertiesBlessing(constructor) {
+  const targets = readInheritableStaticArrayValues(constructor, "targets");
+  return targets.reduce(((properties, targetDefinition) => Object.assign(properties, propertiesForTargetDefinition(targetDefinition))), {});
+}
+
+function propertiesForTargetDefinition(name) {
+  return {
+    [`${name}Target`]: {
+      get() {
+        const target = this.targets.find(name);
+        if (target) {
+          return target;
+        } else {
+          throw new Error(`Missing target element "${name}" for "${this.identifier}" controller`);
+        }
+      }
+    },
+    [`${name}Targets`]: {
+      get() {
+        return this.targets.findAll(name);
+      }
+    },
+    [`has${capitalize(name)}Target`]: {
+      get() {
+        return this.targets.has(name);
+      }
+    }
+  };
+}
+
+function ValuePropertiesBlessing(constructor) {
+  const valueDefinitionPairs = readInheritableStaticObjectPairs(constructor, "values");
+  const propertyDescriptorMap = {
+    valueDescriptorMap: {
+      get() {
+        return valueDefinitionPairs.reduce(((result, valueDefinitionPair) => {
+          const valueDescriptor = parseValueDefinitionPair(valueDefinitionPair, this.identifier);
+          const attributeName = this.data.getAttributeNameForKey(valueDescriptor.key);
+          return Object.assign(result, {
+            [attributeName]: valueDescriptor
+          });
+        }), {});
+      }
+    }
+  };
+  return valueDefinitionPairs.reduce(((properties, valueDefinitionPair) => Object.assign(properties, propertiesForValueDefinitionPair(valueDefinitionPair))), propertyDescriptorMap);
+}
+
+function propertiesForValueDefinitionPair(valueDefinitionPair, controller) {
+  const definition = parseValueDefinitionPair(valueDefinitionPair, controller);
+  const {key: key, name: name, reader: read, writer: write} = definition;
+  return {
+    [name]: {
+      get() {
+        const value = this.data.get(key);
+        if (value !== null) {
+          return read(value);
+        } else {
+          return definition.defaultValue;
+        }
+      },
+      set(value) {
+        if (value === undefined) {
+          this.data.delete(key);
+        } else {
+          this.data.set(key, write(value));
+        }
+      }
+    },
+    [`has${capitalize(name)}`]: {
+      get() {
+        return this.data.has(key) || definition.hasCustomDefaultValue;
+      }
+    }
+  };
+}
+
+function parseValueDefinitionPair([token, typeDefinition], controller) {
+  return valueDescriptorForTokenAndTypeDefinition({
+    controller: controller,
+    token: token,
+    typeDefinition: typeDefinition
+  });
+}
+
+function parseValueTypeConstant(constant) {
+  switch (constant) {
+   case Array:
+    return "array";
+
+   case Boolean:
+    return "boolean";
+
+   case Number:
+    return "number";
+
+   case Object:
+    return "object";
+
+   case String:
+    return "string";
+  }
+}
+
+function parseValueTypeDefault(defaultValue) {
+  switch (typeof defaultValue) {
+   case "boolean":
+    return "boolean";
+
+   case "number":
+    return "number";
+
+   case "string":
+    return "string";
+  }
+  if (Array.isArray(defaultValue)) return "array";
+  if (Object.prototype.toString.call(defaultValue) === "[object Object]") return "object";
+}
+
+function parseValueTypeObject(payload) {
+  const typeFromObject = parseValueTypeConstant(payload.typeObject.type);
+  if (!typeFromObject) return;
+  const defaultValueType = parseValueTypeDefault(payload.typeObject.default);
+  if (typeFromObject !== defaultValueType) {
+    const propertyPath = payload.controller ? `${payload.controller}.${payload.token}` : payload.token;
+    throw new Error(`The specified default value for the Stimulus Value "${propertyPath}" must match the defined type "${typeFromObject}". The provided default value of "${payload.typeObject.default}" is of type "${defaultValueType}".`);
+  }
+  return typeFromObject;
+}
+
+function parseValueTypeDefinition(payload) {
+  const typeFromObject = parseValueTypeObject({
+    controller: payload.controller,
+    token: payload.token,
+    typeObject: payload.typeDefinition
+  });
+  const typeFromDefaultValue = parseValueTypeDefault(payload.typeDefinition);
+  const typeFromConstant = parseValueTypeConstant(payload.typeDefinition);
+  const type = typeFromObject || typeFromDefaultValue || typeFromConstant;
+  if (type) return type;
+  const propertyPath = payload.controller ? `${payload.controller}.${payload.typeDefinition}` : payload.token;
+  throw new Error(`Unknown value type "${propertyPath}" for "${payload.token}" value`);
+}
+
+function defaultValueForDefinition(typeDefinition) {
+  const constant = parseValueTypeConstant(typeDefinition);
+  if (constant) return defaultValuesByType[constant];
+  const defaultValue = typeDefinition.default;
+  if (defaultValue !== undefined) return defaultValue;
+  return typeDefinition;
+}
+
+function valueDescriptorForTokenAndTypeDefinition(payload) {
+  const key = `${dasherize(payload.token)}-value`;
+  const type = parseValueTypeDefinition(payload);
+  return {
+    type: type,
+    key: key,
+    name: camelize(key),
+    get defaultValue() {
+      return defaultValueForDefinition(payload.typeDefinition);
+    },
+    get hasCustomDefaultValue() {
+      return parseValueTypeDefault(payload.typeDefinition) !== undefined;
+    },
+    reader: readers[type],
+    writer: writers[type] || writers.default
+  };
+}
+
+const defaultValuesByType = {
+  get array() {
+    return [];
+  },
+  boolean: false,
+  number: 0,
+  get object() {
+    return {};
+  },
+  string: ""
+};
+
+const readers = {
+  array(value) {
+    const array = JSON.parse(value);
+    if (!Array.isArray(array)) {
+      throw new TypeError(`expected value of type "array" but instead got value "${value}" of type "${parseValueTypeDefault(array)}"`);
+    }
+    return array;
+  },
+  boolean(value) {
+    return !(value == "0" || String(value).toLowerCase() == "false");
+  },
+  number(value) {
+    return Number(value);
+  },
+  object(value) {
+    const object = JSON.parse(value);
+    if (object === null || typeof object != "object" || Array.isArray(object)) {
+      throw new TypeError(`expected value of type "object" but instead got value "${value}" of type "${parseValueTypeDefault(object)}"`);
+    }
+    return object;
+  },
+  string(value) {
+    return value;
+  }
+};
+
+const writers = {
+  default: writeString,
+  array: writeJSON,
+  object: writeJSON
+};
+
+function writeJSON(value) {
+  return JSON.stringify(value);
+}
+
+function writeString(value) {
+  return `${value}`;
+}
+
+class Controller {
+  constructor(context) {
+    this.context = context;
+  }
+  static get shouldLoad() {
+    return true;
+  }
+  static afterLoad(_identifier, _application) {
+    return;
+  }
+  get application() {
+    return this.context.application;
+  }
+  get scope() {
+    return this.context.scope;
+  }
+  get element() {
+    return this.scope.element;
+  }
+  get identifier() {
+    return this.scope.identifier;
+  }
+  get targets() {
+    return this.scope.targets;
+  }
+  get outlets() {
+    return this.scope.outlets;
+  }
+  get classes() {
+    return this.scope.classes;
+  }
+  get data() {
+    return this.scope.data;
+  }
+  initialize() {}
+  connect() {}
+  disconnect() {}
+  dispatch(eventName, {target: target = this.element, detail: detail = {}, prefix: prefix = this.identifier, bubbles: bubbles = true, cancelable: cancelable = true} = {}) {
+    const type = prefix ? `${prefix}:${eventName}` : eventName;
+    const event = new CustomEvent(type, {
+      detail: detail,
+      bubbles: bubbles,
+      cancelable: cancelable
+    });
+    target.dispatchEvent(event);
+    return event;
+  }
+}
+
+Controller.blessings = [ ClassPropertiesBlessing, TargetPropertiesBlessing, ValuePropertiesBlessing, OutletPropertiesBlessing ];
+
+Controller.targets = [];
+
+Controller.outlets = [];
+
+Controller.values = {};
+
+class ScrimController extends Controller {
+  static values={
+    open: Boolean,
+    captive: Boolean,
+    zIndex: Number
+  };
+  static showScrim({dismiss: dismiss = true, zIndex: zIndex = undefined, top: top = undefined} = {}) {
+    return window.dispatchEvent(new CustomEvent("scrim:request:show", {
+      cancelable: true,
+      detail: {
+        captive: !dismiss,
+        zIndex: zIndex,
+        top: top
+      }
+    }));
+  }
+  static hideScrim() {
+    return window.dispatchEvent(new CustomEvent("scrim:request:hide", {
+      cancelable: true
+    }));
+  }
+  connect() {
+    this.defaultZIndexValue = this.zIndexValue;
+    this.defaultCaptiveValue = this.captiveValue;
+  }
+  show(request) {
+    if (this.openValue) this.hide(request);
+    if (this.openValue) return;
+    this.openValue = true;
+    const event = this.dispatch("show", {
+      bubbles: true,
+      cancelable: true
+    });
+    if (event.defaultPrevented) {
+      this.openValue = false;
+      request.preventDefault();
+      return;
+    }
+    this.#show(request.detail);
+  }
+  hide(request) {
+    if (!this.openValue) return;
+    this.openValue = false;
+    const event = this.dispatch("hide", {
+      bubbles: true,
+      cancelable: true
+    });
+    if (event.defaultPrevented) {
+      this.openValue = true;
+      request.preventDefault();
+      return;
+    }
+    this.#hide();
+  }
+  dismiss(event) {
+    if (!this.captiveValue) this.hide(event);
+  }
+  escape(event) {
+    if (event.key === "Escape" && !this.captiveValue && !event.defaultPrevented) this.hide(event);
+  }
+  disconnect() {
+    super.disconnect();
+  }
+  #show({captive: captive = this.defaultCaptiveValue, zIndex: zIndex = this.defaultZIndexValue, top: top = window.scrollY}) {
+    this.captiveValue = captive;
+    this.zIndexValue = zIndex;
+    this.scrollY = top;
+    this.previousPosition = document.body.style.position;
+    this.previousTop = document.body.style.top;
+    this.element.style.zIndex = this.zIndexValue;
+    document.body.style.top = `-${top}px`;
+    document.body.style.position = "fixed";
+  }
+  #hide() {
+    this.captiveValue = this.defaultCaptiveValue;
+    this.zIndexValue = this.defaultZIndexValue;
+    resetStyle(this.element, "z-index", null);
+    resetStyle(document.body, "position", null);
+    resetStyle(document.body, "top", null);
+    window.scrollTo(0, this.scrollY);
+    delete this.scrollY;
+    delete this.previousPosition;
+    delete this.previousTop;
+  }
+}
+
+function resetStyle(element, property, previousValue) {
+  if (previousValue) {
+    element.style.setProperty(property, previousValue);
+  } else {
+    element.style.removeProperty(property);
+  }
+}
+
+class KpopController extends Controller {
+  static targets=[ "content", "closeButton" ];
+  static values={
+    open: Boolean
+  };
+  contentTargetConnected() {
+    if (this.openValue) return;
+    if (ScrimController.showScrim({
+      dismiss: this.hasCloseButtonTarget
+    })) {
+      this.openValue = true;
+    } else {
+      this.#clear();
+    }
+  }
+  contentTargetDisconnected() {
+    if (this.hasContentTarget) return;
+    this.openValue = false;
+    ScrimController.hideScrim();
+  }
+  openValueChanged(open) {
+    this.element.style.display = open ? "flex" : "none";
+  }
+  dismiss() {
+    if (!this.hasContentTarget || !this.openValue) return;
+    const dismissUrl = this.contentTarget.dataset.dismissUrl;
+    const dismissAction = this.contentTarget.dataset.dismissAction;
+    if (dismissUrl) {
+      if (dismissAction === "replace") {
+        if (isSameUrl(document.referrer, dismissUrl)) {
+          history.back();
+        } else {
+          history.replaceState({}, "", dismissUrl);
+        }
+      } else {
+        window.location.href = dismissUrl;
+      }
+    }
+    this.#clear();
+  }
+  #clear() {
+    this.element.removeAttribute("src");
+    this.element.innerHTML = "";
+  }
+}
+
+function isSameUrl(previous, next) {
+  try {
+    return `${new URL(previous)}` === `${new URL(next, location.href)}`;
+  } catch {
+    return false;
+  }
+}
+
+const Definitions = [ {
+  identifier: "kpop",
+  controllerConstructor: KpopController
+}, {
+  identifier: "scrim",
+  controllerConstructor: ScrimController
+} ];
+
+export { KpopController, ScrimController, Definitions as default };

data/app/assets/javascripts/controllers/kpop_controller.js

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus";
-import ScrimController from "./scrim_controller";
+import ScrimController from "controllers/scrim_controller";
 
 export default class KpopController extends Controller {
   static targets = ["content", "closeButton"];

data/app/helpers/kpop_helper.rb

@@ -1,10 +1,18 @@
 # frozen_string_literal: true
 
 module KpopHelper
+  # Render a modal dialog. Intended for use inside a kpop turbo frame tag.
+  # See builder for options.
   def render_kpop(options = {}, &block)
     Kpop::Modal.new(self).render(options, &block)
   end
 
+  # Render a turbo stream action that will dismiss any open kpop modals.
+  def dismiss_kpop
+    turbo_stream.update("kpop", "")
+  end
+
+  # Render a turbo frame tag that can be targeted for rendering kpop modals.
   def kpop_frame_tag(&block)
     turbo_frame_tag "kpop",
                     class: "kpop-container",
@@ -13,6 +21,8 @@ module KpopHelper
     end
   end
 
+  # Renders a link that will navigate the kpop turbo frame to the given URL.
+  # The URL should render a modal response inside a kpop frame tag.
   def kpop_link_to(name = nil, options = nil, html_options = nil, &block)
     default_html_options = {
       data: { turbo: true, turbo_frame: "kpop" },
@@ -25,6 +35,8 @@ module KpopHelper
     end
   end
 
+  # Renders a button that will navigate the kpop turbo frame to the given URL.
+  # The URL should render a modal response inside a kpop frame tag.
   def kpop_button_to(name = nil, options = nil, html_options = nil, &block)
     default_html_options = {
       form: { data: { turbo: true, turbo_frame: "kpop" } },
@@ -32,6 +44,7 @@ module KpopHelper
     button_to(name, options, default_html_options.deep_merge(html_options || {}), &block)
   end
 
+  # Renders a button that will close the current kpop modal, if any.
   def kpop_button_close(content = nil, **options, &block)
     content = block ? capture(yield) : content
     tag.button content, data: { action: "click->kpop#dismiss:prevent" }, **options

data/lib/katalyst/kpop/version.rb

@@ -2,6 +2,6 @@
 
 module Katalyst
   module Kpop
-    VERSION = "2.0.0"
+    VERSION = "2.0.2"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-kpop
 version: !ruby/object:Gem::Version
-  version: 2.0.0
+  version: 2.0.2
 platform: ruby
 authors:
 - Katalyst Interactive
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-04-05 00:00:00.000000000 Z
+date: 2023-04-18 00:00:00.000000000 Z
 dependencies: []
 description:
 email:
@@ -19,6 +19,7 @@ extra_rdoc_files: []
 files:
 - README.md
 - app/assets/builds/katalyst/kpop.css
+- app/assets/builds/katalyst/kpop.js
 - app/assets/builds/katalyst/kpop.min.js
 - app/assets/config/kpop.js
 - app/assets/javascripts/controllers/kpop_controller.js