polaris_view_components 0.5.0 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a4ecf6c373c0c3a1188d677df7da49034a9094392ce74b0bac9e72780b1a851a
-  data.tar.gz: 836ebef4a9e97c359d4bf36e4ae497d673a6579de232c0a82f6cf12d4f33e3d9
+  metadata.gz: 3ba771806fadd6b419c7ab4ca160d21199a4634e34c1c6382aeeac8d1908d728
+  data.tar.gz: 65a6782283ea638ed596e0f75e6125feb2efff9dbdd0169428bbcdb522797ebf
 SHA512:
-  metadata.gz: add02e909f36a997d49d261b3960ad41636001dbb4a6beea5f1652a7bfadab94d9bb2e07cefc5618f652bbdd431934ceb11da59388d0523d75686bbdddc7723e
-  data.tar.gz: cdd86e17c2a970aae8e5fec22cb296eae4cd1df572dee371978d0b02450cf6185c30c5a891db0943b62f1f114b593a2a3e890840362c1c1efc9da6087c663dd7
+  metadata.gz: d77337905ac8bfc591a5957546de20b5ff89478d2dca37be41eeddfc1e8053e9623ba452d96c6b8198e0ab185d58b416553319db14d44ad74f30532664c5c4d2
+  data.tar.gz: 7c69e38fc42ebf27c6f121c9a741b21414c026210e27187aa55cfecc11a7f9cdd60ce511a954e4e2fd94a34b71519104de80c217cff952fe0ce5f802bbf1dfc0

data/app/assets/javascripts/polaris_view_components/button_controller.js

@@ -0,0 +1,48 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  disable(event) {
+    if (this.button.dataset.disabled) {
+      event.preventDefault()
+    } else {
+      this.button.dataset.disabled = true
+      this.button.classList.add("Polaris-Button--disabled", "Polaris-Button--loading")
+      this.buttonContent.insertAdjacentHTML("afterbegin", this.spinnerHTML)
+    }
+  }
+
+  enable() {
+    if (this.button.dataset.disabled) {
+      this.button.disabled = false
+      delete this.button.dataset.disabled
+      this.button.classList.remove("Polaris-Button--disabled", "Polaris-Button--loading")
+      this.spinner.remove()
+    }
+  }
+
+  // Private
+
+  get button() {
+    return this.element
+  }
+
+  get buttonContent() {
+    return this.button.querySelector(".Polaris-Button__Content")
+  }
+
+  get spinner() {
+    return this.button.querySelector(".Polaris-Button__Spinner")
+  }
+
+  get spinnerHTML() {
+    return `
+      <span class="Polaris-Button__Spinner">
+        <span class="Polaris-Spinner Polaris-Spinner--sizeSmall">
+          <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path d="M7.229 1.173a9.25 9.25 0 1011.655 11.412 1.25 1.25 0 10-2.4-.698 6.75 6.75 0 11-8.506-8.329 1.25 1.25 0 10-.75-2.385z"></path>
+          </svg>
+        </span>
+      </span>
+    `
+  }
+}

data/app/assets/javascripts/polaris_view_components/index.js

@@ -1,11 +1,21 @@
+import Button from './button_controller'
+import Modal from './modal_controller'
+import Polaris from './polaris_controller'
+import Popover from './popover_controller'
 import ResourceItem from './resource_item_controller'
+import Scrollable from './scrollable_controller'
 import Select from './select_controller'
 import TextField from './text_field_controller'
 
-export { ResourceItem, Select, TextField }
+export { Modal, Polaris, Popover, ResourceItem, Scrollable, Select, TextField }
 
 export function registerPolarisControllers(application) {
+  application.register('polaris-button', Button)
+  application.register('polaris-modal', Modal)
+  application.register('polaris', Polaris)
+  application.register('polaris-popover', Popover)
   application.register('polaris-resource-item', ResourceItem)
+  application.register('polaris-scrollable', Scrollable)
   application.register('polaris-select', Select)
   application.register('polaris-text-field', TextField)
 }

data/app/assets/javascripts/polaris_view_components/modal_controller.js

@@ -0,0 +1,25 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static classes = ["hidden", "backdrop"]
+  static values = {
+    open: Boolean
+  }
+
+  connect() {
+    if (this.openValue) {
+      this.open()
+    }
+  }
+
+  open() {
+    this.element.classList.remove(this.hiddenClass)
+    this.element.insertAdjacentHTML('afterend', `<div class="${this.backdropClass}"></div>`)
+    this.backdrop = this.element.nextElementSibling
+  }
+
+  close() {
+    this.element.classList.add(this.hiddenClass)
+    this.backdrop.remove()
+  }
+}

data/app/assets/javascripts/polaris_view_components/polaris_controller.js

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  openModal() {
+    this.findElement("modal").open()
+  }
+
+  disableButton() {
+    this.findElement("button").disable()
+  }
+
+  enableButton() {
+    this.findElement("button").enable()
+  }
+
+  // Private
+
+  findElement(type) {
+    const targetId = this.element.dataset.target.replace("#", "")
+    const target = document.getElementById(targetId)
+    const controllerName = `polaris-${type}`
+    return this.application.getControllerForElementAndIdentifier(target, controllerName)
+  }
+}

data/app/assets/javascripts/polaris_view_components/popover_controller.js

@@ -0,0 +1,45 @@
+import { Controller } from "@hotwired/stimulus"
+import { createPopper } from "@popperjs/core/dist/esm"
+
+export default class extends Controller {
+  static targets = ["activator", "popover"]
+  static classes = ["open", "closed"]
+  static values = {
+    placement: String,
+    active: Boolean
+  }
+
+  connect() {
+    createPopper(this.activatorTarget, this.popoverTarget, {
+      placement: this.placementValue,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 5],
+          },
+        },
+      ]
+    })
+    if (this.activeValue) {
+      this.show()
+    }
+  }
+
+  toggle() {
+    this.popoverTarget.classList.toggle(this.closedClass)
+    this.popoverTarget.classList.toggle(this.openClass)
+  }
+
+  show() {
+    this.popoverTarget.classList.remove(this.closedClass)
+    this.popoverTarget.classList.add(this.openClass)
+  }
+
+  hide(event) {
+    if (!this.element.contains(event.target) && !this.popoverTarget.classList.contains(this.closedClass)) {
+      this.popoverTarget.classList.remove(this.openClass)
+      this.popoverTarget.classList.add(this.closedClass)
+    }
+  }
+}

data/app/assets/javascripts/polaris_view_components/scrollable_controller.js

@@ -0,0 +1,60 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["topEdge", "bottomEdge"]
+  static classes = ["topShadow", "bottomShadow"]
+  static values = {
+    shadow: Boolean,
+  }
+
+  initialize() {
+    this.topEdgeReached = false
+    this.bottomEdgeReached = true
+  }
+
+  connect() {
+    if (this.shadowValue) {
+      this.observer = new IntersectionObserver(this.handleIntersection)
+      this.observer.observe(this.topEdgeTarget)
+      this.observer.observe(this.bottomEdgeTarget)
+    }
+  }
+
+  disconnect() {
+    if (this.shadowValue) {
+      this.observer.disconnect()
+    }
+  }
+
+  // Private
+
+  handleIntersection = (entries) => {
+    entries.forEach(entry => {
+      const target = entry.target.dataset.polarisScrollableTarget
+
+      switch (target) {
+        case "topEdge":
+          this.topEdgeReached = entry.isIntersecting
+          break
+        case "bottomEdge":
+          this.bottomEdgeReached = entry.isIntersecting
+          break
+      }
+    })
+    this.updateShadows()
+  }
+
+  updateShadows() {
+    if (!this.topEdgeReached && !this.bottomEdgeReached) {
+      this.element.classList.add(this.topShadowClass, this.bottomShadowClass)
+    } else if (this.topEdgeReached && this.bottomEdgeReached) {
+      this.element.classList.remove(this.topShadowClass, this.bottomShadowClass)
+    } else if (this.topEdgeReached) {
+      this.element.classList.remove(this.topShadowClass)
+      this.element.classList.add(this.bottomShadowClass)
+    } else if (this.bottomEdgeReached) {
+      this.element.classList.add(this.topShadowClass)
+      this.element.classList.remove(this.bottomShadowClass)
+    }
+  }
+}