formatic 0.2.3 → 0.2.4

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/checklist.css

@@ -0,0 +1 @@
+.c-formatic-checklist{display:grid;grid-row-gap:.4em}/*# sourceMappingURL=checklist.css.map */

data/app/assets/stylesheets/formatic/components/checklist.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["file:///Users/orange/Code/2-Areas/formatic/formatic/app/assets/stylesheets/formatic/components/checklist.sass"],"names":[],"mappings":"AAAA,sBACE,aACA","file":"checklist.css","sourcesContent":[".c-formatic-checklist\n  display: grid\n  grid-row-gap: 0.4em\n"]}

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

@@ -0,0 +1,17 @@
+/* Error: Can't find stylesheet to import.
+ *   ,
+ * 4 | @use "formatic/settings/colors"
+ *   | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ *   '
+ *   ../../2-Areas/formatic/formatic/app/assets/stylesheets/formatic/components/date.sass 4:1  root stylesheet */
+
+body::before {
+  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
+      "Droid Sans Mono", monospace, monospace;
+  white-space: pre;
+  display: block;
+  padding: 1em;
+  margin-bottom: 1em;
+  border-bottom: 2px solid black;
+  content: "Error: Can't find stylesheet to import.\a   \2577 \a 4 \2502  @use \"formatic/settings/colors\"\a   \2502  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\a   \2575 \a   ../../2-Areas/formatic/formatic/app/assets/stylesheets/formatic/components/date.sass 4:1  root stylesheet";
+}

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

data/app/assets/stylesheets/formatic/components/select.css

@@ -0,0 +1,17 @@
+/* Error: Can't find stylesheet to import.
+ *   ,
+ * 1 | @use "formatic/settings/colors"
+ *   | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ *   '
+ *   ../../2-Areas/formatic/formatic/app/assets/stylesheets/formatic/components/select.sass 1:1  root stylesheet */
+
+body::before {
+  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
+      "Droid Sans Mono", monospace, monospace;
+  white-space: pre;
+  display: block;
+  padding: 1em;
+  margin-bottom: 1em;
+  border-bottom: 2px solid black;
+  content: "Error: Can't find stylesheet to import.\a   \2577 \a 1 \2502  @use \"formatic/settings/colors\"\a   \2502  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\a   \2575 \a   ../../2-Areas/formatic/formatic/app/assets/stylesheets/formatic/components/select.sass 1:1  root stylesheet";
+}

data/app/assets/stylesheets/formatic/components/stepper.css

@@ -0,0 +1,17 @@
+/* Error: Can't find stylesheet to import.
+ *   ,
+ * 3 | @use "formatic/settings/colors"
+ *   | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ *   '
+ *   ../../2-Areas/formatic/formatic/app/assets/stylesheets/formatic/components/stepper.sass 3:1  root stylesheet */
+
+body::before {
+  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
+      "Droid Sans Mono", monospace, monospace;
+  white-space: pre;
+  display: block;
+  padding: 1em;
+  margin-bottom: 1em;
+  border-bottom: 2px solid black;
+  content: "Error: Can't find stylesheet to import.\a   \2577 \a 3 \2502  @use \"formatic/settings/colors\"\a   \2502  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\a   \2575 \a   ../../2-Areas/formatic/formatic/app/assets/stylesheets/formatic/components/stepper.sass 3:1  root stylesheet";
+}

data/app/assets/stylesheets/formatic/components/string.css

@@ -0,0 +1,17 @@
+/* Error: Can't find stylesheet to import.
+ *   ,
+ * 1 | @use "formatic/settings/colors"
+ *   | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ *   '
+ *   ../../2-Areas/formatic/formatic/app/assets/stylesheets/formatic/components/string.sass 1:1  root stylesheet */
+
+body::before {
+  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
+      "Droid Sans Mono", monospace, monospace;
+  white-space: pre;
+  display: block;
+  padding: 1em;
+  margin-bottom: 1em;
+  border-bottom: 2px solid black;
+  content: "Error: Can't find stylesheet to import.\a   \2577 \a 1 \2502  @use \"formatic/settings/colors\"\a   \2502  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\a   \2575 \a   ../../2-Areas/formatic/formatic/app/assets/stylesheets/formatic/components/string.sass 1:1  root stylesheet";
+}

data/app/assets/stylesheets/formatic/components/textarea.css

@@ -0,0 +1,17 @@
+/* Error: Can't find stylesheet to import.
+ *   ,
+ * 1 | @use "formatic/tools/cloud"
+ *   | ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ *   '
+ *   ../../2-Areas/formatic/formatic/app/assets/stylesheets/formatic/components/textarea.sass 1:1  root stylesheet */
+
+body::before {
+  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
+      "Droid Sans Mono", monospace, monospace;
+  white-space: pre;
+  display: block;
+  padding: 1em;
+  margin-bottom: 1em;
+  border-bottom: 2px solid black;
+  content: "Error: Can't find stylesheet to import.\a   \2577 \a 1 \2502  @use \"formatic/tools/cloud\"\a   \2502  ^^^^^^^^^^^^^^^^^^^^^^^^^^^\a   \2575 \a   ../../2-Areas/formatic/formatic/app/assets/stylesheets/formatic/components/textarea.sass 1:1  root stylesheet";
+}

data/app/assets/stylesheets/formatic/components/time.css

@@ -0,0 +1,17 @@
+/* Error: Can't find stylesheet to import.
+ *   ,
+ * 3 | @use "formatic/tools/mandatory"
+ *   | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ *   '
+ *   ../../2-Areas/formatic/formatic/app/assets/stylesheets/formatic/components/time.sass 3:1  root stylesheet */
+
+body::before {
+  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
+      "Droid Sans Mono", monospace, monospace;
+  white-space: pre;
+  display: block;
+  padding: 1em;
+  margin-bottom: 1em;
+  border-bottom: 2px solid black;
+  content: "Error: Can't find stylesheet to import.\a   \2577 \a 3 \2502  @use \"formatic/tools/mandatory\"\a   \2502  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\a   \2575 \a   ../../2-Areas/formatic/formatic/app/assets/stylesheets/formatic/components/time.sass 3:1  root stylesheet";
+}

data/app/assets/stylesheets/formatic/components/toggle.css

@@ -0,0 +1,17 @@
+/* Error: Can't find stylesheet to import.
+ *   ,
+ * 2 | @use "formatic/settings/colors"
+ *   | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ *   '
+ *   ../../2-Areas/formatic/formatic/app/assets/stylesheets/formatic/components/toggle.sass 2:1  root stylesheet */
+
+body::before {
+  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
+      "Droid Sans Mono", monospace, monospace;
+  white-space: pre;
+  display: block;
+  padding: 1em;
+  margin-bottom: 1em;
+  border-bottom: 2px solid black;
+  content: "Error: Can't find stylesheet to import.\a   \2577 \a 2 \2502  @use \"formatic/settings/colors\"\a   \2502  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\a   \2575 \a   ../../2-Areas/formatic/formatic/app/assets/stylesheets/formatic/components/toggle.sass 2:1  root stylesheet";
+}

data/app/assets/stylesheets/formatic/components/wrapper.css

@@ -0,0 +1,17 @@
+/* Error: Can't find stylesheet to import.
+ *   ,
+ * 3 | @use "formatic/settings/colors"
+ *   | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ *   '
+ *   ../../2-Areas/formatic/formatic/app/assets/stylesheets/formatic/components/wrapper.sass 3:1  root stylesheet */
+
+body::before {
+  font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
+      "Droid Sans Mono", monospace, monospace;
+  white-space: pre;
+  display: block;
+  padding: 1em;
+  margin-bottom: 1em;
+  border-bottom: 2px solid black;
+  content: "Error: Can't find stylesheet to import.\a   \2577 \a 3 \2502  @use \"formatic/settings/colors\"\a   \2502  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\a   \2575 \a   ../../2-Areas/formatic/formatic/app/assets/stylesheets/formatic/components/wrapper.sass 3:1  root stylesheet";
+}