turbo_modal 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: d1a0c324d77710010d3d592e4c12f4978aebe32db754dcd6b9b9ca98c2de0d8d
+  data.tar.gz: '028ea286edf98dda94c3eab35135fb9f7a9052793cd46864f7a654f1e30934d8'
+SHA512:
+  metadata.gz: b40bde5c79717d35e361292ec4a1bee89ccae813891656352cb47220110c1fe39e16885627821a9e56bb836343489ba4c1dd97efab71143f322761517b3b7710
+  data.tar.gz: 140066b0316bdd7e8ce3a69f3bc349395cae2b38e34a4dc64d500fd175147e9821fa4c5110792ca4e756d0572f7e861ad6f7548297e65364d551e12bf8e0a198

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2021 Alan Cornthwaite
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,28 @@
+# TurboModal
+Short description and motivation.
+
+## Usage
+How to use my plugin.
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'turbo_modal'
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+```bash
+$ gem install turbo_modal
+```
+
+## Contributing
+Contribution directions go here.
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,18 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"
+
+require "rake/testtask"
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+task default: :test

data/app/assets/dist/turbo_modal.css

@@ -0,0 +1,131 @@
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 11;
+  background: white;
+  border-radius: 4px;
+  padding: 2rem;
+  --animation-in: slide-in;
+  --animation-out: slide-out;
+  --mobile-breakpoint: 45rem;
+}
+@media screen and (max-width: var(--mobile-breakpoint)) {
+  .fullscreen .modal {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 0;
+  }
+}
+.bottom-sheet .modal {
+  top: unset;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  min-height: 40vh;
+  --animation-in: slide-up;
+  --animation-out: slide-down;
+}
+@media screen and (max-width: var(--mobile-breakpoint)) {
+  .bottom-sheet .modal {
+    min-height: 65vh;
+  }
+}
+
+.animate-in {
+  animation: var(--animation-in);
+  animation-duration: 0.25s;
+  animation-fill-mode: forwards;
+}
+@media screen and (max-width: var(--mobile-breakpoint)) {
+  .fullscreen .animate-in {
+    --animation-in: slide-in-left;
+  }
+}
+
+.animate-out {
+  animation: var(--animation-out);
+  animation-duration: 0.25s;
+  animation-fill-mode: forwards;
+}
+@media screen and (max-width: var(--mobile-breakpoint)) {
+  .fullscreen .animate-out {
+    --animation-out: slide-out-right;
+  }
+}
+
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -35%);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+}
+@keyframes slide-out {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -35%);
+  }
+}
+@keyframes slide-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes slide-out-right {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes slide-down {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+.scrim {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 11;
+}
+
+.scrim[data-hidden] {
+  display: none;
+}

data/app/assets/stylesheets/turbo_modal/_index.scss

@@ -0,0 +1,2 @@
+@use "modal";
+@use "scrim";

data/app/assets/stylesheets/turbo_modal/_modal.scss

@@ -0,0 +1,133 @@
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 11;
+  background: white;
+  border-radius: 4px;
+  padding: 2rem;
+  --animation-in : slide-in;
+  --animation-out : slide-out;
+  --mobile-breakpoint: 45rem;
+
+  .fullscreen & {
+    @media screen and(max-width: var(--mobile-breakpoint)) {
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: 0;
+    }
+  }
+
+  .bottom-sheet & {
+    top: unset;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    min-height: 40vh;
+    --animation-in : slide-up;
+    --animation-out : slide-down;
+
+    @media screen and(max-width: var(--mobile-breakpoint)) {
+      min-height: 65vh;
+    }
+  }
+}
+
+.animate-in {
+  animation: var(--animation-in);
+  animation-duration: 0.25s;
+  animation-fill-mode: forwards;
+
+  .fullscreen & {
+    @media screen and(max-width: var(--mobile-breakpoint)) {
+      --animation-in: slide-in-left;
+    }
+  }
+}
+
+.animate-out {
+  animation: var(--animation-out);
+  animation-duration: 0.25s;
+  animation-fill-mode: forwards;
+
+  .fullscreen & {
+    @media screen and(max-width: var(--mobile-breakpoint)) {
+      --animation-out: slide-out-right;
+    }
+  }
+}
+
+
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -35%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+}
+
+@keyframes slide-out {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate(-50%, -35%);
+  }
+}
+
+@keyframes slide-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-out-right {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-down {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}

data/app/assets/stylesheets/turbo_modal/_scrim.scss

@@ -0,0 +1,13 @@
+.scrim {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 11;
+}
+
+.scrim[data-hidden] {
+  display: none;
+}

data/app/assets/stylesheets/turbo_modal.scss

@@ -0,0 +1 @@
+@use "turbo_modal/index";

data/app/helpers/modal_helper.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module ModalHelper
+  MODAL_ID        = "modal"
+  DEFAULT_OPTIONS = { data: { turbo_frame: MODAL_ID, action: "modal#showModal", modal_type: "" } }.freeze
+
+  def modal_tag(modal_id = MODAL_ID)
+    turbo_frame_tag modal_id, data: { modal_target: "turboFrame" }
+  end
+
+  def modal_link_to(name = nil, options = nil, html_options = nil, &block)
+    if block
+      link_to name, DEFAULT_OPTIONS.deep_merge(options || {}), html_options, &block
+    else
+      link_to name, options, DEFAULT_OPTIONS.deep_merge(html_options || {}), &block
+    end
+  end
+
+  def modal_link(text = nil, path = nil, options = {}, &block)
+    options = DEFAULT_OPTIONS.deep_merge(options)
+    if block
+      link_to text || path, options, &block
+    else
+      link_to text, path, options
+    end
+  end
+
+  def modal_content(options = {}, &block)
+    modal_id = options.fetch(:modal_id, MODAL_ID)
+    turbo_frame_tag modal_id, class: "hidden" do
+      tag.div(class: "modal animate-in #{options.delete(:modal_classes)}",
+              data:  {
+                action: "keyup@document->modal#keyup scrim-hide@window->modal#close",
+              }) do
+        yield if block
+      end
+    end
+  end
+end

data/app/helpers/scrim_helper.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module ScrimHelper
+  def scrim_tag
+    tag.div(class: "scrim", data: { scrim_target: "scrim", action: "click->scrim#hide", hidden: true })
+  end
+end

data/app/javascript/turbo_modal/index.js

@@ -0,0 +1,4 @@
+import ModalController from "./modal_controller";
+import ScrimController from "./scrim_controller";
+
+export { ModalController, ScrimController }

data/app/javascript/turbo_modal/modal_controller.js

@@ -0,0 +1,42 @@
+import { Controller } from "stimulus";
+
+export default class ModalController extends Controller {
+  static targets = ["turboFrame"];
+
+  static values = {
+    type: String
+  }
+
+  typeValueChanged(value) {
+    if (value === "") return;
+    this.turboFrameTarget.classList.add(value);
+  }
+
+  close() {
+    if (this.turboFrameTarget.src === null) return;
+
+    const modal_element = this.turboFrameTarget.querySelector(".modal")
+    modal_element.classList.remove("animate-in");
+    modal_element.classList.add("animate-out");
+    setTimeout(() => {
+      modal_element.remove();
+      this.turboFrameTarget.src = null;
+
+      if (this.typeValue !== "") {
+        this.turboFrameTarget.classList.remove(this.typeValue);
+        this.typeValue = "";
+      }
+      window.dispatchEvent(new Event("hide-scrim", { bubbles: true }))
+    }, 250);
+  }
+
+  keyup(event) {
+    if (event.key === 'Escape') this.close();
+  }
+
+  showModal(e) {
+    const modal_link = e.target.closest("a[data-modal-type]")
+    this.typeValue = modal_link.dataset.modalType
+    window.dispatchEvent(new Event("show-scrim", { bubbles: true }))
+  }
+}

data/app/javascript/turbo_modal/scrim_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from "stimulus"
+
+class ScrimController extends Controller {
+  static targets = ["scrim"];
+
+  show(event) {
+    delete this.scrimTarget.dataset.hidden;
+  }
+
+  hide(event) {
+    this.scrimTarget.dataset.hidden = "hidden";
+    window.dispatchEvent(new Event("scrim-hide", { bubbles: true }))
+  }
+}
+
+export default ScrimController;

data/config/routes.rb

@@ -0,0 +1,2 @@
+Rails.application.routes.draw do
+end

data/lib/install/turbo_modal.rb

@@ -0,0 +1,25 @@
+require_relative "../turbo_modal/version"
+
+entry_path = case Rails.version[0].to_i
+             when 6
+               "app/javascripts/packs/application.js"
+             when 7
+               "app/javascripts/application.js"
+             else
+               exit "Turbo Modal requires rails 6 or higher"
+             end
+
+if Rails.root.join(entry_path).exist?
+  say "Import Turbo Modal"
+  append_to_file entry_path, %(import "@katalyst-interactive/turbo-modal"\n)
+else
+  say "You must import @katalyst-interactive/turbo-modal in your JavaScript entrypoint file", :red
+end
+
+say "Install Turbo Modal"
+say "Turbo Modal #{TurboModal::VERSION} requires Stimulus@2.0.0", :yellow
+run "yarn add @katalyst-interactive/turbo-modal"
+
+append_to_file "app/javascript/controllers/index.js", %(\nimport { ScrimController, ModalController } from "@katalyst-interactive/turbo-modal"\n)
+append_to_file "app/javascript/controllers/index.js", %(application.register("scrim", ScrimController)\n)
+append_to_file "app/javascript/controllers/index.js", %(application.register("modal", ModalController)\n)

data/lib/tasks/turbo_modal_tasks.rake

@@ -0,0 +1,35 @@
+# desc "Explaining what the task does"
+# task :turbo_modal do
+#   # Task goes here
+# end
+
+def run_template_path(path)
+  system "#{RbConfig.ruby} ./bin/rails app:template LOCATION=#{File.expand_path("../install/#{path}.rb", __dir__)}"
+end
+
+def stimulus_installed?
+  (Rails.root.join("app/javascript/controllers/index.js")).exist?
+end
+
+def switch_on_stimulus
+  system "yarn add stimulus@2.0.0"
+end
+
+def switch_on_turbo
+  Rake::Task["turbo:install"].invoke
+end
+
+namespace :turbo_modal do
+  desc "Install turbo_modal packages"
+  task install: %i[stimulus turbo] do
+    run_template_path "turbo_modal"
+  end
+
+  task :stimulus do
+    switch_on_stimulus unless stimulus_installed?
+  end
+
+  task :turbo do
+    switch_on_turbo
+  end
+end

data/lib/turbo_modal/engine.rb

@@ -0,0 +1,23 @@
+module TurboModal
+  class Engine < ::Rails::Engine
+    config.autoload_once_paths = %W(#{root}/app/helpers)
+
+    PRECOMPILE_ASSETS = %w( turbo_modal.css )
+
+    initializer "turbo_modal.assets" do
+      if Rails.application.config.respond_to?(:assets)
+        Rails.application.config.assets.precompile += PRECOMPILE_ASSETS
+      end
+    end
+
+    initializer "turbo_modal.helpers", before: :load_config_initializers do
+      ActiveSupport.on_load(:action_controller_base) do
+        helper TurboModal::Engine.helpers
+      end
+
+      ActiveSupport.on_load(:action_view_base) do
+        helper TurboModal::Engine.helpers
+      end
+    end
+  end
+end

data/lib/turbo_modal/version.rb

@@ -0,0 +1,3 @@
+module TurboModal
+  VERSION = '0.1.0'
+end

data/lib/turbo_modal.rb

@@ -0,0 +1,7 @@
+require "turbo-rails"
+require "turbo_modal/version"
+require "turbo_modal/engine"
+
+module TurboModal
+  # Your code goes here...
+end

metadata

@@ -0,0 +1,103 @@
+--- !ruby/object:Gem::Specification
+name: turbo_modal
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Alan Cornthwaite
+- Matt Redmond
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2021-10-29 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 6.1.3
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 6.1.3.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 6.1.3
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 6.1.3.1
+- !ruby/object:Gem::Dependency
+  name: turbo-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 7.1.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 7.1.1
+description: ''
+email:
+- alan.cornthwaite@katalyst.com.au
+- matt.redmond@katalyst.com.au
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/config/turbo_modal_manifest.js
+- app/assets/dist/turbo_modal.css
+- app/assets/stylesheets/turbo_modal.scss
+- app/assets/stylesheets/turbo_modal/_index.scss
+- app/assets/stylesheets/turbo_modal/_modal.scss
+- app/assets/stylesheets/turbo_modal/_scrim.scss
+- app/helpers/modal_helper.rb
+- app/helpers/scrim_helper.rb
+- app/javascript/turbo_modal/index.js
+- app/javascript/turbo_modal/modal_controller.js
+- app/javascript/turbo_modal/scrim_controller.js
+- config/routes.rb
+- lib/install/turbo_modal.rb
+- lib/tasks/turbo_modal_tasks.rake
+- lib/turbo_modal.rb
+- lib/turbo_modal/engine.rb
+- lib/turbo_modal/version.rb
+homepage: https://github.com/katalyst/turbo_modal
+licenses:
+- MIT
+metadata:
+  allowed_push_host: https://rubygems.org
+  homepage_uri: https://github.com/katalyst/turbo_modal
+  source_code_uri: https://github.com/katalyst/turbo_modal
+  changelog_uri: https://github.com/katalyst/turbo_modal
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.1.6
+signing_key: 
+specification_version: 4
+summary: Modal library that uses Turbo and Stimulus because we are in the future now.
+test_files: []