scrivito_editors 0.0.8

data/app/assets/javascripts/mediabrowser/uploader.js.coffee

@@ -0,0 +1,132 @@
+@MediabrowserUploader = do ->
+  dropZoneSelector: '.editing-mediabrowser-items'
+  dropOverCssClass: 'uploader-drag-over'
+  mimeTypeMapping:
+    'image/*': 'Image'
+    'video/*': 'Video'
+
+  _initializeBindings: ->
+    dropZone = @modal.find(@dropZoneSelector)
+
+    dropZone.on 'dragover', (event) =>
+      $(event.currentTarget).addClass(@dropOverCssClass)
+      event.preventDefault()
+
+    dropZone.on 'dragleave', (event) =>
+      $(event.currentTarget).removeClass(@dropOverCssClass)
+      event.preventDefault()
+
+    dropZone.on 'drop', (event) =>
+      $(event.currentTarget).removeClass(@dropOverCssClass)
+      @_onDrop(event)
+      event.preventDefault()
+
+  _objClassForMimeType: (mimeType) ->
+    for mime, objClass of @mimeTypeMapping
+      return objClass if mimeType.match(mime)
+
+    undefined
+
+  _processQueue: (queue, createdObjs, promise) ->
+    promise.then (data) =>
+      @onUploadSuccess(data)
+
+    file = queue.pop()
+
+    if file?
+      @_createResource(file).then (obj) =>
+        @_updateProgress(file, '100%')
+        createdObjs.push(obj)
+      .always =>
+        @_processQueue(queue, createdObjs, promise)
+
+      return promise
+    else
+      return promise.resolve(createdObjs)
+
+  _addProgressWrapper: () ->
+    itemsElement = $('.editing-mediabrowser-items').empty()
+
+    $('<div></div>')
+      .addClass('editing-mediabrowser-loading')
+      .appendTo itemsElement
+
+    $('<div></div>')
+      .addClass('editing-mediabrowser-progress-wrapper')
+      .appendTo itemsElement
+
+  _addProgress: (file) ->
+    progressBar = $('<div></div>')
+      .addClass('editing-mediabrowser-progress-bar')
+      .css('width', '10%')
+
+    progress = $('<div></div>')
+      .addClass('editing-mediabrowser-progress')
+      .html(progressBar)
+
+    fileName = $('<p></p>')
+      .html(file.name)
+
+    $('<div></div>')
+      .addClass('editing-mediabrowser-progress-file')
+      .append(fileName)
+      .append(progress)
+      .prependTo $('.editing-mediabrowser-progress-wrapper')
+
+    file['progressBar'] = progressBar
+
+  _updateProgress: (file, percent) ->
+    file.progressBar.css('width', percent)
+
+  _onDrop: (event) ->
+    dataTransfer = event.originalEvent.dataTransfer
+
+    unless dataTransfer?
+      return
+
+    files = dataTransfer.files
+
+    if files.length == 0
+      return
+
+    @onUploadStart(queue)
+    @_addProgressWrapper()
+
+    promise = $.Deferred()
+
+    queue = for file in files
+      @_addProgress(file)
+      file
+
+    @_processQueue(queue, [], promise)
+
+    promise
+
+  _randomResourceId: ->
+    hex = Math.floor(Math.random() * Math.pow(16, 8)).toString(16)
+
+    while (hex.length < 8)
+      hex = '0' + hex
+
+    hex
+
+  _createResource: (file) ->
+    objName = file.name.replace(/[^a-z0-9_.$\-]/ig, '-')
+    path = "_resources/#{@_randomResourceId()}/#{objName}"
+
+    scrivito.create_obj
+      blob: file
+      _path: path
+      _obj_class: @_objClassForMimeType(file.type)
+
+  init: (@modal) ->
+    @_initializeBindings()
+
+  # Hook for 3rd parties when the upload starts.
+  onUploadStart: (files) ->
+
+  # Hook for 3rd parties when the upload fails.
+  onUploadFailure: (error) ->
+
+  # Hook for 3rd parties when the upload was successful.
+  onUploadSuccess: (objs) ->

data/app/assets/javascripts/scrivito_editors.js

@@ -0,0 +1,18 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file.
+//
+// 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_tree .

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

@@ -0,0 +1,50 @@
+$ ->
+  # Define editor behavior for date attributes.
+
+  scrivito.on 'editing', ->
+    template = ->
+      $('<input />')
+        .attr('type', 'text')
+
+    onKeyup = (event) ->
+      key = event.keyCode || event.which
+
+      switch key
+        when 27 # Esc
+          # Prevent the property view to close when the ESC key is pressed.
+          event.stopPropagation()
+
+    save = (dateTimeText) ->
+      element = $(this)
+      cmsField = element.data('cmsField')
+
+      if dateTimeText? && dateTimeText.length > 0
+        dateTimeText = new Date(dateTimeText)
+
+      cmsField.scrivito('save', dateTimeText)
+        .done ->
+          cmsField.trigger('scrivito_reload')
+
+    $('body').on 'click', '[data-scrivito-field-type="date"]:not(.hasDatepicker):not([data-editor]), [data-editor="date"]', (event) ->
+      event.preventDefault()
+
+      cmsField = $(this)
+      content = cmsField.html().trim()
+      dateFormat = cmsField.attr('data-date-format') || 'yy-mm-dd'
+      timeFormat = cmsField.attr('data-time-format') || 'HH:mm:ss'
+
+      $('body').keyup(onKeyup)
+
+      template()
+        .data('cmsField', cmsField)
+        .insertAfter(cmsField)
+        .val(content)
+        .keyup(onKeyup)
+        .datetimepicker(
+          dateFormat: dateFormat
+          timeFormat: timeFormat
+          onClose: save
+        )
+        .focus()
+
+      cmsField.hide()

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

@@ -0,0 +1,36 @@
+$ ->
+  # Define editor behavior for enum attributes.
+
+  scrivito.on 'editing', ->
+    template = (values) ->
+      element = $('<select></select>')
+        .addClass('form-control')
+
+      $.each values, (index, value) ->
+        $('<option></option>')
+          .attr('value', value)
+          .text(value)
+          .appendTo(element)
+
+      element
+
+    save = (event) ->
+      element = $(event.currentTarget)
+      cmsField = element.data('cmsField')
+      content = element.val()
+      cmsField.scrivito('save', content).done ->
+        cmsField.trigger('scrivito_reload')
+
+    $(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')
+
+      template(values)
+        .data('cmsField', cmsField)
+        .val(selected)
+        .insertAfter(cmsField)
+        .focusout(save)
+        .focus()
+
+      cmsField.hide()

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

@@ -0,0 +1,140 @@
+$ ->
+  # Configuration and behavior of Redactor html editor. The editor is used for all html CMS
+  # attributes and provides autosave, undo and redo functionality on top of the default Redactor
+  # settings.
+
+  # Stores the id of the last triggered timeout for later reference.
+  timeoutID = undefined
+
+  # Milliseconds after which to save the content automatically.
+  autosaveInterval = 3000
+
+  # Stores the last saved content written to the CMS to allow comparison with editor content.
+  savedContent = undefined
+
+  # Stores the content before the editor is opened and changes occur.
+  originalContent = undefined
+
+  # Stores redactor options, custom settings and configures callbacks.
+  redactorOptions = ->
+    return {} =
+      # This option allows you to add your own buttons with callback to the toolbar.
+      # http://imperavi.com/redactor/docs/settings/#set-buttonsCustom
+      buttonsCustom:
+        undoButton:
+          title: 'Undo'
+          callback: undoAction
+        redoButton:
+          title: 'Redo'
+          callback: redoAction
+
+      # This setting defines the array of toolbar buttons.
+      # http://imperavi.com/redactor/docs/settings/#set-buttons
+      buttons: ['undoButton', 'redoButton',
+        '|', 'formatting',
+        '|', 'bold', 'italic', 'deleted', 'underline',
+        '|', 'unorderedlist', 'orderedlist',
+        '|', 'table', 'link',
+        '|', 'html'
+      ]
+
+      # 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 is triggered after Redactor is launched.
+      # http://imperavi.com/redactor/docs/callbacks/#callback-initCallback
+      initCallback: ->
+        originalContent = @get()
+
+      # This callback fires every time when content changes in Redactor.
+      # http://imperavi.com/redactor/docs/callbacks/#callback-changeCallback
+      changeCallback: ->
+        autosaveAction(@)
+
+      # This callback is triggered when Redactor loses focus.
+      # http://imperavi.com/redactor/docs/callbacks/#callback-blurCallback
+      blurCallback: ->
+        saveContents(@).done =>
+          @.destroy()
+          reload(@)
+
+      # This callback is triggered when a key is released.
+      # http://imperavi.com/redactor/docs/callbacks/#callback-keyupCallback
+      keyupCallback: (event) ->
+        event.stopPropagation()
+        key = event.keyCode || event.which
+
+        if key == 27
+          cancelEditing(@)
+        else
+          autosaveAction(@)
+
+      # This callback allows to get pasted code after clean on paste.
+      # http://imperavi.com/redactor/docs/callbacks/#callback-pasteAfterCallback
+      pasteAfterCallback: (html) ->
+        autosaveAction(@)
+        html
+
+  # Registers a timeout to save the editor content after a certain interval. The timeout gets reset
+  # on every change.
+  autosaveAction = (editor) ->
+    if timeoutID
+      clearTimeout(timeoutID)
+
+    timeoutID = setTimeout ( ->
+      saveContents(editor)
+    ), autosaveInterval
+
+  undoAction = ->
+    @execCommand('undo')
+
+  redoAction = ->
+    @execCommand('redo')
+
+  # Saves the current editor content to the CMS if it has changed.
+  saveContents = (editor) ->
+    content = editor.get()
+
+    if savedContent != content
+      cmsField = editor.$element
+      cmsField.scrivito('save', content).done ->
+        savedContent = content
+
+    else
+      $.Deferred().resolve()
+
+  reload = (editor) ->
+    cmsField = editor.$element
+    cmsField.trigger('scrivito_reload')
+
+  # Restores the original content before the editor was opened, also saves it back to the CMS
+  # because autosave could have overwritten the content and closes the editor.
+  cancelEditing = (editor) ->
+    editor.set(originalContent)
+    saveContents(editor).done ->
+      reload(editor)
+    editor.destroy()
+
+  # 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) ->
+      event.preventDefault()
+      cmsField = $(@)
+
+      unless cmsField.hasClass('redactor_editor')
+        cmsField.html(cmsField.scrivito('content') || '')
+        cmsField.redactor(redactorOptions())
+        cmsField.redactor('focus')
+
+  # Registers all handlers when inplace editing is activated.
+  scrivito.on 'editing', ->
+    addOnclickRedactorHandlers($('body'))
+
+  # Registers all handlers when content has changed.
+  scrivito.on 'new_content', (domElement) ->
+    addOnclickRedactorHandlers($(domElement))

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

@@ -0,0 +1,176 @@
+$ ->
+  # 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'] || ''
+
+    $("<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 mediabrowser-open editing-green\">
+           <i class=\"editing-icon editing-icon-search\" />
+         </a>
+         <a href=\"#\" class=\"editing-button editing-red delete\">
+           <i class=\"editing-icon editing-icon-trash\" />
+         </a>
+       </div>")
+
+  mediabrowserButtonTemplate = ->
+    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=linklist]')
+
+  # Saves the entire linklist to the CMS and stores the last successfully saved value.
+  save = (cmsField) ->
+    value = getAttributes(cmsField)
+    lastSaved = getLastSaved(cmsField)
+
+    unless JSON.stringify(value) == JSON.stringify(lastSaved)
+      cmsField.scrivito('save', value).done ->
+        storeLastSaved(cmsField, value)
+
+  # Run when clicking the '...' button inside a li.
+  onOpenMediabrowser = (event) ->
+    event.preventDefault()
+
+    linkItem = $(event.currentTarget).closest('li')
+    cmsField = getCmsField(linkItem)
+    filters = cmsField.data('filters') || cmsField.data('filter')
+
+    Mediabrowser.open
+      selection: []
+      filters: filters
+      onSave: (selection) =>
+        onMediabrowserSaveLinkItem(selection, linkItem)
+
+  # Media browser callback for saving a single link.
+  onMediabrowserSaveLinkItem = (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 for a given linklist.
+  getAttributes = (cmsField) ->
+    items = $(cmsField).find('li')
+
+    attributes =
+      for item in items
+        item = $(item)
+        title = item.find('[name=title]').val()
+        url = item.find('[name=url]').val()
+
+        # Make sure the url is not empty.
+        if !isEmpty(url)
+          'title': title
+          'url': url
+
+    # Remove empty array elements.
+    removeEmptyElements(attributes)
+
+  isEmpty = (value) ->
+    !value
+
+  removeEmptyElements = (array) ->
+    $.grep(array, (n) -> n)
+
+  # Adds a new link to the linklist.
+  addLink = (event) ->
+    event.preventDefault()
+
+    cmsField = getCmsField($(event.currentTarget))
+    content = $('<li>').html(template())
+
+    cmsField.find('ul').append(content)
+
+  # Removes a link from the linklist.
+  removeLink = (event) ->
+    event.preventDefault()
+
+    target = $(event.currentTarget)
+    cmsField = getCmsField(target)
+
+    target.closest('li').remove()
+    save(cmsField)
+
+  # Turns the server side generated linklist data into the linklist editor using a template.
+  transformLinks = (cmsFields) ->
+    cmsFields.append(mediabrowserButtonTemplate)
+
+    items = cmsFields.find('li')
+
+    for item in items
+      item = $(item)
+
+      content = template
+        title: item.data('title')
+        url: item.data('url')
+
+      item.html(content)
+
+  # Returns the last saved value.
+  getLastSaved = (cmsField) ->
+    cmsField.data('last-saved')
+
+  # Stores a given value as last saved.
+  storeLastSaved = (cmsField, value) ->
+    $(cmsField).data('last-saved', value)
+
+  # Automatically save when focus is lost.
+  onBlur = (event) ->
+    cmsField = getCmsField($(event.currentTarget))
+
+    save(cmsField)
+
+  initialize = (root) ->
+    linklistElements = $(root).find('[data-scrivito-field-type="linklist"]:not([data-editor]), [data-editor="linklist"]')
+
+    if linklistElements.length
+      transformLinks(linklistElements)
+
+      for linklistElement in linklistElements
+        storeLastSaved(linklistElement, getAttributes(linklistElement))
+
+      linklistElements.on 'blur', 'li input', onBlur
+      linklistElements.on 'click', 'li a.delete', removeLink
+      linklistElements.on 'click', 'button.add-link', addLink
+      linklistElements.on 'click', 'a.mediabrowser-open', onOpenMediabrowser
+
+      linklistElements.find('ul').sortable
+        update: (event) ->
+          cmsField = getCmsField($(event.target))
+
+          save(cmsField)
+
+  # Initialize linklist editor and setup event callbacks.
+  scrivito.on 'new_content', (root) ->
+    initialize(root)
+
+  scrivito.on 'editing', ->
+    initialize(document)