github-migration
/
engine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

simple media plugin for Aloha

This commit is contained in:
Didier Lafforgue 2012-04-22 01:14:25 +02:00
parent d6059c2a9b
commit 08cf381bc3
21 changed files with 176 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Gemfile
View File

@ -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 File

@ -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 Normal file
View File

@ -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 Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 621 B

96
app/assets/javascripts/aloha/plugins/custom/locomotive_media/lib/locomotive_media-plugin.js Normal file
View File

@ -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 Normal file
View File

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

4
app/assets/javascripts/aloha/plugins/custom/locomotive_media/nls/i18n.js Normal file
View File

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

1
app/assets/javascripts/aloha/plugins/custom/locomotive_media/package.json Normal file
View File

@ -0,0 +1 @@
{}

5
app/assets/javascripts/locomotive/aloha.js.coffee
View File

@ -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 File

@ -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 File

@ -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 File

@ -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 File

@ -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 File

@ -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 File

@ -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 File

@ -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 Normal file
View File

@ -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 File

@ -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

4
app/views/locomotive/public/pages/show_toolbar.html.haml
View File

@ -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 File

@ -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" />

2
locomotive_cms.gemspec
View File

@ -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'