scrivito_editors 0.0.8

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

@@ -0,0 +1,37 @@
+$ ->
+  # Define editor behavior for multienum attributes.
+
+  scrivito.on 'editing', ->
+    template = (values) ->
+      element = $('<select></select>')
+        .attr('multiple', 'true')
+        .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="multienum"]:not([data-editor]), [data-editor="multienum"]', (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/placeholder.js.coffee

@@ -0,0 +1,22 @@
+$ ->
+  # Display a placeholder for empty CMS attributes. The placeholder can be overwritten by
+  # defining a +data-placeholder+ HTML attribute on the DOM element generated by +cms_tag+.
+  #
+  # For example:
+  #   cms_tag(:div, @obj, :my_attribute, data: { placeholder: 'My custom placeholder text.' })
+  addPlaceholder = ->
+    cmsFields = $('[data-scrivito-field-type]')
+
+    cmsFields.each ->
+      cmsField = $(@)
+      fieldName = cmsField.attr('data-scrivito-field-name')
+      defaultPlaceholder = 'Click to edit the "' + fieldName + '" attribute ...'
+      placeholder = cmsField.attr('data-placeholder') || defaultPlaceholder
+
+      cmsField.attr('data-placeholder', placeholder)
+
+  scrivito.on 'new_content', ->
+    addPlaceholder()
+
+  scrivito.on 'editing', ->
+    addPlaceholder()

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

@@ -0,0 +1,28 @@
+$ ->
+  # Integrates a mediabrowser based editor for reference CMS attributes.
+
+  scrivito.on 'editing', ->
+    $('body').on 'click', '[data-scrivito-field-type="reference"]:not([data-editor]), [data-editor="reference"]', (event) ->
+      event.preventDefault()
+
+      cmsField = $(event.currentTarget)
+      selected = [cmsField.scrivito('content')].filter (element) -> element
+      filters = cmsField.data('filters') || cmsField.data('filter')
+
+      # Open mediabrowser with current reference selected and restrict selection to one reference.
+      Mediabrowser.open
+        selection: selected
+        filters: filters
+
+        onSave: (selection) =>
+          onMediabrowserSave(selection, cmsField)
+
+    # Save single reference when media browser calls "save".
+    onMediabrowserSave = (selection, cmsField) ->
+      value = selection[0] || null
+
+      cmsField.scrivito('save', value)
+      .done ->
+        cmsField.trigger('scrivito_reload')
+
+      true

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

@@ -0,0 +1,111 @@
+$ ->
+  # An editor for CMS referencelist attributes.
+
+  # Creates the DOM for one reference element of the referencelist and substitutes the
+  # name and id attribute.
+  itemTemplate = ->
+    $("<div class=\"actions\">
+         <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('mediabrowser-open')
+      .html(icon)
+
+    button
+
+  # Returns the closest referencelist DOM element.
+  getCmsField = (element) ->
+    element.closest('[data-scrivito-field-type=referencelist]')
+
+  # Saves the referencelist to the CMS when changed and stores the last successfully saved value.
+  save = (ids, cmsField) ->
+    lastSaved = getLastSaved(cmsField)
+
+    unless JSON.stringify(ids) == JSON.stringify(lastSaved)
+      cmsField.scrivito('save', ids)
+        .done ->
+          storeLastSaved(cmsField, ids)
+          cmsField.trigger('scrivito_reload')
+
+  # Run when clicking the media browser button.
+  onMediabrowserOpen = (event) ->
+    event.preventDefault()
+
+    cmsField = getCmsField($(event.currentTarget))
+    filters = cmsField.data('filters') || cmsField.data('filter')
+    ids = getIds(cmsField)
+
+    Mediabrowser.open
+      selection: ids
+      filters: filters
+
+      onSave: (selection) =>
+        save(selection, cmsField)
+
+  # Collects all reference ids for a given referencelist.
+  getIds = (cmsField) ->
+    items = $(cmsField).find('li')
+
+    value =
+      for item in items
+        $(item).data('id')
+
+  # Removes a single reference from the referencelist.
+  remove = (event) ->
+    event.preventDefault()
+
+    target = $(event.currentTarget)
+    cmsField = getCmsField(target)
+
+    target.closest('li').remove()
+
+    ids = getIds(cmsField)
+    save(ids, cmsField)
+
+  # Turns the server side generated referencelist data into the reference editor using a template.
+  transform = (elements) ->
+    elements.append(mediabrowserButtonTemplate)
+
+    items = elements.find('li')
+
+    for item in items
+      $(item).append(itemTemplate)
+
+  # 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)
+
+  # Initialize referencelist editor and setup event callbacks.
+  scrivito.on 'new_content', (root) ->
+    elements = $(root).find('[data-scrivito-field-type="referencelist"]:not([data-editor]), [data-editor="referencelist"]')
+
+    if elements.length
+      transform(elements)
+
+      for element in elements
+        ids = getIds(element)
+        storeLastSaved(element, ids)
+
+      elements.on 'click', 'li a.delete', remove
+      elements.on 'click', 'button.mediabrowser-open', onMediabrowserOpen
+
+      elements.find('ul').sortable
+        update: (event) ->
+          cmsField = getCmsField($(event.target))
+          ids = getIds(cmsField)
+
+          save(ids, cmsField)

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

@@ -0,0 +1,39 @@
+$ ->
+  # Slider for integer values stored in a string CMS attribute.
+
+  scrivito.on 'editing', ->
+    template = ->
+      $('<div></div>')
+
+    onStop = (event, ui) ->
+      cmsField = $(@).data('cmsField')
+      content = ui.value
+      cmsField.scrivito('save', content).done ->
+        cmsField.trigger('scrivito_reload')
+
+    onSlide = (event, ui) ->
+      cmsField = $(@).data('cmsField')
+      content = ui.value
+      cmsField.text(ui.value)
+
+    $('body').on 'click', '[data-editor="slider"]:not(.active)', (event) ->
+      cmsField = $(event.currentTarget)
+      content = cmsField.scrivito('content')
+      min = cmsField.attr('data-min') || 1
+      max = cmsField.attr('data-max') || 10
+      step = cmsField.attr('data-step') || 1
+
+      cmsField.addClass('active')
+
+      template()
+        .data('cmsField', cmsField)
+        .insertAfter(cmsField)
+        .slider(
+          min: parseInt(min)
+          max: parseInt(max)
+          step: parseInt(step)
+          value: content
+          range: 'min'
+          stop: onStop
+          slide: onSlide
+        )

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

@@ -0,0 +1,83 @@
+$ ->
+  # This file integrates contenteditable for string attributes.
+
+  scrivito.on 'editing', ->
+    cmsField = undefined
+    timeout = undefined
+
+    onKey = (event) ->
+      if timeout?
+        clearTimeout(timeout)
+
+      if cmsField?
+        key = event.keyCode || event.which
+
+        switch key
+          when 13 # Enter
+            event.preventDefault()
+            cmsField.blur()
+          when 27 # Esc
+            if event.type == 'keyup'
+              event.stopPropagation()
+              cmsField
+                .off('blur')
+                .trigger('scrivito_reload')
+              cmsField = undefined
+          else
+            setTimeout(cleanUp)
+            timeout = setTimeout ( ->
+              save(false)
+            ), 3000
+
+    onBlur = (event) ->
+      if cmsField?
+        field = cmsField
+
+        save(true).done ->
+          if field.attr('data-reload') == 'true'
+            field.trigger('scrivito_reload')
+
+    save = (andClose) ->
+      if timeout?
+        clearTimeout(timeout)
+
+      cleanUp()
+
+      clone = cmsFieldAndPastedContent().clone()
+      clone.find('br').replaceWith('\n')
+      content = clone.text()
+      clone.remove()
+
+      field = cmsField
+
+      if andClose
+        cmsField.text(content)
+        cmsField = undefined
+
+      field.scrivito('save', content)
+
+    cleanUp = ->
+      siblings = cmsFieldAndPastedContent()
+      pasted = siblings.not(cmsField)
+      if pasted.length > 0
+        pasted.remove()
+        cmsField.text(siblings.text())
+
+    cmsFieldAndPastedContent = ->
+      cmsField.siblings().addBack().not(cmsField.data('siblings_before_edit'))
+
+    $('body').on 'mouseenter', '[data-scrivito-field-type="string"]:not([data-editor]), [data-editor="string"]', (event) ->
+      unless cmsField?
+        cmsField = $(event.currentTarget)
+
+      unless cmsField.attr('contenteditable')?
+        cmsField
+          .data('siblings_before_edit', cmsField.siblings())
+          .attr('contenteditable', true)
+          .blur(onBlur)
+          .keypress(onKey)
+          .keyup(onKey)
+
+    # 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) ->
+      event.preventDefault()

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

@@ -0,0 +1,85 @@
+$ ->
+  # This file integrates contenteditable for text attributes.
+  # It provides multiline editing support.
+
+  scrivito.on 'editing', ->
+    cmsField = undefined
+    timeout = undefined
+
+    onKey = (event) ->
+      if timeout?
+        clearTimeout(timeout)
+
+      if cmsField?
+        key = event.keyCode || event.which
+
+        switch key
+          when 27 # Esc
+            if event.type == 'keyup'
+              event.stopPropagation()
+              cmsField
+                .off('blur')
+                .trigger('scrivito_reload')
+              cmsField = undefined
+          else
+            setTimeout(cleanUp)
+            timeout = setTimeout ( ->
+              save(false)
+            ), 3000
+
+    onBlur = (event) ->
+      if cmsField?
+        field = cmsField
+
+        save(true).done ->
+          if field.attr('data-reload') == 'true'
+            field.trigger('scrivito_reload')
+
+    save = (andClose) ->
+      if timeout?
+        clearTimeout(timeout)
+
+      cleanUp()
+
+      clone = cmsFieldAndPastedContent().clone()
+      clone.find('br').replaceWith('\n')
+      content = clone.text()
+      clone.remove()
+
+      field = cmsField
+
+      if andClose
+        cmsField.text(content)
+        cmsField = undefined
+
+      field.scrivito('save', content)
+
+    cleanUp = ->
+      siblings = cmsFieldAndPastedContent()
+      pasted = siblings.not(cmsField)
+      if pasted.length > 0
+        pasted.remove()
+        cmsField.text(siblings.text())
+
+    cmsFieldAndPastedContent = ->
+      cmsField.siblings().addBack().not(cmsField.data('siblings_before_edit'))
+
+    $('body').on 'mouseenter', '[data-scrivito-field-type="text"]:not([data-editor]), [data-editor="text"]', (event) ->
+      unless cmsField?
+        cmsField = $(event.currentTarget)
+
+      html = cmsField.html()
+      html_nl2br = html.replace(/\n/g, '<br />')
+      cmsField.html(html_nl2br) if html != html_nl2br
+
+      unless cmsField.attr('contenteditable')?
+        cmsField
+          .data('siblings_before_edit', cmsField.siblings())
+          .attr('contenteditable', true)
+          .blur(onBlur)
+          .keypress(onKey)
+          .keyup(onKey)
+
+    # 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) ->
+      event.preventDefault()

data/app/assets/stylesheets/scrivito_editors.css

@@ -0,0 +1,16 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ *= require jquery.ui.datepicker
+ *= require jquery.ui.slider
+ *= require jquery-ui-timepicker-addon.min
+ *= require redactor
+ *= require_tree .
+ */

data/app/assets/stylesheets/scrivito_editors/buttons.css

@@ -0,0 +1,161 @@
+/*
+  Defines various button styles used throughout the inplace editing GUI. Button styles are not
+  bound to one particular inplace editing feature, but are shared accross the menubar, the
+  mediabrowser or on edit views.
+*/
+
+.editing-button {
+  color: #555;
+  cursor: pointer;
+  border:0px;
+  display: inline-block;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 14px;
+  margin: 0 10px 10px 0;
+  min-height: 14px;
+  min-width: 30px;
+  padding: 8px 15px;
+  text-align: center;
+  vertical-align: middle;
+  background: #fcfcfc;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  -webkit-box-shadow: 0 0 5px rgba(0,0,0,.2);
+  -moz-box-shadow: 0 0 5px rgba(0,0,0,.2);
+  box-shadow: 0 0 5px rgba(0,0,0,.2);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+}
+
+.editing-button:hover {
+  color: #333;
+  cursor: pointer;
+  background: #fff;
+}
+
+.editing-button:active {
+  color: #333;
+  cursor: pointer;
+  background: #eee;
+}
+
+input.editing-button {
+  height: 30px;
+}
+
+a.editing-button,
+a.editing-button:active {
+  text-decoration: none;
+}
+
+
+.editing-button.editing-blue {
+  background: #516b8b;
+  color: #fff;
+}
+
+.editing-button.editing-blue:hover {
+  background: #6781A1;
+  color: #fff;
+}
+
+.editing-button.editing-blue:active {
+  background-color: #425C7C;
+  color: #fff;
+}
+
+.editing-button.editing-green {
+  background: #658B51;
+  color: #fff;
+}
+
+.editing-button.editing-green:hover {
+  background: #7EA46A;
+  color: #fff;
+}
+
+.editing-button.editing-green:active {
+  background: #52783E;
+  color: #fff;
+}
+
+.editing-button.editing-red {
+  background: #AA4040;
+  color: #fff;
+}
+
+.editing-button.editing-red:hover {
+  background: #C05656;
+  color: #fff;
+}
+
+.editing-button.editing-red:active {
+  background: #A03636;
+  color: #fff;
+}
+
+.editing-button.editing-yellow {
+  background: #D8D63A;
+  color: #666;
+}
+
+.editing-button.editing-yellow:hover {
+  background: #F0EE52;
+  color: #666;
+}
+
+.editing-button.editing-yellow:active {
+  background: #CBC92D;
+  color: #666;
+}
+
+.editing-button.editing-disabled,
+.editing-button.editing-disabled:hover,
+.editing-button.editing-disabled:active {
+  color: #aaa!important;
+  cursor: not-allowed;
+  background: #eee;
+}
+
+.editing-button.editing-disabled .editing-icon,
+.editing-button.editing-disabled .editing-icon:hover {
+  color: #aaa!important;
+  cursor: not-allowed;
+}
+
+.editing-button .editing-icon {
+  color: #333;
+  font-size: 9px;
+  line-height: 14px;
+}
+
+.editing-button .editing-icon:hover {
+  cursor: pointer;
+}
+
+.editing-button.editing-blue .editing-icon,
+.editing-button.editing-green .editing-icon,
+.editing-button.editing-red .editing-icon,
+.editing-button.editing-yellow .editing-icon {
+  color: #fff;
+}
+
+/*
+  Styling for buttons in the details view dialog.
+*/
+
+.details-view [data-scrivito-field-type="string"] .editing-button,
+.details-view [data-scrivito-field-type="text"] .editing-button,
+.details-view [data-scrivito-field-type="html"] .editing-button,
+.details-view [data-scrivito-field-type="linklist"] .editing-button,
+.details-view [data-scrivito-field-type="referencelist"] .editing-button,
+.details-view [data-scrivito-field-type="reference"] .editing-button,
+.details-view [data-scrivito-field-type="date"] .editing-button {
+  margin: 10px 10px 0 0;
+}