effective_bootstrap 0.8.4 → 0.9.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fd2b4a321ad92d428321ae94d2b26875a047f209c3b3842ca4f4be921b76071d
-  data.tar.gz: fe91e9b1898dfb4286470bacf83b7ab09f12b091aa1218109d432c330f991493
+  metadata.gz: 653ce4dc21d9961a88154cbfb0b3c59e4d4f85615e3edc4d89f774fbca7a0026
+  data.tar.gz: 724f3a374fe198d935fb72773e0e411c070bb9365c93228ca64c01bf93893a27
 SHA512:
-  metadata.gz: 99b921f38e9cc727b520012cb0b4621c127c51dde6491ee69ad297060368af741df1a9b8df83141ff8a84007ffab0f8484e66c53bf03ae0796b1bc1782b6d4bf
-  data.tar.gz: 03422e1c8f7ab703916ce5a0473266d23560e4ad485306acf01aecb387ca4b94a390b3d87b0f6cd7b282a74a4a634755c0f39889c4f198992512efbbd973e67b
+  metadata.gz: d8d946e930a29d18016012f49f2df1b72a43da46504fdc7e0c943bc111c92d85d34f394fe77a708bb93a27b10bb25c0ef003024d3b29606449057c8d156546ef
+  data.tar.gz: 4d23bd8f9fb754f318a3115ae72ddd924714e9704bfad6d4e489510503dcbdead65f13abef5b0ab2867f18e2377700aa4c672fd7126e0d4889d6a21158d9b112

data/README.md

@@ -323,7 +323,7 @@ The end date selector will have its date <= start_date disabled.
 To disable this behaviour, call with `date_linked: false`.
 
 ```ruby
-= f.input :end_at, date_linked: false
+= f.date_field :end_at, date_linked: false
 ```
 
 ### Events
@@ -334,6 +334,34 @@ More info is available here:
 
 http://eonasdan.github.io/bootstrap-datetimepicker/Events/
 
+## Custom editor
+
+A drop in ready rich text editor based on
+
+https://quilljs.com/
+
+To use the editor, you must make additional javascript and stylesheet includes:
+
+In your application.js
+
+```
+//= require effective_bootstrap
+//= require effective_bootstrap_editor
+```
+
+In your application.scss
+
+```
+@import 'effective_bootstrap';
+@import 'effective_bootstrap_editor';
+```
+
+And then in any form, instead of a text area:
+
+```
+= f.editor :body
+```
+
 ## Custom percent_field
 
 This custom form input uses no 3rd party jQuery plugins.
@@ -622,6 +650,8 @@ The `f.save` is purely a input submit button.
 ```
 
 
+
+
 ## License
 
 MIT License.  Copyright [Code and Effect Inc.](http://www.codeandeffect.com/)

data/app/assets/javascripts/effective_bootstrap.js

@@ -13,7 +13,7 @@
 //= require ./effective_clear/input
 //= require ./effective_checks/input
 //= require ./effective_ck_editor/input
-//= require ./effective_editor/input
+
 //= require ./effective_file/input
 //= require ./effective_integer/input
 //= require ./effective_number_text/input

data/app/assets/javascripts/effective_bootstrap_editor.js

@@ -0,0 +1 @@
+//= require ./effective_editor/input

data/app/assets/javascripts/effective_ck_editor/initialize.js.coffee

@@ -1,4 +1,3 @@
-# http://eonasdan.github.io/bootstrap-datetimepicker/Options/
 (this.EffectiveBootstrap || {}).effective_ck_editor = ($element, options) ->
   setupCkeditor($element)
   initCkeditor($element, $element.data('input-js-options'))
@@ -69,4 +68,4 @@ initCkeditor = ($element, input_options) ->
   ckeditor.on 'insertElement', (event) ->
     element = $(event.data.$)
     if element.is('table')
-      element.removeAttr('style').addClass('table')
+      element.removeAttr('style').addClass('table')

data/app/assets/stylesheets/effective_bootstrap.scss

@@ -5,8 +5,8 @@
 @import 'effective_date/input';
 @import 'effective_time/input';
 
-@import 'effective_editor/input';
 @import 'effective_file/input';
+@import 'effective_rich_text_area/input';
 @import 'effective_select/input';
 @import 'effective_select_or_text/input';
 @import 'effective_radio/input';

data/app/assets/stylesheets/effective_bootstrap_editor.scss

@@ -0,0 +1 @@
+@import 'effective_editor/input';

data/app/assets/stylesheets/effective_rich_text_area/input.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/helpers/effective_bootstrap_helper.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 # Boostrap4 Helpers
 
 module EffectiveBootstrapHelper
@@ -72,15 +74,27 @@ module EffectiveBootstrapHelper
   # variations can be :dropup, :dropleft, :dropright
   # split can be true, false
   # right is to right align things
+  DROPDOWN_SPLIT_OPTS = {class: "btn dropdown-toggle dropdown-toggle-split btn-sm btn-outline-primary", type: 'button', 'data-toggle': 'dropdown', 'aria-haspopup': true, 'aria-expanded': false}
+  DROPDOWN_UNSPLIT_OPTS= {class: "btn dropdown-toggle btn-sm btn-outline-primary", type: 'button', 'data-toggle': 'dropdown', 'aria-haspopup': true, 'aria-expanded': false}
+
+  DROPDOWN_DROPLEFT_GROUP_OPTS = {class: 'btn-group'}
+  DROPDOWN_DROPLEFT_OPTS = {class: 'btn-group dropleft', role: 'group'}
+
+  DROPDOWN_MENU_OPTS = {class: 'dropdown-menu'}
+  DROPDOWN_MENU_RIGHT_OPTS = {class: 'dropdown-menu dropdown-menu-right'}
+
+  DROPDOWN_BTN_CLASS = 'btn-sm btn-outline-primary'
+  DROPDOWN_TOGGLE_DROPDOWN = "<span class='sr-only'>Toggle Dropdown</span>".html_safe
+
   def dropdown(variation: nil, split: true, btn_class: nil, btn_content: nil, right: false, &block)
     raise 'expected a block' unless block_given?
 
-    btn_class = btn_class.presence || 'btn-outline-primary'
+    btn_class ||= DROPDOWN_BTN_CLASS
 
+    # Process all dropdown_link_tos
     @_dropdown_link_tos = []
     @_dropdown_split = split
-
-    # process dropdown_link_tos
+    @_dropdown_button_class = btn_class
     yield
 
     return @_dropdown_link_tos.first if @_dropdown_link_tos.length <= 1
@@ -88,31 +102,37 @@ module EffectiveBootstrapHelper
     # Build tags
     first = @_dropdown_link_tos.first
 
-    button = content_tag(:button, class: "btn #{btn_class} dropdown-toggle" + (split ? " dropdown-toggle-split" : ''), type: 'button', 'data-toggle': 'dropdown', 'aria-haspopup': true, 'aria-expanded': false) do
-      btn_content || content_tag(:span, 'Toggle Dropdown', class: 'sr-only')
+    button_opts = (split ? DROPDOWN_SPLIT_OPTS : DROPDOWN_UNSPLIT_OPTS)
+
+    if btn_class != DROPDOWN_BTN_CLASS
+      button_opts[:class] = button_opts[:class].sub(DROPDOWN_BTN_CLASS, btn_class)
+    end
+
+    button = content_tag(:button, button_opts) do
+      btn_content || DROPDOWN_TOGGLE_DROPDOWN
     end
 
+    menu_opts = (right ? DROPDOWN_MENU_RIGHT_OPTS : DROPDOWN_MENU_OPTS)
+
     menu = if split
-      content_tag(:div, @_dropdown_link_tos[1..-1].join.html_safe, class: ['dropdown-menu', ('dropdown-menu-right' if right)].compact.join(' '))
+      content_tag(:div, @_dropdown_link_tos[1..-1].join.html_safe, menu_opts)
     else
-      content_tag(:div, @_dropdown_link_tos.join.html_safe, class: ['dropdown-menu', ('dropdown-menu-right' if right)].compact.join(' '))
+      content_tag(:div, @_dropdown_link_tos.join.html_safe, menu_opts)
     end
 
-    retval = if split
+    @_dropdown_link_tos = nil
+
+    if split && variation == :dropleft
+      content_tag(:div, DROPDOWN_DROPLEFT_GROUP_OPTS) do
+        content_tag(:div, (button + menu), DROPDOWN_DROPLEFT_OPTS) + first.html_safe
+      end
+    elsif split
       content_tag(:div, class: 'btn-group') do
-        content_tag(:div, class: ['btn-group', variation.to_s.presence].compact.join(' '), role: 'group') do
-          [:dropleft].include?(variation) ? (button + menu) : (first + button + menu)
-        end + ([:dropleft].include?(variation) ? first : '').html_safe
+        content_tag(:div, (first + button + menu), class: "btn-group #{variation}", role: 'group')
       end
     else
-      content_tag(:div, class: 'dropdown') do
-        button + menu
-      end
+      content_tag(:div, (button + menu), class: 'dropdown')
     end
-
-    @_dropdown_link_tos = nil
-
-    retval
   end
 
   # This is a special variant of dropdown
@@ -135,17 +155,17 @@ module EffectiveBootstrapHelper
 
   # Works with dots do and dropdown do
   def dropdown_link_to(label, path, options = {})
-    btn_class = options.delete(:btn_class).presence || 'btn-outline-primary'
+    btn_class = options.delete(:btn_class).presence || @_dropdown_button_class || 'btn-outline-primary'
 
     unless @_dropdown_link_tos
-      options[:class] = [options[:class], 'dropdown-item'].compact.join(' ')
+      options[:class] = (options[:class] ? "dropdown-item #{options[:class]}" : 'dropdown-item')
       return link_to(label, path, options)
     end
 
     if @_dropdown_link_tos.length == 0 && @_dropdown_split
-      options[:class] = [options[:class], 'btn', btn_class].compact.join(' ')
+      options[:class] = (options[:class] ? "btn #{btn_class} #{options[:class]}" : "btn #{btn_class}")
     else
-      options[:class] = [options[:class], 'dropdown-item'].compact.join(' ')
+      options[:class] = (options[:class] ? "dropdown-item #{options[:class]}" : 'dropdown-item')
     end
 
     @_dropdown_link_tos << link_to(label, path, options)

data/app/models/effective/form_builder.rb

@@ -100,6 +100,10 @@ module Effective
       Effective::FormInputs::RemoteLinkTo.new(name, options, builder: self).to_html(&block)
     end
 
+    def rich_text_area(name, options = {})
+      Effective::FormInputs::RichTextArea.new(name, options, builder: self).to_html { super(name, options) }
+    end
+
     def search_field(name, options = {})
       Effective::FormInputs::SearchField.new(name, options, builder: self).to_html { super(name, options) }
     end

data/app/models/effective/form_input.rb

@@ -1,11 +1,25 @@
+# frozen_string_literal: true
+
 module Effective
   class FormInput
     attr_accessor :name, :options
 
     BLANK = ''.html_safe
+    EMPTY_HASH = {}
+
     EXCLUSIVE_CLASS_PREFIXES = [] # None
     EXCLUSIVE_CLASS_SUFFIXES = ['-primary', '-secondary', '-success', '-danger', '-warning', '-info', '-light', '-dark']
 
+    DEFAULT_INPUT_GROUP_OPTIONS = { input_group: { class: 'input-group' }, prepend: false, append: false }
+
+    HORIZONTAL_LABEL_OPTIONS = { class: 'col-sm-2 col-form-label'}
+    INLINE_LABEL_OPTIONS = { class: 'sr-only' }
+
+    DEFAULT_FEEDBACK_OPTIONS = { valid: { class: 'valid-feedback' }, invalid: { class: 'invalid-feedback' } }
+
+    HORIZONTAL_WRAPPER_OPTIONS = { class: 'form-group row' }
+    VERTICAL_WRAPPER_OPTIONS = { class: 'form-group' }
+
     delegate :object, to: :@builder
     delegate :capture, :content_tag, :image_tag, :link_to, :icon, :asset_path, to: :@template
 
@@ -20,7 +34,7 @@ module Effective
     end
 
     def input_group_options
-      { input_group: { class: 'input-group' }, prepend: false, append: false }
+      DEFAULT_INPUT_GROUP_OPTIONS
     end
 
     def input_html_options
@@ -28,17 +42,17 @@ module Effective
     end
 
     def input_js_options
-      {}
+      EMPTY_HASH
     end
 
     def label_options
       case layout
       when :horizontal
-        { class: 'col-sm-2 col-form-label'}
+        HORIZONTAL_LABEL_OPTIONS
       when :inline
-        { class: 'sr-only' }
+        INLINE_LABEL_OPTIONS
       else
-        { }
+        EMPTY_HASH
       end
     end
 
@@ -47,7 +61,7 @@ module Effective
       when :inline
         false
       else
-        { valid: { class: 'valid-feedback' }, invalid: { class: 'invalid-feedback' } }
+        DEFAULT_FEEDBACK_OPTIONS
       end
     end
 
@@ -63,9 +77,9 @@ module Effective
     def wrapper_options
       case layout
       when :horizontal
-        { class: 'form-group row' }
+        HORIZONTAL_WRAPPER_OPTIONS
       else
-        { class: 'form-group' }
+        VERTICAL_WRAPPER_OPTIONS
       end
     end
 
@@ -166,7 +180,7 @@ module Effective
 
       invalid = object.errors[name].to_sentence.presence if object.respond_to?(:errors)
       invalid ||= options[:feedback][:invalid].delete(:text).presence
-      invalid ||= [("can't be blank" if options[:input][:required]), ('must be valid' if validated?(name))].compact.join(' and ').presence
+      invalid ||= [("can't be blank" if options[:input][:required]), ('must be valid' if validated?(name))].tap(&:compact!).join(' and ').presence
       invalid ||= "can't be blank or is invalid"
 
       valid = options[:feedback][:valid].delete(:text) || 'Looks good!'
@@ -268,7 +282,7 @@ module Effective
         item_value = (item.send(value_method).to_s.parameterize.presence rescue nil)
       end
 
-      [tag_id, item_value, object_id].compact.join('_')
+      [tag_id, item_value, object_id].tap(&:compact!).join('_')
     end
 
     private
@@ -282,7 +296,7 @@ module Effective
       # effective_bootstrap specific options
       layout = options.delete(:layout) # Symbol
       wrapper = options.delete(:wrapper) # Hash
-      input_group = { append: options.delete(:append), prepend: options.delete(:prepend), input_group: options.delete(:input_group) }.compact
+      input_group = { append: options.delete(:append), prepend: options.delete(:prepend), input_group: options.delete(:input_group) }.tap(&:compact!)
 
       feedback = options.delete(:feedback) # Hash
       label = options.delete(:label) # String or Hash
@@ -317,11 +331,11 @@ module Effective
       # Server side validation
       if has_error?
         if has_error?(name)
-          options[:input][:class] = [options[:input][:class], 'is-invalid'].compact.join(' ')
+          options[:input][:class] = (options[:input][:class] ? "#{options[:input][:class]} is-invalid" : 'is-invalid')
         elsif reset_feedback?
           # Nothing
         else
-          options[:input][:class] = [options[:input][:class], 'is-valid'].compact.join(' ')
+          options[:input][:class] = (options[:input][:class] ? "#{options[:input][:class]} is-valid" : 'is-valid')
         end
       end
 
@@ -333,7 +347,7 @@ module Effective
         options[:input][:readonly] = 'readonly'
 
         unless options[:input][:class].to_s.include?('form-control-plaintext')
-          options[:input][:class] = options[:input][:class].to_s.sub('form-control', 'form-control-plaintext')
+          options[:input][:class] = (options[:input][:class] || '').sub('form-control', 'form-control-plaintext')
         end
       end
 
@@ -347,17 +361,17 @@ module Effective
     end
 
     def merge_defaults!(obj, defaults)
-      defaults = {} if defaults.nil?
+      defaults = EMPTY_HASH if defaults.nil?
 
       case obj
       when false
         false
       when nil, true
-        defaults
+        defaults.dup
       when String
         defaults.merge(text: obj)
       when Hash
-        html_classes = (obj[:class].to_s.split(' ') + defaults[:class].to_s.split(' ')).uniq
+        html_classes = ((obj[:class] || '').split(' ') + (defaults[:class] || '').split(' ')).uniq
 
         # Try to smart merge bootstrap classes
         if (exclusive = html_classes.select { |c| c.include?('-') }).length > 1
@@ -421,11 +435,11 @@ module Effective
     end
 
     def sanitized_object_name
-      @builder.object_name.to_s.gsub(/\]\[|[^-a-zA-Z0-9:.]/, "_").sub(/_$/, "")
+      @sanitized_object_name ||= @builder.object_name.to_s.gsub(/\]\[|[^-a-zA-Z0-9:.]/, "_").sub(/_$/, "")
     end
 
     def sanitized_method_name
-      name.to_s.sub(/\?$/, "")
+      @sanitized_method_name ||= name.to_s.sub(/\?$/, "")
     end
 
     def input_js_options_method_name

data/app/models/effective/form_inputs/rich_text_area.rb

@@ -0,0 +1,11 @@
+module Effective
+  module FormInputs
+    class RichTextArea < Effective::FormInput
+
+      def input_html_options
+        { class: 'form-control effective_rich_text_area trix-content', id: tag_id }
+      end
+
+    end
+  end
+end

data/app/models/effective/form_logic.rb

@@ -34,7 +34,7 @@ module Effective
     end
 
     def input_js_options
-      { 'data-input-js-options' => JSON.generate({method_name: input_js_options_method_name}.merge(logic_options)) }
+      { 'data-input-js-options' => JSON.generate({method_name: input_js_options_method_name}.merge!(logic_options)) }
     end
 
     def input_js_options_method_name

data/lib/effective_bootstrap/version.rb

@@ -1,3 +1,3 @@
 module EffectiveBootstrap
-  VERSION = '0.8.4'.freeze
+  VERSION = '0.9.3'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: effective_bootstrap
 version: !ruby/object:Gem::Version
-  version: 0.8.4
+  version: 0.9.3
 platform: ruby
 authors:
 - Code and Effect
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-09-09 00:00:00.000000000 Z
+date: 2020-09-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -396,6 +396,7 @@ files:
 - app/assets/javascripts/effective_bootstrap/logic.js.coffee
 - app/assets/javascripts/effective_bootstrap/other.js.coffee
 - app/assets/javascripts/effective_bootstrap/tabs.js
+- app/assets/javascripts/effective_bootstrap_editor.js
 - app/assets/javascripts/effective_checks/initialize.js.coffee
 - app/assets/javascripts/effective_checks/input.js
 - app/assets/javascripts/effective_ck_editor/initialize.js.coffee
@@ -572,6 +573,7 @@ files:
 - app/assets/stylesheets/effective_bootstrap/forms.scss
 - app/assets/stylesheets/effective_bootstrap/icons.scss
 - app/assets/stylesheets/effective_bootstrap/overrides.scss
+- app/assets/stylesheets/effective_bootstrap_editor.scss
 - app/assets/stylesheets/effective_checks/input.scss
 - app/assets/stylesheets/effective_date/input.scss
 - app/assets/stylesheets/effective_datetime/bootstrap-datetimepicker.scss
@@ -582,6 +584,7 @@ files:
 - app/assets/stylesheets/effective_editor/quill.scss
 - app/assets/stylesheets/effective_file/input.scss
 - app/assets/stylesheets/effective_radio/input.scss
+- app/assets/stylesheets/effective_rich_text_area/input.scss
 - app/assets/stylesheets/effective_select/bootstrap-theme.css
 - app/assets/stylesheets/effective_select/input.scss
 - app/assets/stylesheets/effective_select/overrides.scss
@@ -621,6 +624,7 @@ files:
 - app/models/effective/form_inputs/radios.rb
 - app/models/effective/form_inputs/remote_link_to.rb
 - app/models/effective/form_inputs/reset.rb
+- app/models/effective/form_inputs/rich_text_area.rb
 - app/models/effective/form_inputs/save.rb
 - app/models/effective/form_inputs/search_field.rb
 - app/models/effective/form_inputs/select.rb
@@ -664,7 +668,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.2
+rubygems_version: 3.1.4
 signing_key:
 specification_version: 4
 summary: Everything you need to get set up with bootstrap 4.