Improve view, filter and search.

src/_h5ai/client/css/inc/ext/filter.less

@@ -20,4 +20,10 @@
             display: inline-block;
         }
     }
+
+    &.pending {
+        input {
+            color: @col-text-disabled-black;
+        }
+    }
 }

src/_h5ai/client/css/inc/view/view.less

@@ -73,8 +73,8 @@
         width: 80px;
     }
 
-    .empty {
+    #view-hint {
-        display: none;
+        display: block;
         margin-top: 36px;
         text-align: center;
         color: @col-border;

src/_h5ai/client/js/inc/ext/filter.js

@@ -1,48 +1,48 @@
-modulejs.define('ext/filter', ['_', '$', 'core/event', 'core/resource', 'core/settings'], function (_, $, event, resource, allsettings) {
+modulejs.define('ext/filter', ['_', '$', 'core/event', 'core/location', 'core/resource', 'core/settings', 'view/view'], function (_, $, event, location, resource, allsettings, view) {
 
     var settings = _.extend({
-            enabled: false
+            enabled: false,
+            debounceTime: 100
         }, allsettings.filter);
     var template =
             '<div id="filter" class="tool">' +
                 '<img src="' + resource.image('filter') + '" alt="filter"/>' +
-                '<input class="l10n_ph-filter" type="text" value="" placeholder="filter"/>' +
+                '<input class="l10n_ph-filter" type="text" value=""/>' +
             '</div>';
-    var noMatchTemplate = '<div class="no-match l10n-noMatch"/>';
     var inputIsVisible = false;
+    var prevPattern = '';
     var $filter;
     var $input;
-    var $noMatch;
 
 
-    function filter(re) {
+    function filter(pattern) {
 
-        var match = [];
+        pattern = pattern || '';
-        var noMatch = [];
+        if (pattern === prevPattern) {
-        var duration = 200;
+            return;
+        }
+        prevPattern = pattern;
 
-        if (re) {
+        if (!pattern) {
-            $('#items .item').not('.folder-parent').each(function () {
+            view.setLocation();
-
+            return;
-                var label = $(this).find('.label').text();
-
-                if (label.match(re)) {
-                    match.push(this);
-                } else {
-                    noMatch.push(this);
-                }
-            });
-        } else {
-            match = $('#items .item').not('.folder-parent');
         }
 
-        if (match.length) {
+        $filter.addClass('pending');
-            $noMatch.hide();
+
-        } else if (noMatch.length) {
+        var re = new RegExp(pattern);
-            setTimeout(function () { $noMatch.show(); }, duration);
+        var matchedItems = [];
-        }
+
-        $(match).fadeIn(duration);
+        _.each(location.getItem().content, function (item) {
-        $(noMatch).fadeOut(duration);
+
+            if (re.test(item.label)) {
+                matchedItems.push(item);
+            }
+        });
+
+        $filter.removeClass('pending');
+        view.setHint('noMatch');
+        view.setItems('filter', matchedItems);
     }
 
     function escapeRegExp(sequence) {
@@ -50,30 +50,31 @@ modulejs.define('ext/filter', ['_', '$', 'core/event', 'core/resource', 'core/se
         return sequence.replace(/[\-\[\]{}()*+?.,\\$\^|#\s]/g, '\\$&');
     }
 
-    function parseFilterSequence(sequence) {
+    function parseInput(sequence) {
 
         if (sequence.substr(0, 3) === 're:') {
-            return new RegExp(sequence.substr(3));
+            return sequence.substr(3);
         }
 
-        sequence = $.map($.trim(sequence).split(/\s+/), function (part) {
+        return escapeRegExp(sequence);
 
-            return _.map(part.split(''), function (character) {
+        // sequence = $.map($.trim(sequence).split(/\s+/), function (part) {
 
-                return escapeRegExp(character);
+        //     return _.map(part.split(''), function (character) {
-            }).join('.*?');
-        }).join('|');
 
-        return new RegExp(sequence, 'i');
+        //         return escapeRegExp(character);
+        //     }).join('.*?');
+        // }).join('|');
+
+        // return sequence;
     }
 
     function update() {
 
         if (inputIsVisible) {
-            var val = $input.val();
-            filter(parseFilterSequence(val));
             $filter.addClass('active');
             $input.focus();
+            filter(parseInput($input.val()));
         } else {
             filter();
             $filter.removeClass('active');
@@ -88,6 +89,7 @@ modulejs.define('ext/filter', ['_', '$', 'core/event', 'core/resource', 'core/se
 
     function reset() {
 
+        inputIsVisible = false;
         $input.val('');
         update();
     }
@@ -100,10 +102,9 @@ modulejs.define('ext/filter', ['_', '$', 'core/event', 'core/resource', 'core/se
 
         $filter = $(template).appendTo('#toolbar');
         $input = $filter.find('input');
-        $noMatch = $(noMatchTemplate).appendTo('#view');
 
         $filter.on('click', 'img', toggle);
-        $input.on('keyup', update);
+        $input.on('keyup', _.debounce(update, settings.debounceTime, {trailing: true}));
         event.sub('location.changed', reset);
     }
 

src/_h5ai/client/js/inc/ext/search.js

@@ -7,7 +7,7 @@ modulejs.define('ext/search', ['_', '$', 'core/event', 'core/location', 'core/re
     var template =
             '<div id="search" class="tool">' +
                 '<img src="' + resource.image('search') + '" alt="search"/>' +
-                '<input class="l10n_ph-search" type="text" value="" placeholder="search"/>' +
+                '<input class="l10n_ph-search" type="text" value=""/>' +
             '</div>';
     var inputIsVisible = false;
     var prevPattern = '';
@@ -39,6 +39,7 @@ modulejs.define('ext/search', ['_', '$', 'core/event', 'core/location', 'core/re
         }, function (response) {
 
             $search.removeClass('pending');
+            view.setHint('noMatch');
             view.setItems('search', _.map(response.search, function (item) {
 
                 return Item.get(item);

src/_h5ai/client/js/inc/view/view.js

@@ -16,7 +16,7 @@ modulejs.define('view/view', ['_', '$', 'core/event', 'core/format', 'core/locat
                         '<a class="size" href="#"><span class="l10n-size"/></a>' +
                     '</li>' +
                 '</ul>' +
-                '<div class="empty l10n-empty"/>' +
+                '<div id="view-hint"/>' +
             '</div>';
     var itemTemplate =
             '<li class="item">' +
@@ -30,7 +30,7 @@ modulejs.define('view/view', ['_', '$', 'core/event', 'core/format', 'core/locat
             '</li>';
     var $view = $(template);
     var $items = $view.find('#items');
-    var $empty = $view.find('.empty');
+    var $hint = $view.find('#view-hint');
 
 
     function createHtml(item) {
@@ -98,8 +98,8 @@ modulejs.define('view/view', ['_', '$', 'core/event', 'core/format', 'core/locat
             $items.append(createHtml(e));
         });
 
-        $empty.hide();
         content.$el.scrollLeft(0).scrollTop(0);
+        checkHint();
         event.pub('view.changed', items, removed);
     }
 
@@ -117,10 +117,27 @@ modulejs.define('view/view', ['_', '$', 'core/event', 'core/format', 'core/locat
             });
         });
 
-        $empty.hide();
+        checkHint();
         event.pub('view.changed', add, remove);
     }
 
+    function checkHint() {
+
+        var hasNoItems = $items.find('.item').not('.folder-parent').length === 0;
+
+        if (hasNoItems) {
+            $hint.show();
+        } else {
+            $hint.hide();
+        }
+    }
+
+    function setHint(l10nKey) {
+
+        $hint.removeClass().addClass('l10n-' + l10nKey);
+        checkHint();
+    }
+
     function onLocationChanged(item) {
 
         if (!item) {
@@ -140,6 +157,7 @@ modulejs.define('view/view', ['_', '$', 'core/event', 'core/format', 'core/locat
             }
         });
 
+        setHint('empty');
         setItems('location.changed', items);
     }
 
@@ -154,13 +172,14 @@ modulejs.define('view/view', ['_', '$', 'core/event', 'core/format', 'core/locat
             }
         });
 
+        setHint('empty');
         changeItems('location.refreshed', add, removed);
     }
 
     function init() {
 
         $view.appendTo(content.$el);
-        $empty.hide();
+        $hint.hide();
 
         format.setDefaultMetric(settings.binaryPrefix);
 
@@ -180,6 +199,7 @@ modulejs.define('view/view', ['_', '$', 'core/event', 'core/format', 'core/locat
         $items: $items,
         setItems: setItems,
         changeItems: changeItems,
-        setLocation: onLocationChanged
+        setLocation: onLocationChanged,
+        setHint: setHint
     };
 });

src/_h5ai/conf/options.json

@@ -109,9 +109,12 @@ Options
 
     Filters will be treated as JavaScript regular expressions
     if you prefix them with "re:".
+
+    - debounceTime: number, debounce wait time in milliseconds
     */
     "filter": {
-        "enabled": true
+        "enabled": true,
+        "debounceTime": 100
     },
 
     /*