asq-code.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../asq-base/asq-base.html">
<link rel="import" href="elements/asq-code-presenter/asq-code-presenter.html">
<link rel="import" href="elements/asq-code-viewer/asq-code-viewer.html">


<!--
`asq-code` is a question type where students can answer programming question proposed by professors. It is built above the `ace` editor.

##### Example
    <asq-code mode="java" tabsize="2">
      <asq-stem><h4>Implement a for loop in Java</h4></asq-stem>
      <code>public class C {
        public void m() {
          int i = i + 5 + ((int)5.0) + ((int)5f);
        }
      }
      </code>
    </asq-code>

@element asq-code
@group ASQ Elements
@blurb Element that used for programming questions.
@homepage http://github.com/ASQ-USI/asq-code
-->
<polymer-element name="asq-code" attributes="fontSize tabSize disabled value theme mode wrap" vertical layout>
  <template>
    <style>
    :host{
      min-width:100px;
      min-height: 200px;
    }

    </style>

    <!-- Viewer -->
    <template if="{{role == roles.VIEWER}}">
      <asq-code-viewer mode="{{mode}}" theme="{{theme}}" fontSize="{{fontSize}}" tabSize="{{tabSize}}" disabled="{{disabled}}" value="{{value}}" wrap?="{{wrap}}" >
        <content></content>
      </asq-code-viewer>
    </template>

    <!-- Presenter -->
   <template if="{{role == roles.PRESENTER}}">
      <asq-code-presenter mode="{{mode}}" theme="{{theme}}" fontSize="{{fontSize}}" tabSize="{{tabSize}}" disabled="{{disabled}}" value="{{value}}" wrap?="{{wrap}}">
        <content></content>
      </asq-code-presenter>
    </template>

  </template>

  <script>
    (function () {

      var p = {

        publish: {

          /**
           * Set to true to style the element as disabled.
           * Bind to `readonly` of ace-editor.
           *
           * @attribute disabled
           * @type boolean
           * @default false
           */
          disabled: {value: false, reflect: true},

          /**
           * Set the content of the editor.
           *
           * @attribute value
           * @type object
           * @default null
           */
          value: null,

          /**
           * Set or get the theme of ace-editor.
           *
           * @attribute theme
           * @type string
           * @default 'monokai'
           */
          theme: 'monokai',

          /**
           * Set or get the mode of ace-editor.
           *
           * @attribute mode
           * @type string
           * @default 'javascript'
           */
          mode: 'javascript',

          wrap: false,

        },


        domReady: function(){
          if ( !this.value ) {
            var code = this.querySelector('code');
            if ( code ) {
              this.value = code.textContent;
            }
          }
        },

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

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

          var submission = this.$.editor.editor.session.getValue();
          return {
            questionUid: this.uid,
            timestamp: new Date(),
            submission: submission
          };
        },
      };

      ASQ.asqify(p, true);
      Polymer('asq-code', p);

    })();

  </script>
</polymer-element>