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

build a generic theme image picker

Browse Source
This commit is contained in:
dinedine 2010-07-18 00:01:00 +02:00
parent 0304565f30
commit 81dc8ea623
13 changed files with 104 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/helpers/admin/assets_helper.rb
View File

@ -12,4 +12,10 @@ module Admin::AssetsHelper
asset.new_record? || asset.stylesheet? || asset.javascript?
end
def image_picker_include_tags
html = javascript_include_tag 'admin/plugins/json2', 'admin/plugins/scrollTo', 'admin/plugins/codemirror/codemirror', 'admin/plugins/fancybox', 'admin/plugins/plupload/plupload.full', 'admin/plugins/imagepicker'
html += stylesheet_link_tag 'admin/plugins/fancybox', 'admin/box'
html
end
end

2
app/models/theme_asset.rb
View File

@ -57,7 +57,7 @@ class ThemeAsset
end
def performing_plain_text?
return true if !self.new_record? && !self.stylesheet_or_javascript? && self.errors.empty?
return true if !self.new_record? && self.stylesheet_or_javascript? && self.errors.empty?
!(self.performing_plain_text.blank? || self.performing_plain_text == 'false' || self.performing_plain_text == false)
end

9
app/views/admin/layouts/_form.html.haml
View File

@ -1,3 +1,7 @@
- content_for :head do
= javascript_include_tag 'admin/plugins/codemirror/codemirror'
= image_picker_include_tags
= f.inputs :name => :information do
= f.input :name
@ -5,6 +9,5 @@
= f.custom_input :value, :css => 'code full', :with_label => false do
%code{ :class => 'html' }
= f.text_area :value
.more
= link_to t('admin.image_picker.link'), admin_theme_assets_path, :id => 'image-picker-link'

3
app/views/admin/layouts/edit.html.haml
View File

@ -1,8 +1,5 @@
- title t('.title')
- content_for :head do
= javascript_include_tag 'admin/plugins/codemirror/codemirror'
- content_for :submenu do
= render 'admin/shared/menu/settings'

3
app/views/admin/layouts/new.html.haml
View File

@ -1,8 +1,5 @@
- title t('.title')
- content_for :head do
= javascript_include_tag 'admin/plugins/codemirror/codemirror'
- content_for :submenu do
= render 'admin/shared/menu/settings'

5
app/views/admin/snippets/_form.html.haml
View File

@ -1,5 +1,6 @@
- content_for :head do
= javascript_include_tag 'admin/plugins/codemirror/codemirror', 'admin/snippets.js'
= image_picker_include_tags
= f.inputs :name => :information do
= f.input :name
@ -8,4 +9,6 @@
= f.inputs :name => :code do
= f.custom_input :value, :css => 'full', :with_label => false do
%code{ :class => 'html' }
= f.text_area :value
= f.text_area :value
.more
= link_to t('admin.image_picker.link'), admin_theme_assets_path, :id => 'image-picker-link'

8
app/views/admin/theme_assets/_form.html.haml
View File

@ -1,6 +1,6 @@
- content_for :head do
= javascript_include_tag 'admin/plugins/json2', 'admin/plugins/scrollTo', 'admin/plugins/codemirror/codemirror', 'admin/plugins/fancybox', 'admin/plugins/plupload/plupload.full.js', 'admin/theme_assets.js'
= stylesheet_link_tag 'admin/plugins/fancybox', 'admin/box'
= javascript_include_tag 'admin/plugins/codemirror/codemirror', 'admin/theme_assets.js'
= image_picker_include_tags
= f.hidden_field :performing_plain_text
@ -8,7 +8,7 @@
= f.inputs :name => :information do
= f.input :source
- if @theme_asset.new_record? || !@theme_asset.image?
- if @theme_asset.new_record? || @theme_asset.stylesheet_or_javascript?
%span.alt
= t('admin.theme_assets.form.choose_plain_text')
@ -26,7 +26,7 @@
%code{ :class => (@theme_asset.size && @theme_asset.size > 40000 ? 'nude' : (@theme_asset.content_type || 'stylesheet')) }
= f.text_area :plain_text
.more
= link_to t('.picker_link'), admin_theme_assets_path, :id => 'asset-picker-link'
= link_to t('admin.image_picker.link'), admin_theme_assets_path, :id => 'image-picker-link'
%span.alt
= t('admin.theme_assets.form.choose_file')

4
app/views/admin/theme_assets/index.html.haml
View File

@ -30,7 +30,7 @@
- if not @flash_assets.empty?
%br
%h3= t('.flash')
%h3= t('.flashes')
%ul.assets
= render :partial => 'asset', :collection => @flash_assets
%li.clear
@ -38,7 +38,7 @@
- if not @font_assets.empty?
%br
%h3= t('.flash')
%h3= t('.fonts')
%ul.assets
= render :partial => 'asset', :collection => @font_assets
%li.clear

5
config/locales/admin_ui_en.yml
View File

@ -163,7 +163,9 @@ en:
help: "Theme assets represent files needed by layouts and snippets. If you need to manage an image gallery, go to the Assets section instead."
new: new file
css_and_js: Style and javascript
fonts: Fonts
images: Images
flashes: Flash
no_items: "There are no files for now. Just click <a href=\"{{url}}\">here</a> to create the first one."
new:
title: New file
@ -236,6 +238,9 @@ en:
edit:
title: '{{type}} &mdash; editing item'
image_picker:
link: Insert an image into the code
formtastic:
titles:
information: General information

6
config/locales/admin_ui_fr.yml
View File

@ -186,6 +186,8 @@ fr:
new: nouveau fichier
css_and_js: Style et javascript
images: Images
flashes: Flash
fonts: Polices
no_items: "Il n'existe pas de fichiers. Vous pouvez commencer par créer un <a href='{{url}}'>ici</a>."
new:
title: Nouveau fichier
@ -194,7 +196,6 @@ fr:
title: "Edition {{file}}"
help: "Vous pouvez utiliser ce fichier grâce a l'url suivante: {{url}}"
form:
picker_link: Insérer un fichier dans le code
choose_file: Choisir fichier
choose_plain_text: Passer en mode texte
images:
@ -257,6 +258,9 @@ fr:
title: '{{type}} &mdash; nouvel élément'
edit:
title: '{{type}} &mdash; édition élément'
image_picker:
link: Insérer une image dans le code
formtastic:
titles:

4
doc/TODO
View File

@ -25,7 +25,6 @@ NICE TO HAVE:
- better icons for mime type
- traffic statistics
- Worker => Heroku / S3 (not so sure finally)
- theme asset picker when editing layout
- asset picker (content instance)
- page with regexp url ?
- page redirection (option)
@ -63,4 +62,5 @@ x flash messages in French
x save layout / snippet / page / stylesheet / javascript with CMD + S (ajax)
x change action icons according to the right action [Sacha]
x publish event when saving form in ajax (for instance, in order to update account name or site name)
x page templatized (bound to a model)
x page templatized (bound to a model)
x theme asset picker when editing layout / snippet

69
public/javascripts/admin/plugins/imagepicker.js Normal file
View File

@ -0,0 +1,69 @@
$(document).ready(function() {
var copyLinkToEditor = function(link, event) {
var editor = CodeMirrorEditors[0].editor;
var handle = editor.cursorLine(), position = editor.cursorPosition(handle).character;
editor.insertIntoLine(handle, position, link.attr('href'));
event.stopPropagation();
event.preventDefault();
$.fancybox.close();
}
var setupUploader = function() {
var multipartParams = {};
multipartParams[$('meta[name=csrf-param]').attr('content')] = $('meta[name=csrf-token]').attr('content');
var uploader = new plupload.Uploader({
runtimes : (jQuery.browser.webkit == true ? 'flash' : 'html5,flash'),
container: 'theme-images',
browse_button : 'upload-link',
max_file_size : '5mb',
url : $('a#upload-link').attr('href'),
flash_swf_url : '/javascripts/admin/plugins/plupload/plupload.flash.swf',
multipart: true,
multipart_params: multipartParams
});
uploader.bind('QueueChanged', function() {
uploader.start();
});
uploader.bind('FileUploaded', function(up, file, response) {
var json = JSON.parse(response.response);
if (json.status == 'success') {
var asset = $('.asset-picker ul li.new-asset')
.clone()
.insertBefore($('.asset-picker ul li.clear'))
.addClass('asset');
asset.find('h4 a').attr('href', json.url).html(json.name).bind('click', function(e) {
copyLinkToEditor($(this), e);
});
asset.find('.image .inside img').attr('src', json.vignette_url);
if ($('.asset-picker ul li.asset').length % 3 == 0)
asset.addClass('last');
asset.removeClass('new-asset');
$('.asset-picker p.no-items').hide();
$('.asset-picker ul').scrollTo($('li.asset:last'), 400);
}
});
uploader.init();
}
$('a#image-picker-link').fancybox({
'onComplete': function() {
setupUploader();
$('ul.assets h4 a').bind('click', function(e) { copyLinkToEditor($(this), e); });
}
});
});

67
public/javascripts/admin/theme_assets.js
View File

@ -20,66 +20,6 @@ var enableFileOrTextToggling = function() {
});
}
var copyLinkToEditor = function(link, event) {
var editor = CodeMirrorEditors[0].editor;
var handle = editor.cursorLine(), position = editor.cursorPosition(handle).character;
var text = 'url("' + link.attr('href') + '")';
editor.insertIntoLine(handle, position, text);
event.stopPropagation();
event.preventDefault();
$.fancybox.close();
}
var setupUploader = function() {
var multipartParams = {};
multipartParams[$('meta[name=csrf-param]').attr('content')] = $('meta[name=csrf-token]').attr('content');
var uploader = new plupload.Uploader({
runtimes : (jQuery.browser.webkit == true ? 'flash' : 'html5,flash'),
container: 'theme-images',
browse_button : 'upload-link',
max_file_size : '5mb',
url : $('a#upload-link').attr('href'),
flash_swf_url : '/javascripts/admin/plugins/plupload/plupload.flash.swf',
multipart: true,
multipart_params: multipartParams
});
uploader.bind('QueueChanged', function() {
uploader.start();
});
uploader.bind('FileUploaded', function(up, file, response) {
var json = JSON.parse(response.response);
if (json.status == 'success') {
var asset = $('.asset-picker ul li.new-asset')
.clone()
.insertBefore($('.asset-picker ul li.clear'))
.addClass('asset');
asset.find('h4 a').attr('href', json.url).html(json.name).bind('click', function(e) {
copyLinkToEditor($(this), e);
});
asset.find('.image .inside img').attr('src', json.vignette_url);
if ($('.asset-picker ul li.asset').length % 3 == 0)
asset.addClass('last');
asset.removeClass('new-asset');
$('.asset-picker p.no-items').hide();
$('.asset-picker ul').scrollTo($('li.asset:last'), 400);
}
});
uploader.init();
}
$(document).ready(function() {
enableFileOrTextToggling();
@ -95,11 +35,4 @@ $(document).ready(function() {
editor.setParser($(this).val() == 'stylesheet' ? 'CSSParser' : 'JSParser');
});
$('a#asset-picker-link').fancybox({
'onComplete': function() {
setupUploader();
$('ul.assets h4 a').bind('click', function(e) { copyLinkToEditor($(this), e); });
}
});
});