formatic 0.2.3 → 0.2.5

data/app/assets/javascript/formatic/toggle.js

@@ -0,0 +1,63 @@
+export class Toggle {
+    constructor(el) {
+        this.el = el;
+        this.setupBindings();
+    }
+    setupBindings() {
+        this.checkbox.addEventListener('click', (event) => {
+            event.preventDefault();
+            const box = event.target;
+            box.checked ? this.activate(box) : this.deactivate(box);
+        });
+    }
+    activate(box) {
+        const form = box.closest('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('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');
+        });
+    }
+    deactivate(box) {
+        const form = box.closest('form');
+        const data = new FormData(form);
+        data.set('_method', 'delete');
+        fetch(form.action, {
+            method: 'POST',
+            headers: { 'Accept': 'text/javascript' },
+            body: data
+        })
+            .then(response => {
+            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');
+        });
+    }
+    get checkbox() {
+        return this.el.querySelector('input[type="checkbox"]');
+    }
+}
+//# sourceMappingURL=toggle.js.map

data/app/assets/javascript/formatic/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../src/toggle.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,MAAM;IAIjB,YAAY,EAAe;QACzB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAA;QACZ,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YAChD,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,MAAM,GAAG,GAAqB,KAAK,CAAC,MAAM,CAAA;YAC1C,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAA;QACzD,CAAC,CAAC,CAAA;IACJ,CAAC;IAEO,QAAQ,CAAC,GAAqB;QACpC,MAAM,IAAI,GAAG,GAAG,CAAC,OAAO,CAAkB,MAAM,CAAC,CAAA;QACjD,MAAM,IAAI,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAA;QAC/B,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;QAE5B,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE;YACjB,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,EAAE,QAAQ,EAAE,iBAAiB,EAAE;YACxC,IAAI,EAAE,IAAI;SACX,CAAC;aACC,IAAI,CAAC,QAAQ,CAAC,EAAE;YAGf,IAAI,QAAQ,CAAC,MAAM,IAAI,GAAG,EAAE,CAAC;gBAC3B,OAAO,CAAC,KAAK,CAAC,sBAAsB,CAAC,CAAA;gBACrC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAA;YACpB,CAAC;iBAAM,CAAC;gBACN,OAAO,CAAC,KAAK,CAAC,0BAA0B,CAAC,CAAA;gBACzC,OAAO,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAA;YAClC,CAAC;QACH,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YACb,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;YACjB,OAAO,CAAC,KAAK,CAAC,0BAA0B,CAAC,CAAA;QAC3C,CAAC,CAAC,CAAA;IACN,CAAC;IAEO,UAAU,CAAC,GAAqB;QACtC,MAAM,IAAI,GAAG,GAAG,CAAC,OAAO,CAAkB,MAAM,CAAC,CAAA;QACjD,MAAM,IAAI,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAA;QAC/B,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAA;QAE7B,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE;YACjB,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,EAAE,QAAQ,EAAE,iBAAiB,EAAE;YACxC,IAAI,EAAE,IAAI;SACX,CAAC;aACC,IAAI,CAAC,QAAQ,CAAC,EAAE;YAEf,IAAI,QAAQ,CAAC,MAAM,IAAI,GAAG,EAAE,CAAC;gBAC3B,OAAO,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAA;gBACvC,GAAG,CAAC,OAAO,GAAG,KAAK,CAAA;YACrB,CAAC;iBAAM,CAAC;gBACN,OAAO,CAAC,KAAK,CAAC,4BAA4B,CAAC,CAAA;gBAC3C,OAAO,CAAC,GAAG,CAAC,qBAAqB,CAAC,CAAA;YACpC,CAAC;QACH,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YACb,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;YACjB,OAAO,CAAC,KAAK,CAAC,4BAA4B,CAAC,CAAA;QAC7C,CAAC,CAAC,CAAA;IACN,CAAC;IAMD,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAmB,wBAAwB,CAAC,CAAA;IAC1E,CAAC;CACF"}

data/app/assets/javascript/src/date.ts

@@ -0,0 +1,41 @@
+export class Date {
+  private el: HTMLElement
+
+  constructor(el: HTMLElement) {
+    this.el = el
+    this.setupBindings()
+  }
+
+  private setupBindings() {
+    this.shortcutButtons.forEach((el) => {
+      el.addEventListener('click', (event) => {
+        event.preventDefault()
+        const shortcut = <HTMLInputElement>event.currentTarget
+
+        this.dayInput.value = shortcut.dataset.day
+        this.monthInput.value = shortcut.dataset.month
+        this.yearInput.value = shortcut.dataset.year
+      })
+    })
+  }
+
+  // ------------
+  // DOM Elements
+  // ------------
+
+  private get dayInput() {
+    return this.el.querySelector<HTMLSelectElement>('.js-formatic-date__day')
+  }
+
+  private get monthInput() {
+    return this.el.querySelector<HTMLSelectElement>('.js-formatic-date__month')
+  }
+
+  private get yearInput() {
+    return this.el.querySelector<HTMLSelectElement>('.js-formatic-date__year')
+  }
+
+  private get shortcutButtons() {
+    return this.el.querySelectorAll<HTMLElement>('.js-formatic-date__shortcut')
+  }
+}

data/app/assets/javascript/src/file.ts

@@ -0,0 +1,122 @@
+import * as FilePond from "filepond"
+import { DirectUpload } from "@rails/activestorage"
+
+export class FormaticFile {
+  private el: HTMLElement
+  private url: string
+  private pond: FilePond.FilePond
+  private busyStatuses = new Set([
+    FilePond.FileStatus.LOADING,
+    FilePond.FileStatus.PROCESSING_QUEUED,
+    FilePond.FileStatus.PROCESSING,
+  ]);
+  private inputID: string | null = null;
+
+  constructor(el: HTMLElement) {
+    this.el = el
+    this.url = this.input.dataset.directUploadUrl
+    this.inputID = this.input.id
+    this.setupBindings()
+  }
+
+  private setupBindings() {
+    this.pond = FilePond.create(this.input, {
+      credits: false,
+      onwarning: () => this.updateSubmit(),
+      onerror: () => this.updateSubmit(),
+      onaddfilestart: () => this.updateSubmit(),
+      onaddfileprogress: () => this.updateSubmit(),
+      onaddfile: () => this.updateSubmit(),
+      onprocessfilestart: () => this.updateSubmit(),
+      onprocessfileprogress: () => this.updateSubmit(),
+      onprocessfileabort: () => this.updateSubmit(),
+      onprocessfilerevert: () => this.updateSubmit(),
+      onprocessfile: () => this.updateSubmit(),
+      onprocessfiles: () => this.updateSubmit(),
+      onremovefile: () => this.updateSubmit(),
+      onpreparefile: () => this.updateSubmit(),
+      onupdatefiles: () => this.updateSubmit(),
+      onactivatefile: () => this.updateSubmit(),
+      onreorderfiles: () => this.updateSubmit(),
+      server: {
+        process: (fieldName, file, _metadata, load, error, progress, abort, transfer, options) => {
+
+          const uploader = new DirectUpload(file as File, this.url, {
+            directUploadWillStoreFileWithXHR: (request) => {
+              request.upload.addEventListener(
+                'progress',
+                event => progress(event.lengthComputable, event.loaded, event.total)
+              )
+            }
+          })
+
+          uploader.create((errorResponse, blob) => {
+            if (errorResponse) {
+              error(`Something went wrong: ${errorResponse}`)
+            } else {
+              // See https://edgeguides.rubyonrails.org/active_storage_overview.html#direct-upload-javascript-events
+              // See https://stackoverflow.com/questions/75586818
+              load(blob.signed_id)
+            }
+          })
+
+          return {
+            abort: () => abort()
+          }
+        },
+        headers: {
+          'X-CSRF-Token': document.querySelector<HTMLMetaElement>('meta[name="csrf-token"]')?.content
+        }
+      },
+      oninit: () => this.updateLabelId(),
+    })
+  }
+
+  // FilePond replaces the <input id="X"> with <div id="X"><input id="something-new">
+  // But the <form> may have <label for="X"> so we need to update them.
+  // to become <label for="something-new">
+  private updateLabelId() {
+    if (!this.inputID) return
+
+    const labels = this.form.querySelectorAll(`label[for="${this.inputID}"]`)
+    if (labels.length === 0) return
+
+    const pondInput = this.input.querySelector('input[type="file"]')
+    if (!pondInput) return
+
+    const pondInputId = pondInput.id;
+    if (!pondInputId) return
+
+    labels.forEach(label => label.setAttribute('for', pondInputId))
+  }
+
+  private updateSubmit() {
+    const files = this.pond.getFiles()
+    const busyFiles = files.some(f => this.busyStatuses.has(f.status))
+    busyFiles ? this.disableSubmit() : this.enableSubmit()
+  }
+
+  private enableSubmit() {
+    this.submitButtons.forEach((button) => {
+      button.disabled = false
+    })
+  }
+
+  private disableSubmit() {
+    this.submitButtons.forEach((button) => {
+      button.disabled = true
+    })
+  }
+
+  private get input() {
+    return this.el.querySelector<HTMLInputElement>('.js-formatic-file__input')
+  }
+
+  private get form() {
+    return this.el.closest<HTMLFormElement>('form')
+  }
+
+  private get submitButtons() {
+    return this.form.querySelectorAll<HTMLButtonElement>('[type="submit"]')
+  }
+}

data/app/assets/javascript/src/select.ts

@@ -0,0 +1,101 @@
+import autosize from "autosize"
+
+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`)
+    }
+  }
+}

data/app/assets/javascript/src/stepper.ts

@@ -0,0 +1,80 @@
+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')
+  }
+}

data/app/assets/javascript/src/string.ts

@@ -0,0 +1,89 @@
+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)
+    }
+  }
+}

data/app/assets/javascript/src/textarea.ts

@@ -0,0 +1,101 @@
+import autosize from "autosize"
+
+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`)
+    }
+  }
+}

data/app/assets/javascript/src/toggle.ts

@@ -0,0 +1,76 @@
+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"]')
+  }
+}

data/app/assets/stylesheets/formatic/components/date.sass

@@ -36,11 +36,11 @@
     justify-content: center
     color: colors.$black
     +spacing.margin-right--smaller
-    +spacing.padding-tiny
+    +spacing.padding--tiny
 
   &__clear
     +font-size.large
-    +spacing.padding-small
+    +spacing.padding--small
 
   &__calendar-day-number
     +font-size.default