Implementing zoom

Antonio Terceiro
1 parent cad471df
Showing 3 changed files with 67 additions and 24 deletions Show diff stats
app/views/cms/_drag_and_drop_note.rhtml
public/javascripts/article.js
public/stylesheets/application.css
 <p>
-<em><%= _('Drag images to add them to the text.') unless @article.is_a?(TextileArticle) %>
-<%= _('Drag item names to the text to add links.') %></em>
+<em>
+  <%= _('Drag images to add them to the text.') %>
+  <%= _('Drag item names to the text to add links.') %>
+</em>
 </p>
@@ -23,21 +23,49 @@ jQuery(function($) {
     $('#textile-quickref').slideToggle();
     return false;
   })
+
+  var button_add = $('.text-editor-sidebar meta[name=button.add]').attr('value');
+  var button_zoom = $('.text-editor-sidebar meta[name=button.zoom]').attr('value');
+
+  function add_to_text_button(item) {
+    return '<a class="button icon-add" data-item-url="' + item.url + '" href="#"><span>' + button_add + '</span></span>';
+  }
+
+  function zoom_button(item) {
+    return '<a class="button icon-zoom" href="#" title="' + button_zoom + '"><span>' + button_zoom + '/span></a>';
+  }
+
   function list_items(items, selector) {
     var html_for_items = '';
-    var button_add = $('.text-editor-sidebar meta[name=button.add]').attr('value');
-    var button_zoom = $('.text-editor-sidebar meta[name=button.zoom]').attr('value');
+
+    var images  = [];
+    var files   = [];
+    var errors  = [];
+
     $.each(items, function(i, item) {
       if (item.error) {
-        html_for_items += '<div class="media-upload-error">' + item.error + '</div>';
+        errors.push(item);
         return;
       }
       if (item.content_type && item.content_type.match(/^image/)) {
-        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>';
+        images.push(item);
       } else {
-        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>';
+        files.push(item);
       }
     });
+
+    $.each(images, function(i, item) {
+      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>';
+    });
+
+    $.each(files, function(i, item) {
+      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>';
+    });
+
+    $.each(errors, function(i, item) {
+      html_for_items += '<div class="media-upload-error">' + item.error + '</div>';
+    });
+
     $(selector).html(html_for_items);
     $(selector).find('.controls a.icon-add').click(function() {
       var $item = $(this).closest('.item');
@@ -46,8 +74,10 @@ jQuery(function($) {
       return false;
     });
     $(selector).find('.controls a.icon-zoom').click(function() {
-      alert('zoom!');
-      // FIXME zoom in in the image
+      var $item = $(this).closest('.item');
+      var html_selector = $item.attr('data-item');
+      var img = $item.find(html_selector).find('img').attr('src');
+      $.colorbox({ html: '<img src="' + img + '" style="max-width: 580px; max-height: 580px"/>', maxWidth: '640px', maxHeight: '640px', scrolling: false });
       return false;
     });
   }
@@ -76,6 +106,7 @@ jQuery(function($) {
       }
     }
   }
+
   $('#media-search-button').click(function() {
     var query = '*' + $('#media-search-query').val() + '*';
     var $button = $(this);
@@ -89,6 +120,7 @@ jQuery(function($) {
     });
     return false;
   });
+
   $('#media-upload-form form').ajaxForm({
     dataType: 'json',
     resetForm: true,
@@ -106,6 +138,7 @@ jQuery(function($) {
         $('#media-upload-box .header').toggleClass('icon-loading');
       }
   });
+
   $('#media-upload-more-files').click(function() {
     $('#media-upload-results').hide();
     $('#media-upload-form').show();
@@ -3646,28 +3646,42 @@ div.with_media_panel .formfield input {
 .text-editor-sidebar .items {
   margin-bottom: 10px;
 }
-.text-editor-sidebar .items .item {
+
+.text-editor-sidebar .items .file {
   background-repeat: no-repeat;
   background-position: 0px 0px;
-  padding-left: 20px;
-  padding-top: 2px;
-  padding-bottom: 2px;
   border: none;
   margin-bottom: 12px;
 }
+.text-editor-sidebar .items .image {
+	display: inline-block;
+	vertical-align: middle;
+	margin: 5px;
+	position: relative;
+}
+
+.text-editor-sidebar .items .file {
+	padding-left: 20px;
+}
+
 .text-editor-sidebar .items :hover {
   background-color: transparent;
 }
 .text-editor-sidebar .items .image-controls {
   display: none;
-	margin-left: 4px;
-	vertical-align: top;
+	position: absolute;
+	top: 5px;
+	left: 5px;
 }
 .text-editor-sidebar .items .item:hover .image-controls {
-	display: inline-block;
+	display: block;
+}
+
+.text-editor-sidebar .items .file-controls {
+	margin-top: 5px;
 }
 .text-editor-sidebar .items .image-controls .icon-zoom {
@@ -3677,19 +3691,13 @@ div.with_media_panel .formfield input {
 	margin-top: 4px;
 }
-.text-editor-sidebar .items .file-controls {
-  margin-top: 4px;
-  margin-bottom: 4px;
-}
-
 .text-editor-sidebar .header {
   background-repeat: no-repeat;
   background-position: 98% 10px;
 }
 .text-editor-sidebar img {
- max-height: 96px;
- max-width: 96px;
- border: 1px solid #d3d7cf;
+ max-height: 70px;
+ max-width: 110px;
 }
 .text-editor-sidebar .media-upload-error {
   color: red;
1	<p>	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	</p>	6	</p>