swanson

import { Controller } from "stimulus";

export default class extends Controller {
  static targets = ["source"];

  copy() {
    const range = document.createRange();

    window.getSelection().removeAllRanges();

swanson

<h1>Posts</h1>

<ul>
<% Post.all.each do |p| %>
  <li><%= p.title %></li>
<% end %>
</ul>

<%= link_to "+ Post", new_posts_path, remote: true %>

swanson

# Add color coding based on Rails environment for safety

if defined? Rails
  banner = if Rails.env.production?
    "\e[41;97;1m #{Rails.env} \e[0m "
  else
    "\e[42;97;1m #{Rails.env} \e[0m "
  end

  # Build a custom prompt

swanson

# Formats a +number+ into an abbreviated string suitable for
# displaying social media type metrics
#
# ==== Options
# * start_at - The first number to start abbreviating, defaults
#   to 10_000. Certain metrics may want to start at e.g. 1000.
#
# ==== Examples
# number_to_social(123)                     # => 123
# number_to_social(1457)                    # => 1457

swanson

:plain
  var existingModal = document.querySelector("[data-controller='modal']");
  if (existingModal) {
    document.body.removeChild(existingModal);
  }

  document.body.insertAdjacentHTML("beforeend", "#{j render partial: template.to_s, locals: local_assigns }");

swanson

<div
  class="inline-block"
  data-controller="hovercard"
  data-hovercard-url-value="<%= hovercard_user_path(e.user) %>"
  data-action="mouseenter->hovercard#show mouseleave->hovercard#hide"
>
  <%= link_to e.user.username, e.user, class: "font-bold hover:text-gray-700" %>
</div>
<span>
  <%= e.action %>

swanson

<div data-controller="clipboard" class="mt-4 bg-gray-50 p-6">
  <input type="text" class="form-input bg-grey-50" value="SeCrEtKeY-42!" data-clipboard-target="source" readonly />

  <button class="btn" data-clipboard-target="button" data-action="clipboard#copy">
    Copy
  </button>
</div>

swanson

<div data-controller="counter" data-counter-count-value="7" class="flex flex-col mt-3">
  <div class="text-2xl">
    The count is: <span data-counter-target="result"></span>
  </div>
  <div class="flex space-x-4 mt-4">
    <button class="btn" data-action="counter#increment">+</button>
    <button class="btn" data-action="counter#decrement">-</button>
  </div>
</div>

swanson

import { Controller } from "stimulus";

export default class extends Controller {
  static targets = ["count"];

  connect() {
    this.setCount();
  }

  checkAll() {

swanson

//
<div data-controller="required-field" data-required-field-message="Email is required">
  <input name="email" data-target="required-field.field" ...>
</div>

<div data-controller="required-field" data-required-field-message="Password is required">
  <input name="password" data-target="required-field.field">
</div>

//