spina 1.1.4 → 2.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 414bc5f87303a017e42900d1f064457e8649f11088b3b9cfd49bccb8a327e145
-  data.tar.gz: a922eb6f603cbc71de8fe8e353aba261a4d1ce998ad2e40a100feeda27b0b881
+  metadata.gz: 979a0e909c387767e2094535c8ee443c048e084bf2f843ca1200dde04e791651
+  data.tar.gz: b53c7cd7994cd84b99a296a46ac962595268e6d70d25e08ecca543b2bbb899fc
 SHA512:
-  metadata.gz: a877991a1b49ad1811f1557406835a72f80da58b326c17adc923fe2460734cebdceb467ba4b380724cbe686aa61949d20e3b6972b2517f060adf84a8b2a24363
-  data.tar.gz: 7612cd02fde4d6b3444249ff9477ba102cf7c3f87791ede3b0c0ca2e700a36c7c702f73dbb897e0a22b0a2490d7aa7781d5e3495b5dff86e4fd1983a8b8a0e41
+  metadata.gz: b029f327a909d773360304b911985ea1cb2a10d5361d1e0225bea267953aa57525d470a01df2ade03d3dec7e4d868fde77f4f1034e049b4ceefb44a2c6d3edd0
+  data.tar.gz: 03fc8375f855e25a9a17bfb078f2a432410811fd09be6f57a3f69b50929d421eca063b95ed3171357ad9157323fb1b1a90023d25ccbfc9aedd32b80d344238d2

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) ->