effective_form_inputs 0.7.7 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 1d7ea053ad61d80125b2ae8dbe2eae58e892c1ab
-  data.tar.gz: 574f3f7c737e4bee7a7e79d4877e5ffa32eadf8d
+  metadata.gz: 4084b5079c6d29cd3f98010bd091adb6786ce685
+  data.tar.gz: e31931a190b06729b54a2d10093d4ae12f9f6b9a
 SHA512:
-  metadata.gz: 5d4ce0300d708fc835a219662bf320cc5955a37f91c9c11d0168133bf3ae1183c46dcbafef93eae6e83f7ab5e502ac2d6e6e3229cc183ba0fdea4972802a6f60
-  data.tar.gz: f635f168efdb974f48d38766a4522bca553d90e017207c7780f77cc26a1302b06da58970bb966d15924cf47cc19987b93130203d857960ca76ccd91724a5b943
+  metadata.gz: 69358afe7a55687546787a30a1336fc41a4f4ca4631d2afe8287f771b34fb24b38e4c83cf9eba03ad55fc2f60deea75fbcf9ca1b88420118bebc929562a2358b
+  data.tar.gz: ecfbf949418dfa89dbd92df199a794c9b97313f391f54eb4ab53f2e50319c13f4a557681379cba465442ca48e7e357c98681384d39d5ef20df6d917b742bf19f

data/README.md

@@ -377,9 +377,7 @@ There is currently no support for using AJAX to load remote data.  This feature
 
 This custom form input uses a jQuery maskedInput plugin from the following awesome project:
 
-http://digitalbush.com/projects/masked-input-plugin/
-
-https://github.com/digitalBush/jquery.maskedinput
+jQuery Masked Input Plugin (https://github.com/digitalBush/jquery.maskedinput)
 
 
 ### Installation
@@ -473,6 +471,71 @@ There are no javascript options for this input.
 This input also installs a rails view helper `price_to_currency` that takes a value like `10000` and displays it as `$100.00`
 
 
+## Effective CKEditor Text Area
+
+This custom form input replaces a standard textarea with a CKEditor html rich text area.
+
+It is based on the widely used:
+
+CKEditor (http://ckeditor.com/)
+
+and built ontop of
+
+effective_ckeditor (https://github.com/code-and-effect/effective_ckeditor/)
+
+### Installation
+
+You must first install [effective_ckeditor](https://github.com/code-and-effect/effective_ckeditor/)
+
+```ruby
+gem 'effective_ckeditor'
+```
+
+Depending on how often you're going to display this form input, you now have two options:
+
+- You can do nothing, and when this form input is displayed it will use javascript to load the ckeditor .js and .css file on $(ready).  It will make 2 additional requests, slowing down your page load by a moment.
+
+- Or, when you intend to use the input quite a bit, it's faster to add the effective_ckeditor resources to the asset pipeline.  However, it will increase the asset payload by around 200kb.
+
+To add it to the asset pipeline, put the following to your application.js:
+
+```ruby
+//= require effective_ckeditor
+```
+
+and in your application.css, add:
+
+```ruby
+*= require effective_ckeditor
+```
+
+There are no additional effective_ckeditor installation steps.
+
+
+If you've already installed the 'All Form Inputs' assets (see above), there are no additional installation steps.
+
+To install this form input individually, add the following to your application.js:
+
+```ruby
+//= require effective_ckeditor_text_area/input
+```
+
+### Usage
+
+As a Rails Form Helper input:
+
+```ruby
+= form_for @post do |f|
+  = f.effective_ckeditor_text_area :body
+```
+
+As a SimpleForm input:
+
+```ruby
+= simple_form_for @post do |f|
+  = f.input :body, :as => :effective_ckeditor_text_area
+```
+
 ## License
 
 MIT License.  Copyright [Code and Effect Inc.](http://www.codeandeffect.com/)

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

@@ -0,0 +1,77 @@
+initialize = ->
+  $inputs = $('textarea.effective_ckeditor_text_area:not(.initialized)')
+  setupCkeditor($inputs)
+
+  $inputs.each (i, element) ->
+    element = $(element)
+    element.addClass('initialized')
+    initCkeditor(element)
+
+# 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
+
+  ckeditor_present = ((try CKEDITOR.version) || '').length > 0
+  use_effective_assets = ($inputs.first().data('input-js-options') || {})['effective_assets'] == true
+  $head = $('head')
+
+  unless ckeditor_present
+    $head.append("<script src='/assets/effective_ckeditor.js' />")
+    $head.append("<link href='/assets/effective_ckeditor.css' type='text/css', media='screen' rel='stylesheet' />")
+
+  if use_effective_assets
+    $head.append("
+      <script>
+      CKEDITOR.config['effective_regions'] = {
+        'snippets': {
+          'effective_asset': {
+            'dialog_url':'/assets/effective/snippets/effective_asset.js',
+            'label':'Effective asset',
+            'description':'Insert Effective asset',
+            'inline':true,
+            'editables':false,
+            'tag':'span'
+          }
+        }
+      };
+      </script>
+    ");
+
+initCkeditor = (textarea) ->
+  CKEDITOR.replace(textarea.attr('id'),
+    toolbar: 'full'
+    effectiveRegionType: 'full'
+    customConfig: ''
+    enterMode: CKEDITOR.ENTER_P
+    shiftEnterMode: CKEDITOR.ENTER_BR
+    startupOutlineBlocks: false
+    startupShowBorders: true
+    disableNativeTableHandles: true
+    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: '/effective/assets?only=images'
+    toolbar_full: [
+      { name: 'save', items: ['NewPage'] },
+      { 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: 'definedstyles', items: ['Format'] },
+      { name: 'links', items: ['Link', 'Unlink', '-', 'Anchor'] },
+      { name: 'insert', items: ['Image', 'oembed', 'EffectiveAssets'] },
+      { name: 'lists', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'] },
+      { name: 'insert2', items: ['Table', 'EffectiveReferences', 'Blockquote', 'HorizontalRule', 'PageBreak'] }
+    ]
+  )
+
+$ -> initialize()
+$(document).on 'page:change', -> initialize()
+$(document).on 'cocoon:after-insert', -> initialize()

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

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

data/app/assets/javascripts/effective_form_inputs.js

@@ -1,3 +1,4 @@
+//= require ./effective_ckeditor_text_area/input
 //= require ./effective_date_time_picker/input
 //= require ./effective_date_picker/input
 //= require ./effective_price/input

data/app/models/effective/form_builder_inputs.rb

@@ -1,5 +1,9 @@
 module Effective
   module FormBuilderInputs
+    def effective_ckeditor_text_area(method, options_tag = nil, options = {}, html_options = {})
+      Inputs::EffectiveCkeditorTextArea::Input.new(@object, @object_name, @template, method, options, html_options).to_html
+    end
+
     def effective_date_time_picker(method, options = {})
       Inputs::EffectiveDateTimePicker::Input.new(@object, @object_name, @template, method, options, options).to_html
     end

data/app/models/inputs/effective_ckeditor_text_area/input.rb

@@ -0,0 +1,20 @@
+module Inputs
+  module EffectiveCkeditorTextArea
+    class Input < Effective::FormInput
+      delegate :content_tag, :text_area_tag, :to => :@template
+
+      def default_input_js
+        {effective_assets: defined?(EffectiveAssets).present? }
+      end
+
+      def default_input_html
+        {class: 'effective_ckeditor_text_area text'}
+      end
+
+      def to_html
+        text_area_tag(field_name, value, tag_options)
+      end
+    end
+  end
+end
+

data/app/models/inputs/effective_ckeditor_text_area_input.rb

@@ -0,0 +1,12 @@
+# = simple_form_for @thing do |f|
+#   = f.input :body_content, :as => :effective_ckeditor_text_area
+
+if defined?(SimpleForm)
+
+  class EffectiveCkeditorTextAreaInput < SimpleForm::Inputs::StringInput
+    def input(wrapper_options = nil)
+      Inputs::EffectiveCkeditorTextarea::Input.new(object, object_name, template, attribute_name, input_options, (merge_wrapper_options(input_html_options, wrapper_options) || {})).to_html
+    end
+  end
+
+end

data/app/views/effective/style_guide/{_form_default.html.haml → _effective_form_inputs.html.haml}

@@ -1,6 +1,14 @@
 / this gives me a mechanism to test the inputs easily on a site with effective style_guide installed
 
 = form_for Effective::StyleGuide.new(:category => 'Category 2'), :url => '/' do |f|
+  = f.effective_ckeditor_text_area :content
+
+  / = f.input :updated_at, as: :effective_date_picker
+  / = f.input :updated_at, as: :effective_date_time_picker
+  / = f.input :price, as: :effective_price
+  / = f.input :category, as: :effective_select, collection: 10.times.map { |x| "Category #{x}"}
+  / = f.input :number, as: :effective_tel
+
   / = f.date_field :updated_at, :class => 'my-class'
   / = f.effective_date_picker :updated_at, :class => 'my-class'
   / %hr

data/lib/effective_form_inputs/version.rb

@@ -1,3 +1,3 @@
 module EffectiveFormInputs
-  VERSION = '0.7.7'.freeze
+  VERSION = '0.8.0'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: effective_form_inputs
 version: !ruby/object:Gem::Version
-  version: 0.7.7
+  version: 0.8.0
 platform: ruby
 authors:
 - Code and Effect
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-10-01 00:00:00.000000000 Z
+date: 2015-11-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -48,6 +48,8 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
+- app/assets/javascripts/effective_ckeditor_text_area/initialize.js.coffee
+- app/assets/javascripts/effective_ckeditor_text_area/input.js
 - app/assets/javascripts/effective_date_picker/initialize.js.coffee
 - app/assets/javascripts/effective_date_picker/input.js
 - app/assets/javascripts/effective_date_time_picker/bootstrap-datetimepicker.js
@@ -77,6 +79,8 @@ files:
 - app/helpers/effective_form_inputs_helper.rb
 - app/models/effective/form_builder_inputs.rb
 - app/models/effective/form_input.rb
+- app/models/inputs/effective_ckeditor_text_area/input.rb
+- app/models/inputs/effective_ckeditor_text_area_input.rb
 - app/models/inputs/effective_date_picker/input.rb
 - app/models/inputs/effective_date_picker_input.rb
 - app/models/inputs/effective_date_time_picker/input.rb
@@ -89,7 +93,7 @@ files:
 - app/models/inputs/effective_static_control_input.rb
 - app/models/inputs/effective_tel/input.rb
 - app/models/inputs/effective_tel_input.rb
-- app/views/effective/style_guide/_form_default.html.haml
+- app/views/effective/style_guide/_effective_form_inputs.html.haml
 - lib/effective_form_inputs.rb
 - lib/effective_form_inputs/engine.rb
 - lib/effective_form_inputs/version.rb