Narcissistic Pickle Meister
Wondering what’s next for npm?Check out our public roadmap! »

radiolabel

1.1.0 • Public • Published

Radiolabel

npm version

Mutation indicator overlays for CableReady operations Tiny at <100 LOC


  • Simple: this is a drop-in, code-free solution
  • Styled: zero CSS, use any design framework
  • Backend Agnostic: works with or without StimulusReflex
  • Turbolinks: compatible with Turbolinks by design
  • MIT Licensed: free for personal and commercial use

Built for CableReady

This Stimulus controller intercepts CableReady after- DOM events. When it detects an operation that mutates an element, it will create a titled overlay which briefly announces when an element is modified.

Morph operations will be orange, while all others are green.

If an operation was initiated by StimulusReflex, additional information will be presented about the Reflex action in the title.

Setup

First, add Radiolabel to your package.json:

yarn add radiolabel

Then, just add Radiolabel to your main JS entry point or Stimulus controllers root folder:

import { Application } from 'stimulus'
import Radiolabel from 'radiolabel'

import { definitionsFromContext } from 'stimulus/webpack-helpers'
const application = Application.start()
const context = require.context('../controllers', true, /\.js$/)
application.load(definitionsFromContext(context))

// Manually register Radiolabel as a Stimulus controller
application.register('radiolabel', Radiolabel)

Optionally, you can restrict the import to your development environment:

import { Application } from 'stimulus'

import { definitionsFromContext } from 'stimulus/webpack-helpers'
const application = Application.start()
const context = require.context('../controllers', true, /\.js$/)
application.load(definitionsFromContext(context))

if (process.env.RAILS_ENV === 'development') {
  import('radiolabel').then(Radiolabel =>
    application.register('radiolabel', Radiolabel.default)
  )
}

If Stimulus can't locate a controller at runtime, the data-controller attribute is ignored, meaning your template can reference radiolabel in the production environment and nothing will happen.

HTML Markup

<body data-controller="radiolabel"></body>

If you'd like to change the default 7 second visual effect duration, just set a new value on the same element that the controller is defined on.

<body data-controller="radiolabel" data-radiolabel-duration-value="2"></body>

Yes, that's really it.

Contributing

Bug reports and pull requests are welcome.

License

This package is available as open source under the terms of the MIT License.

Install

npm i radiolabel

DownloadsWeekly Downloads

102

Version

1.1.0

License

MIT

Unpacked Size

2.23 MB

Total Files

11

Last publish

Collaborators

  • avatar