spina 1.1.1 → 2.0.0.alpha

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)

data/app/assets/stylesheets/spina.sass

@@ -1,6 +1,4 @@
 // Configuration
-@import font_awesome5_webfont
-@import font_awesome5
 @import spina/trix
 
 @import spina/configuration
@@ -31,6 +29,8 @@
 @import spina/trix_custom
 @import spina/wizard
 @import spina/notifications
+@import spina/pages
+@import spina/media_picker
 
 
 html
@@ -269,12 +269,12 @@ nav#secondary
     small
       display: block
       font-size: 12px
-      font-weight: 400
+      font-weight: 500
 
   &.permanent-notice-info
-    background: #eef6fe
-    border-color: #def
-    color: #12659b
+    background: lighten($primary-color-light, 33%)
+    border-color: lighten($primary-color-light, 28%)
+    color: $primary-color
 
     p
       color: inherit
@@ -429,7 +429,7 @@ section#main
     margin-left: 12px
     vertical-align: middle
 
-  a
+  & > a:not(.button)
     color: #999
 
     &:hover
@@ -447,9 +447,9 @@ section#main
 
 .well
   background: #fff
-  border: 1px solid #eee
-  border-radius: 3px
-  margin: 24px -20px
+  border-radius: 6px
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
+  margin: 24px -15px
   padding: 20px
 
   hr.divider

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

@@ -6,17 +6,17 @@ button, input[type="submit"], input[type="button"]
 
 .button
   background: #efefef
-  border-radius: 3px
+  border-radius: 6px
   color: #444
   display: inline-block
   font-size: 14px
-  font-weight: bold
-  line-height: 20px
+  font-weight: 600
+  line-height: 18px
   margin: 0 4px 4px 0
   outline: none
   padding: 8px 16px
   text-decoration: none
-  transition: all .3s ease
+  transition: all .2s ease
 
   &:hover
     background: shade(#efefef, 5%)
@@ -31,12 +31,34 @@ button, input[type="submit"], input[type="button"]
   &:focus
     outline: none
 
+  &.button-default
+    background: white
+    border: 1px solid #ddd
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
+
+    &:hover
+      background: #f5f5f5
+      border: 1px solid #ccc
+      box-shadow: 0 1px 2px rgba(0, 0, 0, .1)
+
+    &:active
+      background: #eee
+      border: 1px solid #c9c9c9
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1)
+
   &.button-primary
     background: $primary-color
+    border: 1px solid darken($primary-color, 5%)
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .1)
     color: #fff
 
     &:hover
-      background: shade($primary-color, 10%)
+      background: shade($primary-color, 15%)
+      box-shadow: 0 1px 1px rgba(0, 0, 0, .2)
+
+    &:active
+      background: shade($primary-color, 25%)
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .4)
 
     &.button-shaded:hover
       background: $primary-color
@@ -46,16 +68,23 @@ button, input[type="submit"], input[type="button"]
 
   &.button-success
     background: $success-color
+    border-color: $success-color
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .1)
     color: #fff
 
     &:hover
-      background: tint($success-color, 20%)
+      background: darken($success-color, 10%)
+      border-color: darken($success-color, 15%)
+      box-shadow: 0 1px 1px rgba(0, 0, 0, .2)
+
+    &:active
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .4)
 
     &.button-shaded:hover
       background: $success-color
 
     &:active, &.button-active, &.button-shaded, &.button-shaded:active
-      background: shade($success-color, 10%)
+      background: darken($success-color, 10%)
 
   &.button-danger
     color: $danger-color
@@ -64,6 +93,10 @@ button, input[type="submit"], input[type="button"]
     display: block
     text-align: center
 
+  &.button-white
+    background: white
+    border: 1px solid #ccc
+
   &.button-link
     background: none
     font-weight: 600
@@ -76,7 +109,6 @@ button, input[type="submit"], input[type="button"]
 
   i.icon
     margin-right: 8px
-    margin-top: -2px
 
   &.icon-only
     &:before, i.icon
@@ -86,18 +118,18 @@ button, input[type="submit"], input[type="button"]
     margin-right: 4px
 
   &.button-large
-    border-radius: 4px
+    border-radius: 6px
     padding: 11px 18px
 
     &:before
       margin-right: 10px
 
   &.button-small
-    font-size: 13px
+    font-size: 12px
     padding: 6px 12px
 
     i.icon
-      margin-right: 4px
+      margin-right: 6px
 
   &.button-mini
     font-size: 12px
@@ -126,6 +158,12 @@ button, input[type="submit"], input[type="button"]
     animation: rotate 3.0s linear infinite
     display: inline-block
 
+// Aligning button content
+.button-content
+  align-items: center
+  display: flex
+  justify-content: center
+
 @keyframes rotate
   from
     transform: rotate(0deg)
@@ -144,10 +182,13 @@ button, input[type="submit"], input[type="button"]
     margin-right: 0
 
   .button:first-child
-    border-radius: 3px 0 0 3px
+    border-top-left-radius: 3px
+    border-bottom-left-radius: 3px
 
   .button:last-child
-    border-radius: 0 3px 3px 0
+    border-left: none
+    border-top-right-radius: 3px
+    border-bottom-right-radius: 3px
 
   &:after
     clear: both
@@ -201,7 +242,7 @@ button, input[type="submit"], input[type="button"]
   ul, .sliding-dropdown
     background: #fff
     border: 1px solid #ccc
-    border-radius: 3px
+    border-radius: 6px
     box-shadow: 0 5px 20px rgba(0, 0, 0, .15)
     display: none
     list-style: none
@@ -323,35 +364,20 @@ button, input[type="submit"], input[type="button"]
   .slide
     display: none
     text-align: center
+    padding-bottom: 15px
 
     &.active
       display: block
 
     p
       color: #333
-      font-size: 14px
-      font-weight: 400
+      font-size: 13px
+      font-weight: 500
       margin: 16px
 
     p.muted
       color: #999
 
-    .button
-      border-top-left-radius: 0
-      border-top-right-radius: 0
-      margin: -1px
-      width: 300px
-
-      &.button-primary
-        background: lighten($primary-color, 40%)
-        border: 1px solid lighten($primary-color, 30%)
-        color: $primary-color
-
-        &:hover
-          background: $primary-color
-          border: 1px solid $primary-color
-          color: #fff
-
   .slide-dots
     margin: 12px
     text-align: center