Download as
Browse Code »

Commit a0c3388a295750f54a91f5a406c36f3d4d53625a

Authored by Antonio Terceiro
1 parent cad471df
Exists in master and in 28 other branches 1.2+SPB2, 2_split_by_role, add_fields_in_api, api_fixies, api_pagination, api_private_token, api_tasks, article_hit_count, blog_page_bug, checkbox_to_user_can_edit_page, communities_ratings, communities_ratings_moderation, community_ratings_rebase, fix_cloned_article_parent, fix_gallery_image_url, fix_javascript_categories, fix_optional_fields, fix_suggest_article, fix_user_email_validation, highlight_block_fix, notification_plugin, notification_plugin_rebase, script_to_update, split_by_role, stable, temp_ratings, tests, tests_fixies

Implementing zoom

Showing 3 changed files with 67 additions and 24 deletions   Show diff stats
app/views/cms/_drag_and_drop_note.rhtml
  Diff comments   View file @a0c3388
1 1 <p>
2   -<em><%= _('Drag images to add them to the text.') unless @article.is_a?(TextileArticle) %>
3   -<%= _('Drag item names to the text to add links.') %></em>
  2 +<em>
  3 + <%= _('Drag images to add them to the text.') %>
  4 + <%= _('Drag item names to the text to add links.') %>
  5 +</em>
4 6 </p>
... ...
public/javascripts/article.js
  Diff comments   View file @a0c3388
... ... @@ -23,21 +23,49 @@ jQuery(function($) {
23 23 $('#textile-quickref').slideToggle();
24 24 return false;
25 25 })
  26 +
  27 + var button_add = $('.text-editor-sidebar meta[name=button.add]').attr('value');
  28 + var button_zoom = $('.text-editor-sidebar meta[name=button.zoom]').attr('value');
  29 +
  30 + function add_to_text_button(item) {
  31 + return '<a class="button icon-add" data-item-url="' + item.url + '" href="#"><span>' + button_add + '</span></span>';
  32 + }
  33 +
  34 + function zoom_button(item) {
  35 + return '<a class="button icon-zoom" href="#" title="' + button_zoom + '"><span>' + button_zoom + '/span></a>';
  36 + }
  37 +
26 38 function list_items(items, selector) {
27 39 var html_for_items = '';
28   - var button_add = $('.text-editor-sidebar meta[name=button.add]').attr('value');
29   - var button_zoom = $('.text-editor-sidebar meta[name=button.zoom]').attr('value');
  40 +
  41 + var images = [];
  42 + var files = [];
  43 + var errors = [];
  44 +
30 45 $.each(items, function(i, item) {
31 46 if (item.error) {
32   - html_for_items += '<div class="media-upload-error">' + item.error + '</div>';
  47 + errors.push(item);
33 48 return;
34 49 }
35 50 if (item.content_type && item.content_type.match(/^image/)) {
36   - html_for_items += '<div class="item" data-item="span"><span><img src="' + item.url + '"/></span><div class="controls image-controls"><a class="button with-text icon-add" data-item-url="' + item.url + '" href="#">' + button_add + '</a> <a class="button icon-zoom" href="#" title="' + button_zoom + '"><span>' + button_zoom + '/span></a></div></div>';
  51 + images.push(item);
37 52 } else {
38   - html_for_items += '<div class="item ' + item.icon + '" data-item="div"><div><a href="' + item.url + '">' + item.title + '</a></div> <div class="controls file-controls"> <a class="button with-text icon-add" data-item-url="' + item.url + '" href="#">' + button_add + '</a></div></div>';
  53 + files.push(item);
39 54 }
40 55 });
  56 +
  57 + $.each(images, function(i, item) {
  58 + html_for_items += '<div class="item image" data-item="span"><span><img src="' + item.url + '"/></span><div class="controls image-controls">' + add_to_text_button(item) + zoom_button(item) + '</div></div>';
  59 + });
  60 +
  61 + $.each(files, function(i, item) {
  62 + html_for_items += '<div class="item file ' + item.icon + '" data-item="div"><div><a href="' + item.url + '">' + item.title + '</a></div> <div class="controls file-controls">' + add_to_text_button(item) + '</div></div>';
  63 + });
  64 +
  65 + $.each(errors, function(i, item) {
  66 + html_for_items += '<div class="media-upload-error">' + item.error + '</div>';
  67 + });
  68 +
41 69 $(selector).html(html_for_items);
42 70 $(selector).find('.controls a.icon-add').click(function() {
43 71 var $item = $(this).closest('.item');
... ... @@ -46,8 +74,10 @@ jQuery(function($) {
46 74 return false;
47 75 });
48 76 $(selector).find('.controls a.icon-zoom').click(function() {
49   - alert('zoom!');
50   - // FIXME zoom in in the image
  77 + var $item = $(this).closest('.item');
  78 + var html_selector = $item.attr('data-item');
  79 + var img = $item.find(html_selector).find('img').attr('src');
  80 + $.colorbox({ html: '<img src="' + img + '" style="max-width: 580px; max-height: 580px"/>', maxWidth: '640px', maxHeight: '640px', scrolling: false });
51 81 return false;
52 82 });
53 83 }
... ... @@ -76,6 +106,7 @@ jQuery(function($) {
76 106 }
77 107 }
78 108 }
  109 +
79 110 $('#media-search-button').click(function() {
80 111 var query = '*' + $('#media-search-query').val() + '*';
81 112 var $button = $(this);
... ... @@ -89,6 +120,7 @@ jQuery(function($) {
89 120 });
90 121 return false;
91 122 });
  123 +
92 124 $('#media-upload-form form').ajaxForm({
93 125 dataType: 'json',
94 126 resetForm: true,
... ... @@ -106,6 +138,7 @@ jQuery(function($) {
106 138 $('#media-upload-box .header').toggleClass('icon-loading');
107 139 }
108 140 });
  141 +
109 142 $('#media-upload-more-files').click(function() {
110 143 $('#media-upload-results').hide();
111 144 $('#media-upload-form').show();
... ...
public/stylesheets/application.css
  Diff comments   View file @a0c3388
... ... @@ -3646,28 +3646,42 @@ div.with_media_panel .formfield input {
3646 3646 .text-editor-sidebar .items {
3647 3647 margin-bottom: 10px;
3648 3648 }
3649   -.text-editor-sidebar .items .item {
  3649 +
  3650 +.text-editor-sidebar .items .file {
3650 3651 background-repeat: no-repeat;
3651 3652 background-position: 0px 0px;
3652   - padding-left: 20px;
3653   - padding-top: 2px;
3654   - padding-bottom: 2px;
3655 3653 border: none;
3656 3654 margin-bottom: 12px;
3657 3655 }
3658 3656  
  3657 +.text-editor-sidebar .items .image {
  3658 + display: inline-block;
  3659 + vertical-align: middle;
  3660 + margin: 5px;
  3661 + position: relative;
  3662 +}
  3663 +
  3664 +.text-editor-sidebar .items .file {
  3665 + padding-left: 20px;
  3666 +}
  3667 +
3659 3668 .text-editor-sidebar .items :hover {
3660 3669 background-color: transparent;
3661 3670 }
3662 3671  
3663 3672 .text-editor-sidebar .items .image-controls {
3664 3673 display: none;
3665   - margin-left: 4px;
3666   - vertical-align: top;
  3674 + position: absolute;
  3675 + top: 5px;
  3676 + left: 5px;
3667 3677 }
3668 3678  
3669 3679 .text-editor-sidebar .items .item:hover .image-controls {
3670   - display: inline-block;
  3680 + display: block;
  3681 +}
  3682 +
  3683 +.text-editor-sidebar .items .file-controls {
  3684 + margin-top: 5px;
3671 3685 }
3672 3686  
3673 3687 .text-editor-sidebar .items .image-controls .icon-zoom {
... ... @@ -3677,19 +3691,13 @@ div.with_media_panel .formfield input {
3677 3691 margin-top: 4px;
3678 3692 }
3679 3693  
3680   -.text-editor-sidebar .items .file-controls {
3681   - margin-top: 4px;
3682   - margin-bottom: 4px;
3683   -}
3684   -
3685 3694 .text-editor-sidebar .header {
3686 3695 background-repeat: no-repeat;
3687 3696 background-position: 98% 10px;
3688 3697 }
3689 3698 .text-editor-sidebar img {
3690   - max-height: 96px;
3691   - max-width: 96px;
3692   - border: 1px solid #d3d7cf;
  3699 + max-height: 70px;
  3700 + max-width: 110px;
3693 3701 }
3694 3702 .text-editor-sidebar .media-upload-error {
3695 3703 color: red;
... ...