[media-panel-improvements] Media search

Rodrigo Souto
1 parent 59f24175
Showing 5 changed files with 53 additions and 58 deletions Show diff stats
app/controllers/my_profile/cms_controller.rb
app/views/cms/_published_media_items.html.erb
app/views/cms/_text_editor_sidebar.html.erb
public/javascripts/media-panel.js
public/stylesheets/application.css
@@ -330,9 +330,7 @@ class CmsController &lt; MyProfileController
   end
   def published_media_items
-    parent = profile.articles.find(params[:parent_id])
-    load_recent_files(parent)
-    @published_media_items_id = params[:parent_id]
+    load_recent_files(params[:parent_id], params[:q])
     render :partial => 'published_media_items'
   end
@@ -432,23 +430,32 @@ class CmsController &lt; MyProfileController
     {:images => _('Images'), :generics => _('Files')}
   end
-  def load_recent_files(parent = nil)
+  def load_recent_files(parent_id = nil, q = nil)
     #TODO Since we only have special support for images, I'm limiting myself to
     #     consider generic files as non-images. In the future, with more supported
     #     file types we'll need to have a smart way to fetch from the database
     #     scopes of each supported type as well as the non-supported types as a
     #     whole.
     @recent_files = {}
+
+    parent = parent_id.present? ? profile.articles.find(parent_id) : nil
     if parent.present?
      files = parent.children.files
-     @published_media_items_id = parent.id
     else
       files = profile.files
-      @published_media_items_id = 'recent-media'
     end
+
     files = files.more_recent
-    @recent_files[:images] = files.images.limit(6)
-    @recent_files[:generics] = files.no_images.limit(6)
+    images = files.images.limit(6)
+    generics = files.no_images.limit(6)
+
+    if q.present?
+      @recent_files[:images] = find_by_contents(:images, images, q)[:results]
+      @recent_files[:generics] = find_by_contents(:generics, generics, q)[:results]
+    else
+      @recent_files[:images] = images
+      @recent_files[:generics] = generics
+    end
   end
 end
-<div id='<%= @published_media_items_id %>' class='items'>
+<div class='items'>
   <% file_types.each do |key, header| %>
     <% display = @recent_files[key].present? ? '' : 'none' %>
     <div class='<%= key.to_s %>' style='display: <%= display%>;'>
 <div class='text-editor-sidebar'>
-  <span class='button-add' data-value='<%= _('Add to the text') %>'></span>
-  <span class='button-zoom' data-value='<%= _('Zoom in') %>'></span>
-  <span class='button-close' data-value='<%= _('Close') %>'></span>
-
   <%= render(:partial => 'textile_quick_reference') if @article.is_a?(TextileArticle) %>
   <div class='text-editor-sidebar-box' id='media-upload-box'>
     <div class='header'><strong><%= _('Insert media') %></strong></div>
@@ -21,30 +17,14 @@
     </div>
   </div>
-  <div id='published-media' class='text-editor-sidebar-box'>
+  <div id='published-media' class='text-editor-sidebar-box' data-url='<%= url_for({:controller => 'cms', :action => 'published_media_items', :profile => profile.identifier}) %>'>
     <div class='header'><strong><%= _('Published media') %></strong></div>
-    <%= select_profile_folder(nil, :parent_id, profile, 'recent-media', {'data-url' => url_for({:controller => 'cms', :action => 'published_media_items', :profile => profile.identifier})}, {},
+    <%= select_profile_folder(nil, :parent_id, profile, 'recent-media', {}, {},
         "type='Folder' or type='Gallery'", {:root_label => _('Recent media')}) %>
+    <%= labelled_form_field _('Search'), text_field_tag('q') %>
     <%= render :partial => 'drag_and_drop_note' %>
     <%= render :partial => 'published_media_items' %>
   </div>
-
-  <div id='media-search-box' class='text-editor-sidebar-box'>
-    <div class='header'><strong><%= _('Media search') %></strong></div>
-    <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 %>
-    </p>
-    <div id='media-search-results' style='display: none'>
-      <%= render :partial => 'drag_and_drop_note' %>
-      <div class='items'>
-      </div>
-    </div>
-  </div>
 </div>
 <script id="template-upload" type="text/x-tmpl">
@@ -13,31 +13,34 @@ jQuery(&#39;#file&#39;).fileupload({
   }
 });
-jQuery('#published-media #parent_id').change(function(){
-  value = jQuery(this).val();
-  if(value == '')
-    value = 'recent-media'
-  selector = '#published-media #'+value
+function loadPublishedMedia() {
+  var parent_id = jQuery('#published-media #parent_id').val();
+  var q = jQuery('#published-media #q').val();
+  var url = jQuery('#published-media').data('url');
-  if (jQuery(selector).length > 0){
-    jQuery('#published-media .items').hide();
-    jQuery(selector).show();
-  } else {
-    jQuery('#published-media').addClass('fetching');
-    url = jQuery(this).data('url');
-    jQuery.ajax({
-      url: url,
-      data: {"parent_id":value},
-      dataType: 'html',
-      success: function(response) {
-        jQuery('#published-media .items').hide();
-        jQuery("#published-media").append('<div id="'+ value +'" class="items">' + response + '</div>');
-        jQuery('#published-media').removeClass('fetching');
-      },
-      error: function(response, textStatus, xhr) {
-        console.log(response);
-        console.log(textStatus);
-      }
-    });
-  }
+  jQuery('#published-media').addClass('fetching');
+  jQuery.ajax({
+    url: url,
+    data: {'parent_id': parent_id, 'q': q},
+    dataType: 'html',
+    success: function(response) {
+      jQuery("#published-media .items").html(response);
+      jQuery('#published-media').removeClass('fetching');
+    },
+    error: function(response, textStatus, xhr) {
+      console.log(response);
+      console.log(textStatus);
+    }
+  });
+}
+
+jQuery('#published-media #parent_id').change(function(){ loadPublishedMedia() });
+
+jQuery("#published-media #q").typeWatch({
+  callback: function (value) { loadPublishedMedia() },
+  wait: 750,
+  highlight: true,
+  captureLength: 2
 });
+
+jQuery("#published-media #q").bind('notext', function(){ loadPublishedMedia() });
@@ -3448,6 +3448,11 @@ div.with_media_panel .formfield input[type=&quot;checkbox&quot;] {
   margin-bottom: 12px;
 }
+.text-editor-sidebar select,
+.text-editor-sidebar input {
+  width: 100%;
+}
+
 .text-editor-sidebar .items .image {
 	display: inline-block;
 	vertical-align: middle;
1	-<div id='<%= @published_media_items_id %>' class='items'>	1	+<div class='items'>
2	<% file_types.each do \|key, header\| %>	2	<% file_types.each do \|key, header\| %>
3	<% display = @recent_files[key].present? ? '' : 'none' %>	3	<% display = @recent_files[key].present? ? '' : 'none' %>
4	<div class='<%= key.to_s %>' style='display: <%= display%>;'>	4	<div class='<%= key.to_s %>' style='display: <%= display%>;'>
1	<div class='text-editor-sidebar'>	1	<div class='text-editor-sidebar'>
2	- <span class='button-add' data-value='<%= _('Add to the text') %>'></span>
3	- <span class='button-zoom' data-value='<%= _('Zoom in') %>'></span>
4	- <span class='button-close' data-value='<%= _('Close') %>'></span>
5	-
6	<%= render(:partial => 'textile_quick_reference') if @article.is_a?(TextileArticle) %>	2	<%= render(:partial => 'textile_quick_reference') if @article.is_a?(TextileArticle) %>
7	<div class='text-editor-sidebar-box' id='media-upload-box'>	3	<div class='text-editor-sidebar-box' id='media-upload-box'>
8	<div class='header'><strong><%= _('Insert media') %></strong></div>	4	<div class='header'><strong><%= _('Insert media') %></strong></div>
	@@ -21,30 +17,14 @@		@@ -21,30 +17,14 @@
21	</div>	17	</div>
22	</div>	18	</div>
23		19
24	- <div id='published-media' class='text-editor-sidebar-box'>	20	+ <div id='published-media' class='text-editor-sidebar-box' data-url='<%= url_for({:controller => 'cms', :action => 'published_media_items', :profile => profile.identifier}) %>'>
25	<div class='header'><strong><%= _('Published media') %></strong></div>	21	<div class='header'><strong><%= _('Published media') %></strong></div>
26	- <%= select_profile_folder(nil, :parent_id, profile, 'recent-media', {'data-url' => url_for({:controller => 'cms', :action => 'published_media_items', :profile => profile.identifier})}, {},	22	+ <%= select_profile_folder(nil, :parent_id, profile, 'recent-media', {}, {},
27	"type='Folder' or type='Gallery'", {:root_label => _('Recent media')}) %>	23	"type='Folder' or type='Gallery'", {:root_label => _('Recent media')}) %>
		24	+ <%= labelled_form_field _('Search'), text_field_tag('q') %>
28	<%= render :partial => 'drag_and_drop_note' %>	25	<%= render :partial => 'drag_and_drop_note' %>
29	<%= render :partial => 'published_media_items' %>	26	<%= render :partial => 'published_media_items' %>
30	</div>	27	</div>
31	-
32	- <div id='media-search-box' class='text-editor-sidebar-box'>
33	- <div class='header'><strong><%= _('Media search') %></strong></div>
34	- <p>
35	- <%= form_tag({ :action => 'search' }) do %>
36	- <span class='formfield'>
37	- <input name='q' type='text' id='media-search-query' style='width: 250px;'/>
38	- </span>
39	- <%= submit_button :search, _('Search'), :id => 'media-search-button' %>
40	- <% end %>
41	- </p>
42	- <div id='media-search-results' style='display: none'>
43	- <%= render :partial => 'drag_and_drop_note' %>
44	- <div class='items'>
45	- </div>
46	- </div>
47	- </div>
48	</div>	28	</div>
49		29
50	<script id="template-upload" type="text/x-tmpl">	30	<script id="template-upload" type="text/x-tmpl">