sexy-content-editable 0.0.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 1e41e9defd56d68953a05a25d15e78285114c69e
+  data.tar.gz: 1667245956897ce8634c54f014554d5f723a8e20
+SHA512:
+  metadata.gz: b315b00f5e69328d1bc0c01578573cd920e3a7fd62ca97a975f6eef75a5e49f795b7c9fb27b7d43621babdfffb0f553fa54772846fdab4dea9cc879758e2fd99
+  data.tar.gz: a4647827e8f6ae9ed019c802766b62d27c1d2a6107d5def06ffade309559b3e6022656290d09c32ad3af1d36b4492654f93c3ee80d2ebef20cdf25d5845d34a7

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2014 David Barral
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,31 @@
+# Sexy::Content::Editable
+
+Work in progress. Not production ready yet (^\_^ U)
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'sexy-content-editable'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install sexy-content-editable
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Contributing
+
+1. Fork it ( https://github.com/[my-github-username]/sexy-content-editable/fork )
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create a new Pull Request

data/app/assets/javascripts/sexy-content-editable.js.coffee

@@ -0,0 +1,269 @@
+#= require_tree
+#= require bootstrap
+SelectionManager = do ->
+  selection = null
+  range     = null
+
+  stripTags = ->
+    text = range.toString()
+    range.deleteContents()
+    range.insertNode(document.createTextNode(text))
+
+  select = (node) ->
+    selection = document.getSelection()
+    selection.removeAllRanges()
+
+    range = document.createRange()
+    range.selectNode(node)
+
+    selection.addRange(range)
+
+  record = ->
+    selection = document.getSelection()
+    if selection.rangeCount > 0
+      range     = selection.getRangeAt(0)
+
+  restore = ->
+    selection.removeAllRanges()
+    selection.addRange(range)
+
+  collapse = ->
+    range.collapse()
+    restore()
+
+  collapse  : collapse
+  select    : select
+  record    : record
+  restore   : restore
+  stripTags : stripTags
+
+
+class BasePrompt
+  constructor : (tmpl) ->
+    @template = JST[tmpl]
+
+  show : (options = {}) ->
+    SelectionManager.record()
+
+    $modal = $(@template())
+    $('body').append($modal)
+    $modal.modal(show: false)
+
+    $modal.on 'hidden.bs.modal', ->
+      SelectionManager.collapse()
+      $modal.remove()
+
+    $modal.on 'submit', 'form', (e) =>
+      e.preventDefault()
+      $form = $(e.currentTarget)
+      @_processUserInput($form.serializeArray())
+      $modal.modal('hide')
+
+    @_beforeShow($modal, options)
+    @_installAdditionalHandlers($modal)
+
+    $modal.modal('show')
+
+  _beforeShow : -> #NOOP
+  _installAdditionalHandlers : -> #NOOP
+
+class LinkPrompt extends BasePrompt
+  constructor: ->
+    super('templates/link_prompt_modal')
+
+  _processUserInput : (userInput) =>
+    debugger
+    url = userInput.filter (e) ->
+      e.value if e.name is "url"
+
+    SelectionManager.restore()
+    document.execCommand('CreateLink', null, url[0].value)
+
+  _beforeShow : ($modal, options) ->
+    $modal.find('[name=url]').val(options.url)
+
+  _installAdditionalHandlers : ($modal) ->
+    $modal.on 'click', '[data-behaviour=editor-remove-link]', ->
+      SelectionManager.stripTags()
+
+
+class HtmlPrompt extends BasePrompt
+  constructor: ->
+    super('templates/html_prompt_modal')
+
+  _processUserInput : (userInput) =>
+    html = userInput.filter (e) ->
+      e.value if e.name is "html"
+
+
+    SelectionManager.restore()
+    document.execCommand('InsertHTML', null, html[0].value)
+
+
+# NOTE: Extensive docs for executeCommand method at
+# https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla#Executing_Commands
+#
+# Sexy content editable API: invoke the API methods using jQuery style shit. E.g:
+#
+#     $el.sexyContentEditable()
+#     ...
+#     $el.sexyContentEditable('setContent', 'my new content')
+#     $el.sexyContentEditable('appendContent', 'content to append')
+#
+class SexyContentEditable
+
+  ALL_BUTTONS = [ # All buttons
+    'undo', 'redo', 'clean', 'b', 'i', 'sub', 'sup', 'ul', 'ol', 'ltab', 'rtab', 'h1', 'h2', 'h3', 'h4', 'h5', 'p', 'prompt-link', 'prompt-html'
+  ]
+
+  constructor: (@$formElement) ->
+    @_extractConfiguration()
+    @_buildComponent()
+    @_bindEvents()
+
+  _extractConfiguration: ->
+    @value         = @$formElement.attr('value')
+    @buttonsConfig = @$formElement.data('toolbar-config') || 'default'
+    @buttons       = @$formElement.data('toolbar-buttons') || ALL_BUTTONS
+    @size          = @$formElement.data('size') || ''
+
+  _buildComponent: ->
+    sizeClass = "sexy-content-editable-content-#{@size}"
+    @$editor = $(JST["templates/editor"](size: sizeClass))
+
+    @$content = @$editor.find('.sexy-content-editable-content')
+    @$toolbar = @$editor.find('.sexy-content-editable-toolbar')
+
+    @$toolbar.find('a').each (_, button) =>
+      $button = $(button)
+      $button.remove() if $.inArray($button.data('name'), @buttons) == -1
+
+    # Ensure usage of P for when pressing
+    document.execCommand('defaultParagraphSeparator', false, 'p')
+
+    @$content.html(@value) if @value
+
+    @$formElement.after(@$editor)
+    @$formElement.hide()
+
+    @linkPrompt = new LinkPrompt()
+    @htmlPrompt = new HtmlPrompt()
+
+
+  _bindEvents: ->
+    # Toolbar use
+    @$toolbar.on 'click', 'a', @_toolbarButtonClickHandler
+
+    # Fake the change event
+    @$content.on 'focus', @_contentFocusHandler
+    @$content.on 'blur keyup paste', @_contentUpdateHandler
+
+    # Content change
+    @$content.on 'change', @_contentChangeHandler
+
+    # Input value change
+    @$formElement.on 'change', @_elementChangeHandler
+
+    # Focus management
+    @$editor.on 'focusin', @_enableButtons
+    @$editor.on 'focusout', @_disableButtons
+
+    # Edit links clicking on them
+    @$content.on 'click', 'a', @_editLink
+
+
+  _toolbarButtonClickHandler: (event) =>
+    event.preventDefault()
+    $button = $(event.currentTarget)
+    role = $button.data('role')
+    name = $button.data('name')
+
+
+    if prompt = name.match /prompt\-(.+)/
+      @_showPrompt(prompt[1])
+    else if md = role.match /b\-(.+)/
+      document.execCommand 'formatBlock', false, md[1]
+    else
+      document.execCommand role, false, null
+
+    @$content.trigger 'change'
+
+
+  _contentFocusHandler: (event) =>
+    @$content.data 'value', @$content.html()
+    @$content
+
+
+  _contentUpdateHandler: (event) =>
+    newHtml = @$content.html()
+
+    if @$content.data('value') isnt newHtml
+      # avoid problems with empty tags
+      newHtml = '' if @$content.text().trim().length == 0
+
+      @$content.data 'value', newHtml
+      @$content.trigger 'change'
+
+
+  _contentChangeHandler: (event) =>
+    @$formElement.attr 'value', @$content.data('value')
+
+
+  _elementChangeHandler : (event) =>
+    value = $(event.currentTarget).val()
+    @$content.html(value)
+
+
+  _enableButtons : =>
+    @$toolbar.find('a, button').attr('disabled', null)
+
+
+  _disableButtons : (event) =>
+    if @$editor.has(event.relatedTarget).length == 0
+      @$toolbar.find('a, button').attr('disabled', 'disabled')
+
+
+  _showPrompt : (prompt) ->
+    if prompt is 'link'
+      @linkPrompt.show()
+    else if prompt is 'html'
+      @htmlPrompt.show()
+
+
+  _editLink : (event) =>
+    event.preventDefault()
+    $link = $(event.currentTarget)
+    SelectionManager.select($link.get(0))
+
+    @linkPrompt.show(url: $link.attr('href'))
+
+  #
+  # PUBLIC API
+  #
+
+  setContent : (value) =>
+    @$content.html(value).trigger 'paste'
+
+  appendContent : (value) =>
+    oldContent = @$content.html()
+    @setContent(oldContent + value)
+
+$.fn.sexyContentEditable = (args...)->
+  @.each ->
+    $el = $ @
+    console.log('ola ke ase')
+
+    unless rte = $el.data('sexyContentEditable')
+      rte = new SexyContentEditable($el)
+      $el.data 'sexyContentEditable', rte
+
+    if args.length
+      method = args.splice(0, 1)[0]
+      rte[method].apply(rte, args)
+
+
+$ ->
+  $(document).ajaxComplete ->
+    $('[data-behaviour~=sexy-content-editable]').sexyContentEditable()
+  $('[data-behaviour~=sexy-content-editable]').sexyContentEditable()
+

data/app/assets/javascripts/templates/editor.jst.eco

@@ -0,0 +1,52 @@
+<div class="sexy-content-editable">
+  <div class="sexy-content-editable-toolbar">
+    <div class="btn-group">
+      <a href="#" class="btn btn-default" tabindex="-1" data-name='undo' data-role='undo' disabled><i class='fa fa-undo'></i></a>
+      <a href="#" class="btn btn-default" tabindex="-1" data-name='redo' data-role='redo' disabled><i class='fa fa-repeat'></i></a>
+    </div>
+    <div class="btn-group">
+      <a href="#" class="btn btn-default" tabindex="-1" data-name='clean' data-role='removeFormat' disabled><i class='fa fa-eraser'></i></a>
+      <a href="#" class="btn btn-default" tabindex="-1" data-name='b'     data-role='bold' disabled><i class='fa fa-bold'></i></a>
+      <a href="#" class="btn btn-default" tabindex="-1" data-name='i'     data-role='italic' disabled><i class='fa fa-italic'></i></a>
+      <a href="#" class="btn btn-default" tabindex="-1" data-name='sub'   data-role='subscript' disabled><i class='fa fa-subscript'></i></a>
+      <a href="#" class="btn btn-default" tabindex="-1" data-name='sup'   data-role='superscript' disabled><i class='fa fa-superscript'></i></a>
+    </div>
+    <div class="btn-group">
+      <a href="#" class="btn btn-default" tabindex="-1" data-name='ul'   data-role='insertUnorderedList' disabled><i class='fa fa-list-ul'></i></a>
+      <a href="#" class="btn btn-default" tabindex="-1" data-name='ol'   data-role='insertOrderedList' disabled><i class='fa fa-list-ol'></i></a>
+      <a href="#" class="btn btn-default" tabindex="-1" data-name='rtab' data-role='indent' disabled><i class='fa fa-indent'></i></a>
+      <a href="#" class="btn btn-default" tabindex="-1" data-name='ltab' data-role='outdent' disabled><i class='fa fa-outdent'></i></a>
+    </div>
+    <div class="btn-group">
+      <a href="#" class="btn btn-default" tabindex="-1" data-name='prompt-link' disabled><i class='fa fa-link'></i></a>
+      <a href="#" class="btn btn-default" tabindex="-1" data-name='prompt-html' disabled><i class='fa fa-html5'></i></a>
+    </div>
+
+    <div class="btn-group">
+      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1" disabled>
+        Texto <span class="caret"></span>
+      </button>
+      <ul class="dropdown-menu" role="menu">
+        <li>
+          <a href="#" tabindex="-1" data-name='h1' data-role='b-h1'>Cabecera 1</a>
+        </li>
+        <li>
+          <a href="#" tabindex="-1" data-name='h2' data-role='b-h2'>Cabecera 2</a>
+        </li>
+        <li>
+          <a href="#" tabindex="-1" data-name='h3' data-role='b-h3'>Cabecera 3</a>
+        </li>
+        <li>
+          <a href="#" tabindex="-1" data-name='h4' data-role='b-h4'>Cabecera 4</a>
+        </li>
+        <li class="divider"></li>
+        <li>
+          <a href="#" tabindex="-1" data-name='p'  data-role='b-p'>Párrafo</a>
+        </li>
+      </ul>
+    </div>
+
+  </div>
+  <div class="sexy-content-editable-content <%= @size %>" data-prevent-global-keybinding="true" contenteditable>
+  </div>
+</div>

data/app/assets/javascripts/templates/html_prompt_modal.jst.eco

@@ -0,0 +1,24 @@
+<div class="modal fade" data-prompt="html">
+  <form class="form-horizontal" role="form">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cerrar</span></button>
+          <h4 class="modal-title">Insertar código HTML</h4>
+        </div>
+        <div class="modal-body">
+          <div class="form-group">
+            <label class="col-sm-2 control-label" for="html">Código</label>
+            <div class="col-sm-10">
+              <textarea class="form-control" name="html" id="html" rows="10" autofocus/>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
+          <button type="submit" class="btn btn-primary">Insertar</button>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>

data/app/assets/javascripts/templates/link_prompt_modal.jst.eco

@@ -0,0 +1,25 @@
+<div class="modal fade" data-prompt="link">
+  <form class="form-horizontal" role="form">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cerrar</span></button>
+          <h4 class="modal-title">Enlaces</h4>
+        </div>
+        <div class="modal-body">
+          <div class="form-group">
+            <label class="col-sm-2 control-label" for="url">Url:</label>
+            <div class="col-sm-10">
+              <input type="url" class="form-control" name="url" id="url" autofocus required />
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
+          <button type="button" class="btn btn-danger"  data-behaviour="editor-remove-link" data-dismiss="modal">Quitar enlace</button>
+          <button type="submit" class="btn btn-primary">Enlazar</button>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>

data/app/assets/stylesheets/sexy-content-editable.css.scss

@@ -0,0 +1,72 @@
+/*
+  *= require sexy-content-editable
+  */
+
+@import 'bootstrap/variables';
+
+$text-color: #333;
+$input-border: #ccc;
+$input-border-focus: #66afe9;
+$state-danger-text: #333;
+$state-danger-border: #ccc;
+
+
+.sexy-content-editable {
+  margin-bottom: 25px;
+  margin-right: 0px;
+  margin-bottom: 0px;
+}
+
+.sexy-content-editable-toolbar {
+  margin-bottom: 0px;
+
+  .btn-group {
+    margin-left: 0px;
+    margin-right: 10px;
+    margin-bottom: 8px;
+  }
+
+  i {
+    font-size: 90%;
+  }
+
+  .btn {
+    padding: 4px 10px;
+
+    &[data-role^=b-] {
+      font-family: serif;
+    }
+  }
+
+  .icon-font {
+    color: lighten($text-color, 20%);
+  }
+}
+
+.sexy-content-editable-content {
+  margin: 6px 6px;
+  min-height: 100px;
+  padding: 4px;
+  border: 1px solid $input-border;
+  background: #fff;
+  color: #555;
+  overflow-y: auto;
+
+  border-radius: 4px 6px;
+  &:focus {
+    border-color: $input-border-focus;
+    outline: 0;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px adjust-color($input-border-focus, $alpha: 0.6);
+  }
+}
+
+
+.field_with_errors .sexy-content-editable-content {
+  color: $state-danger-text;
+  border-color: $state-danger-border;
+  &:focus {
+    border-color: rgb(233, 50, 45);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgb(248, 185, 183);
+  }
+}
+

data/lib/sexy-content-editable.rb

@@ -0,0 +1,6 @@
+module SexyContentEditable; end
+
+require "sexy_content_editable/version"
+require "sexy_content_editable/form_tag_helper"
+require "sexy_content_editable/form_builder"
+require "sexy_content_editable/engine"

data/lib/sexy_content_editable/engine.rb

@@ -0,0 +1,16 @@
+module SexyContentEditable
+  class Engine < ::Rails::Engine
+    initializer 'sexy_content_editable.initialize' do
+      config.to_prepare do
+        ActiveSupport.on_load(:action_view) do
+
+          include SexyContentEditable::FormTagHelper
+
+          class ActionView::Helpers::FormBuilder
+            include SexyContentEditable::FormBuilder
+          end
+        end
+      end
+    end
+  end
+end

data/lib/sexy_content_editable/form_builder.rb

@@ -0,0 +1,8 @@
+module SexyContentEditable
+  module FormBuilder
+
+    def sexy_content_editable(method, options = {})
+      @template.sexy_content_editable_tag(@object_name, method, objectify_options(options))
+    end
+  end
+end

data/lib/sexy_content_editable/form_tag_helper.rb

@@ -0,0 +1,13 @@
+module SexyContentEditable
+  module FormTagHelper
+
+    extend ActiveSupport::Concern
+
+    def sexy_content_editable_tag(name, value = nil, options = {})
+      data_options = options[:data] || {}
+      data_options.merge! behaviour: 'sexy-content-editable'
+      text_field_options = options.merge data: data_options
+      text_field name, value, text_field_options
+    end
+  end
+end

data/lib/sexy_content_editable/version.rb

@@ -0,0 +1,3 @@
+module SexyContentEditable
+  VERSION = "0.0.2"
+end

metadata

@@ -0,0 +1,112 @@
+--- !ruby/object:Gem::Specification
+name: sexy-content-editable
+version: !ruby/object:Gem::Version
+  version: 0.0.2
+platform: ruby
+authors:
+- Trabe Soluciones
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-01-07 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.7'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.7'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+- !ruby/object:Gem::Dependency
+  name: pry-nav
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.2.4
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.2.4
+- !ruby/object:Gem::Dependency
+  name: sass-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 4.0.3
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 4.0.3
+description: Sexy content editable for Rails forms
+email:
+- contact@trabesoluciones.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE.txt
+- README.md
+- app/assets/javascripts/sexy-content-editable.js.coffee
+- app/assets/javascripts/templates/editor.jst.eco
+- app/assets/javascripts/templates/html_prompt_modal.jst.eco
+- app/assets/javascripts/templates/link_prompt_modal.jst.eco
+- app/assets/stylesheets/sexy-content-editable.css.scss
+- lib/sexy-content-editable.rb
+- lib/sexy_content_editable/engine.rb
+- lib/sexy_content_editable/form_builder.rb
+- lib/sexy_content_editable/form_tag_helper.rb
+- lib/sexy_content_editable/version.rb
+homepage: ''
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.2.2
+signing_key: 
+specification_version: 4
+summary: Sexy content editable for Rails forms
+test_files: []