Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

simple media plugin for Aloha

  • Loading branch information...
commit 08cf381bc35722db5032f84f30a5f6dd3a0570c8 1 parent d6059c2
Didier Lafforgue authored

Showing 21 changed files with 176 additions and 47 deletions. Show diff stats Hide diff stats

  1. +2 0  Gemfile
  2. +2 2 Gemfile.lock
  3. +3 0  app/assets/javascripts/aloha/plugins/custom/locomotive_media/css/image.css
  4. BIN  app/assets/javascripts/aloha/plugins/custom/locomotive_media/img/image.gif
  5. +96 0 app/assets/javascripts/aloha/plugins/custom/locomotive_media/lib/locomotive_media-plugin.js
  6. +1 0  app/assets/javascripts/aloha/plugins/custom/locomotive_media/nls/fr/i18n.js
  7. +4 0 app/assets/javascripts/aloha/plugins/custom/locomotive_media/nls/i18n.js
  8. +1 0  app/assets/javascripts/aloha/plugins/custom/locomotive_media/package.json
  9. +5 0 app/assets/javascripts/locomotive/aloha.js.coffee
  10. +1 0  app/assets/javascripts/locomotive/inline_editor.js.coffee
  11. +5 0 app/assets/javascripts/locomotive/utils/aloha_settings.js.coffee
  12. +6 4 app/assets/javascripts/locomotive/views/inline_editor/application_view.js.coffee
  13. +2 2 app/assets/javascripts/locomotive/views/inline_editor/toolbar_view.js.coffee
  14. +0 34 app/assets/stylesheets/locomotive/backoffice/application.css.scss
  15. +4 0 app/assets/stylesheets/locomotive/backoffice/content_assets.css.scss
  16. +3 0  app/assets/stylesheets/locomotive/inline_editor.css
  17. +34 0 app/assets/stylesheets/locomotive/shared/common.css.scss
  18. +2 2 app/presenters/locomotive/content_asset_presenter.rb
  19. +3 1 app/views/locomotive/public/pages/show_toolbar.html.haml
  20. +1 1  lib/locomotive/liquid/tags/inline_editor.rb
  21. +1 1  locomotive_cms.gemspec
2  Gemfile
@@ -11,6 +11,8 @@ group :development do
11 11 # gem 'custom_fields', :path => '../gems/custom_fields' # for Developers
12 12 # gem 'custom_fields', :git => 'git://github.com/locomotivecms/custom_fields.git', :branch => '2.0.0.rc' # Branch on Github
13 13
  14 + # gem 'locomotive-aloha-rails', :path => '../gems/aloha-rails' # for Developers
  15 +
14 16 gem 'rspec-rails', '~> 2.8.0' # In order to have rspec tasks and generators
15 17 gem 'rspec-cells'
16 18
4 Gemfile.lock
@@ -38,7 +38,7 @@ PATH
38 38 httparty (~> 0.8.1)
39 39 jquery-rails (~> 1.0.16)
40 40 kaminari (~> 0.13.0)
41   - locomotive-aloha-rails (~> 0.20.1.2)
  41 + locomotive-aloha-rails (~> 0.20.1.3)
42 42 locomotive-mongoid-tree (~> 0.6.2)
43 43 locomotive-tinymce-rails (~> 3.4.7.2)
44 44 locomotive_liquid (= 2.2.2)
@@ -199,7 +199,7 @@ GEM
199 199 addressable (~> 2.2.6)
200 200 libwebsocket (0.1.3)
201 201 addressable
202   - locomotive-aloha-rails (0.20.1.2)
  202 + locomotive-aloha-rails (0.20.1.3)
203 203 actionpack (~> 3.2.1)
204 204 locomotive-mongoid-tree (0.6.2)
205 205 mongoid (~> 2.0)
3  app/assets/javascripts/aloha/plugins/custom/locomotive_media/css/image.css
... ... @@ -0,0 +1,3 @@
  1 +button.aloha-locomotive-media-insert {
  2 + background: url(../img/image.gif) !important;
  3 +}
BIN  app/assets/javascripts/aloha/plugins/custom/locomotive_media/img/image.gif
96 app/assets/javascripts/aloha/plugins/custom/locomotive_media/lib/locomotive_media-plugin.js
... ... @@ -0,0 +1,96 @@
  1 +define(
  2 + ['aloha/jquery', 'aloha/plugin', 'aloha/floatingmenu', 'i18n!aloha/nls/i18n', 'i18n!locomotive_media/nls/i18n', 'css!locomotive_media/css/image.css'],
  3 + function(aQuery, Plugin, FloatingMenu, i18nCore, i18n) {
  4 + var jQuery = aQuery;
  5 + var $ = aQuery;
  6 + var GENTICS = window.GENTICS, Aloha = window.Aloha;
  7 +
  8 + return Plugin.create('locomotive_media', {
  9 + init: function() {
  10 + FloatingMenu.createScope(this.name, 'Aloha.continuoustext');
  11 +
  12 + this._addUIInsertButton(i18nCore.t('floatingmenu.tab.insert'));
  13 + },
  14 +
  15 + openDialog: function() {
  16 + var that = this;
  17 + var picker = window.parent.application_view.content_assets_picker_view;
  18 +
  19 + picker.options.on_select = function(asset) {
  20 + if (asset.get('image') == true)
  21 + that.insertImg(asset);
  22 + else
  23 + that.insertLink(asset);
  24 +
  25 + picker.close();
  26 + }
  27 +
  28 + picker.render()
  29 + },
  30 +
  31 + /**
  32 + * This method will insert a new image dom element into the dom tree
  33 + */
  34 + insertImg: function(asset) {
  35 + var range = Aloha.Selection.getRangeObject(),
  36 + imageUrl = asset.get('url'),
  37 + imagestyle, imagetag, newImg;
  38 +
  39 + if (range.isCollapsed()) {
  40 + imagestyle = "max-width: " + asset.get('width') + "; max-height: " + asset.get('height');
  41 + imagetag = '<img style="'+ imagestyle + '" src="' + imageUrl + '" title="" />';
  42 + newImg = jQuery(imagetag);
  43 + GENTICS.Utils.Dom.insertIntoDOM(newImg, range, jQuery(Aloha.activeEditable.obj));
  44 + } else {
  45 + Aloha.Log.error('media cannot markup a selection');
  46 + }
  47 + },
  48 +
  49 + /**
  50 + * This method will insert a new link dom element into the dom tree
  51 + */
  52 + insertLink: function(asset) {
  53 + var range = Aloha.Selection.getRangeObject(),
  54 + linkText = asset.get('filename'),
  55 + linkUrl = asset.get('url'),
  56 + linktag, newLink;
  57 +
  58 + if (range.isCollapsed()) {
  59 + linktag = '<a href="' + linkUrl + '">' + linkText + '</a>';
  60 + newLink = jQuery(linktag);
  61 + GENTICS.Utils.Dom.insertIntoDOM(newLink, range, jQuery(Aloha.activeEditable.obj));
  62 + range.startContainer = range.endContainer = newLink.contents().get(0);
  63 + range.startOffset = 0;
  64 + range.endOffset = linkText.length;
  65 + } else {
  66 + linktag = '<a href="' + linkUrl + '"></a>';
  67 + newLink = jQuery(linktag);
  68 + GENTICS.Utils.Dom.addMarkup(range, newLink, false);
  69 + }
  70 + },
  71 +
  72 + /**
  73 + * Adds the insert button to the floating menu
  74 + */
  75 + _addUIInsertButton: function(tabId) {
  76 + var that = this;
  77 + this.insertMediaButton = new Aloha.ui.Button({
  78 + 'name' : 'insertlocomotivemedia',
  79 + 'iconClass': 'aloha-button aloha-locomotive-media-insert',
  80 + 'size' : 'small',
  81 + 'onclick' : function () { that.openDialog(); },
  82 + 'tooltip' : i18n.t('button.addimg.tooltip'),
  83 + 'toggle' : false
  84 + });
  85 +
  86 + FloatingMenu.addButton(
  87 + 'Aloha.continuoustext',
  88 + this.insertMediaButton,
  89 + tabId,
  90 + 1
  91 + );
  92 + },
  93 +
  94 + });
  95 + }
  96 +);
1  app/assets/javascripts/aloha/plugins/custom/locomotive_media/nls/fr/i18n.js
... ... @@ -0,0 +1 @@
  1 +define({ 'button.addimg.tooltip': 'insérer média' });
4 app/assets/javascripts/aloha/plugins/custom/locomotive_media/nls/i18n.js
... ... @@ -0,0 +1,4 @@
  1 +define({
  2 + root: { "button.addimg.tooltip": "insert media" },
  3 + fr: true
  4 +});
1  app/assets/javascripts/aloha/plugins/custom/locomotive_media/package.json
... ... @@ -0,0 +1 @@
  1 +{}
5 app/assets/javascripts/locomotive/aloha.js.coffee
... ... @@ -1,2 +1,7 @@
1 1 #= require ./utils/aloha_settings
2 2 #= require aloha
  3 +
  4 +
  5 +# r equire_tree ./../aloha/plugins
  6 +
  7 +# . /.. / aloha / plugins
1  app/assets/javascripts/locomotive/inline_editor.js.coffee
@@ -12,6 +12,7 @@
12 12 #= require_self
13 13 #= require_tree ./utils
14 14 #= require_tree ./models
  15 +#= require_tree ./views/content_assets
15 16 #= require_tree ./views/inline_editor
16 17
17 18 window.Locomotive =
5 app/assets/javascripts/locomotive/utils/aloha_settings.js.coffee
@@ -23,6 +23,11 @@ window.Aloha.settings =
23 23 editables:
24 24 '.editable-short-text': [ ]
25 25
  26 + image:
  27 + ui:
  28 + insert: false
  29 + crop: false
  30 +
26 31 i18n:
27 32 available: ['en', 'fr', 'pt-BR', 'es', 'de', 'no', 'ru', 'nl']
28 33
10 app/assets/javascripts/locomotive/views/inline_editor/application_view.js.coffee
... ... @@ -1,8 +1,8 @@
1   -Locomotive.Views.InlinEditor ||= {}
  1 +Locomotive.Views.InlineEditor ||= {}
2 2
3 3 #= require ./toolbar_view
4 4
5   -class Locomotive.Views.InlinEditor.ApplicationView extends Backbone.View
  5 +class Locomotive.Views.InlineEditor.ApplicationView extends Backbone.View
6 6
7 7 el: 'body'
8 8
@@ -13,7 +13,9 @@ class Locomotive.Views.InlinEditor.ApplicationView extends Backbone.View
13 13
14 14 _.bindAll(@, '_$')
15 15
16   - @toolbar_view = new Locomotive.Views.InlinEditor.ToolbarView(target: @iframe)
  16 + @toolbar_view = new Locomotive.Views.InlineEditor.ToolbarView(target: @iframe)
  17 +
  18 + @content_assets_picker_view = new Locomotive.Views.ContentAssets.PickerView(collection: new Locomotive.Models.ContentAssetsCollection())
17 19
18 20 render: ->
19 21 super
@@ -74,7 +76,7 @@ class Locomotive.Views.InlinEditor.ApplicationView extends Backbone.View
74 76 _jQuery('a').each ->
75 77 link = _jQuery(this)
76 78 url = link.attr('href')
77   - if url? && url.indexOf('#') != 0 && /^(www|http)/.exec(url) == null && /(\/_edit)$/.exec(url) == null
  79 + if url? && url.indexOf('#') != 0 && /^(www|http)/.exec(url) == null && /(\/_edit)$/.exec(url) == null && /^\/sites\//.exec(url) == null
78 80 url = '/index' if url == '/'
79 81
80 82 unless url.indexOf('_edit') > 0
4 app/assets/javascripts/locomotive/views/inline_editor/toolbar_view.js.coffee
... ... @@ -1,6 +1,6 @@
1   -Locomotive.Views.InlinEditor ||= {}
  1 +Locomotive.Views.InlineEditor ||= {}
2 2
3   -class Locomotive.Views.InlinEditor.ToolbarView extends Backbone.View
  3 +class Locomotive.Views.InlineEditor.ToolbarView extends Backbone.View
4 4
5 5 el: '#toolbar .inner'
6 6
34 app/assets/stylesheets/locomotive/backoffice/application.css.scss
@@ -33,24 +33,6 @@
33 33
34 34 /* ___ list ___ */
35 35
36   -p.no-items {
37   - background: #fffbe6;
38   - border: 5px solid #eee3a8;
39   - @include border-radius(25px);
40   -
41   - padding: 15px 0px;
42   -
43   - text-align: center;
44   - color: #9d8963;
45   - font-size: 16px !important;
46   - @include single-text-shadow(rgba(255, 255, 255, 1), 1px, 1px, 1px);
47   -
48   - a {
49   - @include hover-link;
50   - color: #ff2900;
51   - }
52   -}
53   -
54 36 ul.list {
55 37 background: #fff;
56 38 list-style: none;
@@ -346,19 +328,3 @@ p span.code {
346 328 color: #8B8D9A;
347 329 @include single-text-shadow(#fff, 0px, 0px, 1px);
348 330 }
349   -
350   -/* ___ quick upload ___ */
351   -
352   -form.quick-upload {
353   - display: inline;
354   -
355   - input[type=file] {
356   - visibility: hidden;
357   - }
358   -
359   -}
360   -
361   -
362   -
363   -
364   -
4 app/assets/stylesheets/locomotive/backoffice/content_assets.css.scss
@@ -6,6 +6,10 @@
6 6
7 7 ul.content-assets {
8 8
  9 + list-style: none;
  10 + margin: 0px;
  11 + padding: 0px;
  12 +
9 13 li.asset {
10 14 position: relative;
11 15 float: left;
3  app/assets/stylesheets/locomotive/inline_editor.css
@@ -3,7 +3,10 @@
3 3 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
4 4 * the top of the compiled file, but it's generally better to create a new file per style scope.
5 5 *= require locomotive/blueprint/screen.css
  6 + *= require locomotive/jquery
6 7 *= require locomotive/toggle.css
  8 + *= require locomotive/backoffice/dialog_changes.css
  9 + *= require locomotive/backoffice/content_assets.css
7 10 *= require_tree ./shared
8 11 *= require_tree ./inline_editor
9 12 */
34 app/assets/stylesheets/locomotive/shared/common.css.scss
... ... @@ -0,0 +1,34 @@
  1 +@import "compass/css3/border-radius";
  2 +@import "compass/css3/text-shadow";
  3 +@import "locomotive/shared/helpers";
  4 +
  5 +/* ___ quick upload ___ */
  6 +
  7 +form.quick-upload {
  8 + display: inline;
  9 +
  10 + input[type=file] {
  11 + visibility: hidden;
  12 + }
  13 +
  14 +}
  15 +
  16 +/* ___ list ___ */
  17 +
  18 +p.no-items {
  19 + background: #fffbe6;
  20 + border: 5px solid #eee3a8;
  21 + @include border-radius(25px);
  22 +
  23 + padding: 15px 0px;
  24 +
  25 + text-align: center;
  26 + color: #9d8963;
  27 + font-size: 16px !important;
  28 + @include single-text-shadow(rgba(255, 255, 255, 1), 1px, 1px, 1px);
  29 +
  30 + a {
  31 + @include hover-link;
  32 + color: #ff2900;
  33 + }
  34 +}
4 app/presenters/locomotive/content_asset_presenter.rb
... ... @@ -1,7 +1,7 @@
1 1 module Locomotive
2 2 class ContentAssetPresenter < BasePresenter
3 3
4   - delegate :content_type, :vignette_url, :to => :source
  4 + delegate :content_type, :width, :height, :vignette_url, :to => :source
5 5
6 6 def full_filename
7 7 self.source.source_filename
@@ -29,7 +29,7 @@ def url
29 29 end
30 30
31 31 def included_methods
32   - super + %w(full_filename filename short_name extname content_type content_type_text url vignette_url)
  32 + super + %w(full_filename filename short_name extname content_type content_type_text url vignette_url width height)
33 33 end
34 34
35 35 end
4 app/views/locomotive/public/pages/show_toolbar.html.haml
@@ -25,11 +25,13 @@
25 25
26 26 $(document).ready(function() {
27 27
28   - window.application_view = new Locomotive.Views.InlinEditor.ApplicationView();
  28 + window.application_view = new Locomotive.Views.InlineEditor.ApplicationView();
29 29 window.application_view.render();
30 30
31 31 });
32 32
  33 + = render '/locomotive/content_assets/picker'
  34 +
33 35 %body
34 36 #page
35 37 %iframe{ :src => request.fullpath.gsub('_admin', '_edit'), :scrolling => 'no', :frameborder => '0' }
2  lib/locomotive/liquid/tags/inline_editor.rb
@@ -8,7 +8,7 @@ def render(context)
8 8
9 9 controller = context.registers[:controller]
10 10
11   - 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'
  11 + 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'
12 12
13 13 %{
14 14 <meta content="true" name="inline-editor" />
2  locomotive_cms.gemspec
@@ -39,7 +39,7 @@ Gem::Specification.new do |s|
39 39 s.add_dependency 'rails-backbone', '~> 0.6.1'
40 40 s.add_dependency 'codemirror-rails', '~> 2.21'
41 41 s.add_dependency 'locomotive-tinymce-rails', '~> 3.4.7.2'
42   - s.add_dependency 'locomotive-aloha-rails', '~> 0.20.1.2'
  42 + s.add_dependency 'locomotive-aloha-rails', '~> 0.20.1.3'
43 43 s.add_dependency 'flash_cookie_session', '~> 1.1.1'
44 44
45 45 s.add_dependency 'locomotive_liquid', '2.2.2'

0 comments on commit 08cf381

Please sign in to comment.
Something went wrong with that request. Please try again.