asq-css-select-q.html

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

<link rel="import" href="elements/asq-css-select-q-viewer/asq-css-select-q-viewer.html">
<link rel="import" href="elements/asq-css-select-q-presenter/asq-css-select-q-presenter.html">


<!--
`asq-css-select-q` is aimed at teaching selectors to students. The way it works is by passing a string containing the html tree (without breaks, it will be visually represented by showing one tag at each line) and allowing students to write selectors and visually inspect the resulting selection.

`asq-css-select-q` is a qustion that allows students to practice with css selectors. The attribute *htmlcode* is used to set the piece of html code.
##### Example

Examples:
    
    <asq-css-select-q role="viewer" htmlcode="<ul><li class='aclass'><ul id='aid'><li></li><li></li></ul></li><div><p></p><p class='bclass'></p></div></li></ul>">
      <asq-stem><h3>Select all 'li' elements:</h3></asq-stem>
    </asq-css-select-q>


@element asq-asq-css-select-q
@demo demo/index.html
@group ASQ Elements
@blurb ASQ buckets questions.
@homepage http://github.com/ASQ-USI-Elements/asq-css-select-q
-->
<dom-module id="asq-css-select-q">

  <template>
    <template is="dom-if" if="{{hasRole(role, roles.VIEWER)}}" restamp="true">
      <asq-css-select-q-viewer 
        role="viewer" 
        uid="[[uid]]"
        htmlcode="{{htmlcode}}" 
        disabled="{{disabled}}"
        value="{{value}}" 
        event-bus="[[eventBus]]">
        <content></content>
      </asq-css-select-q-viewer>
    </template>

    <template is="dom-if" if="{{hasRole(role, roles.PRESENTER)}}" restamp="true">
      <asq-css-select-q-presenter 
        role="presenter" 
        uid="[[uid]]" 
        htmlcode="{{htmlcode}}" 
        disabled="{{disabled}}"
        value="{{value}}" 
        event-bus="[[eventBus]]">
        <content></content>
      </asq-css-select-q-presenter>
    </template>

  </template>

  <script>
    Polymer({
      is: 'asq-css-select-q',

      behaviors: [ASQ.asqQuestionElementBehavior],

      properties: {

        disabled: { 
          type: Boolean,
          value: false,
          notify: true, 
          reflectToAttribute: true
        },

        /**
         * Event bus to communicate with ASQ.
         */
        eventBus: {
          type: Object,
          notify: true
        },

        /**
         * A string with html code that will be converted to a 'DOM' tree the selectors are going to be applied on..
         */
        htmlcode: { 
          type: String,
          value: '',
          notify: true
        },


        /**
         * Get or set the current input value.
         */
        value: { 
          type: String,
          value: ''
        },

        /**
         * The label for this input. It normally appears as grey text inside
         * the text input and disappears once the user enters text.
         */
        label: {
          type: String,
          value: 'selector'
        }
      },

      created: function () {
        document.addEventListener('asq-ready', function (evt) {
          this.eventBus = evt.detail.asqEventBus
        }.bind(this));
      },

      submit: function () {
        if (this.role == this.roles.VIEWER) {
          var el = this.$$('asq-css-select-q-viewer');
          if (!el) {
            throw new Error('submit(): expected asq-css-select-q-viewer element to exist');
          }
          return el.submit();
        }
      }
    });
  </script>
</dom-module>