mirror of
https://github.com/lrsjng/h5ai.git
synced 2025-05-28 14:04:45 -04:00
Improve view, filter and search.
This commit is contained in:
Lars Jung
parent
4896d9a101
commit
a362356a72
6 changed files with 82 additions and 51 deletions
|
|
@ -20,4 +20,10 @@
|
|||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&.pending {
|
||||
input {
|
||||
color: @col-text-disabled-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,8 +73,8 @@
|
|||
width: 80px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: none;
|
||||
#view-hint {
|
||||
display: block;
|
||||
margin-top: 36px;
|
||||
text-align: center;
|
||||
color: @col-border;
|
||||
|
|
|
|||
|
|
@ -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 = [];
|
||||
var noMatch = [];
|
||||
var duration = 200;
|
||||
pattern = pattern || '';
|
||||
if (pattern === prevPattern) {
|
||||
return;
|
||||
}
|
||||
prevPattern = pattern;
|
||||
|
||||
if (re) {
|
||||
$('#items .item').not('.folder-parent').each(function () {
|
||||
|
||||
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 (!pattern) {
|
||||
view.setLocation();
|
||||
return;
|
||||
}
|
||||
|
||||
if (match.length) {
|
||||
$noMatch.hide();
|
||||
} else if (noMatch.length) {
|
||||
setTimeout(function () { $noMatch.show(); }, duration);
|
||||
}
|
||||
$(match).fadeIn(duration);
|
||||
$(noMatch).fadeOut(duration);
|
||||
$filter.addClass('pending');
|
||||
|
||||
var re = new RegExp(pattern);
|
||||
var matchedItems = [];
|
||||
|
||||
_.each(location.getItem().content, function (item) {
|
||||
|
||||
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);
|
||||
}).join('.*?');
|
||||
}).join('|');
|
||||
// return _.map(part.split(''), function (character) {
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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
|
||||
},
|
||||
|
||||
/*
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue