tinymce integration (wip) + polish the jquery dialog window (wip)

2011-11-19 00:20:37 +01:00 · 2011-11-19 00:20:37 +01:00 · 5ea81930b4
commit 5ea81930b4
parent 2620748b81
57 changed files with 2622 additions and 35 deletions
--- a/1
+++ b/1
@ -28,6 +28,7 @@ gem 'jquery-rails',         '~> 1.0.16'
 gem 'rails-backbone',       '0.5.4'
 gem 'handlebars-rails',     :git => 'git://github.com/yabawock/handlebars-rails.git'
 gem 'codemirror-rails'
+gem 'tinymce-rails'
 gem 'uploadify-rails',      :git => 'git://github.com/nragaz/uploadify-rails.git'
 gem 'flash_cookie_session', '~> 1.1.1'

--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -305,6 +305,8 @@ GEM
    term-ansicolor (1.0.7)
    thor (0.14.6)
    tilt (1.3.3)
+    tinymce-rails (3.4.7)
+      railties (~> 3.1.0)
    treetop (1.4.10)
      polyglot
      polyglot (>= 0.3.1)
@ -381,6 +383,7 @@ DEPENDENCIES
  sanitize (~> 2.0.3)
  sass-rails (~> 3.1.4)
  spork (~> 0.9.0.rc)
+  tinymce-rails
  uglifier (~> 1.0.4)
  unicorn
  uploadify-rails!
--- a/app/assets/javascripts/locomotive.js
+++ b/app/assets/javascripts/locomotive.js
@ -13,6 +13,7 @@
 //= require backbone_rails_sync
 //= require uploadify
 //= require codemirror
+//= require tinymce-jquery
 //= require codemirror/overlay
 //= require codemirror/modes/css
 //= require codemirror/modes/javascript
--- a/app/assets/javascripts/locomotive/utils/tinymce_settings.js
+++ b/app/assets/javascripts/locomotive/utils/tinymce_settings.js
@ -0,0 +1,45 @@
+window.TinyMceDefaultSettings = {
+  theme : 'advanced',
+  skin : 'locomotive',
+  plugins: 'safari,jqueryinlinepopups,locomedia,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_buttons2 : 'formatselect,fontselect,fontsizeselect',
+  theme_advanced_buttons3 : '',
+  theme_advanced_toolbar_location : "top",
+  theme_advanced_toolbar_align : "left",
+  height: '300',
+  width: '709',
+  inlinepopups_skin: 'locomotive',
+  convert_urls: false,
+  fullscreen_new_window : false,
+  fullscreen_settings : {
+    theme_advanced_path_location : "top"
+  }
+  /*
+  *
+  * These are call backs aide in the guider creation
+  *
+  */
+  // onchange_callback: function(){
+  //   if($('#pageeditcontent:visible').length > 0){
+  //     guiders.next();
+  //   }
+  // }
+  // ,
+  // oninit: function(){
+  //   if(typeof window.guiders !== 'undefined' &&
+  //      window.location.pathname.match('admin/pages/.+\/edit') != null){
+  //     guiders.createGuider({
+  //       attachTo: '#page_editable_elements_attributes_1_content_ifr',
+  //       title: "Edit the content of the page",
+  //       description: "You can edit the content of your page in this text box. Go Ahead, add somethign like 'locomotiveCMS rocks!'. We'll wait for you.",
+  //       buttons: [],
+  //       id: "pageeditcontent",
+  //       next: "savepageedit",
+  //       position: 9,
+  //       width: 300
+  //     });
+  //   }
+  // }
+};
--- a/app/assets/javascripts/locomotive/views/application_view.js.coffee
+++ b/app/assets/javascripts/locomotive/views/application_view.js.coffee
@ -13,6 +13,8 @@ class Locomotive.Views.ApplicationView extends Backbone.View
      @view = new @options.view
      @view.render()

+    window.TinyMceDefaultSettings.language = window.locale # set the default tinyMCE language
+
    return @

  render_flash_messages: (messages) ->
--- a/app/assets/javascripts/locomotive/views/content_assets/picker_view.js.coffee
+++ b/app/assets/javascripts/locomotive/views/content_assets/picker_view.js.coffee
@ -0,0 +1,17 @@
+Locomotive.Views.ContentAssets ||= {}
+
+class Locomotive.Views.ContentAssets.PickerView extends Backbone.View
+
+  tag: 'div'
+
+  events:
+    'click ul.list a':  'select_asset'
+
+  initialize: ->
+    # _.bindAll(@, 'add_assets', 'add_asset')
+    # @collection.bind('reset', @add_assets)
+
+  render: ->
+    console.log('hello world from PickerView !')
+
+  select_asset: ->
--- a/app/assets/javascripts/locomotive/views/pages/_form_view.js.coffee
+++ b/app/assets/javascripts/locomotive/views/pages/_form_view.js.coffee
@ -79,6 +79,8 @@ class Locomotive.Views.Pages.FormView extends Locomotive.Views.Shared.FormView
      link.parent().find('.on').removeClass('on')
      link.addClass('on')

+    @$('#editable-elements textarea').tinymce window.TinyMceDefaultSettings
+
  fill_default_slug: (event) ->
    unless @filled_slug
      setTimeout (=> @$('#page_slug').val($(event.target).val().slugify('-')) & @touched_url = true), 30
--- a/app/assets/javascripts/locomotive/views/theme_assets/image_picker_view.js.coffee
+++ b/app/assets/javascripts/locomotive/views/theme_assets/image_picker_view.js.coffee
@ -12,21 +12,30 @@ class Locomotive.Views.ThemeAssets.ImagePickerView extends Backbone.View
    @collection.bind('reset', @add_assets)

  render: ->
+    @_reset()
+
    $(@el).html(ich.theme_image_picker())

    @collection.fetch data: { content_type: 'image' }

    return @

-  create_or_show_dialog: ->
-    @dialog ||= $(@el).dialog
+  create_dialog: ->
+    @dialog = $(@el).dialog
      modal:    true
      width:    600,
-      open: =>
+      create: =>
        $('.ui-widget-overlay').bind 'click', => @close()

-        link  = @$('.actions a')
-        el    = @$('.actions input[type=file]')
+        @$('h2').appendTo($(@el).prev())
+        actions = @$('.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,
          url:        link.attr('href')
@ -36,7 +45,7 @@ class Locomotive.Views.ThemeAssets.ImagePickerView extends Backbone.View
          success:    (model) => @add_asset(new Locomotive.Models.ThemeAsset(model))
          error:      (msg)   => @shake()

-        @$('.button-wrapper').hover(
+        actions.find('.upload-button-wrapper').hover(
          => link.addClass('hover'),
          => link.removeClass('hover')
        )
@ -46,7 +55,8 @@ class Locomotive.Views.ThemeAssets.ImagePickerView extends Backbone.View
  open: ->
    $(@el).dialog('open')

-  close: ->
+  close: (event) ->
+    event.stopPropagation() & event.preventDefault() if event?
    $(@el).dialog('close')

  shake: ->
@ -67,8 +77,13 @@ class Locomotive.Views.ThemeAssets.ImagePickerView extends Backbone.View
      @$('ul.list').show()
      collection.each @add_asset

-    setTimeout (=> @create_or_show_dialog()), 30 # disable flickering
+    setTimeout (=> @create_dialog()), 30 # disable flickering

  add_asset: (asset) ->
    @$('ul.list').append(ich.theme_asset(asset.toJSON()))
-    @center() if @editor
+    @center() if @editor
+
+  _reset: ->
+    $('.ui-widget-overlay').unbind 'click'
+    @$('.actions input[type=file]').remove()
+    @dialog.dialog('destroy') if @dialog?
--- a/app/assets/javascripts/tinymce/plugins/inlinepopups/skins/locomotive/window.scss
+++ b/app/assets/javascripts/tinymce/plugins/inlinepopups/skins/locomotive/window.scss
@ -0,0 +1,132 @@
+@import "compass/css3";
+@import "compass/css3/border-radius";
+@import "compass/css3/images";
+@import "compass/css3/text-shadow";
+// @import "helpers";
+
+/* Locomotive's version of Clearlooks 2 */
+
+/* Reset */
+// .locomotive, .locomotive div, .locomotive span, .locomotive a { vertical-align:baseline; text-align:left; position:absolute; border:0; padding:0; margin:0; background:transparent; text-decoration:none; font-weight:normal; width:auto; height:auto; display:block; }
+
+/* General */
+.locomotive {
+  position: absolute;
+  direction: ltr;
+  text-align: left;
+
+  width: auto !important;
+  height: auto !important;
+
+  font-family: Helvetica, Arial;
+
+  background: transparent;
+
+  // @include box-shadow(rgba(0, 0, 0, 0.2) 0px 0px 10px 3px);
+
+  .mceWrapper {
+    position: static;
+    // padding: 30px;
+    height: 100%;
+  }
+
+  .mceTop {
+    // position: static;
+    width: 645px;
+    height: 47px;
+
+    background: red;
+    @include border-top-radius(6px);
+    @include box-shadow(rgba(0, 0, 0, 0.2) 0px -3px 10px 3px);
+
+    text-align: left;
+
+    span {
+      display: block;
+      position: relative;
+
+      border-bottom: 1px dotted #BBBBBD;
+      color: #1E1F26;
+      font-size: 18px;
+      font-weight: bold;
+      padding: 0;
+      margin: 0 10px;
+      line-height: 45px;
+    }
+  } // .mceTop
+
+  .mceMiddle {
+    position: static;
+    width: 100%;
+    height: 100%;
+
+    & > span {
+      top: 0px;
+      position: relative;
+      background: transparent;
+    }
+
+    iframe {
+      height: auto !important;
+      @include box-shadow(rgba(0, 0, 0, 0.2) 0px 3px 10px 3px);
+    }
+
+  } // .mceMiddle
+
+  .mceBottom {
+    display: none;
+  }
+
+} // .locomotive
+
+
+.mceEventBlocker {
+  position:fixed;
+  left:0;
+  top:0;
+  width:100%;
+  height:100%;
+}
+.locomotive .mcePlaceHolder { top: 0; left: 0; background: #666; opacity:0.3; -ms-filter:'alpha(opacity=30)'; filter:alpha(opacity=30); }
+.locomotive_modalBlocker { position:fixed; left:0; top:0; width:100%; height:100%; background:#666; opacity:0.3; -ms-filter:'alpha(opacity=30)'; filter:alpha(opacity=30); display:none; }
+
+
+/* Middle */
+// .locomotive .mceMiddle { top: 0px; width: 100%; height: 100%; }
+// .locomotive .mceMiddle span { top: 47px; position: relative; background: transparent; }
+
+/* Bottom */
+// .locomotive .mceBottom { bottom: 0px; width: 100%; height: 1px; background: #8b8d9a; }
+
+/* Move & Close */
+.locomotive a.mceClose { display: none; }
+.locomotive a.mceMove { top: 1px; display: block; width: 100%; height: 35px; cursor: move; }
+
+/* Resize */
+.locomotive .mceResize { top:auto; left:auto; display:none; width:5px; height:5px; }
+.locomotive .mceResizable .mceResize {display:block}
+.locomotive .mceResizable .mceMin, .locomotive .mceMax {display:none}
+.locomotive .mceMinimizable .mceMin {display:block}
+.locomotive .mceMaximizable .mceMax {display:block}
+.locomotive .mceMaximized .mceMed {display:block}
+.locomotive .mceMaximized .mceMax {display:none}
+.locomotive a.mceResizeN {top:0; left:0; width:100%; cursor:n-resize}
+.locomotive a.mceResizeNW {top:0; left:0; cursor:nw-resize}
+.locomotive a.mceResizeNE {top:0; right:0; cursor:ne-resize}
+.locomotive a.mceResizeW {top:0; left:0; height:100%; cursor:w-resize;}
+.locomotive a.mceResizeE {top:0; right:0; height:100%; cursor:e-resize}
+.locomotive a.mceResizeS {bottom:0; left:0; width:100%; cursor:s-resize}
+.locomotive a.mceResizeSW {bottom:0; left:0; cursor:sw-resize}
+.locomotive a.mceResizeSE {bottom:0; right:0; cursor:se-resize}
+
+/* Alert/Confirm */
+.locomotive .mceButton {font-weight:bold; bottom:10px; width:80px; height:30px; background:url(img/button.gif); line-height:30px; vertical-align:middle; text-align:center; outline:0}
+.locomotive .mceMiddle .mceIcon {left:15px; top:35px; width:32px; height:32px}
+.locomotive .mceAlert .mceMiddle span, .locomotive .mceConfirm .mceMiddle span {background:transparent;left:60px; top:35px; width:320px; height:50px; font-weight:bold; overflow:auto; white-space:normal}
+.locomotive a:hover {font-weight:bold;}
+.locomotive .mceAlert .mceMiddle, .locomotive .mceConfirm .mceMiddle {background:#D6D7D5}
+.locomotive .mceAlert .mceOk {left:50%; top:auto; margin-left: -40px}
+.locomotive .mceAlert .mceIcon {background:url(img/alert.gif)}
+.locomotive .mceConfirm .mceOk {left:50%; top:auto; margin-left: -90px}
+.locomotive .mceConfirm .mceCancel {left:50%; top:auto}
+.locomotive .mceConfirm .mceIcon {background:url(img/confirm.gif)}
--- a/app/assets/javascripts/tinymce/plugins/jqueryinlinepopups/editor_plugin.js
+++ b/app/assets/javascripts/tinymce/plugins/jqueryinlinepopups/editor_plugin.js
@ -0,0 +1,212 @@
+/**
+ * @filename : editor_plugin.js
+ * @description : jQuery UI Inline Popups plugin to replace the default inlinepopups
+ * @developer : badsyntax (Richard Willis)
+ * @contact : http://badsyntax.co
+ * @moreinfo : http://is.gd/j1FuI
+ */
+
+(function() {
+
+  var DOM = tinymce.DOM,
+    Event = tinymce.dom.Event,
+    each = tinymce.each;
+
+  // Create the editor plugin
+  tinymce.create('tinymce.plugins.jQueryInlinePopups', {
+
+    init : function(ed, url) {
+
+      // Replace window manager
+      ed.onBeforeRenderUI.add(function() {
+        ed.windowManager = new tinymce.InlineWindowManager(ed);
+      });
+    },
+
+    getInfo : function() {
+      return {
+        longname : 'jQuery UI Inline Popups',
+        author : 'Richard Willis',
+        authorurl : 'http://badsyntax.co',
+        infourl : 'http://is.gd/j1FuI',
+        version : '0.1b'
+      };
+    }
+  });
+
+  // Create the window manager
+  tinymce.create('tinymce.InlineWindowManager:tinymce.WindowManager', {
+
+    InlineWindowManager : function(ed) {
+      this.parent(ed);
+      this.windows = {};
+    },
+
+    open : function(f, p) {
+
+      f = f || {};
+      p = p || {};
+
+      // Run native windows
+      if (!f.inline) {
+        return t.parent(f, p);
+      }
+
+      var
+        t = this,
+        id = DOM.uniqueId(),
+
+        // Dialog config
+        config = {
+          title: f.title || '',
+          width: 'auto',
+          height: 'auto',
+          modal: true,
+          resizable: false,
+          draggable: true,
+          dialogClass: 'ui-dialog-tinymce',
+          // match the tinymce inlinepopups starting z-index (fixes #3)
+          zIndex: 300000
+        },
+
+        // Dialog element
+        dialog = $('<div />')
+          .attr('id', 'dialog-' + id)
+          .hide()
+          .appendTo('body'),
+
+        // Window info
+        w = {
+          id : id,
+          features : f,
+          element: dialog
+        };
+
+      // Only store selection if the type is a normal window.
+      // This is required at least for IE to remeber the position
+      // before the focus from editor is lost.
+      if (!f.type) {
+        this.bookmark = this.editor.selection.getBookmark(1);
+      }
+
+      // Inline content
+      if (f.content){
+
+        if (f.type == 'confirm'){
+          config.buttons = [{
+            'text': 'Ok',
+            'click': function(e){
+              f.button_func(true);
+            }
+          }, {
+            'text': 'Cancel',
+            'click': function(e){
+              f.button_func(false);
+            }
+          }];
+        }
+        else if (f.type == 'alert'){
+          config.buttons = [{
+            'text': 'Ok',
+            'click': function(e){
+              f.button_func(true);
+            }
+          }];
+        }
+
+        config.width = f.width;
+
+        dialog.html($('<div />', {
+          'class': 'ui-dialog-tinymce-content',
+          'html': f.content
+        }));
+      }
+      // iFramed document
+      else
+      {
+        console.log(f);
+        var iframe = $('<iframe />', {
+          id: id + '_ifr',
+          frameborder: 0
+        })
+        .css({
+          width: f.width,
+          height: f.height
+        })
+        .appendTo(dialog);
+      }
+
+      p.mce_inline = true;
+      p.mce_window_id = id;
+      p.mce_auto_focus = f.auto_focus;
+
+      this.features = f;
+      this.params = p;
+      this.onOpen.dispatch(this, f, p);
+
+      dialog.dialog(config);
+
+      // Load in iframe src
+      if (!f.content) {
+        iframe.attr( 'src', f.url || f.file );
+      }
+
+      // Add window
+      t.windows[id] = w;
+
+      return w;
+    },
+
+    resizeBy : function(dw, dh, id) { return; },
+
+    focus : function(id) { return; },
+
+    close : function(win, id) {
+
+      var t = this, w, id = id || win.frameElement.id.replace(/_ifr$/, '');
+
+      // Probably not inline
+      if (!t.windows[id]) {
+        t.parent(win);
+        return;
+      }
+
+      if (w = t.windows[id]) {
+        w.element.dialog('destroy').remove();
+        delete t.windows[id];
+      }
+    },
+
+    setTitle : function(w, ti) {
+      var id = w.frameElement.id.replace(/_ifr$/, '');
+      $('#ui-dialog-title-dialog-' + id).html(ti);
+    },
+
+    alert : function(txt, cb, s) {
+      this._messagePopup('alert', 'Alert', txt, cb, s);
+    },
+
+    confirm : function(txt, cb, s) {
+      this._messagePopup('confirm', 'Confirm', txt, cb, s);
+    },
+
+    _messagePopup : function(type, title, txt, cb, s) {
+      var t = this, w;
+      w = t.open({
+        title : title,
+        type : type,
+        button_func : function(s) {
+          (cb) && cb.call(s || t, s);
+          t.close(null, w.id);
+        },
+        content : DOM.encode(t.editor.getLang(txt, txt)),
+        inline : 1,
+        width : 400,
+        height : 130
+      });
+    }
+  });
+
+  // Register plugin
+  tinymce.PluginManager.add('jqueryinlinepopups', tinymce.plugins.jQueryInlinePopups);
+})();
--- a/app/assets/javascripts/tinymce/plugins/locomedia/css/style.css
+++ b/app/assets/javascripts/tinymce/plugins/locomedia/css/style.css
@ -0,0 +1,95 @@
+body {
+  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-size: 1em;
+  overflow: hidden;
+}
+
+p.no-items {
+  padding: 18px 0px;
+  background: transparent url(/assets/locomotive//list/none-small.png) no-repeat center 0;
+  text-align: center;
+  color: #9d8963 !important;
+  font-size: 1.1em !important;
+}
+
+.actions {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+ul.assets {
+  overflow: auto;
+  height: 275px;
+}
+
+ul.assets li.asset h4 a {
+  top: 9px;
+  font-size: 0.7em;
+}
+
+ul.assets li.asset .inside {
+  cursor: pointer;
+}
+
+ul.assets li.asset div.actions {
+  top: 7px;
+}
+
+ul.assets li.new-asset {
+  display: none;
+}
+
+#upload-link {
+  float: left;
+  display: block;
+  background: transparent url(/assets/locomotive//buttons/dark-gray-bg.png) repeat-x 0 0;
+  outline: none;
+  -moz-border-radius : 4px;
+  -webkit-border-radius: 4px;
+  height: 20px;
+  font-size: 0.8em;
+  font-family: 'Lucida Grande';
+  padding: 5px 12px 5px 12px;
+  margin: 5px 0 0 14px;
+  color: #fff !important;
+  text-decoration: none;
+  text-shadow: 1px 1px 1px #000;
+}
+
+#spinner {
+  position: fixed;
+  top: 40%;
+  left: 30%;
+  height: 60px;
+  width: 250px;
+  background: transparent;
+  z-index: 999;
+}
+
+#spinner .overlay, #spinner .text {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  -moz-border-radius : 10px;
+  -webkit-border-radius: 10px;
+}
+
+#spinner .overlay {
+  background: #000;
+  opacity: 0.8;
+}
+
+#spinner .text {
+  padding: 20px 0;
+  text-align: center;
+  font-size: 1.1em;
+  color: #fff;
+  text-shadow: 1px 1px 1px #000;
+}
+
+.mceActionPanel input {
+  font-size: 0.8em;
+}
--- a/app/assets/javascripts/tinymce/plugins/locomedia/dialog.htm
+++ b/app/assets/javascripts/tinymce/plugins/locomedia/dialog.htm
@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>{#locomedia_dlg.dialog_title}</title>
+
+  <script type="text/javascript" src="../../tiny_mce_popup.js"></script>
+
+  <script type="text/javascript" src="/javascripts/admin/jquery.js"></script>
+  <script type="text/javascript" src="/javascripts/admin/rails.js"></script>
+
+  <script type="text/javascript" src="/javascripts/admin/plugins/plupload/plupload.full.js"></script>
+  <script type="text/javascript" src="/javascripts/admin/plugins/plupload/jquery.plupload.queue/jquery.plupload.queue.js"></script>
+
+  <script type="text/javascript" src="js/dialog.js?2"></script>
+
+  <link href="/stylesheets/admin/assets.css" rel="stylesheet" type="text/css" />
+  <link href="css/style.css" rel="stylesheet" type="text/css" />
+</head>
+<body id="locomedia" style="display: none">
+
+  <div id="spinner">
+    <div class="overlay"></div>
+    <div class="text loading">{#locomedia_dlg.loading}</div>
+    <div class="text uploading" style="display: none">{#locomedia_dlg.uploading}</div>
+    <div class="text destroying" style="display: none">{#locomedia_dlg.destroying}</div>
+  </div>
+
+  <p class="no-items" style="display: none">{#locomedia_dlg.no_items}</p>
+
+  <form onsubmit="insertAction();return false;" action="#">
+    <div id="images">
+      <ul class="assets">
+        <li class="new-asset">
+          <h4><a href="#">NoName</a></h4>
+          <div class="icon">
+            <div class="inside">
+            </div>
+          </div>
+          <div class="actions">
+            <a href="#" class="remove" data-remote="true" data-confirm="{#locomedia_dlg.confirm}" data-method="delete" rel="nofollow">
+              <img src="/assets/locomotive//list/icons/cross.png">
+            </a>
+          </div>
+        </li>
+        <li class="clear"></li>
+      </ul>
+    </div>
+
+    <div class="mceActionPanel">
+      <a href="/admin/assets.json" id="upload-link">{#locomedia_dlg.upload}</a>
+      <input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" />
+    </div>
+  </form>
+</body>
+</html>
--- a/app/assets/javascripts/tinymce/plugins/locomedia/editor_plugin.js
+++ b/app/assets/javascripts/tinymce/plugins/locomedia/editor_plugin.js
@ -0,0 +1,43 @@
+/**
+ * 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)})();
--- a/app/assets/javascripts/tinymce/plugins/locomedia/editor_plugin_src.js
+++ b/app/assets/javascripts/tinymce/plugins/locomedia/editor_plugin_src.js
@ -0,0 +1,46 @@
+/**
+ * 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) {
+      // Register commands
+      ed.addCommand('locoMedia', function() {
+        ed.windowManager.open({
+          file : url + '/dialog.htm',
+          width : 645,
+          height : 650,
+          inline : 1
+        }, {
+          plugin_url : url
+        });
+      });
+
+      // 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);
+})();
--- a/app/assets/javascripts/tinymce/plugins/locomedia/img/sample.gif
+++ b/app/assets/javascripts/tinymce/plugins/locomedia/img/sample.gif
--- a/app/assets/javascripts/tinymce/plugins/locomedia/js/dialog.js
+++ b/app/assets/javascripts/tinymce/plugins/locomedia/js/dialog.js
@ -0,0 +1,205 @@
+var MediafileDialog = {
+  formElement: null,
+
+  listElement: null,
+
+  preInit : function() {
+    var url;
+
+    tinyMCEPopup.requireLangPack();
+
+    if (url = tinyMCEPopup.getParam("external_image_list_url"))
+      document.write('<script language="javascript" type="text/javascript" src="' + tinyMCEPopup.editor.documentBaseURI.toAbsolute(url) + '"></script>');
+  },
+
+  init : function(ed) {
+    var self = this;
+
+    with(window.parent) {
+      var csrf_token = $('meta[name=csrf-token]').attr('content'),
+          csrf_param = $('meta[name=csrf-param]').attr('content');
+    }
+
+    $.fn.setCsrfSettings(csrf_token, csrf_param);
+
+    formElement = $(document.forms[0]);
+
+    listElement = formElement.find('ul');
+
+    $.getJSON('/admin/assets.json', function(data) {
+      $(data.assets).each(function() {
+        self._addAsset(this);
+      });
+
+      self.setupUploader();
+
+      self.hideSpinner();
+
+      if ($('ul li.asset').length == 0) $('p.no-items').show();
+    });
+  },
+
+  hideSpinner: function() {
+    $('#spinner').hide();
+  },
+
+  showSpinner: function(msg) {
+    $('#spinner .text').hide();
+    $('#spinner .' + msg).show();
+    $('#spinner').show();
+  },
+
+  insertFile: function(asset) {
+    var ed = tinyMCEPopup.editor, f = document.forms[0], nl = f.elements, v, args = {}, el;
+
+    tinyMCEPopup.restoreSelection();
+
+    // Fixes crash in Safari
+    if (tinymce.isWebKit) ed.getWin().focus();
+
+    if (asset.content_type == 'image')
+      tinymce.extend(args, { src : asset.url });
+    else
+      tinymce.extend(args, { href : asset.url });
+
+    el = ed.selection.getNode();
+
+    if (el && (el.nodeName == 'IMG' || el.nodeName == 'A')) {
+     ed.dom.setAttribs(el, args);
+    } else {
+      if (asset.content_type == 'image') {
+        ed.execCommand('mceInsertContent', false, '<img id="__mce_tmp" />', { skip_undo: 1 });
+      } else {
+        var html = ed.selection.getContent();
+        if (html == '') html = asset.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();
+    }
+
+    tinyMCEPopup.close();
+  },
+
+  setupUploader: function() {
+    var self = this;
+    var multipartParams = {};
+
+    with(window.parent) {
+      multipartParams[$('meta[name=csrf-param]').attr('content')] = $('meta[name=csrf-token]').attr('content');
+    }
+
+    var uploader = new plupload.Uploader({
+      // runtimes : (jQuery.browser.webkit == true ? 'flash' : 'html5,flash'),
+      runtimes: 'gears,html5,flash',
+      browse_button : 'upload-link',
+      max_file_size : '10mb',
+      url : $('a#upload-link').attr('href'),
+      flash_swf_url : '/javascripts/admin/plugins/plupload/plupload.flash.swf',
+      multipart: true,
+      multipart_params: multipartParams,
+      filters : [
+        { title : 'Media files', extensions : 'png,gif,jpg,jpeg,pdf,doc,docx,xls,xlsx,txt' },
+      ]
+    });
+
+    uploader.bind('BeforeUpload', function(up, file) {
+      file.name = unescape(encodeURIComponent(file.name));
+      console.log(file.name);
+    });
+
+    uploader.bind('QueueChanged', function() {
+      self.showSpinner('uploading');
+      uploader.start();
+    });
+
+    uploader.bind('FileUploaded', function(up, file, response) {
+      console.log(up);
+      console.log(file);
+      console.log(response);
+
+      var json = JSON.parse(response.response);
+
+      if (json.status == 'success')
+        self._addAsset(json);
+
+      self.hideSpinner();
+    });
+
+    uploader.init();
+  },
+
+  _addAsset: function(data) {
+    var self = this;
+
+    var asset = $('ul li.new-asset')
+      .clone()
+      .insertBefore($('ul li.clear'))
+      .addClass('asset');
+
+    asset.find('h4 a').attr('href', data.url)
+      .html(data.short_name)
+      .bind('click', function(e) {
+        self.insertFile(data);
+        e.stopPropagation(); e.preventDefault();
+      });
+
+    html = '';
+
+    if (data.content_type == 'image') {
+      asset.find('.icon').removeClass('icon').addClass('image');
+      html = $('<img />')
+        .attr('src', data.vignette_url)
+        .bind('click', function(e) {
+          self.insertFile(data);
+        });
+    } else {
+      asset.find('.icon').addClass(data.content_type);
+      html = data.content_type == 'other' ? data.extname : data.content_type;
+      if (html == '') html = '?'
+      html = $('<span />').html(html)
+        .bind('click', function(e) {
+          self.insertFile(data);
+        });
+    }
+
+    asset.find('.inside').append(html);
+
+    asset.find('.actions a')
+      .attr('href', data.destroy_url)
+      .bind('ajax:success', function(event, data) {
+        self._destroyAsset(asset);
+      });
+
+    if ($('ul li.asset').length % 4 == 0)
+      asset.addClass('last');
+
+    asset.removeClass('new-asset');
+
+    $('p.no-items').hide();
+  },
+
+  _destroyAsset: function(asset) {
+    asset.remove();
+
+    if ($('ul li.asset').length == 0) {
+      $('p.no-items').show();
+    } else {
+      $('ul li.asset').each(function(index) {
+        if ((index + 1) % 4 == 0)
+          $(this).addClass('last');
+        else
+          $(this).removeClass('last');
+      });
+    }
+
+    this.hideSpinner();
+  }
+
+};
+
+MediafileDialog.preInit();
+tinyMCEPopup.onInit.add(MediafileDialog.init, MediafileDialog);
--- a/app/assets/javascripts/tinymce/plugins/locomedia/langs/de_dlg.js
+++ b/app/assets/javascripts/tinymce/plugins/locomedia/langs/de_dlg.js
@ -0,0 +1,9 @@
+tinyMCE.addI18n('de.locomedia_dlg',{
+  dialog_title: 'Mediendatei einfügen',
+  upload: 'Mediendatei hochladen',
+  loading: 'Laden...',
+  uploading: 'Hochladen...',
+  destroying: 'Löschen...',
+  confirm: 'Bist du sicher ?',
+  no_items: 'Momentan gibt es hier keine Mediendateien.'
+});
--- a/app/assets/javascripts/tinymce/plugins/locomedia/langs/en_dlg.js
+++ b/app/assets/javascripts/tinymce/plugins/locomedia/langs/en_dlg.js
@ -0,0 +1,9 @@
+tinyMCE.addI18n('en.locomedia_dlg',{
+  dialog_title: 'Insert media',
+  upload: 'Upload media',
+  loading: 'Loading...',
+  uploading: 'Uploading...',
+  destroying: 'Destroying...',
+  confirm: 'Are you sure ?',
+  no_items: 'There are no media for now.'
+});
--- a/app/assets/javascripts/tinymce/plugins/locomedia/langs/fr_dlg.js
+++ b/app/assets/javascripts/tinymce/plugins/locomedia/langs/fr_dlg.js
@ -0,0 +1,9 @@
+tinyMCE.addI18n('fr.locomedia_dlg',{
+  dialog_title: 'Insérer un média',
+  upload: 'Uploader média',
+  loading: 'Chargement...',
+  uploading: 'Uploading...',
+  destroying: 'Suppression...',
+  confirm: 'Êtes-vous sûr(e) ?',
+  no_items: 'Il n\'y a aucun média pour l\'instant'
+});
--- a/app/assets/javascripts/tinymce/plugins/locomedia/langs/it_dlg.js
+++ b/app/assets/javascripts/tinymce/plugins/locomedia/langs/it_dlg.js
@ -0,0 +1,9 @@
+tinyMCE.addI18n('it.locomedia_dlg',{
+  dialog_title: 'Inserisci immagine',
+  upload: 'Carica immagine',
+  loading: 'Caricamento...',
+  uploading: 'Caricamento file...',
+  destroying: 'Eliminazione...',
+  confirm: 'Sicuro?',
+  no_items: 'Per ora non ci sono immagini.'
+});
--- a/app/assets/javascripts/tinymce/plugins/locomedia/langs/no_dlg.js
+++ b/app/assets/javascripts/tinymce/plugins/locomedia/langs/no_dlg.js
@ -0,0 +1,9 @@
+tinyMCE.addI18n('no.locomedia_dlg',{
+  dialog_title: 'Sett inn media',
+  upload: 'Last opp media',
+  loading: 'Laster inn...',
+  uploading: 'Laster opp...',
+  destroying: 'Sletter...',
+  confirm: 'Er du sikker?',
+  no_items: 'Ingen media foreløpig.'
+});
--- a/app/assets/javascripts/tinymce/plugins/locomedia_old/css/style.css
+++ b/app/assets/javascripts/tinymce/plugins/locomedia_old/css/style.css
@ -0,0 +1,95 @@
+body {
+  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-size: 1em;
+  overflow: hidden;
+}
+
+p.no-items {
+  padding: 18px 0px;
+  background: transparent url(/assets/locomotive//list/none-small.png) no-repeat center 0;
+  text-align: center;
+  color: #9d8963 !important;
+  font-size: 1.1em !important;
+}
+
+.actions {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+ul.assets {
+  overflow: auto;
+  height: 275px;
+}
+
+ul.assets li.asset h4 a {
+  top: 9px;
+  font-size: 0.7em;
+}
+
+ul.assets li.asset .inside {
+  cursor: pointer;
+}
+
+ul.assets li.asset div.actions {
+  top: 7px;
+}
+
+ul.assets li.new-asset {
+  display: none;
+}
+
+#upload-link {
+  float: left;
+  display: block;
+  background: transparent url(/assets/locomotive//buttons/dark-gray-bg.png) repeat-x 0 0;
+  outline: none;
+  -moz-border-radius : 4px;
+  -webkit-border-radius: 4px;
+  height: 20px;
+  font-size: 0.8em;
+  font-family: 'Lucida Grande';
+  padding: 5px 12px 5px 12px;
+  margin: 5px 0 0 14px;
+  color: #fff !important;
+  text-decoration: none;
+  text-shadow: 1px 1px 1px #000;
+}
+
+#spinner {
+  position: fixed;
+  top: 40%;
+  left: 30%;
+  height: 60px;
+  width: 250px;
+  background: transparent;
+  z-index: 999;
+}
+
+#spinner .overlay, #spinner .text {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  -moz-border-radius : 10px;
+  -webkit-border-radius: 10px;
+}
+
+#spinner .overlay {
+  background: #000;
+  opacity: 0.8;
+}
+
+#spinner .text {
+  padding: 20px 0;
+  text-align: center;
+  font-size: 1.1em;
+  color: #fff;
+  text-shadow: 1px 1px 1px #000;
+}
+
+.mceActionPanel input {
+  font-size: 0.8em;
+}
--- a/app/assets/javascripts/tinymce/plugins/locomedia_old/dialog.htm
+++ b/app/assets/javascripts/tinymce/plugins/locomedia_old/dialog.htm
@ -0,0 +1,55 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>{#locomedia_dlg.dialog_title}</title>
+
+  <script type="text/javascript" src="../../tiny_mce_popup.js"></script>
+
+  <script type="text/javascript" src="/javascripts/admin/jquery.js"></script>
+  <script type="text/javascript" src="/javascripts/admin/rails.js"></script>
+
+  <script type="text/javascript" src="/javascripts/admin/plugins/plupload/plupload.full.js"></script>
+  <script type="text/javascript" src="/javascripts/admin/plugins/plupload/jquery.plupload.queue/jquery.plupload.queue.js"></script>
+
+  <script type="text/javascript" src="js/dialog.js?2"></script>
+
+  <link href="/stylesheets/admin/assets.css" rel="stylesheet" type="text/css" />
+  <link href="css/style.css" rel="stylesheet" type="text/css" />
+</head>
+<body id="locomedia" style="display: none">
+
+  <div id="spinner">
+    <div class="overlay"></div>
+    <div class="text loading">{#locomedia_dlg.loading}</div>
+    <div class="text uploading" style="display: none">{#locomedia_dlg.uploading}</div>
+    <div class="text destroying" style="display: none">{#locomedia_dlg.destroying}</div>
+  </div>
+
+  <p class="no-items" style="display: none">{#locomedia_dlg.no_items}</p>
+
+  <form onsubmit="insertAction();return false;" action="#">
+    <div id="images">
+      <ul class="assets">
+        <li class="new-asset">
+          <h4><a href="#">NoName</a></h4>
+          <div class="icon">
+            <div class="inside">
+            </div>
+          </div>
+          <div class="actions">
+            <a href="#" class="remove" data-remote="true" data-confirm="{#locomedia_dlg.confirm}" data-method="delete" rel="nofollow">
+              <img src="/assets/locomotive//list/icons/cross.png">
+            </a>
+          </div>
+        </li>
+        <li class="clear"></li>
+      </ul>
+    </div>
+
+    <div class="mceActionPanel">
+      <a href="/admin/assets.json" id="upload-link">{#locomedia_dlg.upload}</a>
+      <input type="button" id="cancel" name="cancel" value="{#cancel}" onclick="tinyMCEPopup.close();" />
+    </div>
+  </form>
+</body>
+</html>
--- a/app/assets/javascripts/tinymce/plugins/locomedia_old/editor_plugin.js
+++ b/app/assets/javascripts/tinymce/plugins/locomedia_old/editor_plugin.js
@ -0,0 +1 @@
+(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)})();
--- a/app/assets/javascripts/tinymce/plugins/locomedia_old/editor_plugin_src.js
+++ b/app/assets/javascripts/tinymce/plugins/locomedia_old/editor_plugin_src.js
@ -0,0 +1,46 @@
+/**
+ * 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) {
+      // Register commands
+      ed.addCommand('locoMedia', function() {
+        ed.windowManager.open({
+          file : url + '/dialog.htm',
+          width : 645,
+          height : 650,
+          inline : 1
+        }, {
+          plugin_url : url
+        });
+      });
+
+      // 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);
+})();
--- a/app/assets/javascripts/tinymce/plugins/locomedia_old/img/sample.gif
+++ b/app/assets/javascripts/tinymce/plugins/locomedia_old/img/sample.gif
--- a/app/assets/javascripts/tinymce/plugins/locomedia_old/js/dialog.js
+++ b/app/assets/javascripts/tinymce/plugins/locomedia_old/js/dialog.js
@ -0,0 +1,205 @@
+var MediafileDialog = {
+  formElement: null,
+
+  listElement: null,
+
+  preInit : function() {
+    var url;
+
+    tinyMCEPopup.requireLangPack();
+
+    if (url = tinyMCEPopup.getParam("external_image_list_url"))
+      document.write('<script language="javascript" type="text/javascript" src="' + tinyMCEPopup.editor.documentBaseURI.toAbsolute(url) + '"></script>');
+  },
+
+  init : function(ed) {
+    var self = this;
+
+    with(window.parent) {
+      var csrf_token = $('meta[name=csrf-token]').attr('content'),
+          csrf_param = $('meta[name=csrf-param]').attr('content');
+    }
+
+    $.fn.setCsrfSettings(csrf_token, csrf_param);
+
+    formElement = $(document.forms[0]);
+
+    listElement = formElement.find('ul');
+
+    $.getJSON('/admin/assets.json', function(data) {
+      $(data.assets).each(function() {
+        self._addAsset(this);
+      });
+
+      self.setupUploader();
+
+      self.hideSpinner();
+
+      if ($('ul li.asset').length == 0) $('p.no-items').show();
+    });
+  },
+
+  hideSpinner: function() {
+    $('#spinner').hide();
+  },
+
+  showSpinner: function(msg) {
+    $('#spinner .text').hide();
+    $('#spinner .' + msg).show();
+    $('#spinner').show();
+  },
+
+  insertFile: function(asset) {
+    var ed = tinyMCEPopup.editor, f = document.forms[0], nl = f.elements, v, args = {}, el;
+
+    tinyMCEPopup.restoreSelection();
+
+    // Fixes crash in Safari
+    if (tinymce.isWebKit) ed.getWin().focus();
+
+    if (asset.content_type == 'image')
+      tinymce.extend(args, { src : asset.url });
+    else
+      tinymce.extend(args, { href : asset.url });
+
+    el = ed.selection.getNode();
+
+    if (el && (el.nodeName == 'IMG' || el.nodeName == 'A')) {
+     ed.dom.setAttribs(el, args);
+    } else {
+      if (asset.content_type == 'image') {
+        ed.execCommand('mceInsertContent', false, '<img id="__mce_tmp" />', { skip_undo: 1 });
+      } else {
+        var html = ed.selection.getContent();
+        if (html == '') html = asset.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();
+    }
+
+    tinyMCEPopup.close();
+  },
+
+  setupUploader: function() {
+    var self = this;
+    var multipartParams = {};
+
+    with(window.parent) {
+      multipartParams[$('meta[name=csrf-param]').attr('content')] = $('meta[name=csrf-token]').attr('content');
+    }
+
+    var uploader = new plupload.Uploader({
+      // runtimes : (jQuery.browser.webkit == true ? 'flash' : 'html5,flash'),
+      runtimes: 'gears,html5,flash',
+      browse_button : 'upload-link',
+      max_file_size : '10mb',
+      url : $('a#upload-link').attr('href'),
+      flash_swf_url : '/javascripts/admin/plugins/plupload/plupload.flash.swf',
+      multipart: true,
+      multipart_params: multipartParams,
+      filters : [
+        { title : 'Media files', extensions : 'png,gif,jpg,jpeg,pdf,doc,docx,xls,xlsx,txt' },
+      ]
+    });
+
+    uploader.bind('BeforeUpload', function(up, file) {
+      file.name = unescape(encodeURIComponent(file.name));
+      console.log(file.name);
+    });
+
+    uploader.bind('QueueChanged', function() {
+      self.showSpinner('uploading');
+      uploader.start();
+    });
+
+    uploader.bind('FileUploaded', function(up, file, response) {
+      console.log(up);
+      console.log(file);
+      console.log(response);
+
+      var json = JSON.parse(response.response);
+
+      if (json.status == 'success')
+        self._addAsset(json);
+
+      self.hideSpinner();
+    });
+
+    uploader.init();
+  },
+
+  _addAsset: function(data) {
+    var self = this;
+
+    var asset = $('ul li.new-asset')
+      .clone()
+      .insertBefore($('ul li.clear'))
+      .addClass('asset');
+
+    asset.find('h4 a').attr('href', data.url)
+      .html(data.short_name)
+      .bind('click', function(e) {
+        self.insertFile(data);
+        e.stopPropagation(); e.preventDefault();
+      });
+
+    html = '';
+
+    if (data.content_type == 'image') {
+      asset.find('.icon').removeClass('icon').addClass('image');
+      html = $('<img />')
+        .attr('src', data.vignette_url)
+        .bind('click', function(e) {
+          self.insertFile(data);
+        });
+    } else {
+      asset.find('.icon').addClass(data.content_type);
+      html = data.content_type == 'other' ? data.extname : data.content_type;
+      if (html == '') html = '?'
+      html = $('<span />').html(html)
+        .bind('click', function(e) {
+          self.insertFile(data);
+        });
+    }
+
+    asset.find('.inside').append(html);
+
+    asset.find('.actions a')
+      .attr('href', data.destroy_url)
+      .bind('ajax:success', function(event, data) {
+        self._destroyAsset(asset);
+      });
+
+    if ($('ul li.asset').length % 4 == 0)
+      asset.addClass('last');
+
+    asset.removeClass('new-asset');
+
+    $('p.no-items').hide();
+  },
+
+  _destroyAsset: function(asset) {
+    asset.remove();
+
+    if ($('ul li.asset').length == 0) {
+      $('p.no-items').show();
+    } else {
+      $('ul li.asset').each(function(index) {
+        if ((index + 1) % 4 == 0)
+          $(this).addClass('last');
+        else
+          $(this).removeClass('last');
+      });
+    }
+
+    this.hideSpinner();
+  }
+
+};
+
+MediafileDialog.preInit();
+tinyMCEPopup.onInit.add(MediafileDialog.init, MediafileDialog);
--- a/app/assets/javascripts/tinymce/plugins/locomedia_old/langs/de_dlg.js
+++ b/app/assets/javascripts/tinymce/plugins/locomedia_old/langs/de_dlg.js
@ -0,0 +1,9 @@
+tinyMCE.addI18n('de.locomedia_dlg',{
+  dialog_title: 'Mediendatei einfügen',
+  upload: 'Mediendatei hochladen',
+  loading: 'Laden...',
+  uploading: 'Hochladen...',
+  destroying: 'Löschen...',
+  confirm: 'Bist du sicher ?',
+  no_items: 'Momentan gibt es hier keine Mediendateien.'
+});
--- a/app/assets/javascripts/tinymce/plugins/locomedia_old/langs/en_dlg.js
+++ b/app/assets/javascripts/tinymce/plugins/locomedia_old/langs/en_dlg.js
@ -0,0 +1,9 @@
+tinyMCE.addI18n('en.locomedia_dlg',{
+  dialog_title: 'Insert media',
+  upload: 'Upload media',
+  loading: 'Loading...',
+  uploading: 'Uploading...',
+  destroying: 'Destroying...',
+  confirm: 'Are you sure ?',
+  no_items: 'There are no media for now.'
+});
--- a/app/assets/javascripts/tinymce/plugins/locomedia_old/langs/fr_dlg.js
+++ b/app/assets/javascripts/tinymce/plugins/locomedia_old/langs/fr_dlg.js
@ -0,0 +1,9 @@
+tinyMCE.addI18n('fr.locomedia_dlg',{
+  dialog_title: 'Insérer un média',
+  upload: 'Uploader média',
+  loading: 'Chargement...',
+  uploading: 'Uploading...',
+  destroying: 'Suppression...',
+  confirm: 'Êtes-vous sûr(e) ?',
+  no_items: 'Il n\'y a aucun média pour l\'instant'
+});
--- a/app/assets/javascripts/tinymce/plugins/locomedia_old/langs/it_dlg.js
+++ b/app/assets/javascripts/tinymce/plugins/locomedia_old/langs/it_dlg.js
@ -0,0 +1,9 @@
+tinyMCE.addI18n('it.locomedia_dlg',{
+  dialog_title: 'Inserisci immagine',
+  upload: 'Carica immagine',
+  loading: 'Caricamento...',
+  uploading: 'Caricamento file...',
+  destroying: 'Eliminazione...',
+  confirm: 'Sicuro?',
+  no_items: 'Per ora non ci sono immagini.'
+});
--- a/app/assets/javascripts/tinymce/plugins/locomedia_old/langs/no_dlg.js
+++ b/app/assets/javascripts/tinymce/plugins/locomedia_old/langs/no_dlg.js
@ -0,0 +1,9 @@
+tinyMCE.addI18n('no.locomedia_dlg',{
+  dialog_title: 'Sett inn media',
+  upload: 'Last opp media',
+  loading: 'Laster inn...',
+  uploading: 'Laster opp...',
+  destroying: 'Sletter...',
+  confirm: 'Er du sikker?',
+  no_items: 'Ingen media foreløpig.'
+});
--- a/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/content.css
+++ b/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/content.css
@ -0,0 +1,66 @@
+/*body, td, pre {color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; margin:8px;}
+body {background:#FFF;}
+body.mceForceColors {background:#FFF; color:#000;}
+h1 {font-size: 2em}
+h2 {font-size: 1.5em}
+h3 {font-size: 1.17em}
+h4 {font-size: 1em}
+h5 {font-size: .83em}
+h6 {font-size: .75em}
+.mceItemTable, .mceItemTable td, .mceItemTable th, .mceItemTable caption, .mceItemVisualAid {border: 1px dashed #BBB;}
+a.mceItemAnchor {display:inline-block; width:11px !important; height:11px  !important; background:url(img/items.gif) no-repeat 0 0;}
+td.mceSelected, th.mceSelected {background-color:#3399ff !important}
+img {border:0;}
+table {cursor:default}
+table td, table th {cursor:text}
+ins {border-bottom:1px solid green; text-decoration: none; color:green}
+del {color:red; text-decoration:line-through}
+cite {border-bottom:1px dashed blue}
+acronym {border-bottom:1px dotted #CCC; cursor:help}
+abbr {border-bottom:1px dashed #CCC; cursor:help}
+
+* html body {
+scrollbar-3dlight-color:#F0F0EE;
+scrollbar-arrow-color:#676662;
+scrollbar-base-color:#F0F0EE;
+scrollbar-darkshadow-color:#DDD;
+scrollbar-face-color:#E0E0DD;
+scrollbar-highlight-color:#F0F0EE;
+scrollbar-shadow-color:#F0F0EE;
+scrollbar-track-color:#F5F5F5;
+}
+
+img:-moz-broken {-moz-force-broken-image-icon:1; width:24px; height:24px}
+font[face=mceinline] {font-family:inherit !important}*/
+body, td, pre {color:#000; font: 12px/1.5em "Lucida Grande", Helvetica, Arial, sans-serif; margin:8px;}
+html,body {background:#FFF; padding: 0 !important; margin: 0 !important; }
+body {height: 94% !important; padding: .5% 5px !important;}
+body.mceForceColors {background:#FFF; color:#000;}
+h1 {font-size: 2em}
+h2 {font-size: 1.5em}
+h3 {font-size: 1.17em}
+h4 {font-size: 1em}
+h5 {font-size: .83em}
+h6 {font-size: .75em}
+.mceItemTable, .mceItemTable td, .mceItemTable th, .mceItemTable caption, .mceItemVisualAid {border: 1px dashed #BBB;}
+a.mceItemAnchor {width:12px; line-height:6px; overflow:hidden; padding-left:12px; background:url(img/items.gif) no-repeat bottom left;}
+img.mceItemAnchor {width:12px; height:12px; background:url(img/items.gif) no-repeat;}
+img {border:0;}
+table {cursor:default}
+table td, table th {cursor:text}
+ins {border-bottom:1px solid green; text-decoration: none; color:green}
+del {color:red; text-decoration:line-through}
+cite {border-bottom:1px dashed blue}
+acronym {border-bottom:1px dotted #CCC; cursor:help}
+abbr, html\:abbr {border-bottom:1px dashed #CCC; cursor:help}
+
+* html body {
+scrollbar-3dlight-color:#F0F0EE;
+scrollbar-arrow-color:#676662;
+scrollbar-base-color:#F0F0EE;
+scrollbar-darkshadow-color:#DDD;
+scrollbar-face-color:#E0E0DD;
+scrollbar-highlight-color:#F0F0EE;
+scrollbar-shadow-color:#F0F0EE;
+scrollbar-track-color:#F5F5F5;
+}
--- a/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/dialog.scss
+++ b/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/dialog.scss
@ -0,0 +1,73 @@
+@import "compass/css3";
+@import "compass/css3/border-radius";
+@import "compass/css3/images";
+@import "compass/css3/text-shadow";
+
+/* Generic */
+html {
+}
+
+body {
+  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-size: 13px;
+/*  font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px;*/
+  // background: #fff;
+  padding: 0px;
+  margin: 0px;
+  // margin: 8px 10px 0 10px;
+  // padding-bottom: 120px;
+
+  background: #8b8d9a;
+  @include border-bottom-radius(6px);
+}
+
+.title {
+  color: #8B8D9A;
+  padding: 5px 0px 10px 0px;
+}
+
+.tabs { display: none; }
+
+.mceActionPanel {
+  // position: absolute;
+  // left: 0px;
+  // bottom: 0px;
+  height: 49px;
+  width: 100%;
+  background: #8b8d9a;
+  padding: 12px 0 0 0px;
+  text-align: right;
+}
+
+.mceMiddle span {
+  background: red !important;
+}
+
+.mceActionPanel input {
+  color: #787A89;
+  text-shadow: 1px 1px 1px #fff;
+  background: #d9dce8;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  box-shadow: 1px 1px 1px #333;
+  padding: 6px 9px 8px;
+  margin: 5px 20px 0 0;
+  font-size: 1em;
+  border: 0px;
+  background-image: -webkit-gradient(
+      linear,
+      left bottom,
+      left top,
+      color-stop(0.01, rgb(215,219,231)),
+      color-stop(0.47, rgb(235,237,244)),
+      color-stop(0.7, rgb(235,237,244))
+  );
+  background-image: -moz-linear-gradient(
+      center bottom,
+      rgb(215,219,231) 1%,
+      rgb(235,237,244) 47%,
+      rgb(235,237,244) 70%
+  );
+  cursor: pointer;
+}
--- a/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/img/butt2.png
+++ b/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/img/butt2.png
--- a/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/img/button-bg.png
+++ b/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/img/button-bg.png
--- a/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/img/buttons.png
+++ b/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/img/buttons.png
--- a/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/img/down_arrow.gif
+++ b/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/img/down_arrow.gif
--- a/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/img/fade-butt.png
+++ b/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/img/fade-butt.png
--- a/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/img/icons.png
+++ b/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/img/icons.png
--- a/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/img/items.gif
+++ b/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/img/items.gif
--- a/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/img/menu-arrow.png
+++ b/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/img/menu-arrow.png
--- a/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/img/menu-check.png
+++ b/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/img/menu-check.png
--- a/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/img/progress.gif
+++ b/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/img/progress.gif
--- a/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/img/tabs.gif
+++ b/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/img/tabs.gif
--- a/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/img/toolbarbg.png
+++ b/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/img/toolbarbg.png
--- a/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/ui.css
+++ b/app/assets/javascripts/tinymce/themes/advanced/skins/locomotive/ui.css
--- a/app/assets/stylesheets/locomotive/_buttons.scss
+++ b/app/assets/stylesheets/locomotive/_buttons.scss
@ -56,7 +56,7 @@
  text-decoration: none;
  @include text-shadow(rgba(255, 255, 255, 0.8), 0px, 1px, 0px);

-  &:hover {
+  &:hover, &.hover {
    @include background-image(linear-gradient(top, #fff, #d7dbe7));
  }

--- a/app/assets/stylesheets/locomotive/application.scss
+++ b/app/assets/stylesheets/locomotive/application.scss
@ -71,6 +71,7 @@ ul.list {
      font-weight: bold;
      font-size: 14px;
      color: #1F82BC;
+      outline: none;
    }

    em {
--- a/app/assets/stylesheets/locomotive/dialog_changes.scss
+++ b/app/assets/stylesheets/locomotive/dialog_changes.scss
@ -3,6 +3,7 @@
@import "compass/css3/images";
@import "compass/css3/text-shadow";
@import "buttons";
+@import "helpers";

 .ui-widget-overlay {
  background: #000;
@ -10,41 +11,62 @@
 }

 .ui-dialog {
+  position: absolute;
+
  font-family: Helvetica, Arial;

-  background: #fff;
+  background: transparent;
+
+  padding: 0px;
+  border: none;
  @include box-shadow(rgba(0, 0, 0, 0.2) 0px 0px 10px 3px);

-  padding: 10px;
-
-  border: 1px solid #7c7e7f;
  @include border-radius(6px);

  .ui-dialog-titlebar {
-    display: none;
-  }
+    display: block;
+    position: static;
+    height: auto;
+    z-index: 100;

-  .ui-dialog-content {
-    position: relative;
-
-    text-align: left;
-
-    padding: 0px;
    background: #fff;

-    h2 {
-      padding-bottom: 10px;
-      line-height: 18px;
-      border-bottom: 1px dotted #bbbbbd;
+    padding: 10px;
+    margin: 0 0 0 0;

+    border: 0px;
+    border-bottom: 1px dotted #bbbbbd;
+    @include border-radius(0px);
+    @include border-top-radius(6px);
+
+    .ui-dialog-title, .ui-dialog-titlebar-close {
+      display: none;
+    }
+
+    h2 {
+      margin: 0px;
+
+      line-height: 18px;
+
+      text-align: left;
      color: #1E1F26;
      font-size: 18px;
      font-weight: bold;
    }
+  }
+
+  .ui-dialog-content {
+    position: relative;
+    z-index: 101;
+
+    text-align: left;
+
+    padding: 10px;
+    background: #fff;

    .actions {
      position: absolute;
-      top: -2px;
+      top: -22px;
      right: 2px;

      a {
@ -74,7 +96,52 @@
      overflow: auto;
      height: 350px;
    }
-  }
+  } // .ui-dialog-content

+
+  .ui-dialog-buttonpane {
+    position: relative;
+
+    z-index: 999;
+    margin: 0px 0 0 0px;
+    padding: 10px;
+
+    line-height: 30px;
+
+    @include border-bottom-radius(6px);
+    border-top: 1px solid #5F6069;
+    background: #8B8D9A;
+
+    a#close-link {
+      @include hover-link;
+      color: #fff;
+      font-size: 12px;
+    }
+
+    .upload-button-wrapper {
+      position: absolute;
+      top: 8px;
+      right: 10px;
+
+      a {
+        @include light-button;
+      }
+
+      #theme_asset_sourceUploader {
+        position: absolute;
+        top: 0px;
+        right: 0px;
+      }
+
+      #theme_asset_sourceUploader {
+        z-index: 1001;
+      }
+
+      a {
+        z-index: 1000;
+      }
+    } // .button-wrapper
+
+  } // .ui-dialog-buttonpane
 }

--- a/app/controllers/locomotive/content_assets_controller.rb
+++ b/app/controllers/locomotive/content_assets_controller.rb
@ -1,5 +1,5 @@
 module Locomotive
-  class AssetsController < BaseController
+  class ContentAssetsController < BaseController

    include ActionView::Helpers::SanitizeHelper
    include ActionView::Helpers::TextHelper
--- a/app/views/locomotive/content_assets/_asset.html.haml
+++ b/app/views/locomotive/content_assets/_asset.html.haml
--- a/app/views/locomotive/pages/_form.html.haml
+++ b/app/views/locomotive/pages/_form.html.haml
@ -40,6 +40,6 @@

    = f.input :redirect_url, :required => true, :wrapper_html => { :style => "#{'display: none' unless @page.redirect?}" }

-  = f.inputs :name => :raw_template, :class => "inputs foldable #{'folded' if inputs_folded?(@page)}" do
+  = f.inputs :name => :raw_template, :class => "inputs foldable" do

    = f.input :raw_template, :as => :'Locomotive::Code'
--- a/app/views/locomotive/theme_assets/_picker.html.haml
+++ b/app/views/locomotive/theme_assets/_picker.html.haml
@ -2,14 +2,17 @@

  %h2!= t('locomotive.theme_assets.images.title')

-  .actions.button-wrapper
-    = file_field_tag 'theme_asset[source]'
-    = local_action_button t('locomotive.theme_assets.index.new'), theme_assets_url(:json), :class => 'new', :id => 'upload-link'
-
  %p.no-items{ :style => 'display: none' }!= t('.no_items')

  %ul.list{ :style => 'display: none' }

+  .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'
+
+
 %script{ :type => 'text/html', :id => 'theme_asset' }

  %li
--- a/config/locales/admin_ui.en.yml
+++ b/config/locales/admin_ui.en.yml
@ -7,6 +7,7 @@ en:
      new_item: "+ add"
      switch_to_site: Go
      delete: "Delete"
+      close: "Close"

    messages:
      confirm: Are you sure ?
@ -184,6 +185,7 @@ 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
--- a/config/locales/admin_ui.fr.yml
+++ b/config/locales/admin_ui.fr.yml
@ -186,6 +186,7 @@ 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
--- a/config/routes.rb
+++ b/config/routes.rb
@ -33,7 +33,7 @@ Locomotive::Engine.routes.draw do
    get :all, :action => 'index', :on => :collection, :defaults => { :all => true }
  end

-  # resources :assets # TODO: conflict name
+  resources :content_assets

  resources :content_types
				`@ -0,0 +1 @@`
				(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)})();