Commit 560b9c49d10d94d134630bdc1ed7c8b34c908903
1 parent
7d560b7d
Exists in
theme-brasil-digital-from-staging
and in
9 other branches
Filter blocks by name in block store
Showing
3 changed files
with
18 additions
and
1 deletions
Show diff stats
app/views/box_organizer/index.html.erb
... | ... | @@ -8,9 +8,10 @@ |
8 | 8 | <% end %> |
9 | 9 | |
10 | 10 | <div id="block-store"> |
11 | + <input type="text" id="block-store-filter" placeholder="<%= _('Filter blocks') %>" title="<%= _('Filter blocks') %>"> | |
11 | 12 | <div id="block-types"> |
12 | 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 | 15 | <div class="button-bar"> |
15 | 16 | <%= modal_button 'help', _('Help on this block'), |
16 | 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 | 9 | function cloneDraggableBlock(el, blockIcon) { |
2 | 10 | el.addClass('ui-draggable-dragging'); |
3 | 11 | return blockIcon; |
... | ... | @@ -38,4 +46,5 @@ function initBlockStore() { |
38 | 46 | ] |
39 | 47 | }); |
40 | 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 | 27 | /************************************************ |
28 | 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 | 37 | #block-store { |
31 | 38 | display: none; |
32 | 39 | } | ... | ... |