add_operation_name
method expects a snake-cased Symbol, JavaScript methods are camelCased.operations
was DOMOperations
.setCookie
and innerHtml
methods are an excellent starting point.processElements
function.select_all: true
and you will see a console log message for every matching element.before
and after
events? Would you like your custom operations to be cancel
able and able to be delay
ed? CableReady's utils
class provides all of the helper functions you might need:callee
as the second argument to our custom operation.processElements
closure, we use the before
and after
functions to handle emitting our standardized events. In between, we pass our custom logic to the operate
function. Someday soon, developers will be able to add processing stages to the operate
function, but today, it's responsible for making operations able to be cancelled on the client, as well as making it possible for operations to delay
their own execution.name
and action
from the operation
:application.js
, you can now load them from npm packages. The first example of this is the play_sound operation, which was removed from CableReady core in v5.0.0; some people didn't love our implementation, and we wanted them to be able to write their own - or skip it entirely.play_sound
now lives in the cableready/audio_operations repo on GitHub, which you can both import and clone to use as the basis for your own custom operations packages.play_sound
as an operation to your CableReady initializer:AudioOperations
to your pack file, and you can continue to use play_sound
exactly as you did before:shouldMorph
and didMorph
callbacks only impact use of the morph
operation.onBeforeElUpdated
callback, shouldMorph
, sequentially executes an array of functions called shouldMorphCallbacks
. It comes factory installed with two callbacks that you can probably leave alone: verifyNotMutable
and verifyNotPermanent
. If you're not using StimulusReflex, you could experiment with slice
to remove verifyNotPermanent
for a small performance boost. 🤷options
passed to the morph
method, fromEl
, which is the element before it is (potentially) morphed, and toEl
, which is the element fromEl
will (potentially) be morphed into.onElUpdated
callback, didMorph
, sequentially executes an array of functions called didMorphCallbacks
. These callbacks will only fire for elements which were successfully morphed.options
passed to the morph
method, and el
, which is the element after it has been morphed.hydrated
CSS class to every morphed element with a tagname that starts with "SL-".emitMissingElementWarnings: false
as the second parameter to perform
.