RubyGems - spina - Versions diffs - 0.12.0 → 1.0.0 - Mend

spina 0.12.0 → 1.0.0

Potentially problematic release.

This version of spina might be problematic. Click here for more details.

Files changed (210) hide show

data/app/assets/fonts/spina/ics_spina.ttf CHANGED

Binary file

data/app/assets/fonts/spina/ics_spina.woff CHANGED

Binary file

data/app/assets/fonts/spina/ics_spina.woff2 ADDED

Binary file

data/app/assets/icons/spina/export.svg ADDED

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <title>Shape</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M256,16 L256,96 C256,104.836 248.837,112 240,112 C231.163,112 224,104.836 224,96 L224,54.628 L139.313,139.314 C136.189,142.438 132.093,144.001 128,144.001 C123.905,144.001 119.811,142.439 116.687,139.314 C110.438,133.066 110.438,122.935 116.687,116.687 L201.374,32 L160,32 C151.163,32 144,24.836 144,16 C144,7.164 151.163,0 160,0 L240,0 C248.837,0 256,7.164 256,16 Z M208,256 C216.837,256 224,248.836 224,240 L224,160 C224,151.164 216.837,144 208,144 C199.163,144 192,151.164 192,160 L192,224 L32,224 L32,64 L96,64 C104.837,64 112,56.836 112,48 C112,39.164 104.837,32 96,32 L16,32 C7.163,32 0,39.164 0,48 L0,240 C0,248.836 7.163,256 16,256 L208,256 Z" id="Shape" fill="#797C7C" fill-rule="nonzero"></path>
+    </g>
+</svg>

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

@@ -143,6 +143,7 @@
   font-family: "ics_spina";
   src: url("../../../fonts/spina/ics_spina.eot");
   src: url("../../../fonts/spina/ics_spina.eot?#iefix") format("embedded-opentype"),
+       url("../../../fonts/spina/ics_spina.woff2") format("woff2"),
        url("../../../fonts/spina/ics_spina.woff") format("woff"),
        url("../../../fonts/spina/ics_spina.ttf") format("truetype"),
        url("../../../fonts/spina/ics_spina.svg#ics_spina") format("svg");
@@ -185,6 +186,7 @@
 .icon-document:before,
 .icon-dots:before,
 .icon-exclamation:before,
+.icon-export:before,
 .icon-eye:before,
 .icon-filter:before,
 .icon-home:before,
@@ -256,6 +258,7 @@
 .icon-document:before { content: "\f116"; }
 .icon-dots:before { content: "\f117"; }
 .icon-exclamation:before { content: "\f118"; }
+.icon-export:before { content: "\f139"; }
 .icon-eye:before { content: "\f119"; }
 .icon-filter:before { content: "\f11a"; }
 .icon-home:before { content: "\f11b"; }
@@ -303,7 +306,7 @@
   <body class="characters-off">
     <div id="page" class="container">
       <header>
-        <h1>ics_spina contains 57 glyphs:</h1>
+        <h1>ics_spina contains 58 glyphs:</h1>
         <a onclick="toggleCharacters(); return false;" href="#">Toggle Preview Characters</a>
       </header>
@@ -633,6 +636,19 @@
         </div>
       </div>
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <span class="step size-12"><span class="letters">Pp</span><i id="icon-export" class="icon-export"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-export" class="icon-export"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-export" class="icon-export"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-export" class="icon-export"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-export" class="icon-export"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-export" class="icon-export"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-export" class="icon-export"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-export" class="icon-export"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-export" class="icon-export"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-export" class="icon-export"></i></span>
+        </div>
+        <div class="preview-scale">
+          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-export" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf139;" />
+        </div>
+      </div>
       <div class="glyph">
         <div class="preview-glyphs">
           <span class="step size-12"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="icon-eye" class="icon-eye"></i></span>

data/app/assets/images/spina/media_folder_placeholder.png ADDED

Binary file

data/app/assets/images/spina/{admin/spina.png → spina-large.png} RENAMED

File without changes

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

@@ -0,0 +1,50 @@
+// jQuery
+//= require jquery
+//= require jquery_ujs
+// Turbolinks
+//= require turbolinks
+// Stimulus
+//= require spina/stimulus.umd
+//= require_tree ./controllers
+// File Upload
+//= require activestorage
+//= require spina/jquery.customfileinput
+// jQuery Plugins
+//= require spina/jquery.ui
+//= require spina/jquery.nestable
+// Misc Plugins
+//= require spina/sortable
+//= require spina/trix
+// Spina's code
+//= require ./switch
+//= require ./modal
+//= require ./tabs
+//= require ./forms
+//= require ./dropdown
+//= require ./galleryselect
+//= require ./navigation
+//= require ./notifications
+//= require ./media_gallery
+//= require ./account
+//= require ./confirm_delete
+//= require ./pages
+//= require ./trix
+// Scaffolding
+//= require ./scaffold

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

@@ -0,0 +1,40 @@
+(() => {
+  const application = Stimulus.Application.start()
+  application.register("infinite-scroll", class extends Stimulus.Controller {
+    static get targets() {
+      return ["link"]
+    }
+    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').length > 0) {
+        // If the window scrolls
+        $(window).on('scroll.infiniteScroll', this.loadNextPage($link))
+        // If the overlay scrolls
+        $('#overlay section').on('scroll.infiniteScroll', function() {
+          $(window).trigger('scroll.infiniteScroll')
+        })
+        $(window).trigger('scroll.infiniteScroll')
+      }
+    }
+    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'))
+      }
+    }
+  })
+})()

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

@@ -0,0 +1,65 @@
+$(document).on 'direct-uploads:start', 'form', (e) ->
+  $(this).find('.customfile').addClass('loading')
+$(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()
+$(document).on 'click', '.organize-switch', (e) ->
+  $items = $('.gallery .infinite-scroll .item')
+  disabled = $items.draggable('option', 'disabled')
+  if disabled
+    $(this).addClass('button-success')
+    $(this).text($(this).attr('data-done-organizing'))
+    $(this).prepend('<i class="icon icon-random"></i>')
+  else
+    $(this).removeClass('button-success')
+    $(this).text($(this).attr('data-organize-images'))
+    $(this).prepend('<i class="icon icon-random"></i>')
+  $items.draggable('option', 'disabled', !disabled)
+  e.preventDefault()
+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()
+      $.ajax
+        url: url,
+        type: 'PUT',
+        data: {
+          image_id: image_id
+        },
+        dataType: 'json',
+        success: (result) =>
+          $(ui.draggable).addClass('dropped').fadeOut()
+          imageCount = parseInt($(this).find('.media-folder-thumbnail').attr('data-badge'))
+          imgSrc = $(ui.draggable).find('img').attr('src')
+          $(this).removeClass('dropping')
+          $(this).find('.media-folder-thumbnail').attr('data-badge', imageCount + 1)
+          $(this).find('.media-folder-thumbnail img').attr('src', imgSrc)
+    over: (event, ui) ->
+      $(ui.draggable).addClass('dropping')
+      $(this).addClass('dropping')
+    out: (event, ui) ->
+      $(ui.draggable).removeClass('dropping')
+      $(this).removeClass('dropping')
+  )
+  $('.gallery .infinite-scroll .item').draggable(
+    revert: 'invalid',
+    disabled: true
+  )
+$(document).on 'turbolinks:load', ready

data/app/assets/javascripts/spina/admin/modal.coffee CHANGED

@@ -48,7 +48,6 @@ showModal = (element) ->
   modal.show()
   modal.find('input[type="file"][data-customfileinput]').customFileInput()
-  modal.find('.new_photo').uploadPhoto()
   $('body').addClass('overlay')
   return false

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

@@ -10,8 +10,8 @@ ready = ->
   $('.sortable-grid').sortable().bind 'sortupdate', (e) ->
     position_array = []
     $(e.target).find('li.image').each (index) ->
-      position_array.push $(this).data('photo-id')
-    $(e.target).parents('.horizontal-form-content').find('.photo-positions').val(position_array.join(","))
+      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) ->

data/app/assets/javascripts/spina/admin/{application.coffee.erb → scaffold.coffee} RENAMED

@@ -1,45 +1,5 @@
-# jQuery
-#= require jquery
-#= require jquery_ujs
-# Turbolinks
-#= require turbolinks
-# jQuery plugins
-#= require spina/jquery.ui
-#= require spina/jquery.nestable
-#= require spina/jquery.customfileinput
-#= require jquery-fileupload/basic
-# Misc plugins
-#= require spina/sortable
-#= require spina/trix
-# Own code
-#= require ./switch
-#= require ./modal
-#= require ./tabs
-#= require ./forms
-#= require ./dropdown
-#= require ./galleryselect
-#= require ./uploads
-#= require ./navigation
-#= require ./notifications
-#= require ./account
-#= require ./confirm_delete
-#= require ./pages
-#= require ./trix
-#= require ./infinite_scroll
 # Scaffold
-$(document).on 'click', '.table-clickable tbody tr', (e) ->
+$(document).on 'click', '.table-clickable tr', (e) ->
   $row = $(this).closest('tr')
   link = $row.find('a.table-link:first')[0]
   if link
@@ -48,20 +8,27 @@ $(document).on 'click', '.table-clickable tbody tr', (e) ->
     checkbox = $(this).find('input[type="checkbox"]:first, input[type="radio"]:first')
     if checkbox.length > 0
-      checkbox.prop("checked", !checkbox.prop("checked"))
-      e.stopPropagation()
-$(document).on 'click', '.table-clickable tbody tr td', (e) ->
-  checkbox = $(this).find('input[type="checkbox"]:first, input[type="radio"]:first')
+      # Get shifty
+      if !checkbox.prop("checked") && e.shiftKey
+        $firstRow = $('.table-clickable tr input[type="checkbox"]:checked:first').closest('tr')
+        if $firstRow.index() < $row.index()
+          $firstRow.nextUntil($row).each ->
+            $(this).find('input[type="checkbox"]:first').prop("checked", true)
+        else
+          $firstRow.prevUntil($row).each ->
+            $(this).find('input[type="checkbox"]:first').prop("checked", true)
+        document.getSelection().removeAllRanges()
-  if checkbox.length > 0
-    checkbox.prop("checked", !checkbox.prop("checked"))
-    e.stopPropagation()
+      checkbox.prop("checked", !checkbox.prop("checked"))
+      checkbox.trigger('checked')
+      e.stopPropagation()
-$(document).on 'click', '.table-clickable tbody .table-link', (e) ->
+$(document).on 'click', '.table-clickable .table-link', (e) ->
   e.stopPropagation()
-$(document).on 'click', '.table-clickable tbody tr input', (e) ->
+$(document).on 'click', '.table-clickable tr input', (e) ->
   e.stopPropagation()
 # Search inputs
@@ -92,8 +59,6 @@ $(document).on 'change', '.dd', ->
   sort_url = $(this).data('sort-url')
   $.post sort_url, { list: serialized }
-# Datatables
 ready = ->
   # Set paddingTop for section#main
@@ -101,19 +66,13 @@ ready = ->
     headerHeight = header.getBoundingClientRect().height
     $('section#main').css({paddingTop: headerHeight})
+  # Login wrapper
+  $('#login_wrapper').css('margin-top', $(document).innerHeight() / 8)
   # Custom file
   $('input[type="file"][data-customfileinput]:visible').each ->
     $(this).customFileInput()
-  # Image upload
-  $('.new_photo').uploadPhoto()
-  # Document upload
-  $('.new_document').uploadDocument()
-  # Login wrapper
-  $('#login_wrapper').css('margin-top', $(document).innerHeight() / 8)
   $(".structure-form-menu ul").sortable
     handle: '.sortable-handle'

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

@@ -29,19 +29,16 @@ Trix.config.blockAttributes = $.extend Trix.config.blockAttributes, {
 }
 class Spina.TrixAttachment
-  @photoSelect: (e) ->
-    console.log 'hi'
+  @imageSelect: (e) ->
     editor_id = $(this).closest('trix-toolbar').data('trix-editor-id')
-    $.get("<%= Spina::Engine.routes.url_helpers.trix_select_admin_photos_path('') %>/#{editor_id}")
+    $.get("<%= Spina::Engine.routes.url_helpers.admin_media_picker_path %>" + "?trix_editor_id=#{editor_id}")
-  @photoInsert: (e, url) ->
-    length = this.editor.getDocument().toString().length
-    this.editor.setSelectedRange(length - 1)
+  @imageInsert: (e, url) ->
     this.editor.insertHTML "<img src='#{ url }' />"
 document.addEventListener 'trix-file-accept', (e) ->
   e.preventDefault()
-$(document).on 'click', '.js-trix-photo', Spina.TrixAttachment.photoSelect
+$(document).on 'click', '.js-trix-image', Spina.TrixAttachment.imageSelect
-$(document).on 'photo-insert', 'trix-editor', Spina.TrixAttachment.photoInsert
+$(document).on 'image-insert', 'trix-editor', Spina.TrixAttachment.imageInsert

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

@@ -12,7 +12,7 @@ $.fn.uploadPhoto = ->
         $(this).find('.customfile').addClass('loading')
         data.submit()
       else
-        alert("#{file.name} is geen gif-, jpeg- of png-bestand")
+        alert("#{file.name} is not gif-, jpeg- or png- file")
     done: (e, data) ->
       $(this).find('.customfile').removeClass('loading')
@@ -30,6 +30,6 @@ $.fn.uploadDocument = ->
         $(this).find('.customfile').addClass('loading')
         data.submit()
       else
-        alert("#{file.name} is geen pdf-, word-, txt- of rtf-bestand")
+        alert("#{file.name} is not pdf-, word-, txt- or rtf- file")
     done: (e, data) ->
       $(this).find('.customfile').removeClass('loading')

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

@@ -47,7 +47,7 @@ body
 // Primary navigation
 nav#primary
-  background: linear-gradient(#3b3f74, #7a76ad)
+  background: linear-gradient($primary-color-dark, $primary-color-light)
   height: 100%
   overflow: hidden
   position: fixed
@@ -100,7 +100,7 @@ nav#primary
     opacity: 1
   ul li ul
-    background: linear-gradient(#3b3f74, #7a76ad)
+    background: linear-gradient($primary-color-dark, $primary-color-light)
     bottom: 0
     left: 80px
     padding-top: 20px
@@ -132,7 +132,7 @@ nav#primary
   ul li ul li[data-badge]:after
     background: rgba(255, 255, 255, .4)
     border-radius: 9px
-    color: #3b3f74
+    color: $primary-color-dark
     content: attr(data-badge)
     display: block
     font-size: 12px

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

@@ -26,7 +26,6 @@ button, input[type="submit"], input[type="button"]
   &:active, &.button-active, &.button-shaded, &.button-shaded:active
     background: shade(#efefef, 10%)
-    transform: scale(0.95)
   &:focus
     outline: none

data/app/assets/stylesheets/spina/{_configuration.sass → _configuration.sass.erb} RENAMED

@@ -1,4 +1,8 @@
-$primary-color: #6865b4
+// Configuration
+$primary-color: <%= Spina.config.primary_color ? Spina.config.primary_color : '#6865b4' %>
+$primary-color-dark: darken($primary-color, 21.4)
+$primary-color-light: lighten($primary-color, 5.5)
 $success-color: #80b867
 $danger-color: #da3939
 $info-color: #17577c