satis 1.0.75 → 2.0.8

data/app/javascript/satis/application.js

@@ -0,0 +1,8 @@
+import "@hotwired/turbo-rails"
+import "satis/controllers"
+import "satis/utility_controllers"
+import "trix"
+import "@rails/actiontext"
+
+import SatisCopyable from "satis/elements/copyable_element"
+customElements.define('satis-copyable', SatisCopyable)

data/app/javascript/satis/controllers/application.js

@@ -0,0 +1,12 @@
+import { Application } from '@hotwired/stimulus'
+
+let application
+if (window.Stimulus) {
+  application = window.Stimulus
+} else {
+  application = Application.start()
+  application.debug = false
+  window.Stimulus = application
+}
+
+export { application }

data/app/javascript/satis/controllers/application_controller.js

@@ -0,0 +1,71 @@
+// application_controller.js
+import { Controller } from "@hotwired/stimulus"
+
+export default class ApplicationController extends Controller {
+  connect() {
+    this.element[this.identifier] = this
+  }
+
+  getController(element, identifier) {
+    return this.application.getControllerForElementAndIdentifier(element, identifier)
+  }
+
+  triggerEvent(el, name, data) {
+    let event
+    if (typeof window.CustomEvent === "function") {
+      event = new CustomEvent(name, { detail: data, cancelable: true, bubbles: true })
+    } else {
+      event = document.createEvent("CustomEvent")
+      event.initCustomEvent(name, true, true, data)
+    }
+    el.dispatchEvent(event)
+  }
+
+  elementScrolled(element) {
+    if (element.scrollHeight - Math.round(element.scrollTop) === element.clientHeight) {
+      return true
+    }
+    return false
+  }
+
+  getUserData(key) {
+    return fetch("/satis/user_data/" + key, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+      .then((res) => {
+        if (res.ok) {
+          return res.json().then((data) => {
+            return data
+          })
+        }
+      })
+      .catch((err) => {
+        console.log(err)
+      })
+  }
+
+  setUserData(key, data) {
+    let csrfToken = document.querySelector("meta[name=csrf-token]").content
+    return fetch("/satis/user_data/" + key, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRF-Token": csrfToken,
+      },
+      body: JSON.stringify(data),
+    })
+      .then((res) => {
+        if (res.ok) {
+          return res.json().then((data) => {
+            return data
+          })
+        }
+      })
+      .catch((err) => {
+        console.log(err)
+      })
+  }
+}

data/app/javascript/satis/controllers/fields_for_controller.js

@@ -0,0 +1,74 @@
+import ApplicationController from "satis/controllers/application_controller"
+
+export default class FieldsForController extends ApplicationController {
+  static targets = ["insertionPoint", "template"]
+
+  connect() {
+    super.connect()
+
+    this.boundMonitorChanges = this.monitorChanges.bind(this)
+    this.addNewLine()
+  }
+
+  addAssociation(event) {
+    event.preventDefault()
+
+    // Find template and remove event listeners
+    let templateElement = this.insertionPointTarget.querySelector(".template")
+    templateElement.querySelectorAll("input,select").forEach((input) => {
+      input.removeEventListener("change", this.boundMonitorChanges)
+    })
+
+    let tmpNode = event.target.closest(".nested-fields")
+    tmpNode.classList.remove("template")
+    tmpNode.querySelectorAll(".association").forEach((item) => {
+      if (item.classList.contains("hidden")) {
+        item.classList.remove("hidden")
+      } else {
+        item.remove()
+      }
+    })
+
+    // Simply replace every child node's attributes value, replacing TEMPLATE
+    let id = new Date().valueOf()
+    tmpNode.querySelectorAll("*").forEach((node) => {
+      for (let attribute of node.attributes) {
+        attribute.value = attribute.value.replace(/TEMPLATE/g, id)
+      }
+    })
+
+    tmpNode.querySelectorAll("template").forEach((node) => {
+      node.innerHTML = node.innerHTML.replace(/TEMPLATE/g, id)
+    })
+
+    this.addNewLine()
+
+    window.scrollBy(0, this.element.querySelector(".nested-fields").clientHeight)
+  }
+
+  addNewLine() {
+    this.insertionPointTarget.insertAdjacentHTML("beforeend", this.templateTarget.innerHTML)
+
+    // Find template and add event listeners
+    let templateElement = this.insertionPointTarget.querySelector(".template")
+    templateElement.querySelectorAll("input,select").forEach((input) => {
+      input.addEventListener("change", this.boundMonitorChanges)
+    })
+  }
+
+  monitorChanges(event) {
+    if (event?.detail?.src == "satis-dropdown") {
+      // Skip events caused by the initial load of a satis-dropdown
+      return
+    }
+
+    this.addAssociation(event)
+  }
+
+  removeAssociation(event) {
+    event.preventDefault()
+    let item = event.target.closest(".nested-fields")
+    item.querySelector("input[name*='_destroy']").value = 1
+    item.style.display = "none"
+  }
+}

data/app/javascript/satis/controllers/file_controller.js

@@ -0,0 +1,26 @@
+import ApplicationController from "satis/controllers/application_controller"
+
+export default class FileController extends ApplicationController {
+  static targets = ["selection", "input"]
+
+  connect() {
+    this.boundUpdate = this.update.bind(this)
+    this.inputTarget.addEventListener("change", this.boundUpdate)
+    this.update()
+  }
+
+  disconnect() {
+    this.inputTarget.removeEventListener("change", this.boundUpdate)
+  }
+
+  update(evt) {
+    this.selectionTarget.innerHTML = ""
+    Array.from(this.inputTarget.files).forEach((file) => {
+      this.selectionTarget.innerHTML += `${file.name}<br>`
+    })
+  }
+
+  toggle(value) {
+    // FIXME: We should capture the current content and update the template it came from.
+  }
+}

data/app/javascript/satis/controllers/form_controller.js

@@ -0,0 +1,77 @@
+import ApplicationController from "satis/controllers/application_controller"
+
+export default class FormController extends ApplicationController {
+  static targets = []
+  static values = {
+    noSubmitOnEnter: Boolean,
+    confirmBeforeLeave: Boolean
+  }
+
+  connect() {
+    super.connect()
+
+    this.formSubmitting = false
+    this.boundSetFormSubmitting = this.setFormSubmitting.bind(this)
+
+    this.element.addEventListener('submit', this.boundSetFormSubmitting)
+
+    if (this.noSubmitOnEnterValue) {
+      this.element.addEventListener('keydown', function(event) {
+        if (event.key === 'Enter' && event.target && !(event.target.nodeName === 'TEXTAREA' || event.target.nodeName === 'TRIX-EDITOR')) {
+          event.preventDefault()
+        }
+      })
+    }
+
+    this.boundCheckForChanges = this.checkForChanges.bind(this)
+    this.boundCheckForChangesBeforeUnload = this.checkForChangesBeforeUnload.bind(this)
+
+    if (this.confirmBeforeLeaveValue) {
+      this.originalData = this.getFormData()
+      document.addEventListener('turbo:before-visit', this.boundCheckForChanges)
+      window.addEventListener('beforeunload', this.boundCheckForChangesBeforeUnload)
+    }
+  }
+
+  disconnect() {
+    this.element.removeEventListener('submit', this.boundSetFormSubmitting)
+    document.removeEventListener('turbo:before-visit', this.boundCheckForChanges)
+    window.removeEventListener('beforeunload', this.boundCheckForChangesBeforeUnload)
+  }
+
+  checkForChanges(event) {
+    if (this.isDirty() && ! this.formSubmitting && ! window.confirm("Changes you made may not be saved, are you sure you want to leave this page?")) {
+      event.preventDefault()
+    }
+  }
+
+  checkForChangesBeforeUnload(event) {
+    if (this.isDirty() && ! this.formSubmitting) {
+      event.preventDefault()
+      return "Changes you made may not be saved, are you sure you want to leave this page?"
+    }
+  }
+
+  getFormData() {
+    let elementFormData = new FormData(this.element)
+    let formData = new FormData()
+    for(let pair of elementFormData.entries()) {
+      if(pair[0].indexOf('[TEMPLATE]') == -1 && pair[0] != 'search' && pair[0] != 'tabs') {
+        formData.append(pair[0], pair[1])
+      }
+    }
+    return new URLSearchParams(formData).toString()
+  }
+
+  isDirty() {
+    return this.originalData != this.getFormData()
+  }
+
+  setFormSubmitting(event) {
+    if (this.formSubmitting) {
+      event.preventDefault()
+    }
+
+    this.formSubmitting = true
+  }
+}

data/app/javascript/satis/controllers/index.js

@@ -0,0 +1,70 @@
+import { application } from "satis/controllers/application";
+
+import AppearanceSwitcherComponentController from "satis/components/appearance_switcher/component_controller";
+application.register("satis-appearance-switcher", AppearanceSwitcherComponentController);
+
+import DateTimePickerComponentController from "satis/components/date_time_picker/component_controller";
+application.register("satis-date-time-picker", DateTimePickerComponentController);
+
+import DropdownComponentController from "satis/components/dropdown/component_controller";
+application.register("satis-dropdown", DropdownComponentController);
+
+import InputComponentController from "satis/components/input/component_controller";
+application.register("satis-input", InputComponentController);
+
+import InputArrayComponentController from "satis/components/input_array/component_controller";
+application.register("satis-input-array", InputArrayComponentController);
+
+import MapComponentController from "satis/components/map/component_controller";
+application.register("satis-map", MapComponentController);
+
+import MenuComponentController from "satis/components/menu/component_controller";
+application.register("satis-menu", MenuComponentController);
+
+import PageComponentController from "satis/components/page/component_controller";
+application.register("satis-page", PageComponentController);
+
+import SidebarMenuComponentController from "satis/components/sidebar_menu/component_controller";
+application.register("satis-sidebar-menu", SidebarMenuComponentController);
+
+import SidebarMenuItemComponentController from "satis/components/sidebar_menu_item/component_controller";
+application.register("satis-sidebar-menu-item", SidebarMenuItemComponentController);
+
+import SwitchComponentController from "satis/components/switch/component_controller";
+application.register("satis-switch", SwitchComponentController);
+
+import TabsComponentController from "satis/components/tabs/component_controller";
+application.register("satis-tabs", TabsComponentController);
+
+import EditorComponentController from "satis/components/editor/component_controller";
+application.register("satis-editor", EditorComponentController);
+
+import DialogComponentController from "satis/components/dialog/component_controller";
+application.register("satis-dialog", DialogComponentController);
+
+// Controllers
+
+import LinkController from "satis/controllers/link_controller";
+application.register("satis-link", LinkController);
+
+import FieldsForController from "satis/controllers/fields_for_controller";
+application.register("satis-fields-for", FieldsForController);
+
+import FormController from "satis/controllers/form_controller";
+application.register("satis-form", FormController);
+
+import FileController from "satis/controllers/file_controller";
+application.register("satis-file", FileController);
+
+import PhoneNumberController from "satis/controllers/phone_number_controller";
+application.register("phone-number", PhoneNumberController);
+
+// See: https://github.com/hotwired/stimulus-rails/blob/main/app/assets/javascripts/stimulus-loading.js
+
+// // Eager load all controllers defined in the import map under controllers/**/*_controller
+// import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+// eagerLoadControllersFrom("controllers", application)
+
+// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
+// import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
+// lazyLoadControllersFrom("controllers", application)

data/app/javascript/satis/controllers/link_controller.js

@@ -0,0 +1,34 @@
+import ApplicationController from "satis/controllers/application_controller"
+
+/*
+ * Link controller
+ *
+ *   div data-controller="satis-link" href="" data-turbo="false" target="_blank" data-action='click->satis-link#follow'
+ *
+ */
+export default class LinkController extends ApplicationController {
+  connect() {
+    super.connect()
+  }
+
+  follow(event) {
+    if (event.target.tagName != this.element.tagName && event.target.closest(this.element.tagName.toLowerCase()) != this.element) {
+      // Don't do this anymore when both tagNames are the same (the one you click and the element with the controller
+      // This is in to make sure row-links using satis-link controller will not trigger when an A or an SVG in that A is triggered.
+      return
+    }
+
+    if (event.target != this.element && event.target.closest('a') != undefined) {
+      // There is an 'a' tag inside the 'satis-link' tag, and we just clicked on it.
+      return
+    }
+
+    if (event.metaKey || event.ctrlKey) {
+      window.open(this.element.getAttribute("href"), "_blank")
+    } else if (this.element.getAttribute("data-turbo") == "false") {
+      window.open(this.element.getAttribute("href"), this.element.getAttribute("target"))
+    } else {
+      Turbo.visit(this.element.getAttribute("href"))
+    }
+  }
+}

data/app/javascript/satis/controllers/phone_number_controller.js

@@ -0,0 +1,30 @@
+import ApplicationController from "satis/controllers/application_controller"
+import {debounce} from "satis/utils"
+import * as dummy1 from "intl-tel-input"
+import * as dummy2 from "intl-tel-input-utils"
+
+export default class PhoneNumberController extends ApplicationController {
+  static targets = ["input", "hiddenInput"]
+
+  initialize() {
+    super.initialize()
+    this.change = debounce(this.change, 500).bind(this)
+  }
+
+  connect() {
+    super.connect()
+    this.instance = intlTelInput(this.inputTarget, {
+      initialCountry: "nl",
+      formatOnInit: true,
+      preferredCountries: ["nl", "de", "gb", "fr", "us", "es", "be", "se"],
+      nationalMode: false,
+      utilsScript: intlTelInputUtils,
+      dropdownContainer: document.body,
+    })
+  }
+
+  change(event) {
+    this.hiddenInputTarget.value = this.instance.getNumber(intlTelInputUtils.numberFormat.INTERNATIONAL)
+    this.inputTarget.value = this.instance.getNumber(intlTelInputUtils.numberFormat.INTERNATIONAL)
+  }
+}

data/app/javascript/satis/elements/copyable_element.js

@@ -0,0 +1,57 @@
+import tippy from "tippy.js"
+
+export default class SatisCopyable extends HTMLElement {
+  constructor() {
+    super()
+
+    const shadow = this.attachShadow({ mode: "open" })
+
+    this.textSpan = document.createElement("span")
+    this.textSpan.textContent = this.textContent
+    shadow.appendChild(this.textSpan)
+
+    this.tippy = tippy(this.textSpan, { content: "Click to copy" })
+
+    this.input = document.createElement("input")
+    this.input.style.position = "fixed"
+    this.input.style.bottom = 0
+    this.input.style.left = 0
+    this.input.style.width = "1px"
+    this.input.style.height = "1px"
+    this.input.style.padding = 0
+    this.input.style.border = "none"
+    this.input.style.outline = "none"
+    this.input.style.boxShadow = "none"
+    this.input.style.background = "transparent"
+    this.input.value = this.textSpan.textContent.replace(this.getAttribute("scrub"), "")
+
+    shadow.appendChild(this.input)
+
+    this.textSpan.addEventListener("click", this.copy.bind(this))
+  }
+
+  copy(event) {
+    this.input.select()
+
+    try {
+      var successful = document.execCommand("copy")
+      var msg = successful ? "Copied!" : "Not copied"
+      this.tippy.setContent(msg)
+      this.tippy.show()
+    } catch (err) {
+      this.tippy.setContent("Oops, unable to copy")
+      this.tippy.show()
+    }
+    setTimeout(() => {
+      this.tippy.hide()
+    }, 700)
+
+    setTimeout(() => {
+      this.tippy.setContent("Click to copy")
+    }, 1000)
+
+    window.getSelection().removeAllRanges()
+    event.preventDefault()
+    return false
+  }
+}

data/app/javascript/satis/utility_controllers/draggable_controller.js

@@ -0,0 +1,144 @@
+import { Controller } from "@hotwired/stimulus"
+
+import Sortable from "sortablejs"
+
+/*
+  This Stimulus controller uses sortablejs for drag and drop, it then sends a JSON body with the
+  following items to the designated URL:
+
+  index     : the new index
+  item-id   : the item's id (if specified)
+  parent-id : the parent id (if specified)
+
+  Example usages:
+
+  <div data-controller="draggable">
+    <div data-draggable-url="/url/to/item1">Item 1</div>
+    <div data-draggable-url="/url/to/item2">Item 2</div>
+    <div data-draggable-url="/url/to/item3">Item 3</div>
+  </div>
+
+  The above will send a PATCH request with the new index to the items' data-draggable-url
+
+  If you want another request type you can specify it like so:
+
+  <div data-controller="draggable" data-draggable-method="PUT">
+    <div data-draggable-url="/url/to/item1">Item 1</div>
+    <div data-draggable-url="/url/to/item2">Item 2</div>
+    <div data-draggable-url="/url/to/item3">Item 3</div>
+  </div>
+
+  The above will send PUT requests
+
+  You can also use one URL for all your items:
+
+  <div data-controller="draggable" data-draggable-url="/url/to/items" data-draggable-item-id="true">
+    <div data-draggable-item-id="1">Item 1</div>
+    <div data-draggable-item-id="2">Item 2</div>
+    <div data-draggable-item-id="3">Item 3</div>
+  </div>
+
+  The above will send a PATCH request with the new index and the item-id to the data-draggable-url. If
+  data-draggable-item-id is true it will not send a request without an item-id
+
+  If you want to use a nested structure you can specify a selector to specify which elements
+  under the controller's element will be activated, specifying the data-draggable-group allows
+  you to drag items between the different lists:
+
+  <div data-controller="draggable" data-draggable-url="/url/to/items" data-draggable-selector="ul" data-draggable-group="nested" data-draggable-item-id="true" data-draggable-parent-id="true">
+    <ul>
+      <li data-draggable-item-id="1">Item 1</li>
+      <li data-draggable-item-id="2">
+        Item 2
+        <ul data-draggable-parent-id="2">
+          <li data-draggable-item-id="3">Item 3</li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+
+  The above will also require a data-draggable-parent-id to drag an item to another list
+ */
+export default class extends Controller {
+  connect() {
+    const self = this
+
+    let selector = self.data.get("selector")
+
+    if (selector) {
+      self.element.querySelectorAll(selector).forEach((el) => {
+        self.sortable(el)
+      })
+    } else {
+      self.sortable(self.element)
+    }
+  }
+
+  sortable(element) {
+    const self = this
+
+    let options = {
+      animation: 150,
+      fallbackOnBody: true,
+      swapThreshold: 0.65,
+      onEnd: (evt) => {
+        let url = self.data.get("url") || evt.item.getAttribute("data-draggable-url")
+        let method = self.data.get("method") || evt.item.getAttribute("data-draggable-method") || "PATCH"
+        let csrfToken = document.querySelector("meta[name=csrf-token]").content
+        let itemIdSelector = self.data.get("item-id-selector")
+        let itemId = evt.item.getAttribute("data-draggable-item-id")
+        if (!itemId && itemIdSelector) {
+          itemId = evt.item.querySelector(itemIdSelector).getAttribute("data-draggable-item-id")
+        }
+        let parentId = evt.to.getAttribute("data-draggable-parent-id")
+        let newIndex = evt.newIndex
+
+        if (self.data.get("item-id") && !itemId) {
+          return
+        }
+
+        if (self.data.get("parent-id") && !parentId) {
+          return
+        }
+
+        let response = fetch(url, {
+          method: method,
+          headers: {
+            Accept: "application/json, text/javascript",
+            "Content-Type": "application/json",
+            "X-CSRF-Token": csrfToken,
+          },
+          body: JSON.stringify({
+            item_id: itemId,
+            parent_id: parentId,
+            index: newIndex,
+          }),
+        }).then((response) => {
+          var event
+          if (response.ok) {
+            event = new CustomEvent("draggable.success", { detail: { element: self.element } })
+            self.element.dispatchEvent(event)
+          } else if (!response.ok) {
+            event = new CustomEvent("draggable.error", { detail: { element: self.element } })
+            self.element.dispatchEvent(event)
+            window.alert("An unexpected error occured, your drop possibly failed.")
+          }
+        })
+      },
+    }
+
+    if (self.data.get("handle")) {
+      options["handle"] = self.data.get("handle")
+    }
+
+    if (self.data.get("group")) {
+      options["group"] = self.data.get("group")
+    }
+
+    if (self.data.get("item-selector")) {
+      options["draggable"] = self.data.get("item-selector")
+    }
+
+    Sortable.create(element, options)
+  }
+}

data/app/javascript/satis/utility_controllers/help_controller.js

@@ -0,0 +1,18 @@
+import tippy from "tippy.js"
+
+import ApplicationController from "satis/controllers/application_controller"
+
+export default class extends ApplicationController {
+  static values = { content: String }
+
+  connect() {
+    const self = this
+    tippy(this.element, {
+      content: (reference) => this.contentValue,
+      allowHTML: true,
+      // trigger: "click",
+      interactive: true,
+      appendTo: () => document.body,
+    })
+  }
+}

data/app/javascript/satis/utility_controllers/index.js

@@ -0,0 +1,14 @@
+import { application } from "satis/controllers/application"
+
+import DraggableController from "satis/utility_controllers/draggable_controller";
+application.register("draggable", DraggableController);
+
+import HelpController from "satis/utility_controllers/help_controller";
+application.register("help", HelpController);
+
+import ShowHideController from "satis/utility_controllers/show_hide_controller";
+application.register("show-hide", ShowHideController);
+
+import ToggleController from "satis/utility_controllers/toggle_controller";
+application.register("toggle", ToggleController);
+