YumJS Method Documentation

Methods

The documentation for YumJS's methods listed below link to other pages when more than a concise definition is needed.

Unless noted, the methods in this list are chainable. Some methods when called without parameters will return a result.


Subscribing to Elements

Observables

More needs to be written for spy/unspy but for now these link to the intro on the main page.

Reactors

  • Reactor( customName[optional] ) - Add a reactor to any element so other elements can subscribe to it with ReactTo. Assign a customName to use a prop other than "atom".
  • ReactTo( component, name, function, prop[all default], ) - subscribe to a component's atom.prop changes (atom.* if not prop present).
  • unReact( component, name, 'prop') - Stop reacting to component

Events


Render

  • _render() - yum()._render(App, '#root', pos)
  • More soon...

Drag and swipe


FX Queue / basic function queue

The FX Queue is just a function queue. Calls to fx() pile up your custom functions to execute them in the order of the lowest delay. FX Queue can be used to create effects and animations when used with custom functions that modify the properties of elements on the stack. You can use the FX Queue to delay execution of functions in the queue as well.

  • fx()

    Example: yum(el).fx(func1, { delay: 2000, step: 2 } ).fx(func2, { delay: 2000, step: 3, iterate: 3 } );

    Will push func1 to a queue at which point will execution will occur based on the lowest delay time in the queue.

    func1 will execute for (1) iterations every 2000ms (delay) in this case.

    func2 will execute for (3) iterations every 2000ms (delay) in this case.

    In your functions (func1 and func2) you can affect the properties of 'e' which is your elements on the stack with e.style or yum(e). and use the 's' parameter as a nummeric, string parameter .

    Doing so for every iteration allows you to build highly customizable animations and effects over time.


DOM Manipulation

Some of these, while not currently linked to their own page yet are used / described on pages for other methods.

  • css()
  • forEvery()
  • each()
  • fadeIn()
  • fadeOut()
  • parents()
  • parent()
  • children()
  • text()
  • html()
  • find
  • data()
  • ctx(str, obj) - Return a canvas context where str is the context type ('2d') by default. 'obj' is option context attributes as an object ( { } ).
  • scroller()
  • scrollTo()
  • removeClass(classname) - Remove classname from classList of collection.
  • addClass(classname) - Add classname to classList of collection.
  • attr() - Return an attribute => yum('h2').attr('data-id'), set an attribute => yum('h2').attr('data-id', 'foo')
  • removeAttr() - Remove attribute by name, Ex: yum(h2).removeAttr('class');
  • before()
  • insertBefore()
  • after()
  • insertAfter()
  • append()
  • appendTo( element ) - Insert object as last child of element. yum(object).appendTo(element)
  • prepend()
  • prependTo( element ) - Insert object as first child of element. yum(object).prependTo(element)
  • show() - Show collection that is currently hidden. Note: parent must not be hidden.
  • hide() - Hide collection.
  • toggle()
  • classToggle( 'red' ) - Toggle a class (red) on or off.
  • detach() - Detach object for later insertion.
  • ready(function ) - Exec function when document is ready
  • delay(3000, fn) - Exec fn after 3 seconds. Example: let fn = function(e){ yum(e).text('I was delayed') };   yum(h2).delay(3000, fn);   h2's text will change.
  • delayfq(3000) - Use between fxq() calls to delay execution of subsequent functions in the fx queue. Example: yum(el).fxq({fn: func1, speed: 200, iterations: 10 }).delayfq(3000).fxq({fn: func2, speed: 1000, iterations: 2, }) Will cause execution of func2 to be delayed 3 seconds after func1.
  • clearfxq() - Clears the fxq queue after which any remaining jobs will be gone.
  • stop() - Stops currently running queue and clears it after which any remaining jobs will be gone.

Plugins

  • plug(fn) - Exec fn on entire collection.
  • fn(fn) - Same as plug. Exec fn on entire collection.

Example: plug() and fn();


// A function that is our plugin - 'e' as first parameter is used here for the plugin
// to reference every element of the collection when exec'd from plug();
// Here we just do a simple console.log of the classList but we could do anything.

const func = function(e) { console.log('I am a plugin '+ e.classList) };

yum('.button').plug(func).text('I am button');

//=> prints 'button' N times and the classList for however many elements there are.


If you have any questions about Yum please contact me.