effective_bootstrap 0.3.22 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 1574a75630924ef8597cd9527a4370ea425fb296
-  data.tar.gz: 4c63694277e88ef82e1d05f99b2dd350be5cf408
+  metadata.gz: b583f66f6d1a4bb7cbb97779f5328740b08b1c1f
+  data.tar.gz: bbe3c4203d1b0ff0cdf5cc5b486b7513432953ca
 SHA512:
-  metadata.gz: 0d061a258b2aca7adff48050b6038aef9df09294b60e5d336fbb29fa128c0d221518ff53d7a013136a39bb23967434ed4940c8d187253d8e02ffd8a5b919e53d
-  data.tar.gz: 1ec116b1a8c4b33ff5778c45ec6c23213270be1e3a328a2cf07c18907ebde7e97ffce9caf82506e81aba262bd20560972059d59abd80a8021351a29f02d46187
+  metadata.gz: 7cc537b958cf168a041b967bde69d3453a277301f026f50695ee99baa3a1e7c565288ab1356c6b09f1e955cc5a0418525d59c742803356509d79d536140ec57d
+  data.tar.gz: f8e1f99e6f71b1e9476d9efe6166e028aa465a29148cd205e82170d4d772ac4e4aa6a85334575a14c7577eb9447ced2ea56bb26205e2d98c5263b0e71f8bf42c

data/app/assets/javascripts/effective_bootstrap.js

@@ -8,6 +8,7 @@
 //= require ./effective_time_zone_select/input
 
 //= require ./effective_checks/input
+//= require ./effective_ck_editor/input
 //= require ./effective_editor/input
 //= require ./effective_file/input
 //= require ./effective_number_text/input

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

@@ -0,0 +1,72 @@
+# http://eonasdan.github.io/bootstrap-datetimepicker/Options/
+(this.EffectiveBootstrap || {}).effective_ck_editor = ($element, options) ->
+  setupCkeditor($element)
+  initCkeditor($element, $element.data('input-js-options'))
+
+# This is a one-time initialization that is done to check that all the scripts are properly set up
+setupCkeditor = ($inputs) ->
+  return unless $inputs.length > 0
+
+  input_js_options = $inputs.first().data('input-js-options') || {}
+
+  ckeditor_present = ((try CKEDITOR.version) || '').length > 0
+  $head = $('head')
+
+  unless ckeditor_present
+    $head.append("<link href='#{input_js_options['effective_ckeditor_css_path']}' type='text/css', media='screen' rel='stylesheet' />")
+    jQuery.ajax({url: input_js_options['effective_ckeditor_js_path'], dataType: 'script', cache: true, async: false})
+
+initCkeditor = ($element, input_options) ->
+  options =
+    toolbar: (input_options['toolbar'] || 'full')
+    effectiveRegionType: 'full'
+    customConfig: ''
+    enterMode: CKEDITOR.ENTER_P
+    shiftEnterMode: CKEDITOR.ENTER_BR
+    startupOutlineBlocks: true
+    startupShowBorders: true
+    disableNativeTableHandles: true
+    disableNativeSpellChecker: false
+    extraPlugins: 'effective_regions,effective_assets'
+    removePlugins: 'elementspath'
+    format_tags: 'p;h1;h2;h3;h4;h5;h6;pre;div'
+    templates: 'effective_regions'
+    templates_files: []
+    templates_replaceContent: false
+    filebrowserWindowHeight: 600
+    filebrowserWindowWidth: 800
+    filebrowserBrowseUrl: window.CKEDITOR_FILE_BROWSE_URL
+    filebrowserImageBrowseUrl: window.CKEDITOR_FILE_BROWSE_URL + '?only=images'
+    toolbar_full: [
+      { name: 'html', items: ['Sourcedialog', '-', 'ShowBlocks'] },
+      { name: 'editing', items: ['Undo', 'Redo'] },
+      { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'] },
+      { name: 'justify', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight']},
+      { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
+      { name: 'lists', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'] },
+      '/'
+      { name: 'definedstyles', items: ['Styles', 'Format'] },
+      { name: 'links', items: ['Link', 'Unlink', '-', 'Anchor'] },
+      { name: 'insert', items: ['Image', 'oembed'] },
+      { name: 'lists', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'] },
+      { name: 'insert2', items: ['Table', 'EffectiveReferences', 'Blockquote', 'HorizontalRule', 'PageBreak'] },
+      { name: 'colors', items: ['TextColor', 'BGColor'] },
+      { name: 'snippets', items: ['Templates', 'InsertSnippet'] }
+    ],
+    toolbar_simple: [
+      { name: 'definedstyles', items: ['Format'] },
+      { name: 'html', items: ['ShowBlocks'] },
+      { name: 'justify', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight']}
+      { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline'] },
+      { name: 'insert', items: ['Link', 'Table'] },
+      { name: 'lists', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'] },
+    ]
+
+  options[k] = v for k, v of ($element.data('input-js-options') || {})
+
+  ckeditor = CKEDITOR.replace($element.attr('id'), options)
+
+  ckeditor.on 'insertElement', (event) ->
+    element = $(event.data.$)
+    if element.is('table')
+      element.removeAttr('style').addClass('table')

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

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

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

@@ -15,3 +15,5 @@ $(document).on 'direct-upload:error', (event) ->
 $(document).on 'direct-upload:end', (event) ->
   $("[data-direct-upload-id=#{event.detail.id}]").addClass('direct-upload--complete')
 
+$(document).on 'change', "input[type='file'][data-click-submit]", (event) ->
+  $(event.currentTarget).closest('form').find('button[type=submit],input[type=submit]').first().click()

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

@@ -1,5 +1,4 @@
-.direct-uploads {
-}
+.direct-uploads {}
 
 .direct-upload {
   display: inline-block;
@@ -12,8 +11,8 @@
   line-height: 13px;
 }
 
-.direct-upload--pending {
-  opacity: 0.6;
+.direct-upload--pending { 
+  opacity: 0.6; 
 }
 
 .direct-upload__progress {
@@ -38,3 +37,8 @@
 input[type=file][data-direct-upload-url][disabled] {
   display: none;
 }
+
+// Attachments
+table.effective_file_attachments {
+  img { max-width: 128px; max-height: 128px;}
+}

data/app/models/effective/form_builder.rb

@@ -34,6 +34,10 @@ module Effective
       Effective::FormInputs::Checks.new(name, options, builder: self).to_html
     end
 
+    def ck_editor(name, options = {}, &block)
+      Effective::FormInputs::CkEditor.new(name, options, builder: self).to_html(&block)
+    end
+
     def date_field(name, options = {})
       Effective::FormInputs::DateField.new(name, options, builder: self).to_html { super(name, options) }
     end

data/app/models/effective/form_input.rb

@@ -7,7 +7,7 @@ module Effective
     EXCLUSIVE_CLASS_SUFFIXES = ['-primary', '-secondary', '-success', '-danger', '-warning', '-info', '-light', '-dark']
 
     delegate :object, to: :@builder
-    delegate :capture, :content_tag, :link_to, :icon, to: :@template
+    delegate :capture, :content_tag, :link_to, :icon, :asset_path, to: :@template
 
     # So this takes in the options for an entire form group.
     def initialize(name, options, builder:, html_options: nil)

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

@@ -0,0 +1,48 @@
+module Effective
+  module FormInputs
+    class CkEditor < Effective::FormInput
+
+      def build_input(&block)
+        content = value.presence || (capture(&block) if block_given?)
+        @builder.super_text_area(name, (options[:input] || {}).merge(autocomplete: 'off'))
+      end
+
+      def input_html_options
+        { class: 'effective_ck_editor form-control', id: unique_id }
+      end
+
+      def input_js_options
+        {
+          effective_ckeditor_js_path: asset_path('effective_ckeditor.js'),
+          effective_ckeditor_css_path: asset_path('effective_ckeditor.css'),
+          contentsCss: contentsCss,
+          toolbar: toolbar,
+          height: height,
+          width: width
+        }.compact
+      end
+
+      def contentsCss
+        @contents_css ||= case (obj = options.delete(:contentsCss))
+        when :bootstrap
+          'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'
+        when false then nil
+        else obj || asset_path('application.css')
+        end
+      end
+
+      def toolbar
+        @toolbar ||= (options.delete(:toolbar) || :full)
+      end
+
+      def height
+        @height ||= options.delete(:height)
+      end
+
+      def width
+        @width ||= options.delete(:width)
+      end
+
+    end
+  end
+end

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

@@ -3,7 +3,14 @@ module Effective
     class FileField < Effective::FormInput
 
       def build_input(&block)
-        build_attachments + build_uploads + super
+        case attachments_style
+        when :card
+          build_attachments + build_uploads + super
+        when :table, :ck_assets
+          super + build_uploads + build_attachments
+        else 
+          raise('unsupported attachments_style, try :card or :table')
+        end
       end
 
       def input_html_options
@@ -11,8 +18,9 @@ module Effective
           class: 'form-control form-control-file btn btn-outline-secondary',
           multiple: multiple?,
           direct_upload: true,
-          'data-progress-template': progress_template
-        }
+          'data-progress-template': progress_template,
+          'data-click-submit': (true if click_submit?),
+        }.compact
       end
 
       def multiple?
@@ -24,10 +32,63 @@ module Effective
 
         attachments = object.send(name).respond_to?(:length) ? object.send(name) : [object.send(name)]
 
-        content_tag(:div, attachments.map { |attachment| build_attachment(attachment) }.join.html_safe, class: 'attachments row')
+        case attachments_style
+        when :card
+          build_card_attachments(attachments)
+        when :table, :ck_assets
+          build_table_attachments(attachments)
+        else 
+          raise('unsupported attachments_style, try :card or :table')
+        end
+      end
+
+      def build_table_attachments(attachments)
+        content_tag(:table, class: 'table table-hover effective_file_attachments') do
+          content_tag(:thead) do
+            content_tag(:tr) do
+              content_tag(:th, 'Image') +
+              content_tag(:th, 'Title') +
+              content_tag(:th, 'Size') +
+              content_tag(:th, '')
+            end
+          end + 
+          content_tag(:tbody) do
+            attachments.map { |attachment| content_tag(:tr, build_table_attachment(attachment)) }.join.html_safe
+          end
+        end
+      end
+
+      def build_table_attachment(attachment)
+        url = (@template.url_for(attachment) rescue false)
+        return unless url
+
+        content_tag(:td) do
+          if attachment.image?
+            content_tag(:img, '', class: '', src: url, alt: attachment.filename.to_s)
+          end
+        end +
+
+        content_tag(:td, link_to(attachment.filename, url)) +
+        content_tag(:td, (attachment.content_type + '<br>' + @template.number_to_human_size(attachment.byte_size)).html_safe) +
+
+        content_tag(:td) do
+          if attachments_style == :ck_assets 
+            content = if attachment.image?
+              content_tag(:img, '', class: '', src: url, alt: attachment.filename.to_s)
+            else
+              link_to(attachment.filename, url)
+            end
+
+            link_to('Attach', url, class: 'btn btn-primary', 'data-effective-file-insert-ck-asset': true, 'data-asset': content, 'data-asset-id': 3)
+          end
+        end
+      end
+
+      def build_card_attachments(attachments)
+        content_tag(:div, attachments.map { |attachment| build_card_attachment(attachment) }.join.html_safe, class: 'effective_file_attachments row')
       end
 
-      def build_attachment(attachment)
+      def build_card_attachment(attachment)
         url = (@template.url_for(attachment) rescue false)
         return unless url
 
@@ -63,6 +124,15 @@ module Effective
         end
       end
 
+      def click_submit?
+        return @click_submit unless @click_submit.nil?
+        @click_submit ||= (options.delete(:click_submit) || false)
+      end
+
+      def attachments_style
+        @attachments_style ||= (options[:input].delete(:attachments_style) || options[:input].delete(:attachment_style) || :card)
+      end
+
     end
   end
 end

data/lib/effective_bootstrap/version.rb

@@ -1,3 +1,3 @@
 module EffectiveBootstrap
-  VERSION = '0.3.22'.freeze
+  VERSION = '0.4.0'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: effective_bootstrap
 version: !ruby/object:Gem::Version
-  version: 0.3.22
+  version: 0.4.0
 platform: ruby
 authors:
 - Code and Effect
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-04-02 00:00:00.000000000 Z
+date: 2019-04-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -375,6 +375,8 @@ files:
 - app/assets/javascripts/effective_bootstrap/logic.js.coffee
 - app/assets/javascripts/effective_checks/initialize.js.coffee
 - app/assets/javascripts/effective_checks/input.js
+- app/assets/javascripts/effective_ck_editor/initialize.js.coffee
+- app/assets/javascripts/effective_ck_editor/input.js
 - app/assets/javascripts/effective_date/initialize.js.coffee
 - app/assets/javascripts/effective_date/input.js
 - app/assets/javascripts/effective_datetime/bootstrap-datetimepicker.js
@@ -439,6 +441,7 @@ files:
 - app/models/effective/form_input.rb
 - app/models/effective/form_inputs/check_box.rb
 - app/models/effective/form_inputs/checks.rb
+- app/models/effective/form_inputs/ck_editor.rb
 - app/models/effective/form_inputs/collection_input.rb
 - app/models/effective/form_inputs/date_field.rb
 - app/models/effective/form_inputs/datetime_field.rb