spina 2.0.0 → 2.1.1

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]
+  }
+
+}

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

@@ -0,0 +1 @@
+//= require ../libraries/stimulus-reveal@1.2.4.js

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

@@ -0,0 +1,27 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  
+  connect() {
+    this.update()
+  }
+  
+  update() {
+    if (this.hasValue) {
+      this.element.classList.remove('text-gray-400')
+      this.element.classList.add('text-gray-700')
+    } else {
+      this.element.classList.add('text-gray-400')
+      this.element.classList.remove('text-gray-700')  
+    }
+  }
+  
+  get hasValue() {
+    return this.value.length > 0
+  }
+  
+  get value() {
+    return this.element.value
+  }
+  
+}

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

@@ -0,0 +1,44 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static get targets() {
+    return [ "item" ]
+  }
+  
+  select(event) {
+    let item = event.currentTarget.closest(`[data-selectable-target*="item"]`)
+    
+    // Deactivate other items
+    this.itemTargets.forEach(function(item) {
+      this.deactivate(item)
+    }.bind(this))
+
+    this.activate(item)
+  }
+  
+  activate(item) {
+    this.toggleClasses(item, true)
+  }
+  
+  deactivate(item) {
+    this.toggleClasses(item, false)
+  }
+  
+  toggleClasses(item, force) {
+    item.querySelectorAll(`[data-selected-class]`).forEach(function(element) {
+      let selectedClasses = element.dataset.selectedClass
+      if(selectedClasses) {
+        selectedClasses.split(" ").forEach(function(cssClass) {
+          element.classList.toggle(cssClass, force)
+        })
+      }
+      
+      let deselectedClasses = element.dataset.deselectedClass
+      if(deselectedClasses) {
+        deselectedClasses.split(" ").forEach(function(cssClass) {
+          element.classList.toggle(cssClass, !force)
+        }) 
+      }
+    })
+  }
+}

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

@@ -0,0 +1,15 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static get targets() {
+    return [ "confirm" ]
+  }
+  
+  connect() {
+  }
+  
+  confirmClick(event) {
+    if (event.key === 'Enter') this.confirmTarget.click()
+  }
+  
+}

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

@@ -0,0 +1,39 @@
+import { Controller } from "stimulus"
+import Sortable from "sortablejs"
+import formRequestSubmitPolyfill from 'form-request-submit-polyfill'
+
+export default class extends Controller {
+  static get targets() {
+    return [ "form", "list" ]
+  }
+
+  connect() {
+    this.sortable = Sortable.create(this.listTarget, {
+      handle: '[data-sortable-handle]',
+      onEnd: this.saveSort.bind(this),
+      animation: 150
+    })
+  }
+
+  saveSort(event) {
+    if (this.hasFormTarget) {
+      this.prepareForm()
+      this.formTarget.requestSubmit()
+    }
+  }
+  
+  prepareForm() {
+    // Empty form
+    this.formTarget.innerHTML = ''
+    
+    // Add hidden fields to store ids
+    this.orderedIds.forEach(function(id) {
+      this.formTarget.insertAdjacentHTML("beforeend", `<input type="hidden" name="ids[]" value="${id}" />`)
+    }.bind(this))
+  }
+
+  get orderedIds() {
+    return this.sortable.toArray()
+  }
+
+}

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

@@ -0,0 +1,27 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static get targets() {
+    return [ "knob", "container", "checkbox" ]
+  }
+
+  connect() {
+    this.renderKnob()
+  }
+
+  toggle() {
+    this.checkboxTarget.checked = !this.checked
+    this.renderKnob()
+  }
+
+  renderKnob() {
+    this.containerTarget.classList.toggle('bg-gray-200', !this.checked)
+    this.containerTarget.classList.toggle('bg-green-500', this.checked)
+    this.knobTarget.classList.toggle('translate-x-6', this.checked)
+  }
+
+  get checked() {
+    return this.checkboxTarget.checked
+  }
+
+}

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

@@ -0,0 +1,70 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static get targets() {
+    return ["pane", "button"]
+  }
+
+  connect() {
+    this.element[this.identifier] = this
+
+    this.hideAllPanes()
+    this.deactiveAllButtons()
+
+    let firstButton = this.buttonTargets[0]
+    if (firstButton) {
+      let firstPane = document.getElementById(firstButton.dataset.paneId)
+      this.activateButton(firstButton)
+      firstPane.hidden = false
+    }
+  }
+
+  added(event) {
+    let button = event.target
+    let pane = document.getElementById(button.dataset.paneId)
+
+    this.hideAllPanes()
+    this.deactiveAllButtons()
+
+    this.activateButton(button)
+    pane.hidden = false
+  }
+
+  show(event) {
+    let activeButton = event.currentTarget
+    let activePane = document.getElementById(activeButton.dataset.paneId)
+
+    // Deactivate
+    this.deactiveAllButtons()
+    this.hideAllPanes()
+
+    // Activate
+    this.activateButton(activeButton)
+    activePane.hidden = false
+  }
+
+  activateButton(button) {
+    button.classList.add(...this.activeClasses)
+    button.classList.remove(...this.inactiveClasses)
+  }
+
+  deactiveAllButtons() {
+    this.buttonTargets.forEach(function(button) {
+      button.classList.remove(...this.activeClasses)
+      button.classList.add(...this.inactiveClasses)
+    }.bind(this))
+  }
+
+  hideAllPanes() {
+    this.paneTargets.forEach((pane) => pane.hidden = true)
+  }
+
+  get activeClasses() {
+    return (this.element.dataset.tabsActive || "active").split(" ")
+  }
+
+  get inactiveClasses() {
+    return (this.element.dataset.tabsInactive || "inactive").split(" ")
+  }
+
+}

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

@@ -0,0 +1,12 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static get targets() {
+    return [ "container" ]
+  } 
+
+  toggle() {
+    this.containerTarget.classList.toggle('hidden')
+  }
+
+}

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

@@ -0,0 +1,87 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static get targets() {
+    return [ "editor", "imageFields", "altField" ]
+  }
+  
+  connect() {    
+    this.editorTarget.addEventListener("trix-selection-change", function(event) {
+      if (this.mutableImageAttachment) {
+        this.imageFieldsTarget.classList.remove("hidden")
+        let position = this.mutableImageAttachment.querySelector("img").offsetTop + this.mutableImageAttachment.querySelector("img").offsetHeight - 16
+        this.imageFieldsTarget.style.top = `${position}px`
+        this.altFieldTarget.value = this.currentAltText
+      } else {
+        this.imageFieldsTarget.classList.add("hidden")
+      }
+    }.bind(this))
+  }
+  
+  preventSubmission(event) {
+    if (event.key === 'Enter') event.preventDefault() // Prevent form submit from alt text fields
+  }
+  
+  insertAttachment(event) {
+    let attachment = new Trix.Attachment({content: `<span class="trix-attachment-spina-image" data-label="Alt text">
+      <img src="${event.detail.embeddedUrl}" />
+    </span>`, contentType: "Spina::Image"})
+    this.editor.insertAttachment(attachment)
+  }
+  
+  setAltText(event) {
+    let alt = event.currentTarget.value
+    let altLabel = alt
+    if (altLabel.trim().length == 0) altLabel = "Alt text" // Fallback
+    let content = this.trixAttachment.getContent()
+    
+    // Set span data-alt inside Trix attachment
+    this.mutableImageAttachment.firstElementChild.dataset.label = altLabel
+    
+    // Change content
+    let fragment = this.fragmentFromHTML(content)
+    fragment.firstElementChild.dataset.label = altLabel
+    fragment.querySelector('img').alt = alt
+    let div = document.createElement('div')
+    div.appendChild(fragment)
+    
+    this.trixAttachment.setAttributes({content: div.innerHTML})
+  }
+
+  preventDefault(event) {
+    event.preventDefault()
+  }
+  
+  getTrixAttachment(id) {
+    let attachments = this.attachmentManager.getAttachments()
+    return attachments.find(attachment => attachment.id == id).attachment
+  }
+  
+  fragmentFromHTML(html) {
+    let range = document.createRange()
+    range.selectNodeContents(document.body)
+    return range.createContextualFragment(html)
+  }
+  
+  get currentAltText() {
+    let fragment = this.fragmentFromHTML(this.trixAttachment.getContent())
+    return fragment.querySelector('img').alt
+  }
+  
+  get trixAttachment() {
+    return this.getTrixAttachment(this.mutableImageAttachment.dataset.trixId)
+  }
+  
+  get mutableImageAttachment() {
+    return this.element.querySelector(`figure[data-trix-mutable][data-trix-content-type="Spina::Image"]`)
+  }
+  
+  get attachmentManager() {
+    return this.editorTarget.editorController.attachmentManager
+  }
+  
+  get editor() {
+    return this.editorTarget.editor
+  }
+
+}

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

@@ -0,0 +1,31 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  
+  connect() {
+    this.replaceHTML()
+  }
+  
+  replaceHTML() {
+    let html = this.element.innerHTML
+    
+    let uuid = this.generateUUID()
+    let regex = new RegExp(this.id, 'g')
+    let replaced_html = html.replace(regex, uuid)
+    
+    this.element.innerHTML = replaced_html
+    this.element.id = uuid
+  }
+  
+  generateUUID() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8)
+      return v.toString(16)
+    })
+  }
+  
+  get id() {
+    return this.element.dataset.uniqueId
+  }
+  
+}