toloframework/ker/mod/wdg.layout-stack.js

Javascript/HTML/CSS compiler for Firefox OS or nodewebkit apps using modules in the nodejs style.

/**
 * @module wdg.layout-stack
 *
 * @description
 *
 *
 * @example
 * var Layout = require('wdg.layout-stack');
 * var layout = new Layout({
 *   value: "main",
 *   content: {
 *     main: ...,
 *     page: ...
 *   }
 * });
 */

var $ = require( "dom" );
var DB = require( "tfw.data-binding" );
var Hash = require( "tfw.hash-watcher" );


var LayoutStack = function ( opts ) {
  var that = this;

  var elem = $.elem( this, 'div', 'wdg-layout-stack' );
  var children = {};

  var onHashChange = function ( args, hash ) {
    var rx = that.hash;
    if ( !rx ) return;
    var m = rx.exec( hash );
    if ( !m ) return;
    if ( m.length < 2 ) return;
    that.value = m[ 1 ];
    that.args = args;
  };
  DB.propArray( this, 'args' );
  DB.propString( this, 'value' )( function ( v ) {
    var key, val;
    for ( key in children ) {
      val = children[ key ];
      if ( typeof val.element === 'function' ) {
        val = val.element();
      } else if ( typeof val.element !== 'undefined' ) {
        val = val.element;
      }
      val = val.parentNode;
      if ( val ) {
        if ( key == v ) {
          $.addClass( val, 'fade-in' );
          $.removeClass( val, 'fade-out' );
        } else {
          $.addClass( val, 'fade-out' );
          $.removeClass( val, 'fade-in' );
        }
      }
    }
  } );
  DB.propRegexp( this, 'hash' )( function () {
    Hash( onHashChange );
  } );
  DB.prop( this, 'content' )( function ( v ) {
    if ( Array.isArray( v ) ) {
      // Convert array into map.
      // Each item should have the `$key` property.
      // If not, an incremental ID will be provided.
      var obj = {};
      var firstKey;
      v.forEach( function ( itm, idx ) {
        if ( typeof itm.$key === 'undefined' ) itm.$key = idx;
        obj[ itm.$key ] = itm;
        if ( typeof firstKey === 'undefined' ) firstKey = itm.$key;
      } );
      v = obj;
      DB.set( that, 'value', firstKey );
    }

    // Clearing current element to add children.
    $.clear( elem );

    var key, val, container;
    for ( key in v ) {
      val = v[ key ];
      if ( typeof val.element === 'function' ) {
        val = val.element();
      } else if ( typeof val.element !== 'undefined' ) {
        val = val.element;
      }
      container = $.div( [ val ] );
      if ( typeof val.$scroll !== 'undefined' ) {
        $.addClass( container, 'scroll' );
      }
      $.add( elem, container );
    }

    children = v;
    DB.fire( that, 'value' );
  } );
  DB.propAddClass( this, 'wide' );
  DB.propRemoveClass( this, 'visible', 'hide' );

  opts = DB.extend( {
    args: [],
    value: '',
    content: {},
    hash: null,
    wide: false,
    visible: true
  }, opts, this );
};


module.exports = LayoutStack;