ultimate_turbo_modal 1.7.0 → 2.0.0

data/javascript/modal_controller.js

@@ -0,0 +1,108 @@
+import { Controller } from '@hotwired/stimulus';
+import { enter, leave } from 'el-transition';
+
+export default class extends Controller {
+  static targets = ["container", "content"]
+  static values = {
+    advanceUrl: String,
+    allowedClickOutsideSelector: String
+  }
+
+  connect() {
+    let _this = this;
+    this.showModal();
+
+    this.turboFrame = this.element.closest('turbo-frame');
+
+    // hide modal when back button is pressed
+    window.addEventListener('popstate', function (event) {
+      if (_this.#hasHistoryAdvanced()) _this.#resetModalElement();
+    });
+
+    window.modal = this;
+  }
+
+  disconnect() {
+    window.modal = undefined;
+  }
+
+  showModal() {
+    enter(this.containerTarget);
+
+    if (this.advanceUrlValue && !this.#hasHistoryAdvanced()) {
+      this.#setHistoryAdvanced();
+      history.pushState({}, "", this.advanceUrlValue);
+    }
+  }
+
+  // if we advanced history, go back, which will trigger
+  // hiding the model. Otherwise, hide the modal directly.
+  hideModal() {
+    // Prevent multiple calls to hideModal.
+    // Sometimes some events are double-triggered.
+    if (this.hidingModal) return
+    this.hidingModal = true;
+
+    let event = new Event('modal:closing', { cancelable: true });
+    this.turboFrame.dispatchEvent(event);
+    if (event.defaultPrevented) return
+
+    this.#resetModalElement();
+
+    event = new Event('modal:closed', { cancelable: false });
+    this.turboFrame.dispatchEvent(event);
+
+    if (this.#hasHistoryAdvanced())
+      history.back();
+  }
+
+  hide() {
+    this.hideModal();
+  }
+
+  refreshPage() {
+    window.Turbo.visit(window.location.href, { action: "replace" });
+  }
+
+  // hide modal on successful form submission
+  // action: "turbo:submit-end->modal#submitEnd"
+  submitEnd(e) {
+    if (e.detail.success) this.hideModal();
+  }
+
+  // hide modal when clicking ESC
+  // action: "keyup@window->modal#closeWithKeyboard"
+  closeWithKeyboard(e) {
+    if (e.code == "Escape") this.hideModal();
+  }
+
+  // hide modal when clicking outside of modal
+  // action: "click@window->modal#outsideModalClicked"
+  outsideModalClicked(e) {
+    let clickedInsideModal = this.contentTarget.contains(e.target) || this.contentTarget == e.target;
+    let clickedAllowedSelector = this.allowedClickOutsideSelectorValue && this.allowedClickOutsideSelectorValue !== '' && e.target.closest(this.allowedClickOutsideSelectorValue) != null;
+
+    if (!clickedInsideModal && !clickedAllowedSelector)
+      this.hideModal();
+  }
+
+  #resetModalElement() {
+    leave(this.containerTarget).then(() => {
+      this.turboFrame.removeAttribute("src");
+      this.containerTarget.remove();
+      this.#resetHistoryAdvanced();
+    });
+  }
+
+  #hasHistoryAdvanced() {
+    return document.body.getAttribute("data-turbo-modal-history-advanced") == "true"
+  }
+
+  #setHistoryAdvanced() {
+    return document.body.setAttribute("data-turbo-modal-history-advanced", "true")
+  }
+
+  #resetHistoryAdvanced() {
+    document.body.removeAttribute("data-turbo-modal-history-advanced");
+  }
+}

data/javascript/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "ultimate_turbo_modal",
+  "version": "0.0.0",
+  "description": "The ultimate Turbo / Stimulus / Hotwire modal window for Rails",
+  "main": "dist/ultimate_turbo_modal.min.js",
+  "module": "dist/ultimate_turbo_modal.min.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "update-version": "node scripts/update-version.js",
+    "build": "yarn install && rollup -c",
+    "release": "bash scripts/release-npm.sh"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cmer/ultimate_turbo_modal.git"
+  },
+  "keywords": [
+    "hotwire",
+    "turbo",
+    "stimulus",
+    "tailwind",
+    "modal",
+    "rubyonrails",
+    "rails"
+  ],
+  "author": "Carl Mercier",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/cmer/ultimate_turbo_modal/issues"
+  },
+  "homepage": "https://github.com/cmer/ultimate_turbo_modal#readme",
+  "dependencies": {
+    "@hotwired/stimulus": "^3.2.2",
+    "@hotwired/turbo-rails": "^8.0.0",
+    "el-transition": "^0.0.7",
+    "idiomorph": "^0.7.3"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "rollup": "^2.79.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-css-only": "^4.3.0",
+    "rollup-plugin-terser": "^7.0.2"
+  }
+}

data/javascript/rollup.config.js

@@ -0,0 +1,24 @@
+import resolve from '@rollup/plugin-node-resolve';
+import css from 'rollup-plugin-css-only';
+import { terser } from 'rollup-plugin-terser';
+
+export default {
+  input: './index.js',
+  output: [
+    {
+      file: 'dist/ultimate_turbo_modal.js',
+      format: 'esm'
+    },
+    {
+      file: 'dist/ultimate_turbo_modal.min.js',
+      format: 'esm',
+      plugins: [terser()]
+    }
+  ],
+  external: ['@hotwired/stimulus'],
+  inlineDynamicImports: true,
+  plugins: [
+    resolve(),
+    css({ output: 'vanilla.css' })
+  ]
+};

data/javascript/scripts/release-npm.sh

@@ -0,0 +1,37 @@
+#!/bin/bash
+set -e
+
+# Check for uncommitted changes
+echo "Checking for uncommitted changes..."
+if ! git diff --quiet; then
+  echo "There are uncommitted changes. Aborting."
+  exit 1
+fi
+echo "No uncommitted changes found."
+
+# Update version
+echo "Updating version..."
+npm run update-version
+
+# Install dependencies
+echo "Installing dependencies..."
+npm install
+
+# Build project
+echo "Building project..."
+npm run build
+
+# Add, commit, and push changes
+VERSION=$(cat VERSION)
+echo "Adding changes to git..."
+git add .
+echo "Committing changes (Release NPM v$VERSION)..."
+git commit -m "Release NPM v$VERSION"
+echo "Pushing changes..."
+git push
+
+# Publish to npm
+echo "Publishing to npm..."
+npm publish
+
+echo "Release complete!"

data/javascript/scripts/update-version.js

@@ -0,0 +1,21 @@
+const fs = require('fs');
+const path = require('path');
+
+const versionFilePath = path.resolve(__dirname, '..', 'VERSION');
+const packageJsonPath = path.resolve(__dirname, '..', 'package.json');
+
+// Read version from VERSION file
+const version = fs.readFileSync(versionFilePath, 'utf8').trim();
+
+// Read package.json
+const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+
+// Update version if it's different
+if (packageJson.version !== version) {
+  packageJson.version = version;
+  // Write updated package.json, preserving indentation (2 spaces)
+  fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n');
+  console.log(`Updated package.json version to ${version}`);
+} else {
+  console.log(`package.json version (${packageJson.version}) is already up to date.`);
+}

data/javascript/styles/vanilla.css

@@ -0,0 +1,179 @@
+.dark {
+  .modal-overlay {
+    background-color: rgba(17, 24, 39, 0.8)
+  }
+
+  .modal-header,
+  .modal-footer {
+    border-color: #4B5563;
+  }
+
+  .modal-content {
+    background-color: #1F2937;
+    color: #ffffff;
+  }
+
+  .modal-close-button:hover,
+  .modal-close-icon:hover {
+    background-color: #6B7280;
+    color: #ffffff;
+  }
+}
+
+:not(.dark) {
+
+  .modal-close-button,
+  .modal-close-icon {
+    color: #9CA3AF;
+
+    &:hover {
+      color: #111827;
+      background-color: #E5E7EB;
+    }
+  }
+}
+
+.modal-container {
+  position: relative;
+
+  &[data-header="false"] .modal-header {
+    position: absolute;
+  }
+
+  &[data-header-divider="true"] .modal-header {
+    border-bottom-width: 1px;
+  }
+
+  &[data-footer-divider="true"] .modal-footer {
+    border-top-width: 1px;
+  }
+
+  &[data-padding="true"] .modal-main {
+    padding: 1rem;
+    padding-top: 0.5rem;
+  }
+
+  &[data-title="false"] .modal-title-h {
+    display: none;
+  }
+
+  &[data-close-button="false"] .modal-close {
+    display: none;
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 40;
+  background-color: rgba(17, 24, 39, 0.7);
+  transition-property: opacity;
+}
+
+.modal-outer {
+  overflow-y: auto;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 50;
+  margin: 1rem;
+
+  @media (min-width: 640px) {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  @media (min-width: 768px) {
+    max-width: 48rem;
+  }
+}
+
+.modal-inner {
+  display: flex;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  min-height: 100%;
+
+  @media (min-width: 640px) {
+    padding: 1rem;
+  }
+}
+
+.modal-content {
+  overflow: hidden;
+  position: relative;
+  background-color: #ffffff;
+  transition-property: all;
+  text-align: left;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+
+  @media (min-width: 640px) {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    max-width: 48rem;
+  }
+}
+
+.modal-header {
+  display: flex;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+
+.modal-title {
+  line-height: 1.75rem;
+  font-weight: 600;
+  padding-left: 1rem;
+}
+
+.modal-footer {
+  display: flex;
+  padding: 1rem;
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+  border-top-width: 1px;
+}
+
+.modal-close {
+  margin-right: 1rem;
+}
+
+.modal-close-button {
+  display: inline-flex;
+  padding: 0.375rem;
+  margin-left: auto;
+  background-color: transparent;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  align-items: center;
+  border-radius: 0.5rem;
+}
+
+.modal-close-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}