mbirth/LuckyCoinkydink
Archived
1
0
Fork 0
Code Issues Pull Requests Activity

Make category filtering a reusable function for live filtering

Browse Source 
Can now be used anywhere where a "real-time" filter is desirable.
As a usage example, it's implemented for the list of installable
plugins. Should work anywhere, though – needs an input element,
a list of target elements and an element within those target
elements to contain the search term.

Also made the function for the reset button for this reusable.

References #154
This commit is contained in:
Matthias Mees
2014-05-18 14:13:27 +02:00
parent 8726770c03
commit b8faaba829
5 changed files with 76 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/NEWS
View File

@ -4,6 +4,10 @@
Version 2.0-beta3 ()
------------------------------------------------------------------------
* Changed JS for category filtering and its reset button to be a
reusable function, which is now also used in the list of
installable plugins.
* Fixed wrong local documentation URL in plugin configuration
* Added new "backend_dashboard" event-hook for plugins to use

2
templates/2k11/admin/entries.tpl
View File

@ -111,7 +111,7 @@
<div id="category_filter" class="form_field">
<label for="categoryfilter" class="visuallyhidden">{$CONST.FILTERS}</label>
<input id="categoryfilter" type="text" placeholder="{$CONST.FILTERS}: {$CONST.CATEGORIES}">
<button id="reset_categoryfilter" class="icon_link" type="button" title="{$CONST.RESET_FILTERS}"><span class="icon-cancel"></span><span class="visuallyhidden">{$CONST.RESET_FILTERS}</span></button>
<button class="reset_livefilter icon_link" type="button" data-target="categoryfilter" title="{$CONST.RESET_FILTERS}"><span class="icon-cancel"></span><span class="visuallyhidden">{$CONST.RESET_FILTERS}</span></button>
</div>
{foreach from=$entry_vars.category_options item="entry_cat"}

56
templates/2k11/admin/plugins.inc.tpl
View File

@ -52,19 +52,27 @@
<input name="serendipity[adminAction]" type="hidden" value="addnew">
<input name="serendipity[type]" type="hidden" value="{$type|escape}">
<div class="form_select">
<label for="only_group">{$CONST.FILTERS}</label>
<select id="only_group" name="serendipity[only_group]">
{foreach $groupnames as $available_group => $available_name}
<option value="{$available_group}"{if $only_group == $available_group} selected{/if}>{$available_name}</option>
{/foreach}
<option value="ALL"{if $only_group == ALL} selected{/if}>{$CONST.ALL_CATEGORIES}</option>
<option value="UPGRADE"{if $only_group == UPGRADE} selected{/if}>{$CONST.WORD_NEW}</option>
</select>
</div>
<div class="clearfix">
<div id="plugin_groups" class="form_select">
<label for="only_group">{$CONST.FILTERS}</label>
<select id="only_group" name="serendipity[only_group]">
{foreach $groupnames as $available_group => $available_name}
<option value="{$available_group}"{if $only_group == $available_group} selected{/if}>{$available_name}</option>
{/foreach}
<option value="ALL"{if $only_group == ALL} selected{/if}>{$CONST.ALL_CATEGORIES}</option>
<option value="UPGRADE"{if $only_group == UPGRADE} selected{/if}>{$CONST.WORD_NEW}</option>
</select>
<div class="form_buttons">
<input type="submit" value="{$CONST.GO}">
<div class="form_buttons">
<input type="submit" value="{$CONST.GO}">
</div>
</div>
<div id="plugin_filter" class="form_field">
<label for="pluginfilter" class="visuallyhidden">{$CONST.FILTERS}</label>
<input id="pluginfilter" type="text" placeholder="{$CONST.FILTERS}: {$CONST.MENU_PLUGINS}">
<button class="reset_livefilter icon_link" type="button" data-target="pluginfilter" title="{$CONST.RESET_FILTERS}"><span class="icon-cancel"></span><span class="visuallyhidden">{$CONST.RESET_FILTERS}</span></button>
</div>
</div>
</form>
{foreach $pluggroups AS $pluggroup => $groupstack}
@ -77,21 +85,23 @@
{foreach $groupstack as $plug}
<li class="clearfix">
<div class="equal_heights">
<h4>{$plug.name}</h4>
<div class="plugin_features">
<h4>{$plug.name}</h4>
{if $plug.description}
<details class="plugin_data">
<summary><var class="perm_name">{$plug.class_name}</var></summary>
{if $plug.description}
<details class="plugin_data">
<summary><var class="perm_name">{$plug.class_name}</var></summary>
<div class="plugin_desc clearfix">
{$plug.description}
<div class="plugin_desc clearfix">
{$plug.description}
</div>
</details>
{else}
<div class="plugin_data">
<var class="perm_name">{$plug.class_name}</var>
</div>
</details>
{else}
<div class="plugin_data">
<var class="perm_name">{$plug.class_name}</var>
{/if}
</div>
{/if}
<ul class="plugin_info plainList">
{if ! empty($plug.author)}

47
templates/2k11/admin/serendipity_editor.js.tpl
View File

@ -625,6 +625,24 @@
}
}
serendipity.liveFilters = function(input, target, elem) {
var currentInput = $(input).val().toLowerCase();
if (currentInput == '') {
$(target).toggle(true);
} else {
$(target).each(function() {
var $el = $(this);
if ($el.find(elem).html().toLowerCase().indexOf(currentInput) > -1) {
$el.toggle(true);
} else {
$el.toggle(false);
}
});
}
}
}( window.serendipity = window.serendipity || {}, jQuery ));
// Source: https://github.com/yatil/accessifyhtml5.js
@ -980,27 +998,20 @@ $(function() {
}
{/if}
// Category filter
// Category live filter
$('#categoryfilter').keyup(function() {
var current_categoryfilter = $(this).val().toLowerCase();
if (current_categoryfilter == '') {
$('#edit_entry_category .form_check').toggle(true);
} else {
$('#edit_entry_category .form_check').each(function() {
var $el = $(this);
if ($el.find('label').html().toLowerCase().indexOf(current_categoryfilter) > -1) {
$el.toggle(true);
} else {
$el.toggle(false);
}
});
}
serendipity.liveFilters($(this), '#edit_entry_category .form_check', 'label');
});
// Reset button for category filter
$('#reset_categoryfilter').click(function() {
$('#categoryfilter').val("").keyup();
// Plugins live filter
$('#pluginfilter').keyup(function() {
serendipity.liveFilters($(this), '.plugins_installable > li', '.plugin_features');
});
// Reset button for live filters
$('.reset_livefilter').click(function() {
var target = '#' + $(this).attr('data-target');
$(target).val('').keyup();
});
// Advanced options

11
templates/2k11/admin/style.css
View File

@ -507,7 +507,8 @@ form > button,
}
.overviewListForm > button,
.ping_services .form_check {
.ping_services .form_check,
.plugins_installable {
margin-top: 0;
margin-bottom: 0;
}
@ -2708,12 +2709,18 @@ img.mfp-img {
.entryproperties_access_groups,
.entryproperties_access_users,
.entryproperties_access_author,
.entryproperties_markup {
.entryproperties_markup,
#plugin_groups,
#plugin_filter {
float: left;
margin-right: 2%;
width: 48%;
}
#plugin_groups .form_buttons {
margin-bottom: 0;
}
.entryproperties_customfields {
clear: both;
}