asq-text-input.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../asq-base/asq-base.html">


<!--
`asq-text-input` is a styled single-line input field. It can be used for simple
text questions. 

##### Example
    <asq-text-input label="value">
      <asq-stem><h5>What's value of a[3]?</h5></asq-stem>
      <pre><code>
        char a[27];
        char *b = "abc";
        strcpy(a, b);</code></pre>
      <asq-solution hidden>\0</asq-solution>
    </asq-text-input>


@element asq-text-input
@group ASQ Elements
@blurb Element a styled single-line input field. It wraps the `paper-input` element.
@homepage http://github.com/ASQ-USI/asq-text-input
-->
<polymer-element name="asq-text-input">

  <template>
    <style>
      :host {
        display: block;
      }
    </style>

    <content select="asq-stem"></content>

    <content></content>

    <div>
      <paper-input label="{{label}}" floatingLabel="{{floatingLabel}}" 
          value="{{value}}" disabled="{{disabled}}"></paper-input>
    </div>

  </template>

  <script>
    (function() {
    
      var p = {

        publish: {

          /**
           * The label for this input. It normally appears as grey text inside
           * the text input and disappears once the user enters text.
           *
           * @attribute label
           * @type string
           * @default ''
           */
          label: '',

          /**
           * If true, the label will "float" above the text input once the
           * user enters text instead of disappearing.
           *
           * @attribute floatingLabel
           * @type boolean
           * @default false
           */
          floatingLabel: false,

          /**
           * Set to true to style the element as disabled.
           *
           * @attribute disabled
           * @type boolean
           * @default false
           */
          disabled: {value: false, reflect: true},

          /**
           * The current value of the input.
           * 
           * @attribute value
           * @type String
           * @default ''
           */
          value: '',
        },


        // Overwrite defalut value for all instances of `asq-text-input`, which are question type.
        isASQQuestionTypeElement : true, 

        created: function(){
          document.addEventListener('asq-ready', function(evt){
            try {
              this.subscribeToEvents(evt.detail.asqEventBus)
            } catch(err){
              console.debug('failed to subscribeToEvents');
            }
          }.bind(this));
        },

        onQuestionType: function(evt){
          if(!evt || ! evt.questionType) return;

          if(evt.questionType == 'asq-text-input'){
            if(evt.type == "restorePresenter"){
              if(this.role !== this.roles.PRESENTER) return;
              this.onRestorePresenter(evt);
            }
            else if(evt.type == "restoreViewer"){
              if(this.role !== this.roles.VIEWER) return;
              this.onRestoreViewer(evt);
            }
          }
        },

        onRestorePresenter: function(evt){

        },

        onRestoreViewer: function(evt){
          evt.questions.forEach(function(q){
            console.log(q)
            if(q.uid != this.uid) return;
            this.value = q.value;
          }.bind(this));
        },

        subscribeToEvents: function(eventBus){
          eventBus.on('asq:question_type', this.onQuestionType.bind(this));
        },

        /**
         * The `submit` method returns an object called *detail* that respresents the submission of this question. The *detail* object has the following structure:

             {
                questionUid: this.uid,
                timestamp: new Date(),
                submission: submission
             }
         * Only enabled when the `role` of the element is <b>viewer</b>.
         *
         * @method submit
         */
        submit: function() {
          if ( this.role !== this.roles.VIEWER ) {
            return;
          }

          if ( ! this.value ) {
            this.value = "";
          }

          submission = this.value.replace(/[\s]+/g, " ").trim();
          
          return {
            questionUid: this.uid,
            timestamp: new Date(),
            submission: submission
          };
        }
      
      }

      ASQ.asqify(p, true);
      Polymer('asq-text-input', p);
    })();
  </script>
</polymer-element>