arara 0.2.0

data/app/javascript/arara/controllers/mdc_ripple_controller.js

@@ -0,0 +1,18 @@
+// Visit The Stimulus Handbook for more details 
+// https://stimulusjs.org/handbook/introduction
+// 
+// This example controller works with specially annotated HTML like:
+//
+// <div data-controller="hello">
+//   <h1 data-target="hello.output"></h1>
+// </div>
+
+import { Controller } from "stimulus"
+import { MDCRipple } from "@material/ripple"
+
+export default class extends Controller {
+  connect() {
+    const el = new MDCRipple(this.element)
+    this.el = el
+  }
+}

data/app/javascript/arara/controllers/mdc_select_controller.js

@@ -0,0 +1,27 @@
+// Visit The Stimulus Handbook for more details 
+// https://stimulusjs.org/handbook/introduction
+// 
+// This example controller works with specially annotated HTML like:
+//
+// <div data-controller="hello">
+//   <h1 data-target="hello.output"></h1>
+// </div>
+
+import { Controller } from "stimulus"
+import { MDCSelect } from "@material/select"
+
+export default class extends Controller {
+  static targets = ["input"]
+
+  connect() {
+    const el = new MDCSelect(this.element)
+
+    // initialize with the selected value
+    this.inputTarget.value = el.value
+
+    el.listen("MDCSelect:change", () => {
+      this.inputTarget.value = el.value
+    })
+    this.el = el
+  }
+}

data/app/javascript/arara/controllers/mdc_slider_controller.js

@@ -0,0 +1,21 @@
+// Visit The Stimulus Handbook for more details 
+// https://stimulusjs.org/handbook/introduction
+// 
+// This example controller works with specially annotated HTML like:
+//
+// <div data-controller="hello">
+//   <h1 data-target="hello.output"></h1>
+// </div>
+
+import { Controller } from "stimulus"
+import { MDCSlider } from "@material/slider"
+
+export default class extends Controller {
+  connect() {
+    const el = new MDCSlider(this.element)
+    el.listen("MDCSlider:change", () => {
+      alert(`Value changed to ${el.value}`)
+    })
+    this.el = el
+  }
+}

data/app/javascript/arara/controllers/mdc_snackbar_controller.js

@@ -0,0 +1,38 @@
+// Visit The Stimulus Handbook for more details 
+// https://stimulusjs.org/handbook/introduction
+// 
+// This example controller works with specially annotated HTML like:
+//
+// <div data-controller="hello">
+//   <h1 data-target="hello.output"></h1>
+// </div>
+
+import { Controller } from "stimulus"
+import { MDCSnackbar } from "@material/snackbar"
+
+export default class extends Controller {
+  static targets = ["button", "snackbar"]
+
+  connect() {
+    if (window.snackbarQueue == undefined) {
+      window.snackbarQueue = []
+    }
+    this.queue = window.snackbarQueue
+    this.snackbar = new MDCSnackbar(this.snackbarTarget)
+    this.snackbar.listen("MDCSnackbar:closed", () => this.handleClosed())
+  }
+
+  openSnackbar() {
+    this.queue.push(() => this.snackbar.open())
+    if (this.queue.length === 1) {
+      this.queue[0]()
+    }
+  }
+
+  handleClosed() {
+    this.queue.shift()
+    if (this.queue.length > 0) {
+      this.queue[0]()
+    }
+  }
+}

data/app/javascript/arara/controllers/mdc_switch_controller.js

@@ -0,0 +1,18 @@
+// Visit The Stimulus Handbook for more details 
+// https://stimulusjs.org/handbook/introduction
+// 
+// This example controller works with specially annotated HTML like:
+//
+// <div data-controller="hello">
+//   <h1 data-target="hello.output"></h1>
+// </div>
+
+import { Controller } from "stimulus"
+import { MDCSwitch } from "@material/switch"
+
+export default class extends Controller {
+  connect() {
+    const el = new MDCSwitch(this.element)
+    this.el = el
+  }
+}

data/app/javascript/arara/controllers/mdc_tab_bar_controller.js

@@ -0,0 +1,18 @@
+// Visit The Stimulus Handbook for more details 
+// https://stimulusjs.org/handbook/introduction
+// 
+// This example controller works with specially annotated HTML like:
+//
+// <div data-controller="hello">
+//   <h1 data-target="hello.output"></h1>
+// </div>
+
+import { Controller } from "stimulus"
+import { MDCTabBar } from "@material/tab-bar"
+
+export default class extends Controller {
+  connect() {
+    const el = new MDCTabBar(this.element)
+    this.el = el
+  }
+}

data/app/javascript/arara/controllers/mdc_text_field_controller.js

@@ -0,0 +1,35 @@
+// Visit The Stimulus Handbook for more details 
+// https://stimulusjs.org/handbook/introduction
+// 
+// This example controller works with specially annotated HTML like:
+//
+// <div data-controller="hello">
+//   <h1 data-target="hello.output"></h1>
+// </div>
+
+import { Controller } from "stimulus"
+import { MDCTextField } from "@material/textfield"
+
+export default class extends Controller {
+  static targets = ["element", "helperLine"]
+
+  connect() {
+    const el = new MDCTextField(this.elementTarget)
+    this.el = el
+  }
+
+  handleFocus(e) {
+    this.elementTarget.classList.remove("mdc-text-field--error")
+    if (this.hasHelperLineTarget) {
+      if (this.helperLineTarget.classList.contains("mdc-text-field-helper-line--error")) {
+        this.helperLineTarget.querySelector("p").innerHTML = ""
+      }
+      this.helperLineTarget.classList.remove("mdc-text-field-helper-line--error")
+    }
+  }
+
+  disconnect() {
+    this.el.destroy()
+    this.el = null
+  }
+}

data/app/javascript/arara/controllers/mdc_top_app_bar_controller.js

@@ -0,0 +1,18 @@
+// Visit The Stimulus Handbook for more details 
+// https://stimulusjs.org/handbook/introduction
+// 
+// This example controller works with specially annotated HTML like:
+//
+// <div data-controller="hello">
+//   <h1 data-target="hello.output"></h1>
+// </div>
+
+import { Controller } from "stimulus"
+import { MDCTopAppBar } from "@material/top-app-bar"
+
+export default class extends Controller {
+  connect() {
+    const el = new MDCTopAppBar(this.element)
+    this.el = el
+  }
+}

data/app/javascript/arara/controllers/rails_chip_set_choice_controller.js

@@ -0,0 +1,31 @@
+// Visit The Stimulus Handbook for more details 
+// https://stimulusjs.org/handbook/introduction
+// 
+// This example controller works with specially annotated HTML like:
+//
+// <div data-controller="hello">
+//   <h1 data-target="hello.output"></h1>
+// </div>
+
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static targets = ["input"]
+
+  connect() {
+    const controller = this.application.getControllerForElementAndIdentifier(this.element, "mdc-chip-set")
+    const chipSet = controller.el
+    const _this = this
+
+    chipSet.listen("MDCChip:selection", function (event) {
+      _this.handleSelection(event)
+    })
+  }
+
+  handleSelection(event) {
+    if (event.detail.selected) {
+      const value = event.target.attributes.value.value
+      this.inputTarget.value = value
+    }
+  }
+}

data/app/javascript/arara/controllers/rails_chip_set_filter_controller.js

@@ -0,0 +1,39 @@
+// Visit The Stimulus Handbook for more details 
+// https://stimulusjs.org/handbook/introduction
+// 
+// This example controller works with specially annotated HTML like:
+//
+// <div data-controller="hello">
+//   <h1 data-target="hello.output"></h1>
+// </div>
+
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  connect() {
+    const controller = this.application.getControllerForElementAndIdentifier(this.element, "mdc-chip-set")
+    const chipSet = controller.el
+    const _this = this
+
+    chipSet.listen("MDCChip:selection", function (event) {
+      _this.handleSelection(event)
+    })
+  }
+
+  handleSelection(event) {
+    // console.log("event", event)
+    console.log("target", event.target)
+    const inputValue = event.target.attributes.value.value
+    console.log("inputValue", event.target)
+    console.log("detail", event.detail)
+    const dataTarget = event.target.dataset.railsChipSetFilterTarget
+    console.log("dataTarget", dataTarget)
+    const target = this.element.querySelector(`[data-target="${dataTarget}"]`)
+    console.log("target", target)
+    if (event.detail.selected) {
+      target.value = inputValue
+    } else {
+      target.value = 0
+    }
+  }
+}

data/app/javascript/arara/controllers/remote_form_controller.js

@@ -0,0 +1,79 @@
+// Visit The Stimulus Handbook for more details 
+// https://stimulusjs.org/handbook/introduction
+// 
+// This example controller works with specially annotated HTML like:
+//
+// <div data-controller="hello">
+//   <h1 data-target="hello.output"></h1>
+// </div>
+
+function scrollTo(element, to = 0, duration = 1000) {
+
+  const start = element.scrollTop
+  const change = to - start
+  const increment = 20
+  let currentTime = 0
+
+  const animateScroll = (() => {
+
+    currentTime += increment
+
+    const val = Math.easeInOutQuad(currentTime, start, change, duration)
+
+    element.scrollTop = val
+
+    if (currentTime < duration) {
+      setTimeout(animateScroll, increment)
+    }
+  })
+
+  animateScroll()
+}
+
+Math.easeInOutQuad = function (t, b, c, d) {
+
+  t /= d / 2
+  if (t < 1) return c / 2 * t * t + b
+  t--
+  return -c / 2 * (t * (t - 2) - 1) + b
+}
+
+
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  connect() {
+    const formId = this.element.id
+
+    this.element.addEventListener("ajax:success", function (e, data, status, xhr) {
+      console.log("ajax:success")
+      return
+    })
+
+    this.element.addEventListener("ajax:error", function (e, xhr, status, error) {
+      var parser = new DOMParser()
+      var doc = parser.parseFromString(e.detail[2].responseText, "text/html")
+      var form = doc.querySelector(`form#${formId}`)
+
+      // sets the new form
+      const parentNode = e.target.parentNode
+      parentNode.replaceChild(form, e.target)
+
+      // animate to first element with error
+      const newForm = parentNode.querySelector(`form#${formId}`)
+      const elementWithError = newForm.querySelector(".mdc-text-field--error")
+
+      if (elementWithError) {
+        var content = document.querySelector("#content")
+        scrollTo(content, (elementWithError.offsetTop - content.offsetTop), 600)
+      }
+      e.stopPropagation()
+      return
+    })
+
+    this.element.addEventListener("ajax:complete", function (e, xhr, status, error) {
+      e.stopPropagation()
+      return
+    })
+  }
+}

data/app/javascript/arara/helpers/sum.js

@@ -0,0 +1,5 @@
+const sum = (a, b) => {
+  return a + b
+}
+
+export default sum

data/app/javascript/arara/index.js

@@ -0,0 +1,65 @@
+export { default as sum } from "./helpers/sum.js"
+export * from "./helpers/sum.js"
+
+export { default as body_class_toggler_controller } from "./controllers/body_class_toggler_controller.js"
+export * from "./controllers/body_class_toggler_controller.js"
+
+export { default as counter_controller } from "./controllers/counter_controller.js"
+export * from "./controllers/counter_controller.js"
+
+export { default as demo_dialog_controller } from "./controllers/demo_dialog_controller.js"
+export * from "./controllers/demo_dialog_controller.js"
+
+export { default as mdc_chip_set_controller } from "./controllers/mdc_chip_set_controller.js"
+export * from "./controllers/mdc_chip_set_controller.js"
+
+export { default as mdc_data_table_controller } from "./controllers/mdc_data_table_controller.js"
+export * from "./controllers/mdc_data_table_controller.js"
+
+export { default as mdc_form_field_controller } from "./controllers/mdc_form_field_controller.js"
+export * from "./controllers/mdc_form_field_controller.js"
+
+export { default as mdc_icon_toggle_controller } from "./controllers/mdc_icon_toggle_controller.js"
+export * from "./controllers/mdc_icon_toggle_controller.js"
+
+export { default as mdc_linear_progress_controller } from "./controllers/mdc_linear_progress_controller.js"
+export * from "./controllers/mdc_linear_progress_controller.js"
+
+export { default as mdc_list_controller } from "./controllers/mdc_list_controller.js"
+export * from "./controllers/mdc_list_controller.js"
+
+export { default as mdc_menu_controller } from "./controllers/mdc_menu_controller.js"
+export * from "./controllers/mdc_menu_controller.js"
+
+export { default as mdc_ripple_controller } from "./controllers/mdc_ripple_controller.js"
+export * from "./controllers/mdc_ripple_controller.js"
+
+export { default as mdc_select_controller } from "./controllers/mdc_select_controller.js"
+export * from "./controllers/mdc_select_controller.js"
+
+export { default as mdc_slider_controller } from "./controllers/mdc_slider_controller.js"
+export * from "./controllers/mdc_slider_controller.js"
+
+export { default as mdc_snackbar_controller } from "./controllers/mdc_snackbar_controller.js"
+export * from "./controllers/mdc_snackbar_controller.js"
+
+export { default as mdc_switch_controller } from "./controllers/mdc_switch_controller.js"
+export * from "./controllers/mdc_switch_controller.js"
+
+export { default as mdc_tab_bar_controller } from "./controllers/mdc_tab_bar_controller.js"
+export * from "./controllers/mdc_tab_bar_controller.js"
+
+export { default as mdc_text_field_controller } from "./controllers/mdc_text_field_controller.js"
+export * from "./controllers/mdc_text_field_controller.js"
+
+export { default as mdc_top_app_bar_controller } from "./controllers/mdc_top_app_bar_controller.js"
+export * from "./controllers/mdc_top_app_bar_controller.js"
+
+export { default as rails_chip_set_choice_controller } from "./controllers/rails_chip_set_choice_controller.js"
+export * from "./controllers/rails_chip_set_choice_controller.js"
+
+export { default as rails_chip_set_filter_controller } from "./controllers/rails_chip_set_filter_controller.js"
+export * from "./controllers/rails_chip_set_filter_controller.js"
+
+export { default as remote_form_controller } from "./controllers/remote_form_controller.js"
+export * from "./controllers/remote_form_controller.js"

data/app/javascript/arara/scss/_material_design.scss

@@ -0,0 +1,34 @@
+// Material Design
+@import "@material/typography/mdc-typography";
+@import "@material/ripple/mdc-ripple";
+@import "@material/top-app-bar/mdc-top-app-bar";
+
+@import "@material/form-field/mdc-form-field";
+@import "@material/button/mdc-button";
+@import "@material/card/mdc-card";
+@import "@material/checkbox/mdc-checkbox";
+@import "@material/icon-button/mdc-icon-button";
+@import "@material/chips/mdc-chips";
+@import "@material/data-table/mdc-data-table"; // needs checkbox
+@import "@material/dialog/mdc-dialog";
+@import "@material/elevation/mdc-elevation";
+@import "@material/fab/mdc-fab";
+@import "@material/image-list/mdc-image-list";
+@import "@material/layout-grid/mdc-layout-grid";
+@import "@material/list/mdc-list";
+@import "@material/linear-progress/mdc-linear-progress";
+@import "@material/menu-surface/mdc-menu-surface"; //needs list
+@import "@material/menu/mdc-menu"; //needs list
+@import "@material/radio/mdc-radio"; // needs form field
+@import "@material/select/mdc-select"; // needs list, menu-surface, menu
+@import "@material/slider/mdc-slider";
+@import "@material/snackbar/mdc-snackbar";
+@import "@material/switch/mdc-switch";
+
+@import "@material/tab-bar/mdc-tab-bar";
+@import "@material/tab-scroller/mdc-tab-scroller";
+@import "@material/tab-indicator/mdc-tab-indicator";
+@import "@material/tab/mdc-tab";
+
+@import "@material/textfield/mdc-text-field";
+@import "./material_design/_custom.scss"