X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/a6633642232efd164d4708967ab59e498fbff896..refs/pull/4804/head:/resources/js/components/add-remove-rows.js diff --git a/resources/js/components/add-remove-rows.js b/resources/js/components/add-remove-rows.js index 9a5f019c5..3213c4835 100644 --- a/resources/js/components/add-remove-rows.js +++ b/resources/js/components/add-remove-rows.js @@ -1,13 +1,14 @@ -import {onChildEvent} from "../services/dom"; -import {uniqueId} from "../services/util"; +import {onChildEvent} from '../services/dom'; +import {uniqueId} from '../services/util'; +import {Component} from './component'; /** * AddRemoveRows * Allows easy row add/remove controls onto a table. * Needs a model row to use when adding a new row. - * @extends {Component} */ -class AddRemoveRows { +export class AddRemoveRows extends Component { + setup() { this.modelRow = this.$refs.model; this.addButton = this.$refs.add; @@ -19,7 +20,7 @@ class AddRemoveRows { setupListeners() { this.addButton.addEventListener('click', this.add.bind(this)); - onChildEvent(this.$el, this.removeSelector, 'click', (e) => { + onChildEvent(this.$el, this.removeSelector, 'click', e => { const row = e.target.closest(this.rowSelector); row.remove(); }); @@ -31,7 +32,7 @@ class AddRemoveRows { clone.classList.remove('hidden'); this.setClonedInputNames(clone); this.modelRow.parentNode.insertBefore(clone, this.modelRow); - window.components.init(clone); + window.$components.init(clone); } /** @@ -44,11 +45,10 @@ class AddRemoveRows { */ setClonedInputNames(clone) { const rowId = uniqueId(); - const randRowIdElems = clone.querySelectorAll(`[name*="randrowid"]`); + const randRowIdElems = clone.querySelectorAll('[name*="randrowid"]'); for (const elem of randRowIdElems) { elem.name = elem.name.split('randrowid').join(rowId); } } -} -export default AddRemoveRows; \ No newline at end of file +}