scrivito_resourcebrowser 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 510275617f4f8a67da0e59da5894ebdb4e9eebbd
+  data.tar.gz: 8b2840de01ac7e2067d38f69950547bf8e967522
+SHA512:
+  metadata.gz: 168f45c11796dcdf5f6a2e272c44c7d6eaf8d98c58686e278829e34cef79cb6993af0a3e9a0261d32e48d88f4279103af98077dd7e18f7d67bb63e812114cc31
+  data.tar.gz: ee4b97fee0ef7fa22c06bc28de6f3f327552f3b73a03fc3f70ead08600dc09f1ed041cb02ed1c8dfc6efe0a6a445914cc95e78468820fb98acffe25112cf61f0

data/CHANGELOG.md

@@ -0,0 +1,3 @@
+# v0.0.1
+  * rename to resource browser
+  * initial version

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,52 @@
+# Scrivito Resource Browser
+
+[![Gem Version](https://badge.fury.io/rb/scrivito_resourcebrowser.png)](http://badge.fury.io/rb/scrivito_resourcebrowser)
+[![Code Climate](https://codeclimate.com/github/infopark/scrivito_resourcebrowser.png)](https://codeclimate.com/github/infopark/scrivito_resourcebrowser)
+[![Dependency Status](https://gemnasium.com/infopark/scrivito_resourcebrowser.png)](https://gemnasium.com/infopark/scrivito_resourcebrowser)
+[![Build Status](https://travis-ci.org/infopark/scrivito_resourcebrowser.png)](https://travis-ci.org/infopark/scrivito_resourcebrowser)
+
+The [Scrivito](http://scrivito.com) Resource Browser is a JavaScript based tool to add, update and
+delete resources. It provides flexible configuration options and can easily be integrated into your
+application.
+
+## Installation and Usage
+
+TODO
+
+
+## Changelog
+
+See [Changelog](https://github.com/infopark/scrivito_resourcebrowser/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
+Resource Browser. 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 Resource Browser GitHub repository](https://github.com/infopark/scrivito_resourcebrowser).
+
+        git clone git@github.com:_username_/scrivito_resourcebrowser.git
+        cd scrivito_resourcebrowser
+
+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,4 @@
+#!/usr/bin/env rake
+
+require 'bundler/setup'
+Bundler::GemHelper.install_tasks

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

@@ -0,0 +1,65 @@
+@ResourcebrowserInspector = do ->
+  inspectorSelector: '.editing-resourcebrowser-inspector'
+  contentSelector: '.inspector-content'
+  inspector: undefined
+  objectId: undefined
+
+  _initializeBindings: ->
+    @modal.on 'click', 'li.resourcebrowser-item', (event) =>
+      @_onInspect(event)
+
+    @inspector = @modal.find(@inspectorSelector)
+    @inspector.hide()
+
+  _onInspect: (event) ->
+    if $(event.target).hasClass('editing-resourcebrowser-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-resourcebrowser-loading')
+      .html(icon)
+
+  _highlightItem: (element) ->
+    @modal.find('li.resourcebrowser-item.active').removeClass('active')
+    element.addClass('active')
+
+  init: (modal) ->
+    @modal = modal
+    @_initializeBindings()
+
+  # Opens the inspector section in the resourcebrowser for the given object ID and displays its edit
+  # view.
+  open: (objectId) ->
+    @objectId = objectId
+
+    @inspector.show()
+    @_renderLoading()
+
+    $.ajax
+      url: '/resourcebrowser/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 resourcebrowser.
+  close: ->
+    @inspector.empty()
+    @inspector.hide()

data/app/assets/javascripts/scrivito_resourcebrowser/resourcebrowser.js.coffee

@@ -0,0 +1,420 @@
+@Resourcebrowser = do ->
+  thumbnailViewButtonSelector: '.editing-button-view'
+  options: {}
+
+  # The resource 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-resourcebrowser-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-resourcebrowser-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-resourcebrowser-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('resourcebrowser')
+
+  _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.resourcebrowser')
+        item.remove()
+
+    @_deselectAllItems()
+
+  _getItemId: (item) ->
+    $(item).closest('li.resourcebrowser-item').data('id')
+
+  _getItemContainer: (id) ->
+    $('li.resourcebrowser-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.resourcebrowser-item .select-item.active').removeClass('active')
+
+  _getItems: ->
+    @modal.find('.editing-resourcebrowser-items')
+
+  _getContainer: ->
+    @modal.find('.editing-resourcebrowser-thumbnails')
+
+  _itemsPlaceholder: (count) ->
+    size = @_getThumbnailSize()
+
+    list = $('<ul></ul>')
+      .addClass('items editing-resourcebrowser-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('resourcebrowser-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.resourcebrowser-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-resourcebrowser-preview')
+      .appendTo(wrapper)
+
+    inspect = $('<span></span>')
+      .addClass('editing-resourcebrowser-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-resourcebrowser-meta')
+      .appendTo(wrapper)
+
+    title = $('<span></span>')
+      .addClass('editing-resourcebrowser-thumbnails-name')
+      .html(title)
+      .appendTo(meta)
+
+    select = $('<span></span>')
+      .addClass('editing-resourcebrowser-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-resourcebrowser.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.resourcebrowser-item', (event) =>
+      unless $(event.target).hasClass('editing-resourcebrowser-inspect')
+        item = $(event.currentTarget).find('.select-item')
+        @_selectItem(item)
+
+    @modal.on 'click', '.resourcebrowser-save', (event) =>
+      event.preventDefault()
+      @_save()
+
+    @modal.on 'click', '.resourcebrowser-delete', (event) =>
+      event.preventDefault()
+      @_delete()
+
+    @modal.on 'click', '.resourcebrowser-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.resourcebrowser', (event) =>
+      @reload = true
+
+    $(document).on 'keyup.resourcebrowser', (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.resourcebrowser'
+
+        @close()
+
+  _loadModal: (content) ->
+    @overlay = $('<div></div>')
+      .addClass('editing-overlay show')
+      .appendTo($('body'))
+
+    @modal = $('<div></div>')
+      .addClass('editing-resourcebrowser show')
+      .attr('id', 'editing-resourcebrowser')
+      .appendTo($('body'))
+      .center()
+      .html(content)
+
+    @_initializeBindings()
+
+  _loadingTemplate: ->
+    icon = $('<i></i>')
+      .addClass('editing-icon editing-icon-refresh')
+
+    $('<div></div>')
+      .addClass('editing-resourcebrowser-loading')
+      .html(icon)
+
+  _changeThumbnailSize: (size) ->
+    size ||= @_getThumbnailSize()
+    @_setThumbnailSize(size)
+
+    transitionListener = 'webkitTransitionEnd.resourcebrowser otransitionend.resourcebrowser oTransitionEnd.resourcebrowser msTransitionEnd.resourcebrowser transitionend.resourcebrowser'
+    @modal.on transitionListener, 'li.resourcebrowser-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: '/resourcebrowser/modal'
+      dataType: 'json'
+      success: (json) =>
+        @options = options
+
+        @_loadModal(json.content)
+        @_setSelected()
+        @_loadFilter()
+        @_renderPlaceholder()
+        @_changeThumbnailSize()
+
+        ResourcebrowserInspector.init(@modal)
+        ResourcebrowserUploader.init(@modal)
+
+        ResourcebrowserUploader.onUploadFailure = (error) =>
+          console.error('Resourcebrowser Uploader Error:', error)
+
+        ResourcebrowserUploader.onUploadSuccess = (objs) =>
+          @_renderPlaceholder()

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

@@ -0,0 +1,132 @@
+@ResourcebrowserUploader = do ->
+  dropZoneSelector: '.editing-resourcebrowser-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-resourcebrowser-items').empty()
+
+    $('<div></div>')
+      .addClass('editing-resourcebrowser-loading')
+      .appendTo itemsElement
+
+    $('<div></div>')
+      .addClass('editing-resourcebrowser-progress-wrapper')
+      .appendTo itemsElement
+
+  _addProgress: (file) ->
+    progressBar = $('<div></div>')
+      .addClass('editing-resourcebrowser-progress-bar')
+      .css('width', '10%')
+
+    progress = $('<div></div>')
+      .addClass('editing-resourcebrowser-progress')
+      .html(progressBar)
+
+    fileName = $('<p></p>')
+      .html(file.name)
+
+    $('<div></div>')
+      .addClass('editing-resourcebrowser-progress-file')
+      .append(fileName)
+      .append(progress)
+      .prependTo $('.editing-resourcebrowser-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_resourcebrowser.js

@@ -0,0 +1,13 @@
+// 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_tree .