Author: apfelmaennchen
Date: 2008-03-16 22:44:20 +0100 (Sun, 16 Mar 2008)
New Revision: 4572
Added:
trunk/htroot/yacy/ui/css/jquery.pagination.css
trunk/htroot/yacy/ui/js/jquery.pagination.js
Modified:
trunk/htroot/yacy/ui/index.html
trunk/htroot/yacy/ui/result.html
trunk/htroot/yacy/ui/ritem.html
Log:
added server side driven pagination for search tabs
Added: trunk/htroot/yacy/ui/css/jquery.pagination.css
===================================================================
--- trunk/htroot/yacy/ui/css/jquery.pagination.css 2008-03-16 15:13:12 UTC
(rev 4571)
+++ trunk/htroot/yacy/ui/css/jquery.pagination.css 2008-03-16 21:44:20 UTC
(rev 4572)
@@ -0,0 +1,31 @@
+.pagination {
+ font-size: 1em;
+ margin-left: 26px;
+ margin-top: 25px;
+}
+
+.pagination a {
+ text-decoration: none;
+ border: solid 1px #AAE;
+ color: #15B;
+}
+
+.pagination a, .pagination span {
+ display: block;
+ float: left;
+ padding: 0.3em 0.5em;
+ margin-right: 5px;
+ margin-bottom: 5px;
+}
+
+.pagination .current {
+ background: #26B;
+ color: #fff;
+ border: solid 1px #AAE;
+}
+
+.pagination .current.prev, .pagination .current.next{
+ color:#999;
+ border-color:#999;
+ background:#fff;
+}
Modified: trunk/htroot/yacy/ui/index.html
===================================================================
--- trunk/htroot/yacy/ui/index.html 2008-03-16 15:13:12 UTC (rev 4571)
+++ trunk/htroot/yacy/ui/index.html 2008-03-16 21:44:20 UTC (rev 4572)
@@ -9,7 +9,8 @@
<link media="screen" type="text/css" href="css/base.css" rel="stylesheet">
<link media="screen" type="text/css" href="css/ui.tabs.css" rel="stylesheet">
- <link media="screen" type="text/css" href="css/jquery.tablesorter.pager.css"
rel="stylesheet">
+ <link media="screen" type="text/css" href="css/jquery.tablesorter.pager.css"
rel="stylesheet">
+ <link media="screen" type="text/css" href="css/jquery.pagination.css"
rel="stylesheet">
<script src="js/jquery-1.2.3.min.js" type="text/javascript"></script>
<script src="js/jquery.tablesorter.min.js" type="text/javascript"></script>
@@ -18,9 +19,12 @@
<script src="js/jquery.metadata.min.js" type="text/javascript"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>
<script src="js/jquery.field.min.js" type="text/javascript"></script>
+ <script src="js/jquery.pagination.js" type="text/javascript"></script>
<script src="js/ui.tabs.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
+
+ /* Initialize Tabs and set up close function */
var $tabs = $('#container ul').tabs()
.bind('add.ui-tabs', function(e, ui) {
var li = $(ui.tab).parents('li:eq(0)')[0];
@@ -29,7 +33,14 @@
$tabs.tabs('remove', $('li', $tabs).index(li));
});
});
- insert_sidebar();
+
+ /* Insert Sidebar */
+ $('<div id="pager" class="boxed"></div>').appendTo('#sidebar')
+ $("#pager").load("sidebar/sidebar_pager.html");
+ $('<div id="example" class="boxed"></div>').appendTo('#sidebar')
+ $("#example").load("sidebar/sidebar.html");
+
+ /* Load Search Result into new Tab */
$('#searchbox').submit(function() {
var tabnr = $('#container > ul').tabs('length');
var result = "result.html?" +
$('#searchbox').formSerialize();
@@ -39,11 +50,7 @@
$tabs.tabs('select',tabnr);
return false;
});
- });
- function insert_sidebar() {
- $('<div id="pager" class="boxed"></div>').appendTo('#sidebar')
- $("#pager").load("sidebar/sidebar_pager.html");
- }
+ });
</script>
</head>
@@ -75,9 +82,9 @@
<label for="video">Video</label>
<input
type="radio" id="appl" name="contentdom" value="app"/>
<label for="appl">Applications</label>
- </div>
+ </div>
<input
type="hidden" name="former" value="" />
- <input
type="hidden" name="count" value="3" />
+ <input
type="hidden" name="count" value="15" />
<input
type="hidden" name="offset" value="0" />
<input
type="hidden" name="resource" value="global" />
<input
type="hidden" name="urlmaskfilter" value=".*" />
Added: trunk/htroot/yacy/ui/js/jquery.pagination.js
===================================================================
--- trunk/htroot/yacy/ui/js/jquery.pagination.js 2008-03-16 15:13:12 UTC
(rev 4571)
+++ trunk/htroot/yacy/ui/js/jquery.pagination.js 2008-03-16 21:44:20 UTC
(rev 4572)
@@ -0,0 +1,166 @@
+/**
+ * This jQuery plugin displays pagination links inside the selected elements.
+ *
+ * @author Gabriel Birke (birke *at* d-scribe *dot* de)
+ * @version 1.1
+ * @param {int} maxentries Number of entries to paginate
+ * @param {Object} opts Several options (see README for documentation)
+ * @return {Object} jQuery Object
+ */
+jQuery.fn.pagination = function(maxentries, opts){
+ opts = jQuery.extend({
+ items_per_page:10,
+ num_display_entries:10,
+ current_page:0,
+ num_edge_entries:0,
+ link_to:"#",
+ prev_text:"Prev",
+ next_text:"Next",
+ ellipse_text:"...",
+ prev_show_always:true,
+ next_show_always:true,
+ callback:function(){return false;}
+ },opts||{});
+
+ return this.each(function() {
+ /**
+ * Calculate the maximum number of pages
+ */
+ function numPages() {
+ return Math.ceil(maxentries/opts.items_per_page);
+ }
+
+ /**
+ * Calculate start and end point of pagination links depending
on
+ * current_page and num_display_entries.
+ * @return {Array}
+ */
+ function getInterval() {
+ var ne_half = Math.ceil(opts.num_display_entries/2);
+ var np = numPages();
+ var upper_limit = np-opts.num_display_entries;
+ var start =
current_page>ne_half?Math.max(Math.min(current_page-ne_half, upper_limit), 0):0;
+ var end =
current_page>ne_half?Math.min(current_page+ne_half,
np):Math.min(opts.num_display_entries, np);
+ return [start,end];
+ }
+
+ /**
+ * This is the event handling function for the pagination
links.
+ * @param {int} page_id The new page number
+ */
+ function pageSelected(page_id, evt){
+ current_page = page_id;
+ drawLinks();
+ var continuePropagation = opts.callback(page_id, panel);
+ if (!continuePropagation) {
+ if (evt.stopPropagation) {
+ evt.stopPropagation();
+ }
+ else {
+ evt.cancelBubble = true;
+ }
+ }
+ return continuePropagation;
+ }
+
+ /**
+ * This function inserts the pagination links into the
container element
+ */
+ function drawLinks() {
+ panel.empty();
+ var interval = getInterval();
+ var np = numPages();
+ // This helper function returns a handler function that
calls pageSelected with the right page_id
+ var getClickHandler = function(page_id) {
+ return function(evt){ return
pageSelected(page_id,evt); }
+ }
+ // Helper function for generating a single link (or a
span tag if it'S the current page)
+ var appendItem = function(page_id, appendopts){
+ page_id =
page_id<0?0:(page_id<np?page_id:np-1); // Normalize page id to sane value
+ appendopts = jQuery.extend({text:page_id+1,
classes:""}, appendopts||{});
+ if(page_id == current_page){
+ var lnk = $("<span
class='current'>"+(appendopts.text)+"</span>");
+ }
+ else
+ {
+ var lnk =
$("<a>"+(appendopts.text)+"</a>")
+ .bind("click",
getClickHandler(page_id))
+ .attr('href',
opts.link_to.replace(/__id__/,page_id));
+
+
+ }
+
if(appendopts.classes){lnk.addClass(appendopts.classes);}
+ panel.append(lnk);
+ }
+ // Generate "Previous"-Link
+ if(opts.prev_text && (current_page > 0 ||
opts.prev_show_always)){
+ appendItem(current_page-1,{text:opts.prev_text,
classes:"prev"});
+ }
+ // Generate starting points
+ if (interval[0] > 0 && opts.num_edge_entries > 0)
+ {
+ var end = Math.min(opts.num_edge_entries,
interval[0]);
+ for(var i=0; i<end; i++) {
+ appendItem(i);
+ }
+ if(opts.num_edge_entries < interval[0] &&
opts.ellipse_text)
+ {
+
jQuery("<span>"+opts.ellipse_text+"</span>").appendTo(panel);
+ }
+ }
+ // Generate interval links
+ for(var i=interval[0]; i<interval[1]; i++) {
+ appendItem(i);
+ }
+ // Generate ending points
+ if (interval[1] < np && opts.num_edge_entries > 0)
+ {
+ if(np-opts.num_edge_entries > interval[1]&&
opts.ellipse_text)
+ {
+
jQuery("<span>"+opts.ellipse_text+"</span>").appendTo(panel);
+ }
+ var begin = Math.max(np-opts.num_edge_entries,
interval[1]);
+ for(var i=begin; i<np; i++) {
+ appendItem(i);
+ }
+
+ }
+ // Generate "Next"-Link
+ if(opts.next_text && (current_page < np-1 ||
opts.next_show_always)){
+ appendItem(current_page+1,{text:opts.next_text,
classes:"next"});
+ }
+ }
+
+ // Extract current_page from options
+ var current_page = opts.current_page;
+ // Create a sane value for maxentries and items_per_page
+ maxentries = (!maxentries || maxentries < 0)?1:maxentries;
+ opts.items_per_page = (!opts.items_per_page ||
opts.items_per_page < 0)?1:opts.items_per_page;
+ // Store DOM element for easy access from all inner functions
+ var panel = jQuery(this);
+ // Attach control functions to the DOM element
+ this.selectPage = function(page_id){ pageSelected(page_id);}
+ this.prevPage = function(){
+ if (current_page > 0) {
+ pageSelected(current_page - 1);
+ return true;
+ }
+ else {
+ return false;
+ }
+ }
+ this.nextPage = function(){
+ if(current_page < numPages()-1) {
+ pageSelected(current_page+1);
+ return true;
+ }
+ else {
+ return false;
+ }
+ }
+ // When all initialisation is done, draw the links
+ drawLinks();
+ });
+}
+
+
Modified: trunk/htroot/yacy/ui/result.html
===================================================================
--- trunk/htroot/yacy/ui/result.html 2008-03-16 15:13:12 UTC (rev 4571)
+++ trunk/htroot/yacy/ui/result.html 2008-03-16 21:44:20 UTC (rev 4572)
@@ -1,4 +1,64 @@
+#(input)#
+ ::
+ <script type="text/javascript">
+ $(function() {
+ $("[EMAIL
PROTECTED]'search']").setValue("#[former]#");
+ $("[EMAIL
PROTECTED]'contentdom']").setValue("#[contentdom]#");
+ $("[EMAIL PROTECTED]'former']").setValue("#[former]#");
+ $("[EMAIL PROTECTED]'count']").setValue("#[count]#");
+ $("[EMAIL PROTECTED]'offset']").setValue("#[offset]#");
+ $("[EMAIL
PROTECTED]'resource']").setValue("#[resource]#");
+ $("[EMAIL
PROTECTED]'urlmaskfilter']").setValue("#[urlmaskfilter]#");
+ $("[EMAIL
PROTECTED]'prefermaskfilter']").setValue("#[prefermaskfilter]#");
+ $("[EMAIL PROTECTED]'depth']").setValue("#[depth]#");
+ $("[EMAIL PROTECTED]'cat']").setValue("#[cat]#");
+ $("[EMAIL PROTECTED]'type']").setValue("#[type]#");
+ $("[EMAIL
PROTECTED]'display']").setValue("#[display]#");
+ $("[EMAIL PROTECTED]'input']").setValue("#[input]#");
+ $("[EMAIL
PROTECTED]'constraint']").setValue("#[constraint]#");
+ });
+ </script>
+ ::
+#(/input)#
+<!-- type the number of results -->
+#(num-results)#
+ ::
+ <p>No Results.</p>
+ ::
+ <p>No Results. (length of search words must be at least 3
characters)</p>
+ ::
+ <script type="text/javascript">
+ $(function() {
+ var totalcount = #[totalcount]#;
+ var size = $("[EMAIL PROTECTED]'count']").getValue();
+ var offset = $("[EMAIL PROTECTED]'offset']").getValue();
+ if (offset != 0) {
+ var page = ((offset-1)/size);
+ } else {
+ var page = 0;
+ }
+ $("#pagination").pagination(totalcount, {
+ current_page:page,
+ items_per_page:size,
+ num_edge_entries:2,
+ num_display_entries:10,
+ callback: loadContents
+ });
+ });
+ function loadContents(page_id, jq) {
+ var count = $("[EMAIL PROTECTED]'count']").getValue();
+ var offset = ((page_id*count)+1);
+ $("[EMAIL PROTECTED]'offset']").setValue(offset);
+ var result = "result.html?" +
$('#searchbox').formSerialize();
+ var selected = $('#container
ul').data('selected.ui-tabs');
+ $('#container ul').tabs('url', selected, result);
+ $('#container ul').tabs('load', selected);
+ }
+ </script>
+ ::
+#(/num-results)#
<div id="#[ID]#"></div>
+<div id="pagination" class="pagination">[Pagination]</div>
<!-- linklist begin -->
#(resultTable)#::<table width="100%"><tr class="TableHeader"><td
width="30%">Media</td><td width="70%">URL</tr>#(/resultTable)#
#{results}#
@@ -8,7 +68,8 @@
$.get("/yacy/ui/ritem.html?rss=false&item=#[item]#&eventID=#[eventID]#",
function(html) {
$(id).append(html);
$(id).trigger("update");
- });
+ });
+ return false;
});
</script>
#{/results}#
@@ -20,4 +81,3 @@
-
Modified: trunk/htroot/yacy/ui/ritem.html
===================================================================
--- trunk/htroot/yacy/ui/ritem.html 2008-03-16 15:13:12 UTC (rev 4571)
+++ trunk/htroot/yacy/ui/ritem.html 2008-03-16 21:44:20 UTC (rev 4572)
@@ -1,11 +1,11 @@
#(content)#::
- <div class="searchresults">
- <h3 class="linktitle">
- <img src="../../ViewImage.png?width=16&height=16&code=#[faviconCode]#"
id="f#[urlhash]#" class="favicon" width="16" height="16" alt="" />
- <a href="#[url]#" target="_parent">#[description]#</a></h3>
- <p class="snippet">#[snippet]#</p>
- <p class="url"><a href="#[url]#" id="url#[urlhash]#"
target="_parent">#[urlname]#</a></p>
- </div>
+ <div class="searchresults">
+ <h3 class="linktitle">
+ <img
src="../../ViewImage.png?width=16&height=16&code=#[faviconCode]#"
id="f#[urlhash]#" class="favicon" width="16" height="16" alt="" />
+ <a href="#[url]#"
target="_parent">#[description]#</a></h3>
+ <p class="snippet">#[snippet]#</p>
+ <p class="url"><a href="#[url]#" id="url#[urlhash]#"
target="_parent">#[urlname]#</a></p>
+ </div>
::
#{items}#
<div class="thumbcontainer">
_______________________________________________
YaCy-svn mailing list
YaCy-svn@lists.berlios.de
https://lists.berlios.de/mailman/listinfo/yacy-svn
