youhk
/
youhk_test_repository


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: index-d3.js</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: index-d3.js</h1>

    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>/**
 * chatUI constructor
 * @constructor
 * @param {d3-selection} container - Container for the chat interface.
 * @return {object} chatUI object
 */
var chatUI = (function (container) {
  
  var module = {};

  module.container = container.append('div').attr('id', 'cb-container');
  module.config = null;
  module.bubbles = [];
  module.ID = 0;
  module.keys = {};
  module.types = {};
  module.inputState = false;
  module.height = 0;
  module.scroll = module.container.append('div').attr('id', 'cb-flow');
  module.flow = module.scroll.append('div').attr('class', 'cb-inner');
  module.input = module.container.append('div').attr('id', 'cb-input').style('display', 'none');
  module.input.append('div').attr('id','cb-input-container').append('input').attr('type', 'text');
  module.input.append('button').text('+');


  /**
   * updateContainer should be called when height or width changes of the container changes
   * @memberof chatUI
   */
   module.updateContainer = function(){
      module.height = module.container.node().offsetHeight;
      module.flow.style('padding-top', module.height+'px');
      module.scroll.style('height', (module.height-((module.inputState==true)?77:0))+'px');
      module.scrollTo('end');
  };

  /**
   * @memberof chatUI
   * @param {object} options - object containing configs {type:string (e.g. 'text' or 'select'), class:string ('human' || 'bot'), value:depends on type}
   * @param {function} callback - function to be called after everything is done
   * @return {integer} id - id of the bubble 
   */
  module.addBubble = function (options, callback) {
    callback = callback || function () { };

    if (!(options.type in module.types)) {
      throw 'Unknown bubble type';
    } else {

      module.ID++;
      var id = module.ID;
      module.bubbles.push({
        id: id,
        type: options.type
        //additional info
      });
      module.keys[id] = module.bubbles.length - 1;

      //segment container
      var outer = module.flow.append('div')
        .attr('class', 'cb-segment cb-' + options.class + ' cb-bubble-type-' + options.type)
        .attr('id', 'cb-segment-' + id);

      //speaker icon
      outer.append('div').attr('class', 'cb-icon');

      var bubble = outer.append('div')
        .attr('class', 'cb-bubble ' + options.class)
        // .style("height", "50px")
        .append('div')
        .attr('class', 'cb-inner');


      outer.append('hr');

      module.types[options.type](bubble, options, callback);

      module.scrollTo('end');

      return module.ID;
    }
  };

  /**
   * @memberof chatUI
   * @param {d3-selection} bubble - d3 selection of the bubble container
   * @param {object} options - object containing configs {type:'text', class:string ('human' || 'bot'), value:array of objects (e.g. [{label:'yes'}])}
   * @param {function} callback - function to be called after everything is done
   */
  module.types.select = function(bubble, options, callback){
    bubble.selectAll('.cb-choice').data(options.value).enter().append('div')
      .attr('class', 'cb-choice')
      .text(function(d){ return d.label; })
      .on('click', function(d){
        d3.select(this).classed('cb-active', true);
        d3.select(this.parentNode).selectAll('.cb-choice').on('click', function(){});
        callback(d);
      });
  };

  /**
   * @memberof chatUI
   * @param {d3-selection} bubble - d3 selection of the bubble container
   * @param {object} options - object containing configs {type:'text', class:string ('human' || 'bot'), value:string (e.g. 'Hello World')}
   * @param {function} callback - function to be called after everything is done
   */
  module.types.text = function (bubble, options, callback) {
    if (('delay' in options) &amp;&amp; options.delay) {
      var animatedCircles = '&lt;div class="circle">&lt;/div>&lt;div class="circle">&lt;/div>&lt;div class="circle">&lt;/div>';
      bubble.append('div')
        .attr('class', 'cb-waiting')
        .html(animatedCircles);

      setTimeout(function () {

        bubble.select(".cb-waiting").remove();
        module.appendText(bubble, options, callback);

      }, (isNaN(options.delay) ? 1000 : options.delay));
    } else {
      module.appendText(bubble, options, callback);
    }

  };

  /**
   * Helper Function for adding text to a bubble
   * @memberof chatUI
   * @param {d3-selection} bubble - d3 selection of the bubble container
   * @param {object} options - object containing configs {type:'text', class:string ('human' || 'bot'), value:string (e.g. 'Hello World')}
   * @param {function} callback - function to be called after everything is done
   */
  module.appendText = function(bubble, options, callback) {
    bubble.attr('class', 'bubble-ctn-' + options.class).append('p')
      .html(options.value)
      .transition()
      .duration(200)
      .style("width", "auto")
      .style('opacity', 1);

    chat.scrollTo('end');

    callback();
  };

  /**
   * Showing the input module and set cursor into input field
   * @memberof chatUI
   * @param {function} submitCallback - function to be called when user presses enter or submits through the submit-button
   * @param {function} typeCallback - function to when user enters text (on change)
   */
  module.showInput = function (submitCallback, typeCallback) {
    module.inputState = true;

    if (typeCallback) {
      module.input.select('input')
        .on('change', function () {
          typeCallback(d3.select(this).node().value);
        });
    } else {
      module.input.select('input').on('change', function () { });
    }

    module.input.select('input').on('keyup', function () {
        if (d3.event.keyCode == 13) {
          submitCallback(module.input.select('input').node().value);
          module.input.select('input').node().value = '';      
        }
    });

    module.input.select('button')
      .on('click', function () {
        submitCallback(module.input.select('input').node().value);
        module.input.select('input').node().value = '';
      });

    module.input.style('display', 'block');
    module.updateContainer();

    module.input.select('input').node().focus();
    module.scrollTo('end');
  };

  /**
   * Hide the input module
   */
  module.hideInput = function () {
    module.input.select('input').node().blur();
    module.input.style('display', 'none');
    module.inputState = false;
    module.updateContainer();
    module.scrollTo('end');
  };

  /**
   * Remove a bubble from the chat
   * @memberof chatUI
   * @param {integer} id - id of bubble provided by addBubble
   */
  module.removeBubble = function (id) {
    module.flow.select('#cb-segment-' + id).remove();
    module.bubbles.splice(module.keys[id], 1);
    delete module.keys[id];
  };

  /**
   * Remove all bubbles until the bubble with 'id' from the chat
   * @memberof chatUI
   * @param {integer} id - id of bubble provided by addBubble
   */
  module.removeBubbles = function (id) {
    for (var i = module.bubbles.length - 1; i >= module.keys[id]; i--) {
      module.removeBubble(module.bubbles[i].id);
    }
  };

  /**
   * Remove all bubbles until the bubble with 'id' from the chat
   * @memberof chatUI
   * @param {integer} id - id of bubble provided by addBubble
   * @return {object} obj - {el:d3-selection, obj:bubble-data}
   */
  module.getBubble = function (id) {
    return {
      el: module.flow.select('#cb-segment-' + id),
      obj: module.bubbles[module.keys[id]]
    };
  };

  /**
   * Scroll chat flow
   * @memberof chatUI
   * @param {string} position - where to scroll either 'start' or 'end'
   */
  module.scrollTo = function (position) {
    //start
    var s = 0;
    //end
    if (position == 'end') {
      s = module.scroll.property('scrollHeight') - (window.innerHeight-77);
    }
    d3.select('#cb-flow').transition()
      .duration(300)
      .tween("scroll", scrollTween(s));

  };

  function scrollTween(offset) {
    return function () {
      var i = d3.interpolateNumber(module.scroll.property('scrollTop'), offset);
      return function (t) { module.scroll.property('scrollTop', i(t)); };
    };
  }

  function debouncer( func , _timeout ) {
    var timeoutID , timeout = _timeout || 200;
    return function () {
      var scope = this , args = arguments;
      clearTimeout( timeoutID );
      timeoutID = setTimeout( function () {
        func.apply( scope , Array.prototype.slice.call( args ) );
      } , timeout );
    };
  }

  //On Resize scroll to end
  d3.select(window).on('resize', debouncer(function(e){
      module.updateContainer();
  }, 200));

  module.updateContainer();

  return module;
});</code></pre>
        </article>
    </section>


</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="chatUI.html">chatUI</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Mon Nov 20 2017 08:30:15 GMT+0100 (CET)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>