spina 1.2.0 → 2.0.0.alpha

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6fa491e01750e620e5a4e3e3b63360fee11594caf3c773810617b5971e07ac3d
-  data.tar.gz: 7445c7cab3bfe33ae822a8a99d2956e7bec095d4b3224c79a93d2ebc1ae2d7dd
+  metadata.gz: 840093f4a3186a7f872eb18f178f4b80619947ac14875213954e7eb956568176
+  data.tar.gz: 8013ac66f225fe12684596f71dbedef71fcb01cc88a404b7aa71ea6efb11afb7
 SHA512:
-  metadata.gz: 0660aa6e59334da9af788a9cd15e58fde5e54f2d2426508ffc86b03cf8ff2937f7c5ac15713cc02769a0e1499f15083c8745317f15ca1038be17364f17c88e9f
-  data.tar.gz: db2025173e5dd6888ed190476fd6c844ec917370597d83f44a919e205e6ca0a92fbea4b30c8698d620c457bb50ecd3e4ae9288fa144c3cf7137052539e9f40c5
+  metadata.gz: 63bacad75a83b92a8e95609d1d79b9174cedf521a37d08321f245b9e450c4384a539e5c4c5f3017fb449ce186e5adf40f3bf7e84459bdb1dedd241389d6dc124
+  data.tar.gz: 4d354cf6a05ffb631e0da43bf0707b6aab00476c6ebc7255d775ea316ec5d9ead75fae8c4489e744266af42400c47d7b7afdf1a771a072b6e31bbfd9f8877b33

data/app/assets/javascripts/spina/admin/application.js

@@ -1,7 +1,7 @@
 // jQuery
 
 //= require jquery
-//= require jquery_ujs
+//= require rails-ujs
 
 // Turbolinks
 
@@ -38,7 +38,6 @@
 //= require ./notifications
 //= require ./media_gallery
 
-//= require ./account
 //= require ./confirm_delete
 //= require ./pages
 

data/app/assets/javascripts/spina/admin/controllers/attachment_picker_controller.js

@@ -0,0 +1,15 @@
+(() => {
+  const application = Stimulus.Application.start()
+
+  application.register("attachment-picker", class extends Stimulus.Controller {
+    static get targets() {
+      return ["signedBlobId", "filename"]
+    }
+
+    chooseAttachment(event) {
+      let option = event.currentTarget.options[event.currentTarget.selectedIndex]
+      this.signedBlobIdTarget.value = option.dataset.signedBlobId || ""
+      this.filenameTarget.value = option.dataset.filename || ""
+    }
+  })
+})()

data/app/assets/javascripts/spina/admin/controllers/image_form_controller.js

@@ -3,7 +3,7 @@
 
   application.register("image-form", class extends Stimulus.Controller {
     static get targets() {
-      return ["image", "field", "button"]
+      return ["image", "imageId", "signedBlobId", "filename"]
     }
 
     remove(e) {
@@ -12,9 +12,10 @@
       e.stopPropagation()
 
       // Remove image and reset field
-      this.imageTarget.remove()
-      this.buttonTarget.remove()
-      this.fieldTarget.value = null
+      this.imageTarget.querySelectorAll('img').forEach(image => image.remove())
+      this.imageIdTarget.value = null
+      this.signedBlobIdTarget.value = null
+      this.filenameTarget.value = null
     }
     
   })

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

@@ -3,36 +3,34 @@
 
   application.register("infinite-scroll", class extends Stimulus.Controller {
     static get targets() {
-      return ["link"]
+      return ["link", "scrollContainer"]
     }
 
     connect() {
-      // Disable scroll event listeners
-      $(window).off('scroll.infiniteScroll')
-      $('#overlay section').off('scroll.infiniteScroll')
-
-      let $link = $(this.linkTarget)
-
-      // If the link has an actual href
-      if ($link.attr('href')) {
-        // If the window scrolls
-        $(window).on('scroll.infiniteScroll', this.loadNextPage($link))
+      this.element["infiniteScroll"] = this
+      this.scrollElement.addEventListener("scroll", this.loadNextPage.bind(this))
+      this.loadNextPage()
+    }
 
-        // If the overlay scrolls
-        $('#overlay section').on('scroll.infiniteScroll', function() {
-          $(window).trigger('scroll.infiniteScroll')
-        })
+    disconnect() {
+      this.scrollElement.removeEventListener("scroll", this.loadNextPage.bind(this))
+    }
 
-        $(window).trigger('scroll.infiniteScroll')
+    get scrollElement() {
+      if (this.hasScrollContainerTarget) {
+        return this.scrollContainerTarget
+      } else {
+        return window
       }
     }
 
-    loadNextPage(link) {
-      if ($(window).scrollTop() > link.offset().top - $(window).height() - 500) {
-        $(window).off('scroll.infiniteScroll')
-        $('#overlay section').off('scroll.infiniteScroll')
-        $.rails.disableElement(link)
-        $.getScript(link.attr('href'))
+    loadNextPage() {
+      if (this.hasLinkTarget) {
+        let top = this.linkTarget.getBoundingClientRect().top
+        if (top < window.innerHeight + 500) {
+          this.linkTarget.dataset.disableWith = "..."
+          this.linkTarget.click()
+        }
       }
     }
 

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

@@ -0,0 +1,171 @@
+(() => {
+  const application = Stimulus.Application.start()
+
+  application.register("media-picker", class extends Stimulus.Controller {
+    static get targets() {
+      return ["input", "image", "grid", "selectedImage", "selectedImages", "selectedCount", "alt", "linkToUrl", "trixImage"]
+    }
+
+    connect() {
+      this.toggleActive()
+
+      if (this.hasSelectedImagesTarget) {
+        this.sortable = Sortable.create(this.selectedImagesTarget)
+      }
+    }
+
+    choose(event) {
+      switch(this.element.dataset.mode) {
+        case "single":
+          this.imageTargets.forEach((image) => image.querySelector('input').checked = false)
+          event.currentTarget.checked = true
+          this.imageIdInput.value = event.currentTarget.value
+          this.signedBlobIdInput.value = event.currentTarget.dataset.signedBlobId
+          this.filenameInput.value = event.currentTarget.dataset.filename
+          this.placeholder.innerHTML = `<img src="${event.currentTarget.dataset.thumbnailUrl}" width="200" height="150" />`
+          this.element.modal.close()
+          break
+        case "multiple":
+          if(event.currentTarget.checked) {
+            this.addImage(event.currentTarget.dataset.imageId, event.currentTarget.dataset.signedBlobId, event.currentTarget.dataset.filename, event.currentTarget.dataset.thumbnailUrl)
+          } else {
+            this.removeImage(event.currentTarget.dataset.imageId)
+          }
+          this.setCount()
+          break
+        case "trix":
+          this.imageTargets.forEach((image) => image.querySelector('input').checked = false)
+          event.currentTarget.checked = true
+          this.trixImage = event.currentTarget
+          break
+      }
+    }
+
+    choose_multiple(event) {
+      // Set image id's
+      let fields = this.imageCollectionPlaceholder.dataset.fields
+      let id = this.imageCollectionPlaceholder.dataset.id
+
+      let timeIndex = 0
+
+      // Set image thumbnails
+      this.imageCollectionPlaceholder.innerHTML = ""
+      this.selectedImageTargets.forEach(function(image) {
+        // this.imageCollectionPlaceholder.insertAdjacentHTML("beforeend", `<img src="${image.src}" />`)
+
+        // Time
+        let time = new Date().getTime() + timeIndex
+        timeIndex += 1
+
+        // Regexp
+        let regexp = new RegExp(`${id}|new_association`, 'g')
+
+        // Document generation
+        let doc = document.createRange().createContextualFragment(fields.replace(regexp, time))
+        doc.querySelector(".image-id").value = image.dataset.imageId
+        doc.querySelector(".signed-blob-id").value = image.dataset.signedBlobId
+        doc.querySelector(".filename").value = image.dataset.filename
+        doc.querySelector("img").src = image.src
+
+        this.imageCollectionPlaceholder.appendChild(doc)
+      }.bind(this))
+
+      // Close modal
+      this.element.modal.close()
+    }
+
+    insert_trix(event) {
+      let customEvent = new CustomEvent("image-insert", {bubbles: true, cancelable: true, detail: {
+        url: this.trixImage.dataset.fullImageUrl, 
+        alt: this.altTarget.value, 
+        link_to_url: this.linkToUrlTarget.value
+      }})
+      this.trixEditor.dispatchEvent(customEvent)
+
+      // Close modal
+      this.element.modal.close()
+    }
+
+    startUpload(event) {
+      event.currentTarget.querySelector('.media-picker-uploader').classList.add("uploading")
+    }
+
+    refresh(event) {
+      fetch(event.currentTarget.dataset.mediaPickerUrl)
+        .then(response => response.text())
+        .then(function(html) {
+          this.gridTarget.innerHTML = html
+          this.toggleActive()
+        }.bind(this))
+    }
+
+    toggleActive() {
+      this.imageTargets.forEach(function(image) {
+        let input = image.querySelector('input')
+        if (this.selectedIds.includes(input.value)) input.checked = true
+      }.bind(this))
+    }
+
+    openFolder(event) {
+      event.preventDefault()
+      fetch(event.currentTarget.href)
+        .then(response => response.text())
+        .then(function(html) {
+          this.gridTarget.innerHTML = html
+          this.toggleActive()
+        }.bind(this))
+    }
+
+    setCount() {
+      this.selectedCountTarget.innerHTML = `(${this.selectedIds.length})`
+    }
+
+    addImage(id, signed_blob_id, filename, url) {
+      this.selectedImagesTarget.insertAdjacentHTML("beforeend", `<img src="${url}" data-image-id="${id}" data-signed-blob-id="${signed_blob_id}" data-filename="${filename}" data-target="media-picker.selectedImage" />`)
+    }
+
+    removeImage(id) {
+      let image = this.selectedImagesTarget.querySelector(`img[data-image-id="${id}"]`)
+      this.selectedImagesTarget.removeChild(image)
+    }
+
+    get trixEditor() {
+      return document.querySelector(`trix-editor[toolbar="${this.inputTarget.value}"]`)
+    }
+
+    get selectedIds() {
+      return this.selectedImageTargets.map(function(image) {
+        return image.dataset.imageId
+      })
+    }
+
+    get imageCollectionPlaceholder() {
+      return document.querySelector(`#${this.inputTarget.value}`)
+    }
+    
+    get hiddenInputs() {
+      return document.querySelector(`#${this.inputTarget.value}`)
+    }
+    
+    get imageIdInput() {
+      return this.hiddenInputs.querySelector("input[data-target='image-form.imageId']")
+    }
+
+    get signedBlobIdInput() {
+      return this.hiddenInputs.querySelector("input[data-target='image-form.signedBlobId']")
+    }
+
+    get filenameInput() {
+      return this.hiddenInputs.querySelector("input[data-target='image-form.filename']")
+    }
+
+    get placeholder() {
+      return this.hiddenInputs.nextElementSibling
+    }
+
+    get token() {
+      return document.querySelector('meta[name="csrf-token"]').content
+    }
+
+  })
+})()

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

@@ -0,0 +1,18 @@
+(() => {
+  const application = Stimulus.Application.start()
+
+  application.register("modal", class extends Stimulus.Controller {
+    static get targets() {
+      return []
+    }
+
+    connect() {
+      this.element[this.identifier] = this
+    }
+
+    close() {
+      document.querySelector('body').removeChild(this.element)
+    }
+
+  })
+})()

data/app/assets/javascripts/spina/admin/controllers/repeater_form_controller.js

@@ -0,0 +1,38 @@
+(() => {
+  const application = Stimulus.Application.start()
+
+  application.register("repeater-form", class extends Stimulus.Controller {
+    static get targets() {
+      return ["list", "listItem", "content", "pane"]
+    }
+
+    connect() {
+      Sortable.create(this.listTarget, {
+        handle: '.sortable-handle',
+        onUpdate: function(event) {
+          let order_of_ids = [...this.listTarget.children].map(function(item) {
+            return parseInt(item.dataset.partId)
+          })
+
+          // Sort the DOM elements containing the repeater fields
+          let array = [...this.contentTarget.children]
+          array.sort(function(a, b) {
+            return order_of_ids.indexOf(parseInt(a.dataset.partId)) > order_of_ids.indexOf(parseInt(b.dataset.partId))
+          }).map(node => this.contentTarget.appendChild(node))
+        }.bind(this)
+      })
+    }
+
+    delete(event) {
+      event.preventDefault()
+      let part_id = event.currentTarget.dataset.partId
+
+      let pane = this.element.querySelector(`.structure-form-pane[data-part-id="${part_id}"]`)
+      let listItem = this.element.querySelector(`.structure-form-menu li[data-part-id="${part_id}"]`)
+
+      pane.parentElement.removeChild(pane)
+      listItem.parentElement.removeChild(listItem)
+    }
+    
+  })
+})()

data/app/assets/javascripts/spina/admin/media_gallery.coffee

@@ -4,9 +4,6 @@ $(document).on 'direct-uploads:start', 'form', (e) ->
 $(document).on 'direct-uploads:end', 'form', (e) ->
   $(this).find('.customfile').removeClass('loading')
 
-$(document).on 'direct-upload:progress', 'input', (e) ->
-  console.log(e.detail.progress)
-
 $(document).on 'change', 'input[type="file"]', (e) ->
   $form = $(this).parents('form')
   $form.find('input[type="submit"]').click()

data/app/assets/javascripts/spina/admin/notifications.coffee

@@ -1,6 +1,6 @@
 $(document).on 'click', '.notification [data-close-notification]', (e) ->
   $notification = $(this).parents('.notification')
-  $notification.removeClass('fadeInRight').addClass('fadeOutRight')
+  $notification.removeClass('fadeInLeft').addClass('fadeOutLeft')
   setTimeout ->
     $notification.remove()
   , 400

data/app/assets/javascripts/spina/admin/pages.coffee.erb

@@ -3,33 +3,14 @@ ready = ->
     $('.dd').nestable
       maxDepth: "<%= Spina.config.max_page_depth %>"
 
-  if $('.page-template').length > 0
-    page_parts = $('.page-template').data('page-parts')
-    show_page_parts(page_parts)
-
   $('.sortable-grid').sortable().bind 'sortupdate', (e) ->
     position_array = []
     $(e.target).find('li.image').each (index) ->
       position_array.push $(this).data('image-id')
     $(e.target).parents('.horizontal-form-content').find('.image-positions').val(position_array.join(","))
 
-  $('.structure-form-menu ul').sortable().bind 'sortupdate', (e) ->
-    $(e.target).find('li').each (index) ->
-      id = $(this).data('structure-item-id')
-      $(".structure_form_pane_#{id}_position").val(index)
-
 $(document).on 'turbolinks:load', ready
 
-# Change templates makes page parts appear and disappear
-$(document).on 'change', '.page-template select', ->
-  page_parts = $(this).find('option:selected').data('page-parts').split(" ")
-  show_page_parts(page_parts)
-
-show_page_parts = (page_parts) ->
-  $('.horizontal-form-group.page-part').hide()
-  for page_part in page_parts
-    $('.horizontal-form-group.page-part[data-name=' + page_part + ']').show()
-
 # Dynamically add and remove structures
 $(document).on 'click', 'form .add_structure_item_fields', (event) ->
   $structureForm = $(this).parents('.structure-form')
@@ -39,7 +20,7 @@ $(document).on 'click', 'form .add_structure_item_fields', (event) ->
   $fields = $($(this).data('fields').replace(regexp, time))
   $structureForm.find('.structure-form-content').append($fields)
 
-  $link = $("<li><a href='#structure_form_pane_#{time}'><i class='icon icon-bars'></i> </a></li>")
+  $link = $("<li data-part-id='#{time}'><a href='#structure_form_pane_#{time}'><i class='icon icon-bars'></i> </a></li>")
 
   $structureForm.find('.structure-form-menu ul').append($link)
   $fields.attr('id', "structure_form_pane_#{time}")
@@ -60,6 +41,8 @@ $(document).on 'click', 'form .remove_structure_item_fields', (event) ->
   $previousLink.find('a').trigger('click')
   $link.hide()
   $pane.hide()
+  $link.remove()
+  $pane.remove()
   event.preventDefault()
 
 $(document).on 'change', '.structure-form-pane .structure-form-part:first-child input', (event) ->

data/app/assets/javascripts/spina/admin/scaffold.coffee

@@ -73,9 +73,6 @@ ready = ->
   $('input[type="file"][data-customfileinput]:visible').each ->
     $(this).customFileInput()
 
-  $(".structure-form-menu ul").sortable
-    handle: '.sortable-handle'
-
   # Switch
   if $('input[data-switch]').length > 0
     $('input[data-switch]').spinaSwitch()

data/app/assets/javascripts/spina/admin/trix.coffee.erb

@@ -44,7 +44,6 @@ Trix.config.toolbar =
       <span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools">
         <button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" data-trix-key="b" title="#{Trix.config.lang.bold}" tabindex="-1">#{Trix.config.lang.bold}</button>
         <button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" data-trix-key="i" title="#{Trix.config.lang.italic}" tabindex="-1">#{Trix.config.lang.italic}</button>
-        <button type="button" class="trix-button trix-button--icon trix-button--icon-strike" data-trix-attribute="strike" title="#{Trix.config.lang.strike}" tabindex="-1">#{Trix.config.lang.strike}</button>
         <button type="button" class="trix-button trix-button--icon trix-button--icon-link" data-trix-attribute="href" data-trix-action="link" data-trix-key="k" title="#{Trix.config.lang.link}" tabindex="-1">#{Trix.config.lang.link}</button>
       </span>
       <span class="trix-button-group trix-button-group--block-tools" data-trix-button-group="block-tools">
@@ -52,16 +51,8 @@ Trix.config.toolbar =
         <button type="button" class="trix-button trix-button--text" data-trix-attribute="heading2" title="#{Trix.config.lang.heading2}" tabindex="-1">#{Trix.config.lang.heading2}</button>
         <button type="button" class="trix-button trix-button--text" data-trix-attribute="heading3" title="#{Trix.config.lang.heading3}" tabindex="-1">#{Trix.config.lang.heading3}</button>
         <button type="button" class="trix-button trix-button--text" data-trix-attribute="heading4" title="#{Trix.config.lang.heading4}" tabindex="-1">#{Trix.config.lang.heading4}</button>
-        <button type="button" class="trix-button trix-button--text" data-trix-attribute="heading5" title="#{Trix.config.lang.heading5}" tabindex="-1">#{Trix.config.lang.heading5}</button>
-        <button type="button" class="trix-button trix-button--text" data-trix-attribute="heading6" title="#{Trix.config.lang.heading6}" tabindex="-1">#{Trix.config.lang.heading6}</button>
       </span>
-      <span class="trix-button-group-spacer"></span>
-      <span class="trix-button-group trix-button-group--history-tools" data-trix-button-group="history-tools">
-        <button type="button" class="trix-button trix-button--icon trix-button--icon-undo" data-trix-action="undo" data-trix-key="z" title="#{Trix.config.lang.undo}" tabindex="-1">#{Trix.config.lang.undo}</button>
-        <button type="button" class="trix-button trix-button--icon trix-button--icon-redo" data-trix-action="redo" data-trix-key="shift+z" title="#{Trix.config.lang.redo}" tabindex="-1">#{Trix.config.lang.redo}</button>
-      </span>
-    </div>
-    <div class="trix-button-row">
+
       <span class="trix-button-group trix-button-group--block-tools">
         <button type="button" class="trix-button trix-button--icon trix-button--icon-image" data-trix-attribute="image" data-trix-action="image" title="#{Trix.config.lang.image}" tabindex="-1">#{Trix.config.lang.image}</button>
         <button type="button" class="trix-button trix-button--icon trix-button--icon-quote" data-trix-attribute="quote" title="#{Trix.config.lang.quote}" tabindex="-1">#{Trix.config.lang.quote}</button>
@@ -71,6 +62,11 @@ Trix.config.toolbar =
         <button type="button" class="trix-button trix-button--icon trix-button--icon-decrease-nesting-level" data-trix-action="decreaseNestingLevel" title="#{Trix.config.lang.outdent}" tabindex="-1">#{Trix.config.lang.outdent}</button>
         <button type="button" class="trix-button trix-button--icon trix-button--icon-increase-nesting-level" data-trix-action="increaseNestingLevel" title="#{Trix.config.lang.indent}" tabindex="-1">#{Trix.config.lang.indent}</button>
       </span>
+
+      <span class="trix-button-group-spacer"></span>
+    </div>
+    <div class="trix-button-row">
+      
     </div>
     <div class="trix-dialogs" data-trix-dialogs>
       <div class="trix-dialog trix-dialog--link" data-trix-dialog="href" data-trix-dialog-attribute="href">
@@ -88,21 +84,21 @@ Trix.config.toolbar =
 class Spina.TrixAttachment
   @imageSelect: (e) ->
     toolbar_id = $(this).closest('trix-toolbar').attr('id')
-    $.get("<%= Spina::Engine.routes.url_helpers.admin_media_picker_path %>" + "?trix_toolbar_id=#{toolbar_id}")
+    $.getScript("<%= Spina::Engine.routes.url_helpers.admin_media_picker_path %>" + "?input=#{toolbar_id}&mode=trix")
 
-  @imageInsert: (e, url, alt = "", link_to_url = "") ->
+  @imageInsert: (e) ->
     labels = []
-    labels.push "✍️ #{alt}" if alt != ""
-    labels.push "🔗 #{link_to_url}" if link_to_url != ""
+    labels.push "✍️ #{e.detail.alt}" if e.detail.alt != ""
+    labels.push "🔗 #{e.detail.link_to_url}" if e.detail.link_to_url != ""
     label = labels.join("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;")
 
-    if link_to_url != ""
-      attachment = new Trix.Attachment({content: "<a href='#{link_to_url}' class='trix-attachment-spina-image' data-label='#{label}'>
-        <img src='#{url}' alt='#{alt}' />
+    if e.detail.link_to_url != ""
+      attachment = new Trix.Attachment({content: "<a href='#{e.detail.link_to_url}' class='trix-attachment-spina-image' data-label='#{label}'>
+        <img src='#{e.detail.url}' alt='#{e.detail.alt}' />
       </a>"})
     else
       attachment = new Trix.Attachment({content: "<span class='trix-attachment-spina-image' data-label='#{label}'>
-        <img src='#{url}' alt='#{alt}' />
+        <img src='#{e.detail.url}' alt='#{e.detail.alt}' />
       </span>"})
 
     this.editor.insertAttachment(attachment)