leastbad

Choices.js Stimulus wrapper

https://joshuajohnson.co.uk/Choices/

Soon, this will be published as an NPM package, but there's an absence of documentation right now. It supports almost all functions from the original library; soon it will support 100% of them.

This wrapper adds Ajax pre-fetch search. Happens if controller has a data-search-path attribute.

Stimulus controller targets use new v2 syntax. Controller attaches a reference to itself on the element so that you can access the internal state from external scripts.

leastbad

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

This is all you really need to know in order to make Action Mailbox work in development.

1. Fire up ngrok http 3000 and make note of your subdomain for steps 3 and 8.
2. Create a Mailgun account because they offer sandbox addresses; grab your domain from the Dashboard.
3. Go into Receiving and create a catch-all route pointing to: https://XXX.ngrok.io/rails/action_mailbox/mailgun/inbound_emails/mime
4. Add your Mailgun API key to your credentials:

action_mailbox:
 mailgun_api_key: API KEY HERE

leastbad

My goal with this was to wrap the terrible YouTube Embed API in a Stimulus controller that would allow me to access the underlying API while providing some convenience methods. One key outcome is that the controller emits youtube events which contain the current position in the video. This means that other code can now respond to the position you are at in the video.

<div data-controller="youtube" data-youtube-code-value="Lo_1pyQ7xvc">
  <button data-action="youtube#play">Play</button>
  <button data-action="youtube#pause">Pause</button>
  <button data-action="youtube#stop">Stop</button>
  <br>
  <div data-youtube-target="frame"></div>

leastbad

module IndexableByHashPatch
  refine Array do
    def to_proc
      ->(h) { length == 1 ? h[first] : h.values_at(*self) }
    end
  end
end

using IndexableByHashPatch

leastbad

                                        oooo
                                    oooo:~:+oo
                                    o~.~:~~.:+oo
        oooooo          oooooooooooo o+:...~.~:o
      o+:++~+o      ooo++:::::::+++oo++...:.~~o
      o+:~+:.~o   oo+::~~~:~~~:::~~:::~~:+:~~~o
    o+~..+...+ooo+:~~::::~~:~~+++++++++++:~~~+o
    o+~..... :::~~~:::+::+:~~::+:++::+:::+~~~+o
      o:~.~~.~~~~:::+::~..::~:+~:::::+++++:.::o
      o:~~~:+:+++++:....~...::......~:+++:.:~o

leastbad

module ApplicationCable
  class Channel < ActionCable::Channel::Base
    include CableReady::Broadcaster
    delegate :render, to: :ApplicationController
  end
end

leastbad

# intended to be a Rails 6.1 initializer based on @rolandstuder's https://github.com/rails/rails/pull/41506
# if you want to use it with Rails 7, you will need to add a third options: parameter to the method
module ActiveRecord
  module DelegatedType
    private
    def define_delegated_type_methods(role, types:)
      role_type = "#{role}_type"
      role_id   = "#{role}_id"

      define_method "#{role}_class" do

leastbad

class UsersReflex < ApplicationReflex
  def search(name)
    users = User.where("name LIKE :prefix", prefix: "#{name}%")
    result = users.map { |user| { text: user.name, value: user.id }}
    cable_ready.dispatch_event(name: "data", detail: {options: result}).broadcast
    morph :nothing
  end
end

leastbad

class CustomersReflex < ApplicationReflex
  def lookup(search)
    # use search string to do some kind of DB lookup here
    self.payload = {} # I have NO IDEA what tom-select expects!
    morph :nothing
  end
end