spina 1.0.3 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 32187eb78136ac0dfe4d1725858773b6f1a1ccb2cbcdc0e34a0607465c5e79c3
-  data.tar.gz: 870eb6a0b6680656373c86be1c7c76589d8bcb8568d8cebf3e14152e85067106
+  metadata.gz: db2767772ea24a0a4262e61db31f80abe5fc93f2b310edecc76f8bf00fbe342a
+  data.tar.gz: 7d38a0b23d9a4a9b77b6653be7c4f30b3c53e27fcb3b97c0e37371f4c3eb29d5
 SHA512:
-  metadata.gz: 3090e08c178581fe346591ab4bba6d6f6906960c4e29a6f3fe5fa660305acfbedc0e5f43a492376f74843c2cd39184ff693f93ed2338c1963df6c044bae32583
-  data.tar.gz: bff6c12eaaf8565db13e80f31193ee5ac744018b61dfe934a4c878b1dd574007976daff8f8065496bde5a715a3431aab32f294006d80813424d75c99bf72c3b2
+  metadata.gz: 20493b10e93d052d7c89efc2ed6e8b3cd9951b5bea67a4a1274ec23b97c13a80bf4c98feaefbab5a33ced6ef9acf25045b445a963b42478a638f6112add72813
+  data.tar.gz: 3fe59424afa8d9a792e6f6772e42764ccb14b4777f3eba65176dc527ac5a68fd93a8fc3d51d3cf4fcae2618341dcd9171e48edba93aff04547d0f3af4d3a95f6

data/README.md

@@ -13,7 +13,7 @@
 
 # Getting Started
 
-Spina is a CMS for Rails 5.2. This guide is designed for developers with experience using Ruby on Rails.
+Spina is a CMS for Rails 6.0. This guide is designed for developers with experience using Ruby on Rails.
 
 To start using Spina CMS add the following line to your Gemfile:
 

data/Rakefile

@@ -1,16 +1,10 @@
-#!/usr/bin/env rake
 begin
   require 'bundler/setup'
 rescue LoadError
   puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
 end
-begin
-  require 'rdoc/task'
-rescue LoadError
-  require 'rdoc/rdoc'
-  require 'rake/rdoctask'
-  RDoc::Task = Rake::RDocTask
-end
+
+require 'rdoc/task'
 
 RDoc::Task.new(:rdoc) do |rdoc|
   rdoc.rdoc_dir = 'rdoc'
@@ -20,22 +14,19 @@ RDoc::Task.new(:rdoc) do |rdoc|
   rdoc.rdoc_files.include('lib/**/*.rb')
 end
 
-APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
 load 'rails/tasks/engine.rake'
 
+load 'rails/tasks/statistics.rake'
 
-
-Bundler::GemHelper.install_tasks
+require 'bundler/gem_tasks'
 
 require 'rake/testtask'
 
 Rake::TestTask.new(:test) do |t|
-  t.libs << 'lib'
   t.libs << 'test'
   t.pattern = 'test/**/*_test.rb'
   t.verbose = false
-  t.warning = false
 end
 
-
 task :default => :test

data/app/assets/config/spina/manifest.js

@@ -0,0 +1,5 @@
+//= link_directory ../../images/spina
+//= link_directory ../../fonts/spina
+
+//= link_tree ../../stylesheets/spina
+//= link_directory ../../javascripts/spina/admin

data/app/assets/config/spina_manifest.js

@@ -0,0 +1,5 @@
+//= link_directory ../images/spina
+//= link_directory ../fonts/spina
+
+//= link spina/admin/application.css
+//= link spina/admin/application.js

data/app/assets/images/spina/arrow-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="26"><path fill-rule="evenodd" d="M15 0L2 13l13 13 4-4-9-9 9-9z"/></svg>

data/app/assets/images/spina/arrow-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="26"><path fill-rule="evenodd" d="M5 0l13 13L5 26l-4-4 9-9-9-9z"/></svg>

data/app/assets/images/spina/datepicker.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="16"><defs><path id="a" d="M3 0h3v6H3z"/><path id="b" d="M10 0h3v6h-3z"/></defs><g fill="none" fill-rule="evenodd"><use fill="#FFF" xlink:href="#a"/><path stroke="#CCC" d="M3.5.5h2v5h-2z"/><use fill="#FFF" xlink:href="#b"/><path stroke="#CCC" d="M10.5.5h2v5h-2z"/><path fill="#CCC" d="M6 6V2h4v4h2V2h4v14H0V2h4v4h2zM1 7v8h14V7H1z"/></g></svg>

data/app/assets/images/spina/divider.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="6" height="16"><defs><linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFF" stop-opacity=".5"/><stop offset="100%" stop-opacity=".5"/></linearGradient></defs><path fill="url(#a)" stroke="#CCC" d="M0 0l6 8m-6 8l6-8" fill-rule="evenodd" stroke-linecap="square"/></svg>

data/app/assets/images/spina/media_folder_placeholder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="140" height="140"><defs><rect id="a" width="48" height="40" rx="4"/></defs><g fill="none" fill-rule="evenodd"><path fill="#D6D6E9" d="M0 0h140v140H0z"/><rect width="64" height="64" x="38" y="38" stroke="#9FA0C1" stroke-width="4" rx="8"/><g transform="translate(46 46)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><rect width="46" height="38" x="1" y="1" stroke="#9FA0C1" stroke-width="2" rx="4"/><path stroke="#9FA0C1" stroke-width="2" mask="url(#b)" d="M0 30l16-14 13 12 11-8 8 8"/><circle cx="36" cy="11" r="5" stroke="#9FA0C1" stroke-width="2" mask="url(#b)"/></g></g></svg>

data/app/assets/images/spina/spina.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="24"><g fill="none" fill-rule="evenodd"><path fill="#685D98" d="M0 8l16 16V8z"/><path fill="#6B649C" d="M32 8L16 24V8z"/><path fill="#8980B2" d="M8 8l8 16 8-16z"/><path fill="#8278B1" d="M27 0v8H5V0z"/><path fill="#A9A4CB" d="M8 8l8-8 8 8z"/><path fill="#7668A6" d="M5 0L0 8h8z"/><path fill="#8980B2" d="M27 0l5 8h-8z"/></g></svg>

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

@@ -34,7 +34,6 @@
 //= require ./tabs
 //= require ./forms
 //= require ./dropdown
-//= require ./galleryselect
 //= require ./navigation
 //= require ./notifications
 //= require ./media_gallery
@@ -47,4 +46,4 @@
 
 // Scaffolding
 
-//= require ./scaffold
+//= require ./scaffold

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

@@ -0,0 +1,52 @@
+(() => {
+  const application = Stimulus.Application.start()
+
+  application.register("gallery-select", class extends Stimulus.Controller {
+    static get targets() {
+      return ["singleImage", "multipleImages", "multiple", "counter"]
+    }
+
+    select(event) {
+      let item = event.currentTarget
+      let imageId = item.dataset.imageId
+      if (this.multipleTarget.checked) {
+        item.classList.toggle('selected')
+        if (item.classList.contains('selected')) {
+          this.addToMultipleImages(imageId)  
+        } else {
+          this.removeFromMultipleImages(imageId)
+        }
+        this.counterTarget.innerText = `(${this.imageCount})`
+      } else {
+        item.parentElement.querySelectorAll('.item').forEach(function(item) {
+          item.classList.remove('selected')
+        })
+        item.classList.add('selected')
+        this.singleImageTarget.value = imageId
+      }
+    }
+
+    addToMultipleImages(imageId) {
+      let imageIds = this.multipleImages
+      imageIds.push(imageId)
+      this.multipleImagesTarget.value = [...new Set(imageIds)].join("-")
+    }
+
+    removeFromMultipleImages(imageId) {
+      let imageIds = this.multipleImages
+      let newImageIds = imageIds.filter(function(id) {
+        return id != imageId
+      })
+      this.multipleImagesTarget.value = newImageIds.join("-")
+    }
+
+    get multipleImages() {
+      return this.multipleImagesTarget.value.split("-")
+    }
+
+    get imageCount() {
+      return this.multipleImages.length
+    }
+    
+  })
+})()

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

@@ -14,7 +14,7 @@
       let $link = $(this.linkTarget)
 
       // If the link has an actual href
-      if ($link.attr('href').length > 0) {
+      if ($link.attr('href')) {
         // If the window scrolls
         $(window).on('scroll.infiniteScroll', this.loadNextPage($link))
 
@@ -35,6 +35,6 @@
         $.getScript(link.attr('href'))
       }
     }
-    
+
   })
 })()

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

@@ -0,0 +1,35 @@
+(() => {
+  const application = Stimulus.Application.start()
+
+  application.register("page-collapse", class extends Stimulus.Controller {
+    static get targets() {
+      return [ "list", "collapseLink", "expandLink" ]
+    }
+
+    expand() {
+      this.toggleLinks(true)
+      
+      // Fetch children HTML
+      fetch(this.element.dataset.url)
+        .then(response => response.text())
+        .then(function(html) {
+          // Render the list
+          this.listTarget.innerHTML = html
+        }.bind(this))
+    }
+
+    collapse() {
+      this.toggleLinks(false)
+
+      // Clear the list
+      this.listTarget.innerHTML = ""
+    }
+
+    // Toggle plus/minus links
+    toggleLinks(expanded) {
+      this.expandLinkTarget.style.display = expanded ? "none" : "inline-block"
+      this.collapseLinkTarget.style.display = expanded ? "inline-block" : "none"
+    }
+    
+  })
+})()

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

@@ -29,7 +29,7 @@ ready = ->
   $('.media-folder').droppable(
     drop: (event, ui) ->
       url = $(this).attr('data-add-to-media-folder-url')
-      image_id = $(ui.draggable).find('input[type="radio"]').val()
+      image_id = $(ui.draggable).attr('data-image-id')
 
       $.ajax
         url: url,

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

@@ -28,17 +28,91 @@ Trix.config.blockAttributes = $.extend Trix.config.blockAttributes, {
     group: false
 }
 
+Trix.config.lang = $.extend Trix.config.lang, {
+  image: "Image"
+  heading1: "H1"
+  heading2: "H2"
+  heading3: "H3"
+  heading4: "H4"
+  heading5: "H5"
+  heading6: "H6"
+}
+
+Trix.config.toolbar =
+  getDefaultHTML: -> """
+    <div class="trix-button-row">
+      <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">
+        <button type="button" class="trix-button trix-button--text" data-trix-attribute="heading1" title="#{Trix.config.lang.heading1}" tabindex="-1">#{Trix.config.lang.heading1}</button>
+        <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>
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-code" data-trix-attribute="code" title="#{Trix.config.lang.code}" tabindex="-1">#{Trix.config.lang.code}</button>
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-bullet-list" data-trix-attribute="bullet" title="#{Trix.config.lang.bullets}" tabindex="-1">#{Trix.config.lang.bullets}</button>
+        <button type="button" class="trix-button trix-button--icon trix-button--icon-number-list" data-trix-attribute="number" title="#{Trix.config.lang.numbers}" tabindex="-1">#{Trix.config.lang.numbers}</button>
+        <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>
+    </div>
+    <div class="trix-dialogs" data-trix-dialogs>
+      <div class="trix-dialog trix-dialog--link" data-trix-dialog="href" data-trix-dialog-attribute="href">
+        <div class="trix-dialog__link-fields">
+          <input type="text" name="href" class="trix-input trix-input--dialog" placeholder="#{Trix.config.lang.urlPlaceholder}" aria-label="#{Trix.config.lang.url}" required data-trix-input>
+          <div class="trix-button-group">
+            <input type="button" class="trix-button trix-button--dialog" value="#{Trix.config.lang.link}" data-trix-method="setAttribute">
+            <input type="button" class="trix-button trix-button--dialog" value="#{Trix.config.lang.unlink}" data-trix-method="removeAttribute">
+          </div>
+        </div>
+      </div>
+    </div>
+  """
+
 class Spina.TrixAttachment
   @imageSelect: (e) ->
-    editor_id = $(this).closest('trix-toolbar').data('trix-editor-id')
-    $.get("<%= Spina::Engine.routes.url_helpers.admin_media_picker_path %>" + "?trix_editor_id=#{editor_id}")
+    toolbar_id = $(this).closest('trix-toolbar').attr('id')
+    $.get("<%= Spina::Engine.routes.url_helpers.admin_media_picker_path %>" + "?trix_toolbar_id=#{toolbar_id}")
 
-  @imageInsert: (e, url) ->
-    this.editor.insertHTML "<img src='#{ url }' />"
+  @imageInsert: (e, url, alt = "", link_to_url = "") ->
+    labels = []
+    labels.push "✍️ #{alt}" if alt != ""
+    labels.push "🔗 #{link_to_url}" if 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}' />
+      </a>"})
+    else
+      attachment = new Trix.Attachment({content: "<span class='trix-attachment-spina-image' data-label='#{label}'>
+        <img src='#{url}' alt='#{alt}' />
+      </span>"})
+
+    this.editor.insertAttachment(attachment)
 
 document.addEventListener 'trix-file-accept', (e) ->
   e.preventDefault()
 
-$(document).on 'click', '.js-trix-image', Spina.TrixAttachment.imageSelect
+$(document).on 'click', '[data-trix-attribute="image"]', Spina.TrixAttachment.imageSelect
 
 $(document).on 'image-insert', 'trix-editor', Spina.TrixAttachment.imageInsert
+
+$(document).on 'click', 'a.trix-attachment-spina-image', (e) ->
+  e.preventDefault() 

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

@@ -3,8 +3,8 @@ $.fn.uploadPhoto = ->
   $(this).fileupload
     dataType: "script"
     singleFileUploads: true
+    replaceFileInput: true
     dropZone: $(this).find('.photo-field')
-    # maxNumberOfFiles: 1
     add: (e, data) ->
       types = /(\.|\/)(gif|jpe?g|png)$/i
       file = data.files[0]

data/app/assets/stylesheets/spina.sass

@@ -1,4 +1,8 @@
 // Configuration
+@import font_awesome5_webfont
+@import font_awesome5
+@import spina/trix
+
 @import spina/configuration
 
 // Mixins
@@ -24,7 +28,7 @@
 @import spina/sortable_lists
 @import spina/gallery
 @import spina/login
-@import spina/trix
+@import spina/trix_custom
 @import spina/wizard
 @import spina/notifications
 
@@ -313,12 +317,12 @@ nav#secondary
     opacity: 1
 
   a.ui-datepicker-prev span
-    background: url(asset-path('spina/arrow-left.png')) no-repeat center
+    background: url(asset-path('spina/arrow-left.svg')) no-repeat center
     background-size: 10px 13px
     display: block
 
   a.ui-datepicker-next span
-    background: url(asset-path('spina/arrow-right.png')) no-repeat center
+    background: url(asset-path('spina/arrow-right.svg')) no-repeat center
     background-size: 10px 13px
     display: block
 
@@ -432,7 +436,7 @@ section#main
       color: #999
 
   .divider
-    background: url(asset-path('spina/divider.png'))
+    background: url(asset-path('spina/divider.svg'))
     color: #999
     display: inline-block
     height: 17px

data/app/assets/stylesheets/spina/_buttons.sass

@@ -1,6 +1,7 @@
 // Buttons
 
 button, input[type="submit"], input[type="button"]
+  background: none
   border: none
 
 .button

data/app/assets/stylesheets/spina/_forms.sass

@@ -460,7 +460,7 @@ fieldset
   color: #999
 
 input.datepicker
-  background: url(asset-path('spina/datepicker.png')) no-repeat center right
+  background: url(asset-path('spina/datepicker.svg')) no-repeat center right
 
 // Switch
 

data/app/assets/stylesheets/spina/_gallery.sass

@@ -8,6 +8,38 @@
       input[type="radio"], input[type="checkbox"]
         display: none
 
+.gallery-select-container
+  display: flex
+  width: 100%
+
+  .gallery-select
+    flex: 1
+    max-height: 100%
+    overflow: scroll
+
+  .gallery-select-sidebar
+    border-left: 1px solid #ddd
+    box-shadow: 0 0 15px rgba(0, 0, 0, .15)
+    margin: -20px -20px -20px 0
+    padding: 20px
+    width: 300px
+
+.gallery-select-sidebar form
+  display: flex
+  flex-direction: column
+  height: 100%
+  justify-content: space-between
+
+.gallery-select-action-bar
+  align-items: center
+  display: flex
+
+  .button
+    margin-bottom: 0
+
+  button
+    margin-right: 0
+
 .gallery
   margin: 20px 0
 
@@ -81,7 +113,7 @@
         line-height: 15px
         text-align: left
         transition: all 0.2s ease
-        transform: translateY(-100%)
+        opacity: 0
         padding: 10px
         position: absolute
         word-break: break-word
@@ -99,7 +131,7 @@
           transform: translateY(0%)
 
         .photo-name
-          transform: translateY(0%)
+          opacity: 1
 
     &.dropping:not(.media-folder)
       transform: scale(0.8)
@@ -110,7 +142,7 @@
     form
       height: 100%
 
-.gallery form .item .overlay a
+.gallery-select .item .overlay a
   display: none
 
 .gallery:after
@@ -119,7 +151,7 @@
   display: block
 
 .gallery-select
-  margin: -8px
+  margin: 0
 
   &.gallery-select-multiple
     padding-bottom: 70px
@@ -187,15 +219,16 @@
       opacity: .7
 
   .gallery-select-action-bar
+    align-items: center
     background: #fff
     border-top: 1px solid #e5e5e5
-    bottom: 0px
-    clear: both
-    margin: 0 -12px
-    padding: 12px
-    position: absolute
-    width: 100%
-    z-index: 3
+    display: flex
+    justify-content: flex-end
+    margin-top: 12px
+    padding: 12px 12px 0
+
+    .button
+      margin: 0 0 0 4px
 
 // Customfile
 
@@ -351,4 +384,4 @@
   height: 16px
   line-height: 16px
   margin-top: 6px
-  text-align: center
+  text-align: center