BookStack Code Mirror - bookstack/blob - resources/js/components/add-remove-rows.js

   1 import {onChildEvent} from "../services/dom";
   2
   3 /**
   4  * AddRemoveRows
   5  * Allows easy row add/remove controls onto a table.
   6  * Needs a model row to use when adding a new row.
   7  * @extends {Component}
   8  */
   9 class AddRemoveRows {
  10     setup() {
  11         this.modelRow = this.$refs.model;
  12         this.addButton = this.$refs.add;
  13         this.removeSelector = this.$opts.removeSelector;
  14         this.setupListeners();
  15     }
  16
  17     setupListeners() {
  18         this.addButton.addEventListener('click', e => {
  19             const clone = this.modelRow.cloneNode(true);
  20             clone.classList.remove('hidden');
  21             this.modelRow.parentNode.insertBefore(clone, this.modelRow);
  22         });
  23
  24         onChildEvent(this.$el, this.removeSelector, 'click', (e) => {
  25             const row = e.target.closest('tr');
  26             row.remove();
  27         });
  28     }
  29 }
  30
  31 export default AddRemoveRows;