Nocturnal Parakeet Monitor

    radiolabel

    1.1.1 • 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

    118

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    2.37 MB

    Total Files

    11

    Last publish

    Collaborators

    • leastbad