Skip to content

Instantly share code, notes, and snippets.

Avatar

leastbad leastbad

View GitHub Profile
@leastbad
leastbad / example_reflex.rb
Last active Dec 14, 2020
CableReady in v3.3
View example_reflex.rb
cable_ready.outer_html(html: render(partial)).broadcast
@leastbad
leastbad / v1.rb
Created Dec 11, 2020
TenantFilterReflex refactor
View v1.rb
class TenantFilterReflex < ApplicationReflex
def filter_property
find_tenant_filter(element).update_attribute :property_id, element.value
end
def filter_unit
find_tenant_filter(element).update_attribute :unit_id, element.value
end
def fuzzy_name_search
@leastbad
leastbad / aasm.rb
Created Dec 3, 2020
Julian's multi-step validations state machine
View aasm.rb
aasm do
state :invited, initial: true
state :identified
state :details_added
state :bank_details_added
state :completed
event :identify do
transitions from: :invited, to: :identified
end
View application_controller.rb
add_flash_types :primary, :secondary, :success, :danger, :warning, :info, :light, :dark
@leastbad
leastbad / README.md
Created Sep 25, 2020
Notifications system
View README.md

Just a few notes/caveats:

  1. I've learned a lot since I wrote this, and lots of things could probably be better. I'd probably use a Mutation Observer to watch for new notifications, or tie it in with CableReady events. Lots of fun paths open to us now.
  2. consumer comes from/through your Stimulus application.
  3. You definitely should swap out the jQuery etc with something good like notyf or noty
  4. line 9 means that you can access the internal state of the controller via the DOM element
  5. Like your solution, it's designed to build on the Flash concept. And as I mentioned, it removes things from the DOM to make Turbolinks caching work well.
  6. document.hidden is the "is this tab visible" magic.
  7. It will attempt to send a native notification, apparently! It's been a long time since I worked on this. I would use CableReady's notification operation instead at this point.
  8. The idea is that you put this controller on your body and the partial is included anywhere - d-none is a Bootstrap class to m
@leastbad
leastbad / README.md
Created Sep 24, 2020
Working with Turbolinks events
View README.md

Here are the Turbolinks events which fire when you do things.

first visit: load

click: click before-visit request-start visit request-end before-cache before-render render load

back: visit before-cache before-render render load

cached: click before-visit request-start visit before-cache before-render render request-end before-render render load

@leastbad
leastbad / README.md
Last active Sep 21, 2020
Polymorphic comment controller preview
View README.md

With apologies for the half-baked solution presented, this is the interesting parts of a polymorphic comment engine that makes use of Stimulus, StimulusReflex and CableReady.

Note that app/javascript/controllers/index.js has to set application.consumer = consumer

This was written in the pre-morphs era, so I've done my best to fill in the blanks on what I'd do today in the Reflex.

Not shown: any view templates. Basic idea:

<%= render partial: "comments/comment", collection: @comments %>
@leastbad
leastbad / stimulate.rb
Created Jul 10, 2020
server-side stimulate
View stimulate.rb
def stimulate(target, data)
dataset = {}
data.each do |k, v|
dataset["data-#{k}"] = v.to_s
end
channel.receive({
"target" => target,
"attrs" => element.attributes.to_h.symbolize_keys,
"dataset" => dataset
})
@leastbad
leastbad / README.md
Last active Oct 28, 2020
stimulus-websocket preview
View README.md

This controller can be put on body or any other element.

  1. Adds a websocket accessor to the element
  2. Controller exposes a connected boolean getter
  3. Controller bails with a warning if no shared consumer is available
  4. Element will have data-action-cable-connected or data-action-cable-disconnected attributes which can be used for CSS selectors
  5. Element will emit action-cable:connected or action-cable:disconnected events only when state is flipping
  6. Errors => Disconnected to keep things simple

I intend to document the navigator.onLine accessor and the window:online/offline events so devs can handle PWA modes.

You can’t perform that action at this time.