reorder_modules.js
| 1 | import {Controller} from "@hotwired/stimulus" |
| 2 | |
| 3 | export default class extends Controller { |
| 4 | modules = new Set() |
| 5 | |
| 6 | connect() { |
| 7 | document.addEventListener('iawp:moduleEditingStarted', this.moduleEditingStarted) |
| 8 | document.addEventListener('iawp:moduleEditingFinished', this.moduleEditingFinished) |
| 9 | } |
| 10 | |
| 11 | disconnect() { |
| 12 | document.removeEventListener('iawp:moduleEditingStarted', this.moduleEditingStarted) |
| 13 | document.removeEventListener('iawp:moduleEditingFinished', this.moduleEditingFinished) |
| 14 | } |
| 15 | |
| 16 | toggleReordering() { |
| 17 | if(!this.isReorderingEnabled()) { |
| 18 | return |
| 19 | } |
| 20 | |
| 21 | // Refactor at some point... |
| 22 | const $ = jQuery |
| 23 | $(this.element).toggleClass('active') |
| 24 | const isActive = $(this.element).hasClass('active') |
| 25 | $('#iawp-dashboard').toggleClass('reordering', isActive) |
| 26 | $('.iawp-module').toggleClass('draggable-module', isActive) |
| 27 | if (isActive) { |
| 28 | document.querySelector('.add-module-toolbar-button').setAttribute('disabled', 'disabled') |
| 29 | } else { |
| 30 | document.querySelector('.add-module-toolbar-button').removeAttribute('disabled') |
| 31 | } |
| 32 | window.scrollTo({ top: 0, behavior: "smooth" }) |
| 33 | } |
| 34 | |
| 35 | moduleEditingStarted = ({ detail: { moduleId }}) => { |
| 36 | this.modules.add(moduleId) |
| 37 | this.updateButton() |
| 38 | } |
| 39 | |
| 40 | moduleEditingFinished = ({ detail: { moduleId }}) => { |
| 41 | this.modules.delete(moduleId) |
| 42 | this.updateButton() |
| 43 | } |
| 44 | |
| 45 | updateButton() { |
| 46 | if(this.isReorderingEnabled()) { |
| 47 | this.element.removeAttribute('disabled') |
| 48 | } else { |
| 49 | this.element.setAttribute('disabled', 'disabled') |
| 50 | } |
| 51 | } |
| 52 | |
| 53 | isReorderingEnabled() { |
| 54 | return this.modules.size === 0 |
| 55 | } |
| 56 | } |