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 | } | ... | ... |