scrivito_editors 0.0.12 → 0.0.13

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

@@ -27,7 +27,7 @@ $ ->
             cmsField.trigger('save.scrivito_editors')
             cmsField.trigger('scrivito_reload')
 
-      $('body').on 'click', '[data-scrivito-field-type="date"]:not(.hasDatepicker):not([data-editor]), [data-editor="date"]', (event) ->
+      $('body').on 'click', '[data-scrivito-field-type="date"]:not(.hasDatepicker):not([data-editor]), [data-editor~="date"]', (event) ->
         event.preventDefault()
 
         cmsField = $(this)

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

@@ -22,7 +22,7 @@ $ ->
         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) ->
+      $(document).on 'click', '[data-scrivito-field-type="enum"]:not([data-editor]), [data-editor~="enum"]', (event) ->
         cmsField = $(event.currentTarget)
         selected = cmsField.scrivito('content')
         values = cmsField.data('values')

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

@@ -77,7 +77,7 @@ $ ->
 
   # Registers Redactor for all CMS html attributes found in the given scope of the DOM element.
   addOnclickRedactorHandlers = (domElement) ->
-    domElement.on 'click', '[data-scrivito-field-type="html"]:not([data-editor]), [data-editor="html"]', (event) ->
+    domElement.on 'click', '[data-scrivito-field-type="html"]:not([data-editor]), [data-editor~="html"]', (event) ->
       event.preventDefault()
       cmsField = $(@)
 

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

@@ -0,0 +1,72 @@
+$ ->
+  # Integrates an image drag & drop editor.
+
+  scrivito.on 'load', ->
+    if scrivito.in_editable_view()
+      # Activate the image editor for all supported field types.
+      activateForFieldType('linklist')
+      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
+
+  statusIndicatorClass = 'image-editor-dragover'
+
+  activateForFieldType = (fieldType) ->
+    selector = 'img[data-scrivito-field-type=' + fieldType  + ']:not([data-editor])'
+    activateForSelector(selector)
+
+  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
+
+    createImage(file).then (obj) ->
+      value = switch
+        when fieldType == 'reference' then obj.id
+        when fieldType == 'linklist' then [{obj_id: obj.id}]
+        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]
+
+  createImage = (file) ->
+    name = file.name.replace(/[^a-z0-9_.$\-]/ig, '-')
+    path = '_resources/' + Math.floor(Math.random() * 1000) + '/' + name
+
+    scrivito.create_obj
+      blob: file
+      _path: path
+      _obj_class: 'Image'

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

@@ -0,0 +1,124 @@
+$ ->
+  # An editor for CMS linklist attributes.
+
+  # Creates the DOM for one link element of the linklist and substitutes the
+  # title and url attribute.
+  template = (attributes) ->
+    attributes ||= {}
+
+    title = attributes['title'] || ''
+    url = attributes['url'] || ''
+
+    $("<ul><li>
+       <input type=\"text\" name=\"title\" value=\"#{title}\" placeholder=\"Title\" />
+       <input type=\"text\" name=\"url\" value=\"#{url}\" placeholder=\"Url\" class=\"editing-url\" />
+       <div class=\"actions\">
+         <a href=\"#\" class=\"editing-button resourcebrowser-open editing-green\">
+           <i class=\"editing-icon editing-icon-search\" />
+         </a>
+       </div></li></ul>")
+
+  resourcebrowserButtonTemplate = ->
+    icon = $('<i></i>')
+      .addClass('editing-icon')
+      .addClass('editing-icon-plus')
+
+    button = $('<button></button>')
+      .addClass('editing-button')
+      .addClass('editing-green')
+      .addClass('add-link')
+      .html(icon)
+
+    button
+
+  # Returns the closest linklist DOM element.
+  getCmsField = (element) ->
+    element.closest('[data-scrivito-field-type=link]')
+
+  # Saves the entire linklist to the CMS and stores the last successfully saved value.
+  save = (cmsField) ->
+    value = getAttributes(cmsField) || null
+
+    cmsField.scrivito('save', value).done ->
+      cmsField.trigger('save.scrivito_editors')
+
+  # Run when clicking the '...' button inside a li.
+  onOpenResourcebrowser = (event) ->
+    event.preventDefault()
+
+    linkItem = $(event.currentTarget).closest('li')
+    cmsField = getCmsField(linkItem)
+    filters = cmsField.data('filters') || cmsField.data('filter')
+
+    Resourcebrowser.open
+      selection: []
+      filters: filters
+      selectionMode: 'single'
+      onSave: (selection) =>
+        onResourcebrowserSaveLinkItem(selection, linkItem)
+
+  # Resource browser callback for saving a single link.
+  onResourcebrowserSaveLinkItem = (selection, linkItem) ->
+    url = buildUrl(selection[0])
+    linkItem.find('[name=url]').val(url)
+
+    # trigger save after inserting the value
+    cmsField = getCmsField(linkItem)
+    save(cmsField)
+
+    true
+
+  # Transforms an obj id into an url that can be parsed by Scrivito
+  # to establish an internal link.
+  buildUrl = (id) ->
+    "/#{id}"
+
+  # Collects all link attributes.
+  getAttributes = (cmsField) ->
+    items = $(cmsField).find('li')
+
+    if items.length > 0
+      item = $(items[0])
+      title = item.find('[name=title]').val()
+      url = item.find('[name=url]').val()
+
+      if url
+        'title': title
+        'url': url
+
+  # Turns the server side generated link data into the link editor using a template.
+  transformLinks = (cmsFields) ->
+    for cmsField in cmsFields
+      cmsField = $(cmsField)
+      items = cmsField.find('li')
+
+      for item in items
+        item = $(item)
+
+        content = template
+          title: item.data('title')
+          url: item.data('url')
+
+        item.html(content)
+
+      if items.length == 0
+        cmsField.append(template())
+
+  # Automatically save when focus is lost.
+  onBlur = (event) ->
+    cmsField = getCmsField($(event.currentTarget))
+
+    save(cmsField)
+
+  initialize = (root) ->
+    linkElements = $(root).find('[data-scrivito-field-type="link"]:not([data-editor]), [data-editor="link"]')
+
+    if linkElements.length
+      transformLinks(linkElements)
+
+      linkElements.on 'blur', 'li input', onBlur
+      linkElements.on 'click', 'a.resourcebrowser-open', onOpenResourcebrowser
+
+  # Initialize link editor and setup event callbacks.
+  scrivito.on 'content', (root) ->
+    initialize(root)

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

@@ -151,7 +151,7 @@ $ ->
     save(cmsField)
 
   initialize = (root) ->
-    linklistElements = $(root).find('[data-scrivito-field-type="linklist"]:not([data-editor]), [data-editor="linklist"]')
+    linklistElements = $(root).find('[data-scrivito-field-type="linklist"]:not([data-editor]), [data-editor~="linklist"]')
 
     if linklistElements.length
       transformLinks(linklistElements)

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

@@ -23,7 +23,7 @@ $ ->
         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) ->
+      $(document).on 'click', '[data-scrivito-field-type="multienum"]:not([data-editor]), [data-editor~="multienum"]', (event) ->
         cmsField = $(event.currentTarget)
         selected = cmsField.scrivito('content')
         values = cmsField.data('values')

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

@@ -3,7 +3,7 @@ $ ->
 
   scrivito.on 'load', ->
     if scrivito.in_editable_view()
-      $('body').on 'click', '[data-scrivito-field-type="reference"]:not([data-editor]), [data-editor="reference"]', (event) ->
+      $('body').on 'click', '[data-scrivito-field-type="reference"]:not([data-editor]), [data-editor~="reference"]', (event) ->
         event.preventDefault()
 
         cmsField = $(event.currentTarget)

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

@@ -93,7 +93,7 @@ $ ->
   # Initialize referencelist editor and setup event callbacks.
   scrivito.on 'content', (root) ->
     if scrivito.in_editable_view()
-      elements = $(root).find('[data-scrivito-field-type="referencelist"]:not([data-editor]), [data-editor="referencelist"]')
+      elements = $(root).find('[data-scrivito-field-type="referencelist"]:not([data-editor]), [data-editor~="referencelist"]')
 
       if elements.length
         transform(elements)

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

@@ -18,7 +18,7 @@ $ ->
         content = ui.value
         cmsField.text(ui.value)
 
-      $('body').on 'click', '[data-editor="slider"]:not(.active)', (event) ->
+      $('body').on 'click', '[data-editor~="slider"]:not(.active)', (event) ->
         cmsField = $(event.currentTarget)
         content = cmsField.scrivito('content')
         min = cmsField.attr('data-min') || 1

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

@@ -53,7 +53,7 @@ $ ->
     cmsField.siblings().addBack().not(cmsField.data('siblings_before_edit'))
 
   initialize = ->
-    $('body').on 'mouseenter', '[data-scrivito-field-type="string"]:not([data-editor]), [data-editor="string"]', (event) ->
+    $('body').on 'mouseenter', '[data-scrivito-field-type="string"]:not([data-editor]), [data-editor~="string"]', (event) ->
       cmsField = $(event.currentTarget)
 
       unless cmsField.attr('contenteditable')?
@@ -63,10 +63,12 @@ $ ->
           .blur(onBlur)
           .keypress(onKey)
           .keyup(onKey)
-          .on('input', onInput)
+
+      if cmsField.attr('data-autosave') != 'false'
+        cmsField.on('input', onInput)
 
     # Prevent editable link strings to follow the link target on click.
-    $('body').on 'click', '[data-scrivito-field-type="string"]:not([data-editor]), [data-editor="string"]', (event) ->
+    $('body').on 'click', '[data-scrivito-field-type="string"]:not([data-editor]), [data-editor~="string"]', (event) ->
       event.preventDefault()
 
   scrivito.on 'load', ->

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

@@ -51,7 +51,7 @@ $ ->
     cmsField.siblings().addBack().not(cmsField.data('siblings_before_edit'))
 
   initialize = ->
-    $('body').on 'mouseenter', '[data-scrivito-field-type="text"]:not([data-editor]), [data-editor="text"]', (event) ->
+    $('body').on 'mouseenter', '[data-scrivito-field-type="text"]:not([data-editor]), [data-editor~="text"]', (event) ->
       cmsField = $(event.currentTarget)
 
       unless cmsField.attr('contenteditable')?
@@ -69,7 +69,7 @@ $ ->
           .on('input', onInput)
 
     # Prevent editable link text to follow the link target on click.
-    $('body').on 'click', '[data-scrivito-field-type="text"]:not([data-editor]), [data-editor="text"]', (event) ->
+    $('body').on 'click', '[data-scrivito-field-type="text"]:not([data-editor]), [data-editor~="text"]', (event) ->
       event.preventDefault()
 
   scrivito.on 'load', ->

data/app/assets/javascripts/scrivito_editors.js

@@ -10,10 +10,5 @@
 // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
 // about supported directives.
 //
-//= require jquery.ui.sortable
-//= require jquery.ui.datepicker
-//= require jquery.ui.slider
-//= require jquery-ui-timepicker-addon.min
-//= require redactor
-//= require scrivito_resourcebrowser
-//= require_tree .
+//= require scrivito_editors_addons
+//= require scrivito_editors_core

data/app/assets/javascripts/scrivito_editors_addons.js

@@ -0,0 +1,4 @@
+//= require jquery-ui/sortable
+//= require jquery-ui/datepicker
+//= require jquery-ui/slider
+//= require jquery-ui-timepicker-addon.min

data/app/assets/javascripts/scrivito_editors_core.js

@@ -0,0 +1,3 @@
+//= require redactor
+//= require scrivito_resourcebrowser
+//= require_tree ./scrivito_editors