Skip to content

Instantly share code, notes, and snippets.

View swanson's full-sized avatar
😈

matt swanson swanson

😈
View GitHub Profile
import { Controller } from "stimulus";
export default class extends Controller {
static targets = ["source"];
copy() {
const range = document.createRange();
window.getSelection().removeAllRanges();
@swanson
swanson / 00 index.html.erb
Last active February 18, 2021 02:47
Modal forms with Rails UJS
<h1>Posts</h1>
<ul>
<% Post.all.each do |p| %>
<li><%= p.title %></li>
<% end %>
</ul>
<%= link_to "+ Post", new_posts_path, remote: true %>
@swanson
swanson / .irbrc
Last active March 3, 2024 17:14
.irbrc color coding Rails console by environment
# 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
# 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
: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 }");
<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 %>
<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>
<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>
import { Controller } from "stimulus";
export default class extends Controller {
static targets = ["count"];
connect() {
this.setCount();
}
checkAll() {
//
<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>
//