shimmer 0.0.4 → 0.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 32060fa00134259da2eb2723aa0ba4e14a95bbd85f9b214797e76778f2c1500b
-  data.tar.gz: 18c942b4f19f582e7ae45a89aad5b03d6192201ea0849e14bf9e8f567dccc069
+  metadata.gz: 419d4bba740070b286202f099a64f31929b029505bc3411a9db8b922d51e0eec
+  data.tar.gz: 5f75ac2e0c8ac3fc82335efe2dd8bd98270f9506433bfa0e894369e952fb6aef
 SHA512:
-  metadata.gz: 752d5f326fcf637ec3fa4d37e3cd6c5a9df88d7c408697ad7c3153b65f75ef1c8fc7f6cbeb8e29d44efe25b314a209a3bf615bd30146f704beb05cd1b156ca52
-  data.tar.gz: f8465c8a123e351a84e970fcbb6629e79a0b2759095c6378f248255cb41fdacdbb0dbce46e8751438c0737669d22e2eb8dfe8a9afb3574adfc0d0e031976b716
+  metadata.gz: ec203c95a4fc2088731aa269c0c27577fbd59fa4070d972d6ad066d469b6203b54fb8ffafedb4295d7387e981d6a50a87ca981f8c92c9f5c624d45aed851b906
+  data.tar.gz: cdae8b03095d4f3c7f38f5ccbe47864ab41ade50bf1e2d45fe3da2e112e2a11e3d733ed73d2b581a833be9d6f5f263795aff008ccfcd5da51d45c52227a560c9

data/lib/shimmer/utils/remote_navigation.rb

@@ -6,7 +6,7 @@ module Shimmer
 
     included do
       def ui
-        @ui ||= RemoteNavigator.new turbo_stream: turbo_stream
+        @ui ||= RemoteNavigator.new(self)
       end
 
       def default_render
@@ -17,7 +17,7 @@ module Shimmer
       end
 
       helper_method :modal_path
-      def modal_path(url, id: nil, size: nil, close: false)
+      def modal_path(url, id: nil, size: nil, close: true)
         "javascript:ui.modal.open(#{{url: url, id: id, size: size, close: close}.to_json})"
       end
 
@@ -26,6 +26,11 @@ module Shimmer
         "javascript:ui.modal.close(#{{id: id}.to_json})"
       end
 
+      helper_method :popover_path
+      def popover_path(url, id: nil, selector: nil, placement: nil)
+        "javascript:ui.popover.open(#{{url: url, id: id, selector: selector, placement: placement}.compact.to_json})"
+      end
+
       def shimmer_request?
         request.headers["X-Shimmer"].present?
       end
@@ -42,10 +47,10 @@ module Shimmer
   end
 
   class RemoteNavigator
-    attr_reader :turbo_stream
+    delegate :polymorphic_path, to: :@controller
 
-    def initialize(turbo_stream:)
-      @turbo_stream = turbo_stream
+    def initialize(controller)
+      @controller = controller
     end
 
     def queued_updates
@@ -76,18 +81,32 @@ module Shimmer
       queued_updates.push turbo_stream.remove(id)
     end
 
-    def open_modal(path)
-      run_javascript "ui.modal.open('#{path}')"
+    def open_modal(path, id: nil, size: nil, close: true)
+      run_javascript "ui.modal.open(#{{url: url, id: id, size: size, close: close}.to_json})"
     end
 
     def close_modal
       run_javascript "ui.modal.close()"
     end
 
+    def open_popover(path, selector:, placement: nil)
+      run_javascript "ui.popover.open(#{{url: url, selector: selector, placement: placement}.to_json})"
+    end
+
+    def close_popover
+      run_javascript "ui.popover.close()"
+    end
+
     def navigate_to(path)
       close_modal
       path = polymorphic_path(path) unless path.is_a?(String)
       run_javascript "Turbo.visit('#{path}')"
     end
+
+    private
+
+    def turbo_stream
+      @controller.send(:turbo_stream)
+    end
   end
 end

data/lib/shimmer/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Shimmer
-  VERSION = "0.0.4"
+  VERSION = "0.0.5"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nerdgeschoss/shimmer",
-  "version": "0.0.1",
+  "version": "4.0.0",
   "description": "Simple application development in Rails",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -22,6 +22,8 @@
   ],
   "license": "MIT",
   "dependencies": {
+    "@hotwired/stimulus": "^3.0.1",
+    "@popperjs/core": "^2.11.0",
     "@rails/request.js": "^0.0.6"
   },
   "devDependencies": {

data/rollup.config.js

@@ -4,7 +4,7 @@ import pkg from "./package.json";
 
 export default {
   input: "./src/index.ts",
-  external: ["@rails/request.js"],
+  external: ["@rails/request.js", "@hotwired/stimulus", "@popperjs/core"],
   plugins: [
     cleaner({
       targets: ["./dist/"],

data/src/controllers/remote-navigation.ts

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  connect(): void {
+    const script = (this.element as HTMLDivElement).innerText;
+    (0, eval)(script);
+    this.element.remove();
+  }
+}

data/src/index.ts

@@ -1,17 +1,32 @@
-declare global {
-  interface Window {
-    ui: typeof ui;
-  }
-}
-
+import type { Application } from "@hotwired/stimulus";
 import { ModalPresenter } from "./modal";
+import { PopoverPresenter } from "./popover";
+import RemoteNavigationController from "./controllers/remote-navigation";
 import "./touch";
 
-export const ui = {
-  modal: new ModalPresenter(),
-};
-
-window.ui = ui;
-
 export { registerServiceWorker } from "./serviceworker";
 export { currentLocale } from "./locale";
+
+declare global {
+  interface Window {
+    ui?: {
+      modal: ModalPresenter;
+      popover: PopoverPresenter;
+    };
+  }
+}
+
+export async function start({
+  application,
+}: {
+  application: Application;
+}): Promise<void> {
+  const root = document.createElement("div");
+  root.id = "shimmer";
+  document.body.append(root);
+  application.register("remote-navigation", RemoteNavigationController);
+  window.ui = {
+    modal: new ModalPresenter(),
+    popover: new PopoverPresenter(),
+  };
+}

data/src/modal.ts

@@ -1,4 +1,4 @@
-import { get } from "@rails/request.js";
+import { loaded, createElement, nextFrame, getHTML } from "./util";
 
 export interface ModalOptions {
   id?: string;
@@ -7,33 +7,6 @@ export interface ModalOptions {
   close?: boolean;
 }
 
-const loaded: Promise<void> = new Promise((res) => {
-  document.addEventListener("DOMContentLoaded", () => {
-    res();
-  });
-});
-
-async function nextFrame(): Promise<void> {
-  return new Promise((res) => {
-    setTimeout(res, 10);
-  });
-}
-
-async function getHTML(url: string): Promise<string> {
-  const response = await get(url, { headers: { "X-Shimmer": "true" } });
-  if (response.ok) {
-    return await response.response.text();
-  }
-  return "";
-}
-
-function createElement(parent: HTMLElement, className: string): HTMLDivElement {
-  const element = document.createElement("div");
-  element.className = className;
-  parent.append(element);
-  return element;
-}
-
 export class ModalPresenter {
   private modals: Record<string, Modal> = {};
 

data/src/popover.ts

@@ -0,0 +1,89 @@
+import { Instance as Popper, createPopper, Placement } from "@popperjs/core";
+import { createElement, getHTML } from "./util";
+
+export interface PopoverOptions {
+  id?: string;
+  url: string;
+  selector?: HTMLElement | string;
+  placement?: Placement;
+}
+
+export class PopoverPresenter {
+  private popovers: Record<string, Popover> = {};
+  private lastClickedElement?: HTMLElement;
+
+  constructor() {
+    document.addEventListener("click", this.trackElement);
+  }
+
+  async open(options: PopoverOptions): Promise<void> {
+    const id = (options.id = options.id ?? "default-popover");
+    options.selector = options.selector ?? this.lastClickedElement;
+    (this.popovers[id] = new Popover()).open(options);
+  }
+
+  async close({ id }: { id?: string } = {}): Promise<void> {
+    let promise: Promise<unknown> | null = null;
+    if (id) {
+      promise = this.popovers[id]?.close();
+      delete this.popovers[id];
+    } else {
+      promise = Promise.all(Object.values(this.popovers).map((e) => e.close()));
+      this.popovers = {};
+    }
+    await promise;
+  }
+
+  private trackElement = (event: MouseEvent): void => {
+    this.lastClickedElement = event.target as HTMLElement;
+  };
+}
+
+export class Popover {
+  private popper?: Popper;
+  private popoverDiv?: HTMLDivElement;
+
+  async open({ url, selector, placement }: PopoverOptions): Promise<void> {
+    const root =
+      typeof selector === "string"
+        ? document.querySelector(selector)
+        : selector;
+    if (!root) {
+      return;
+    }
+    const popoverDiv = createElement(document.body, "popover");
+    const arrow = createElement(popoverDiv, "popover__arrow");
+    arrow.setAttribute("data-popper-arrow", "true");
+    const content = createElement(popoverDiv, "popover__content");
+    content.innerHTML = await getHTML(url);
+    this.popper = createPopper(root, popoverDiv, {
+      placement: placement ?? "auto",
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, 8],
+          },
+        },
+      ],
+    });
+    this.popoverDiv = popoverDiv;
+    document.addEventListener("click", this.clickOutside);
+  }
+
+  async close(): Promise<void> {
+    this.popper?.destroy();
+    this.popper = undefined;
+    document.removeEventListener("click", this.clickOutside);
+    this.popoverDiv?.remove();
+    this.popoverDiv = undefined;
+  }
+
+  private clickOutside = (event: MouseEvent): void => {
+    if (this.popoverDiv?.contains(event.target as HTMLElement)) {
+      return;
+    }
+    event.preventDefault();
+    this.close();
+  };
+}

data/src/util.ts

@@ -0,0 +1,31 @@
+import { get } from "@rails/request.js";
+
+export async function getHTML(url: string): Promise<string> {
+  const response = await get(url, { headers: { "X-Shimmer": "true" } });
+  if (response.ok) {
+    return await response.response.text();
+  }
+  return "";
+}
+
+export const loaded: Promise<void> = new Promise((res) => {
+  document.addEventListener("DOMContentLoaded", () => {
+    res();
+  });
+});
+
+export async function nextFrame(): Promise<void> {
+  return new Promise((res) => {
+    setTimeout(res, 10);
+  });
+}
+
+export function createElement(
+  parent: HTMLElement,
+  className: string
+): HTMLDivElement {
+  const element = document.createElement("div");
+  element.className = className;
+  parent.append(element);
+  return element;
+}

data/yarn.lock

@@ -17,6 +17,11 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@hotwired/stimulus@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@hotwired/stimulus/-/stimulus-3.0.1.tgz#141f15645acaa3b133b7c247cad58ae252ffae85"
+  integrity sha512-oHsJhgY2cip+K2ED7vKUNd2P+BEswVhrCYcJ802DSsblJFv7mPFVk3cQKvm2vHgHeDVdnj7oOKrBbzp1u8D+KA==
+
 "@humanwhocodes/config-array@^0.9.2":
   version "0.9.2"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.2.tgz#68be55c737023009dfc5fe245d51181bb6476914"
@@ -52,6 +57,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@popperjs/core@^2.11.0":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.0.tgz#6734f8ebc106a0860dff7f92bf90df193f0935d7"
+  integrity sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==
+
 "@rails/request.js@^0.0.6":
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/@rails/request.js/-/request.js-0.0.6.tgz#5f0347a9f363e50ec45118c7134080490cda81d8"

metadata

@@ -1,16 +1,16 @@
 --- !ruby/object:Gem::Specification
 name: shimmer
 version: !ruby/object:Gem::Version
-  version: 0.0.4
+  version: 0.0.5
 platform: ruby
 authors:
 - Jens Ravens
-autorequire:
+autorequire: 
 bindir: exe
 cert_chain: []
-date: 2021-12-21 00:00:00.000000000 Z
+date: 2021-12-22 00:00:00.000000000 Z
 dependencies: []
-description:
+description: 
 email:
 - jens@nerdgeschoss.de
 executables: []
@@ -48,12 +48,14 @@ files:
 - lib/shimmer/version.rb
 - package.json
 - rollup.config.js
-- shimmer.gemspec
+- src/controllers/remote-navigation.ts
 - src/index.ts
 - src/locale.ts
 - src/modal.ts
+- src/popover.ts
 - src/serviceworker.ts
 - src/touch.ts
+- src/util.ts
 - tsconfig.json
 - typings.d.ts
 - yarn.lock
@@ -63,7 +65,7 @@ licenses:
 metadata:
   homepage_uri: https://github.com/nerdgeschoss/shimmer
   source_code_uri: https://github.com/nerdgeschoss/shimmer
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -79,7 +81,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubygems_version: 3.2.32
-signing_key:
+signing_key: 
 specification_version: 4
 summary: Shimmer brings all the bells and whistles of a hotwired application, right
   from the start.

data/shimmer.gemspec

@@ -1,35 +0,0 @@
-# frozen_string_literal: true
-
-require_relative "lib/shimmer/version"
-
-Gem::Specification.new do |spec|
-  spec.name = "shimmer"
-  spec.version = Shimmer::VERSION
-  spec.authors = ["Jens Ravens"]
-  spec.email = ["jens@nerdgeschoss.de"]
-
-  spec.summary = "Shimmer brings all the bells and whistles of a hotwired application, right from the start."
-  spec.homepage = "https://github.com/nerdgeschoss/shimmer"
-  spec.license = "MIT"
-  spec.required_ruby_version = ">= 2.6.0"
-
-  spec.metadata["homepage_uri"] = spec.homepage
-  spec.metadata["source_code_uri"] = spec.homepage
-
-  # Specify which files should be added to the gem when it is released.
-  # The `git ls-files -z` loads the files in the RubyGem that have been added into git.
-  spec.files = Dir.chdir(File.expand_path(__dir__)) do
-    `git ls-files -z`.split("\x0").reject do |f|
-      (f == __FILE__) || f.match(%r{\A(?:(?:test|spec|features)/|\.(?:git|travis|circleci)|appveyor)})
-    end
-  end
-  spec.bindir = "exe"
-  spec.executables = spec.files.grep(%r{\Aexe/}) { |f| File.basename(f) }
-  spec.require_paths = ["lib"]
-
-  # Uncomment to register a new dependency of your gem
-  # spec.add_dependency "example-gem", "~> 1.0"
-
-  # For more information and examples about making a new gem, checkout our
-  # guide at: https://bundler.io/guides/creating_gem.html
-end