editable-table/editable-table-editor-toggle.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
102
103
104
105
<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-button/paper-button.html">
<link rel="import" href="../paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-tooltip/paper-tooltip.html">

<!--
`editable-table-editor-toggle`

A toggle button for an property in the editable-table
interface (editable-table.html).

@demo demo/index.html

@microcopy - the mental model for this element

<editable-table-editor-toggle
  hidden                          //Hide and disable this toggle? Default is false.
  label="Condensed"               //The label for the toggle button
  prop="condensed"                //The property controlled by this toggle
  tooltip="Condense cell height." //A tooltip for this toggle.
  value="true">                   //The value of this toggle.
</editable-table-editor-toggle>

-->

<dom-module id="editable-table-editor-toggle">
  <template>
    <style>
      :host {
        display: block;
      }
      :host .setting {
        font-size: 95%;
        padding: var(--editable-table-toggle-padding, 8px 0px);
        justify-content: space-between;
        width: 100%;
      }
      :host[disabled] .setting-text {
        opacity: 0.5;
      }
    </style>
    <div class="setting">
      <div class="setting-control">
        <paper-toggle-button id="button" checked$="[[value]]" disabled$="[[disabled]]">[[label]]</paper-toggle-button>
        <paper-tooltip id="tooltip" for="button">[[tooltip]]</paper-tooltip>
      </div>
    </div>
  </template>
  <script>
    Polymer({

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

      listeners: {'change': '_onChange'},

      properties: {
        /**
          * is the toggle disabled
          */
        disabled: {
          type: Boolean,
          value: false,
          reflectToAttribute: true
        },
        /**
          * label for menu setting
          */
        label: {
          type: String,
          value: null
        },
        /**
          * the property to update
          */
        prop: {
          type: String,
          value: null
        },
        /**
          * tool tip for menu setting
          */
        tooltip: {
          type: String,
          value: null
        },
        /**
          * boolean value of menu setting
          */
        value: {
          type: Boolean,
          value: false
        },
      },
      /**
        * Set up event listener to fire when toggled
        */
      _onChange: function(e){
        let root = this;
        if(e.srcElement === this.$.button) root.fire('editable-table-setting-changed',{"prop": this.prop,"value":e.srcElement.checked});
      },
    });
  </script>
</dom-module>