Upgrade trix to 1.0, and use JS to configure it (#406)

* Upgrade trix to 1.0, and use JS to configure it * Use sprockets for loading fontawesome * Rename stuff so it works properly
SpinaCMS · Dec 14, 2018 · 559a7d6 · 559a7d6
1 parent cff033d
commit 559a7d6
Show file tree

Hide file tree

Showing 16 changed files with 655 additions and 175 deletions.
diff --git a/Gemfile b/Gemfile
@@ -1,4 +1,4 @@
-source "http://rubygems.org"
+source "https://rubygems.org"
 
 gemspec
 

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -6,6 +6,7 @@ PATH
       bcrypt
       breadcrumbs_on_rails
       coffee-rails
+      font_awesome5_rails
       haml-rails
       jquery-rails
       jsonb_accessor (>= 1.0.0)
@@ -18,7 +19,7 @@ PATH
       turbolinks (~> 5)
 
 GEM
-  remote: http://rubygems.org/
+  remote: https://rubygems.org/
   specs:
     actioncable (5.2.0)
       actionpack (= 5.2.0)
@@ -63,7 +64,7 @@ GEM
       tzinfo (~> 1.1)
     addressable (2.5.2)
       public_suffix (>= 2.0.2, < 4.0)
-    ancestry (3.0.2)
+    ancestry (3.0.5)
       activerecord (>= 3.2.0)
     ansi (1.5.0)
     arel (9.0.0)
@@ -91,6 +92,8 @@ GEM
     factory_bot (4.8.2)
       activesupport (>= 3.0.0)
     ffi (1.9.23)
+    font_awesome5_rails (0.4.3)
+      railties (>= 4.2, < 5.3)
     globalid (0.4.1)
       activesupport (>= 4.2.0)
     haml (5.0.4)
@@ -141,24 +144,24 @@ GEM
     loofah (2.2.2)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
-    mail (2.7.0)
+    mail (2.7.1)
       mini_mime (>= 0.1.1)
-    marcel (0.3.2)
+    marcel (0.3.3)
       mimemagic (~> 0.3.2)
     metaclass (0.0.4)
     method_source (0.9.0)
     mimemagic (0.3.2)
-    mini_magick (4.8.0)
-    mini_mime (1.0.0)
+    mini_magick (4.9.2)
+    mini_mime (1.0.1)
     mini_portile2 (2.3.0)
     minitest (5.11.3)
     minitest-reporters (1.2.0)
       ansi
       builder
       minitest (>= 5.0)
       ruby-progressbar
-    mobility (0.7.5)
-      i18n (>= 0.6.10, < 1.1)
+    mobility (0.8.7)
+      i18n (>= 0.6.10, < 2)
       request_store (~> 1.0)
     mocha (1.5.0)
       metaclass (~> 0.0.1)
@@ -205,17 +208,17 @@ GEM
       method_source
       rake (>= 0.8.7)
       thor (>= 0.18.1, < 2.0)
-    rake (12.3.1)
+    rake (12.3.2)
     rb-fsevent (0.10.3)
     rb-inotify (0.9.10)
       ffi (>= 0.5.0, < 2)
     request_store (1.4.1)
       rack (>= 1.4)
     ruby-progressbar (1.9.0)
     ruby_dep (1.5.0)
-    ruby_parser (3.11.0)
+    ruby_parser (3.12.0)
       sexp_processor (~> 4.9)
-    sass (3.5.6)
+    sass (3.7.2)
       sass-listen (~> 4.0.0)
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
@@ -232,20 +235,20 @@ GEM
       json (>= 1.8, < 3)
       simplecov-html (~> 0.10.0)
     simplecov-html (0.10.2)
-    sprockets (3.7.1)
+    sprockets (3.7.2)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
     sprockets-rails (3.2.1)
       actionpack (>= 4.0)
       activesupport (>= 4.0)
       sprockets (>= 3.0.0)
     temple (0.8.0)
-    thor (0.20.0)
+    thor (0.20.3)
     thread_safe (0.3.6)
-    tilt (2.0.8)
-    turbolinks (5.1.1)
-      turbolinks-source (~> 5.1)
-    turbolinks-source (5.1.0)
+    tilt (2.0.9)
+    turbolinks (5.2.0)
+      turbolinks-source (~> 5.2)
+    turbolinks-source (5.2.0)
     tzinfo (1.2.5)
       thread_safe (~> 0.1)
     websocket-driver (0.7.0)
@@ -270,4 +273,4 @@ DEPENDENCIES
   spina!
 
 BUNDLED WITH
-   1.16.1
+   1.17.2
diff --git a/app/assets/javascripts/spina/admin/application.js b/app/assets/javascripts/spina/admin/application.js
@@ -47,4 +47,4 @@
 
 // Scaffolding
 
-//= require ./scaffold
+//= require ./scaffold
diff --git a/app/assets/javascripts/spina/admin/controllers/infinite_scroll_controller.js b/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'))
       }
     }
-    
+
   })
 })()
diff --git a/app/assets/javascripts/spina/admin/trix.coffee.erb b/app/assets/javascripts/spina/admin/trix.coffee.erb
@@ -28,17 +28,72 @@ 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--media-tools" data-trix-button-group="media-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>
+      </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>
+        <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>
+      <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-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="url" 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 }' />"
 
 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
diff --git a/app/assets/stylesheets/spina.sass b/app/assets/stylesheets/spina.sass
@@ -1,4 +1,7 @@
 // Configuration
+//*=require font_awesome5_webfont
+@import spina/trix
+
 @import spina/configuration
 
 // Mixins
@@ -24,7 +27,7 @@
 @import spina/sortable_lists
 @import spina/gallery
 @import spina/login
-@import spina/trix
+@import spina/trix_custom
 @import spina/wizard
 @import spina/notifications
 

diff --git a/app/assets/stylesheets/spina/_trix.sass b/app/assets/stylesheets/spina/_trix.sass