Component Effects

Overview

a bounce effect.

Effects are little visual transformations that are applied to components that are rendered in the page.

Effects API





let rd = await import("/lib/functional-state/v1.0.0/functional-state.mjs");
let ef = await import("/lib/functional-state/library/v1.0.0/effects.mjs");
let html = await import("/lib/functional-state/library/v1.0.0/html.mjs");
let table = html.table({
  items:[{name:'dan',age:12},{name:'dan2',age:13},],
  css:'/lib/functional-state/v1.0.0/test/css/table2-id.css'
});

table.$process = ef.bounce(table.$process);
rd.viewport('table1',table);


Implementing an Effect


The process of implementing an effect is essentially to replace the $process function on a component as in the following. 


let rd = await import("/lib/functional-state/v1.0.0/functional-state.mjs");
let html = await import("/lib/functional-state/library/v1.0.0/html.mjs");
let table = html.table({
  items:[{name:'dan',age:12},{name:'dan2',age:13},],
  css:'/lib/functional-state/v1.0.0/test/css/table2-id.css'
});

table.$process = ((process,rd)=>{
  return ($services, that)=>{
    if(process !== undefined){
      rd.$call(process, {that:that, ...$services}, that);
      $('#' + that.id).effect('bounce', {}, 500, function () { });
    }
  };
})(table.$process, rd);
rd.viewport('table1',table);


Contents