Commit 560b9c49d10d94d134630bdc1ed7c8b34c908903

Authored by Victor Costa
1 parent 7d560b7d

Filter blocks by name in block store

app/views/box_organizer/index.html.erb
@@ -8,9 +8,10 @@ @@ -8,9 +8,10 @@
8 <% end %> 8 <% end %>
9 9
10 <div id="block-store"> 10 <div id="block-store">
  11 + <input type="text" id="block-store-filter" placeholder="<%= _('Filter blocks') %>" title="<%= _('Filter blocks') %>">
11 <div id="block-types"> 12 <div id="block-types">
12 <% @available_blocks.each do |block| %> 13 <% @available_blocks.each do |block| %>
13 - <div id="block-<%= block.name.to_css_class %>" class="block-type <%= block.name.to_css_class %>" data-block-type="<%= block.name %>"> 14 + <div id="block-<%= block.name.to_css_class %>" class="block-type <%= block.name.to_css_class %>" data-block-type="<%= block.name %>" data-block-name="<%= block.pretty_name %>">
14 <div class="button-bar"> 15 <div class="button-bar">
15 <%= modal_button 'help', _('Help on this block'), 16 <%= modal_button 'help', _('Help on this block'),
16 {:action => 'show_block_type_info', :type => block.name}, 17 {:action => 'show_block_type_info', :type => block.name},
public/javascripts/block-store.js
  1 +function filterBlocks() {
  2 + jQuery('#block-store #block-types').slick('slickFilter', function() {
  3 + var name = $(this).data('block-name');
  4 + var filter = $('#block-store #block-store-filter').val();
  5 + return name.toLowerCase().indexOf(filter.toLowerCase()) > -1;
  6 + });
  7 +}
  8 +
1 function cloneDraggableBlock(el, blockIcon) { 9 function cloneDraggableBlock(el, blockIcon) {
2 el.addClass('ui-draggable-dragging'); 10 el.addClass('ui-draggable-dragging');
3 return blockIcon; 11 return blockIcon;
@@ -38,4 +46,5 @@ function initBlockStore() { @@ -38,4 +46,5 @@ function initBlockStore() {
38 ] 46 ]
39 }); 47 });
40 jQuery('#block-store').show(); 48 jQuery('#block-store').show();
  49 + jQuery('#block-store #block-store-filter').keyup(filterBlocks);
41 } 50 }
public/stylesheets/block-store.css
@@ -27,6 +27,13 @@ @@ -27,6 +27,13 @@
27 /************************************************ 27 /************************************************
28 * block store styles 28 * block store styles
29 ************************************************/ 29 ************************************************/
  30 +#block-store #block-store-filter {
  31 + float: right;
  32 + margin-bottom: 8px;
  33 +}
  34 +#block-store #block-types {
  35 + clear: both;
  36 +}
30 #block-store { 37 #block-store {
31 display: none; 38 display: none;
32 } 39 }