spina 2.0.2 → 2.1.0

data/app/assets/javascripts/spina/controllers/delegate_click_controller.js

@@ -0,0 +1,13 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  
+  click() {
+    this.targetElement.click()
+  }
+  
+  get targetElement() {
+    return document.querySelector(this.element.dataset.delegateClickTarget)
+  }
+  
+}

data/app/assets/javascripts/spina/controllers/exists_controller.js

@@ -0,0 +1,11 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+
+  connect() {
+    const event = document.createEvent("CustomEvent")
+    event.initCustomEvent("exists", true, true, null)
+    this.element.dispatchEvent(event)
+  }
+
+}

data/app/assets/javascripts/spina/controllers/form_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from "stimulus"
+import formRequestSubmitPolyfill from 'form-request-submit-polyfill'
+
+export default class extends Controller {
+  
+  requestSubmit() {
+    this.element.requestSubmit()
+  }
+  
+}

data/app/assets/javascripts/spina/controllers/hotkeys_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "stimulus"
+import hotkeys from "hotkeys"
+
+export default class extends Controller {
+  static get targets() {
+    return [ "button" ]
+  }
+  
+  connect() {
+    hotkeys(this.element.dataset.hotkeys, this.handleHotkeys.bind(this))
+    hotkeys.filter = (event) => true
+  }
+  
+  handleHotkeys(event, handler) {
+    event.preventDefault()
+    if (this.hasButtonTarget) {
+      this.buttonTarget.click()
+    }
+  }
+  
+}

data/app/assets/javascripts/spina/controllers/image_collection_controller.js

@@ -0,0 +1,37 @@
+import { Controller } from "stimulus"
+import Sortable from "sortablejs"
+
+export default class extends Controller {
+  static get targets() {
+    return [ "collection", "fields" ]
+  }
+  
+  connect() {
+    this.sortable = Sortable.create(this.collectionTarget, {
+      animation: 150
+    })
+  }
+  
+  removeImage(event) {
+    let id = event.currentTarget.dataset.id
+    let image = document.getElementById(id)
+    image.parentElement.removeChild(image)
+  }
+  
+  handleDone(event) {
+    let html = this.element.dataset.fields
+    
+    let range = document.createRange()
+    range.selectNodeContents(document.body)
+    let fragment = range.createContextualFragment(html)
+    
+    fragment.querySelector(`[data-media-picker-target="signedBlobId"]`).value = event.detail.signedBlobId
+    fragment.querySelector(`[data-media-picker-target="filename"]`).value = event.detail.filename
+    fragment.querySelector(`[data-media-picker-target="imageId"]`).value = event.detail.imageId
+    fragment.querySelector('img').src = event.detail.thumbnail
+
+    // Insert fields
+    this.collectionTarget.appendChild(fragment)
+  }
+  
+}

data/app/assets/javascripts/spina/controllers/image_fade_in_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+
+  connect() {
+    if (!this.loaded) {
+      this.element.classList.add('transition-opacity', 'duration-500', 'opacity-0')
+      this.element.addEventListener("load", this.fadeIn.bind(this))
+    }
+  }
+
+  fadeIn() {
+    this.element.classList.remove('opacity-0')
+  }
+  
+  get loaded() {
+    return this.element.complete && this.element.naturalHeight !== 0
+  }
+
+}

data/app/assets/javascripts/spina/controllers/infinite_scroll_controller.js

@@ -0,0 +1,33 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static get targets() {
+    return [ "button", "container" ]
+  }
+
+  connect() {
+    this.scrollElement.addEventListener("scroll", this.load.bind(this))
+  }
+
+  disconnect() {
+    this.scrollElement.removeEventListener("scroll", this.load.bind(this))
+  }
+  
+  load() {
+    if (this.hasButtonTarget) {
+      let top = this.buttonTarget.getBoundingClientRect().top
+      if (top < this.scrollElement.innerHeight + 500) {
+        this.buttonTarget.click()
+      }
+    }
+  }
+  
+  get scrollElement() {
+    if (this.hasContainerTarget) {
+      return this.containerTarget
+    } else {
+      return window
+    }
+  }
+
+}

data/app/assets/javascripts/spina/controllers/loading_button_controller.js

@@ -0,0 +1,40 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static get targets() {
+    return [ "button" ]
+  }
+	
+	connect() {
+		this.element[this.identifier] = this
+	}
+	
+	doneLoading() {
+		// this.element.disabled = false
+		this.buttonTarget.style.width = 'auto'
+		this.buttonTarget.innerHTML = this.originalHTML
+	}
+	
+	loading() {
+		// this.element.disabled = true
+		this.buttonTarget.style.width = `${this.element.offsetWidth}px`
+		this.originalHTML = this.buttonTarget.innerHTML // Store original HTML
+		
+		this.buttonTarget.innerHTML = `
+			<svg class="animate-spin -ml-1 mr-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+				<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+				<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+			</svg>
+			${this.element.dataset.loadingMessage}
+		`
+	}
+	
+	get originalHTML() {
+		return this.original_html
+	}
+	
+	set originalHTML(html) {
+		this.original_html = html
+	}
+	
+}

data/app/assets/javascripts/spina/controllers/media_picker_controller.js

@@ -0,0 +1,46 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static get targets() {
+    return [ "filename", "signedBlobId", "imageId", "alt", "thumbnail", "clearButton" ]
+  }
+
+  connect() {
+    // Hide thumbnail if there's no image
+    if (this.hasThumbnailTarget && this.thumbnailTarget.children.length == 0) this.hideThumbnail()
+  }
+
+  removeImage() {
+    this.imageIdTarget.value = ""
+    if (this.hasFilenameTarget) this.filenameTarget.value = ""
+    if (this.hasSignedBlobIdTarget) this.signedBlobIdTarget.value = ""
+    if (this.hasAltTarget) this.altTarget.value = ""
+    this.hideThumbnail()
+  }
+  
+  handleDone(event) {
+    // Set fields
+    if (this.hasFilenameTarget) this.filenameTarget.value = event.detail.filename
+    if (this.hasSignedBlobIdTarget) this.signedBlobIdTarget.value = event.detail.signedBlobId
+    this.imageIdTarget.value = event.detail.imageId
+
+    // Set placeholder
+    this.setThumbnail(event.detail.thumbnail)
+  }
+  
+  setThumbnail(imageSrc) {
+    this.thumbnailTarget.innerHTML = `<img src="${imageSrc}" class="object-contain w-full h-36" />`
+    this.showThumbnail()
+  }
+
+  showThumbnail() {
+    this.thumbnailTarget.classList.remove('hidden')
+    this.clearButtonTarget.classList.remove('hidden')
+  }
+
+  hideThumbnail() {
+    this.thumbnailTarget.classList.add('hidden')
+    this.clearButtonTarget.classList.add('hidden')
+  }
+
+}

data/app/assets/javascripts/spina/controllers/media_picker_modal_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+	
+	selectImage(event) {
+		let image = event.currentTarget
+		this.image = image
+	}
+	
+	instantInsert(event) {
+		this.confirm(event)	
+		this.element.closest('.modal').modal.close()
+	}
+	
+	confirm(event) {
+		let imageSelectedEvent = new CustomEvent("media-picker:done", {detail: this.imageData})
+		this.target.dispatchEvent(imageSelectedEvent)
+	}
+	
+	get target() {
+		return document.getElementById(this.element.dataset.target)
+	}
+	
+	get imageData() {
+		return {
+			filename: this.image.dataset.filename,
+			signedBlobId: this.image.dataset.signedBlobId,
+			imageId: this.image.dataset.imageId,
+			embeddedUrl: this.image.dataset.embeddedUrl,
+			thumbnail: this.image.dataset.thumbnail
+		}
+	}
+	
+}

data/app/assets/javascripts/spina/controllers/modal_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+
+  connect() {
+    this.element[this.identifier] = this
+  }
+
+  close() {
+    this.element.remove()
+    this.modalTurboFrame.src = null
+  }
+  
+  escClose(event) {
+    if (event.key === 'Escape') this.close()
+  }
+  
+  get modalTurboFrame() {
+    return document.querySelector("turbo-frame[id='modal']")
+  }
+
+}

data/app/assets/javascripts/spina/controllers/navigation_controller.js

@@ -0,0 +1,77 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static get targets() {
+    return ["primary", "button", "navigation", "label"]
+  }
+  
+  connect() {
+    if (window.innerWidth < 768) {
+      this.closeAllNavigations()
+    }
+  }
+
+  toggleNavigation(navigation) {
+    let ul = navigation.querySelector("ul")
+    if (ul.classList.contains("translate-x-full")) { 
+      this.primaryTarget.classList.add("md:bg-opacity-50")
+      this.labelTargets.forEach(function(label) {
+        label.classList.add("-translate-x-2")
+        this.switchClass(label, 'opacity-100', 'opacity-0')
+      }.bind(this))
+      this.switchClass(navigation.querySelector("ul"), "translate-x-full", "md:translate-x-20")
+    } else {
+      this.primaryTarget.classList.remove("md:bg-opacity-50")
+      this.labelTargets.forEach(function(label) {
+        label.classList.remove("-translate-x-2")
+        this.switchClass(label, 'opacity-0', 'opacity-100')
+      }.bind(this))
+      this.switchClass(navigation.querySelector("ul"), "md:translate-x-20", "translate-x-full")
+    }
+  }
+
+  toggle(event) {
+    let button = event.currentTarget
+    let closed = button.nextElementSibling.classList.contains("translate-x-full")
+    this.closeAllNavigations()
+
+    // If button was closed, open the nav
+    if (closed) {
+      this.switchClass(button, "opacity-50", "opacity-100")
+      this.toggleNavigation(button.parentElement)
+    }
+  }
+
+  closeAllNavigations() {
+    this.buttonTargets.forEach(function(button) {
+      this.switchClass(button, "opacity-100", "opacity-50")
+    }.bind(this))
+    
+    this.backToFirstLevel()
+  }
+  
+  backToFirstLevel() {
+    this.navigationTargets.forEach(function(navigation) {
+      this.switchClass(navigation.querySelector("ul"), "md:translate-x-20", "translate-x-full")
+    }.bind(this))
+    this.primaryTarget.classList.remove("md:bg-opacity-50")
+    this.labelTargets.forEach(function(label) {
+      label.classList.remove("-translate-x-2")
+      this.switchClass(label, 'opacity-0', 'opacity-100')
+    }.bind(this))
+  }
+
+  switchClass(element, from_class, to_class) {
+    element.classList.remove(from_class)
+    element.classList.add(to_class)
+  }
+
+  get activeItem() {
+    return this.element.querySelector("[data-navigation-active]")
+  }
+
+  get activeNavigation() {
+    return this.activeItem.closest(`[data-navigation-target*="navigation"]`)
+  }
+
+}

data/app/assets/javascripts/spina/controllers/parent_pages_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static get targets() {
+    return ["frame"]
+  }
+  
+  update(event) {
+    let select = event.currentTarget
+    let option = select.options[select.selectedIndex]
+    let src = option.dataset.parentPagesUrl
+
+    this.frameTarget.src = src
+  }
+  
+}

data/app/assets/javascripts/spina/controllers/repeater_controller.js

@@ -0,0 +1,71 @@
+import { Controller } from "stimulus"
+import Sortable from "sortablejs"
+
+export default class extends Controller {
+  static get targets() {
+    return [ "list", "listItem", "content" ]
+  }
+
+  connect() {
+    this.sortable = Sortable.create(this.listTarget, {
+      handle: 'button svg',
+      dataIdAttr: "data-pane-id",
+      onEnd: this.sort.bind(this),
+      animation: 150
+    })
+  }
+
+  sort(event) {
+    let ids = this.sortable.toArray()
+
+    // Sort the DOM elements containing the repeater fields
+    this.panes
+      .sort((a, b) => ids.indexOf(a.id) - ids.indexOf(b.id))
+      .map((node, index) => {
+        this.contentTarget.appendChild(node)
+        const positionField = node.querySelector('[data-position]')
+        if (positionField) positionField.value = index
+      })
+
+  }
+
+  addFields(event) {
+    let button = event.currentTarget
+    let childIndex = button.dataset.childIndex
+
+    // Get timestamp
+    let time = new Date().getTime()
+    let regex = new RegExp(childIndex, 'g')
+    let html = button.dataset.fields.replace(regex, time)
+
+    // Insert button
+    this.listTarget.insertAdjacentHTML('beforeend', this.buttonHTML(time))
+
+    // Insert fields
+    this.contentTarget.insertAdjacentHTML('beforeend', html)
+  }
+
+  removeFields(event) {
+    let id = event.currentTarget.dataset.id
+    let listItem = this.listItemTargets.find(listItem => listItem.dataset.paneId == id)
+    let sibling = listItem.previousElementSibling || listItem.nextElementSibling
+    let pane = document.getElementById(id)
+    this.listTarget.removeChild(listItem)
+    this.contentTarget.removeChild(pane)
+    
+    // Activate previous/next tab
+    if(sibling) sibling.click()
+  }
+
+  buttonHTML(pane_id) {
+    return `<button type="button" class="text-gray-600 rounded-md px-3 truncate text-sm font-medium flex items-center w-full h-10" data-controller="exists" data-action="tabs#show" data-tabs-target="button" data-repeater-target="listItem" data-pane-id="pane_${pane_id}">
+      <svg class="w-4 h-4 mr-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M432 288H16c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h416c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16zm0-112H16c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h416c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"/></svg>
+      ...
+    </button>`
+  }
+
+  get panes() {
+    return [...this.contentTarget.children]
+  }
+
+}