module_picker.js
| 1 | import {Controller} from "@hotwired/stimulus" |
| 2 | |
| 3 | export default class extends Controller { |
| 4 | static values = { |
| 5 | moduleToSwap: String |
| 6 | } |
| 7 | |
| 8 | showIntro() { |
| 9 | this.element.classList.add('show-intro') |
| 10 | this.element.classList.remove('show-list') |
| 11 | if (this.element.classList.contains('top')) |
| 12 | this.element.classList.remove('visible') |
| 13 | } |
| 14 | |
| 15 | cancel() { |
| 16 | if(this.isSwapping()) { |
| 17 | this.element.previousSibling.classList.remove('hidden') |
| 18 | this.element.remove() |
| 19 | } else { |
| 20 | this.showIntro() |
| 21 | } |
| 22 | } |
| 23 | |
| 24 | showList() { |
| 25 | this.element.classList.remove('show-intro') |
| 26 | this.element.classList.add('show-list') |
| 27 | } |
| 28 | |
| 29 | /** |
| 30 | * Scroll to the module picker and call it out |
| 31 | */ |
| 32 | scrollToPicker() { |
| 33 | this.showList() |
| 34 | |
| 35 | // Let browser calculate new height for the module picker before scrolling to it |
| 36 | requestAnimationFrame(() => { |
| 37 | const reportHeader = document.getElementById('report-header-container') |
| 38 | const modulePicker = this.element |
| 39 | const adminHeaderHeight = 32 |
| 40 | const offset = 24 |
| 41 | const top = document.documentElement.scrollTop + modulePicker.getBoundingClientRect().top - reportHeader.getBoundingClientRect().height - adminHeaderHeight - offset |
| 42 | window.scrollTo({ top, behavior: "smooth" }); |
| 43 | }) |
| 44 | } |
| 45 | |
| 46 | showModule(event) { |
| 47 | const moduleId = event.currentTarget.dataset.moduleId |
| 48 | const templateString = document.getElementById(moduleId + '-module-template').innerHTML |
| 49 | const templateDocument= new DOMParser().parseFromString(templateString, "text/html"); |
| 50 | const moduleEditor = templateDocument.body.firstElementChild |
| 51 | |
| 52 | moduleEditor.querySelector('button.change-module-type').remove() |
| 53 | moduleEditor.setAttribute('data-module-editor-module-to-swap-value', this.moduleToSwapValue) |
| 54 | |
| 55 | this.element.replaceWith(moduleEditor) |
| 56 | } |
| 57 | |
| 58 | isSwapping() { |
| 59 | return !!this.moduleToSwapValue |
| 60 | } |
| 61 | } |