asq-order-q.html

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

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


<!--
`asq-order-q` allows you to define ordering questions.

#### Examples

    <asq-order-q sortable="[label]">
      <div label name="ready">ready</div>
      <div label name="attached">attached</div>
      <div label name="created">created</div>
      <div label name="detached">detached</div>
    </asq-order-q>


@element asq-order-q
@demo demo/index.html
@group ASQ Elements
@blurb ASQ order question.
@homepage http://github.com/ASQ-USI-Elements/asq-order-q
-->
<dom-module id="asq-order-q">
  <style>

  </style>
  <template>
    <template is="dom-if" if="{{hasRole(role, roles.VIEWER)}}" restamp>
      <asq-order-q-viewer
        role="viewer" 
        uid="[[uid]]"
        value="{{value}}"
        disabled="{{disabled}}"
        event-bus="[[eventBus]]"
        sortable="[[sortable]]"
        attr-for-sorted="[[attrForSorted]]"
        sorted-class="[[sortedClass]]"
        sorted-attribute="[[sortedAttribute]]"
        disabled-class="[[disabledClass]]"
        on-dragging-class="[[onDraggingClass]]"
        over-class="[[overClass]]"
        excluded-local-names="[[excludedLocalNames]]">
        <content></content>
      </asq-order-q-viewer>
    </template>

    <template is="dom-if" if="{{hasRole(role, roles.PRESENTER)}}" restamp>
      <asq-order-q-presenter
        role="presenter" 
        uid="[[uid]]"
        value="{{value}}"
        disabled="{{disabled}}"
        event-bus="[[eventBus]]"
        sortable="[[sortable]]"
        attr-for-sorted="[[attrForSorted]]"
        sorted-class="[[sortedClass]]"
        sorted-attribute="[[sortedAttribute]]"
        disabled-class="[[disabledClass]]"
        on-dragging-class="[[onDraggingClass]]"
        over-class="[[overClass]]"
        excluded-local-names="[[excludedLocalNames]]">
        <content></content>
      </asq-order-q-presenter>
    </template>
  </template>
  <script>

    Polymer({
      is: 'asq-order-q',

      behaviors: [
        ASQ.asqQuestionElementBehavior
      ],

      properties: {

        /**
         * The array of ordered items
         */
        value: {
          type: Array,
          notify: true,
          observer: "_valueChanged",
        },


        disabled: { 
          type: Boolean,
          value: false,
          notify: true, 
          reflectToAttribute: true
        },
        /**
         * Event bus to communicate with ASQ
         */
        eventBus: {
          type: Object,
          notify: true
        },

        /**
         * 
         * This is a CSS selector string. Define the items to be
         * sorted.
         *
         */
        sortable: String,

        /**
         * 
         * The unique attribute value of elements to be 
         * sorted.
         *
         * @attribute attrForSorted
         * @type {string}
         */
        attrForSorted: {
          type: String,
          value: 'name'
        },

        /**
         * 
         * The class to set on elements when matched.
         *
         * @attribute sortedClass
         * @type {string}
         */
        sortedClass: {
          type: String,
          value: 'asq-sorted'
        },

        /**
         * 
         * The attribute to set on elements when sorted.
         *
         * @attribute sortedAttribute
         * @type {string}
         */
        sortedAttribute: {
          type: String,
          value: null
        },

        disabledClass: {
          type: String,
          value: 'asq-disabled'
        },

        /**
         * The class added when dragging an item.
         */
        onDraggingClass: {
          type: String,
          value: 'dragging',
          notify: true
        },

        /**
         * The class added to an item when there 
         * is another item which is over it.
         */
        overClass: {
          type: String,
          value: 'over'
        },

        /**
         * The set of excluded elements where the key is the `localName` 
         * of the element that will be ignored from the item list.
         *
         * @type {object}
         * @default {template: 1}
         */
        excludedLocalNames: {
          type: Object,
          value: function() {
            return {
              'template': 1
            };
          }
        }

      },

      get _api() {
        return this.$$('asq-order-q-' + this.role);
      },

      _valueChanged: function(newVal) {
        this.fire('questioninput', newVal)
      },

      /**
       * Collect answers from inner `asq-option`s and orgnize them 
       * into an object.
       *

        {
          questionUid: this.uid,
          timestamp: new Date(),
          matches: <matches>
        }

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

      created: function () {
        document.addEventListener('asq-ready', function (evt) {
          this.eventBus = evt.detail.asqEventBus
        }.bind(this));
      },
    
    });
  </script>
</dom-module>