editable-table.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-ajax/iron-ajax.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../iron-autogrow-textarea/iron-autogrow-textarea.html">
<link rel="import" href="editable-table-settings-menu.html">
<link rel="import" href="editable-table-rowcol-menu.html">
<link rel="import" href="editable-table-cell.html">
<link rel="import" href="tablesaw-js.html">
<!--
`editable-table`
A LRN element
@demo demo/index.html

@microcopy - the mental model for this element
 -
 -
 -

-->

<dom-module id="editable-table">
  <template>
    <style>
      :host {
        display: block;
      }
      :host table caption {
        text-align: left;
      }
      :host table caption label {
        font-weight: normal;
      }
      :host .flex {
        display: flex;
        width: 100%;
        margin: 0 0 10px;
        padding: 0;
      }
      :host .flex label {
        line-height: 30px;
      }
      :host .flex > * {
        justify-content: space-between;
        align-items: baseline;
      }
      :host .flex > .flex-grow {
        flex-grow: 1;
        width: auto;
      }
      :host .flex > .flex-padding {
        padding-right: 0.5em;
      }
      :host .flex paper-toggle-button {
        display: inline-block;
      }
      :host table {
        width: 100%;
      }
      :host table,
      :host table th,
      :host table td {
        border-collapse: collapse;
      }
      :host table,
      :host table th,
      :host table td {
        border: 1px solid #ddd;
      }
      :host table[bordered],
      :host table[bordered] th, 
      :host table[bordered] td {
        border: 1px solid #888;
      }
      :host table th,
      :host table td {
        padding: 0;
      }
      :host table th {
        background-color: #f0f0f0;
      }
      :host table[striped] tbody tr:nth-child(2n) td {
        background-color: #f8f8f8;
      }
    </style>
    <iron-ajax 
      id="ajax"
      auto
      url="[[dataSrc]]"
      handle-as="json"
      last-response="{{data}}"></iron-ajax>

    <table id="table" class="tablesaw tablesaw-stack" data-tablesaw-mode="stack" summary="editable table" bordered$="{{bordered}}" condensed$="{{condensed}}" striped$="{{striped}}">
      <caption>
          <p class="flex">
            <label for="caption" class="flex-padding">Table Caption: </label>
            <iron-autogrow-textarea id="caption" class="flex-grow" value$="{{caption}}"></iron-autogrow-textarea>
          </p>
        <p class="flex">
          <label for="summary" class="flex-padding">Table Summary (for accessibility): </label>
          <iron-autogrow-textarea id="summary" class="flex-grow" value$="{{summary}}"></iron-autogrow-textarea>
        </p>
        <template is="dom-if" if="[[enableResponsive]]"></template>
      </caption>
      <thead> 
        <tr>
          <th scope="col">
            <template is="dom-if" if="[[enableStyles]]">
                <editable-table-settings-menu 
                  bordered$="[[bordered]]"
                  condensed$="[[condensed]]" 
                  striped$="[[striped]]">
                </editable-table-settings-menu>
            </template>
          </th>
          <template id="headers" is="dom-repeat" items="{{__data.columns}}" as="header">
            <th scope="col"><editable-table-rowcol-menu condensed$="{{condensed}}" index="{{header.index}}" label="{{header.letter}}" type="Column"></editable-table-rowcol-menu></th>
          </template>
        </tr> 
      </thead>
      <tbody id="tbody"> 
        <template id="rows" is="dom-repeat" items="{{__data.rows}}" as="row">
          <tr>
            <th scope="row"><editable-table-rowcol-menu condensed$="{{condensed}}" index="{{row.index}}" label="{{row.index}}" type="Row"></editable-table-rowcol-menu></th>
            <template id="columns" is="dom-repeat" items="{{row.celldata}}" as="cell">
              <td><editable-table-cell value$="{{cell}}"></editable-table-cell></td>
            </template>
          </tr> 
        </template>
      </tbody>
    </table>
  </template>

  <script>
    Polymer({

      is: 'editable-table',
      listeners: {
        'toggle-changed': '_onToggleChanged',
        'cell-move': '_onCellMove'
      },

      properties: {
        /**
         * bordered?
         */
        bordered: {
          type: Boolean,
          value: false
        },
        /**
         * a table caption
         */
        caption: {
          type: String,
          value: null
        },
        /**
         * condensed height?
         */
        condensed: {
          type: Boolean,
          value: false
        },
        /**
         * raw data
         */
        data: {
          type: Array,
          value: null,
          notify: true
        },
        /**
         * Source to pull the gallery items from
         */
        dataSrc: {
          type: String,
          notify: true,
          reflectToAttribute: true
        },
        /**
         * allow striped, condensed, and bordered
         */
        enableStyles: {
          type: Boolean,
          value: false,
          reflectToAttribute: true
        },
        /**
         * allow responsive settings
         */
        enableResponsive: {
          type: Boolean,
          value: false,
          reflectToAttribute: true
        },
        /**
         * striped (altenrating rows)?
         */
        striped: {
          type: Boolean,
          value: false
        },
        /**
         * a table summary
         */
        summary: {
          type: String,
          value: null
        },
      },
      ready: function(){
        let root = this;
        root.__data = {};
        root.$.ajax.addEventListener('last-response-changed', (e) => {
          this.updateData(root.data);
        });
        root.$.table.addEventListener('modify-table', (e) => {
          let row = e.detail.item.getAttribute('type') === 'Row', index = parseInt(e.detail.item.getAttribute('index')), action = e.detail.item.getAttribute('action');
          if(action === 'delete') {
            if (row) {
              root.deleteRow(index);
            } else {
              root.deleteColumn(index);
            }
          } else if (action === 'insert-before') {
            if (row) {
              root.insertRow(index-1);
            } else {
              root.insertColumn(index);
            }
          } else if (action === 'insert-after') {
            if (row) {
              root.insertRow(index);
            } else {
              root.insertColumn(index+1);
            }
          }
        });
      },
      attached: function(){
        let root = this;
      },
      insertRow: function(index){
        let temp = new Array();
        for(let i = 0; i < this.data[0].length; i++){
          temp.push('');
        }
        this.splice('data',index,0,temp);
        this.updateData(this.data);
      },
      deleteRow: function(index){
        if (confirm('Delete entire row?')) {
          this.splice('data',index-1,1);
          this.updateData(this.data);
        }
      },
      insertColumn: function(index){
        let temp = new Array();
        for(let i = 0; i < this.data.length; i++){
          temp.push(this.data[i]);
          temp[i].splice(index,0,'');
        }
        this.set('data',temp);
        this.updateData(this.data);
      },
      deleteColumn: function(index){
        let temp = [];
        if (confirm('Delete entire column?')) {
          for(let i=0; i<this.data.length; i++){
            let temp2 = this.data[i], temp3 = temp2.splice(index,1);
            temp.push(temp2);
          }
          this.set('data',temp);
          this.updateData(this.data);
        }
      },
      getData: function(){
        return JSON.stringify({
          "bordered": this.enableStyles ? this.bordered : null,
          "caption": this.caption,
          "condensed": this.enableStyles ? this.condensed: null,
          "data": this.data,
          "striped": this.enableStyles ? this.striped : null,
          "summary": this.summary,
        });
      },
      updateData: function(data){
        let temp = {}, cols = new Array(), convertAlpha = function(num){
          let alpha = '', 
          numerals = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''), 
          j= Math.log(num)/Math.log(10), 
          k= Math.log(26)/Math.log(10), 
          i = Math.floor(j/k);
          while(i >= 0) {
            let multiplier = Math.pow(26,i), letter = Math.floor(num/multiplier);
            num = num - multiplier * letter;
            alpha += numerals[letter-1];
            i--;
          }
          return alpha;
        };
        temp.rows = new Array();
        temp.columns = new Array();
        temp.cells = new Array();
        if (data !== null && data !== undefined) {
          for (var i = 0; i < data.length; i++){
            temp.rows[i]  = {'index': i+1, 'celldata': []};
            temp.cells[i] = new Array();
            for (var j = 0; j < data[i].length; j++){
              temp.rows[i].celldata[j] = data[i][j];
              temp.cells[i][j] = data[i][j];
            }
          }
        }
        if (data !== null && data !== undefined) {
          for (var i = 0; i < data[0].length; i++){
            temp.columns.push({'index': i,'letter': convertAlpha(i+1)});
          }
        }
        this.set('__data',{});
        this.set('__data',temp);
      },
      _onToggleChanged: function(e){
        if (e.detail.id === 'bordered'){
          this.bordered = e.detail.checked;
        } else if (e.detail.id === 'condensed'){
          this.condensed = e.detail.checked;
        } if (e.detail.id === 'striped'){
          this.striped = e.detail.checked;
        }
      },
      _onCellMove: function(e){
        console.log('move');
        let dir = e.detail.direction, cell = e.detail.cell;
        let row = cell.parentNode, body = this.$.tbody;
        let x = Array.prototype.indexOf.call(row.children, cell);
        let y = Array.prototype.indexOf.call(body.children, row);
        
        if(dir ==='down'){
          if(y+1 < body.children.length-1) {
            body.children[y+1].children[x].children[0].focus();
          }
        } else if(dir ==='up'){
          if(y > 0) {
            body.children[y-1].children[x].children[0].focus();
          }
        } else if(dir ==='right'){
          if(x+1 < row.children.length-1) {
            row.children[x+1].children[0].focus();
          } else if (y+1 < body.children.length-1) {
            body.children[y+1].children[1].children[0].focus();
          }
        } else if(dir ==='left'){
          if(x > 1) {
            row.children[x-1].children[0].focus();
          } else if (y > 0) {
            body.children[y-2].children[body.children[y-2].children.length-2].children[0].focus();
          }
        }  
      },
    });
  </script>
</dom-module>