spina 1.2.0 → 2.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6fa491e01750e620e5a4e3e3b63360fee11594caf3c773810617b5971e07ac3d
-  data.tar.gz: 7445c7cab3bfe33ae822a8a99d2956e7bec095d4b3224c79a93d2ebc1ae2d7dd
+  metadata.gz: e67649b8e50f63ee47ba1d34a825ba158ef8ce067aa4486bca04c259a4e7f5d1
+  data.tar.gz: d09251da1a67cb34623868eff481bfb77fa070cec7608629ed3133a299621e51
 SHA512:
-  metadata.gz: 0660aa6e59334da9af788a9cd15e58fde5e54f2d2426508ffc86b03cf8ff2937f7c5ac15713cc02769a0e1499f15083c8745317f15ca1038be17364f17c88e9f
-  data.tar.gz: db2025173e5dd6888ed190476fd6c844ec917370597d83f44a919e205e6ca0a92fbea4b30c8698d620c457bb50ecd3e4ae9288fa144c3cf7137052539e9f40c5
+  metadata.gz: c56ffa2ffdb0b7d4cc7f8d0685034ca58abc1d039b827bc17dc90cc9ae4f7e550f5e1f1e4981d80cff04c0e4e105d1cd8aab96cd88db08bfe6190bfd87d22b13
+  data.tar.gz: d95e8bbf6ca1cd97622ace112805d58951d7c1d66bd0c499bb4028bff02fd51d50dab8c05372148203cd9ce3f96ed50ab27796b99bd283e6de5d92792f5016d3

data/app/assets/icons/spina/preview/icons_spina-preview.html

@@ -288,8 +288,6 @@
 .icon-users-outline:before { content: "\f107"; }
     </style>
 
-    <!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
-
     <script>
       function toggleCharacters() {
         var body = document.getElementsByTagName('body')[0];

data/app/assets/icons/spina/preview/ics_spina-preview.html

@@ -309,8 +309,6 @@
 .icon-users-outline:before { content: "\f137"; }
     </style>
 
-    <!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
-
     <script>
       function toggleCharacters() {
         var body = document.getElementsByTagName('body')[0];

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.imageUrl, 
+        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) ->