effective_bootstrap 0.9.21 → 0.9.26

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d047c5108e24b36af0b9269cea370b61afaae229174b8b3febf59c95fdca14f7
-  data.tar.gz: 75f25ac6d8dc18e6f4b4462a6eb16b237c4aa6898d19c2686348241b8337da0d
+  metadata.gz: e42c10612075097b95b71535673810ecdb5b56acd8e75a81c338085387979d72
+  data.tar.gz: 2a95a8dde9b9adf39323776422ac2e6f5c5cd9bbb7873f42b9c6ea964c619273
 SHA512:
-  metadata.gz: '09531a9a125e7d7aebec11aa7fe41ef563ccc5f1777dc04cb02603ec8edb0d3384ba86d5f3c79aefe5d64b45a72dd4ded0c098fe6593c4347f080c8faaca237f'
-  data.tar.gz: 349e700ff1f0324dd51f81ecb134774720f0de7197d0c1da4684388a67314828c4a211e903a26b279e8adb25b451629632123ac12204a51380738c7f0dac7a67
+  metadata.gz: a9decc8c9546fe8e0b619ced1ae5b9d6ebcd255ab457b027eb45e8121fd00989c67ed53827c066a969b4db4ccf6f4d54553aaffdfc209ed4ee71d8e5af7dd07f
+  data.tar.gz: 773daa93f0f5fb230ad731bad85b561c948ac8b2c3b48335706f334dc4d3f227a42aff19292a1da2fd761537761f50479fd9a94ff1b1868fe9dc6d7acb46e92a

data/app/assets/javascripts/effective_bootstrap.js

@@ -23,5 +23,6 @@
 //= require ./effective_phone/input
 //= require ./effective_price/input
 //= require ./effective_radio/input
+//= require ./effective_rich_text_area/input
 //= require ./effective_select/input
 //= require ./effective_select_or_text/input

data/app/assets/javascripts/effective_bootstrap/form.js.coffee

@@ -4,6 +4,7 @@ this.EffectiveForm ||= new class
   remote_form_commit: ''              # String containing the last params[:commit]
   remote_form_payload: ''             # String containing html from server side render of this form
   remote_form_flash: ''               # Array of Arrays
+  remote_form_redirect: ''            # String containing the redirect path (optional)
 
   validate: (form) ->
     valid = form.checkValidity()
@@ -73,6 +74,11 @@ this.EffectiveForm ||= new class
     $target = $target.closest('form') unless $target.is('form')
     $form = ''
 
+    if @remote_form_redirect.length > 0
+      window.location.href = @remote_form_redirect
+      @remote_form_redirect = ''
+      return
+
     if @remote_form_payload.length > 0
       $payload = $("<div>#{@remote_form_payload}</div>")
       $form = $payload.find("form[data-remote-index='#{$target.data('remote-index')}']")
@@ -160,7 +166,7 @@ this.EffectiveForm ||= new class
 # This displays the spinner here, and directs any flash messages before and after loadRemoteForm
 $(document).on 'click', '.form-actions a[data-remote],.form-actions button[type=submit]', (event) ->
   EffectiveForm.setCurrentSubmit($(@).parent())
-  EffectiveForm.spin()
+  EffectiveForm.spin() unless $(@).attr('data-confirm')
 
 # This actually attached the handlers to a remote ajax form when it or an action inside it triggers a remote thing.
 $(document).on 'ajax:beforeSend', 'form[data-remote]', (event) ->

data/app/assets/javascripts/effective_bootstrap/tabs.js

@@ -12,3 +12,10 @@ $(document).ready(function() {
     }
   }
 });
+
+$(document).on('click', '[data-click-tab]', function(event) {
+  event.preventDefault();
+
+  var href = $(event.currentTarget).attr('href');
+  $('.nav.nav-tabs').find("a[href^='" + href + "']").tab('show');
+});

data/app/assets/javascripts/effective_rich_text_area/extensions.js

@@ -0,0 +1,171 @@
+// https://github.com/lazaronixon/trix-extensions/blob/master/app/javascript/richtext.js
+
+if(window.Trix) {
+
+  addHeadingAttributes()
+  addForegroundColorAttributes()
+  addBackgroundColorAttributes()
+
+  addEventListener('trix-initialize', function (event) { new RichText(event.target) })
+
+  addEventListener('trix-action-invoke', function (event) {
+    if (event.actionName == 'x-horizontal-rule') insertHorizontalRule()
+
+    function insertHorizontalRule() {
+      event.target.editor.insertAttachment(buildHorizontalRule())
+    }
+
+    function buildHorizontalRule() {
+      return new Trix.Attachment({ content: '<hr>', contentType: 'vnd.rubyonrails.horizontal-rule.html' })
+    }
+  })
+
+  class RichText {
+    constructor(element) {
+      this.element = element
+
+      this.insertHeadingElements()
+      this.insertDividerElements()
+      this.insertColorElements()
+    }
+
+    insertHeadingElements() {
+      this.removeOriginalHeadingButton()
+      this.insertNewHeadingButton()
+      this.insertHeadingDialog()
+    }
+
+    removeOriginalHeadingButton() {
+      this.buttonGroupBlockTools.removeChild(this.originalHeadingButton)
+    }
+
+    insertNewHeadingButton() {
+      this.buttonGroupBlockTools.insertAdjacentHTML("afterbegin", this.headingButtonTemplate)
+    }
+
+    insertHeadingDialog() {
+      this.dialogsElement.insertAdjacentHTML("beforeend", this.dialogHeadingTemplate)
+    }
+
+    insertDividerElements() {
+      this.quoteButton.insertAdjacentHTML("afterend", this.horizontalButtonTemplate)
+    }
+
+    insertColorElements() {
+      this.insertColorButton()
+      this.insertDialogColor()
+    }
+
+    insertColorButton() {
+      this.buttonGroupTextTools.insertAdjacentHTML("beforeend", this.colorButtonTemplate)
+    }
+
+    insertDialogColor() {
+      this.dialogsElement.insertAdjacentHTML("beforeend", this.dialogColorTemplate)
+    }
+
+    get buttonGroupBlockTools() {
+      return this.toolbarElement.querySelector("[data-trix-button-group=block-tools]")
+    }
+
+    get buttonGroupTextTools() {
+      return this.toolbarElement.querySelector("[data-trix-button-group=text-tools]")
+    }
+
+    get dialogsElement() {
+      return this.toolbarElement.querySelector("[data-trix-dialogs]")
+    }
+
+    get originalHeadingButton() {
+      return this.toolbarElement.querySelector("[data-trix-attribute=heading1]")
+    }
+
+    get quoteButton() {
+      return this.toolbarElement.querySelector("[data-trix-attribute=quote]")
+    }
+
+    get toolbarElement() {
+      return this.element.toolbarElement
+    }
+
+    get horizontalButtonTemplate() {
+      return '<button type="button" class="trix-button trix-button--icon trix-button--icon-horizontal-rule" data-trix-action="x-horizontal-rule" tabindex="-1" title="Divider">Divider</button>'
+    }
+
+    get headingButtonTemplate() {
+      return '<button type="button" class="trix-button trix-button--icon trix-button--icon-heading-1" data-trix-action="x-heading" title="Heading" tabindex="-1">Heading</button>'
+    }
+
+    get colorButtonTemplate() {
+      return '<button type="button" class="trix-button trix-button--icon trix-button--icon-color" data-trix-action="x-color" title="Color" tabindex="-1">Color</button>'
+    }
+
+    get dialogHeadingTemplate() {
+      return `
+        <div class="trix-dialog trix-dialog--heading" data-trix-dialog="x-heading" data-trix-dialog-attribute="x-heading">
+          <div class="trix-dialog__link-fields">
+            <input type="text" name="x-heading" class="trix-dialog-hidden__input" data-trix-input>
+            <div class="trix-button-group">
+              <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="heading1">H1</button>
+              <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="heading2">H2</button>
+              <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="heading3">H3</button>
+              <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="heading4">H4</button>
+              <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="heading5">H5</button>
+            </div>
+          </div>
+        </div>
+      `
+    }
+
+    get dialogColorTemplate() {
+      return `
+        <div class="trix-dialog trix-dialog--color" data-trix-dialog="x-color" data-trix-dialog-attribute="x-color">
+          <div class="trix-dialog__link-fields">
+            <input type="text" name="x-color" class="trix-dialog-hidden__input" data-trix-input>
+            <div class="trix-button-group">
+              <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="fgColor1" data-trix-method="hideDialog"></button>
+              <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="fgColor2" data-trix-method="hideDialog"></button>
+              <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="fgColor3" data-trix-method="hideDialog"></button>
+              <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="fgColor4" data-trix-method="hideDialog"></button>
+              <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="fgColor5" data-trix-method="hideDialog"></button>
+              <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="fgColor6" data-trix-method="hideDialog"></button>
+              <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="fgColor7" data-trix-method="hideDialog"></button>
+              <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="fgColor8" data-trix-method="hideDialog"></button>
+              <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="fgColor9" data-trix-method="hideDialog"></button>
+            </div>
+            <div class="trix-button-group">
+              <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="bgColor1" data-trix-method="hideDialog"></button>
+              <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="bgColor2" data-trix-method="hideDialog"></button>
+              <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="bgColor3" data-trix-method="hideDialog"></button>
+              <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="bgColor4" data-trix-method="hideDialog"></button>
+              <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="bgColor5" data-trix-method="hideDialog"></button>
+              <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="bgColor6" data-trix-method="hideDialog"></button>
+              <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="bgColor7" data-trix-method="hideDialog"></button>
+              <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="bgColor8" data-trix-method="hideDialog"></button>
+              <button type="button" class="trix-button trix-button--dialog" data-trix-attribute="bgColor9" data-trix-method="hideDialog"></button>
+            </div>
+          </div>
+        </div>
+      `
+    }
+  }
+
+  function addHeadingAttributes() {
+    Array.from(["h1", "h2", "h3", "h4", "h5"]).forEach((tagName, i) => {
+      Trix.config.blockAttributes[`heading${(i + 1)}`] = { tagName: tagName, terminal: true, breakOnReturn: true, group: false }
+    })
+  }
+
+  function addForegroundColorAttributes() {
+    Array.from(["rgb(136, 118, 38)", "rgb(185, 94, 6)", "rgb(207, 0, 0)", "rgb(216, 28, 170)", "rgb(144, 19, 254)", "rgb(5, 98, 185)", "rgb(17, 138, 15)", "rgb(148, 82, 22)", "rgb(102, 102, 102)"]).forEach((color, i) => {
+      Trix.config.textAttributes[`fgColor${(i + 1)}`] = { style: { color: color }, inheritable: true, parser: e => e.style.color == color }
+    })
+  }
+
+  function addBackgroundColorAttributes() {
+    Array.from(["rgb(250, 247, 133)", "rgb(255, 240, 219)", "rgb(255, 229, 229)", "rgb(255, 228, 247)", "rgb(242, 237, 255)", "rgb(225, 239, 252)", "rgb(228, 248, 226)", "rgb(238, 226, 215)", "rgb(242, 242, 242)"]).forEach((color, i) => {
+      Trix.config.textAttributes[`bgColor${(i + 1)}`] = { style: { backgroundColor: color }, inheritable: true, parser: e => e.style.backgroundColor == color }
+    })
+  }
+
+}

data/app/assets/javascripts/effective_rich_text_area/initialize.js

@@ -0,0 +1,20 @@
+if(window.Trix) {
+
+  window.Trix.config.blockAttributes.default.tagName = 'p';
+  window.Trix.config.blockAttributes.default.breakOnReturn = true;
+
+  window.Trix.Block.prototype.breaksOnReturn = function() {
+    const attr = this.getLastAttribute();
+    const config = Trix.getBlockConfig(attr ? attr : 'default');
+    return config ? config.breakOnReturn : false;
+  };
+
+  window.Trix.LineBreakInsertion.prototype.shouldInsertBlockBreak = function() {
+    if(this.block.hasAttributes() && this.block.isListItem() && !this.block.isEmpty()) {
+      return this.startLocation.offset > 0
+    } else {
+      return !this.shouldBreakFormattedBlock() ? this.breaksOnReturn : false;
+    }
+  };
+
+}

data/app/assets/javascripts/effective_rich_text_area/input.js

@@ -0,0 +1,2 @@
+//= require ./initialize
+//= require ./extensions

data/app/assets/stylesheets/effective_rich_text_area/extensions.scss

@@ -0,0 +1,78 @@
+trix-toolbar {
+  // http://www.asiteaboutnothing.net/c_decode-url.html
+  // background-image: url("data:image/svg+xml,***encoded data***");
+
+  .trix-button--icon-horizontal-rule::before { background-image: url("data:image/svg+xml,%3Csvg%20enable-background%3D%22new%200%200%2024%2024%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22m0%2013h24v-2h-24z%22%2F%3E%3Cpath%20d%3D%22m5%208.5h14v-3h-14z%22%2F%3E%3Cpath%20d%3D%22m5%2018.5h14v-3h-14z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
+  .trix-button--icon-color::before { background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m16.56%2011.94-8.94-8.94-1.41%201.41%202.38%202.38-5.15%205.15c-.59.59-.59%201.54%200%202.12l5.5%205.5c.29.29.68.44%201.06.44s.77-.15%201.06-.44l5.5-5.5c.59-.58.59-1.53%200-2.12zm-11.35%201.06%204.79-4.79%204.79%204.79zm13.79%202.5s-2%202.17-2%203.5c0%201.1.9%202%202%202s2-.9%202-2c0-1.33-2-3.5-2-3.5z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E%0A"); }
+
+  .trix-dialog--heading { max-width: 160px; }
+
+  .trix-dialog--color {
+    max-width: 265px;
+
+    .trix-dialog__link-fields { flex-direction: column; }
+
+    .trix-button-group {
+      margin: 1px;
+
+      button {
+        width: 28px;
+        &:after { content: "Ab"; }
+        &.trix-active::after { content: "✓"; }
+      }
+
+      [data-trix-attribute=fgColor1] { color: rgb(136, 118, 38) }
+      [data-trix-attribute=fgColor2] { color: rgb(136, 118, 38) }
+      [data-trix-attribute=fgColor3] { color: rgb(207, 0, 0) }
+      [data-trix-attribute=fgColor4] { color: rgb(216, 28, 170) }
+      [data-trix-attribute=fgColor5] { color: rgb(144, 19, 254) }
+      [data-trix-attribute=fgColor6] { color: rgb(5, 98, 185) }
+      [data-trix-attribute=fgColor7] { color: rgb(17, 138, 15) }
+      [data-trix-attribute=fgColor8] { color: rgb(148, 82, 22) }
+      [data-trix-attribute=fgColor9] { color: rgb(102, 102, 102) }
+
+      [data-trix-attribute=bgColor1] { background-color: rgb(250, 247, 133) }
+      [data-trix-attribute=bgColor2] { background-color: rgb(255, 240, 219) }
+      [data-trix-attribute=bgColor3] { background-color: rgb(255, 229, 229) }
+      [data-trix-attribute=bgColor4] { background-color: rgb(255, 228, 247) }
+      [data-trix-attribute=bgColor5] { background-color: rgb(242, 237, 255) }
+      [data-trix-attribute=bgColor6] { background-color: rgb(225, 239, 252) }
+      [data-trix-attribute=bgColor7] { background-color: rgb(228, 248, 226) }
+      [data-trix-attribute=bgColor8] { background-color: rgb(238, 226, 215) }
+      [data-trix-attribute=bgColor9] { background-color: rgb(242, 242, 242) }
+    }
+  }
+
+  .trix-dialog {
+    padding: 5px;
+
+    .trix-dialog-hidden__input {
+      position: absolute;
+      z-index: -1;
+      opacity: 0;
+    }
+  }
+}
+
+trix-editor {
+  [data-trix-mutable].attachment[data-trix-content-type~="vnd.rubyonrails.horizontal-rule.html"] {
+    box-shadow: 0 0 0 2px highlight;
+  }
+}
+
+.trix-content {
+  .attachment { max-width: 100%; }
+
+  .attachment--content.attachment--horizontal-rule,
+  .attachment--content[data-trix-content-type~='vnd.rubyonrails.horizontal-rule.html'] {
+    padding: 1.5em 0 0.5em !important;
+    margin-bottom: 0.5em
+  }
+
+  .attachment--content.attachment--horizontal-rule hr,
+  .attachment--content[data-trix-content-type~='vnd.rubyonrails.horizontal-rule.html'] hr {
+    margin: 0;
+    width: 20%;
+    border-color: currentColor
+  }
+}

data/app/assets/stylesheets/effective_rich_text_area/input.scss

@@ -1,25 +1,2 @@
-.effective_rich_text_area {
-  height: 100%;
-  border-color: #ccc;
-
-  &:hover,
-  &:active,
-  &:focus, {
-    border-color: #ccc;
-    outline: 0px !important;
-    -webkit-appearance: none;
-    box-shadow: none !important;
-  }
-}
-
-// Bootstrap 4 Feedback client side
-.was-validated .form-control:invalid ~ .trix-content, { border-color: #dc3545 !important; }
-.was-validated .form-control:valid ~ .trix-content { border-color: #28a745 !important; }
-.was-validated .form-control:invalid ~ trix-toolbar, { border-color: #dc3545 !important; }
-.was-validated .form-control:valid ~ trix-toolbar { border-color: #28a745 !important; }
-
-// Bootstrap 4 Server side feedback
-.form-control.is-invalid ~ .trix-content { border-color: #dc3545 !important; }
-.form-control.is-invalid ~ trix-toolbar { border-color: #dc3545 !important; }
-.form-control.is-valid ~ .trix-content { border-color: #28a745 !important; }
-.form-control.is-valid ~ trix-toolbar { border-color: #28a745 !important; }
+@import 'rich_text_area';
+@import 'extensions';

data/app/assets/stylesheets/effective_rich_text_area/rich_text_area.scss

@@ -0,0 +1,25 @@
+.effective_rich_text_area {
+  height: 100%;
+  border-color: #ccc;
+
+  &:hover,
+  &:active,
+  &:focus, {
+    border-color: #ccc;
+    outline: 0px !important;
+    -webkit-appearance: none;
+    box-shadow: none !important;
+  }
+}
+
+// Bootstrap 4 Feedback client side
+.was-validated .form-control:invalid ~ .trix-content, { border-color: #dc3545 !important; }
+.was-validated .form-control:valid ~ .trix-content { border-color: #28a745 !important; }
+.was-validated .form-control:invalid ~ trix-toolbar, { border-color: #dc3545 !important; }
+.was-validated .form-control:valid ~ trix-toolbar { border-color: #28a745 !important; }
+
+// Bootstrap 4 Server side feedback
+.form-control.is-invalid ~ .trix-content { border-color: #dc3545 !important; }
+.form-control.is-invalid ~ trix-toolbar { border-color: #dc3545 !important; }
+.form-control.is-valid ~ .trix-content { border-color: #28a745 !important; }
+.form-control.is-valid ~ trix-toolbar { border-color: #28a745 !important; }

data/app/views/action_text/attachables/_content_attachment.html.erb

@@ -0,0 +1,3 @@
+<figure class="attachment attachment--content attachment--<%= content_attachment.name %>">
+  <%= render "action_text/attachables/content_attachments/#{content_attachment.name.underscore}" %>
+</figure>

data/app/views/action_text/attachables/content_attachments/_horizontal_rule.html.erb

@@ -0,0 +1 @@
+<hr>

data/lib/effective_bootstrap/engine.rb

@@ -11,5 +11,11 @@ module EffectiveBootstrap
       app.config.assets.precompile += ['effective_bootstrap_manifest.js', 'icons/*']
     end
 
+    initializer 'effective_bootstrap.action_text' do |app|
+      if defined?(ActionText)
+        ActionText::ContentHelper.allowed_attributes << 'style'
+      end
+    end
+
   end
 end

data/lib/effective_bootstrap/version.rb

@@ -1,3 +1,3 @@
 module EffectiveBootstrap
-  VERSION = '0.9.21'.freeze
+  VERSION = '0.9.26'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: effective_bootstrap
 version: !ruby/object:Gem::Version
-  version: 0.9.21
+  version: 0.9.26
 platform: ruby
 authors:
 - Code and Effect
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-04-06 00:00:00.000000000 Z
+date: 2021-04-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -81,7 +81,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
-  name: sass
+  name: sassc
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -451,6 +451,9 @@ files:
 - app/assets/javascripts/effective_price/input.js
 - app/assets/javascripts/effective_radio/initialize.js.coffee
 - app/assets/javascripts/effective_radio/input.js
+- app/assets/javascripts/effective_rich_text_area/extensions.js
+- app/assets/javascripts/effective_rich_text_area/initialize.js
+- app/assets/javascripts/effective_rich_text_area/input.js
 - app/assets/javascripts/effective_select/initialize.js.coffee
 - app/assets/javascripts/effective_select/input.js
 - app/assets/javascripts/effective_select/overrides.js.coffee
@@ -605,7 +608,9 @@ files:
 - app/assets/stylesheets/effective_file/input.scss
 - app/assets/stylesheets/effective_has_many/input.scss
 - app/assets/stylesheets/effective_radio/input.scss
+- app/assets/stylesheets/effective_rich_text_area/extensions.scss
 - app/assets/stylesheets/effective_rich_text_area/input.scss
+- app/assets/stylesheets/effective_rich_text_area/rich_text_area.scss
 - app/assets/stylesheets/effective_select/bootstrap-theme.css
 - app/assets/stylesheets/effective_select/input.scss
 - app/assets/stylesheets/effective_select/overrides.scss
@@ -660,6 +665,8 @@ files:
 - app/models/effective/form_logics/hide_if.rb
 - app/models/effective/form_logics/show_if.rb
 - app/models/effective/form_logics/show_if_any.rb
+- app/views/action_text/attachables/_content_attachment.html.erb
+- app/views/action_text/attachables/content_attachments/_horizontal_rule.html.erb
 - app/views/effective/style_guide/__fields.html.haml
 - app/views/effective/style_guide/__inline_fields.html.haml
 - app/views/effective/style_guide/_effective_form_with.html.haml