scrivito_editors 0.0.8

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: cf1ebdd00044d7054e121007f00f33c8db2d49c5
+  data.tar.gz: daf06bd788bba66cad36195e3d03243f2bf51f3c
+SHA512:
+  metadata.gz: d9571c486b4a348b976259632dd20194eff1e8af0acb3cc12a29e30e844e5e60cac5930080b594183976e770f2daf23ca0c99f2329dcce958cd9e8fe38b2b8b3
+  data.tar.gz: f62413860d2790e1d6a9195b6dd653ff5ccd4a6207b96ba10d987562d6c05114d87ca197740024b18dcd3ba2494e1d0fd4aeac276bbb1ea7337389bc6785e412

data/CHANGELOG.md

@@ -0,0 +1,48 @@
+# v0.0.8
+  * Use Twitter Bootstrap styling for enum and multienum select fields.
+  
+# v0.0.7
+  * Linklist and referencelist editors now better handle all aspects of the inplace editing process
+    for these two attributes. The "add" button no longer has to be rendered by the application code.
+    The styling of both editors was also improved to make it more user friendly.
+  * Mediabrowser: Thumbnails only display an image, if the object defines a `image?` method, that
+    returns `true`, otherwise a generic icon is rendered.
+  * Bugfix: The string and text editor now also save correctly, when highlighting and editing the
+    content without triggering a `click` event.
+  * Bugfix: The placeholder now also works for attributes, that have been cleared without triggering
+    a reload of the page afterwards. (Thanks @gertimon)
+  * Bugfix: The default placeholder text for empty CMS attributes only used the name of the first
+    attribute on the page, instead of the correct field name for each CMS attribute.
+
+# v0.0.6
+  * Rewrite of string and text editor to better support pasting HTML, correctly handling quotes,
+    inserting the carrot at the correct position and better multiline support for preformatted text
+    fields. (Thanks @dcsaszar)
+  * Bugfix: Using renamed `obj_class_name` method from the new Scrivito SDK instead of `obj_class`.
+  * Changed the behavior when an item is clicked in the mediabrowser. Instead of opening the
+    inspector, the item is now selected or deselected. A small magnifying glass in the upper right
+    corner of the thumbnail now allows to open the inspector for the item.
+  * Rename the fallback inspector view to `details.html`, to be consistent to the new Scrivito SDK.
+
+# v0.0.5
+  * The template used in the inspector is no longer configurable and always corresponds to the
+    details view used by the Scrivito SDK.
+  * Bugfix: The mediabrowser did not use a correct start index to render multiple thumbnails.
+
+# v0.0.4
+  * Bugfix: Mediabrowser buttons now also work in Chrome browser.
+
+# v0.0.3
+  * Updated redactor to version 9.2.1 and removed all custom settings.
+  * Added option `data-reload` to the string editor to configure if a reload event should
+    be triggered or not after saving the changes. (Thanks @apepper)
+
+# v0.0.2
+  * Added placeholder text to empty CMS attributes.
+
+# v0.0.1
+  * Updated html editor seperator height from 29px to 27px.
+  * Updated the README to describe the new gem.
+  * Added editing icons used in some of the editors and the media browser.
+  * Removed the saving animation for editors to not disturb the in-place editing
+    experience.

data/LICENSE

@@ -0,0 +1,4 @@
+Copyright (c) 2009 - 2014 Infopark AG (http://www.infopark.com)
+
+This software can be used and modified under the LGPL-3.0. Please refer to
+http://www.gnu.org/licenses/lgpl-3.0.html for the license text.

data/README.md

@@ -0,0 +1,55 @@
+# Scrivito Editors
+
+[![Gem Version](https://badge.fury.io/rb/scrivito_editors.png)](http://badge.fury.io/rb/scrivito_editors)
+[![Code Climate](https://codeclimate.com/github/infopark/scrivito_editors.png)](https://codeclimate.com/github/infopark/scrivito_editors)
+[![Dependency Status](https://gemnasium.com/infopark/scrivito_editors.png)](https://gemnasium.com/infopark/scrivito_editors)
+[![Build Status](https://travis-ci.org/infopark/scrivito_editors.png)](https://travis-ci.org/infopark/scrivito_editors)
+
+The [Scrivito](http://scrivito.com) Editors gem is a collection of useful standard
+JavaScript editors based on the Scrivito SDK. The editors allow to edit all CMS
+attributes in place and provide helper for the property view of pages and
+widgets. A media browser is also part of the gem, to add, update and delete
+resources.
+
+## Installation and Usage
+
+Please visit our Documentation to get the
+[latest installation and usage information](https://scrivito.com/editors).
+
+
+## Changelog
+
+See [Changelog](https://github.com/infopark/scrivito_editors/blob/master/CHANGELOG.md) for more
+details.
+
+
+## Contributing
+
+We would be very happy and thankful if you open new issues in order to further improve Scrivito
+Editors. If you want to go a step further and extend the functionality or fix a problem, you can
+do so any time by following the steps below.
+
+1. Fork and clone the
+   [Scrivito Editors GitHub repository](https://github.com/infopark/scrivito_editors).
+
+        git clone git@github.com:_username_/scrivito_editors.git
+        cd scrivito_editors
+
+2. We suggest using [rbenv](https://github.com/sstephenson/rbenv/) for managing your local Ruby
+   version. Make sure to use at least Ruby version 2.0.
+
+        ruby --version
+
+3. Create your feature branch and create a pull request for the `develop` branch. Please take a
+   look at the already existing generators and rake tasks to get an impression of our coding style
+   and the general architecture.
+
+4. We are using the [GitHub Styleguides](https://github.com/styleguide) and would prefer if you
+   could stick to it.
+
+
+## License
+Copyright (c) 2009 - 2014 Infopark AG (http://www.infopark.com)
+
+This software can be used and modified under the LGPL-3.0. Please refer to
+http://www.gnu.org/licenses/lgpl-3.0.html for the license text.

data/Rakefile

@@ -0,0 +1,9 @@
+#!/usr/bin/env rake
+
+require 'bundler/setup'
+Bundler::GemHelper.install_tasks
+
+require 'rspec/core/rake_task'
+RSpec::Core::RakeTask.new(:spec)
+
+task default: :spec

data/app/assets/javascripts/jquery_additions/jquery_center.js.coffee

@@ -0,0 +1,6 @@
+jQuery.fn.center = ->
+  if @length == 1
+    @css
+      marginLeft: -this.innerWidth() / 2
+      marginTop: -this.innerHeight() / 2
+      left: '50%'

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

@@ -0,0 +1,65 @@
+@MediabrowserInspector = do ->
+  inspectorSelector: '.editing-mediabrowser-inspector'
+  contentSelector: '.inspector-content'
+  inspector: undefined
+  objectId: undefined
+
+  _initializeBindings: ->
+    @modal.on 'click', 'li.mediabrowser-item', (event) =>
+      @_onInspect(event)
+
+    @inspector = @modal.find(@inspectorSelector)
+    @inspector.hide()
+
+  _onInspect: (event) ->
+    if $(event.target).hasClass('editing-mediabrowser-inspect')
+      currentTarget = $(event.currentTarget)
+      id = currentTarget.data('id')
+
+      if id
+        @open(id)
+        @_highlightItem(currentTarget)
+
+  _renderLoading: ->
+    @inspector.html(@_loadingTemplate())
+
+  _loadingTemplate: ->
+    icon = $('<i></i>')
+      .addClass('editing-icon editing-icon-refresh')
+
+    $('<div></div>')
+      .addClass('editing-mediabrowser-loading')
+      .html(icon)
+
+  _highlightItem: (element) ->
+    @modal.find('li.mediabrowser-item.active').removeClass('active')
+    element.addClass('active')
+
+  init: (modal) ->
+    @modal = modal
+    @_initializeBindings()
+
+  # Opens the inspector section in the mediabrowser for the given object ID and displays its edit
+  # view.
+  open: (objectId) ->
+    @objectId = objectId
+
+    @inspector.show()
+    @_renderLoading()
+
+    $.ajax
+      url: '/mediabrowser/inspector'
+      dataType: 'json'
+      data:
+        id: @objectId
+      success: (json) =>
+        @inspector.html(json.content)
+        scrivito.trigger('new_content', @inspector)
+
+      error: =>
+        @inspector.empty()
+
+  # Closes the inspector section of the mediabrowser.
+  close: ->
+    @inspector.empty()
+    @inspector.hide()

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

@@ -0,0 +1,420 @@
+@Mediabrowser = do ->
+  thumbnailViewButtonSelector: '.editing-button-view'
+  options: {}
+
+  # The media browser supports operations like +delete+ and +edit+ of resources that require a page
+  # reload, so that all references of the resources get updated.
+  reload: false
+
+  _getBatchSize: ->
+    @batchSize ||= 20
+
+  _getThumbnailSize: ->
+    @thumbnailSize ||= 'normal'
+
+  _setThumbnailSize: (value) ->
+    @thumbnailSize = value
+
+  _filterListTemplate: (filters) ->
+    list = $('<ul></ul>')
+      .addClass('editing-mediabrowser-filter-items')
+
+    for name, options of filters
+      title = options.title
+      icon = options.icon || 'editing-icon-generic'
+      query = @_prepareQuery(options.query)
+
+      @_filterTemplate(title, icon, query)
+        .appendTo(list)
+
+    list
+
+  _loadFilter: () ->
+    filters = @_selectedFilters()
+    wrapper = @modal.find('.editing-mediabrowser-filter')
+
+    @_filterListTemplate(filters)
+      .appendTo(wrapper)
+
+    @_defaultFilter().trigger('click')
+
+  _selectedFilters: ->
+    availableFilters = @filters()
+    selectedFilters = @options.filters
+    filters = availableFilters
+
+    if selectedFilters?
+      unless $.isArray(selectedFilters)
+        selectedFilters = new Array(selectedFilters)
+
+      filters = {}
+
+      for filterId, filter of availableFilters
+        if filterId in selectedFilters
+          filters[filterId] = filter
+
+    filters
+
+  _defaultFilter: ->
+    @_filterItems().first()
+
+  _getFilterQuery: (filter) ->
+    filter.data('query')
+
+  _defaultQuery: ->
+    @_getFilterQuery(@_defaultFilter())
+
+  _activeQuery: ->
+    filter = @_filterItems().filter('.active')
+    @_getFilterQuery(filter)
+
+  _filterItems: ->
+    @modal.find('li.filter')
+
+  _deactivateAllFilter: ->
+    @_getSearch().val('')
+    @_filterItems().removeClass('active')
+
+  _triggerFilter: (filter) ->
+    @_deactivateAllFilter()
+
+    filter.addClass('active')
+
+    query = @_getFilterQuery(filter)
+    @_renderPlaceholder(query)
+
+  _filterTemplate: (title, icon, query) ->
+    filter = $('<li></li>')
+      .addClass('filter')
+      .data('query', query)
+
+    icon = $('<span></span>')
+      .addClass('editing-icon')
+      .addClass(icon)
+      .appendTo(filter)
+
+    title = $('<span></span>')
+      .addClass('editing-mediabrowser-filter-name')
+      .html(title)
+      .appendTo(filter)
+
+    filter
+
+  _prepareQuery: (query) ->
+    params = $.extend(true, {}, query.query())
+    scrivito.chainable_search.create_instance(params)
+      .order('_last_changed')
+      .reverse_order()
+      .format('mediabrowser')
+
+  _save: ->
+    (@options.onSave || $.noop)(@selected)
+
+    @close()
+
+  _delete: ->
+    (@options.onDelete || $.noop)(@selected)
+
+    $.each @selected, (index, id) =>
+      item = @_getItemContainer(id)
+      @_itemLoading(item)
+
+      scrivito.delete_obj(id).then =>
+        @modal.trigger('resource_change.mediabrowser')
+        item.remove()
+
+    @_deselectAllItems()
+
+  _getItemId: (item) ->
+    $(item).closest('li.mediabrowser-item').data('id')
+
+  _getItemContainer: (id) ->
+    $('li.mediabrowser-item').filter ->
+      id == $(this).data('id')
+
+  _selectItem: (item) ->
+    if (item.hasClass('active'))
+      @_removeItem(item)
+    else
+      @_addItem(item)
+
+  _addItem: (item) ->
+    @_activateItem(item)
+
+    id = @_getItemId(item)
+
+    @selected.push(id)
+    @_setSelected($.unique(@selected))
+
+  _removeItem: (item) ->
+    @_deactivateItem(item)
+
+    selected = @selected.filter (id) =>
+      id != @_getItemId(item)
+
+    @_setSelected(selected)
+
+  _activateItem: (item) ->
+    $(item).addClass('active')
+
+  _deactivateItem: (item) ->
+    $(item).removeClass('active')
+
+  _changeSelectedTotal: ->
+    @modal.find('.selected-total').html(@selected.length)
+
+  _setSelected: (value) ->
+    @selected = value || @options.selection || []
+    @_changeSelectedTotal()
+
+  _deselectAllItems: ->
+    @_setSelected([])
+    @modal.find('li.mediabrowser-item .select-item.active').removeClass('active')
+
+  _getItems: ->
+    @modal.find('.editing-mediabrowser-items')
+
+  _getContainer: ->
+    @modal.find('.editing-mediabrowser-thumbnails')
+
+  _itemsPlaceholder: (count) ->
+    size = @_getThumbnailSize()
+
+    list = $('<ul></ul>')
+      .addClass('items editing-mediabrowser-thumbnails')
+      .addClass(size)
+
+    content = for index in [0...count] by 1
+      itemTemplate = @_itemPlaceholderTemplate(index)
+      list.append(itemTemplate)
+
+    @_getItems().html(content)
+
+  _itemPlaceholderTemplate: (index) ->
+    item = $('<li></li>')
+      .addClass('mediabrowser-item')
+      .attr('data-index', index)
+
+    @_itemLoading(item)
+
+  _itemLoading: (item) ->
+    loading = @_loadingTemplate()
+    $(item).html(loading)
+
+  _renderPlaceholder: (query) ->
+    query ||= @_defaultQuery()
+
+    return unless query?
+
+    @_getItems()
+      .empty()
+      .html(@_loadingTemplate())
+
+    query.size()
+      .then (total) =>
+        if total > 0
+          @_itemsPlaceholder(total)
+          @_renderItems(query)
+        else
+          @_getItems().empty()
+
+  _renderItems: (query, index = 0) ->
+    query
+      .batch_size(@_getBatchSize())
+
+    query.load_batch()
+      .then (result, next) =>
+        objects = result.hits
+        @_replacePlaceholder(objects, index)
+
+        if next?
+          start = index + objects.length
+          @_renderItems(next, start)
+
+  _replacePlaceholder: (objects, startIndex) ->
+    $(objects).each (index, object) =>
+      elementIndex = startIndex + index
+      template = @_itemTemplate(object)
+
+      @modal.find("li.mediabrowser-item[data-index=#{elementIndex}]")
+        .html(template)
+        .data('id', object.id)
+
+  _itemTemplate: (object) ->
+    url = object.preview
+    title = object.title || object.name
+    id = object.id
+
+    wrapper = $('<div></div>')
+
+    preview = $('<div></div>')
+      .addClass('editing-mediabrowser-preview')
+      .appendTo(wrapper)
+
+    inspect = $('<span></span>')
+      .addClass('editing-mediabrowser-inspect')
+      .appendTo(preview)
+
+    image = if url?
+      $('<img />')
+        .attr('src', url)
+    else
+      $('<span></span>')
+        .addClass('editing-icon')
+        .addClass('editing-icon-generic')
+
+    image.appendTo(preview)
+
+    meta = $('<div></div>')
+      .addClass('editing-mediabrowser-meta')
+      .appendTo(wrapper)
+
+    title = $('<span></span>')
+      .addClass('editing-mediabrowser-thumbnails-name')
+      .html(title)
+      .appendTo(meta)
+
+    select = $('<span></span>')
+      .addClass('editing-mediabrowser-thumbnails-select select-item')
+      .appendTo(title)
+
+    if id in @selected
+      select.addClass('active')
+
+    wrapper
+
+  _getSearch: ->
+    @modal.find('input.search-field')
+
+  _triggerSearch: ->
+    term = @_getSearch().val()
+    query = @_prepareQuery(@_activeQuery())
+
+    if term? && term.length > 0
+      query.and('*', 'contains_prefix', term)
+
+    @_renderPlaceholder(query)
+
+  _initializeBindings: ->
+    $(window).resize ->
+      $('#editing-mediabrowser.show').center()
+
+    @modal.on 'keyup', 'input.search-field', (event) =>
+      if event.keyCode == 13
+        @_triggerSearch()
+
+    @modal.on 'click', 'button.search-field-button', (event) =>
+      event.preventDefault()
+      @_triggerSearch()
+
+    @modal.on 'click', 'li.mediabrowser-item', (event) =>
+      unless $(event.target).hasClass('editing-mediabrowser-inspect')
+        item = $(event.currentTarget).find('.select-item')
+        @_selectItem(item)
+
+    @modal.on 'click', '.mediabrowser-save', (event) =>
+      event.preventDefault()
+      @_save()
+
+    @modal.on 'click', '.mediabrowser-delete', (event) =>
+      event.preventDefault()
+      @_delete()
+
+    @modal.on 'click', '.mediabrowser-close', (event) =>
+      event.preventDefault()
+      @close()
+
+    @modal.on 'click', 'li.filter', (event) =>
+      event.preventDefault()
+      @_triggerFilter($(event.currentTarget))
+
+    @modal.on 'click', @thumbnailViewButtonSelector, (event) =>
+      size = $(event.currentTarget).data('size')
+      @_changeThumbnailSize(size)
+
+    @modal.on 'resource_change.mediabrowser', (event) =>
+      @reload = true
+
+    $(document).on 'keyup.mediabrowser', (event) =>
+      event.stopImmediatePropagation()
+
+      if event.keyCode == 27
+        # Make sure to remove the event handler after
+        # +stopImmediatePropagation()+, otherwise all ESC keys are caught and
+        # not propagated.
+        $(document).off 'keyup.mediabrowser'
+
+        @close()
+
+  _loadModal: (content) ->
+    @overlay = $('<div></div>')
+      .addClass('editing-overlay show')
+      .appendTo($('body'))
+
+    @modal = $('<div></div>')
+      .addClass('editing-mediabrowser show')
+      .attr('id', 'editing-mediabrowser')
+      .appendTo($('body'))
+      .center()
+      .html(content)
+
+    @_initializeBindings()
+
+  _loadingTemplate: ->
+    icon = $('<i></i>')
+      .addClass('editing-icon editing-icon-refresh')
+
+    $('<div></div>')
+      .addClass('editing-mediabrowser-loading')
+      .html(icon)
+
+  _changeThumbnailSize: (size) ->
+    size ||= @_getThumbnailSize()
+    @_setThumbnailSize(size)
+
+    transitionListener = 'webkitTransitionEnd.mediabrowser otransitionend.mediabrowser oTransitionEnd.mediabrowser msTransitionEnd.mediabrowser transitionend.mediabrowser'
+    @modal.on transitionListener, 'li.mediabrowser-item', (event) =>
+      @modal.off transitionListener
+
+    @_getContainer()
+      .removeClass('small normal big large')
+      .addClass(size)
+
+    @modal.find(@thumbnailViewButtonSelector)
+      .removeClass('active')
+      .filter("[data-size='#{size}']")
+      .addClass('active')
+
+  filters: ->
+    {}
+
+  close: ->
+    (@options.onClose || $.noop)()
+
+    @overlay.remove()
+    @modal.remove()
+
+    if @reload
+      $('body').trigger('infopark_reload')
+
+  open: (options) ->
+    $.ajax
+      url: '/mediabrowser/modal'
+      dataType: 'json'
+      success: (json) =>
+        @options = options
+
+        @_loadModal(json.content)
+        @_setSelected()
+        @_loadFilter()
+        @_renderPlaceholder()
+        @_changeThumbnailSize()
+
+        MediabrowserInspector.init(@modal)
+        MediabrowserUploader.init(@modal)
+
+        MediabrowserUploader.onUploadFailure = (error) =>
+          console.error('Mediabrowser Uploader Error:', error)
+
+        MediabrowserUploader.onUploadSuccess = (objs) =>
+          @_renderPlaceholder()