chr 0.2.8 → 0.3.5

data/app/assets/javascripts/input-html.coffee

@@ -18,8 +18,8 @@
 #   body_html: { type: 'html', label: 'Article' }
 #
 # Dependencies:
-#= require chr/vendor/ace
-#= require chr/vendor/mode-html
+#= require vendor/ace
+#= require vendor/mode-html
 #
 # -----------------------------------------------------------------------------
 
@@ -38,20 +38,23 @@ class @InputHtml extends InputString
   _update_inputs: ->
     @value = @editor.getSession().getValue()
     @$input.val(@value)
+    @$input.trigger('change')
 
 
   # PUBLIC ================================================
 
   initialize: ->
-    @editor  = ace.edit(@$editor.get(0))
-    @session = @editor.getSession()
+    @config.beforeInitialize?(this)
+
+    @editor = ace.edit(@$editor.get(0))
+    @editor.$blockScrolling = Infinity
 
+    @session = @editor.getSession()
     @session.setValue(@$input.val())
     @session.setUseWrapMode(true)
     @session.setMode("ace/mode/html")
 
     # ace options: https://github.com/ajaxorg/ace/wiki/Configuring-Ace
-    @editor.$blockScrolling = Infinity # disable warning
     @editor.setOptions
       autoScrollEditorIntoView: true
       minLines:                 5

data/app/assets/javascripts/input-markdown.coffee

@@ -20,9 +20,9 @@
 #   body_md: { type: 'markdown', label: 'Article', htmlFieldName: 'body_html' }
 #
 # Dependencies:
-#= require chr/vendor/marked
-#= require chr/vendor/ace
-#= require chr/vendor/mode-markdown
+#= require vendor/marked
+#= require vendor/ace
+#= require vendor/mode-markdown
 #
 # -----------------------------------------------------------------------------
 
@@ -45,23 +45,28 @@ class @InputMarkdown extends InputString
   _update_inputs: ->
     md_source = @session.getValue()
     @$input.val(md_source)
+    @$input.trigger('change')
 
     if @$inputHtml
       html = marked(md_source)
       @$inputHtml.val(html)
+      @$inputHtml.trigger('change')
 
 
   # PUBLIC ================================================
 
   initialize: ->
+    @config.beforeInitialize?(this)
+
     @editor = ace.edit(@$editor.get(0))
-    @session = @editor.getSession()
+    @editor.$blockScrolling = Infinity
 
+    @session = @editor.getSession()
     @session.setValue(@$input.val())
+    @session.setUseWrapMode(true)
     @session.setMode("ace/mode/markdown")
 
     # options: https://github.com/ajaxorg/ace/wiki/Configuring-Ace
-    @editor.$blockScrolling = Infinity # disable warning
     @editor.setOptions
       autoScrollEditorIntoView: true
       minLines:                 5

data/app/assets/javascripts/input-redactor.coffee

@@ -1,61 +1 @@
-# -----------------------------------------------------------------------------
-# Author: Alexander Kravets <alex@slatestudio.com>,
-#         Slate Studio (http://www.slatestudio.com)
-#
-# Coding Guide:
-#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
-# -----------------------------------------------------------------------------
-
-# -----------------------------------------------------------------------------
-# INPUT REDACTOR
-# -----------------------------------------------------------------------------
-#
-# Dependencies:
-#= require redactor
-#= require chr/vendor/redactor.fixedtoolbar
-#
-# -----------------------------------------------------------------------------
-
-class @InputRedactor extends InputString
-
-  # PRIVATE ===============================================
-
-  _add_input: ->
-    @$el.css('opacity', 0)
-    @$input =$ "<textarea class='redactor' name='#{ @name }' rows=1>#{ @_safe_value() }</textarea>"
-    @$el.append @$input
-
-
-  # PUBLIC ================================================
-
-  initialize: ->
-    plugins = [ 'fixedtoolbar' ]
-    if Loft? then plugins.push('loft')
-
-    redactor_options =
-      focus:            false
-      imageFloatMargin: '20px'
-      buttonSource:     true
-      pastePlainText:   true
-      plugins: plugins
-      buttons: [ 'html', 'formatting', 'bold', 'italic', 'deleted', 'unorderedlist', 'orderedlist', 'link' ]
-
-    @config.redactorOptions ?= {}
-    $.extend(redactor_options, @config.redactorOptions)
-
-    @$input.redactor(redactor_options)
-
-    @$el.css('opacity', 1)
-
-    @config.onInitialize?(this)
-
-
-  updateValue: (@value) ->
-    @$input.redactor('insert.set', @_safe_value())
-
-
-chr.formInputs['redactor'] = InputRedactor
-
-
-
-
+#= require ./redactor/input-redactor

data/app/assets/javascripts/redactor/input-redactor.coffee

@@ -0,0 +1,53 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# INPUT REDACTOR
+# -----------------------------------------------------------------------------
+#
+# Dependencies:
+#= require redactor
+#= require vendor/redactor.fixedtoolbar
+#= require ./input-redactor_character
+# -----------------------------------------------------------------------------
+
+class @InputRedactor extends InputString
+
+  # PRIVATE ===============================================
+
+  _add_input: ->
+    @$el.css('opacity', 0)
+    @$input =$ "<textarea class='redactor' name='#{ @name }' rows=1>#{ @_safe_value() }</textarea>"
+    @$el.append @$input
+
+
+  # PUBLIC ================================================
+
+  initialize: ->
+    @config.beforeInitialize?(this)
+
+    @$input.redactor(@_redactor_options())
+
+    @$el.css('opacity', 1)
+
+    @config.onInitialize?(this)
+
+
+  updateValue: (@value) ->
+    @_trigger_change = false
+    @$input.redactor('code.set', @value)
+
+
+include(InputRedactor, redactorCharacter)
+
+
+chr.formInputs['redactor'] = InputRedactor
+
+
+
+

data/app/assets/javascripts/redactor/input-redactor_character.coffee

@@ -0,0 +1,83 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# REDACTOR CUSTOM VERSION
+#= require ./input-redactor_images
+# -----------------------------------------------------------------------------
+
+# change default fast speed from 200 to 10 as it's used by redactor modals
+# while closing
+console.log ':: [redactor-character] change $.fx.speeds.fast from 200 to 10 ::'
+$.fx.speeds.fast = 10
+
+@redactorCharacter =
+
+  # PRIVATE ===============================================
+
+  # TODO: fixed toolbar disabled on mobile
+  _redactor_options: ->
+    @_trigger_change = true
+
+    @config.redactorOptions ?= {}
+
+    # workaround plugins & custom configuration to include loft
+    # and optional fixedtoolbar
+    plugins = @config.redactorOptions.plugins || []
+    delete @config.redactorOptions.plugins
+
+    if ! chr.isMobile()
+      plugins.push('fixedtoolbar')
+
+    if Loft?
+      plugins.push('loft')
+
+    config = @_get_default_config(plugins)
+
+    if chr.isMobile()
+      config.toolbarFixed = false
+      # config.toolbarFixedTopOffset = 40
+
+    $.extend(config, @config.redactorOptions)
+
+    return config
+
+
+  _get_default_config: (plugins) ->
+    focus:            false
+    imageFloatMargin: '20px'
+    buttonSource:     true
+    pastePlainText:   true
+    scrollTarget:     chr.module.view.$content
+    plugins:          plugins
+    buttons:          [ 'html',
+                        'formatting',
+                        'bold',
+                        'italic',
+                        'deleted',
+                        'unorderedlist',
+                        'orderedlist',
+                        'link' ]
+
+
+    # to have caching working we need to trigger 'change' event for textarea
+    # when content got changed in redactor, but skip this when updating value
+    # via `updateValue` method
+    changeCallback: =>
+      if @_trigger_change
+        @$input.trigger('change')
+      @_trigger_change = true
+
+
+    initCallback: ->
+      new RedactorImages(this)
+
+
+
+
+

data/app/assets/javascripts/redactor/input-redactor_images.coffee

@@ -0,0 +1,166 @@
+# -----------------------------------------------------------------------------
+# Author: Alexander Kravets <alex@slatestudio.com>,
+#         Slate Studio (http://www.slatestudio.com)
+#
+# Coding Guide:
+#   https://github.com/thoughtbot/guides/tree/master/style/coffeescript
+# -----------------------------------------------------------------------------
+
+# -----------------------------------------------------------------------------
+# REDACTOR IMAGES
+# -----------------------------------------------------------------------------
+
+class @RedactorImages
+  constructor: (@redactor) ->
+
+    @redactor.opts.modal.imageEdit       = @_modal_edit_image()
+    @redactor.image.update               = ($image) => @update($image)
+    @redactor.image.showEdit             = ($image) => @_show_edit($image)
+    @redactor.image.loadEditableControls = ($image) => @_load_editable_controls($image)
+
+
+  _modal_edit_image: ->
+    """<section id="redactor-modal-image-edit">
+         <label>Image Alternative Text</label>
+         <input type="text" id="redactor-image-title" />
+
+         <label class="redactor-image-position-option">Position</label>
+         <select class="redactor-image-position-option" id="redactor-image-align">
+           <option value="none">None</option>
+           <option value="left">Left</option>
+           <option value="center">Center</option>
+           <option value="right">Right</option>
+         </select>
+
+         <label class="redactor-image-link-option">Link URL</label>
+         <input type="text" id="redactor-image-link-url" class="redactor-image-link-option" />
+
+         <label class="redactor-image-link-option">Link Title</label>
+         <input type="text" id="redactor-image-link-title" class="redactor-image-link-option" />
+
+         <label class="redactor-image-link-option"><input type="checkbox" id="redactor-image-link-blank"> Open link in new tab</label>
+       </section>"""
+
+
+  update: ($image) ->
+    @redactor.image.hideResize()
+    @redactor.buffer.set()
+
+    $link = $image.closest('a')
+
+    $image.attr('alt', $('#redactor-image-title').val())
+
+    @redactor.image.setFloating($image)
+
+    # as link
+    link  = $.trim($('#redactor-image-link-url').val())
+    title = $.trim($('#redactor-image-link-title').val())
+
+    if link != ''
+
+      target = if ( $('#redactor-image-link-blank').prop('checked') ) then true else false
+
+      if $link.size() == 0
+        a =$ "<a href='#{ link }' title='#{ title }'>#{ @redactor.utils.getOuterHtml($image) }</a>"
+
+        if target
+          a.attr('target', '_blank')
+
+        $image.replaceWith(a)
+
+      else
+        $link.attr('href', link)
+        $link.attr('title', title)
+
+        if target
+          $link.attr('target', '_blank')
+
+        else
+          $link.removeAttr('target')
+
+    else if $link.size() != 0
+      $link.replaceWith(@redactor.utils.getOuterHtml($image))
+
+    @redactor.modal.close()
+    @redactor.observe.images()
+    @redactor.code.sync()
+
+
+  _show_edit: ($image) ->
+    $link = $image.closest('a')
+
+    @redactor.image.hideResize()
+    @redactor.modal.load('imageEdit', @redactor.lang.get('edit'), 705)
+
+    @redactor.modal.createCancelButton()
+    @redactor.image.buttonDelete = @redactor.modal.createDeleteButton(@redactor.lang.get('_delete'))
+    @redactor.image.buttonSave   = @redactor.modal.createActionButton(@redactor.lang.get('save'))
+
+    @redactor.image.buttonDelete.on 'click', $.proxy(( => @redactor.image.remove($image) ), @redactor)
+    @redactor.image.buttonSave.on   'click', $.proxy(( => @redactor.image.update($image) ), @redactor)
+
+    $('#redactor-image-title').val($image.attr('alt'))
+
+    if ! @redactor.opts.imageLink
+      $('.redactor-image-link-option').hide()
+
+    else
+      $redactorImageLinkUrl   = $('#redactor-image-link-url')
+      $redactorImageLinkTitle = $('#redactor-image-link-title')
+
+      $redactorImageLinkUrl.attr('href', $image.attr('src'))
+
+      if $link.size() != 0
+        $redactorImageLinkUrl.val($link.attr('href'))
+        $redactorImageLinkTitle.val($link.attr('title'))
+
+        if $link.attr('target') == '_blank'
+          $('#redactor-image-link-blank').prop('checked', true)
+
+    if ! @redactor.opts.imagePosition
+      $('.redactor-image-position-option').hide()
+
+    else
+      floatValue = if ($image.css('display') == 'block' && $image.css('float') == 'none') then 'center' else $image.css('float')
+      $('#redactor-image-align').val(floatValue)
+
+    @redactor.modal.show()
+
+
+  # for some reason when image is a link, tooltip is shown with the image edit dialog,
+  # add e.stopPropagation() to skip tooltip callback
+  _load_editable_controls: ($image) ->
+    imageBox =$ '<span id="redactor-image-box" data-redactor="verified">'
+    imageBox.css('float', $image.css('float')).attr('contenteditable', false)
+
+    if $image[0].style.margin != 'auto'
+      imageBox.css
+        marginTop:    $image[0].style.marginTop
+        marginBottom: $image[0].style.marginBottom
+        marginLeft:   $image[0].style.marginLeft
+        marginRight:  $image[0].style.marginRight
+
+      $image.css('margin', '')
+
+    else
+      imageBox.css({ 'display': 'block', 'margin': 'auto' })
+
+    $image.css('opacity', '.5').after(imageBox)
+
+    if @redactor.opts.imageEditable
+      # editter
+      @redactor.image.editter =$ "<span id='redactor-image-editter' data-redactor='verified'>Edit</span>"
+      @redactor.image.editter.attr('contenteditable', false)
+      @redactor.image.editter.on('click', $.proxy(( (e) => e.stopPropagation() ; @redactor.image.showEdit($image) ), @redactor))
+
+      imageBox.append(@redactor.image.editter)
+
+      # position correction
+      editerWidth = @redactor.image.editter.innerWidth()
+      @redactor.image.editter.css('margin-left', '-' + editerWidth/2 + 'px')
+
+    return @redactor.image.loadResizableControls($image, imageBox)
+
+
+
+