cubism 0.1.0.pre10 → 0.1.0.pre13

data/app/assets/javascripts/cubism.js

@@ -0,0 +1,141 @@
+import CableReady, { SubscribingElement } from "cable_ready";
+
+function debounce(func, timeout) {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout((() => func.apply(this, args)), timeout);
+  };
+}
+
+class Cubicle extends SubscribingElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({
+      mode: "open"
+    });
+    shadowRoot.innerHTML = `\n<style>\n  :host {\n    display: block;\n  }\n</style>\n<slot></slot>\n`;
+    this.triggerRoot = this;
+    this.present = false;
+  }
+  async connectedCallback() {
+    if (this.preview) return;
+    this.appear = debounce(this.appear.bind(this), 50);
+    this.appearTriggers = this.getAttribute("appear-trigger") ? this.getAttribute("appear-trigger").split(",") : [];
+    this.disappearTriggers = this.getAttribute("disappear-trigger") ? this.getAttribute("disappear-trigger").split(",") : [];
+    this.triggerRootSelector = this.getAttribute("trigger-root");
+    this.consumer = await CableReady.consumer;
+    this.channel = this.createSubscription();
+    this.appearanceIntersectionObserver = new IntersectionObserver(((entries, observer) => {
+      entries.forEach((entry => {
+        if (entry.target !== this.triggerRoot) return;
+        if (entry.isIntersecting) {
+          if (!this.present) {
+            this.appear();
+          }
+        } else {
+          if (this.present) {
+            this.disappear();
+          }
+        }
+      }));
+    }), {
+      threshold: 0
+    });
+    this.mutationObserver = new MutationObserver(((mutationsList, observer) => {
+      if (this.triggerRootSelector) {
+        for (const mutation of mutationsList) {
+          const root = document.querySelector(this.triggerRootSelector);
+          if (root) {
+            this.uninstall();
+            this.triggerRoot = root;
+            this.install();
+          }
+        }
+      }
+      this.mutationObserver.disconnect();
+    }));
+    this.mutationObserver.observe(document, {
+      subtree: true,
+      childList: true
+    });
+  }
+  disconnectedCallback() {
+    this.disappear();
+    super.disconnectedCallback();
+  }
+  install() {
+    if (this.appearTriggers.includes("connect")) {
+      this.appear();
+    }
+    this.appearTriggers.filter((eventName => eventName === "intersect")).forEach((() => {
+      this.appearanceIntersectionObserver.observe(this.triggerRoot);
+    }));
+    this.appearTriggers.filter((eventName => eventName !== "connect" && eventName !== "intersect")).forEach((eventName => {
+      this.triggerRoot.addEventListener(eventName, this.appear.bind(this));
+    }));
+    this.disappearTriggers.filter((eventName => eventName !== "disconnect" && eventName !== "intersect")).forEach((eventName => {
+      this.triggerRoot.addEventListener(eventName, this.disappear.bind(this));
+    }));
+    this.disappearTriggers.filter((eventName => eventName === "intersect")).forEach((() => {}));
+  }
+  uninstall() {
+    this.appearTriggers.filter((eventName => eventName === "intersect")).forEach((() => {
+      this.appearanceIntersectionObserver.unobserve(this.triggerRoot);
+    }));
+    this.appearTriggers.filter((eventName => eventName !== "connect" && eventName !== "intersect")).forEach((eventName => {
+      this.triggerRoot.removeEventListener(eventName, this.appear.bind(this));
+    }));
+    this.disappearTriggers.filter((eventName => eventName === "intersect")).forEach((() => {}));
+    this.disappearTriggers.filter((eventName => eventName !== "disconnect" && eventName !== "intersect")).forEach((eventName => {
+      this.triggerRoot.removeEventListener(eventName, this.disappear.bind(this));
+    }));
+  }
+  appear() {
+    if (this.channel) {
+      this.present = true;
+      this.channel.perform("appear");
+    }
+  }
+  disappear() {
+    if (this.channel) {
+      this.present = false;
+      this.channel.perform("disappear");
+    }
+  }
+  performOperations(data) {
+    if (data.cableReady) {
+      CableReady.perform(data.operations);
+    }
+  }
+  createSubscription() {
+    if (!this.consumer) {
+      console.error("The `cubicle-element` helper cannot connect without an ActionCable consumer.");
+      return;
+    }
+    return this.consumer.subscriptions.create({
+      channel: this.channelName,
+      identifier: this.getAttribute("identifier"),
+      element_id: this.id,
+      scope: this.getAttribute("scope"),
+      exclude_current_user: this.getAttribute("exclude-current-user") === "true"
+    }, {
+      connected: () => {
+        this.install();
+      },
+      disconnected: () => {
+        this.disappear();
+        this.uninstall();
+      },
+      rejected: () => {
+        this.uninstall();
+      },
+      received: this.performOperations.bind(this)
+    });
+  }
+  get channelName() {
+    return "Cubism::PresenceChannel";
+  }
+}
+
+customElements.define("cubicle-element", Cubicle);

data/app/assets/javascripts/cubism.min.js

@@ -0,0 +1,2 @@
+import e,{SubscribingElement as t}from"cable_ready";customElements.define("cubicle-element",class extends t{constructor(){super();this.attachShadow({mode:"open"}).innerHTML="\n<style>\n  :host {\n    display: block;\n  }\n</style>\n<slot></slot>\n",this.triggerRoot=this,this.present=!1}async connectedCallback(){this.preview||(this.appear=function(e,t){let r;return(...i)=>{clearTimeout(r),r=setTimeout((()=>e.apply(this,i)),t)}}(this.appear.bind(this),50),this.appearTriggers=this.getAttribute("appear-trigger")?this.getAttribute("appear-trigger").split(","):[],this.disappearTriggers=this.getAttribute("disappear-trigger")?this.getAttribute("disappear-trigger").split(","):[],this.triggerRootSelector=this.getAttribute("trigger-root"),this.consumer=await e.consumer,this.channel=this.createSubscription(),this.appearanceIntersectionObserver=new IntersectionObserver(((e,t)=>{e.forEach((e=>{e.target===this.triggerRoot&&(e.isIntersecting?this.present||this.appear():this.present&&this.disappear())}))}),{threshold:0}),this.mutationObserver=new MutationObserver(((e,t)=>{if(this.triggerRootSelector)for(const t of e){const e=document.querySelector(this.triggerRootSelector);e&&(this.uninstall(),this.triggerRoot=e,this.install())}this.mutationObserver.disconnect()})),this.mutationObserver.observe(document,{subtree:!0,childList:!0}))}disconnectedCallback(){this.disappear(),super.disconnectedCallback()}install(){this.appearTriggers.includes("connect")&&this.appear(),this.appearTriggers.filter((e=>"intersect"===e)).forEach((()=>{this.appearanceIntersectionObserver.observe(this.triggerRoot)})),this.appearTriggers.filter((e=>"connect"!==e&&"intersect"!==e)).forEach((e=>{this.triggerRoot.addEventListener(e,this.appear.bind(this))})),this.disappearTriggers.filter((e=>"disconnect"!==e&&"intersect"!==e)).forEach((e=>{this.triggerRoot.addEventListener(e,this.disappear.bind(this))})),this.disappearTriggers.filter((e=>"intersect"===e)).forEach((()=>{}))}uninstall(){this.appearTriggers.filter((e=>"intersect"===e)).forEach((()=>{this.appearanceIntersectionObserver.unobserve(this.triggerRoot)})),this.appearTriggers.filter((e=>"connect"!==e&&"intersect"!==e)).forEach((e=>{this.triggerRoot.removeEventListener(e,this.appear.bind(this))})),this.disappearTriggers.filter((e=>"intersect"===e)).forEach((()=>{})),this.disappearTriggers.filter((e=>"disconnect"!==e&&"intersect"!==e)).forEach((e=>{this.triggerRoot.removeEventListener(e,this.disappear.bind(this))}))}appear(){this.channel&&(this.present=!0,this.channel.perform("appear"))}disappear(){this.channel&&(this.present=!1,this.channel.perform("disappear"))}performOperations(t){t.cableReady&&e.perform(t.operations)}createSubscription(){if(this.consumer)return this.consumer.subscriptions.create({channel:this.channelName,identifier:this.getAttribute("identifier"),element_id:this.id,scope:this.getAttribute("scope"),exclude_current_user:"true"===this.getAttribute("exclude-current-user")},{connected:()=>{this.install()},disconnected:()=>{this.disappear(),this.uninstall()},rejected:()=>{this.uninstall()},received:this.performOperations.bind(this)});console.error("The `cubicle-element` helper cannot connect without an ActionCable consumer.")}get channelName(){return"Cubism::PresenceChannel"}});
+//# sourceMappingURL=cubism.min.js.map

data/app/assets/javascripts/cubism.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cubism.min.js","sources":["../../../javascript/elements/index.js","../../../javascript/elements/cubicle.js","../../../node_modules/cable_ready/javascript/utils.js"],"sourcesContent":["/* global customElements */\n\nimport { Cubicle } from './cubicle'\n\nexport * from './cubicle'\n\ncustomElements.define('cubicle-element', Cubicle)\n","/* eslint-disable no-undef */\nimport CableReady, { SubscribingElement } from 'cable_ready'\nimport { debounce } from 'cable_ready/javascript/utils'\n\nexport class Cubicle extends SubscribingElement {\n  constructor () {\n    super()\n    const shadowRoot = this.attachShadow({ mode: 'open' })\n    shadowRoot.innerHTML = `\n<style>\n  :host {\n    display: block;\n  }\n</style>\n<slot></slot>\n`\n\n    this.triggerRoot = this\n    this.present = false\n  }\n\n  async connectedCallback () {\n    if (this.preview) return\n\n    this.appear = debounce(this.appear.bind(this), 50)\n\n    this.appearTriggers = this.getAttribute('appear-trigger')\n      ? this.getAttribute('appear-trigger').split(',')\n      : []\n    this.disappearTriggers = this.getAttribute('disappear-trigger')\n      ? this.getAttribute('disappear-trigger').split(',')\n      : []\n    this.triggerRootSelector = this.getAttribute('trigger-root')\n\n    this.consumer = await CableReady.consumer\n\n    this.channel = this.createSubscription()\n\n    this.appearanceIntersectionObserver = new IntersectionObserver(\n      (entries, observer) => {\n        entries.forEach(entry => {\n          if (entry.target !== this.triggerRoot) return\n          if (entry.isIntersecting) {\n            if (!this.present) {\n              this.appear()\n            }\n          } else {\n            if (this.present) {\n              this.disappear()\n            }\n          }\n        })\n      },\n      { threshold: 0 }\n    )\n\n    this.mutationObserver = new MutationObserver((mutationsList, observer) => {\n      if (this.triggerRootSelector) {\n        // eslint-disable-next-line no-unused-vars\n        for (const mutation of mutationsList) {\n          const root = document.querySelector(this.triggerRootSelector)\n          if (root) {\n            this.uninstall()\n            this.triggerRoot = root\n            this.install()\n          }\n        }\n      }\n      this.mutationObserver.disconnect()\n    })\n\n    this.mutationObserver.observe(document, {\n      subtree: true,\n      childList: true\n    })\n  }\n\n  disconnectedCallback () {\n    this.disappear()\n    super.disconnectedCallback()\n  }\n\n  install () {\n    if (this.appearTriggers.includes('connect')) {\n      this.appear()\n    }\n\n    this.appearTriggers\n      .filter(eventName => eventName === 'intersect')\n      .forEach(() => {\n        this.appearanceIntersectionObserver.observe(this.triggerRoot)\n      })\n\n    this.appearTriggers\n      .filter(eventName => eventName !== 'connect' && eventName !== 'intersect')\n      .forEach(eventName => {\n        this.triggerRoot.addEventListener(eventName, this.appear.bind(this))\n      })\n\n    this.disappearTriggers\n      .filter(\n        eventName => eventName !== 'disconnect' && eventName !== 'intersect'\n      )\n      .forEach(eventName => {\n        this.triggerRoot.addEventListener(eventName, this.disappear.bind(this))\n      })\n\n    this.disappearTriggers\n      .filter(eventName => eventName === 'intersect')\n      .forEach(() => {})\n  }\n\n  uninstall () {\n    this.appearTriggers\n      .filter(eventName => eventName === 'intersect')\n      .forEach(() => {\n        this.appearanceIntersectionObserver.unobserve(this.triggerRoot)\n      })\n\n    this.appearTriggers\n      .filter(eventName => eventName !== 'connect' && eventName !== 'intersect')\n      .forEach(eventName => {\n        this.triggerRoot.removeEventListener(eventName, this.appear.bind(this))\n      })\n\n    this.disappearTriggers\n      .filter(eventName => eventName === 'intersect')\n      .forEach(() => {})\n\n    this.disappearTriggers\n      .filter(\n        eventName => eventName !== 'disconnect' && eventName !== 'intersect'\n      )\n      .forEach(eventName => {\n        this.triggerRoot.removeEventListener(\n          eventName,\n          this.disappear.bind(this)\n        )\n      })\n  }\n\n  appear () {\n    if (this.channel) {\n      this.present = true\n      this.channel.perform('appear')\n    }\n  }\n\n  disappear () {\n    if (this.channel) {\n      this.present = false\n      this.channel.perform('disappear')\n    }\n  }\n\n  performOperations (data) {\n    if (data.cableReady) {\n      CableReady.perform(data.operations)\n    }\n  }\n\n  createSubscription () {\n    if (!this.consumer) {\n      console.error(\n        'The `cubicle-element` helper cannot connect without an ActionCable consumer.'\n      )\n      return\n    }\n\n    return this.consumer.subscriptions.create(\n      {\n        channel: this.channelName,\n        identifier: this.getAttribute('identifier'),\n        element_id: this.id,\n        scope: this.getAttribute('scope'),\n        exclude_current_user:\n          this.getAttribute('exclude-current-user') === 'true'\n      },\n      {\n        connected: () => {\n          this.install()\n        },\n        disconnected: () => {\n          this.disappear()\n          this.uninstall()\n        },\n        rejected: () => {\n          this.uninstall()\n        },\n        received: this.performOperations.bind(this)\n      }\n    )\n  }\n\n  get channelName () {\n    return 'Cubism::PresenceChannel'\n  }\n}\n","import { inputTags, textInputTypes } from './enums'\nimport activeElement from './active_element'\n\n// Indicates if the passed element is considered a text input.\n//\nconst isTextInput = element => {\n  return inputTags[element.tagName] && textInputTypes[element.type]\n}\n\n// Assigns focus to the appropriate element... preferring the explicitly passed selector\n//\n// * selector - a CSS selector for the element that should have focus\n//\nconst assignFocus = selector => {\n  const element =\n    selector && selector.nodeType === Node.ELEMENT_NODE\n      ? selector\n      : document.querySelector(selector)\n  const focusElement = element || activeElement.element\n  if (focusElement && focusElement.focus) focusElement.focus()\n}\n\n// Dispatches an event on the passed element\n//\n// * element - the element\n// * name - the name of the event\n// * detail - the event detail\n//\nconst dispatch = (element, name, detail = {}) => {\n  const init = { bubbles: true, cancelable: true, detail: detail }\n  const evt = new CustomEvent(name, init)\n  element.dispatchEvent(evt)\n  if (window.jQuery) window.jQuery(element).trigger(name, detail)\n}\n\n// Accepts an xPath query and returns the element found at that position in the DOM\n//\nconst xpathToElement = xpath => {\n  return document.evaluate(\n    xpath,\n    document,\n    null,\n    XPathResult.FIRST_ORDERED_NODE_TYPE,\n    null\n  ).singleNodeValue\n}\n\n// Return an array with the class names to be used\n//\n// * names - could be a string or an array of strings for multiple classes.\n//\nconst getClassNames = names => Array(names).flat()\n\n// Perform operation for either the first or all of the elements returned by CSS selector\n//\n// * operation - the instruction payload from perform\n// * callback - the operation function to run for each element\n//\nconst processElements = (operation, callback) => {\n  Array.from(\n    operation.selectAll ? operation.element : [operation.element]\n  ).forEach(callback)\n}\n\n// camelCase to kebab-case\n//\nconst kebabize = str => {\n  return str\n    .split('')\n    .map((letter, idx) => {\n      return letter.toUpperCase() === letter\n        ? `${idx !== 0 ? '-' : ''}${letter.toLowerCase()}`\n        : letter\n    })\n    .join('')\n}\n\n// Provide a standardized pipeline of checks and modifications to all operations based on provided options\n// Currently skips execution if cancelled and implements an optional delay\n//\nconst operate = (operation, callback) => {\n  if (!operation.cancel) {\n    operation.delay ? setTimeout(callback, operation.delay) : callback()\n    return true\n  }\n  return false\n}\n\n// Dispatch life-cycle events with standardized naming\nconst before = (target, operation) =>\n  dispatch(\n    target,\n    `cable-ready:before-${kebabize(operation.operation)}`,\n    operation\n  )\n\nconst after = (target, operation) =>\n  dispatch(\n    target,\n    `cable-ready:after-${kebabize(operation.operation)}`,\n    operation\n  )\n\nfunction debounce (func, timeout) {\n  let timer\n  return (...args) => {\n    clearTimeout(timer)\n    timer = setTimeout(() => func.apply(this, args), timeout)\n  }\n}\n\nfunction handleErrors (response) {\n  if (!response.ok) throw Error(response.statusText)\n  return response\n}\n\n// A proxy method to wrap a fetch call in error handling\n//\n// * url - the URL to fetch\n// * additionalHeaders - an object of additional headers passed to fetch\n//\nasync function graciouslyFetch (url, additionalHeaders) {\n  try {\n    const response = await fetch(url, {\n      headers: {\n        'X-REQUESTED-WITH': 'XmlHttpRequest',\n        ...additionalHeaders\n      }\n    })\n    if (response == undefined) return\n\n    handleErrors(response)\n\n    return response\n  } catch (e) {\n    console.error(`Could not fetch ${url}`)\n  }\n}\n\nexport {\n  isTextInput,\n  assignFocus,\n  dispatch,\n  xpathToElement,\n  getClassNames,\n  processElements,\n  operate,\n  before,\n  after,\n  debounce,\n  handleErrors,\n  graciouslyFetch\n}\n"],"names":["customElements","define","SubscribingElement","constructor","super","this","attachShadow","mode","innerHTML","triggerRoot","present","async","preview","appear","func","timeout","timer","args","clearTimeout","setTimeout","apply","debounce","bind","appearTriggers","getAttribute","split","disappearTriggers","triggerRootSelector","consumer","CableReady","channel","createSubscription","appearanceIntersectionObserver","IntersectionObserver","entries","observer","forEach","entry","target","isIntersecting","disappear","threshold","mutationObserver","MutationObserver","mutationsList","mutation","root","document","querySelector","uninstall","install","disconnect","observe","subtree","childList","disconnectedCallback","includes","filter","eventName","addEventListener","unobserve","removeEventListener","perform","performOperations","data","cableReady","operations","subscriptions","create","channelName","identifier","element_id","id","scope","exclude_current_user","connected","disconnected","rejected","received","console","error"],"mappings":"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"}

data/app/assets/javascripts/cubism.umd.js

@@ -0,0 +1,149 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(require("cable_ready")) : typeof define === "function" && define.amd ? define([ "cable_ready" ], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, 
+  factory(global.CableReady));
+})(this, (function(CableReady) {
+  "use strict";
+  function _interopDefaultLegacy(e) {
+    return e && typeof e === "object" && "default" in e ? e : {
+      default: e
+    };
+  }
+  var CableReady__default = _interopDefaultLegacy(CableReady);
+  function debounce(func, timeout) {
+    let timer;
+    return (...args) => {
+      clearTimeout(timer);
+      timer = setTimeout((() => func.apply(this, args)), timeout);
+    };
+  }
+  class Cubicle extends CableReady.SubscribingElement {
+    constructor() {
+      super();
+      const shadowRoot = this.attachShadow({
+        mode: "open"
+      });
+      shadowRoot.innerHTML = `\n<style>\n  :host {\n    display: block;\n  }\n</style>\n<slot></slot>\n`;
+      this.triggerRoot = this;
+      this.present = false;
+    }
+    async connectedCallback() {
+      if (this.preview) return;
+      this.appear = debounce(this.appear.bind(this), 50);
+      this.appearTriggers = this.getAttribute("appear-trigger") ? this.getAttribute("appear-trigger").split(",") : [];
+      this.disappearTriggers = this.getAttribute("disappear-trigger") ? this.getAttribute("disappear-trigger").split(",") : [];
+      this.triggerRootSelector = this.getAttribute("trigger-root");
+      this.consumer = await CableReady__default["default"].consumer;
+      this.channel = this.createSubscription();
+      this.appearanceIntersectionObserver = new IntersectionObserver(((entries, observer) => {
+        entries.forEach((entry => {
+          if (entry.target !== this.triggerRoot) return;
+          if (entry.isIntersecting) {
+            if (!this.present) {
+              this.appear();
+            }
+          } else {
+            if (this.present) {
+              this.disappear();
+            }
+          }
+        }));
+      }), {
+        threshold: 0
+      });
+      this.mutationObserver = new MutationObserver(((mutationsList, observer) => {
+        if (this.triggerRootSelector) {
+          for (const mutation of mutationsList) {
+            const root = document.querySelector(this.triggerRootSelector);
+            if (root) {
+              this.uninstall();
+              this.triggerRoot = root;
+              this.install();
+            }
+          }
+        }
+        this.mutationObserver.disconnect();
+      }));
+      this.mutationObserver.observe(document, {
+        subtree: true,
+        childList: true
+      });
+    }
+    disconnectedCallback() {
+      this.disappear();
+      super.disconnectedCallback();
+    }
+    install() {
+      if (this.appearTriggers.includes("connect")) {
+        this.appear();
+      }
+      this.appearTriggers.filter((eventName => eventName === "intersect")).forEach((() => {
+        this.appearanceIntersectionObserver.observe(this.triggerRoot);
+      }));
+      this.appearTriggers.filter((eventName => eventName !== "connect" && eventName !== "intersect")).forEach((eventName => {
+        this.triggerRoot.addEventListener(eventName, this.appear.bind(this));
+      }));
+      this.disappearTriggers.filter((eventName => eventName !== "disconnect" && eventName !== "intersect")).forEach((eventName => {
+        this.triggerRoot.addEventListener(eventName, this.disappear.bind(this));
+      }));
+      this.disappearTriggers.filter((eventName => eventName === "intersect")).forEach((() => {}));
+    }
+    uninstall() {
+      this.appearTriggers.filter((eventName => eventName === "intersect")).forEach((() => {
+        this.appearanceIntersectionObserver.unobserve(this.triggerRoot);
+      }));
+      this.appearTriggers.filter((eventName => eventName !== "connect" && eventName !== "intersect")).forEach((eventName => {
+        this.triggerRoot.removeEventListener(eventName, this.appear.bind(this));
+      }));
+      this.disappearTriggers.filter((eventName => eventName === "intersect")).forEach((() => {}));
+      this.disappearTriggers.filter((eventName => eventName !== "disconnect" && eventName !== "intersect")).forEach((eventName => {
+        this.triggerRoot.removeEventListener(eventName, this.disappear.bind(this));
+      }));
+    }
+    appear() {
+      if (this.channel) {
+        this.present = true;
+        this.channel.perform("appear");
+      }
+    }
+    disappear() {
+      if (this.channel) {
+        this.present = false;
+        this.channel.perform("disappear");
+      }
+    }
+    performOperations(data) {
+      if (data.cableReady) {
+        CableReady__default["default"].perform(data.operations);
+      }
+    }
+    createSubscription() {
+      if (!this.consumer) {
+        console.error("The `cubicle-element` helper cannot connect without an ActionCable consumer.");
+        return;
+      }
+      return this.consumer.subscriptions.create({
+        channel: this.channelName,
+        identifier: this.getAttribute("identifier"),
+        element_id: this.id,
+        scope: this.getAttribute("scope"),
+        exclude_current_user: this.getAttribute("exclude-current-user") === "true"
+      }, {
+        connected: () => {
+          this.install();
+        },
+        disconnected: () => {
+          this.disappear();
+          this.uninstall();
+        },
+        rejected: () => {
+          this.uninstall();
+        },
+        received: this.performOperations.bind(this)
+      });
+    }
+    get channelName() {
+      return "Cubism::PresenceChannel";
+    }
+  }
+  customElements.define("cubicle-element", Cubicle);
+}));

data/app/assets/javascripts/cubism.umd.min.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(require("cable_ready")):"function"==typeof define&&define.amd?define(["cable_ready"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).CableReady)}(this,(function(e){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=t(e);class r extends e.SubscribingElement{constructor(){super();this.attachShadow({mode:"open"}).innerHTML="\n<style>\n  :host {\n    display: block;\n  }\n</style>\n<slot></slot>\n",this.triggerRoot=this,this.present=!1}async connectedCallback(){this.preview||(this.appear=function(e,t){let i;return(...r)=>{clearTimeout(i),i=setTimeout((()=>e.apply(this,r)),t)}}(this.appear.bind(this),50),this.appearTriggers=this.getAttribute("appear-trigger")?this.getAttribute("appear-trigger").split(","):[],this.disappearTriggers=this.getAttribute("disappear-trigger")?this.getAttribute("disappear-trigger").split(","):[],this.triggerRootSelector=this.getAttribute("trigger-root"),this.consumer=await i.default.consumer,this.channel=this.createSubscription(),this.appearanceIntersectionObserver=new IntersectionObserver(((e,t)=>{e.forEach((e=>{e.target===this.triggerRoot&&(e.isIntersecting?this.present||this.appear():this.present&&this.disappear())}))}),{threshold:0}),this.mutationObserver=new MutationObserver(((e,t)=>{if(this.triggerRootSelector)for(const t of e){const e=document.querySelector(this.triggerRootSelector);e&&(this.uninstall(),this.triggerRoot=e,this.install())}this.mutationObserver.disconnect()})),this.mutationObserver.observe(document,{subtree:!0,childList:!0}))}disconnectedCallback(){this.disappear(),super.disconnectedCallback()}install(){this.appearTriggers.includes("connect")&&this.appear(),this.appearTriggers.filter((e=>"intersect"===e)).forEach((()=>{this.appearanceIntersectionObserver.observe(this.triggerRoot)})),this.appearTriggers.filter((e=>"connect"!==e&&"intersect"!==e)).forEach((e=>{this.triggerRoot.addEventListener(e,this.appear.bind(this))})),this.disappearTriggers.filter((e=>"disconnect"!==e&&"intersect"!==e)).forEach((e=>{this.triggerRoot.addEventListener(e,this.disappear.bind(this))})),this.disappearTriggers.filter((e=>"intersect"===e)).forEach((()=>{}))}uninstall(){this.appearTriggers.filter((e=>"intersect"===e)).forEach((()=>{this.appearanceIntersectionObserver.unobserve(this.triggerRoot)})),this.appearTriggers.filter((e=>"connect"!==e&&"intersect"!==e)).forEach((e=>{this.triggerRoot.removeEventListener(e,this.appear.bind(this))})),this.disappearTriggers.filter((e=>"intersect"===e)).forEach((()=>{})),this.disappearTriggers.filter((e=>"disconnect"!==e&&"intersect"!==e)).forEach((e=>{this.triggerRoot.removeEventListener(e,this.disappear.bind(this))}))}appear(){this.channel&&(this.present=!0,this.channel.perform("appear"))}disappear(){this.channel&&(this.present=!1,this.channel.perform("disappear"))}performOperations(e){e.cableReady&&i.default.perform(e.operations)}createSubscription(){if(this.consumer)return this.consumer.subscriptions.create({channel:this.channelName,identifier:this.getAttribute("identifier"),element_id:this.id,scope:this.getAttribute("scope"),exclude_current_user:"true"===this.getAttribute("exclude-current-user")},{connected:()=>{this.install()},disconnected:()=>{this.disappear(),this.uninstall()},rejected:()=>{this.uninstall()},received:this.performOperations.bind(this)});console.error("The `cubicle-element` helper cannot connect without an ActionCable consumer.")}get channelName(){return"Cubism::PresenceChannel"}}customElements.define("cubicle-element",r)}));
+//# sourceMappingURL=cubism.umd.min.js.map

data/app/assets/javascripts/cubism.umd.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cubism.umd.min.js","sources":["../../../javascript/elements/cubicle.js","../../../node_modules/cable_ready/javascript/utils.js","../../../javascript/elements/index.js"],"sourcesContent":["/* eslint-disable no-undef */\nimport CableReady, { SubscribingElement } from 'cable_ready'\nimport { debounce } from 'cable_ready/javascript/utils'\n\nexport class Cubicle extends SubscribingElement {\n  constructor () {\n    super()\n    const shadowRoot = this.attachShadow({ mode: 'open' })\n    shadowRoot.innerHTML = `\n<style>\n  :host {\n    display: block;\n  }\n</style>\n<slot></slot>\n`\n\n    this.triggerRoot = this\n    this.present = false\n  }\n\n  async connectedCallback () {\n    if (this.preview) return\n\n    this.appear = debounce(this.appear.bind(this), 50)\n\n    this.appearTriggers = this.getAttribute('appear-trigger')\n      ? this.getAttribute('appear-trigger').split(',')\n      : []\n    this.disappearTriggers = this.getAttribute('disappear-trigger')\n      ? this.getAttribute('disappear-trigger').split(',')\n      : []\n    this.triggerRootSelector = this.getAttribute('trigger-root')\n\n    this.consumer = await CableReady.consumer\n\n    this.channel = this.createSubscription()\n\n    this.appearanceIntersectionObserver = new IntersectionObserver(\n      (entries, observer) => {\n        entries.forEach(entry => {\n          if (entry.target !== this.triggerRoot) return\n          if (entry.isIntersecting) {\n            if (!this.present) {\n              this.appear()\n            }\n          } else {\n            if (this.present) {\n              this.disappear()\n            }\n          }\n        })\n      },\n      { threshold: 0 }\n    )\n\n    this.mutationObserver = new MutationObserver((mutationsList, observer) => {\n      if (this.triggerRootSelector) {\n        // eslint-disable-next-line no-unused-vars\n        for (const mutation of mutationsList) {\n          const root = document.querySelector(this.triggerRootSelector)\n          if (root) {\n            this.uninstall()\n            this.triggerRoot = root\n            this.install()\n          }\n        }\n      }\n      this.mutationObserver.disconnect()\n    })\n\n    this.mutationObserver.observe(document, {\n      subtree: true,\n      childList: true\n    })\n  }\n\n  disconnectedCallback () {\n    this.disappear()\n    super.disconnectedCallback()\n  }\n\n  install () {\n    if (this.appearTriggers.includes('connect')) {\n      this.appear()\n    }\n\n    this.appearTriggers\n      .filter(eventName => eventName === 'intersect')\n      .forEach(() => {\n        this.appearanceIntersectionObserver.observe(this.triggerRoot)\n      })\n\n    this.appearTriggers\n      .filter(eventName => eventName !== 'connect' && eventName !== 'intersect')\n      .forEach(eventName => {\n        this.triggerRoot.addEventListener(eventName, this.appear.bind(this))\n      })\n\n    this.disappearTriggers\n      .filter(\n        eventName => eventName !== 'disconnect' && eventName !== 'intersect'\n      )\n      .forEach(eventName => {\n        this.triggerRoot.addEventListener(eventName, this.disappear.bind(this))\n      })\n\n    this.disappearTriggers\n      .filter(eventName => eventName === 'intersect')\n      .forEach(() => {})\n  }\n\n  uninstall () {\n    this.appearTriggers\n      .filter(eventName => eventName === 'intersect')\n      .forEach(() => {\n        this.appearanceIntersectionObserver.unobserve(this.triggerRoot)\n      })\n\n    this.appearTriggers\n      .filter(eventName => eventName !== 'connect' && eventName !== 'intersect')\n      .forEach(eventName => {\n        this.triggerRoot.removeEventListener(eventName, this.appear.bind(this))\n      })\n\n    this.disappearTriggers\n      .filter(eventName => eventName === 'intersect')\n      .forEach(() => {})\n\n    this.disappearTriggers\n      .filter(\n        eventName => eventName !== 'disconnect' && eventName !== 'intersect'\n      )\n      .forEach(eventName => {\n        this.triggerRoot.removeEventListener(\n          eventName,\n          this.disappear.bind(this)\n        )\n      })\n  }\n\n  appear () {\n    if (this.channel) {\n      this.present = true\n      this.channel.perform('appear')\n    }\n  }\n\n  disappear () {\n    if (this.channel) {\n      this.present = false\n      this.channel.perform('disappear')\n    }\n  }\n\n  performOperations (data) {\n    if (data.cableReady) {\n      CableReady.perform(data.operations)\n    }\n  }\n\n  createSubscription () {\n    if (!this.consumer) {\n      console.error(\n        'The `cubicle-element` helper cannot connect without an ActionCable consumer.'\n      )\n      return\n    }\n\n    return this.consumer.subscriptions.create(\n      {\n        channel: this.channelName,\n        identifier: this.getAttribute('identifier'),\n        element_id: this.id,\n        scope: this.getAttribute('scope'),\n        exclude_current_user:\n          this.getAttribute('exclude-current-user') === 'true'\n      },\n      {\n        connected: () => {\n          this.install()\n        },\n        disconnected: () => {\n          this.disappear()\n          this.uninstall()\n        },\n        rejected: () => {\n          this.uninstall()\n        },\n        received: this.performOperations.bind(this)\n      }\n    )\n  }\n\n  get channelName () {\n    return 'Cubism::PresenceChannel'\n  }\n}\n","import { inputTags, textInputTypes } from './enums'\nimport activeElement from './active_element'\n\n// Indicates if the passed element is considered a text input.\n//\nconst isTextInput = element => {\n  return inputTags[element.tagName] && textInputTypes[element.type]\n}\n\n// Assigns focus to the appropriate element... preferring the explicitly passed selector\n//\n// * selector - a CSS selector for the element that should have focus\n//\nconst assignFocus = selector => {\n  const element =\n    selector && selector.nodeType === Node.ELEMENT_NODE\n      ? selector\n      : document.querySelector(selector)\n  const focusElement = element || activeElement.element\n  if (focusElement && focusElement.focus) focusElement.focus()\n}\n\n// Dispatches an event on the passed element\n//\n// * element - the element\n// * name - the name of the event\n// * detail - the event detail\n//\nconst dispatch = (element, name, detail = {}) => {\n  const init = { bubbles: true, cancelable: true, detail: detail }\n  const evt = new CustomEvent(name, init)\n  element.dispatchEvent(evt)\n  if (window.jQuery) window.jQuery(element).trigger(name, detail)\n}\n\n// Accepts an xPath query and returns the element found at that position in the DOM\n//\nconst xpathToElement = xpath => {\n  return document.evaluate(\n    xpath,\n    document,\n    null,\n    XPathResult.FIRST_ORDERED_NODE_TYPE,\n    null\n  ).singleNodeValue\n}\n\n// Return an array with the class names to be used\n//\n// * names - could be a string or an array of strings for multiple classes.\n//\nconst getClassNames = names => Array(names).flat()\n\n// Perform operation for either the first or all of the elements returned by CSS selector\n//\n// * operation - the instruction payload from perform\n// * callback - the operation function to run for each element\n//\nconst processElements = (operation, callback) => {\n  Array.from(\n    operation.selectAll ? operation.element : [operation.element]\n  ).forEach(callback)\n}\n\n// camelCase to kebab-case\n//\nconst kebabize = str => {\n  return str\n    .split('')\n    .map((letter, idx) => {\n      return letter.toUpperCase() === letter\n        ? `${idx !== 0 ? '-' : ''}${letter.toLowerCase()}`\n        : letter\n    })\n    .join('')\n}\n\n// Provide a standardized pipeline of checks and modifications to all operations based on provided options\n// Currently skips execution if cancelled and implements an optional delay\n//\nconst operate = (operation, callback) => {\n  if (!operation.cancel) {\n    operation.delay ? setTimeout(callback, operation.delay) : callback()\n    return true\n  }\n  return false\n}\n\n// Dispatch life-cycle events with standardized naming\nconst before = (target, operation) =>\n  dispatch(\n    target,\n    `cable-ready:before-${kebabize(operation.operation)}`,\n    operation\n  )\n\nconst after = (target, operation) =>\n  dispatch(\n    target,\n    `cable-ready:after-${kebabize(operation.operation)}`,\n    operation\n  )\n\nfunction debounce (func, timeout) {\n  let timer\n  return (...args) => {\n    clearTimeout(timer)\n    timer = setTimeout(() => func.apply(this, args), timeout)\n  }\n}\n\nfunction handleErrors (response) {\n  if (!response.ok) throw Error(response.statusText)\n  return response\n}\n\n// A proxy method to wrap a fetch call in error handling\n//\n// * url - the URL to fetch\n// * additionalHeaders - an object of additional headers passed to fetch\n//\nasync function graciouslyFetch (url, additionalHeaders) {\n  try {\n    const response = await fetch(url, {\n      headers: {\n        'X-REQUESTED-WITH': 'XmlHttpRequest',\n        ...additionalHeaders\n      }\n    })\n    if (response == undefined) return\n\n    handleErrors(response)\n\n    return response\n  } catch (e) {\n    console.error(`Could not fetch ${url}`)\n  }\n}\n\nexport {\n  isTextInput,\n  assignFocus,\n  dispatch,\n  xpathToElement,\n  getClassNames,\n  processElements,\n  operate,\n  before,\n  after,\n  debounce,\n  handleErrors,\n  graciouslyFetch\n}\n","/* global customElements */\n\nimport { Cubicle } from './cubicle'\n\nexport * from './cubicle'\n\ncustomElements.define('cubicle-element', Cubicle)\n"],"names":["Cubicle","SubscribingElement","constructor","super","this","attachShadow","mode","innerHTML","triggerRoot","present","async","preview","appear","func","timeout","timer","args","clearTimeout","setTimeout","apply","debounce","bind","appearTriggers","getAttribute","split","disappearTriggers","triggerRootSelector","consumer","CableReady","channel","createSubscription","appearanceIntersectionObserver","IntersectionObserver","entries","observer","forEach","entry","target","isIntersecting","disappear","threshold","mutationObserver","MutationObserver","mutationsList","mutation","root","document","querySelector","uninstall","install","disconnect","observe","subtree","childList","disconnectedCallback","includes","filter","eventName","addEventListener","unobserve","removeEventListener","perform","performOperations","data","cableReady","operations","subscriptions","create","channelName","identifier","element_id","id","scope","exclude_current_user","connected","disconnected","rejected","received","console","error","customElements","define"],"mappings":"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"}

data/app/channels/cubism/presence_channel.rb

@@ -3,7 +3,7 @@ class Cubism::PresenceChannel < ActionCable::Channel::Base
 
   def subscribed
     if resource.present?
-      stream_from params[:element_id]
+      stream_from element_id
       resource.cubicle_element_ids << element_id
       resource.excluded_user_id_for_element_id[element_id] = user.id if exclude_current_user?
     else
@@ -20,11 +20,11 @@ class Cubism::PresenceChannel < ActionCable::Channel::Base
   end
 
   def appear
-    resource.present_users.add(user.id)
+    resource.set_present_users_for_scope(resource.present_users_for_scope(scope).add(user.id), scope) if scope
   end
 
   def disappear
-    resource.present_users.remove(user.id)
+    resource.set_present_users_for_scope(resource.present_users_for_scope(scope).delete(user.id), scope) if scope
   end
 
   private
@@ -35,7 +35,15 @@ class Cubism::PresenceChannel < ActionCable::Channel::Base
   end
 
   def user
-    GlobalID::Locator.locate_signed(params[:user])
+    block_container&.user
+  end
+
+  def scope
+    block_container&.scope
+  end
+
+  def block_container
+    Cubism.block_store[element_id]
   end
 
   def exclude_current_user?
@@ -43,7 +51,8 @@ class Cubism::PresenceChannel < ActionCable::Channel::Base
   end
 
   def element_id
-    params[:element_id]
+    /cubicle-(?<element_id>.+)/ =~ params[:element_id]
+    element_id
   end
 
   def url

data/app/helpers/cubism_helper.rb

@@ -1,31 +1,29 @@
 module CubismHelper
   include CableReady::StreamIdentifier
 
-  def cubicle_for(resource, user, html_options: {}, appear_trigger: :connect, disappear_trigger: nil, trigger_root: nil, exclude_current_user: true, &block)
-    filename, lineno = block.source_location
+  def cubicle_for(resource, user, scope: "", html_options: {}, appear_trigger: :connect, disappear_trigger: nil, trigger_root: nil, exclude_current_user: true, &block)
     block_location = block.source_location.join(":")
-    resource_user_key = "#{resource.to_gid}:#{user.to_gid}"
-    digested_block_key = ActiveSupport::Digest.hexdigest("#{block_location}:#{resource_user_key}")
+    block_source = Cubism::BlockSource.find_or_create(
+      location: block_location,
+      view_context: self
+    )
+
+    resource_gid = resource.to_gid.to_s
 
-    # the store item (identified by block location, resource, and user) might already be present
-    store_item = Cubism.store[digested_block_key] || Cubism::BlockStoreItem.new(
+    block_container = Cubism::BlockContainer.new(
       block_location: block_location,
-      resource_gid: resource.to_gid.to_s,
-      user_gid: user.to_gid.to_s
+      block_source: block_source,
+      resource_gid: resource_gid,
+      user_gid: user.to_gid.to_s,
+      scope: scope
     )
 
-    if Cubism.store[digested_block_key]&.block_source.blank? && !block_location.start_with?("inline template")
-      lines = File.readlines(filename)[lineno - 1..]
-
-      preprocessor = Cubism::Preprocessor.new(source: lines.join.squish, view_context: self)
-      store_item.block_source = preprocessor.process
-    end
+    digested_block_key = block_container.digest
 
-    Cubism.store[digested_block_key] = store_item
+    Cubism.block_store.fetch(digested_block_key, block_container)
 
     tag.cubicle_element(
-      identifier: signed_stream_identifier(resource.to_gid.to_s),
-      user: user.to_sgid.to_s,
+      identifier: signed_stream_identifier(resource_gid),
       "appear-trigger": Array(appear_trigger).join(","),
       "disappear-trigger": disappear_trigger,
       "trigger-root": trigger_root,

data/app/models/concerns/cubism/presence.rb

@@ -2,7 +2,7 @@ module Cubism::Presence
   extend ActiveSupport::Concern
 
   included do
-    kredis_set :present_users, after_change: :stream_presence
+    kredis_hash :present_users, after_change: :stream_presence
     kredis_set :cubicle_element_ids
     kredis_hash :excluded_user_id_for_element_id
   end
@@ -11,8 +11,16 @@ module Cubism::Presence
     Cubism::Broadcaster.new(resource: self).broadcast
   end
 
-  def present_users_for_element_id(element_id)
-    users = Cubism.user_class.find(present_users.members)
+  def present_users_for_scope(scope = "")
+    present_users[scope].present? ? Marshal.load(present_users[scope]) : Set.new
+  end
+
+  def set_present_users_for_scope(user_ids, scope = "")
+    present_users[scope] = Marshal.dump(Set.new(user_ids))
+  end
+
+  def present_users_for_element_id_and_scope(element_id, scope = "")
+    users = Cubism.user_class.find(present_users_for_scope(scope).to_a)
     users.reject! { |user| user.id == excluded_user_id_for_element_id[element_id].to_i }
 
     users

data/bin/rails

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+# This command will automatically be run when you run "rails" with Rails gems
+# installed from the root of your application.
+
+ENGINE_ROOT = File.expand_path('..', __dir__)
+ENGINE_PATH = File.expand_path('../lib/cubism/engine', __dir__)
+APP_PATH = File.expand_path('../test/dummy/config/application', __dir__)
+
+# Set up gems listed in the Gemfile.
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../Gemfile', __dir__)
+require "bundler/setup" if File.exist?(ENV["BUNDLE_GEMFILE"])
+
+require "rails/all"
+require "rails/engine/commands"

data/bin/standardize

@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+
+bundle exec standardrb --fix
+yarn format

data/bin/test

@@ -0,0 +1,5 @@
+#!/usr/bin/env ruby
+$: << File.expand_path("../test", __dir__)
+
+require "bundler/setup"
+require "rails/plugin/test"

data/cubism.gemspec

@@ -0,0 +1,36 @@
+require_relative "lib/cubism/version"
+
+Gem::Specification.new do |spec|
+  spec.name = "cubism"
+  spec.version = Cubism::VERSION
+  spec.authors = ["Julian Rubisch"]
+  spec.email = ["julian@julianrubisch.at"]
+  spec.homepage = "https://github.com/julianrubisch/cubism"
+  spec.summary = "Lightweight Resource-Based Presence Solution with CableReady"
+  spec.description = "Lightweight Resource-Based Presence Solution with CableReady"
+  spec.license = "MIT"
+
+  spec.metadata["homepage_uri"] = spec.homepage
+  spec.metadata["source_code_uri"] = "https://github.com/julianrubisch/cubism.git"
+  # spec.metadata["changelog_uri"] = "TODO: Put your gem's CHANGELOG.md URL here."
+
+  spec.files = Dir[
+    "lib/**/*.rb",
+    "app/**/*.rb",
+    "app/assets/javascripts/*",
+    "bin/*",
+    "[A-Z]*"
+  ]
+
+  spec.test_files = Dir["test/**/*.rb"]
+
+  spec.add_dependency "rails", ">= 6.0"
+  spec.add_dependency "kredis", ">= 0.4"
+  spec.add_dependency "cable_ready", "= 5.0.0.pre9"
+
+  spec.add_development_dependency "standard"
+  spec.add_development_dependency "nokogiri"
+  spec.add_development_dependency "mocha"
+  spec.add_development_dependency "appraisal"
+  spec.add_development_dependency "sqlite3"
+end

data/cubism.gemspec~

@@ -0,0 +1,28 @@
+require_relative "lib/cubism/version"
+
+Gem::Specification.new do |spec|
+  spec.name = "cubism"
+  spec.version = Cubism::VERSION
+  spec.authors = ["Julian Rubisch"]
+  spec.email = ["julian@julianrubisch.at"]
+  spec.homepage = "https://github.com/julianrubisch/cubism"
+  spec.summary = "Lightweight Resource-Based Presence Solution with CableReady"
+  spec.description = "Lightweight Resource-Based Presence Solution with CableReady"
+  spec.license = "MIT"
+
+  spec.metadata["homepage_uri"] = spec.homepage
+  spec.metadata["source_code_uri"] = "https://github.com/julianrubisch/cubism.git"
+  # spec.metadata["changelog_uri"] = "TODO: Put your gem's CHANGELOG.md URL here."
+
+  spec.files = Dir["{app,config,db,lib}/**/*", "MIT-LICENSE", "Rakefile", "README.md"]
+
+  spec.add_dependency "rails", ">= 6.0"
+  spec.add_dependency "kredis", ">= 0.4"
+  spec.add_dependency "cable_ready", "= 5.0.0.pre8"
+
+  spec.add_development_dependency "standard"
+  spec.add_development_dependency "nokogiri"
+  spec.add_development_dependency "mocha"
+  spec.add_development_dependency "appraisal"
+  spec.add_development_dependency "sqlite3"
+end

data/lib/cubism/broadcaster.rb

@@ -13,18 +13,25 @@ module Cubism
 
     def broadcast
       resource.cubicle_element_ids.to_a.each do |element_id|
-        /cubicle-(?<block_key>.+)/ =~ element_id
-        store_item = Cubism.store[block_key]
+        block_container = Cubism.block_store[element_id]
 
-        next if store_item.blank?
+        next if block_container.blank?
 
-        html = ApplicationController.render(inline: store_item.block_source, locals: {users: resource.present_users_for_element_id(element_id)})
+        present_users = resource.present_users_for_element_id_and_scope(element_id, block_container.scope)
+
+        block_source = block_container.block_source
+
+        html = ApplicationController.render(inline: block_source.source, locals: {"#{block_source.variable_name}": present_users})
+
+        selector = "cubicle-element#cubicle-#{element_id}[identifier='#{signed_stream_identifier(resource.to_global_id.to_s)}']"
 
         cable_ready[element_id].inner_html(
-          selector: "cubicle-element##{element_id}[identifier='#{signed_stream_identifier(resource.to_global_id.to_s)}']",
+          selector: selector,
           html: html
-        ).broadcast
+        )
       end
+
+      cable_ready.broadcast
     end
   end
 end