plutonium 0.16.5 → 0.18.0

data/src/js/controllers/resource_drop_down_controller.js

@@ -1,31 +1,183 @@
 import { Controller } from "@hotwired/stimulus"
-import { Dropdown } from 'flowbite';
-
+import { createPopper } from '@popperjs/core'
 
 // Connects to data-controller="resource-drop-down"
 export default class extends Controller {
   static targets = ["trigger", "menu"]
 
   connect() {
-    console.log(`resource-drop-down connected: ${this.element}`)
+    this.visible = false
+    this.initialized = false
+
+    // Default options matching Flowbite's defaults
+    this.options = {
+      placement: 'bottom',
+      triggerType: 'click',
+      offsetSkidding: 0,
+      offsetDistance: 10,
+      delay: 300,
+      ignoreClickOutsideClass: false
+    }
+
+    this.init()
+  }
+
+  init() {
+    if (this.triggerTarget && this.menuTarget && !this.initialized) {
+      // Initialize popper instance
+      this.popperInstance = createPopper(this.triggerTarget, this.menuTarget, {
+        placement: this.options.placement,
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [this.options.offsetSkidding, this.options.offsetDistance],
+            },
+          },
+        ],
+      })
 
-    // https://flowbite.com/docs/components/dropdowns/#javascript-behaviour
-    this.dropdown = new Dropdown(this.menuTarget, this.triggerTarget);
+      this.setupEventListeners()
+      this.initialized = true
+    }
   }
 
   disconnect() {
-    this.dropdown = null
+    if (this.initialized) {
+      // Remove click event listeners
+      if (this.options.triggerType === 'click') {
+        this.triggerTarget.removeEventListener('click', this.clickHandler)
+      }
+
+      // Remove hover event listeners
+      if (this.options.triggerType === 'hover') {
+        this.triggerTarget.removeEventListener('mouseenter', this.hoverShowTriggerHandler)
+        this.menuTarget.removeEventListener('mouseenter', this.hoverShowMenuHandler)
+        this.triggerTarget.removeEventListener('mouseleave', this.hoverHideHandler)
+        this.menuTarget.removeEventListener('mouseleave', this.hoverHideHandler)
+      }
+
+      // Remove click outside listener
+      this.removeClickOutsideListener()
+
+      // Destroy popper instance
+      this.popperInstance.destroy()
+      this.initialized = false
+    }
+  }
+
+  setupEventListeners() {
+    // Bind handlers to preserve context
+    this.clickHandler = this.toggle.bind(this)
+    this.hoverShowTriggerHandler = (ev) => {
+      if (ev.type === 'click') {
+        this.toggle()
+      } else {
+        setTimeout(() => {
+          this.show()
+        }, this.options.delay)
+      }
+    }
+    this.hoverShowMenuHandler = () => {
+      this.show()
+    }
+    this.hoverHideHandler = () => {
+      setTimeout(() => {
+        if (!this.menuTarget.matches(':hover')) {
+          this.hide()
+        }
+      }, this.options.delay)
+    }
+
+    // Set up click or hover events based on trigger type
+    if (this.options.triggerType === 'click') {
+      this.triggerTarget.addEventListener('click', this.clickHandler)
+    } else if (this.options.triggerType === 'hover') {
+      this.triggerTarget.addEventListener('mouseenter', this.hoverShowTriggerHandler)
+      this.menuTarget.addEventListener('mouseenter', this.hoverShowMenuHandler)
+      this.triggerTarget.addEventListener('mouseleave', this.hoverHideHandler)
+      this.menuTarget.addEventListener('mouseleave', this.hoverHideHandler)
+    }
+  }
+
+  setupClickOutsideListener() {
+    this.clickOutsideHandler = (ev) => {
+      const clickedEl = ev.target
+      const ignoreClickOutsideClass = this.options.ignoreClickOutsideClass
+
+      let isIgnored = false
+      if (ignoreClickOutsideClass) {
+        const ignoredEls = document.querySelectorAll(`.${ignoreClickOutsideClass}`)
+        ignoredEls.forEach((el) => {
+          if (el.contains(clickedEl)) {
+            isIgnored = true
+            return
+          }
+        })
+      }
+
+      if (
+        clickedEl !== this.menuTarget &&
+        !this.menuTarget.contains(clickedEl) &&
+        !this.triggerTarget.contains(clickedEl) &&
+        !isIgnored &&
+        this.visible
+      ) {
+        this.hide()
+      }
+    }
+
+    document.body.addEventListener('click', this.clickOutsideHandler, true)
+  }
+
+  removeClickOutsideListener() {
+    if (this.clickOutsideHandler) {
+      document.body.removeEventListener('click', this.clickOutsideHandler, true)
+    }
   }
 
   toggle() {
-    this.dropdown.toggle()
+    if (this.visible) {
+      this.hide()
+    } else {
+      this.show()
+    }
   }
 
   show() {
-    this.dropdown.show()
+    this.menuTarget.classList.remove('hidden')
+    this.menuTarget.classList.add('block')
+    this.menuTarget.removeAttribute('aria-hidden')
+
+    // Enable popper event listeners
+    this.popperInstance.setOptions((options) => ({
+      ...options,
+      modifiers: [
+        ...options.modifiers,
+        { name: 'eventListeners', enabled: true },
+      ],
+    }))
+
+    this.setupClickOutsideListener()
+    this.popperInstance.update()
+    this.visible = true
   }
 
   hide() {
-    this.dropdown.hide()
+    this.menuTarget.classList.remove('block')
+    this.menuTarget.classList.add('hidden')
+    this.menuTarget.setAttribute('aria-hidden', 'true')
+
+    // Disable popper event listeners
+    this.popperInstance.setOptions((options) => ({
+      ...options,
+      modifiers: [
+        ...options.modifiers,
+        { name: 'eventListeners', enabled: false },
+      ],
+    }))
+
+    this.removeClickOutsideListener()
+    this.visible = false
   }
 }

data/src/js/controllers/{header_controller.js → resource_header_controller.js}

@@ -1,5 +1,6 @@
 import { Controller } from "@hotwired/stimulus"
 
+// Connects to data-controller="resource-header"
 export default class extends Controller {
   static targets = ["openIcon", "closeIcon"]
   static outlets = ["sidebar"]

data/src/js/controllers/resource_tab_list_controller.js

@@ -0,0 +1,64 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="resource-tab-list"
+export default class extends Controller {
+  static targets = ["btn", "tab"]
+  static values = {
+    defaultTab: String,
+    activeClasses: String,
+    inActiveClasses: String
+  }
+
+  connect() {
+    this.activeClasses = this.hasActiveClassesValue ? this.activeClassesValue.split(" ") : []
+    this.inActiveClasses = this.hasInActiveClassesValue ? this.inActiveClassesValue.split(" ") : []
+
+    this.#selectInternal(this.defaultTabValue || this.btnTargets[0].id)
+  }
+
+  select(event) {
+    this.#selectInternal(event.currentTarget.id)
+  }
+
+  #selectInternal(id) {
+    const selectedBtn = this.btnTargets.find(element => element.id === id)
+    if (!selectedBtn) {
+      console.error(`Tab Button with id "${id}" not found`)
+      return
+    }
+
+    const selectedTab = this.tabTargets.find(element => element.id === selectedBtn.dataset.target)
+    if (!selectedTab) {
+      console.error(`Tab Panel with id "${selectedBtn.dataset.target}" not found`)
+      return
+    }
+
+    // Update tab visibility and ARIA states
+    this.tabTargets.forEach(tab => {
+      tab.hidden = true
+      tab.setAttribute('aria-hidden', 'true')
+    })
+
+    // Update button states and classes
+    this.btnTargets.forEach(btn => {
+      btn.setAttribute('aria-selected', 'false')
+      btn.setAttribute('tabindex', '-1')
+      btn.classList.remove(...this.activeClasses)
+      btn.classList.add(...this.inActiveClasses)
+    })
+
+    // Activate selected tab and button
+    selectedBtn.setAttribute('aria-selected', 'true')
+    selectedBtn.setAttribute('tabindex', '0')
+    selectedBtn.classList.remove(...this.inActiveClasses)
+    selectedBtn.classList.add(...this.activeClasses)
+
+    selectedTab.hidden = false
+    selectedTab.setAttribute('aria-hidden', 'false')
+
+    // Focus management
+    if (selectedBtn !== document.activeElement) {
+      selectedBtn.focus()
+    }
+  }
+}

data/src/js/controllers/select_navigator.js

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="select-navigator"
+export default class extends Controller {
+  static targets = ["select"]
+
+  navigate(_) {
+    const url = this.selectTarget.value
+    const anchor = document.createElement('a')
+    anchor.href = url
+
+    this.element.appendChild(anchor)
+    anchor.click()
+    anchor.remove()
+  }
+}

data/src/js/controllers/slim_select_controller.js

@@ -3,7 +3,6 @@ import { Controller } from "@hotwired/stimulus"
 // Connects to data-controller="slim-select"
 export default class extends Controller {
   connect() {
-    console.log(`slim-select connected: ${this.element}`)
     this.slimSelect = new SlimSelect({
       select: this.element
     })

data/src/js/support/dom_element.js

@@ -0,0 +1,78 @@
+import DOMPurify from 'dompurify';
+
+export default class {
+  static fromTemplate(template) {
+    if (DOMPurify.isSupported) {
+      return DOMPurify.sanitize(template, { USE_PROFILES: { html: true, svg: true }, RETURN_DOM: true }).children[0]
+    }
+    else {
+      const html = new DOMParser().parseFromString(template, 'text/html').body.children[0]
+      return santizeHTML(html)
+    }
+  }
+}
+
+
+// https://vanillajstoolkit.com/helpers/cleanhtml/
+
+/*!
+ * Sanitize an HTML node
+ */
+function santizeHTML(html) {
+  // Sanitize it
+  removeScripts(html)
+  cleanAttributes(html)
+
+  return html
+}
+
+/**
+ * Remove <script> elements
+ * @param  {Node} html The HTML
+ */
+function removeScripts(html) {
+  let scripts = html.querySelectorAll('script')
+  for (let script of scripts) {
+    script.remove()
+  }
+}
+
+/**
+ * Check if the attribute is potentially dangerous
+ * @param  {String}  name  The attribute name
+ * @param  {String}  value The attribute value
+ * @return {Boolean}       If true, the attribute is potentially dangerous
+ */
+function isPossiblyDangerous(name, value) {
+  let val = value.replace(/\s+/g, '').toLowerCase()
+  if (['src', 'href', 'xlink:href'].includes(name)) {
+    if (val.includes('javascript:') || val.includes('data:')) return true
+  }
+  if (name.startsWith('on')) return true
+}
+
+/**
+ * Remove potentially dangerous attributes from an element
+ * @param  {Node} elem The element
+ */
+function removePossiblyDangerousAttributes(elem) {
+  // Loop through each attribute
+  // If it's dangerous, remove it
+  let atts = elem.attributes
+  for (let { name, value } of atts) {
+    if (!isPossiblyDangerous(name, value)) continue
+    elem.removeAttribute(name)
+  }
+}
+
+/**
+ * Remove dangerous stuff from the HTML document's nodes
+ * @param  {Node} html The HTML document
+ */
+function cleanAttributes(html) {
+  let nodes = html.children
+  for (let node of nodes) {
+    removePossiblyDangerousAttributes(node)
+    cleanAttributes(node)
+  }
+}

data/src/js/support/mime_icon.js

@@ -0,0 +1,127 @@
+import DomElement from "./dom_element"
+
+function iconImage() {
+  return DomElement.fromTemplate(`
+    <svg aria-hidden="true" focusable="false" width="25" height="25" viewBox="0 0 25 25">
+      <g fill="#686DE0" fillRule="evenodd">
+        <path d="M5 7v10h15V7H5zm0-1h15a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1z" fillRule="nonzero" />
+        <path d="M6.35 17.172l4.994-5.026a.5.5 0 0 1 .707 0l2.16 2.16 3.505-3.505a.5.5 0 0 1 .707 0l2.336 2.31-.707.72-1.983-1.97-3.505 3.505a.5.5 0 0 1-.707 0l-2.16-2.159-3.938 3.939-1.409.026z" fillRule="nonzero" />
+        <circle cx="7.5" cy="9.5" r="1.5" />
+      </g>
+    </svg>
+  `)
+}
+
+function iconAudio() {
+  return DomElement.fromTemplate(`
+    <svg aria-hidden="true" focusable="false" className="uppy-c-icon" width="25" height="25" viewBox="0 0 25 25">
+      <path d="M9.5 18.64c0 1.14-1.145 2-2.5 2s-2.5-.86-2.5-2c0-1.14 1.145-2 2.5-2 .557 0 1.079.145 1.5.396V7.25a.5.5 0 0 1 .379-.485l9-2.25A.5.5 0 0 1 18.5 5v11.64c0 1.14-1.145 2-2.5 2s-2.5-.86-2.5-2c0-1.14 1.145-2 2.5-2 .557 0 1.079.145 1.5.396V8.67l-8 2v7.97zm8-11v-2l-8 2v2l8-2zM7 19.64c.855 0 1.5-.484 1.5-1s-.645-1-1.5-1-1.5.484-1.5 1 .645 1 1.5 1zm9-2c.855 0 1.5-.484 1.5-1s-.645-1-1.5-1-1.5.484-1.5 1 .645 1 1.5 1z" fill="#049BCF" fillRule="nonzero" />
+    </svg>
+  `)
+}
+
+function iconVideo() {
+  return DomElement.fromTemplate(`
+    <svg aria-hidden="true" focusable="false" className="uppy-c-icon" width="25" height="25" viewBox="0 0 25 25">
+      <path d="M16 11.834l4.486-2.691A1 1 0 0 1 22 10v6a1 1 0 0 1-1.514.857L16 14.167V17a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v2.834zM15 9H5v8h10V9zm1 4l5 3v-6l-5 3z" fill="#19AF67" fillRule="nonzero" />
+    </svg>
+  `)
+}
+
+function iconPDF() {
+  return DomElement.fromTemplate(`
+    <svg aria-hidden="true" focusable="false" className="uppy-c-icon" width="25" height="25" viewBox="0 0 25 25">
+      <path d="M9.766 8.295c-.691-1.843-.539-3.401.747-3.726 1.643-.414 2.505.938 2.39 3.299-.039.79-.194 1.662-.537 3.148.324.49.66.967 1.055 1.51.17.231.382.488.629.757 1.866-.128 3.653.114 4.918.655 1.487.635 2.192 1.685 1.614 2.84-.566 1.133-1.839 1.084-3.416.249-1.141-.604-2.457-1.634-3.51-2.707a13.467 13.467 0 0 0-2.238.426c-1.392 4.051-4.534 6.453-5.707 4.572-.986-1.58 1.38-4.206 4.914-5.375.097-.322.185-.656.264-1.001.08-.353.306-1.31.407-1.737-.678-1.059-1.2-2.031-1.53-2.91zm2.098 4.87c-.033.144-.068.287-.104.427l.033-.01-.012.038a14.065 14.065 0 0 1 1.02-.197l-.032-.033.052-.004a7.902 7.902 0 0 1-.208-.271c-.197-.27-.38-.526-.555-.775l-.006.028-.002-.003c-.076.323-.148.632-.186.8zm5.77 2.978c1.143.605 1.832.632 2.054.187.26-.519-.087-1.034-1.113-1.473-.911-.39-2.175-.608-3.55-.608.845.766 1.787 1.459 2.609 1.894zM6.559 18.789c.14.223.693.16 1.425-.413.827-.648 1.61-1.747 2.208-3.206-2.563 1.064-4.102 2.867-3.633 3.62zm5.345-10.97c.088-1.793-.351-2.48-1.146-2.28-.473.119-.564 1.05-.056 2.405.213.566.52 1.188.908 1.859.18-.858.268-1.453.294-1.984z" fill="#E2514A" fillRule="nonzero" />
+    </svg>
+  `)
+}
+
+function iconArchive() {
+  return DomElement.fromTemplate(`
+    <svg aria-hidden="true" focusable="false" width="25" height="25" viewBox="0 0 25 25">
+      <path d="M10.45 2.05h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5V2.55a.5.5 0 0 1 .5-.5zm2.05 1.024h1.05a.5.5 0 0 1 .5.5V3.6a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5v-.001zM10.45 0h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5V.5a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.024a.5.5 0 0 1 .5-.5zm-2.05 3.074h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.024a.5.5 0 0 1 .5-.5zm-2.05 1.024h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm-2.05 1.025h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.024a.5.5 0 0 1 .5-.5zm-1.656 3.074l-.82 5.946c.52.302 1.174.458 1.976.458.803 0 1.455-.156 1.975-.458l-.82-5.946h-2.311zm0-1.025h2.312c.512 0 .946.378 1.015.885l.82 5.946c.056.412-.142.817-.501 1.026-.686.398-1.515.597-2.49.597-.974 0-1.804-.199-2.49-.597a1.025 1.025 0 0 1-.5-1.026l.819-5.946c.07-.507.503-.885 1.015-.885zm.545 6.6a.5.5 0 0 1-.397-.561l.143-.999a.5.5 0 0 1 .495-.429h.74a.5.5 0 0 1 .495.43l.143.998a.5.5 0 0 1-.397.561c-.404.08-.819.08-1.222 0z" fill="#00C469" fillRule="nonzero" />
+    </svg>
+  `)
+}
+
+function iconFile() {
+  return DomElement.fromTemplate(`
+    <svg aria-hidden="true" focusable="false" className="uppy-c-icon" width="25" height="25" viewBox="0 0 25 25">
+      <g fill="#A7AFB7" fillRule="nonzero">
+        <path d="M5.5 22a.5.5 0 0 1-.5-.5v-18a.5.5 0 0 1 .5-.5h10.719a.5.5 0 0 1 .367.16l3.281 3.556a.5.5 0 0 1 .133.339V21.5a.5.5 0 0 1-.5.5h-14zm.5-1h13V7.25L16 4H6v17z" />
+        <path d="M15 4v3a1 1 0 0 0 1 1h3V7h-3V4h-1z" />
+      </g>
+    </svg>
+  `)
+}
+
+function iconText() {
+  return DomElement.fromTemplate(`
+    <svg aria-hidden="true" focusable="false" className="uppy-c-icon" width="25" height="25" viewBox="0 0 25 25">
+      <path d="M4.5 7h13a.5.5 0 1 1 0 1h-13a.5.5 0 0 1 0-1zm0 3h15a.5.5 0 1 1 0 1h-15a.5.5 0 1 1 0-1zm0 3h15a.5.5 0 1 1 0 1h-15a.5.5 0 1 1 0-1zm0 3h10a.5.5 0 1 1 0 1h-10a.5.5 0 1 1 0-1z" fill="#5A5E69" fillRule="nonzero" />
+    </svg>
+  `)
+}
+
+export default function getIconByMime(fileType) {
+  const defaultChoice = {
+    color: '#838999',
+    icon: iconFile(),
+  }
+
+  if (!fileType) return defaultChoice
+
+  const fileTypeGeneral = fileType.split('/')[0]
+  const fileTypeSpecific = fileType.split('/')[1]
+
+  // Text
+  if (fileTypeGeneral === 'text') {
+    return {
+      color: '#5a5e69',
+      icon: iconText(),
+    }
+  }
+
+  // Image
+  if (fileTypeGeneral === 'image') {
+    return {
+      color: '#686de0',
+      icon: iconImage(),
+    }
+  }
+
+  // Audio
+  if (fileTypeGeneral === 'audio') {
+    return {
+      color: '#068dbb',
+      icon: iconAudio(),
+    }
+  }
+
+  // Video
+  if (fileTypeGeneral === 'video') {
+    return {
+      color: '#19af67',
+      icon: iconVideo(),
+    }
+  }
+
+  // PDF
+  if (fileTypeGeneral === 'application' && fileTypeSpecific === 'pdf') {
+    return {
+      color: '#e25149',
+      icon: iconPDF(),
+    }
+  }
+
+  // Archive
+  const archiveTypes = ['zip', 'x-7z-compressed', 'x-rar-compressed', 'x-tar', 'x-gzip', 'x-apple-diskimage']
+  if (fileTypeGeneral === 'application' && archiveTypes.indexOf(fileTypeSpecific) !== -1) {
+    return {
+      color: '#00C469',
+      icon: iconArchive(),
+    }
+  }
+
+  return defaultChoice
+}

data/tailwind.options.js

@@ -4,10 +4,6 @@ export const content = [
   `${__dirname}/app/views/**/*.{rb,erb,js}`,
   `${__dirname}/config/initializers/simple_form.rb`,
   `${__dirname}/lib/plutonium/**/*.rb`,
-
-  // node modules are not packaged as part of the gem.
-  // requires users to have flowbite installed in their own project.
-  './node_modules/flowbite/**/*.js',
 ];
 
 export const darkMode = "selector";
@@ -16,7 +12,6 @@ export const plugins = [
   // requires users to have the required packages installed in their own project.
   "@tailwindcss/forms",
   "@tailwindcss/typography",
-  "flowbite/plugin",
   "flowbite-typography",
   function ({ addVariant }) {
     // This creates a variant that applies when an ancestor has data-dyna="true"