Filters in backend are now dynamic.feature-ui-improvements

If JavaScript is activated in the users browser, filterable tables are
filtered immediatly.

3 files changed, 182 insertions, 140 deletions

diff --git a/ratatoeskr/js/backend.js b/ratatoeskr/js/backend.js
index d131bfe..43e2544 100644
--- a/ratatoeskr/js/backend.js
+++ b/ratatoeskr/js/backend.js
@@ -16,4 +16,42 @@ $(function()
 			$("div.articleeditor-metabar-element-content", self.parent()).show("fast");
 		}
 	});
+	
+	function filtertable(table, pairs)
+	{
+		$.each(pairs, function(idx, pair)
+		{
+			input = pair[0];
+			column = pair[1];
+			
+			(function(column){input.keyup(function()
+			{
+				filterby = $(this).val().toLowerCase();
+				$("tbody tr", table).each(function(i)
+				{
+					if($("td", this).eq(column).text().toLowerCase().indexOf(filterby) == -1)
+						$(this).hide()
+					else
+						$(this).show();
+				});
+			});})(column);
+		});
+	}
+	
+	$("#articlestable").each(function(i)
+	{
+		filtertable(
+			$("table", this),
+			[
+				[$("input[name=filter_urlname]", this), 1],
+				[$("input[name=filter_tag]",     this), 4],
+				[$("input[name=filter_section]", this), 5]
+			]
+		);
+	});
+	
+	$("#commentstable").each(function(i)
+	{
+		filtertable($("table", this), [[$("input[name=filter_article]", this), 7]]);
+	});
 });
\ No newline at end of file
diff --git a/ratatoeskr/templates/src/systemtemplates/articles.html b/ratatoeskr/templates/src/systemtemplates/articles.html
index 764ac40..558ed48 100644
--- a/ratatoeskr/templates/src/systemtemplates/articles.html
+++ b/ratatoeskr/templates/src/systemtemplates/articles.html
@@ -3,74 +3,76 @@
 	<ste:default_error />
 	<ste:default_success />
 	
-	<form action="$rel_path_to_root/backend/content/articles" method="get" accept-charset="UTF-8">
-		<div>
-			<strong><ste:get_translation for="filter" />:</strong>
-			<ste:get_translation for="filter_urlname" /> <input type="text" name="filter_urlname" value="<ste:escape>$filter_urlname</ste:escape>" />
-			<ste:get_translation for="filter_tag" /> <input type="text" name="filter_tag" value="<ste:escape>$filter_tag</ste:escape>" />
-			<ste:get_translation for="filter_section" /> <input type="text" name="filter_section" value="<ste:escape>$filter_section</ste:escape>" />
-			<input type="hidden" name="sort_$sorting[dir]" value="$sorting[by]" />
-			<input type="submit" />
-		</div>
-	</form>
-	
-	<form action="$rel_path_to_root/backend/content/articles?$filterquery?{$filterquery|&|}$sortquery" method="post">
-		<table class="fullwidth listtab">
-			<thead><tr>
-				<th>&nbsp;</th>
-				<th>
-					<ste:get_translation for="urlname" />
-					<a href="$rel_path_to_root/backend/content/articles??{$filterquery|${filterquery}&|}sort_asc=urlname"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_up_?{$sort_asc_urlname|filled|outline}.png" alt="<ste:get_translation for='sort_asc' />" /></a>
-					<a href="$rel_path_to_root/backend/content/articles??{$filterquery|${filterquery}&|}sort_desc=urlname"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_down_?{$sort_desc_urlname|filled|outline}.png" alt="<ste:get_translation for='sort_desc' />" /></a>
-				</th>
-				<th><ste:get_translation for="available_languages" /></th>
-				<th>
-					<ste:get_translation for="date_time" />
-					<a href="$rel_path_to_root/backend/content/articles??{$filterquery|${filterquery}&|}sort_asc=date"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_up_?{$sort_asc_date|filled|outline}.png" alt="<ste:get_translation for='sort_asc' />" /></a>
-					<a href="$rel_path_to_root/backend/content/articles??{$filterquery|${filterquery}&|}sort_desc=date"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_down_?{$sort_desc_date|filled|outline}.png" alt="<ste:get_translation for='sort_desc' />" /></a>
-				</th>
-				<th><ste:get_translation for="tags" /></th>
-				<th>
-					<ste:get_translation for="section" />
-					<a href="$rel_path_to_root/backend/content/articles??{$filterquery|${filterquery}&|}sort_asc=section"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_up_?{$sort_asc_section|filled|outline}.png" alt="<ste:get_translation for='sort_asc' />" /></a>
-					<a href="$rel_path_to_root/backend/content/articles??{$filterquery|${filterquery}&|}sort_desc=section"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_down_?{$sort_desc_section|filled|outline}.png" alt="<ste:get_translation for='sort_desc' />" /></a>
-				</th>
-			</tr></thead>
-			<tbody>
-				<ste:set var="articles_n"><ste:arraylen array="articles" /></ste:set>
-				<ste:if>~{$articles_n|gt|0}
-					<ste:then>
-						<ste:foreach array="articles" value="article">
-							<tr>
-								<td><input type="checkbox" name="article_multiselect[]" value="$article[urlname]" /></td>
-								<td><a href="$rel_path_to_root/backend/content/write/$article[urlname]">$article[urlname]</a></td>
-								<td>
-									<ste:foreach array="article[languages]" value="lang" counter="i">
-										?{~{$i|eq|0}||, }<a href="$rel_path_to_root/backend/content/write/$article[urlname]/$lang">$lang</a>
-									</ste:foreach>
-								</td>
-								<td><ste:date timestamp="$article[date]">%Y-%m-%d %H:%M:%S</ste:date></td>
-								<td>
-									<ste:foreach array="article[tags]" value="tag" counter="i">
-										?{~{$i|eq|0}||, } <ste:escape>$tag</ste:escape>
-									</ste:foreach>
-								</td>
-								<td><ste:escape>$article[section][name]</ste:escape></td>
-							</tr>
-						</ste:foreach>
-					</ste:then>
-					<ste:else>
-						<tr><td colspan="6" style="text-align: center;"><em><ste:get_translation for="no_articles" /></em></td></tr>
-					</ste:else>
-				</ste:if>
-			</tbody>
-		</table>
-		<div>
-			<input type="submit" name="delete" value="<ste:get_translation for='delete' />" />
-			<select name="really_delete">
-				<option value="no" selected="selected"><ste:get_translation for="no" /></option>
-				<option value="yes"><ste:get_translation for="yes" /></option>
-			</select>
-		</div>
-	</form>
+	<div id="articlestable">
+		<form action="$rel_path_to_root/backend/content/articles" method="get" accept-charset="UTF-8" class="filter">
+			<div>
+				<strong><ste:get_translation for="filter" />:</strong>
+				<ste:get_translation for="filter_urlname" /> <input type="text" name="filter_urlname" value="<ste:escape>$filter_urlname</ste:escape>" />
+				<ste:get_translation for="filter_tag" /> <input type="text" name="filter_tag" value="<ste:escape>$filter_tag</ste:escape>" />
+				<ste:get_translation for="filter_section" /> <input type="text" name="filter_section" value="<ste:escape>$filter_section</ste:escape>" />
+				<input type="hidden" name="sort_$sorting[dir]" value="$sorting[by]" />
+				<input type="submit" />
+			</div>
+		</form>
+		
+		<form action="$rel_path_to_root/backend/content/articles?$filterquery?{$filterquery|&|}$sortquery" method="post">
+			<table class="fullwidth listtab">
+				<thead><tr>
+					<th>&nbsp;</th>
+					<th>
+						<ste:get_translation for="urlname" />
+						<a href="$rel_path_to_root/backend/content/articles??{$filterquery|${filterquery}&|}sort_asc=urlname"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_up_?{$sort_asc_urlname|filled|outline}.png" alt="<ste:get_translation for='sort_asc' />" /></a>
+						<a href="$rel_path_to_root/backend/content/articles??{$filterquery|${filterquery}&|}sort_desc=urlname"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_down_?{$sort_desc_urlname|filled|outline}.png" alt="<ste:get_translation for='sort_desc' />" /></a>
+					</th>
+					<th><ste:get_translation for="available_languages" /></th>
+					<th>
+						<ste:get_translation for="date_time" />
+						<a href="$rel_path_to_root/backend/content/articles??{$filterquery|${filterquery}&|}sort_asc=date"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_up_?{$sort_asc_date|filled|outline}.png" alt="<ste:get_translation for='sort_asc' />" /></a>
+						<a href="$rel_path_to_root/backend/content/articles??{$filterquery|${filterquery}&|}sort_desc=date"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_down_?{$sort_desc_date|filled|outline}.png" alt="<ste:get_translation for='sort_desc' />" /></a>
+					</th>
+					<th><ste:get_translation for="tags" /></th>
+					<th>
+						<ste:get_translation for="section" />
+						<a href="$rel_path_to_root/backend/content/articles??{$filterquery|${filterquery}&|}sort_asc=section"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_up_?{$sort_asc_section|filled|outline}.png" alt="<ste:get_translation for='sort_asc' />" /></a>
+						<a href="$rel_path_to_root/backend/content/articles??{$filterquery|${filterquery}&|}sort_desc=section"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_down_?{$sort_desc_section|filled|outline}.png" alt="<ste:get_translation for='sort_desc' />" /></a>
+					</th>
+				</tr></thead>
+				<tbody>
+					<ste:set var="articles_n"><ste:arraylen array="articles" /></ste:set>
+					<ste:if>~{$articles_n|gt|0}
+						<ste:then>
+							<ste:foreach array="articles" value="article">
+								<tr>
+									<td><input type="checkbox" name="article_multiselect[]" value="$article[urlname]" /></td>
+									<td><a href="$rel_path_to_root/backend/content/write/$article[urlname]">$article[urlname]</a></td>
+									<td>
+										<ste:foreach array="article[languages]" value="lang" counter="i">
+											?{~{$i|eq|0}||, }<a href="$rel_path_to_root/backend/content/write/$article[urlname]/$lang">$lang</a>
+										</ste:foreach>
+									</td>
+									<td><ste:date timestamp="$article[date]">%Y-%m-%d %H:%M:%S</ste:date></td>
+									<td>
+										<ste:foreach array="article[tags]" value="tag" counter="i">
+											?{~{$i|eq|0}||, } <ste:escape>$tag</ste:escape>
+										</ste:foreach>
+									</td>
+									<td><ste:escape>$article[section][name]</ste:escape></td>
+								</tr>
+							</ste:foreach>
+						</ste:then>
+						<ste:else>
+							<tr><td colspan="6" style="text-align: center;"><em><ste:get_translation for="no_articles" /></em></td></tr>
+						</ste:else>
+					</ste:if>
+				</tbody>
+			</table>
+			<div>
+				<input type="submit" name="delete" value="<ste:get_translation for='delete' />" />
+				<select name="really_delete">
+					<option value="no" selected="selected"><ste:get_translation for="no" /></option>
+					<option value="yes"><ste:get_translation for="yes" /></option>
+				</select>
+			</div>
+		</form>
+	</div>
 </ste:block>
diff --git a/ratatoeskr/templates/src/systemtemplates/comments_list.html b/ratatoeskr/templates/src/systemtemplates/comments_list.html
index 5c86a8e..999b455 100644
--- a/ratatoeskr/templates/src/systemtemplates/comments_list.html
+++ b/ratatoeskr/templates/src/systemtemplates/comments_list.html
@@ -3,74 +3,76 @@
 	<ste:default_error />
 	<ste:default_success />
 	
-	<form action="$rel_path_to_root/backend/content/comments" method="get" accept-charset="UTF-8">
-		<div>
-			<strong><ste:get_translation for="filter" />:</strong>
-			<ste:get_translation for="filter_article" /> <input type="text" name="filter_article" value="<ste:escape>$filter_article</ste:escape>" />
-			<input type="hidden" name="sort_$sorting[dir]" value="$sorting[by]" />
-			<input type="submit" />
-		</div>
-	</form>
-	
-	<form action="$rel_path_to_root/backend/content/comments?$filterquery?{$filterquery|&|}$sortquery" method="post">
-		<table class="fullwidth listtab">
-			<thead>
-				<tr>
-					<th>&nbsp;</th>
-					<th>
-						<ste:get_translation for="was_read" />
-						<a href="$rel_path_to_root/backend/content/comments??{$filterquery|${filterquery}&|}sort_asc=was_read"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_up_?{$sort_asc_was_read|filled|outline}.png" alt="<ste:get_translation for='sort_asc' />" /></a>
-						<a href="$rel_path_to_root/backend/content/comments??{$filterquery|${filterquery}&|}sort_desc=was_read"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_down_?{$sort_desc_was_read|filled|outline}.png" alt="<ste:get_translation for='sort_desc' />" /></a>
-					</th>
-					<th><ste:get_translation for="visible" /></th>
-					<th><ste:get_translation for="comment_excerpt" /></th>
-					<th>
-						<ste:get_translation for="language" />
-						<a href="$rel_path_to_root/backend/content/comments??{$filterquery|${filterquery}&|}sort_asc=language"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_up_?{$sort_asc_language|filled|outline}.png" alt="<ste:get_translation for='sort_asc' />" /></a>
-						<a href="$rel_path_to_root/backend/content/comments??{$filterquery|${filterquery}&|}sort_desc=language"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_down_?{$sort_desc_language|filled|outline}.png" alt="<ste:get_translation for='sort_desc' />" /></a>
-					</th>
-					<th><ste:get_translation for="author" /></th>
-					<th>
-						<ste:get_translation for="date_time" />
-						<a href="$rel_path_to_root/backend/content/comments??{$filterquery|${filterquery}&|}sort_asc=date"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_up_?{$sort_asc_date|filled|outline}.png" alt="<ste:get_translation for='sort_asc' />" /></a>
-						<a href="$rel_path_to_root/backend/content/comments??{$filterquery|${filterquery}&|}sort_desc=date"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_down_?{$sort_desc_date|filled|outline}.png" alt="<ste:get_translation for='sort_desc' />" /></a>
-					</th>
-					<th><ste:get_translation for="article" /></th>
-				</tr>
-			</thead>
-			<tbody>
-				<ste:set var="comments_n"><ste:arraylen array="comments" /></ste:set>
-				<ste:if>~{$comments_n|gt|0}
-					<ste:then>
-						<ste:foreach array="comments" value="comment">
-							<tr>
-								<td><input type="checkbox" name="comment_multiselect[]" value="$comment[id]" /></td>
-								<td>?{$comment[read_by_admin]|<ste:get_translation for="yes" />|<strong><ste:get_translation for="no" /></strong>}</td>
-								<td>?{$comment[visible]|<ste:get_translation for="yes" />|<ste:get_translation for="no" />}</td>
-								<td><em><ste:escape>$comment[excerpt]</ste:escape>...</em> <a href="$rel_path_to_root/backend/content/comments/$comment[id]"><ste:get_translation for="read_more" /></a></td>
-								<td>$comment[language]</td>
-								<td><ste:escape>$comment[author]</ste:escape></td>
-								<td><ste:date timestamp="$comment[date]">%Y-%m-%d %H:%M:%S</ste:date></td>
-								<td><a href="$rel_path_to_root/backend/content/write/<ste:escape>$comment[article]</ste:escape>"><ste:escape>$comment[article]</ste:escape></a></td>
-							</tr>
-						</ste:foreach>
-					</ste:then>
-					<ste:else>
-						<tr><td colspan="8" style="text-align: center"><em><ste:get_translation for="no_comments" /></em></td></tr>
-					</ste:else>
-				</ste:if>
-			</tbody>
-		</table>
-		<div>
-			<select name="action_on_comments">
-				<option value="" selected="selected"></option>
-				<option value="mark_read"><ste:get_translation for="commentaction_mark_read" /></option>
-				<option value="mark_unread"><ste:get_translation for="commentaction_mark_unread" /></option>
-				<option value="make_visible"><ste:get_translation for="commentaction_make_visible" /></option>
-				<option value="make_invisible"><ste:get_translation for="commentaction_make_invisible" /></option>
-				<option value="delete"><ste:get_translation for="delete" /></option>
-			</select>
-			<input type="submit" />
-		</div>
-	</form>
+	<div id="commentstable">
+		<form action="$rel_path_to_root/backend/content/comments" method="get" accept-charset="UTF-8">
+			<div>
+				<strong><ste:get_translation for="filter" />:</strong>
+				<ste:get_translation for="filter_article" /> <input type="text" name="filter_article" value="<ste:escape>$filter_article</ste:escape>" />
+				<input type="hidden" name="sort_$sorting[dir]" value="$sorting[by]" />
+				<input type="submit" />
+			</div>
+		</form>
+		
+		<form action="$rel_path_to_root/backend/content/comments?$filterquery?{$filterquery|&|}$sortquery" method="post">
+			<table class="fullwidth listtab">
+				<thead>
+					<tr>
+						<th>&nbsp;</th>
+						<th>
+							<ste:get_translation for="was_read" />
+							<a href="$rel_path_to_root/backend/content/comments??{$filterquery|${filterquery}&|}sort_asc=was_read"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_up_?{$sort_asc_was_read|filled|outline}.png" alt="<ste:get_translation for='sort_asc' />" /></a>
+							<a href="$rel_path_to_root/backend/content/comments??{$filterquery|${filterquery}&|}sort_desc=was_read"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_down_?{$sort_desc_was_read|filled|outline}.png" alt="<ste:get_translation for='sort_desc' />" /></a>
+						</th>
+						<th><ste:get_translation for="visible" /></th>
+						<th><ste:get_translation for="comment_excerpt" /></th>
+						<th>
+							<ste:get_translation for="language" />
+							<a href="$rel_path_to_root/backend/content/comments??{$filterquery|${filterquery}&|}sort_asc=language"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_up_?{$sort_asc_language|filled|outline}.png" alt="<ste:get_translation for='sort_asc' />" /></a>
+							<a href="$rel_path_to_root/backend/content/comments??{$filterquery|${filterquery}&|}sort_desc=language"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_down_?{$sort_desc_language|filled|outline}.png" alt="<ste:get_translation for='sort_desc' />" /></a>
+						</th>
+						<th><ste:get_translation for="author" /></th>
+						<th>
+							<ste:get_translation for="date_time" />
+							<a href="$rel_path_to_root/backend/content/comments??{$filterquery|${filterquery}&|}sort_asc=date"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_up_?{$sort_asc_date|filled|outline}.png" alt="<ste:get_translation for='sort_asc' />" /></a>
+							<a href="$rel_path_to_root/backend/content/comments??{$filterquery|${filterquery}&|}sort_desc=date"><img src="$rel_path_to_root/ratatoeskr/cms_style/images/sortarrow_down_?{$sort_desc_date|filled|outline}.png" alt="<ste:get_translation for='sort_desc' />" /></a>
+						</th>
+						<th><ste:get_translation for="article" /></th>
+					</tr>
+				</thead>
+				<tbody>
+					<ste:set var="comments_n"><ste:arraylen array="comments" /></ste:set>
+					<ste:if>~{$comments_n|gt|0}
+						<ste:then>
+							<ste:foreach array="comments" value="comment">
+								<tr>
+									<td><input type="checkbox" name="comment_multiselect[]" value="$comment[id]" /></td>
+									<td>?{$comment[read_by_admin]|<ste:get_translation for="yes" />|<strong><ste:get_translation for="no" /></strong>}</td>
+									<td>?{$comment[visible]|<ste:get_translation for="yes" />|<ste:get_translation for="no" />}</td>
+									<td><em><ste:escape>$comment[excerpt]</ste:escape>...</em> <a href="$rel_path_to_root/backend/content/comments/$comment[id]"><ste:get_translation for="read_more" /></a></td>
+									<td>$comment[language]</td>
+									<td><ste:escape>$comment[author]</ste:escape></td>
+									<td><ste:date timestamp="$comment[date]">%Y-%m-%d %H:%M:%S</ste:date></td>
+									<td><a href="$rel_path_to_root/backend/content/write/<ste:escape>$comment[article]</ste:escape>"><ste:escape>$comment[article]</ste:escape></a></td>
+								</tr>
+							</ste:foreach>
+						</ste:then>
+						<ste:else>
+							<tr><td colspan="8" style="text-align: center"><em><ste:get_translation for="no_comments" /></em></td></tr>
+						</ste:else>
+					</ste:if>
+				</tbody>
+			</table>
+			<div>
+				<select name="action_on_comments">
+					<option value="" selected="selected"></option>
+					<option value="mark_read"><ste:get_translation for="commentaction_mark_read" /></option>
+					<option value="mark_unread"><ste:get_translation for="commentaction_mark_unread" /></option>
+					<option value="make_visible"><ste:get_translation for="commentaction_make_visible" /></option>
+					<option value="make_invisible"><ste:get_translation for="commentaction_make_invisible" /></option>
+					<option value="delete"><ste:get_translation for="delete" /></option>
+				</select>
+				<input type="submit" />
+			</div>
+		</form>
+	</div>
 </ste:block>