Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

simple media plugin for Aloha

  • Loading branch information...
commit 08cf381bc35722db5032f84f30a5f6dd3a0570c8 1 parent d6059c2
Didier Lafforgue authored
Showing with 176 additions and 47 deletions.
  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
View
@@ -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'
4 Gemfile.lock
View
@@ -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)
3  app/assets/javascripts/aloha/plugins/custom/locomotive_media/css/image.css
View
@@ -0,0 +1,3 @@
+button.aloha-locomotive-media-insert {
+ background: url(../img/image.gif) !important;
+}
BIN  app/assets/javascripts/aloha/plugins/custom/locomotive_media/img/image.gif
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
96 app/assets/javascripts/aloha/plugins/custom/locomotive_media/lib/locomotive_media-plugin.js
View
@@ -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
+ );
+ },
+
+ });
+ }
+);
1  app/assets/javascripts/aloha/plugins/custom/locomotive_media/nls/fr/i18n.js
View
@@ -0,0 +1 @@
+define({ 'button.addimg.tooltip': 'insérer média' });
4 app/assets/javascripts/aloha/plugins/custom/locomotive_media/nls/i18n.js
View
@@ -0,0 +1,4 @@
+define({
+ root: { "button.addimg.tooltip": "insert media" },
+ fr: true
+});
1  app/assets/javascripts/aloha/plugins/custom/locomotive_media/package.json
View
@@ -0,0 +1 @@
+{}
5 app/assets/javascripts/locomotive/aloha.js.coffee
View
@@ -1,2 +1,7 @@
#= require ./utils/aloha_settings
#= require aloha
+
+
+# r equire_tree ./../aloha/plugins
+
+# . /.. / aloha / plugins
1  app/assets/javascripts/locomotive/inline_editor.js.coffee
View
@@ -12,6 +12,7 @@
#= require_self
#= require_tree ./utils
#= require_tree ./models
+#= require_tree ./views/content_assets
#= require_tree ./views/inline_editor
window.Locomotive =
5 app/assets/javascripts/locomotive/utils/aloha_settings.js.coffee
View
@@ -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']
10 app/assets/javascripts/locomotive/views/inline_editor/application_view.js.coffee
View
@@ -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
4 app/assets/javascripts/locomotive/views/inline_editor/toolbar_view.js.coffee
View
@@ -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'
34 app/assets/stylesheets/locomotive/backoffice/application.css.scss
View
@@ -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;
- }
-
-}
-
-
-
-
-
4 app/assets/stylesheets/locomotive/backoffice/content_assets.css.scss
View
@@ -6,6 +6,10 @@
ul.content-assets {
+ list-style: none;
+ margin: 0px;
+ padding: 0px;
+
li.asset {
position: relative;
float: left;
3  app/assets/stylesheets/locomotive/inline_editor.css
View
@@ -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
*/
34 app/assets/stylesheets/locomotive/shared/common.css.scss
View
@@ -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;
+ }
+}
4 app/presenters/locomotive/content_asset_presenter.rb
View
@@ -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 @@ def url
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
4 app/views/locomotive/public/pages/show_toolbar.html.haml
View
@@ -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' }
2  lib/locomotive/liquid/tags/inline_editor.rb
View
@@ -8,7 +8,7 @@ def render(context)
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" />
2  locomotive_cms.gemspec
View
@@ -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'
Please sign in to comment.
Something went wrong with that request. Please try again.