Commit 3db199c7668428c34808e8ea5df34778a0c22f9b
1 parent
59f24175
Exists in
master
and in
27 other branches
[media-panel-improvements] Media search
Showing
5 changed files
with
53 additions
and
58 deletions
Show diff stats
app/controllers/my_profile/cms_controller.rb
| ... | ... | @@ -330,9 +330,7 @@ class CmsController < MyProfileController |
| 330 | 330 | end |
| 331 | 331 | |
| 332 | 332 | def published_media_items |
| 333 | - parent = profile.articles.find(params[:parent_id]) | |
| 334 | - load_recent_files(parent) | |
| 335 | - @published_media_items_id = params[:parent_id] | |
| 333 | + load_recent_files(params[:parent_id], params[:q]) | |
| 336 | 334 | render :partial => 'published_media_items' |
| 337 | 335 | end |
| 338 | 336 | |
| ... | ... | @@ -432,23 +430,32 @@ class CmsController < MyProfileController |
| 432 | 430 | {:images => _('Images'), :generics => _('Files')} |
| 433 | 431 | end |
| 434 | 432 | |
| 435 | - def load_recent_files(parent = nil) | |
| 433 | + def load_recent_files(parent_id = nil, q = nil) | |
| 436 | 434 | #TODO Since we only have special support for images, I'm limiting myself to |
| 437 | 435 | # consider generic files as non-images. In the future, with more supported |
| 438 | 436 | # file types we'll need to have a smart way to fetch from the database |
| 439 | 437 | # scopes of each supported type as well as the non-supported types as a |
| 440 | 438 | # whole. |
| 441 | 439 | @recent_files = {} |
| 440 | + | |
| 441 | + parent = parent_id.present? ? profile.articles.find(parent_id) : nil | |
| 442 | 442 | if parent.present? |
| 443 | 443 | files = parent.children.files |
| 444 | - @published_media_items_id = parent.id | |
| 445 | 444 | else |
| 446 | 445 | files = profile.files |
| 447 | - @published_media_items_id = 'recent-media' | |
| 448 | 446 | end |
| 447 | + | |
| 449 | 448 | files = files.more_recent |
| 450 | - @recent_files[:images] = files.images.limit(6) | |
| 451 | - @recent_files[:generics] = files.no_images.limit(6) | |
| 449 | + images = files.images.limit(6) | |
| 450 | + generics = files.no_images.limit(6) | |
| 451 | + | |
| 452 | + if q.present? | |
| 453 | + @recent_files[:images] = find_by_contents(:images, images, q)[:results] | |
| 454 | + @recent_files[:generics] = find_by_contents(:generics, generics, q)[:results] | |
| 455 | + else | |
| 456 | + @recent_files[:images] = images | |
| 457 | + @recent_files[:generics] = generics | |
| 458 | + end | |
| 452 | 459 | end |
| 453 | 460 | |
| 454 | 461 | end | ... | ... |
app/views/cms/_published_media_items.html.erb
app/views/cms/_text_editor_sidebar.html.erb
| 1 | 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 | 2 | <%= render(:partial => 'textile_quick_reference') if @article.is_a?(TextileArticle) %> |
| 7 | 3 | <div class='text-editor-sidebar-box' id='media-upload-box'> |
| 8 | 4 | <div class='header'><strong><%= _('Insert media') %></strong></div> |
| ... | ... | @@ -21,30 +17,14 @@ |
| 21 | 17 | </div> |
| 22 | 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 | 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 | 23 | "type='Folder' or type='Gallery'", {:root_label => _('Recent media')}) %> |
| 24 | + <%= labelled_form_field _('Search'), text_field_tag('q') %> | |
| 28 | 25 | <%= render :partial => 'drag_and_drop_note' %> |
| 29 | 26 | <%= render :partial => 'published_media_items' %> |
| 30 | 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 | 28 | </div> |
| 49 | 29 | |
| 50 | 30 | <script id="template-upload" type="text/x-tmpl"> | ... | ... |
public/javascripts/media-panel.js
| ... | ... | @@ -13,31 +13,34 @@ jQuery('#file').fileupload({ |
| 13 | 13 | } |
| 14 | 14 | }); |
| 15 | 15 | |
| 16 | -jQuery('#published-media #parent_id').change(function(){ | |
| 17 | - value = jQuery(this).val(); | |
| 18 | - if(value == '') | |
| 19 | - value = 'recent-media' | |
| 20 | - selector = '#published-media #'+value | |
| 16 | +function loadPublishedMedia() { | |
| 17 | + var parent_id = jQuery('#published-media #parent_id').val(); | |
| 18 | + var q = jQuery('#published-media #q').val(); | |
| 19 | + var url = jQuery('#published-media').data('url'); | |
| 21 | 20 | |
| 22 | - if (jQuery(selector).length > 0){ | |
| 23 | - jQuery('#published-media .items').hide(); | |
| 24 | - jQuery(selector).show(); | |
| 25 | - } else { | |
| 26 | - jQuery('#published-media').addClass('fetching'); | |
| 27 | - url = jQuery(this).data('url'); | |
| 28 | - jQuery.ajax({ | |
| 29 | - url: url, | |
| 30 | - data: {"parent_id":value}, | |
| 31 | - dataType: 'html', | |
| 32 | - success: function(response) { | |
| 33 | - jQuery('#published-media .items').hide(); | |
| 34 | - jQuery("#published-media").append('<div id="'+ value +'" class="items">' + response + '</div>'); | |
| 35 | - jQuery('#published-media').removeClass('fetching'); | |
| 36 | - }, | |
| 37 | - error: function(response, textStatus, xhr) { | |
| 38 | - console.log(response); | |
| 39 | - console.log(textStatus); | |
| 40 | - } | |
| 41 | - }); | |
| 42 | - } | |
| 21 | + jQuery('#published-media').addClass('fetching'); | |
| 22 | + jQuery.ajax({ | |
| 23 | + url: url, | |
| 24 | + data: {'parent_id': parent_id, 'q': q}, | |
| 25 | + dataType: 'html', | |
| 26 | + success: function(response) { | |
| 27 | + jQuery("#published-media .items").html(response); | |
| 28 | + jQuery('#published-media').removeClass('fetching'); | |
| 29 | + }, | |
| 30 | + error: function(response, textStatus, xhr) { | |
| 31 | + console.log(response); | |
| 32 | + console.log(textStatus); | |
| 33 | + } | |
| 34 | + }); | |
| 35 | +} | |
| 36 | + | |
| 37 | +jQuery('#published-media #parent_id').change(function(){ loadPublishedMedia() }); | |
| 38 | + | |
| 39 | +jQuery("#published-media #q").typeWatch({ | |
| 40 | + callback: function (value) { loadPublishedMedia() }, | |
| 41 | + wait: 750, | |
| 42 | + highlight: true, | |
| 43 | + captureLength: 2 | |
| 43 | 44 | }); |
| 45 | + | |
| 46 | +jQuery("#published-media #q").bind('notext', function(){ loadPublishedMedia() }); | ... | ... |
public/stylesheets/application.css
| ... | ... | @@ -3448,6 +3448,11 @@ div.with_media_panel .formfield input[type="checkbox"] { |
| 3448 | 3448 | margin-bottom: 12px; |
| 3449 | 3449 | } |
| 3450 | 3450 | |
| 3451 | +.text-editor-sidebar select, | |
| 3452 | +.text-editor-sidebar input { | |
| 3453 | + width: 100%; | |
| 3454 | +} | |
| 3455 | + | |
| 3451 | 3456 | .text-editor-sidebar .items .image { |
| 3452 | 3457 | display: inline-block; |
| 3453 | 3458 | vertical-align: middle; | ... | ... |