effective_bootstrap 0.8.3 → 0.9.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6d33c3af90acc774a7ae2426c06085e9d0395a168d59532586d17788f0fc4cb2
-  data.tar.gz: a9723f01115d8c7025b0a02aab7a79ca69174050cc5f839fd2ec98d7e401e6ff
+  metadata.gz: a09d2f8d91357f5486377ae6a31483533bf214f4c8f1ba536bc9061828529370
+  data.tar.gz: e6a42b55fc5b377d7ccebf1b7418c41df907ed4b66de6ee58407690e46e82767
 SHA512:
-  metadata.gz: 8776c093e66d79f264b1b1cb907b7716547b554ebc266f652255f98b3d22a47090fbd074508d4dc00fb11e480208072fd5cc1d9d55427e2e400bf1e2289efa19
-  data.tar.gz: daa01ad649fd5e49b9108b124ed7c4556264442c029c03eafaa39ed5d31c48ad0334d50106a65c3c9f221d0f00fe7e68cf0dcf064fb876e977a344b63828049e
+  metadata.gz: 95b1495a52b26a3970754866ef7d35735be448daa675c3f21745ec8ff6298d893d8ecc912d37b28d1dd03ffad3fed29fa3adbcc26e6a278a050a6565bb052dbb
+  data.tar.gz: 174be86ba9a4064b21a3dcdbe4c13787165a574a31f93773ac12de60d20212e37edea12793197afa360502f95f6f2fd8941281696f114f881c2aa61da6fea470

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/images/icons/microsoft.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Microsoft Azure icon</title><path d="M5.483 21.3H24L14.025 4.013l-3.038 8.347 5.836 6.938L5.483 21.3zM13.23 2.7L6.105 8.677 0 19.253h5.505v.014L13.23 2.7z"/></svg>

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_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/lib/effective_bootstrap/version.rb

@@ -1,3 +1,3 @@
 module EffectiveBootstrap
-  VERSION = '0.8.3'.freeze
+  VERSION = '0.9.2'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: effective_bootstrap
 version: !ruby/object:Gem::Version
-  version: 0.8.3
+  version: 0.9.2
 platform: ruby
 authors:
 - Code and Effect
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-09-08 00:00:00.000000000 Z
+date: 2020-09-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -262,6 +262,7 @@ files:
 - app/assets/images/icons/message-square.svg
 - app/assets/images/icons/mic-off.svg
 - app/assets/images/icons/mic.svg
+- app/assets/images/icons/microsoft.svg
 - app/assets/images/icons/minimize-2.svg
 - app/assets/images/icons/minimize.svg
 - app/assets/images/icons/minus-circle.svg
@@ -395,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
@@ -571,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
@@ -581,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
@@ -620,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
@@ -663,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.