Skip to content

Instantly share code, notes, and snippets.

Avatar
🤔

matt swanson swanson

🤔
View GitHub Profile
View copy_html_controller.js
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 Feb 18, 2021
Modal forms with Rails UJS
View 00 index.html.erb
<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 May 2, 2021
.irbrc color coding Rails console by environment
View .irbrc
# 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
View helper.rb
# 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
View as_modal.js.haml
: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 }");
View 00_html.erb
<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 %>
View 00_index.html.erb
<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>
View 00_index.html.erb
<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>
View checkbox_list_controller.js
import { Controller } from "stimulus";
export default class extends Controller {
static targets = ["count"];
connect() {
this.setCount();
}
checkAll() {
View gist:d6eb4f80b071538564a615f22882be3a
//
<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>
//