rename asset to content_asset + clean the locomotive_media plugin for tinyMCE (wip)

app/assets/javascripts/locomotive/models/content_asset.js.coffee

@@ -0,0 +1,13 @@
+class Locomotive.Models.ContentAsset extends Backbone.Model
+
+  initialize: ->
+    @set
+      image:  @get('content_type') == 'image'
+
+
+
+class Locomotive.Models.ContentAssetsCollection extends Backbone.Collection
+
+  model: Locomotive.Models.ContentAsset
+
+  url: "#{Locomotive.mount_on}/content_assets"

app/assets/javascripts/locomotive/models/theme_asset.js.coffee

@@ -5,4 +5,6 @@ class Locomotive.Models.ThemeAsset extends Backbone.Model
 
 class Locomotive.Models.ThemeAssetsCollection extends Backbone.Collection
 
-  url: "#{Locomotive.mount_on}/theme_assets"
+  model: Locomotive.Models.ThemeAsset
+
+  url: "#{Locomotive.mount_on}/theme_assets"

app/assets/javascripts/locomotive/utils/image_uploadify.js.coffee

@@ -14,7 +14,7 @@ window.ImageUploadify =
       hideButton:       true
       wmode:            'transparent'
       auto:             true
-      fileExt:          '*.jpg;*.png;*.jpeg;*.gif'
+      fileExt:          options.file_ext || '*.jpg;*.png;*.jpeg;*.gif'
       fileDesc:         'Only .jpg, .png, .jpeg, .gif'
       removeCompleted:  true
       fileDataName:     options.data_name

app/assets/javascripts/locomotive/utils/tinymce_settings.js

@@ -1,9 +1,9 @@
 window.TinyMceDefaultSettings = {
   theme : 'advanced',
   skin : 'locomotive',
-  plugins: 'safari,jqueryinlinepopups,locomedia,fullscreen',
+  plugins: 'safari,jqueryinlinepopups,locomotive_media,fullscreen',
   extended_valid_elements: 'iframe[width|height|frameborder|allowfullscreen|src|title]',
-  theme_advanced_buttons1 : 'fullscreen,code,|,bold,italic,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,|,locomedia',
+  theme_advanced_buttons1 : 'fullscreen,code,|,bold,italic,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,|,locomotive_media',
   theme_advanced_buttons2 : 'formatselect,fontselect,fontsizeselect',
   theme_advanced_buttons3 : '',
   theme_advanced_toolbar_location : "top",

app/assets/javascripts/locomotive/views/content_assets/picker_item_view.js.coffee

@@ -0,0 +1,30 @@
+Locomotive.Views.ContentAssets ||= {}
+
+class Locomotive.Views.ContentAssets.PickerItemView extends Backbone.View
+
+  tagName: 'li'
+
+  className: 'asset'
+
+  events:
+    'click h4 a':     'select_asset'
+    'click a.remove': 'remove_asset'
+
+  render: ->
+    $(@el).html(ich.content_asset(@model.toJSON()))
+
+    return @
+
+  select_asset: (event) ->
+    event.stopPropagation() & event.preventDefault()
+    @on_select(@model)
+
+  on_select: ->
+    @options.parent.options.on_select(@model) if @options.parent.options.on_select
+
+  remove_asset: (event) ->
+    event.stopPropagation() & event.preventDefault()
+
+    message = $(event.target).attr('data-confirm') || $(event.target).parent().attr('data-confirm')
+
+    @model.destroy() if confirm(message)

app/assets/javascripts/locomotive/views/content_assets/picker_view.js.coffee

@@ -4,14 +4,108 @@ class Locomotive.Views.ContentAssets.PickerView extends Backbone.View
 
   tag: 'div'
 
-  events:
+  number_items_per_row: 4
-    'click ul.list a':  'select_asset'
+
+  _item_views: []
 
   initialize: ->
-    # _.bindAll(@, 'add_assets', 'add_asset')
+    _.bindAll(@, 'add_assets', 'add_asset', 'remove_asset')
-    # @collection.bind('reset', @add_assets)
+    @collection.bind('reset', @add_assets)
+    @collection.bind('add', @add_asset)
+    @collection.bind('remove', @remove_asset)
 
   render: ->
-    console.log('hello world from PickerView !')
+    @_reset()
 
-  select_asset: ->
+    $(@el).html(ich.content_asset_picker())
+
+    @collection.fetch()
+
+    return @
+
+  create_dialog: ->
+    @dialog = $(@el).dialog
+      modal:    true
+      width:    650,
+      create: =>
+        $('.ui-widget-overlay').bind 'click', => @close()
+
+        @$('h2').appendTo($(@el).prev())
+        actions = @$('.dialog-actions').appendTo($(@el).parent()).addClass('ui-dialog-buttonpane ui-widget-content ui-helper-clearfix')
+
+        actions.find('#close-link').click (event) => @close(event)
+
+      open: =>
+        actions = $(@el).parent().find('.ui-dialog-buttonpane')
+        link    = actions.find('#upload-link')
+        el      = actions.find('input[type=file]')
+
+        window.ImageUploadify.build el, # TODO: ImageUploadify => DefaultUploadify. Put this in method
+          url:        link.attr('href')
+          data_name:  el.attr('name')
+          height:     link.outerHeight()
+          width:      link.outerWidth()
+          file_ext:   '*.png;*.gif;*.jpg;*.jpeg;*.pdf;*.doc;*.docx;*.xls;*.xlsx;*.txt'
+          success:    (model) => @collection.add(model)
+          error:      (msg)   => @shake()
+
+        actions.find('.upload-button-wrapper').hover(
+          => link.addClass('hover'),
+          => link.removeClass('hover')
+        )
+
+    @open()
+
+  open: ->
+    $(@el).dialog('open')
+
+  close: (event) ->
+    event.stopPropagation() & event.preventDefault() if event?
+    $(@el).dialog('close')
+
+  shake: ->
+    $(@el).parents('.ui-dialog').effect('shake', { times: 4 }, 100)
+
+  center: ->
+    $(@el).dialog('option', 'position', 'center')
+
+  add_assets: (collection) ->
+    collection.each @add_asset
+
+    @_refresh()
+
+    setTimeout (=> @create_dialog()), 30 # disable flickering
+
+  add_asset: (asset) ->
+    view = new Locomotive.Views.ContentAssets.PickerItemView model: asset, parent: @
+
+    (@_item_views ||= []).push(view)
+    @$('ul.list .clear').before(view.render().el)
+
+    @_refresh()
+
+  remove_asset: (asset) ->
+    view = _.find @_item_views, (tmp) -> tmp.model == asset
+    view.remove() if view?
+    @_refresh()
+    @center()
+
+  _refresh: ->
+    if @collection.length == 0
+      @$('ul.list').hide() & @$('p.no-items').show()
+    else
+      @$('p.no-items').hide() & @$('ul.list').show()
+      self = @
+      @$('ul.list li.asset').each (index) ->
+        if (index + 1) % self.number_items_per_row == 0
+          $(@).addClass('last')
+        else
+          $(@).removeClass('last')
+
+    @center() if @dialog?
+
+  _reset: ->
+    _.each @_item_views || [], (view) -> view.remove()
+    $('.ui-widget-overlay').unbind 'click'
+    @$('.actions input[type=file]').remove()
+    @dialog.dialog('destroy') if @dialog?

app/assets/javascripts/locomotive/views/pages/_form_view.js.coffee

@@ -68,8 +68,7 @@ class Locomotive.Views.Pages.FormView extends Locomotive.Views.Shared.FormView
     @$('#editable-elements .nav a').click (event) =>
       event.stopPropagation() & event.preventDefault()
 
-      link = $(event.target).parent()
+      link  = $(event.target)
-
       index = parseInt(link.attr('href').match(/block-(.+)/)[1])
 
       @$('#editable-elements .wrapper ul li.block').hide()

app/assets/javascripts/locomotive/views/theme_assets/image_picker_view.js.coffee

@@ -28,7 +28,7 @@ class Locomotive.Views.ThemeAssets.ImagePickerView extends Backbone.View
         $('.ui-widget-overlay').bind 'click', => @close()
 
         @$('h2').appendTo($(@el).prev())
-        actions = @$('.actions').appendTo($(@el).parent()).addClass('ui-dialog-buttonpane ui-widget-content ui-helper-clearfix')
+        actions = @$('.dialog-actions').appendTo($(@el).parent()).addClass('ui-dialog-buttonpane ui-widget-content ui-helper-clearfix')
 
         actions.find('#close-link').click (event) => @close(event)
 
@@ -81,7 +81,7 @@ class Locomotive.Views.ThemeAssets.ImagePickerView extends Backbone.View
 
   add_asset: (asset) ->
     @$('ul.list').append(ich.theme_asset(asset.toJSON()))
-    @center() if @editor
+    @center() if @dialog?
 
   _reset: ->
     $('.ui-widget-overlay').unbind 'click'

app/assets/javascripts/tinymce/plugins/locomedia/editor_plugin.js

@@ -1,43 +0,0 @@
-/**
- * editor_plugin_src.js
- *
- * Copyright 2009, Moxiecode Systems AB
- * Released under LGPL License.
- *
- * License: http://tinymce.moxiecode.com/license
- * Contributing: http://tinymce.moxiecode.com/contributing
- */
-
-(function() {
-  tinymce.create('tinymce.plugins.LocoMediaPlugin', {
-    init : function(ed, url) {
-      view = new Locomotive.Views.ContentAssets.PickerView();
-
-      // Register commands
-      ed.addCommand('locoMedia', function() {
-        view.render();
-      });
-
-      // Register buttons
-      ed.addButton('locomedia', {
-        title : 'locomedia.image_desc',
-        cmd : 'locoMedia'
-      });
-    },
-
-    getInfo : function() {
-      return {
-        longname : 'Locomotive Media File',
-        author : 'Didier Lafforgue',
-        authorurl : 'http://www.locomotivecms.com',
-        infourl : 'http://www.locomotivecms.com',
-        version : tinymce.majorVersion + "." + tinymce.minorVersion
-      };
-    }
-  });
-
-  // Register plugin
-  tinymce.PluginManager.add('locomedia', tinymce.plugins.LocoMediaPlugin);
-})();
-
-// (function(){tinymce.create('tinymce.plugins.LocoMediaPlugin',{init:function(ed,url){ed.addCommand('locoMedia',function(){ed.windowManager.open({file:url+'/dialog.htm?8',width:645,height:350,inline:1},{plugin_url:url})});ed.addButton('locomedia',{title:'locomedia.image_desc',cmd:'locoMedia'})},getInfo:function(){return{longname:'Locomotive Media File',author:'Didier Lafforgue',authorurl:'http://www.locomotivecms.com',infourl:'http://www.locomotivecms.com',version:tinymce.majorVersion+"."+tinymce.minorVersion}}});tinymce.PluginManager.add('locomedia',tinymce.plugins.LocoMediaPlugin)})();

app/assets/javascripts/tinymce/plugins/locomotive_media/editor_plugin.js

@@ -0,0 +1,77 @@
+/**
+ * editor_plugin_src.js
+ *
+ * Copyright 2009, Moxiecode Systems AB
+ * Released under LGPL License.
+ *
+ * License: http://tinymce.moxiecode.com/license
+ * Contributing: http://tinymce.moxiecode.com/contributing
+ */
+
+(function() {
+  var insertImage = function(ed, asset) {
+    var args = {}, el;
+
+    // Fixes crash in Safari
+    if (tinymce.isWebKit) ed.getWin().focus();
+
+    if (asset.get('image'))
+      tinymce.extend(args, { src : asset.get('url') });
+    else
+      tinymce.extend(args, { href : asset.get('url') });
+
+    el = ed.selection.getNode();
+
+    if (el && (el.nodeName == 'IMG' || el.nodeName == 'A')) {
+     ed.dom.setAttribs(el, args);
+    } else {
+      if (asset.get('image')) {
+        ed.execCommand('mceInsertContent', false, '<img id="__mce_tmp" />', { skip_undo: 1 });
+      } else {
+        var html = ed.selection.getContent();
+        if (html == '') html = asset.get('filename');
+        ed.execCommand('mceInsertContent', false, '<a id="__mce_tmp" >' + html + '</a>', { skip_undo: 1 });
+      }
+
+      ed.dom.setAttribs('__mce_tmp', args);
+      ed.dom.setAttrib('__mce_tmp', 'id', '');
+      ed.undoManager.add();
+    }
+  }
+
+  tinymce.create('tinymce.plugins.LocomotiveMediaPicker', {
+    init : function(ed, url) {
+      view = new Locomotive.Views.ContentAssets.PickerView({
+        'collection': new Locomotive.Models.ContentAssetsCollection()
+      });
+
+      // Register commands
+      ed.addCommand('locomotiveMedia', function() {
+        view.options.on_select = function(asset) {
+          insertImage(ed, asset);
+          view.close();
+        }
+        view.render();
+      });
+
+      // Register buttons
+      ed.addButton('locomotive_media', {
+        title : 'locomotive_media.image_desc',
+        cmd : 'locomotiveMedia'
+      });
+    },
+
+    getInfo : function() {
+      return {
+        longname : 'Locomotive Media Picker',
+        author : 'Didier Lafforgue',
+        authorurl : 'http://www.locomotivecms.com',
+        infourl : 'http://www.locomotivecms.com',
+        version : tinymce.majorVersion + "." + tinymce.minorVersion
+      };
+    }
+  });
+
+  // Register plugin
+  tinymce.PluginManager.add('locomotive_media', tinymce.plugins.LocomotiveMediaPicker);
+})();

app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/ui.css

@@ -735,7 +735,7 @@
   background-position: -380px 0
 }
 
-.locomotiveSkin span.mce_locomedia {
+.locomotiveSkin span.mce_locomotive_media {
   background-position: -380px 0
 }
 

app/assets/stylesheets/locomotive/application.scss

@@ -52,7 +52,7 @@ ul.list {
   list-style: none;
   margin: 0px 0 20px 0;
 
-  li {
+  li.item {
     position: relative;
     height: 31px;
     line-height: 31px;

app/assets/stylesheets/locomotive/content_assets.scss

@@ -0,0 +1,206 @@
+@import "compass/css3";
+@import "compass/css3/border-radius";
+@import "compass/css3/images";
+@import "compass/css3/text-shadow";
+@import "helpers";
+
+ul.content-assets {
+
+  li.asset {
+    position: relative;
+    float: left;
+    width: 139px;
+    height: 140px;
+    clear: none;
+
+    margin: 0 17px 17px 0;
+
+    @include border-radius(8px);
+    @include box-shadow(rgba(0, 0, 0, 0.2) 0px 1px 0px 0px);
+    background: #ebedf4;
+
+    &.last {
+      margin-right: 0px;
+    }
+
+    h4 {
+      margin: 0px;
+
+      line-height: 30px;
+
+      text-align: left;
+
+      @include border-top-radius(8px);
+      @include background-image(linear-gradient(#ebedf4, #d7dbe7));
+      border-bottom: 1px solid #ccced7;
+
+      a {
+        @include hover-link;
+
+        margin-left: 5px;
+        outline: none;
+
+        font-size: 11px;
+        color: #1f82bc;
+        font-weight: bold;
+      }
+    }
+
+    .icon, .image {
+      width: 80px;
+      height: 80px;
+      border: 4px solid #fff;
+      margin: 10px 0 5px 24px;
+
+      @include box-shadow(rgba(0, 0, 0, 0.3) 3px 3px 5px 1px);
+    }
+
+    .image {
+      background: transparent image-url("locomotive/list/empty.png") repeat 0 0;
+
+      .inside {
+        display: table-cell;
+        vertical-align: middle;
+        text-align: center;
+        width: 80px;
+        height: 85px;
+      }
+    } // .image
+
+    .icon {
+
+      .inside {
+        position: relative;
+        top: 24px;
+        width: 80px;
+
+        -webkit-transform: rotate(-45deg);
+        -moz-transform: rotate(-45deg);
+
+        color: #fff;
+        font-size: 12px;
+        font-weight: bold;
+        text-align: center;
+        text-transform: uppercase;
+        @include single-text-shadow(rgba(0, 0, 0, 0.3), 1px, 1px, 1px);
+      }
+
+      &.pdf {
+        background: #e82f2d;
+        @include background-image(linear-gradient(left top, #fc4e42, #b9101d));
+      }
+
+      &.media {
+        background: #6e489c;
+        @include background-image(linear-gradient(left top, #ba89d1, #4f317d));
+      }
+
+      &.other {
+        background: #4a4a50;
+        @include background-image(linear-gradient(left top, #92939a, #28282b));
+      }
+    } // .icon
+
+    .actions {
+      position: absolute;
+      top: 8px;
+      right: 5px;
+    }
+
+  } // li.asset
+
+}
+
+// ul.assets {
+//   list-style: none;
+//   margin: 0px;
+//   padding: 0px;
+// }
+//
+// ul.assets li.asset {
+//   position: relative;
+//   float: left;
+//   width: 139px;
+//   height: 140px;
+//   background: transparent url(/assets/locomotive//list/thumb.png) no-repeat 0 0;
+//   margin: 0 17px 17px 0;
+// }
+//
+// ul.assets li.asset.last {
+//   margin-right: 0px;
+// }
+//
+// ul.assets li.asset h4 { margin: 0px; height: 30px; border-bottom: 1px solid #ccced7; position: relative; }
+//
+// ul.assets li.asset h4 a {
+//   position: absolute;
+//   top: 7px;
+//   left: 12px;
+//   font-weight: bold;
+//   font-size: 0.6em;
+//   color: #1f82bc;
+//   text-decoration: none;
+// }
+//
+// ul.assets li.asset h4 a:hover { text-decoration: underline; }
+//
+// ul.assets li.asset div.icon, ul.assets li.asset div.image {
+//   width: 80px;
+//   height: 80px;
+//   border: 4px solid #fff;
+//   margin: 10px 0 0 24px;
+//   box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
+//   -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
+//   -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
+// }
+//
+// ul.assets li.asset div.image {
+//   background: transparent url(/assets/locomotive//list/empty.png) repeat 0 0;
+// }
+//
+// ul.assets li.asset div.image .inside {
+//   display: table-cell;
+//   vertical-align: middle;
+//   text-align: center;
+//   width: 72px;
+//   height: 72px;
+// }
+//
+// ul.assets li.asset div.icon .inside {
+//   position: relative;
+//   top: 24px;
+//   text-align:center;
+//   width: 80px;
+//   -webkit-transform: rotate(-45deg);
+//   -moz-transform: rotate(-45deg);
+//   font-weight: bold;
+//   color: #fff;
+//   text-shadow: 0px 1px 0px #333;
+//   text-transform: uppercase;
+//   font-size: 1.1em;
+// }
+//
+// ul.assets li.asset div.pdf {
+//   background: #e82f2d;
+//   background: -webkit-gradient(linear, left top, right bottom, from(#fc4e42), to(#b9101d));
+//   background: -moz-linear-gradient(-45deg, #fc4e42, #b9101d);
+// }
+//
+// ul.assets li.asset div.media {
+//   background: #6e489c;
+//   background: -webkit-gradient(linear, left top, right bottom, from(#ba89d1), to(#4f317d));
+//   background: -moz-linear-gradient(-45deg, #ba89d1, #4f317d);
+// }
+//
+// ul.assets li.asset div.other {
+//   background: #4a4a50;
+//   background: -webkit-gradient(linear, left top, right bottom, from(#92939a), to(#28282b));
+//   background: -moz-linear-gradient(-45deg, #92939a, #28282b);
+// }
+//
+//
+// ul.assets li.asset div.actions {
+//   position: absolute;
+//   top: 4px;
+//   right: 12px;
+// }

app/assets/stylesheets/locomotive/dialog_changes.scss

@@ -64,34 +64,6 @@
     padding: 10px;
     background: #fff;
 
-    .actions {
-      position: absolute;
-      top: -22px;
-      right: 2px;
-
-      a {
-        @include gray-button;
-      }
-
-      &.button-wrapper {
-
-        #theme_asset_sourceUploader {
-          position: absolute;
-          top: 0px;
-          right: 0px;
-        }
-
-        #theme_asset_sourceUploader {
-          z-index: 1001;
-        }
-
-        a {
-          z-index: 1000;
-        }
-      } // .actions.button-wrapper
-
-    } // .actions
-
     .list {
       overflow: auto;
       height: 350px;
@@ -112,6 +84,10 @@
     border-top: 1px solid #5F6069;
     background: #8B8D9A;
 
+    a {
+      outline: none;
+    }
+
     a#close-link {
       @include hover-link;
       color: #fff;
@@ -127,13 +103,10 @@
         @include light-button;
       }
 
-      #theme_asset_sourceUploader {
+      #theme_asset_sourceUploader, #content_asset_sourceUploader {
         position: absolute;
         top: 0px;
         right: 0px;
-      }
-
-      #theme_asset_sourceUploader {
         z-index: 1001;
       }
 

app/controllers/locomotive/content_assets_controller.rb

@@ -1,56 +1,24 @@
 module Locomotive
   class ContentAssetsController < BaseController
 
-    include ActionView::Helpers::SanitizeHelper
-    include ActionView::Helpers::TextHelper
-
     respond_to :json, :only => [:index, :create, :destroy]
 
     def index
-      index! do |response|
+      @content_assets = current_site.content_assets
-        response.json do
+      respond_with(@content_assets)
-          render :json => { :assets => @assets.collect { |asset| asset_to_json(asset) } }
-        end
-      end
     end
 
     def create
-      @asset = current_site.assets.build(:name => params[:name], :source => params[:file])
+      @content_asset = current_site.content_assets.create(params[:content_asset])
-
+      puts @content_asset.errors.inspect
-      create! do |success, failure|
+      respond_with @content_asset
-        success.json do
-          render :json => asset_to_json(@asset)
-        end
-        failure.json do
-          render :json => { :status => 'error' }
-        end
-      end
-    rescue Exception => e
-      render :json => { :status => 'error', :message => e.message }
     end
 
-    protected
+    def destroy
-
+      @content_asset = current_site.content_assets.find(params[:id])
-    def collection
+      @content_asset.destroy
-      if params[:image]
+      respond_with @content_asset
-        @assets ||= begin_of_association_chain.assets.only_image
-      else
-        @assets ||= begin_of_association_chain.assets
-      end
-    end
-
-    def asset_to_json(asset)
-      {
-        :status       => 'success',
-        :filename     => asset.source_filename,
-        :short_name   => truncate(asset.name, :length => 15),
-        :extname      => truncate(asset.extname, :length => 3),
-        :content_type => asset.content_type,
-        :url          => asset.source.url,
-        :vignette_url => asset.vignette_url,
-        :destroy_url  => asset_url(asset, :json)
-      }
     end
 
   end
-end
+end

app/helpers/locomotive/assets_helper.rb

@@ -1,16 +1,16 @@
 module Locomotive::AssetsHelper
 
-  def vignette_tag(asset)
+  # def vignette_tag(asset)
-    if asset.image?
+  #   if asset.image?
-      html, css = image_tag(asset.vignette_url), 'image'
+  #     html, css = image_tag(asset.vignette_url), 'image'
-    else
+  #   else
-      css = "icon #{asset.content_type}"
+  #     css = "icon #{asset.content_type}"
-      html = asset.content_type.to_s == 'other' ? truncate(asset.extname, :length => 3) : asset.content_type
+  #     html = asset.content_type.to_s == 'other' ? truncate(asset.extname, :length => 3) : asset.content_type
-      html = '?' if html.blank?
+  #     html = '?' if html.blank?
-    end
+  #   end
-
+  #
-    content_tag(:div, content_tag(:div, html, :class => 'inside'), :class => css)
+  #   content_tag(:div, content_tag(:div, html, :class => 'inside'), :class => css)
-  end
+  # end
 
   def image_dimensions_and_size(asset)
     content_tag(:small, "#{asset.width}px x #{asset.height}px | #{number_to_human_size(asset.size)}")

app/models/locomotive/content_asset.rb

@@ -1,5 +1,5 @@
 module Locomotive
-  class Asset
+  class ContentAsset
 
     include ::Mongoid::Document
     include ::Mongoid::Timestamps
@@ -14,7 +14,7 @@ module Locomotive
     field :height, :type => Integer
     field :size, :type => Integer
     field :position, :type => Integer, :default => 0
-    mount_uploader :source, AssetUploader, :mount_on => :source_filename
+    mount_uploader :source, ContentAssetUploader, :mount_on => :source_filename
 
     ## associations ##
     referenced_in :site, :class_name => 'Locomotive::Site'
@@ -37,5 +37,9 @@ module Locomotive
       { :url => self.source.url }.merge(self.attributes).stringify_keys
     end
 
+    def as_json(options = {})
+      Locomotive::ContentAssetPresenter.new(self).as_json
+    end
+
   end
 end

app/models/locomotive/site.rb

@@ -13,12 +13,12 @@ module Locomotive
     field :robots_txt
 
     ## associations ##
-    references_many :pages,         :class_name => 'Locomotive::Page',        :validate => false
+    references_many :pages,           :class_name => 'Locomotive::Page',          :validate => false
-    references_many :snippets,      :class_name => 'Locomotive::Snippet',     :dependent => :destroy, :validate => false
+    references_many :snippets,        :class_name => 'Locomotive::Snippet',       :dependent => :destroy, :validate => false
-    references_many :theme_assets,  :class_name => 'Locomotive::ThemeAsset',  :dependent => :destroy, :validate => false
+    references_many :theme_assets,    :class_name => 'Locomotive::ThemeAsset',    :dependent => :destroy, :validate => false
-    references_many :assets,        :class_name => 'Locomotive::Asset',       :dependent => :destroy, :validate => false
+    references_many :content_assets,  :class_name => 'Locomotive::ContentAsset',  :dependent => :destroy, :validate => false
-    references_many :content_types, :class_name => 'Locomotive::ContentType', :dependent => :destroy, :validate => false
+    references_many :content_types,   :class_name => 'Locomotive::ContentType',   :dependent => :destroy, :validate => false
-    embeds_many     :memberships,   :class_name => 'Locomotive::Membership'
+    embeds_many     :memberships,     :class_name => 'Locomotive::Membership'
 
     ## validations ##
     validates_presence_of :name

app/presenters/locomotive/base_presenter.rb

@@ -11,6 +11,10 @@ class Locomotive::BasePresenter
     @source = object
   end
 
+  def id
+    @source._id.to_s
+  end
+
   # def as_json(options = {})
   #   @source.as_json(options)
   # end

app/presenters/locomotive/content_asset_presenter.rb

@@ -0,0 +1,42 @@
+module Locomotive
+  class ContentAssetPresenter < BasePresenter
+
+    def filename
+      truncate(self.source.source_filename, :length => 19)
+    end
+
+    def short_name
+      truncate(self.source.name, :length => 15)
+    end
+
+    def extname
+      truncate(self.source.extname, :length => 3)
+    end
+
+    def content_type
+      self.source.content_type
+    end
+
+    def content_type_text
+      value = self.source.content_type.to_s == 'other' ? self.extname : self.source.content_type
+      value.blank? ? '?' : value
+    end
+
+    def url
+      self.source.source.url
+    end
+
+    def vignette_url
+      self.source.vignette_url
+    end
+
+    def as_json
+      {}.tap do |hash|
+        %w(id filename short_name extname content_type content_type_text url vignette_url).map(&:to_sym).each do |meth|
+          hash[meth] = self.send(meth)
+        end
+      end
+    end
+
+  end
+end

app/uploaders/locomotive/content_asset_uploader.rb

@@ -1,7 +1,7 @@
 # encoding: utf-8
 
 module Locomotive
-  class AssetUploader < ::CarrierWave::Uploader::Base
+  class ContentAssetUploader < ::CarrierWave::Uploader::Base
 
     include Locomotive::CarrierWave::Uploader::Asset
 

app/views/locomotive/content_assets/_picker.html.haml

@@ -0,0 +1,32 @@
+%script{ :type => 'text/html', :id => 'content_asset_picker' }
+
+  %h2!= t('.title')
+
+  %p.no-items{ :style => 'display: none' }!= t('.no_items')
+
+  %ul.list.content-assets{ :style => 'display: none' }
+    %li.clear
+
+  .dialog-actions
+    = link_to t('locomotive.buttons.close'), '#', :id => 'close-link'
+    .upload-button-wrapper
+      = file_field_tag 'content_asset[source]'
+      = link_to t('.upload'), content_assets_url(:json), :class => 'new', :id => 'upload-link'
+
+
+%script{ :type => 'text/html', :id => 'content_asset' }
+
+  %h4
+    = link_to '{{filename}}', '{{url}}'
+  {{#if image}}
+  .image
+    .inside
+      %img{ :src => '{{vignette_url}}' }
+  {{else}}
+  .icon{ :class => '{{content_type}}' }
+    .inside
+      {{content_type_text}}
+  {{/if}}
+
+  .actions
+    = link_to image_tag('locomotive/list/icons/cross.png'), '#', :class => 'remove', :'data-confirm' => t('locomotive.messages.confirm')

app/views/locomotive/pages/_editable_elements.html.haml

@@ -5,7 +5,7 @@
     #editable-elements
       .nav
         - grouped_editable_elements.keys.each_with_index do |name, index|
-          = link_to content_tag(:span, name.try(:humanize).gsub('\'', '') || t('locomotive.pages.form.default_block')), "#block-#{index}", :id => "block-nav-#{index}", :class => "#{'on' if index == 0}"
+          = link_to name.try(:humanize).gsub('\'', '') || t('locomotive.pages.form.default_block'), "#block-#{index}", :id => "block-nav-#{index}", :class => "#{'on' if index == 0}"
         .clear
 
       .wrapper

app/views/locomotive/pages/_form.html.haml

@@ -1,4 +1,5 @@
 - content_for :head do
+  = render :partial => '/locomotive/content_assets/picker'
   = render :partial => '/locomotive/theme_assets/picker'
 
 - if can?(:manage, @page)

app/views/locomotive/theme_assets/_picker.html.haml

@@ -1,21 +1,21 @@
 %script{ :type => 'text/html', :id => 'theme_image_picker' }
 
-  %h2!= t('locomotive.theme_assets.images.title')
+  %h2!= t('locomotive.theme_assets.image_picker.title')
 
-  %p.no-items{ :style => 'display: none' }!= t('.no_items')
+  %p.no-items{ :style => 'display: none' }!= t('locomotive.theme_assets.image_picker.no_items')
 
   %ul.list{ :style => 'display: none' }
 
-  .actions
+  .dialog-actions
     = link_to t('locomotive.buttons.close'), '#', :id => 'close-link'
     .upload-button-wrapper
       = file_field_tag 'theme_asset[source]'
-      = link_to t('locomotive.theme_assets.index.upload'), theme_assets_url(:json), :class => 'new', :id => 'upload-link'
+      = link_to t('locomotive.theme_assets.image_picker.upload'), theme_assets_url(:json), :class => 'new', :id => 'upload-link'
 
 
 %script{ :type => 'text/html', :id => 'theme_asset' }
 
-  %li
+  %li.item
     = link_to '{{local_path}}', '{{url}}'
     .more
       %span.size {{size}}

config/locales/admin_ui.en.yml

@@ -185,7 +185,6 @@ en:
         title: Listing theme files
         help: "The theme files section is the place where you manage the files needed by your layout, snippets...etc. If you need to manage an image gallery, create a new content type instead.<br/><b>Warning:</b> you may not see all the assets depending on your rights."
         new: new file
-        upload: Upload files
         snippets: Snippets
         css_and_js: Style and javascript
         fonts: Fonts
@@ -207,17 +206,16 @@ en:
         picker_link: Insert a file into the code
         choose_file: Choose file
         choose_plain_text: Choose plain text
-      images:
+      image_picker:
-        title: Listing images
+        title: "Insert theme image"
-        no_items: "There are no files for now."
+        no_items: "There are no images for now."
+        upload: "Upload theme images"
 
-    assets:
+    content_assets:
-      new:
+      picker:
-        title: New asset
+        title: "Insert media"
-        help: "Fill in the form below to create your asset."
+        no_items: "There are no media for now."
-      edit:
+        upload: "Upload media"
-        title: Edit asset
-        help: "Fill in the form below to update your asset."
 
     content_types:
       index:

config/locales/admin_ui.fr.yml

@@ -186,7 +186,6 @@ fr:
         title: Liste des fichiers du thème
         help: "Les fichiers du thème sont utilisés pour construire le gabarit de vos pages. Si vous avez besoin d'une galerie d'images, créer un modèle sera plus adéquate.<br/><b>Attention : </b> Suivant les droits que vous avez, il se peut que vous ne puissiez pas voir tous les fichiers."
         new: nouveau fichier
-        upload: Uploader fichiers
         snippets: Snippets
         css_and_js: Style et javascript
         images: Images
@@ -205,21 +204,19 @@ fr:
         help_image: "Utilisez votre image dans le template de vos pages ou snippets avec le code Liquid suivant : <span class='code'>{{ '%{path}' | theme_image_tag }}</span>.<br/>. Votre image a comme dimensions : <b>%{width}px x %{height}px</b>.<br/>"
         help_javascript: "Utilisez votre javascript dans le template de vos pages avec le code Liquid suivant : <span class='code'>{{ '%{path}' | javascript_tag }}</span>.<br/>"
         help_stylesheet: "Utilisez votre stylesheet dans le template de vos pages avec le code Liquid suivant : <span class='code'>{{ '%{path}' | stylesheet_tag }}</span>.<br/>"
-
       form:
         choose_file: Choisir fichier
         choose_plain_text: Passer en mode texte
-      images:
+      image_picker:
-        title: Liste des images
+        title: Insérer une image du thème
         no_items: "Il n'y a pas d'images."
+        upload: "Uploader images du thème"
 
-    assets:
+    content_assets:
-      new:
+      picker:
-        title: "Nouveau média"
+        title: "Insérer un média"
-        help: "Remplissez le formulaire ci-dessous pour créer votre média."
+        no_items: "Il n'y a aucun média."
-      edit:
+        upload: "Uploader média"
-        title: "Edition média"
-        help: "Remplissez le formulaire ci-dessous pour mettre à jour votre média."
 
     content_types:
       index:

lib/tasks/locomotive.rake

@@ -71,6 +71,20 @@ namespace :locomotive do
       end
     end
 
+    desc "Namespace collections"
+    task :namespace_collections do
+      db = Mongoid.config.master['sites'].db
+      db.collections.each do |collection|
+        next if collection.name =~ /^locomotive_/ # already namespaced
+
+        new_name = "locomotive_#{collection.name}"
+        new_name = "locomotive_content_assets" if collection.name =~ /^assets/
+
+        puts "renaming #{collection.name} into #{new_name}"
+        collection.rename_collection new_name
+      end
+    end
+
   end
 
-end
+end