Source: smartdom.js

  2. let alertElement = null
  3. let alertTimeout = null
  5. /**
  6.  * alert<br> 
  7.  * <props-opt></props-opt>     
  8.  * <table class="classtable">     
  9.  * <tr><td>msg</td><td>message [ default: "Alert!"]</td>     
  10.  * <tr><td>delay</td><td>delay ms</td>     
  11.  * <tr><td>kind</td><td>kind [ info / success / error ]</td>     
  12.  * </table>
  13.  * @param props {object} props <opt-param />
  14.  */
  15. function alert(propsOpt){
  16.     let props = propsOpt || {}
  18.     if(!alertElement) alertElement = div().poa().ac("alertelement")
  20.     let de = document.documentElement
  22.     de.style.position = "relative"
  24.     de.appendChild(alertElement.e)
  26.     alertElement.html(props.msg || "Alert!").dispi().rc("info success error")
  28.     if(props.kind) alertElement.ac(props.kind)
  30.     if(alertTimeout) clearTimeout(alertTimeout)
  31.     alertTimeout = setTimeout(_ => {        
  32.         alertElement.x().dispn()
  33.     }, props.delay || 3000)
  34. }
  36. /**
  37.  * get a value from localStorage
  38.  * @param path {string} path 
  39.  * @param defaultValue {any} default value ( returned if stored value is not available or non parsable )
  40.  */
  41. function getLocal(path, defaultValue){
  42.     let stored = localStorage.getItem(path)
  43.     if(stored){
  44.         try{
  45.             let value = JSON.parse(stored)
  46.             return value
  47.         }catch(err){}
  48.     }
  49.     return defaultValue
  50. }
  52. /**
  53.  * store a value in localStorage
  54.  * @param path {string} path 
  55.  * @param value {any} value ( should be JSON serializable )
  56.  * @returns true on success, false otherwise
  57.  */
  58. function storeLocal(path, value){
  59.     try{
  60.         localStorage.setItem(path, JSON.stringify(value))
  61.         return true
  62.     }catch(err){}  
  63.     return false  
  64. }
  66. /**
  67.  * translate option initializer
  68.  * @param obj {*} dicionary / array / string
  69.  */
  70. function translateOption(obj){
  71.     if(obj instanceof Array){
  72.         return ({
  73.             value: obj[0],
  74.             display: obj[1]
  75.         })
  76.     }    
  77.     if(typeof obj == "string"){
  78.         return ({
  79.             value: obj,
  80.             display: obj
  81.         })
  82.     }
  83.     return obj
  84. }
  86. /**
  87.  * Classes
  88.  */
  90. /**
  91.  * base class of smartdom wrapper
  92.  * <props-opt></props-opt>
  93.  * @param props {object} props <opt-param />
  94.  */
  95. class SmartDomElement_{
  96.     constructor(props){        
  97.         this.props = props || {}
  99.         let tag = this.props.tag || "div"
  101.         this.id = this.props.id
  103.         this.childs = []
  105.         this.e = document.createElement(tag)
  107.         this.state = {}
  108.     }
  110.     /**
  111.      * append childs
  112.      * @param childs {...any} child elements, either single elements or arrays of elements
  113.      * @example
  114.      * div().a(
  115.      *  div().html("Single div appended."),
  116.      *  [
  117.      *      div().html("Div appended as array element 0."),
  118.      *      div().html("Div appended as array element 1."),
  119.      *  ]
  120.      * )
  121.      */
  122.     a(...childs){
  123.         let childList = []
  125.         for(let child of childs){
  126.             if(child instanceof Array) childList = childList.concat(child)
  127.             else childList.push(child)
  128.         }
  130.         let index = 0
  132.         for(let child of childList){
  133.             child.parent = this
  134.             child.index = index++
  135.             this.childs.push(child)
  136.             this.e.appendChild(child.e)
  137.         }        
  139.         return this
  140.     }
  142.     /**
  143.      * add style and return the instance
  144.      * @param name {string} style name 
  145.      * @param value {string} style value 
  146.      */
  147.     addStyle(name, value){
  148.         this.e.style[name] = value
  149.         return this
  150.     }
  152.     /**
  153.      * add classes
  154.      * @param classes {string} space separated list of classes
  155.      */
  156.     ac(classes){
  157.         for(let klass of classes.split(" ")) this.e.classList.add(klass)
  158.         return this
  159.     }
  161.     /**
  162.      * remove classes
  163.      * @param classes {string} space separated list of classes
  164.      */
  165.     rc(classes){
  166.         for(let klass of classes.split(" ")) this.e.classList.remove(klass)
  167.         return this
  168.     }
  170.     /**
  171.      * set HTML element attribute
  172.      * @param name {string} name 
  173.      * @param value {any} value 
  174.      */
  175.     setAttribute(name, value){
  176.         this.e.setAttribute(name, value)
  177.         return this
  178.     }
  180.     /**
  181.      * get HTML element attribute
  182.      * @param name {string} name 
  183.      */
  184.     getAttribute(name){
  185.         return this.e.getAttribute(name)
  186.     }
  188.     /**
  189.      * return element value
  190.      */
  191.     value(){
  192.         return this.e.value
  193.     }
  195.     /**
  196.      * set element value
  197.      * @param value {any} value 
  198.      */
  199.     setValue(value){
  200.         this.e.value = value
  201.     }
  203.     /**
  204.      * add event listeners with a callback
  205.      * @param events {string} events separated by space
  206.      * @param callback {function} callback
  207.      */
  208.     ae(events, callback){
  209.         for(let event of events.split(" ")){
  210.             this.e.addEventListener(event, callback)
  211.         }
  212.     }
  214.     /**
  215.      * delete content of element
  216.      */
  217.     x()        {this.e.innerHTML="";return this}
  218.     /**
  219.      * set display
  220.      * @param x {string} display
  221.      */
  222.     disp(x)    {return this.addStyle("display", x)}
  223.     /**
  224.      * display none     
  225.      */
  226.     dispn()    {return this.disp("none")}
  227.     /**
  228.      * display initial     
  229.      */
  230.     dispi()    {return this.disp("initial")}
  231.     /**
  232.      * set width
  233.      * @param x {number} width in pixels
  234.      */
  235.     w(x)        {return this.addStyle("width", x + "px")}
  236.     /**
  237.      * set height
  238.      * @param x {number} height in pixels
  239.      */
  240.     h(x)        {return this.addStyle("height", x + "px")}    
  241.     /**
  242.      * set padding
  243.      * @param x {number} padding in pixels
  244.      */
  245.     pad(x)      {return this.addStyle("padding", x + "px")}
  246.     /**
  247.      * set color
  248.      * @param x {string} color
  249.      */
  250.     c(x)        {return this.addStyle("color", x)}
  251.     /**
  252.      * set background-color
  253.      * @param x {string} background color
  254.      */
  255.     bc(x)       {return this.addStyle("backgroundColor", x)}
  256.     /**
  257.      * set position
  258.      * @param x {string} position
  259.      */
  260.     pos(x)       {return this.addStyle("position", x)}
  261.     /**
  262.      * position relative
  263.      */
  264.     por()        {return this.pos("relative")}
  265.     /**
  266.      * position absolute
  267.      */
  268.     poa()        {return this.pos("absolute")}
  269.     /**
  270.      * set inner html
  271.      * @param x {string} HTML string
  272.      */
  273.     html(x)     {this.e.innerHTML = x;return this}
  275.     /**
  276.      * the id used as a path element
  277.      */
  278.     pathId(){
  279.         return this.id
  280.     }
  282.     /**
  283.      * list of path ids leading to the element
  284.      */
  285.     pathList(){
  286.         let pathList = []
  287.         let current = this
  288.         while(current){
  289.             if(current.pathId()) pathList.unshift(current.pathId())
  290.             current = current.parent
  291.         }
  292.         return pathList
  293.     }
  295.     /**
  296.      * path to the element
  297.      */
  298.     path(){
  299.         let pathList = this.pathList()
  300.         if(!pathList.length) return null
  301.         return pathList.join("/")
  302.     }
  304.     /**
  305.      * store path of the element, by default it is the element path,
  306.      * but this can be overridden with props.forceStorePath
  307.      */
  308.     storePath(){
  309.         if(this.props.forceStorePath) return this.props.forceStorePath
  310.         return this.path()
  311.     }
  313.     /**
  314.      * store the element state in localStorage if it has a path
  315.      */
  316.     storeState(){
  317.         if(this.storePath()){
  318.             storeLocal(this.storePath(), this.state)
  319.         }
  320.     }
  322.     /**
  323.      * retrieve the element state from localStorage if it has a path
  324.      */
  325.     retrieveState(){
  326.         if(this.storePath()){
  327.             this.state = getLocal(this.storePath(), this.state)
  328.         }
  329.     }
  331.     /**
  332.      * initialize state from props, should be implemented by derived classes
  333.      */
  334.     initState(){
  335.         // abstract
  336.     }
  338.     /**
  339.      * build element from scratch, should be implemented by derived classes
  340.      */
  341.     build(){
  342.         // abstract
  343.     }
  345.     /**
  346.      * mount element
  347.      */
  348.     mount(){        
  349.         this.retrieveState()
  350.         this.initState()
  351.         this.build()
  352.         this.mountChilds()
  353.     }
  355.     /**
  356.      * mount childs of the element
  357.      */
  358.     mountChilds(){
  359.         for(let child of this.childs){
  360.             child.mount()
  361.         }
  362.     }
  363. }
  365. /**
  366.  * wrapper class for HTML div element
  367.  */
  368. class div_ extends SmartDomElement_{
  369.     constructor(props){
  370.         super(props)
  371.     }
  372. }
  373. /**
  374.  * returns a new div_ instance
  375.  * @param props {object} props <opt-param />
  376.  * @example
  377.  * // creates a div with content "I'm a div."
  378.  * div().html("I'm a div.")
  379.  */
  380. function div(props){return new div_(props)}
  382. /**
  383.  * wrapper class for HTML button element
  384.  */
  385. class Button_ extends SmartDomElement_{
  386.     /**
  387.      * @param caption {string} caption 
  388.      * @param callback {function} callback
  389.      * @param props {object} props <opt-param />
  390.      */
  391.     constructor(caption, callback, props){
  392.         super({...props, ...{
  393.             tag: "button"
  394.         }})
  396.         this.html(caption)
  398.         if(callback) this.ae("click", callback)
  399.     }
  400. }
  401. /**
  402.  * returns a new Button_ instance
  403.  * @param caption {string} caption 
  404.  * @param callback {function} callback
  405.  * @param props {object} props <opt-param />
  406.  */
  407. function Button(caption, callback, props){return new Button_(caption, callback, props)}
  409. /**
  410.  * wrapper for HTML input element
  411.  * @param props (object) props <opt-param /> 
  412.  */
  413. class input_ extends SmartDomElement_{
  414.     /**
  415.      * <props-opt></props-opt>     
  416.      * <table class="classtable">     
  417.      * <tr><td>type</td><td>input type [ default: "text" ]</td>     
  418.      * </table>
  419.      */
  420.     constructor(props){
  421.         super({...props, ...{
  422.             tag: "input"
  423.         }})
  424.         this.setAttribute("type", props.type || "text")
  425.     }
  426. }
  427. /**
  428.  * returns a new input_ instance
  429.  * @param props {object} props <opt-param /> 
  430.  */
  431. function input(props){return input_(props)}
  433. /**
  434.  * wrapper class for HTML table element
  435.  * @param props {object} props <opt-param />
  436.  */
  437. class table_ extends SmartDomElement_{
  438.     /**
  439.      * <props-opt></props-opt>
  440.      * <table class="classtable">     
  441.      * <tr><td>cellpadding</td><td>cell padding</td>     
  442.      * <tr><td>cellspacing</td><td>cell spacing</td>     
  443.      * <tr><td>border</td><td>border width</td>     
  444.      * </table>
  445.      */
  446.     constructor(props){
  447.         super({...props, ...{
  448.             tag: "table"
  449.         }})
  450.         if(typeof this.props.cellpadding != "undefined") this.setAttribute("cellpadding", this.props.cellpadding)
  451.         if(typeof this.props.cellspacing != "undefined") this.setAttribute("cellspacing", this.props.cellspacing)
  452.         if(typeof this.props.border != "undefined") this.setAttribute("border", this.props.border)
  453.     }
  454. }
  455. /**
  456.  * returns a new table_ instance
  457.  * @param props {object} props <opt-param /> 
  458.  */
  459. function table(props){return new table_(props)}
  461. /**
  462.  * wrapper class for HTML table head element
  463.  */
  464. class thead_ extends SmartDomElement_{
  465.     constructor(props){
  466.         super({...props, ...{
  467.             tag: "thead"
  468.         }})
  469.     }
  470. }
  471. /**
  472.  * returns a new thead_ instance
  473.  * @param props {object} props <opt-param /> 
  474.  */
  475. function thead(props){return new thead_(props)}
  477. /**
  478.  * wrapper class for HTML table body element
  479.  */
  480. class tbody_ extends SmartDomElement_{
  481.     constructor(props){
  482.         super({...props, ...{
  483.             tag: "tbody"
  484.         }})
  485.     }
  486. }
  487. /**
  488.  * returns a new tbody_ instance
  489.  * @param props {object} props <opt-param /> 
  490.  */
  491. function tbody(props){return new tbody_(props)}
  493. /**
  494.  * wrapper class for HTML table row element
  495.  */
  496. class tr_ extends SmartDomElement_{
  497.     constructor(props){
  498.         super({...props, ...{
  499.             tag: "tr"
  500.         }})
  501.     }
  502. }
  503. /**
  504.  * returns a new tr_ instance
  505.  * @param props {object} props <opt-param /> 
  506.  */
  507. function tr(props){return new tr_(props)}
  509. /**
  510.  * wrapper class for HTML select element
  511.  */
  512. class select_ extends SmartDomElement_{
  513.     constructor(props){
  514.         super({...props, ...{
  515.             tag: "select"
  516.         }})
  517.     }
  518. }
  519. /**
  520.  * returns a new select_ instance
  521.  * @param props {object} props <opt-param /> 
  522.  */
  523. function select(props){return new select_(props)}
  525. /**
  526.  * wrapper class for HTML option element
  527.  * @param props {object} props <opt-param />, see class constructor 
  528.  */
  529. class option_ extends SmartDomElement_{
  530.     /**
  531.      * <props-opt></props-opt>
  532.      * <table class="classtable">     
  533.      * <tr><td>value</td><td>option value</td>     
  534.      * <tr><td>display</td><td>option display</td>     
  535.      * </table>
  536.      */
  537.     constructor(props){
  538.         super({...props, ...{
  539.             tag: "option"
  540.         }})
  542.         if(this.props.value) this.setAttribute("value", this.props.value)
  543.         if(this.props.display) this.html(this.props.display)
  544.     }
  545. }
  546. /**
  547.  * returns a new option_ instance
  548.  * @param props {object} props <opt-param />, see class constructor
  549.  */
  550. function option(props){return new option_(props)}
  552. /**
  553.  * wrapper class for HTML checkbox input element
  554.  * @param props {object} props <opt-param />, see class constructor 
  555.  */
  556. class CheckBoxInput_ extends input_{
  557.     /**
  558.      * <props-opt></props-opt>
  559.      * <table class="classtable">     
  560.      * <tr><td>forceChecked</td><td>boolean, force checked status to true or false</td>     
  561.      * <tr><td>changeCallback</td><td>change callback</td>     
  562.      * </table>
  563.      */
  564.     constructor(props){
  565.         super({...props, ...{
  566.             type: "checkbox"
  567.         }})
  569.         this.ae("change", this.changed.bind(this))
  570.     }
  572.     /**
  573.      * handle change event
  574.      */
  575.     changed(){
  576.         this.state.checked = this.e.checked
  577.         this.storeState()
  579.         if(this.props.changeCallback) this.props.changeCallback(this.state.checked)
  580.     }
  582.     /**
  583.      * init state
  584.      */
  585.     initState(){        
  586.         if(typeof this.props.forceChecked != "undefined") this.state.checked = this.props.forceChecked
  587.     }
  589.     /**
  590.      * build
  591.      */
  592.     build(){
  593.         this.e.checked = this.state.checked
  594.     }
  595. }
  596. /**
  597.  * returns a new CheckBoxInput_ instance
  598.  * @param props {object} props <opt-param />, see class constructor
  599.  */
  600. function CheckBoxInput(props){return new CheckBoxInput_(props)}
  602. /**
  603.  * wrapper class for HTML table cell element
  604.  */
  605. class td_ extends SmartDomElement_{
  606.     constructor(props){
  607.         super({...props, ...{
  608.             tag: "td"
  609.         }})
  610.     }
  611. }
  612. /**
  613.  * returns a new td_ instance
  614.  * @param props {object} props <opt-param /> 
  615.  */
  616. function td(props){return new td_(props)}
  618. /**
  619.  * combo
  620.  * @param props {object} props <opt-param />, see class constructor 
  621.  */
  622. class Combo_ extends select_{
  623.     /**
  624.      * <props-opt></props-opt>
  625.      * <table class="classtable">     
  626.      * <tr><td>forceOptions</td><td>list of options, allowed option formats {value: "foo", display: "bar"} / ["foo", "bar"] / "foo" ( display will also be "foo")</td>     
  627.      * <tr><td>forceSelected</td><td>selected option value</td>     
  628.      * <tr><td>changeCallback</td><td>change callback</td>     
  629.      * </table>
  630.      */
  631.     constructor(props){
  632.         super({...props, ...{            
  633.         }})
  635.         this.ae("change", this.changed.bind(this))
  636.     }
  638.     /**
  639.      * handle change event
  640.      */
  641.     changed(){
  642.         this.state.selected = this.value()
  644.         this.storeState()
  646.         if(this.props.changeCallback) this.props.changeCallback(this.state.selected)
  647.     }
  649.     /**
  650.      * init state
  651.      */
  652.     initState(){
  653.         if(!this.state.options) this.state.options = []
  654.         if(this.props.forceOptions) this.state.options = this.props.forceOptions
  655.         if(this.props.forceSelected) this.state.selected = this.props.forceSelected
  656.         this.translateOptions()
  657.         this.storeState()
  658.     }
  660.     /**
  661.      * translate options
  662.      */
  663.     translateOptions(){
  664.         this.state.options = this.state.options.map(opt => translateOption(opt))
  665.     }
  667.     /**
  668.      * build
  669.      */
  670.     build(){
  671.         this.translateOptions()
  672.         this.x().a(
  673.             this.state.options.map(
  674.                 opt => {
  675.                     let o = option(opt)
  676.                     if(opt.value == this.state.selected) o.setAttribute("selected", true)
  677.                     return o
  678.                 }
  679.             )
  680.         )
  681.     }
  682. }
  683. /**
  684.  * returns a new Combo_ instance
  685.  * @param props {object} props <opt-param />, see class constructor
  686.  */
  687. function Combo(props){return new Combo_(props)}
  689. /**
  690.  * options table
  691.  * @param props {object} see class constructor 
  692.  */
  693. class OptionsTable_ extends table_{
  694.     /**     
  695.      * props should have an options field
  696.      * <table class="classtable">     
  697.      * <tr><td>options</td><td>array of input elements,
  698.      * each input element should have a display field in its props, telling the name of the option</td>          
  699.      * </table>
  700.      */
  701.     constructor(props){
  702.         super({...props, ...{
  703.             
  704.         }})        
  705.     }
  707.     /**
  708.      * build
  709.      */
  710.     build(){        
  711.         this.a(
  712.             thead().a(
  713.                 tr().a(
  714.                     td().html("Option Name"),
  715.                     td().html("Option Value"),
  716.                 )
  717.             ),
  718.             tbody().a(
  719.                 this.props.options.map(option => tr().a(
  720.                     td().html(option.props.display),
  721.                     td().a(option),
  722.                 ))                
  723.             )
  724.         )
  725.     }
  726. }
  727. /**
  728.  * returns a new OptionsTable_ instance
  729.  * @param props {object} props, see class constructor
  730.  */
  731. function OptionsTable(props){return new OptionsTable_(props)}
  733. module.exports = {
  734.     div: div,
  735.     input: input,
  736.     CheckBoxInput: CheckBoxInput,
  737.     table: table,
  738.     thead: thead,
  739.     tbody: tbody,
  740.     tr: tr,
  741.     td: td,
  742.     OptionsTable: OptionsTable,
  743.     select: select,
  744.     option: option,
  745.     Combo: Combo,
  746.     Button: Button,
  747.     alert: alert,
  748. }