editable-table/editable-table-editor-insdel.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
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-button/paper-button.html">

<!--
`editable-table-editor-insdel`

A button in the editable-table-editor-rowcol menu
(editable-table-editor-rowcol.html) that inserts or
deletes a row or column .

@demo demo/index.html

@microcopy - the mental model for this element
<editable-table-editor-insdel
  action="insert"               //The action this button performs, as in "insert" or "delete"
  before                        //If the action is insert, should row or column be inserted before the index? Default is false (after).
  index="1"                     //The index of the row or column where this button is located
  type="Row">                   //The type of menu, as in "Row" or "Column"
  Insert Row Before             //The text of the button
</editable-table-editor-insdel>

-->

<dom-module id="editable-table-editor-insdel">
  <template>
    <style>
      :host {
        display: block;
      }
      :host paper-button {
        display: block;
        text-transform: none;
        text-align: left;
      }
    </style>
    <paper-button><slot></slot></paper-button>
  </template>

  <script>
    Polymer({

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

      listeners: {
        'tap': '_onTap'
      },

      properties: {
        /**
          * The action of the menu item
          */
        action: {
          type: String,
          value: null
        },
        /**
          * The index of the row or column
          */
        index: {
          type: Number,
          value: null,
          reflectToAttribute: true
        },
        /**
          * If insert, does it insert before? Default is insert after.
          */
        before: {
          type: Boolean,
          value: false,
          reflectToAttribute: true
        },
        /**
          * Is it row or column?
          */
        type: {
          type: String,
          value: null
        },
      },
      /**
        * Handle item tap
        */
      _onTap: function(e){
        let root = this, action = root.action, type = root.type, before = root.before, index = root.index, event = action+'-'+type.toLowerCase();
        if (action === 'insert' && before && type === "Row") {
          index--;
        } else if (action === 'insert' && !before && type !== "Row") {
          index++;
        }
        root.fire(event,index);
      },
    });
  </script>
</dom-module>