editable-table/editable-table-editor-rowcol.html at master · LRNWebComponents/editable-table · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../web-animations-js/web-animations-next-lite.min.html">
<link rel="import" href="../paper-menu-button/paper-menu-button.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../paper-tooltip/paper-tooltip.html">
<link rel="import" href="editable-table-editor-insdel.html">
<link rel="import" href="editable-table-behaviors.html">

<!--
`editable-table-editor-rowcol`

A header label and menu for inserting and deleting a row or a column
of the editable-table interface (editable-table.html).

@demo demo/index.html

@microcopy - the mental model for this element

<editable-table-editor-rowcol
  condensed                     //Decrease the padding to match the rest of the table cells when table is condensed? Default is false.
  index="1"                     //The index of the row or column
  type="Column">                //The type of menu, as in "Row" or "Column"
</editable-table-editor-rowcol>

-->

<dom-module id="editable-table-editor-rowcol">
  <template>
    <style>
      :host {
        display: block;
      }
      :host #label {
        margin: 0;
        padding: 0;
      }
      :host paper-menu-button {
        margin: 0;
        padding: 0;
        width: 100%;
      }
      :host paper-button {
        margin: 0;
        display: block;
        background-color: transparent;
      }
      :host[condensed] paper-button {
        padding-top: 0;
        padding-bottom: 0;
      }
    </style>
    <paper-menu-button id="menu">
      <paper-button slot="dropdown-trigger">
        <span id="label">[[label]]</span> <iron-icon icon="arrow-drop-down"></iron-icon>
      </paper-button>
      <paper-listbox slot="dropdown-content" label$="[[label]]">
        <editable-table-editor-insdel action="insert" index$="[[index]]" type$="[[type]]" before="true">Insert [[type]] Before</editable-table-editor-insdel>
        <editable-table-editor-insdel action="insert" index$="[[index]]" type$="[[type]]">Insert [[type]] After</editable-table-editor-insdel>
        <editable-table-editor-insdel action="delete" index$="[[index]]" type$="[[type]]">Delete [[type]]</editable-table-editor-insdel>
      </paper-listbox>
    </paper-menu-button>
  </template>

  <script>
    Polymer({

      is: 'editable-table-editor-rowcol',

      listeners: {
        'insdel-tapped': '_onTap'
      },

      behaviors: [  editableTableBehaviors.cellBehaviors ],

      properties: {
        /**
          * The index of the row or column
          */
        index: {
          type: Number,
          value: null
        },
        /**
          * The index of the row or column
          */
        label: {
          type: String,
          computed: '_getLabel(index,type)'
        },
        /**
          * Is it row or column?
          */
        type: {
          type: String,
          value: null
        },
      },
    });
  </script>
</dom-module>