Use real ES6 private methods/fields instead of underscore prefixes (#487

)
TrestleAdmin · Sep 9, 2024 · dc4f349 · dc4f349
1 parent 3246821
commit dc4f349
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 58 deletions.
diff --git a/app/assets/bundle/trestle/admin.js b/app/assets/bundle/trestle/admin.js
diff --git a/frontend/js/controllers/flatpickr_controller.js b/frontend/js/controllers/flatpickr_controller.js
@@ -23,7 +23,7 @@ export default class extends ApplicationController {
   }
 
   setup (selectedDates, dateStr, instance) {
-    this._createClearButton(instance)
+    this.#createClearButton(instance)
   }
 
   get options () {
@@ -33,7 +33,7 @@ export default class extends ApplicationController {
     }
   }
 
-  _createClearButton (instance) {
+  #createClearButton (instance) {
     if (this.element.dataset.allowClear) {
       const clearButton = document.createElement('button')
 

diff --git a/frontend/js/controllers/lightbox_controller.js b/frontend/js/controllers/lightbox_controller.js
@@ -109,7 +109,7 @@ export default class extends ApplicationController {
       itemData.type = 'html'
       itemData.html = `<video controls><source src="${itemData.src}"></video>`
 
-      this.setDefaultVideoDimensions(itemData)
+      this.#setDefaultVideoDimensions(itemData)
     }
 
     return itemData
@@ -126,7 +126,7 @@ export default class extends ApplicationController {
         itemData.type = 'html'
         itemData.html = `<iframe src="${src}" allowfullscreen></iframe>`
 
-        this.setDefaultVideoDimensions(itemData)
+        this.#setDefaultVideoDimensions(itemData)
       }
     }
 
@@ -151,7 +151,7 @@ export default class extends ApplicationController {
     }
   }
 
-  setDefaultVideoDimensions(itemData) {
+  #setDefaultVideoDimensions(itemData) {
     itemData.w ||= this.defaultVideoWidthValue
     itemData.h ||= this.defaultVideoHeightValue
   }

diff --git a/frontend/js/controllers/modal_trigger_controller.js b/frontend/js/controllers/modal_trigger_controller.js
@@ -26,7 +26,7 @@ export default class extends ApplicationController {
       .then((modal) => {
         this.modal = modal
 
-        const modalController = this._getModalController(modal)
+        const modalController = this.#getModalController(modal)
         modalController.modalTrigger = this
 
         this.dispatch('loaded', { detail: modal })
@@ -68,7 +68,7 @@ export default class extends ApplicationController {
     return this.element.nodeName === 'A'
   }
 
-  _getModalController (modal) {
+  #getModalController (modal) {
     return this.application.getControllerForElementAndIdentifier(modal, 'modal')
   }
 }
diff --git a/frontend/js/controllers/tab_errors_controller.js b/frontend/js/controllers/tab_errors_controller.js
@@ -20,7 +20,7 @@ export default class extends ApplicationController {
     const errorCount = pane.querySelectorAll(this.errorSelectorValue).length
 
     if (errorCount > 0) {
-      const badge = this._createErrorBadge(errorCount)
+      const badge = this.#createErrorBadge(errorCount)
       link.appendChild(badge)
     }
   }
@@ -34,7 +34,7 @@ export default class extends ApplicationController {
     })
   }
 
-  _createErrorBadge (count) {
+  #createErrorBadge (count) {
     const badge = document.createElement('span')
 
     badge.classList.add('badge', 'badge-danger', 'badge-pill')

diff --git a/frontend/js/core/backdrop.js b/frontend/js/core/backdrop.js
@@ -12,6 +12,10 @@ const CLASS_NAME_SHOW = 'show'
 const CLASS_NAME_LOADING = 'loading'
 
 export default class Backdrop {
+  #config
+  #element
+  #isAppended
+
   static getInstance () {
     if (!this.instance) {
       this.instance = new Backdrop()
@@ -21,80 +25,78 @@ export default class Backdrop {
   }
 
   constructor () {
-    this._config = Default
-    this._element = null
-    this._isAppended = false
+    this.#config = Default
+    this.#element = null
+    this.#isAppended = false
   }
 
   show (callback) {
-    this._append()
+    this.#append()
 
-    if (this._config.isAnimated) {
-      reflow(this._getElement())
+    if (this.#config.isAnimated) {
+      reflow(this.#getElement())
     }
 
-    this._getElement().classList.add(CLASS_NAME_SHOW)
+    this.#getElement().classList.add(CLASS_NAME_SHOW)
 
-    this._emulateAnimation(() => {
+    this.#emulateAnimation(() => {
       execute(callback)
     })
   }
 
   hide (callback) {
     if (Modal.existing.length === 0) {
-      this._getElement().classList.remove(CLASS_NAME_SHOW)
+      this.#getElement().classList.remove(CLASS_NAME_SHOW)
     }
 
-    this._emulateAnimation(() => {
+    this.#emulateAnimation(() => {
       this.dispose()
       execute(callback)
       Modal.restorePrevious()
     })
   }
 
   dispose () {
-    if (!this._isAppended) {
+    if (!this.#isAppended) {
       return
     }
 
     if (Modal.existing.length === 0) {
-      this._element.remove()
-      this._isAppended = false
+      this.#element.remove()
+      this.#isAppended = false
     }
   }
 
   loading (isLoading) {
-    const el = this._getElement()
+    const el = this.#getElement()
     el.classList[isLoading ? 'add' : 'remove'](CLASS_NAME_LOADING)
   }
 
-  // Private
-
-  _getElement () {
-    if (!this._element) {
+  #getElement () {
+    if (!this.#element) {
       const backdrop = document.createElement('div')
-      backdrop.className = this._config.className
-      if (this._config.isAnimated) {
+      backdrop.className = this.#config.className
+      if (this.#config.isAnimated) {
         backdrop.classList.add(CLASS_NAME_FADE)
       }
 
-      this._element = backdrop
+      this.#element = backdrop
     }
 
-    return this._element
+    return this.#element
   }
 
-  _append () {
-    if (this._isAppended) {
+  #append () {
+    if (this.#isAppended) {
       return
     }
 
-    document.body.append(this._getElement())
+    document.body.append(this.#getElement())
 
-    this._isAppended = true
+    this.#isAppended = true
   }
 
-  _emulateAnimation (callback) {
-    executeAfterTransition(callback, this._getElement(), this._config.isAnimated)
+  #emulateAnimation (callback) {
+    executeAfterTransition(callback, this.#getElement(), this.#config.isAnimated)
   }
 }
diff --git a/frontend/js/core/error_modal.js b/frontend/js/core/error_modal.js
@@ -33,33 +33,31 @@ export default class ErrorModal {
   }
 
   show () {
-    this._append(this._buildModal())
+    this.#append(this.#buildModal())
   }
 
-  // Private
-
-  _buildModal () {
-    const el = this._buildWrapper()
+  #buildModal () {
+    const el = this.#buildWrapper()
     el.querySelector('.modal-title').textContent = this.title
 
-    const iframe = this._buildIframe(this.content)
+    const iframe = this.#buildIframe(this.content)
     el.querySelector('.modal-body').append(iframe)
 
     return el
   }
 
-  _buildWrapper () {
+  #buildWrapper () {
     return new DOMParser().parseFromString(TEMPLATE(), 'text/html').body.childNodes[0]
   }
 
-  _buildIframe () {
+  #buildIframe () {
     const iframe = document.createElement('iframe')
     iframe.className = 'error-iframe'
     iframe.srcdoc = this.content
     return iframe
   }
 
-  _append (el) {
+  #append (el) {
     document.getElementById('modal').append(el)
   }
 }