effective_bootstrap 0.9.23 → 0.9.28

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_has_many/input.scss

@@ -1,42 +1,17 @@
-body.dragging,
-body.dragging * {
-  cursor: move !important;
-}
-
 .form-has-many {
-  .has-many-placeholder {
-    position: relative;
-    height: 2rem;
-
-    &:before {
-      position: absolute;
-      content: '';
-      background-image: asset-data-url('icons/arrow-right-circle.svg');
-      background-repeat: no-repeat;
-      height: 2rem;
-      width: 2rem;
-    }
-  }
-
-  .has-many-fields.dragged {
-    position: absolute;
-    opacity: 0;
-    z-index: 2000;
-    .has-many-move { display: none; }
-  }
-
-  .has-many-move svg { margin-top: 6px; }
+  .has-many-fields.sortable-ghost { border-top: solid 3px #212529; }
   .has-many-move { display: none; }
+  .has-many-remove-disabled { opacity: 0; cursor: default !important; }
 
-  .has-many-remove { margin-top: 1.5rem; }
+  .has-many-remove { margin-top: 1rem; }
   .has-many-move { margin-top: 1.5rem; }
 }
 
 .form-has-many.reordering {
-  .has-many-move { display: inline-block; }
+  .has-many-move { display: inline-block; cursor: grab; }
 }
 
 .form-has-many.tight {
   .has-many-remove { margin-top: 0; }
-  .has-many-move { margin-top: 0; }
+  .has-many-move { margin-top: 0.5rem; }
 }

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/models/effective/form_inputs/has_many.rb

@@ -7,8 +7,9 @@ module Effective
         object.send(name).build() if build? && collection.blank?
 
         errors = (@builder.error(name) if errors?) || BLANK
+        can_remove_method
 
-        errors + content_tag(:div, options[:input]) do
+        errors + content_tag(:div, options[:input].except(:collection)) do
           has_many_fields_for(block) + has_many_links_for(block)
         end
       end
@@ -76,6 +77,11 @@ module Effective
         end
       end
 
+      def can_remove_method
+        return @can_remove_method unless @can_remove_method.nil?
+        @can_remove_method = (options[:input].delete(:can_remove_method) || false)
+      end
+
       # reorder: true
       def reorder?
         return @reorder unless @reorder.nil?
@@ -107,19 +113,23 @@ module Effective
 
       def render_resource(resource, block)
         remove = BLANK
+        reorder = BLANK
+        can_remove = (can_remove_method.blank? || !!resource.send(can_remove_method))
 
         content = @builder.fields_for(name, resource) do |form|
           fields = block.call(form)
 
-          remove += form.super_hidden_field(:_destroy) if remove? && resource.persisted?
-          remove += form.super_hidden_field(:position) if reorder? && !fields.include?('][position]')
+          remove += form.super_hidden_field(:_destroy) if remove? && can_remove && resource.persisted?
+          reorder += form.super_hidden_field(:position) if reorder? && !fields.include?('][position]')
 
           fields
         end
 
-        remove += link_to_remove(resource) if (remove? || resource.new_record?)
+        if remove?
+          remove += (can_remove || resource.new_record?) ? link_to_remove(resource) : disabled_link_to_remove(resource)
+        end
 
-        content_tag(:div, render_fields(content, remove), class: 'has-many-fields')
+        content_tag(:div, render_fields(content, (remove + reorder)), class: 'has-many-fields')
       end
 
       def render_fields(content, remove)
@@ -169,7 +179,7 @@ module Effective
       def link_to_reorder(block)
         content_tag(
           :button,
-          icon('list') + 'Reorder',
+          icon('reorder') + 'Reorder',
           class: 'has-many-reorder btn btn-secondary',
           title: 'Reorder',
           data: {
@@ -181,7 +191,7 @@ module Effective
       def link_to_remove(resource)
         content_tag(
           :button,
-          icon('trash-2') + 'Remove',
+          icon('trash-2'),
           class: 'has-many-remove btn btn-danger',
           title: 'Remove',
           data: {
@@ -191,8 +201,20 @@ module Effective
         )
       end
 
+      def disabled_link_to_remove(resource)
+        content_tag(
+          :button,
+          icon('trash-2'),
+          class: 'has-many-remove-disabled btn btn-danger',
+          title: 'Remove',
+          data: {
+            'effective-form-has-many-remove-disabled': true,
+          }
+        )
+      end
+
       def has_many_move
-        @has_many_move ||= content_tag(:span, icon('move'), class: 'has-many-move')
+        @has_many_move ||= content_tag(:span, icon('grip-lines'), class: 'has-many-move')
       end
 
       def build_resource