| <!-- 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> |