Textile quick ref and media search working

Antonio Terceiro
1 parent e7a14fb0
Showing 6 changed files with 163 additions and 2 deletions Show diff stats
app/controllers/my_profile/cms_controller.rb
app/views/cms/_textile_media.rhtml
app/views/cms/edit.rhtml
public/javascripts/article.js
public/stylesheets/application.css
test/functional/cms_controller_test.rb
@@ -335,6 +335,12 @@ class CmsController &lt; MyProfileController
     end
   end
+  def search
+    query = params[:q]
+    results = query.blank? ? [] : profile.articles.published.find_by_contents(query)
+    render :text => results.map { |item| { 'title' => item.title, 'url' => url_for(item.url), :icon => icon_for_article(item), :content_type => item.mime_type }}.to_json, :content_type => 'application/json'
+  end
+
   protected
   def record_coming
@@ -0,0 +1,55 @@
+<div class='textile-editor-sidebar'>
+  <div class='textile-editor-sidebar-box'>
+    <p>
+      <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 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>
+      <p><%= _('Images:') %> <code>!http://example.com/image.png!</code></p>
+      <p><%= _('Bullet lists:') %></p>
+      <pre>* <%= _('first item') %>
+* <%= _('second item') %></pre>
+      <p><%= _('Numbered lists:') %></p>
+      <pre># <%= _('first item') %>
+# <%= _('second item') %></pre>
+      <p><%= _('See also a more complete <a href="%s">Textile Reference</a>') % 'http://redcloth.org/hobix.com/textile/' %></p>
+    </div>
+  </div>
+  <div class='textile-editor-sidebar-box'>
+    <p><strong>Media upload</strong></p>
+    <% @folders = profile.folders %>
+    <% form_tag({ :action => 'media_upload' }, :multipart => true) do |f| %>
+      <%= render :partial => 'upload_file_form', :locals => { :size => 30 } %>
+    <% end %>
+    <div id='media-upload-results' style='display: none'>
+      <ul>
+      </ul>
+      <p>
+      <em><%= _('Drag item names to the text to add their URL') %></em>
+      </p>
+      <p><%= link_to('#', _('Upload more files'), :id => 'media-upload-more-files') %></p>
+    </div>
+  </div>
+  <div class='textile-editor-sidebar-box'>
+    <p><strong>Media search</strong></p>
+    <% form_tag({ :action => 'search' }) do %>
+      <span class='formfield'>
+        <input name='q' type='text' id='media-search-query' style='width: 250px;'/>
+      </span>
+      <%= submit_button :search, _('Search'), :id => 'media-search-button' %>
+    <% end %>
+    </form>
+    <div id='media-search-results' style='display: none'>
+      <ul>
+      </ul>
+      <p>
+      <em><%= _('Drag item names to the text to add their URL') %></em>
+      </p>
+    </div>
+  </div>
+</div>
+
+
@@ -52,5 +52,8 @@
 <% if environment.enabled?('media_panel') && [TinyMceArticle, Event, EnterpriseHomepage].any?{|klass| @article.kind_of?(klass)} %>
   <%= render :partial => 'media_listing' %>
 <% end %>
+<% if @article.is_a?(TextileArticle) %>
+  <%= render :partial => 'textile_media' %>
+<% end %>
 <br style='clear: both'/>
-(function($) {
+jQuery(function($) {
   $(".lead-button").live('click', function(){
     article_id = this.getAttribute("article_id");
     $(this).toggleClass('icon-add').toggleClass('icon-remove');
@@ -10,4 +10,42 @@
     $('#article-body-field').slideToggle();
     return false;
   })
-})(jQuery)
+
+  $("#textile-quickref-show").click(function(){
+    $('#textile-quickref-hide').show();
+    $(this).hide();
+    $('#textile-quickref').slideToggle();
+    return false;
+  })
+  $("#textile-quickref-hide").click(function(){
+    $('#textile-quickref-show').show();
+    $(this).hide();
+    $('#textile-quickref').slideToggle();
+    return false;
+  })
+  function insert_items(items, selector) {
+    var html_for_items = '';
+    $.each(items, function(i, item) {
+      if (item.content_type && item.content_type.match(/^image/)) {
+        html_for_items += '<li class="icon-photos"><img src="' + item.url + '" style="max-height: 96px; max-width: 96px; border: 1px solid #d3d7cf;" alt="' + item.url + '"/><br/><a href="' + item.url + '">' + item.title + '</a></li>';
+      } else {
+        html_for_items += '<li class="' + item.icon + '"><a href="' + item.url + '">' + item.title + '</a></li>';
+      }
+    });
+    $(selector).html(html_for_items);
+  }
+  $('#media-search-button').click(function() {
+    var query = '*' + $('#media-search-query').val() + '*';
+    var $button = $(this);
+    $button.toggleClass('icon-loading');
+    $.get($(this).parent().attr('action'), { 'q': query }, function(data) {
+      $button.toggleClass('icon-loading');
+      insert_items(data, '#media-search-results ul');
+      if (data.length && data.length > 0) {
+        $('#media-search-results').slideDown();
+      }
+    });
+    return false;
+  });
+
+});
@@ -3369,6 +3369,52 @@ div.with_media_panel .formfield input {
   width: 100%;
 }
+/* Textile sidebar */
+
+.textile-editor-sidebar {
+  position: absolute;
+  width: 380px;
+  right: 20px;
+  top: 70px;
+}
+
+.textile-editor-sidebar-box  {
+  background: #eeeeec;
+  border: 1px solid #d3d7cf;
+  padding: 10px 10px 0px 10px;
+  margin-bottom: 10px;
+}
+.textile-editor-sidebar-box p {
+  margin-top: 0px;
+}
+.textile-editor-sidebar code,
+.textile-editor-sidebar pre {
+  border: 1px solid #d3d7cf;
+  color: black;
+  padding: 2px;
+}
+.textile-editor-sidebar .icon-loading {
+  background-image: url(../images/loading-small.gif);
+}
+.textile-editor-sidebar #media-search-results ul {
+  padding: 0px;
+  list-style: none;
+}
+.textile-editor-sidebar #media-search-results li {
+  background-repeat: no-repeat;
+  background-position: 0px 0px;
+  padding-left: 20px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  border: none;
+  margin-bottom: 2px;
+}
+.textile-editor-sidebar #media-search-results li:hover {
+  background-color: transparent;
+  border: none;
+}
+
+
 /* ==> public/stylesheets/controller_contact.css <== */
 /*** SELECT CITY ***/
@@ -1618,4 +1618,17 @@ class CmsControllerTest &lt; Test::Unit::TestCase
     end
   end
+  should 'search for content for inclusion in articles' do
+    file = UploadedFile.create!(:profile => @profile, :uploaded_data => fixture_file_upload('files/test.txt', 'text/plain'))
+    get :search, :profile => @profile.identifier, :q => 'test.txt'
+    assert_match /test.txt/, @response.body
+    assert_equal 'application/json', @response.content_type
+
+    data = eval(@response.body.gsub('":', '"=>'))
+    assert_equal 'test.txt', data.first['title']
+    assert_match /\/testinguser\/test.txt$/, data.first['url']
+    assert_match /text/, data.first['icon']
+    assert_match /text/, data.first['content_type']
+  end
+
 end
	@@ -335,6 +335,12 @@ class CmsController < MyProfileController		@@ -335,6 +335,12 @@ class CmsController < MyProfileController
335	end	335	end
336	end	336	end
337		337
		338	+ def search
		339	+ query = params[:q]
		340	+ results = query.blank? ? [] : profile.articles.published.find_by_contents(query)
		341	+ render :text => results.map { \|item\| { 'title' => item.title, 'url' => url_for(item.url), :icon => icon_for_article(item), :content_type => item.mime_type }}.to_json, :content_type => 'application/json'
		342	+ end
		343	+
338	protected	344	protected
339		345
340	def record_coming	346	def record_coming
@@ -0,0 +1,55 @@		@@ -0,0 +1,55 @@
	1	+<div class='textile-editor-sidebar'>
	2	+ <div class='textile-editor-sidebar-box'>
	3	+ <p>
	4	+ <strong><%= _('Textile markup quick reference') %></strong>
	5	+ <%= link_to(_('(show)'), '#', :id => 'textile-quickref-show') %>
	6	+ <%= link_to(_('(hide)'), '#', :id => 'textile-quickref-hide', :style => 'display: none') %>
	7	+ </p>
	8	+ <div id='textile-quickref' style='display: none;'>
	9	+ <p><%= _('Simple formatting:') %> <code>_<%= _('italics') %>_</code> <code><%= _('bold') %></code>, <code>-<%= _('striked')%>-</code>.</p>
	10	+ <p><%= _('Links:') %> <code>"Noosfero":http://noosfero.org/</code></p>
	11	+ <p><%= _('Images:') %> <code>!http://example.com/image.png!</code></p>
	12	+ <p><%= _('Bullet lists:') %></p>
	13	+ <pre>* <%= _('first item') %>
	14	+* <%= _('second item') %></pre>
	15	+ <p><%= _('Numbered lists:') %></p>
	16	+ <pre># <%= _('first item') %>
	17	+# <%= _('second item') %></pre>
	18	+ <p><%= _('See also a more complete <a href="%s">Textile Reference</a>') % 'http://redcloth.org/hobix.com/textile/' %></p>
	19	+ </div>
	20	+ </div>
	21	+ <div class='textile-editor-sidebar-box'>
	22	+ <p><strong>Media upload</strong></p>
	23	+ <% @folders = profile.folders %>
	24	+ <% form_tag({ :action => 'media_upload' }, :multipart => true) do \|f\| %>
	25	+ <%= render :partial => 'upload_file_form', :locals => { :size => 30 } %>
	26	+ <% end %>
	27	+ <div id='media-upload-results' style='display: none'>
	28	+ <ul>
	29	+ </ul>
	30	+ <p>
	31	+ <em><%= _('Drag item names to the text to add their URL') %></em>
	32	+ </p>
	33	+ <p><%= link_to('#', _('Upload more files'), :id => 'media-upload-more-files') %></p>
	34	+ </div>
	35	+ </div>
	36	+ <div class='textile-editor-sidebar-box'>
	37	+ <p><strong>Media search</strong></p>
	38	+ <% form_tag({ :action => 'search' }) do %>
	39	+ <span class='formfield'>
	40	+ <input name='q' type='text' id='media-search-query' style='width: 250px;'/>
	41	+ </span>
	42	+ <%= submit_button :search, _('Search'), :id => 'media-search-button' %>
	43	+ <% end %>
	44	+ </form>
	45	+ <div id='media-search-results' style='display: none'>
	46	+ <ul>
	47	+ </ul>
	48	+ <p>
	49	+ <em><%= _('Drag item names to the text to add their URL') %></em>
	50	+ </p>
	51	+ </div>
	52	+ </div>
	53	+</div>
	54	+
	55	+
1	-(function($) {	1	+jQuery(function($) {
2	$(".lead-button").live('click', function(){	2	$(".lead-button").live('click', function(){
3	article_id = this.getAttribute("article_id");	3	article_id = this.getAttribute("article_id");
4	$(this).toggleClass('icon-add').toggleClass('icon-remove');	4	$(this).toggleClass('icon-add').toggleClass('icon-remove');
	@@ -10,4 +10,42 @@		@@ -10,4 +10,42 @@
10	$('#article-body-field').slideToggle();	10	$('#article-body-field').slideToggle();
11	return false;	11	return false;
12	})	12	})
13	-})(jQuery)	13	+
		14	+ $("#textile-quickref-show").click(function(){
		15	+ $('#textile-quickref-hide').show();
		16	+ $(this).hide();
		17	+ $('#textile-quickref').slideToggle();
		18	+ return false;
		19	+ })
		20	+ $("#textile-quickref-hide").click(function(){
		21	+ $('#textile-quickref-show').show();
		22	+ $(this).hide();
		23	+ $('#textile-quickref').slideToggle();
		24	+ return false;
		25	+ })
		26	+ function insert_items(items, selector) {
		27	+ var html_for_items = '';
		28	+ $.each(items, function(i, item) {
		29	+ if (item.content_type && item.content_type.match(/^image/)) {
		30	+ html_for_items += '<li class="icon-photos"><img src="' + item.url + '" style="max-height: 96px; max-width: 96px; border: 1px solid #d3d7cf;" alt="' + item.url + '"/><br/><a href="' + item.url + '">' + item.title + '</a></li>';
		31	+ } else {
		32	+ html_for_items += '<li class="' + item.icon + '"><a href="' + item.url + '">' + item.title + '</a></li>';
		33	+ }
		34	+ });
		35	+ $(selector).html(html_for_items);
		36	+ }
		37	+ $('#media-search-button').click(function() {
		38	+ var query = '' + $('#media-search-query').val() + '';
		39	+ var $button = $(this);
		40	+ $button.toggleClass('icon-loading');
		41	+ $.get($(this).parent().attr('action'), { 'q': query }, function(data) {
		42	+ $button.toggleClass('icon-loading');
		43	+ insert_items(data, '#media-search-results ul');
		44	+ if (data.length && data.length > 0) {
		45	+ $('#media-search-results').slideDown();
		46	+ }
		47	+ });
		48	+ return false;
		49	+ });
		50	+
		51	+});
	@@ -3369,6 +3369,52 @@ div.with_media_panel .formfield input {		@@ -3369,6 +3369,52 @@ div.with_media_panel .formfield input {
3369	width: 100%;	3369	width: 100%;
3370	}	3370	}
3371		3371
		3372	+/* Textile sidebar */
		3373	+
		3374	+.textile-editor-sidebar {
		3375	+ position: absolute;
		3376	+ width: 380px;
		3377	+ right: 20px;
		3378	+ top: 70px;
		3379	+}
		3380	+
		3381	+.textile-editor-sidebar-box {
		3382	+ background: #eeeeec;
		3383	+ border: 1px solid #d3d7cf;
		3384	+ padding: 10px 10px 0px 10px;
		3385	+ margin-bottom: 10px;
		3386	+}
		3387	+.textile-editor-sidebar-box p {
		3388	+ margin-top: 0px;
		3389	+}
		3390	+.textile-editor-sidebar code,
		3391	+.textile-editor-sidebar pre {
		3392	+ border: 1px solid #d3d7cf;
		3393	+ color: black;
		3394	+ padding: 2px;
		3395	+}
		3396	+.textile-editor-sidebar .icon-loading {
		3397	+ background-image: url(../images/loading-small.gif);
		3398	+}
		3399	+.textile-editor-sidebar #media-search-results ul {
		3400	+ padding: 0px;
		3401	+ list-style: none;
		3402	+}
		3403	+.textile-editor-sidebar #media-search-results li {
		3404	+ background-repeat: no-repeat;
		3405	+ background-position: 0px 0px;
		3406	+ padding-left: 20px;
		3407	+ padding-top: 2px;
		3408	+ padding-bottom: 2px;
		3409	+ border: none;
		3410	+ margin-bottom: 2px;
		3411	+}
		3412	+.textile-editor-sidebar #media-search-results li:hover {
		3413	+ background-color: transparent;
		3414	+ border: none;
		3415	+}
		3416	+
		3417	+
3372	/* ==> public/stylesheets/controller_contact.css <== */	3418	/* ==> public/stylesheets/controller_contact.css <== */
3373	/* SELECT CITY */	3419	/* SELECT CITY */
3374		3420
	@@ -1618,4 +1618,17 @@ class CmsControllerTest < Test::Unit::TestCase		@@ -1618,4 +1618,17 @@ class CmsControllerTest < Test::Unit::TestCase
1618	end	1618	end
1619	end	1619	end
1620		1620
		1621	+ should 'search for content for inclusion in articles' do
		1622	+ file = UploadedFile.create!(:profile => @profile, :uploaded_data => fixture_file_upload('files/test.txt', 'text/plain'))
		1623	+ get :search, :profile => @profile.identifier, :q => 'test.txt'
		1624	+ assert_match /test.txt/, @response.body
		1625	+ assert_equal 'application/json', @response.content_type
		1626	+
		1627	+ data = eval(@response.body.gsub('":', '"=>'))
		1628	+ assert_equal 'test.txt', data.first['title']
		1629	+ assert_match /\/testinguser\/test.txt$/, data.first['url']
		1630	+ assert_match /text/, data.first['icon']
		1631	+ assert_match /text/, data.first['content_type']
		1632	+ end
		1633	+
1621	end	1634	end