scrivito_editors 0.30.1 → 0.40.0.rc1

data/app/assets/javascripts/scrivito_editors/binary_editor.js.coffee

@@ -0,0 +1,49 @@
+$ ->
+  selector = '[data-scrivito-field-type=binary]:not([data-editor])'
+  status_indicator_class = 'image-editor-dragover'
+  image_container_class = 'scrivito-editor-image-container'
+
+  handle_file_upload = (event, element, file) ->
+    element.scrivito('save', file).then ->
+      element.scrivito('reload')
+
+  delete_binary = (cms_field) ->
+    if $(cms_field).scrivito('content')
+      $(cms_field).scrivito('save', null).then ->
+        $(cms_field).scrivito('reload')
+
+  binary_field_container = (binary_field) ->
+    if $(binary_field).prop('tagName') == 'IMG'
+      if $(binary_field).parent(".#{image_container_class}").length == 0
+        $(binary_field).wrap("<div class='#{image_container_class}'></div>")
+      $(binary_field).parent(".#{image_container_class}")
+    else
+      binary_field
+
+  add_delete_to_binary = (binary_element) ->
+    if $(binary_element).scrivito('content')
+      container = binary_field_container(binary_element)
+
+      if $(container).find('delete-binary').length == 0
+        delete_icon = $(
+          '<a href="#" class="delete-binary editing-button editing-red delete">' +
+          '<i class="editing-icon editing-icon-trash" /></a>'
+        )
+
+        delete_icon.click (event) ->
+          event.preventDefault()
+          delete_binary(binary_element)
+
+        $(container).prepend(delete_icon)
+
+  scrivito.on 'content', (content_root) ->
+    if scrivito.in_editable_view()
+      binary_elements = $(content_root).find(
+        "#{selector}[data-scrivito-editors-allow-delete]")
+
+      for binary_element in binary_elements
+        add_delete_to_binary(binary_element)
+
+  scrivito.on 'load', ->
+    if scrivito.in_editable_view()
+      scrivito.editors._file_drop_zone(selector, handle_file_upload, status_indicator_class)

data/app/assets/javascripts/scrivito_editors/date_editor.js.coffee

@@ -22,7 +22,7 @@ $ ->
         cmsField.scrivito('save', datetime)
           .done ->
             cmsField.trigger('save.scrivito_editors')
-            cmsField.trigger('scrivito_reload')
+            cmsField.scrivito('reload')
 
       $('body').on 'click', '[data-scrivito-field-type="date"]:not(.hasDatepicker):not([data-editor]), [data-editor~="date"]', (event) ->
         event.preventDefault()
@@ -42,9 +42,9 @@ $ ->
         template()
           .data('cmsField', cmsField)
           .insertAfter(cmsField)
-          .val(content)
           .keyup(onKeyup)
           .datetimepicker(options)
+          .datetimepicker('setDate', $(cmsField).scrivito('content'))
           .focus()
 
         cmsField.hide()

data/app/assets/javascripts/scrivito_editors/enum_editor.js.coffee

@@ -22,7 +22,10 @@ $ ->
         cmsField.scrivito('save', content).done ->
           cmsField.trigger('save.scrivito_editors')
 
-      $(document).on 'click', '[data-scrivito-field-type="enum"]:not([data-editor]), [data-editor~="enum"]', (event) ->
+      enumEditSelector = '[data-values][data-scrivito-field-type="enum"]' +
+          ':not([data-editor]), [data-editor~="enum"]'
+
+      $(document).on 'click', enumEditSelector, (event) ->
         cmsField = $(event.currentTarget)
         selected = cmsField.scrivito('content')
         values = cmsField.data('values')

data/app/assets/javascripts/scrivito_editors/helpers/file_drop_zone.js.coffee

@@ -0,0 +1,43 @@
+fetch_file = (event) ->
+  data_transfer = event.originalEvent.dataTransfer
+  return unless data_transfer
+
+  files = data_transfer.files
+  if (files.length > 1)
+    alert('You dropped multiple files, but only one file is supported.')
+    return
+
+  files[0]
+
+find_cms_field = (target) ->
+  if $(target).attr('data-scrivito-field-name')
+    $(target)
+  else
+    $(target).parent('[data-scrivito-field-name]')
+
+scrivito.editors._file_drop_zone = (selector, callback, status_indicator_class) ->
+  # Disable DnD for all elements by default to prevent the user
+  # from accidentally opening an image in browser.
+  $('body').on 'dragover', -> false
+  $('body').on 'drop', -> false
+
+  status_indicator_class ||= 'scrivito-editor-dragover'
+
+  body_element = $('body')
+  body_element.on 'dragover.scrivito-editor', selector, (event) ->
+    event.preventDefault()
+    $(find_cms_field(event.target)).addClass(status_indicator_class)
+
+  body_element.on 'dragleave.scrivito-editor', selector, (event) ->
+    event.preventDefault()
+    $(find_cms_field(event.target)).removeClass(status_indicator_class)
+
+  body_element.on 'drop.scrivito-editor', selector, (event) ->
+    event.preventDefault()
+    cms_field = find_cms_field(event.target)
+    file = fetch_file(event)
+    $(cms_field).removeClass(status_indicator_class)
+
+    if file
+      callback(event, cms_field, file)
+

data/app/assets/javascripts/scrivito_editors/html_editor.js.coffee

@@ -2,91 +2,95 @@
 # attributes and provides autosave on top of the default Redactor settings.
 
 # Check if the namespace for plugins exists and create it otherwise.
-unless @RedactorPlugins?
-  @RedactorPlugins = {}
+@RedactorPlugins ||= {}
 
-@RedactorPlugins.over_aggressive_cleanup_fix = init: -> @cleanSavePreCode = (html) -> html
-
-# Plugin for closing the editor with a button in the toolbar.
-@RedactorPlugins.close =
-  init: ->
-    @buttonAddFirst('close', 'Close', @closeAction)
-
-  closeAction: (buttonName, buttonDOM, buttonObj, event) ->
-    @.callback('blur')
+# API to override Redactor options
+# @api public
+scrivito.editors.html_editor =
+  redactor:
+    options: {}
 
 $ ->
+  # Plugin for closing the editor with a button in the toolbar.
+  RedactorPlugins.scrivito_editors_close = ->
+    init: ->
+      button = @button.addFirst('close', 'Close')
+      @button.addCallback button, -> closeEditor @
+
   # Stores redactor options, custom settings and configures callbacks.
-  redactorOptions = ->
-    return {} =
-      cleanSpaces: false
-      convertLinks: false
-      formattingPre: false
-      paragraphy: false
-      tidyHtml: false
-
-      dropdownShowCallback: -> @_dropdownOpen = true
-      dropdownHideCallback: -> @_dropdownOpen = false
-      modalOpenedCallback: -> @_modalOpen = true
-      modalClosedCallback: -> @_modalOpen = false
-      focusCallback: -> @_hasFocus = true
-
-      buttons: [
-        'formatting', 'bold', 'italic', 'deleted', 'underline',
-        'unorderedlist', 'orderedlist', 'table', 'link', 'html',
-      ]
-
-      # This options allows to configure what plugins are loaded. Plugins need to be defined in the
-      # +RedactorPlugins+ namespace.
-      plugins: ['close', 'over_aggressive_cleanup_fix']
-
-      # This option allows you to set whether Redactor gets cursor focus on load or not.
-      # http://imperavi.com/redactor/docs/settings/#set-focus
-      focus: true
-
-      # With this option turned on, Redactor will automatically replace divs to paragraphs.
-      # http://imperavi.com/redactor/docs/settings/#set-convertDivs
-      convertDivs: false
-
-      # This callback fires every time when content changes in Redactor.
-      # http://imperavi.com/redactor/docs/callbacks/#callback-changeCallback
-      changeCallback: ->
-        saveContents(@)
-
-      # This callback is triggered when Redactor loses focus.
-      # http://imperavi.com/redactor/docs/callbacks/#callback-blurCallback
-      blurCallback: ->
-        editor = @
-        editor._hasFocus = false
-        unless @_dropdownOpen || @_modalOpen
-          # workaround for issue with context menu (e. g. unlink) being neither modal nor dropdown
-          setTimeout ->
-            unless editor._hasFocus
-              saveContents(editor)
-              editor.destroy()
-          , 250
-
-      # This callback is triggered when a key is released.
-      # http://imperavi.com/redactor/docs/callbacks/#callback-keyupCallback
-      keyupCallback: (event) ->
+  scrivito.editors.html_editor.redactor.default_options =
+    buttons: [
+      'formatting', 'bold', 'italic', 'deleted', 'underline',
+      'unorderedlist', 'orderedlist', 'table', 'link', 'html',
+    ]
+
+    buttonSource: true
+    cleanSpaces: false
+    cleanOnPaste: false
+    convertLinks: false
+    linkTooltip: false # disabled, causes unexpected blur on redactor 9 and 10
+    paragraphize: false
+
+    plugins: [
+      'scrivito_editors_close'
+      'table'
+    ]
+
+    replaceDivs: false
+    tabifier: false
+
+    blurCallback: -> closeEditor @
+    changeCallback: -> saveContents @
+    destroyCallback: -> saveContents @
+    dropdownShowCallback: -> saveContents @
+    modalOpenedCallback: -> saveContents @
+
+    keyupCallback: (event) ->
+      key = event.keyCode || event.which
+
+      if key == 27
         event.stopPropagation()
-        key = event.keyCode || event.which
-
-        if key == 27
-          @.callback('blur')
-        else
-          saveContents(@)
-
-      # This callback allows to get pasted code after clean on paste.
-      # http://imperavi.com/redactor/docs/callbacks/#callback-pasteAfterCallback
-      pasteAfterCallback: (html) ->
-        saveContents(@)
-        html
+        closeEditor @
+      else
+        saveContents @
+
+    initCallback: ->
+      cmsField = $(@.$element)
+      content = cmsField.scrivito('content')
+      @_initialScrivitoContent = content
+
+      # @code.get() is empty during init, so we get all HTML via selections
+      @selection.selectAll()
+      htmlWithSelection = @selection.getHtml()
+      @selection.removeMarkers()
+      html = @selection.getHtml()
+
+      if html != content
+        @code.set(content)
+        @selection.selectAll()
+        html = @selection.getHtml()
+        @focus.setEnd()
+      else
+        @code.set(htmlWithSelection)
+        @selection.restore()
+
+      @_initialRedactorContent = html
+
+    startCallback: ->
+      if document.getSelection().anchorNode
+        # see http://imperavi.com/redactor/examples/click-to-edit/
+        @insert.node @selection.getMarker(), false
+
+  # Close editor (implies save)
+  closeEditor = (editor) ->
+    cmsField = $(editor.$element)
+    editor.core.destroy()
+    cmsField.removeClass('scrivito_editors_redactor')
 
   # Saves the current editor content to the CMS.
   saveContents = (editor) ->
     cmsField = editor.$element
-    content = editor.get()
+    content = getCurrentContent(editor)
 
     if content != cmsField.scrivito('content')
       cmsField.scrivito('save', content).done ->
@@ -94,16 +98,28 @@ $ ->
     else
       $.Deferred().resolve()
 
+  getCurrentContent = (editor) ->
+    content = editor.code.get()
+
+    if content == editor._initialRedactorContent
+      content = editor._initialScrivitoContent
+
+    content
+
+  getOptions = ->
+    $.extend {}, scrivito.editors.html_editor.redactor.default_options,
+        scrivito.editors.html_editor.redactor.options
+
   # Registers Redactor for all CMS html attributes found in the given scope of the DOM element.
   addOnclickRedactorHandlers = ->
     $(':root').on 'click.scrivito_editors', '[data-scrivito-field-type="html"]:not([data-editor]), [data-editor~="html"]', (event) ->
       event.preventDefault()
       cmsField = $(@)
 
-      unless cmsField.hasClass('redactor_editor')
-        cmsField.redactor(redactorOptions())
-        cmsField.redactor('set', cmsField.scrivito('content'), false)
-        cmsField.redactor('focus')
+      unless cmsField.hasClass('scrivito_editors_redactor')
+        cmsField
+          .redactor(getOptions())
+          .addClass('scrivito_editors_redactor')
 
   scrivito.on 'load', ->
     if scrivito.in_editable_view()

data/app/assets/javascripts/scrivito_editors/image_editor.js.coffee

@@ -3,27 +3,10 @@ $ ->
 
   activateForFieldType = (fieldType) ->
     selector = 'img[data-scrivito-field-type=' + fieldType  + ']:not([data-editor])'
-    activateForSelector(selector)
+    scrivito.editors._file_drop_zone(selector, save)
 
-  activateForSelector = (selector) ->
-    bodyElement = $('body')
-    bodyElement.on 'dragover.image-editor', selector, (event) ->
-      event.preventDefault()
-      $(event.target).addClass(statusIndicatorClass)
-
-    bodyElement.on 'dragleave.image-editor', selector, (event) ->
-      event.preventDefault()
-      $(event.target).removeClass(statusIndicatorClass)
-
-    bodyElement.on 'drop.image-editor', selector, (event) ->
-      event.preventDefault()
-      target = $(event.target)
-      fieldType = target.attr('data-scrivito-field-type')
-      save(event, $(event.target), fieldType)
-
-  save = (event, element, fieldType) ->
-    file = fetchFile(event, element)
-    return unless file
+  save = (event, element, file) ->
+    fieldType = element.attr('data-scrivito-field-type')
 
     createImage(file).then (obj) ->
       value = switch
@@ -32,19 +15,7 @@ $ ->
         else $.error('Field type must be "reference" or "linklist".')
 
       element.scrivito('save', value).then ->
-        element.trigger('scrivito_reload')
-
-  fetchFile = (event, element) ->
-    data_transfer = event.originalEvent.dataTransfer
-    return unless data_transfer
-
-    files = data_transfer.files
-    if (files.length > 1)
-      alert('You dropped multiple files, but only one file is supported.')
-      element.removeClass(statusIndicatorClass)
-      return
-
-    files[0]
+        element.scrivito('reload')
 
   createImage = (file) ->
     name = file.name.replace(/[^a-z0-9_.$\-]/ig, '-')
@@ -63,9 +34,4 @@ $ ->
       activateForFieldType('reference')
 
       # Activate the image editor if it is explicitely selected.
-      activateForSelector('[data-editor~="image"]')
-
-      # Disable DnD for all elements by default to prevent the user
-      # from accidentally opening an image in browser.
-      $('body').on 'dragover', -> false
-      $('body').on 'drop', -> false
+      scrivito.editors._file_drop_zone('[data-editor~="image"]', save,statusIndicatorClass)

data/app/assets/javascripts/scrivito_editors/multienum_editor.js.coffee

@@ -23,7 +23,10 @@ $ ->
         cmsField.scrivito('save', content).done ->
           cmsField.trigger('save.scrivito_editors')
 
-      $(document).on 'click', '[data-scrivito-field-type="multienum"]:not([data-editor]), [data-editor~="multienum"]', (event) ->
+      multienumEditSelector = '[data-values][data-scrivito-field-type="multienum"]' +
+          ':not([data-editor]), [data-editor~="multienum"]'
+
+      $(document).on 'click', multienumEditSelector, (event) ->
         cmsField = $(event.currentTarget)
         selected = cmsField.scrivito('content')
         values = cmsField.data('values')

data/app/assets/javascripts/scrivito_editors/placeholder.js.coffee

@@ -6,6 +6,7 @@ $ ->
   #   scrivito_tag(:div, @obj, :my_attribute, data: { placeholder: 'My custom placeholder text.' })
   addPlaceholder = ->
     cmsFields = $('[data-scrivito-field-type]')
+      .not('[data-scrivito-field-type$=enum]:not([data-values])')
 
     cmsFields.each ->
       cmsField = $(@)