From 08cf381bc35722db5032f84f30a5f6dd3a0570c8 Mon Sep 17 00:00:00 2001 From: Didier Lafforgue Date: Sun, 22 Apr 2012 01:14:25 +0200 Subject: [PATCH] simple media plugin for Aloha --- Gemfile | 2 + Gemfile.lock | 4 +- .../custom/locomotive_media/css/image.css | 3 + .../custom/locomotive_media/img/image.gif | Bin 0 -> 621 bytes .../lib/locomotive_media-plugin.js | 96 ++++++++++++++++++ .../custom/locomotive_media/nls/fr/i18n.js | 1 + .../custom/locomotive_media/nls/i18n.js | 4 + .../custom/locomotive_media/package.json | 1 + .../javascripts/locomotive/aloha.js.coffee | 5 + .../locomotive/inline_editor.js.coffee | 1 + .../locomotive/utils/aloha_settings.js.coffee | 5 + .../inline_editor/application_view.js.coffee | 10 +- .../inline_editor/toolbar_view.js.coffee | 4 +- .../backoffice/application.css.scss | 34 ------- .../backoffice/content_assets.css.scss | 4 + .../stylesheets/locomotive/inline_editor.css | 3 + .../locomotive/shared/common.css.scss | 34 +++++++ .../locomotive/content_asset_presenter.rb | 4 +- .../public/pages/show_toolbar.html.haml | 4 +- lib/locomotive/liquid/tags/inline_editor.rb | 2 +- locomotive_cms.gemspec | 2 +- 21 files changed, 176 insertions(+), 47 deletions(-) create mode 100644 app/assets/javascripts/aloha/plugins/custom/locomotive_media/css/image.css create mode 100644 app/assets/javascripts/aloha/plugins/custom/locomotive_media/img/image.gif create mode 100644 app/assets/javascripts/aloha/plugins/custom/locomotive_media/lib/locomotive_media-plugin.js create mode 100644 app/assets/javascripts/aloha/plugins/custom/locomotive_media/nls/fr/i18n.js create mode 100644 app/assets/javascripts/aloha/plugins/custom/locomotive_media/nls/i18n.js create mode 100644 app/assets/javascripts/aloha/plugins/custom/locomotive_media/package.json create mode 100644 app/assets/stylesheets/locomotive/shared/common.css.scss diff --git a/Gemfile b/Gemfile index 16e83ec8..bd8a8896 100755 --- a/Gemfile +++ b/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' diff --git a/Gemfile.lock b/Gemfile.lock index d4779eb9..9b36dfda 100644 --- a/Gemfile.lock +++ b/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) diff --git a/app/assets/javascripts/aloha/plugins/custom/locomotive_media/css/image.css b/app/assets/javascripts/aloha/plugins/custom/locomotive_media/css/image.css new file mode 100644 index 00000000..8af94055 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/app/assets/javascripts/aloha/plugins/custom/locomotive_media/img/image.gif b/app/assets/javascripts/aloha/plugins/custom/locomotive_media/img/image.gif new file mode 100644 index 0000000000000000000000000000000000000000..d5924f4bb36a73a3cd9245b098dba3fd783bd889 GIT binary patch literal 621 zcmZ?wbhEHb6krfwc*el+;q%vwKSo{`2<NYb zUv>7rrlE7qrhvvBp+{c)UwG^PzNi0}-}zs&Ik0krU;WnL?T`LVzxIFq{r?Tyf-Bbh zHtq~Pedglod;d2)_`mZp(4wHTuYpzsS8w#&bnQ^(dcR$df!v^`onbSt|6g$P|CWdU zm)!n8|K|Uy4ZfA@eK$V%-?%-bdV~M=NB>W~`oI6_{}p%suetaC{}YC)4SrP{{hN1% z&%N>g$n*b8Z~t#ybKKE0(kC*%Z0e@a?CyInK0SN$<^TWx3)w2#=%N)wYWTM35t|6wz7aG{KM?ip$%|T4uj8*hRlYgkNu(-26AFGhB)U~i1 ztgMQzLZb3gE{0ETu(O+bO3HHcnhS;oGzEq7{Slay*x19t6=bvE(RnThQI#n@839g? z0{j*d|Ck>nA7hf>l3Nqu)X3D(7Hq(<;?Sh0Y79CSe`Y%sdrg@gP~`M*!kG!@9UB=K FtO3mL_vrut literal 0 HcmV?d00001 diff --git a/app/assets/javascripts/aloha/plugins/custom/locomotive_media/lib/locomotive_media-plugin.js b/app/assets/javascripts/aloha/plugins/custom/locomotive_media/lib/locomotive_media-plugin.js new file mode 100644 index 00000000..0edfc470 --- /dev/null +++ b/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 = ''; + 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 = '' + linkText + ''; + 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 = ''; + 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 + ); + }, + + }); + } +); \ No newline at end of file diff --git a/app/assets/javascripts/aloha/plugins/custom/locomotive_media/nls/fr/i18n.js b/app/assets/javascripts/aloha/plugins/custom/locomotive_media/nls/fr/i18n.js new file mode 100644 index 00000000..c43891b0 --- /dev/null +++ b/app/assets/javascripts/aloha/plugins/custom/locomotive_media/nls/fr/i18n.js @@ -0,0 +1 @@ +define({ 'button.addimg.tooltip': 'insérer média' }); diff --git a/app/assets/javascripts/aloha/plugins/custom/locomotive_media/nls/i18n.js b/app/assets/javascripts/aloha/plugins/custom/locomotive_media/nls/i18n.js new file mode 100644 index 00000000..317d57ce --- /dev/null +++ b/app/assets/javascripts/aloha/plugins/custom/locomotive_media/nls/i18n.js @@ -0,0 +1,4 @@ +define({ + root: { "button.addimg.tooltip": "insert media" }, + fr: true +}); diff --git a/app/assets/javascripts/aloha/plugins/custom/locomotive_media/package.json b/app/assets/javascripts/aloha/plugins/custom/locomotive_media/package.json new file mode 100644 index 00000000..0967ef42 --- /dev/null +++ b/app/assets/javascripts/aloha/plugins/custom/locomotive_media/package.json @@ -0,0 +1 @@ +{} diff --git a/app/assets/javascripts/locomotive/aloha.js.coffee b/app/assets/javascripts/locomotive/aloha.js.coffee index 2e6a956c..f2d488f2 100644 --- a/app/assets/javascripts/locomotive/aloha.js.coffee +++ b/app/assets/javascripts/locomotive/aloha.js.coffee @@ -1,2 +1,7 @@ #= require ./utils/aloha_settings #= require aloha + + +# r equire_tree ./../aloha/plugins + +# . /.. / aloha / plugins \ No newline at end of file diff --git a/app/assets/javascripts/locomotive/inline_editor.js.coffee b/app/assets/javascripts/locomotive/inline_editor.js.coffee index 51c3057f..6d4e8a48 100644 --- a/app/assets/javascripts/locomotive/inline_editor.js.coffee +++ b/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 = diff --git a/app/assets/javascripts/locomotive/utils/aloha_settings.js.coffee b/app/assets/javascripts/locomotive/utils/aloha_settings.js.coffee index 5beb6b5b..ea2e4b3f 100644 --- a/app/assets/javascripts/locomotive/utils/aloha_settings.js.coffee +++ b/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'] diff --git a/app/assets/javascripts/locomotive/views/inline_editor/application_view.js.coffee b/app/assets/javascripts/locomotive/views/inline_editor/application_view.js.coffee index 53002e5e..2e3cb346 100644 --- a/app/assets/javascripts/locomotive/views/inline_editor/application_view.js.coffee +++ b/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 diff --git a/app/assets/javascripts/locomotive/views/inline_editor/toolbar_view.js.coffee b/app/assets/javascripts/locomotive/views/inline_editor/toolbar_view.js.coffee index 68d9e6c2..e2efbfd7 100644 --- a/app/assets/javascripts/locomotive/views/inline_editor/toolbar_view.js.coffee +++ b/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' diff --git a/app/assets/stylesheets/locomotive/backoffice/application.css.scss b/app/assets/stylesheets/locomotive/backoffice/application.css.scss index 4f98f454..0f2c51a5 100644 --- a/app/assets/stylesheets/locomotive/backoffice/application.css.scss +++ b/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; - } - -} - - - - - diff --git a/app/assets/stylesheets/locomotive/backoffice/content_assets.css.scss b/app/assets/stylesheets/locomotive/backoffice/content_assets.css.scss index 63be3fa1..69b556ee 100644 --- a/app/assets/stylesheets/locomotive/backoffice/content_assets.css.scss +++ b/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; diff --git a/app/assets/stylesheets/locomotive/inline_editor.css b/app/assets/stylesheets/locomotive/inline_editor.css index e54c4713..508fbad6 100644 --- a/app/assets/stylesheets/locomotive/inline_editor.css +++ b/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 */ \ No newline at end of file diff --git a/app/assets/stylesheets/locomotive/shared/common.css.scss b/app/assets/stylesheets/locomotive/shared/common.css.scss new file mode 100644 index 00000000..43f076e8 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/app/presenters/locomotive/content_asset_presenter.rb b/app/presenters/locomotive/content_asset_presenter.rb index 939cd516..afce9e53 100644 --- a/app/presenters/locomotive/content_asset_presenter.rb +++ b/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 diff --git a/app/views/locomotive/public/pages/show_toolbar.html.haml b/app/views/locomotive/public/pages/show_toolbar.html.haml index 6bc1857e..909ac165 100644 --- a/app/views/locomotive/public/pages/show_toolbar.html.haml +++ b/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' } diff --git a/lib/locomotive/liquid/tags/inline_editor.rb b/lib/locomotive/liquid/tags/inline_editor.rb index 7b9a87f2..3e429910 100644 --- a/lib/locomotive/liquid/tags/inline_editor.rb +++ b/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' %{ diff --git a/locomotive_cms.gemspec b/locomotive_cms.gemspec index 4463f05d..a4e74043 100755 --- a/locomotive_cms.gemspec +++ b/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'