Enhancements on text editor sidebar - first take

ActionItem2371

Enhancements on text editor sidebar - first take
ActionItem2371
Antonio Terceiro
1 parent e9d95cb7
Showing 5 changed files with 91 additions and 22 deletions Show diff stats
app/views/cms/_text_editor_sidebar.rhtml
app/views/cms/_textile_quick_reference.rhtml
public/images/zoom-dark.png
public/javascripts/article.js
public/stylesheets/application.css
 <div class='text-editor-sidebar'>
+  <meta name='button.add' value='<%= _('Add to the text') %>'/>
+  <meta name='button.zoom' value='<%= _('Zoom in') %>'/>
   <%= render(:partial => 'textile_quick_reference') if @article.is_a?(TextileArticle) %>
   <div class='text-editor-sidebar-box' id='media-upload-box'>
-    <p><strong><%= _('Media upload') %></strong></p>
+    <div class='header'<strong><%= _('Media upload') %></strong></div>
     <div id='media-upload-form'>
       <% form_tag({ :action => 'media_upload' }, :multipart => true) do %>
         <div class='formfield'>
@@ -24,7 +26,7 @@
     </div>
   </div>
   <div id='media-search-box' class='text-editor-sidebar-box'>
-    <p><strong><%= _('Media search') %></strong></p>
+    <div class='header'><strong><%= _('Media search') %></strong></div>
     <p>
     <% form_tag({ :action => 'search' }) do %>
       <span class='formfield'>
 <div class='text-editor-sidebar-box'>
-  <p>
+  <div class='header'>
   <strong><%= _('Textile markup quick reference') %></strong>
   <%= link_to(_('(show)'), '#', :id => 'textile-quickref-show') %>
   <%= link_to(_('(hide)'), '#', :id => 'textile-quickref-hide', :style => 'display: none') %>
-  </p>
+  </div>
   <div id='textile-quickref' style='display: none;'>
     <p><%= _('Simple formatting:') %> <code>_<%= _('italics') %>_</code> <code>*<%= _('bold') %>*</code>, <code>-<%= _('striked')%>-</code>.</p>
     <p><%= _('Links:') %> <code>"Noosfero":http://noosfero.org/</code></p>
@@ -23,31 +23,69 @@ jQuery(function($) {
     $('#textile-quickref').slideToggle();
     return false;
   })
-  function insert_items(items, selector) {
+  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');
     $.each(items, function(i, item) {
       if (item.error) {
         html_for_items += '<div class="media-upload-error">' + item.error + '</div>';
         return;
       }
       if (item.content_type && item.content_type.match(/^image/)) {
-        html_for_items += '<div class="icon-photos"><img src="' + item.url + '"/><br/><a href="' + item.url + '">' + item.title + '</a></div>';
+        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>';
       } else {
-        html_for_items += '<div class="' + item.icon + '"><a href="' + item.url + '">' + item.title + '</a></div>';
+        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>';
       }
     });
     $(selector).html(html_for_items);
+    $(selector).find('.controls a.icon-add').click(function() {
+      var $item = $(this).closest('.item');
+      var html_selector = $item.attr('data-item');
+      insert_item_in_text($item.find(html_selector));
+      return false;
+    });
+    $(selector).find('.controls a.icon-zoom').click(function() {
+      alert('zoom!');
+      // FIXME zoom in in the image
+      return false;
+    });
+  }
+
+  // FIXME the user may also want to add the item to the abstract textarea!
+  var text_field = 'article_body';
+
+  function insert_item_in_text($wrapper) {
+    if (window.tinymce) {
+
+      var html = $wrapper.html();
+
+      var editor = tinymce.get(text_field);
+
+      editor.setContent(editor.getContent() + html);
+
+    } else {
+      // simple text editor
+      var text = $('#' + text_field).val();
+      var $item = $wrapper.children().first();
+      if ($item.attr('src')) {
+        $('#article_body').val(text + '!' + $item.attr('src') + '!');
+      }
+      if ($item.attr('href')) {
+        $('#article_body').val(text + $item.attr('href'));
+      }
+    }
   }
   $('#media-search-button').click(function() {
     var query = '*' + $('#media-search-query').val() + '*';
     var $button = $(this);
-    $('#media-search-box').toggleClass('icon-loading');
+    $('#media-search-box .header').toggleClass('icon-loading');
     $.get($(this).parent().attr('action'), { 'q': query }, function(data) {
-      insert_items(data, '#media-search-results .items');
+      list_items(data, '#media-search-results .items');
       if (data.length && data.length > 0) {
         $('#media-search-results').slideDown();
       }
-    $('#media-search-box').toggleClass('icon-loading');
+    $('#media-search-box .header').toggleClass('icon-loading');
     });
     return false;
   });
@@ -57,15 +95,15 @@ jQuery(function($) {
     beforeSubmit:
       function() {
         $('#media-upload-form').slideUp();
-        $('#media-upload-box').toggleClass('icon-loading');
+        $('#media-upload-box .header').toggleClass('icon-loading');
       },
     success:
       function(data) {
-        insert_items(data, '#media-upload-results .items');
+        list_items(data, '#media-upload-results .items');
         if (data.length && data.length > 0) {
           $('#media-upload-results').slideDown();
         }
-        $('#media-upload-box').toggleClass('icon-loading');
+        $('#media-upload-box .header').toggleClass('icon-loading');
       }
   });
   $('#media-upload-more-files').click(function() {
@@ -3619,19 +3619,26 @@ div.with_media_panel .formfield input {
 }
 .text-editor-sidebar-box  {
-  background: #eeeeec;
+  background: #fcfcf9;
   border: 1px solid #d3d7cf;
   padding: 10px 10px 0px 10px;
   margin-bottom: 10px;
 }
-.text-editor-sidebar-box p {
-  margin-top: 0px;
+
+.text-editor-sidebar-box .header {
+	margin: -10px -10px 0px -10px;
+	padding: 10px;
+	font-weight: bold;
+	border-bottom: 1px solid #d3d7cf;
+	background-color: #eeeeec;
 }
+
 .text-editor-sidebar code,
 .text-editor-sidebar pre {
   border: 1px solid #d3d7cf;
   color: black;
-  padding: 2px;
+  padding: 4px;
+	background: white;
 }
 .text-editor-sidebar .icon-loading {
   background-image: url(../images/loading-small.gif);
@@ -3639,21 +3646,43 @@ div.with_media_panel .formfield input {
 .text-editor-sidebar .items {
   margin-bottom: 10px;
 }
-.text-editor-sidebar .items div {
+.text-editor-sidebar .items .item {
   background-repeat: no-repeat;
   background-position: 0px 0px;
   padding-left: 20px;
   padding-top: 2px;
   padding-bottom: 2px;
   border: none;
-  margin-bottom: 2px;
+  margin-bottom: 12px;
 }
+
 .text-editor-sidebar .items :hover {
   background-color: transparent;
-  border: none;
 }
-.text-editor-sidebar #media-upload-box,
-.text-editor-sidebar #media-search-box {
+
+.text-editor-sidebar .items .image-controls {
+  display: none;
+	margin-left: 4px;
+	vertical-align: top;
+}
+
+.text-editor-sidebar .items .item:hover .image-controls {
+	display: inline-block;
+}
+
+.text-editor-sidebar .items .image-controls .icon-zoom {
+	background-image: url(../images/zoom-dark.png);
+	display: block;
+	width: 0px;
+	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;
 }
1	<div class='text-editor-sidebar-box'>	1	<div class='text-editor-sidebar-box'>
2	- <p>	2	+ <div class='header'>
3	<strong><%= _('Textile markup quick reference') %></strong>	3	<strong><%= _('Textile markup quick reference') %></strong>
4	<%= link_to(_('(show)'), '#', :id => 'textile-quickref-show') %>	4	<%= link_to(_('(show)'), '#', :id => 'textile-quickref-show') %>
5	<%= link_to(_('(hide)'), '#', :id => 'textile-quickref-hide', :style => 'display: none') %>	5	<%= link_to(_('(hide)'), '#', :id => 'textile-quickref-hide', :style => 'display: none') %>
6	- </p>	6	+ </div>
7	<div id='textile-quickref' style='display: none;'>	7	<div id='textile-quickref' style='display: none;'>
8	<p><%= _('Simple formatting:') %> <code>_<%= _('italics') %>_</code> <code><%= _('bold') %></code>, <code>-<%= _('striked')%>-</code>.</p>	8	<p><%= _('Simple formatting:') %> <code>_<%= _('italics') %>_</code> <code><%= _('bold') %></code>, <code>-<%= _('striked')%>-</code>.</p>
9	<p><%= _('Links:') %> <code>"Noosfero":http://noosfero.org/</code></p>	9	<p><%= _('Links:') %> <code>"Noosfero":http://noosfero.org/</code></p>