simple media plugin for Aloha

Gemfile

@@ -11,6 +11,8 @@ group :development do
   # gem 'custom_fields', :path => '../gems/custom_fields' # for Developers
   # gem 'custom_fields', :git => 'git://github.com/locomotivecms/custom_fields.git', :branch => '2.0.0.rc' # Branch on Github
 
+  # gem 'locomotive-aloha-rails', :path => '../gems/aloha-rails' # for Developers
+
   gem 'rspec-rails', '~> 2.8.0' # In order to have rspec tasks and generators
   gem 'rspec-cells'
 

Gemfile.lock

@@ -38,7 +38,7 @@ PATH
       httparty (~> 0.8.1)
       jquery-rails (~> 1.0.16)
       kaminari (~> 0.13.0)
-      locomotive-aloha-rails (~> 0.20.1.2)
+      locomotive-aloha-rails (~> 0.20.1.3)
       locomotive-mongoid-tree (~> 0.6.2)
       locomotive-tinymce-rails (~> 3.4.7.2)
       locomotive_liquid (= 2.2.2)
@@ -199,7 +199,7 @@ GEM
       addressable (~> 2.2.6)
     libwebsocket (0.1.3)
       addressable
-    locomotive-aloha-rails (0.20.1.2)
+    locomotive-aloha-rails (0.20.1.3)
       actionpack (~> 3.2.1)
     locomotive-mongoid-tree (0.6.2)
       mongoid (~> 2.0)

app/assets/javascripts/aloha/plugins/custom/locomotive_media/css/image.css

@@ -0,0 +1,3 @@
+button.aloha-locomotive-media-insert {
+  background: url(../img/image.gif) !important;
+}

app/assets/javascripts/aloha/plugins/custom/locomotive_media/lib/locomotive_media-plugin.js

@@ -0,0 +1,96 @@
+define(
+  ['aloha/jquery', 'aloha/plugin', 'aloha/floatingmenu', 'i18n!aloha/nls/i18n', 'i18n!locomotive_media/nls/i18n', 'css!locomotive_media/css/image.css'],
+  function(aQuery, Plugin, FloatingMenu, i18nCore, i18n) {
+      var jQuery = aQuery;
+      var $ = aQuery;
+      var GENTICS = window.GENTICS, Aloha = window.Aloha;
+
+      return Plugin.create('locomotive_media', {
+        init: function() {
+          FloatingMenu.createScope(this.name, 'Aloha.continuoustext');
+
+          this._addUIInsertButton(i18nCore.t('floatingmenu.tab.insert'));
+        },
+
+        openDialog: function() {
+          var that   = this;
+          var picker = window.parent.application_view.content_assets_picker_view;
+
+          picker.options.on_select = function(asset) {
+            if (asset.get('image') == true)
+              that.insertImg(asset);
+            else
+              that.insertLink(asset);
+
+            picker.close();
+          }
+
+          picker.render()
+        },
+
+        /**
+        * This method will insert a new image dom element into the dom tree
+        */
+        insertImg: function(asset) {
+          var range = Aloha.Selection.getRangeObject(),
+          imageUrl  = asset.get('url'),
+          imagestyle, imagetag, newImg;
+
+          if (range.isCollapsed()) {
+            imagestyle = "max-width: " + asset.get('width') + "; max-height: " + asset.get('height');
+            imagetag = '<img style="'+ imagestyle + '" src="' + imageUrl + '" title="" />';
+            newImg = jQuery(imagetag);
+            GENTICS.Utils.Dom.insertIntoDOM(newImg, range, jQuery(Aloha.activeEditable.obj));
+          } else {
+            Aloha.Log.error('media cannot markup a selection');
+          }
+        },
+
+        /**
+        * This method will insert a new link dom element into the dom tree
+        */
+        insertLink: function(asset) {
+          var range = Aloha.Selection.getRangeObject(),
+          linkText  = asset.get('filename'),
+          linkUrl   = asset.get('url'),
+          linktag, newLink;
+
+          if (range.isCollapsed()) {
+            linktag = '<a href="' + linkUrl + '">' + linkText + '</a>';
+            newLink = jQuery(linktag);
+            GENTICS.Utils.Dom.insertIntoDOM(newLink, range, jQuery(Aloha.activeEditable.obj));
+            range.startContainer = range.endContainer = newLink.contents().get(0);
+            range.startOffset = 0;
+            range.endOffset = linkText.length;
+          } else {
+            linktag = '<a href="' + linkUrl + '"></a>';
+            newLink = jQuery(linktag);
+            GENTICS.Utils.Dom.addMarkup(range, newLink, false);
+          }
+        },
+
+        /**
+         * Adds the insert button to the floating menu
+         */
+        _addUIInsertButton: function(tabId) {
+          var that = this;
+          this.insertMediaButton = new Aloha.ui.Button({
+            'name' : 'insertlocomotivemedia',
+            'iconClass': 'aloha-button aloha-locomotive-media-insert',
+            'size' : 'small',
+            'onclick' : function () { that.openDialog(); },
+            'tooltip' : i18n.t('button.addimg.tooltip'),
+            'toggle' : false
+          });
+
+          FloatingMenu.addButton(
+            'Aloha.continuoustext',
+            this.insertMediaButton,
+            tabId,
+            1
+          );
+        },
+
+      });
+  }
+);

app/assets/javascripts/aloha/plugins/custom/locomotive_media/nls/fr/i18n.js

@@ -0,0 +1 @@
+define({ 'button.addimg.tooltip': 'insérer média' });

app/assets/javascripts/aloha/plugins/custom/locomotive_media/nls/i18n.js

@@ -0,0 +1,4 @@
+define({
+  root: { "button.addimg.tooltip": "insert media" },
+  fr: true
+});

app/assets/javascripts/aloha/plugins/custom/locomotive_media/package.json

@@ -0,0 +1 @@
+{}

app/assets/javascripts/locomotive/aloha.js.coffee

@@ -1,2 +1,7 @@
 #= require ./utils/aloha_settings
 #= require aloha
+
+
+# r equire_tree ./../aloha/plugins
+
+# . /.. / aloha / plugins

app/assets/javascripts/locomotive/inline_editor.js.coffee

@@ -12,6 +12,7 @@
 #= require_self
 #= require_tree ./utils
 #= require_tree ./models
+#= require_tree ./views/content_assets
 #= require_tree ./views/inline_editor
 
 window.Locomotive =

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

@@ -23,6 +23,11 @@ window.Aloha.settings =
       editables:
         '.editable-short-text': [ ]
 
+    image:
+      ui:
+        insert: false
+        crop:   false
+
   i18n:
     available: ['en', 'fr', 'pt-BR', 'es', 'de', 'no', 'ru', 'nl']
 

app/assets/javascripts/locomotive/views/inline_editor/application_view.js.coffee

@@ -1,8 +1,8 @@
-Locomotive.Views.InlinEditor ||= {}
+Locomotive.Views.InlineEditor ||= {}
 
 #= require ./toolbar_view
 
-class Locomotive.Views.InlinEditor.ApplicationView extends Backbone.View
+class Locomotive.Views.InlineEditor.ApplicationView extends Backbone.View
 
   el: 'body'
 
@@ -13,7 +13,9 @@ class Locomotive.Views.InlinEditor.ApplicationView extends Backbone.View
 
     _.bindAll(@, '_$')
 
-    @toolbar_view = new Locomotive.Views.InlinEditor.ToolbarView(target: @iframe)
+    @toolbar_view = new Locomotive.Views.InlineEditor.ToolbarView(target: @iframe)
+
+    @content_assets_picker_view = new Locomotive.Views.ContentAssets.PickerView(collection: new Locomotive.Models.ContentAssetsCollection())
 
   render: ->
     super
@@ -74,7 +76,7 @@ class Locomotive.Views.InlinEditor.ApplicationView extends Backbone.View
     _jQuery('a').each ->
       link  = _jQuery(this)
       url   = link.attr('href')
-      if url? && url.indexOf('#') != 0 && /^(www|http)/.exec(url) == null && /(\/_edit)$/.exec(url) == null
+      if url? && url.indexOf('#') != 0 && /^(www|http)/.exec(url) == null && /(\/_edit)$/.exec(url) == null && /^\/sites\//.exec(url) == null
         url = '/index' if url == '/'
 
         unless url.indexOf('_edit') > 0

app/assets/javascripts/locomotive/views/inline_editor/toolbar_view.js.coffee

@@ -1,6 +1,6 @@
-Locomotive.Views.InlinEditor ||= {}
+Locomotive.Views.InlineEditor ||= {}
 
-class Locomotive.Views.InlinEditor.ToolbarView extends Backbone.View
+class Locomotive.Views.InlineEditor.ToolbarView extends Backbone.View
 
   el: '#toolbar .inner'
 

app/assets/stylesheets/locomotive/backoffice/application.css.scss

@@ -33,24 +33,6 @@
 
 /* ___ list ___ */
 
-p.no-items {
-  background: #fffbe6;
-  border: 5px solid #eee3a8;
-  @include border-radius(25px);
-
-  padding: 15px 0px;
-
-  text-align: center;
-  color: #9d8963;
-  font-size: 16px !important;
-  @include single-text-shadow(rgba(255, 255, 255, 1), 1px, 1px, 1px);
-
-  a {
-    @include hover-link;
-    color: #ff2900;
-  }
-}
-
 ul.list {
   background: #fff;
   list-style: none;
@@ -346,19 +328,3 @@ p span.code {
   color: #8B8D9A;
   @include single-text-shadow(#fff, 0px, 0px, 1px);
 }
-
-/* ___ quick upload ___ */
-
-form.quick-upload {
-  display: inline;
-
-  input[type=file] {
-    visibility: hidden;
-  }
-
-}
-
-
-
-
-

app/assets/stylesheets/locomotive/backoffice/content_assets.css.scss

@@ -6,6 +6,10 @@
 
 ul.content-assets {
 
+  list-style: none;
+  margin: 0px;
+  padding: 0px;
+
   li.asset {
     position: relative;
     float: left;

app/assets/stylesheets/locomotive/inline_editor.css

@@ -3,7 +3,10 @@
  * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
  * the top of the compiled file, but it's generally better to create a new file per style scope.
  *= require locomotive/blueprint/screen.css
+ *= require locomotive/jquery
  *= require locomotive/toggle.css
+ *= require locomotive/backoffice/dialog_changes.css
+ *= require locomotive/backoffice/content_assets.css
  *= require_tree ./shared
  *= require_tree ./inline_editor
 */

app/assets/stylesheets/locomotive/shared/common.css.scss

@@ -0,0 +1,34 @@
+@import "compass/css3/border-radius";
+@import "compass/css3/text-shadow";
+@import "locomotive/shared/helpers";
+
+/* ___ quick upload ___ */
+
+form.quick-upload {
+  display: inline;
+
+  input[type=file] {
+    visibility: hidden;
+  }
+
+}
+
+/* ___ list ___ */
+
+p.no-items {
+  background: #fffbe6;
+  border: 5px solid #eee3a8;
+  @include border-radius(25px);
+
+  padding: 15px 0px;
+
+  text-align: center;
+  color: #9d8963;
+  font-size: 16px !important;
+  @include single-text-shadow(rgba(255, 255, 255, 1), 1px, 1px, 1px);
+
+  a {
+    @include hover-link;
+    color: #ff2900;
+  }
+}

app/presenters/locomotive/content_asset_presenter.rb

@@ -1,7 +1,7 @@
 module Locomotive
   class ContentAssetPresenter < BasePresenter
 
-    delegate :content_type, :vignette_url, :to => :source
+    delegate :content_type, :width, :height, :vignette_url, :to => :source
 
     def full_filename
       self.source.source_filename
@@ -29,7 +29,7 @@ module Locomotive
     end
 
     def included_methods
-      super + %w(full_filename filename short_name extname content_type content_type_text url vignette_url)
+      super + %w(full_filename filename short_name extname content_type content_type_text url vignette_url width height)
     end
 
   end

app/views/locomotive/public/pages/show_toolbar.html.haml

@@ -25,11 +25,13 @@
 
         $(document).ready(function() {
 
-          window.application_view = new Locomotive.Views.InlinEditor.ApplicationView();
+          window.application_view = new Locomotive.Views.InlineEditor.ApplicationView();
           window.application_view.render();
 
         });
 
+    = render '/locomotive/content_assets/picker'
+
   %body
     #page
       %iframe{ :src => request.fullpath.gsub('_admin', '_edit'), :scrolling => 'no', :frameborder => '0' }

lib/locomotive/liquid/tags/inline_editor.rb

@@ -8,7 +8,7 @@ module Liquid
 
             controller = context.registers[:controller]
 
-            plugins = 'common/format,common/table,common/list,common/link,common/highlighteditables,common/block,common/undo,common/contenthandler,common/paste,common/commands,common/abbr,common/horizontalruler'
+            plugins = 'common/format,common/table,common/list,common/link,common/highlighteditables,common/block,common/undo,common/contenthandler,common/paste,common/commands,common/abbr,common/align,common/horizontalruler,custom/locomotive_media'
 
             %{
               <meta content="true" name="inline-editor" />

locomotive_cms.gemspec

@@ -39,7 +39,7 @@ Gem::Specification.new do |s|
   s.add_dependency 'rails-backbone',                  '~> 0.6.1'
   s.add_dependency 'codemirror-rails',                '~> 2.21'
   s.add_dependency 'locomotive-tinymce-rails',        '~> 3.4.7.2'
-  s.add_dependency 'locomotive-aloha-rails',          '~> 0.20.1.2'
+  s.add_dependency 'locomotive-aloha-rails',          '~> 0.20.1.3'
   s.add_dependency 'flash_cookie_session',            '~> 1.1.1'
 
   s.add_dependency 'locomotive_liquid',               '2.2.2'