Skip to content

Instantly share code, notes, and snippets.

Keeping it real for the rest of us.

leastbad leastbad

Keeping it real for the rest of us.
View GitHub Profile
leastbad / timer_controller.js
Created Jul 17, 2021
timer_controller.js WIP
View timer_controller.js
import { Controller } from 'stimulus'
export default class extends Controller {
static values = {
idleTimeoutMs: 30000,
currentIdleTimeMs: Number,
checkIdleStateRateMs: 250,
isUserCurrentlyOnPage: true,
isUserCurrentlyIdle: Boolean,
currentPageName: 'default',
leastbad /
Last active Jul 4, 2021
mrujs w/ cable-car plugin

"dependencies": { "cable_ready": "5.0.0-pre1", "mrujs": "^0.3.0-beta.25" }

leastbad / select_controller.js
Created Jun 10, 2021
SlimSelect Stimulus wrapper
View select_controller.js
import ApplicationController from '../application_controller'
import SlimSelect from 'slim-select'
export default class extends ApplicationController {
static values = {
limit: Number,
placeholder: String,
searchText: String,
searchingText: String,
reflex: String,
leastbad / Gemfile
Last active Jul 2, 2021
Webpacker 5 config
View Gemfile
gem "webpacker", "~> 5.4.0"
leastbad / customer_reflex.rb
Last active May 30, 2021
TomSelect + StimulusReflex 3.5 (w/payload)
View customer_reflex.rb
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
leastbad / struct.rb
Created May 7, 2021 — forked from ParamagicDev/struct.rb
Using hashes for structs
View struct.rb
# using a predefined hash
hash = { field1: "foo", field2: "bar" }
HashStruct =*hash.keys, keyword_init: true)
hash_struct =
hash_struct.field1 # => "foo"
hash_struct.field2 # => "bar"
hash_struct.field3 # => ERROR!
leastbad / application.js
Created Apr 21, 2021
CableReady + Notyf
View application.js
// partial file
// you will need to `yarn add notyf`
import CableReady from 'cable_ready'
import { Notyf } from 'notyf'
import flash from '../shared/notyf'
CableReady.DOMOperations.toast = operation => {
new Notyf(flash).open(operation)
leastbad / remove_in_iframe.js
Created Apr 15, 2021
CableReady custom operations
View remove_in_iframe.js
import CableReady from 'cable_ready'
import { dispatch } from 'cable_ready/javascript/utils'
CableReady.DOMOperations.removeSubelement = operation => {
const { element, subElement } = operation
dispatch(element, 'cable-ready:before-remove-subelement', operation)
dispatch(element, 'cable-ready:after-remove-subelement', operation)
leastbad /
Last active Apr 15, 2021
stimulus-youtube preview

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>
  <div data-youtube-target="frame"></div>
leastbad /
Last active Apr 15, 2021
Mapbox controller

Using Stimulus v2, FontAwesome 5, Bootstrap 5, and Mapbox

You can grab a copy of marker.svg here - put it in your /public folder.