formatic 0.2.3 → 0.2.4

data/app/assets/javascript/formatic/components/select.ts

@@ -1,113 +0,0 @@
-namespace Formatic {
-  export class Select {
-    private el: HTMLElement
-    private timeoutId: ReturnType<typeof setTimeout>
-
-    constructor(el: HTMLElement) {
-      this.el = el
-      this.setupBindings()
-    }
-
-    private setupBindings() {
-      this.autosize()
-
-      this.el.addEventListener('input', (event) => {
-        event.preventDefault()
-        if (this.autoSubmit) this.actionSave()
-      })
-    }
-
-    // ACTIONS
-
-    private actionSave() {
-      this.guiWaitingForSave()
-      this.debounce(this.actionSaveNow.bind(this))()
-    }
-
-    private actionSaveNow() {
-      console.debug("Saving select...")
-      this.el.classList.remove('is-loading')
-      this.el.classList.add('is-saved')
-      this.save()
-    }
-
-    // GUI
-
-    private guiWaitingForSave() {
-      this.el.classList.add('is-loading')
-      this.el.classList.remove('is-saved')
-      this.el.classList.remove('is-failed')
-    }
-
-    private guiSaved() {
-      this.el.classList.remove('is-loading')
-      this.el.classList.add('is-saved')
-      this.el.classList.remove('is-failed')
-    }
-
-    private guiFailed() {
-      this.el.classList.remove('is-loading')
-      this.el.classList.remove('is-saved')
-      this.el.classList.add('is-failed')
-    }
-
-    // Attributes
-
-    private get autoSubmit() {
-      return this.el.classList.contains('is-autosubmit')
-    }
-
-    // Helpers
-
-    private save() {
-      const form = this.el.closest<HTMLFormElement>('form')
-      const data = new FormData(form)
-      data.set('_method', 'patch')
-
-      fetch(form.action, {
-        method: 'POST',
-        headers: { 'Accept': 'text/javascript' },
-        body: data
-      })
-        .then(response => {
-          if (response.status == 201) {
-            console.debug('Select content saved')
-            this.guiSaved()
-          } else {
-            console.debug('Select content not saved')
-            this.guiFailed()
-          }
-        }).catch(err => {
-          console.warn(err)
-          console.debug('Failed badly to save')
-        })
-    }
-
-    private debounce(fn: Function) {
-      return () => {
-        clearTimeout(this.timeoutId)
-        this.timeoutId = setTimeout(() => fn(), 1000)
-      }
-    }
-
-    private autosize() {
-      try {
-        autosize(this.el) // External library.
-      } catch (error) {
-        console.warn(`Formatic is missing the autosize library`)
-      }
-    }
-  }
-}
-
-// --------------
-// Initialization
-// --------------
-
-document.addEventListener('DOMContentLoaded', () => {
-  document.querySelectorAll<HTMLElement>('.js-formatic-select').forEach((el) => {
-    console.debug('Instantiating Formatic.Select...')
-    new Formatic.Select(el)
-  })
-})
-

data/app/assets/javascript/formatic/components/stepper.ts

@@ -1,89 +0,0 @@
-namespace Formatic {
-  export class Stepper {
-    private el: HTMLElement
-
-    constructor(el: HTMLElement) {
-      this.el = el
-      this.setupBindings()
-    }
-
-    private setupBindings() {
-      this.incrementButtons.forEach((el) => {
-        el.addEventListener('click', (event) => {
-          event.preventDefault()
-          this.increment()
-        })
-      })
-
-      this.decrementButtons.forEach((el) => {
-        el.addEventListener('click', (event) => {
-          event.preventDefault()
-          this.decrement()
-        })
-      })
-
-      this.numberInput.addEventListener('click', (event) => {
-        this.numberInput.select()
-      })
-    }
-
-    private increment() {
-      if (!this.number && this.number != 0) {
-        // Incrementing leads to `0` (it's common to quickly want to achieve the number zero).
-        // But if the minimum is e.g. `1` then it should be that instead.
-        this.numberInput.value = Math.max(...[0, this.minimum]).toString()
-      } else if (isNaN(this.number)) {
-        // Do nothing on weird stuff.
-        return
-      } else if (this.number < this.minimum) {
-        this.numberInput.value = this.minimum.toString()
-      } else {
-        this.numberInput.value = (this.number + 1).toString()
-      }
-    }
-
-    private decrement() {
-      if (!this.number && this.number != 0) {
-        // Decementing empty leads to `-1`.
-        // But if the minimum is e.g. `0` then it should be that instead.
-        this.numberInput.value = Math.max(...[-1, this.minimum]).toString()
-      } else if (isNaN(this.number)) {
-        // Do nothing on weird stuff.
-        return
-      } else if (this.number <= this.minimum) {
-        // Do nothing if at the minimum already
-        return
-      } else {
-        // Normal decrement.
-        this.numberInput.value = (this.number - 1).toString()
-      }
-    }
-
-    private get minimum() {
-      return parseInt(this.numberInput.min)
-    }
-
-    private get number() {
-      return parseInt(this.numberInput.value)
-    }
-
-    private get incrementButtons() {
-      return this.el.querySelectorAll<HTMLLinkElement>('.js-formatic-stepper__increment')
-    }
-
-    private get decrementButtons() {
-      return this.el.querySelectorAll<HTMLLinkElement>('.js-formatic-stepper__decrement')
-    }
-
-    private get numberInput() {
-      return this.el.querySelector<HTMLInputElement>('.js-formatic-stepper__number')
-    }
-  }
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-  document.querySelectorAll<HTMLElement>('.js-formatic-stepper').forEach((el) => {
-    console.debug('Instantiating Formatic.Stepper...')
-    new Formatic.Stepper(el)
-  })
-})

data/app/assets/javascript/formatic/components/string.ts

@@ -1,103 +0,0 @@
-namespace Formatic {
-  export class String {
-    private el: HTMLElement
-    private timeoutId: ReturnType<typeof setTimeout>
-
-    constructor(el: HTMLElement) {
-      this.el = el
-      this.setupBindings()
-    }
-
-    private setupBindings() {
-      this.el.addEventListener('input', (event) => {
-        event.preventDefault()
-        if (this.autoSubmit) this.actionSave()
-      })
-    }
-
-    // ACTIONS
-
-    private actionSave() {
-      this.guiWaitingForSave()
-      this.debounce(this.actionSaveNow.bind(this))()
-    }
-
-    private actionSaveNow() {
-      console.debug("Saving text input...")
-      this.el.classList.remove('is-loading')
-      this.el.classList.add('is-saved')
-      this.save()
-    }
-
-    // GUI
-
-    private guiWaitingForSave() {
-      this.el.classList.add('is-loading')
-      this.el.classList.remove('is-saved')
-      this.el.classList.remove('is-failed')
-    }
-
-    private guiSaved() {
-      this.el.classList.remove('is-loading')
-      this.el.classList.add('is-saved')
-      this.el.classList.remove('is-failed')
-    }
-
-    private guiFailed() {
-      this.el.classList.remove('is-loading')
-      this.el.classList.remove('is-saved')
-      this.el.classList.add('is-failed')
-    }
-
-    // Attributes
-
-    private get autoSubmit() {
-      return this.el.classList.contains('is-autosubmit')
-    }
-
-    // Helpers
-
-    private save() {
-      const form = this.el.closest<HTMLFormElement>('form')
-      const data = new FormData(form)
-      data.set('_method', 'patch')
-
-      fetch(form.action, {
-        method: 'POST',
-        headers: { 'Accept': 'text/javascript' },
-        body: data
-      })
-        .then(response => {
-          if (response.status == 201) {
-            console.debug('String content saved')
-            this.guiSaved()
-          } else {
-            console.debug('String content not saved')
-            this.guiFailed()
-          }
-        }).catch(err => {
-          console.warn(err)
-          console.debug('Failed badly to save')
-        })
-    }
-
-    private debounce(fn: Function) {
-      return () => {
-        clearTimeout(this.timeoutId)
-        this.timeoutId = setTimeout(() => fn(), 1000)
-      }
-    }
-
-  }
-
-  // --------------
-  // Initialization
-  // --------------
-
-  document.addEventListener('DOMContentLoaded', () => {
-    document.querySelectorAll<HTMLElement>('.js-formatic-string').forEach((el) => {
-      console.debug('Instantiating Formatic.String...')
-      new Formatic.String(el)
-    })
-  })
-}

data/app/assets/javascript/formatic/components/textarea.ts

@@ -1,112 +0,0 @@
-namespace Formatic {
-  export class Textarea {
-    private el: HTMLElement
-    private timeoutId: ReturnType<typeof setTimeout>
-
-    constructor(el: HTMLElement) {
-      this.el = el
-      this.setupBindings()
-    }
-
-    private setupBindings() {
-      this.autosize()
-
-      this.el.addEventListener('input', (event) => {
-        event.preventDefault()
-        if (this.autoSubmit) this.actionSave()
-      })
-    }
-
-    // ACTIONS
-
-    private actionSave() {
-      this.guiWaitingForSave()
-      this.debounce(this.actionSaveNow.bind(this))()
-    }
-
-    private actionSaveNow() {
-      console.debug("Saving textarea...")
-      this.el.classList.remove('is-loading')
-      this.el.classList.add('is-saved')
-      this.save()
-    }
-
-    // GUI
-
-    private guiWaitingForSave() {
-      this.el.classList.add('is-loading')
-      this.el.classList.remove('is-saved')
-      this.el.classList.remove('is-failed')
-    }
-
-    private guiSaved() {
-      this.el.classList.remove('is-loading')
-      this.el.classList.add('is-saved')
-      this.el.classList.remove('is-failed')
-    }
-
-    private guiFailed() {
-      this.el.classList.remove('is-loading')
-      this.el.classList.remove('is-saved')
-      this.el.classList.add('is-failed')
-    }
-
-    // Attributes
-
-    private get autoSubmit() {
-      return this.el.classList.contains('is-autosubmit')
-    }
-
-    // Helpers
-
-    private save() {
-      const form = this.el.closest<HTMLFormElement>('form')
-      const data = new FormData(form)
-      data.set('_method', 'patch')
-
-      fetch(form.action, {
-        method: 'POST',
-        headers: { 'Accept': 'text/javascript' },
-        body: data
-      })
-        .then(response => {
-          if (response.status == 201) {
-            console.debug('Textarea content saved')
-            this.guiSaved()
-          } else {
-            console.debug('Textarea content not saved')
-            this.guiFailed()
-          }
-        }).catch(err => {
-          console.warn(err)
-          console.debug('Failed badly to save')
-        })
-    }
-
-    private debounce(fn: Function) {
-      return () => {
-        clearTimeout(this.timeoutId)
-        this.timeoutId = setTimeout(() => fn(), 1000)
-      }
-    }
-
-    private autosize() {
-      try {
-        autosize(this.el) // External library.
-      } catch (error) {
-        console.warn(`Formatic is missing the autosize library`)
-      }
-    }
-  }
-
-  // --------------
-  // Initialization
-  // --------------
-
-  document.addEventListener('DOMContentLoaded', () => {
-    document.querySelectorAll<HTMLElement>('.js-formatic-textarea').forEach((el) => {
-      console.debug('Instantiating Formatic.Textarea...')
-      new Formatic.Textarea(el)
-    })
-  })
-}

data/app/assets/javascript/formatic/components/toggle.ts

@@ -1,89 +0,0 @@
-namespace Formatic {
-  export class Toggle {
-
-    private el: HTMLElement
-
-    constructor(el: HTMLElement) {
-      this.el = el
-      this.setupBindings()
-    }
-
-    private setupBindings() {
-      this.checkbox.addEventListener('click', (event) => {
-        event.preventDefault()
-        const box = <HTMLInputElement>event.target
-        box.checked ? this.activate(box) : this.deactivate(box)
-      })
-    }
-
-    private activate(box: HTMLInputElement) {
-      const form = box.closest<HTMLFormElement>('form')
-      const data = new FormData(form)
-      data.set('_method', 'patch')
-
-      fetch(form.action, {
-        method: 'POST',
-        headers: { 'Accept': 'text/javascript' },
-        body: data
-      })
-        .then(response => {
-          // For accurate user feedback, we make sure this is not an accidental 200.
-          // Your controller needs to respond with 201 on create/update.
-          if (response.status == 201) {
-            console.debug('Activation confirmed')
-            box.checked = true
-          } else {
-            console.debug('Activation not confirmed')
-            console.log("Activation denied")
-          }
-        }).catch(err => {
-          console.warn(err)
-          console.debug('Failed badly to activate')
-        })
-    }
-
-    private deactivate(box: HTMLInputElement) {
-      const form = box.closest<HTMLFormElement>('form')
-      const data = new FormData(form)
-      data.set('_method', 'delete')
-
-      fetch(form.action, {
-        method: 'POST',
-        headers: { 'Accept': 'text/javascript' },
-        body: data
-      })
-        .then(response => {
-          // Your controller needs to respond with 204 on destroy.
-          if (response.status == 204) {
-            console.debug('Deactivation confirmed')
-            box.checked = false
-          } else {
-            console.debug('Deactivation not confirmed')
-            console.log("Deactivation denied")
-          }
-        }).catch(err => {
-          console.warn(err)
-          console.debug('Failed badly to deactivate')
-        })
-    }
-
-    // ------------
-    // DOM Elements
-    // ------------
-
-    private get checkbox() {
-      return this.el.querySelector<HTMLInputElement>('input[type="checkbox"]')
-    }
-  }
-}
-
-// --------------
-// Initialization
-// --------------
-
-document.addEventListener('DOMContentLoaded', () => {
-  document.querySelectorAll<HTMLElement>('.js-formatic-toggle').forEach((el) => {
-    console.debug('Instantiating Formatic::Toggle...')
-    new Formatic.Toggle(el)
-  })
-})