debugger/res/imp/op-expando.html

<!-- The <op-expando-sk> custom element declaration.

  Displays op-sk with indices from [begin, end). When collapsed
  only displays a summary of which indices the op-expando-sk
  contains.

  Attributes:
    cmd - The object that contains all the commands to display.

    begin - The index of the first cmd.commands to display.

    end   - The value of (end-1) is the index of the last cmd.commands to display.

    expanded - A Boolean attribute that is true if the children op-sk elements
          are displayed, false otherwise.

  Events:
    None.

  Methods:
    None.
-->

<link rel=import href="op.html">
<dom-module id="op-expando-sk">
  <style>
    #title {
      color: #1f78b4;
      text-transform: uppercase;
      border-top: solid #eee 1px;
      padding: 0.3em;
      margin: 0;
      border-bottom: solid #eee 1px;
      margin-bottom: -1px;
    }
  </style>
  <template>
    <template is="dom-if" if="{{_not(expanded)}}">
      <div id=title on-tap="_toggle"><strong>Ops:</strong> {{_index(cmd, begin)}}...{{_indexminusone(cmd, end)}}</div>
    </template>
    <template is="dom-if" if="{{expanded}}">
      <template is="dom-repeat" items="{{_mySliceOfCmds(cmd, begin, end)}}" as="command">
        <op-sk op="{{command}}" prefix="{{command._prefix}}" index="{{command._index}}"></op-sk>
      </template>
    </template>
  </template>
</dom-module>

<script>
  Polymer({
    is: "op-expando-sk",

    properties: {
      cmd: {
        type: Array,
        value: function() { return {}; },
        reflectToAttribute: false,
      },
      begin: {
        type: Number,
        value: 0,
        reflectToAttribute: true,
      },
      end: {
        type: Number,
        value: 0,
        reflectToAttribute: true,
      },
      expanded: {
        type: Boolean,
        value: false,
        reflectToAttribute: true,
      },
    },

    _mySliceOfCmds: function(cmd, begin, end) {
      return cmd.commands.slice(begin, end);
    },

    _not: function(expanded) {
      return !expanded;
    },

    _toggle: function() {
      this.set('expanded', !this.expanded);
    },

    _minusone: function(n) {
      return n-1;
    },

    _index: function(cmd, n) {
      if (n >= cmd.commands.length) {
        return 0;
      }
      return cmd.commands[n]._index;
    },

    _indexminusone: function(cmd, n) {
      if (n >= cmd.commands.length) {
        return 0;
      }
      return cmd.commands[n-1]._index;
    },

  });
</script>