upload pagination prototype
results listing pagination is a form now 48x48 is the new standard icon size git-svn-id: http://yolanda.mister-muffin.de/svn@352 7eef14d0-6ed0-489d-bf55-20463b2d70db
This commit is contained in:
parent
9642cf2bba
commit
50245bcb25
13 changed files with 323 additions and 62 deletions
BIN
trunk/images/tango/48x48/actions/document-send.png
Normal file
BIN
trunk/images/tango/48x48/actions/document-send.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.9 KiB |
BIN
trunk/images/tango/48x48/actions/go-first.png
Normal file
BIN
trunk/images/tango/48x48/actions/go-first.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.2 KiB |
BIN
trunk/images/tango/48x48/actions/go-last.png
Normal file
BIN
trunk/images/tango/48x48/actions/go-last.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.3 KiB |
BIN
trunk/images/tango/48x48/actions/go-next.png
Normal file
BIN
trunk/images/tango/48x48/actions/go-next.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.1 KiB |
BIN
trunk/images/tango/48x48/actions/go-previous.png
Normal file
BIN
trunk/images/tango/48x48/actions/go-previous.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.1 KiB |
|
@ -76,6 +76,13 @@ fieldset,
|
|||
border-color: #555753;
|
||||
}
|
||||
|
||||
ul#queries
|
||||
{
|
||||
margin-bottom: 0.5em;
|
||||
margin-left: 2em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
/* TODO: make images configurable (maybe via symlinks?) */
|
||||
li#search_custom_one
|
||||
{
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
@import "reset.css";
|
||||
@import "colors/tango.css";
|
||||
|
||||
body
|
||||
|
|
|
@ -4,9 +4,10 @@ Eric Meyers reset stylesheet, stolen from
|
|||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
/*h1, h2, h3, h4, h5, h6,*/
|
||||
p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, font, img, ins, kbd, q, s, samp,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
|
|
|
@ -101,10 +101,21 @@ fieldset
|
|||
|
||||
/* forms */
|
||||
|
||||
button[name="upload"]
|
||||
form.pagination
|
||||
{
|
||||
width: 164px;
|
||||
height: 164px;
|
||||
/*
|
||||
works with Firefox 2 (for demonstration purposes only)
|
||||
=== REMOVE THIS IN FINAL BUILD ===
|
||||
*/
|
||||
display: -moz-inline-box;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
form.pagination fieldset
|
||||
{
|
||||
border-width: 0px !important;
|
||||
margin: 0px !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
|
|
|
@ -36,9 +36,7 @@
|
|||
|
||||
<xsl:call-template name="results-listing"/>
|
||||
|
||||
<xsl:if test="//results/@lastpage > 1">
|
||||
<xsl:call-template name="pagination-arrows"/>
|
||||
</xsl:if>
|
||||
|
||||
</fieldset>
|
||||
|
||||
|
@ -89,59 +87,153 @@
|
|||
</xsl:template>
|
||||
|
||||
<xsl:template name="pagination-arrows">
|
||||
<xsl:variable name="query_string" select="concat($site_strings[@id='path_results'], //results/@query, '&pagesize=', //results/@pagesize)" />
|
||||
|
||||
<div>
|
||||
<a>
|
||||
<xsl:attribute name="href">
|
||||
<xsl:value-of select="concat($query_string, '&page=1')" />
|
||||
</xsl:attribute>
|
||||
<xsl:if test="//results/@currentpage<=1">
|
||||
<xsl:attribute name="style">
|
||||
visibility: hidden;
|
||||
</xsl:attribute>
|
||||
</xsl:if>
|
||||
<img src="./images/tango/go-first.png" />
|
||||
</a>
|
||||
<a>
|
||||
<xsl:attribute name="href">
|
||||
<xsl:value-of select="concat($query_string, '&page=', //results/@currentpage - 1)" />
|
||||
</xsl:attribute>
|
||||
<xsl:if test="//results/@currentpage<=1">
|
||||
<xsl:attribute name="style">
|
||||
visibility: hidden;
|
||||
</xsl:attribute>
|
||||
</xsl:if>
|
||||
<img src="./images/tango/go-previous.png" />
|
||||
</a>
|
||||
|
||||
<!-- divitis, this div is not necessary -->
|
||||
<div class="page-number">
|
||||
<form class="pagination" method="get" enctype="application/x-www-form-urlencoded">
|
||||
<xsl:attribute name="action">
|
||||
<xsl:value-of select="$site_strings[@id='path_search']" />
|
||||
</xsl:attribute>
|
||||
|
||||
<fieldset>
|
||||
|
||||
<input type="hidden" name="query">
|
||||
<xsl:attribute name="value">
|
||||
<xsl:value-of select="/page/results/@query" />
|
||||
</xsl:attribute>
|
||||
</input>
|
||||
<input type="hidden" name="page">
|
||||
<xsl:attribute name="value">1</xsl:attribute>
|
||||
</input>
|
||||
<input type="hidden" name="pagesize">
|
||||
<xsl:attribute name="value">
|
||||
<xsl:value-of select="/page/results/@pagesize" />
|
||||
</xsl:attribute>
|
||||
</input>
|
||||
<button>
|
||||
<xsl:if test="//results/@currentpage<=1">
|
||||
<xsl:attribute name="disabled">
|
||||
disabled
|
||||
</xsl:attribute>
|
||||
</xsl:if>
|
||||
<img src="/images/tango/48x48/actions/go-first.png" />
|
||||
</button>
|
||||
|
||||
</fieldset>
|
||||
|
||||
</form>
|
||||
|
||||
<form class="pagination" method="get" enctype="application/x-www-form-urlencoded">
|
||||
<xsl:attribute name="action">
|
||||
<xsl:value-of select="$site_strings[@id='path_search']" />
|
||||
</xsl:attribute>
|
||||
|
||||
<fieldset>
|
||||
|
||||
<input type="hidden" name="query">
|
||||
<xsl:attribute name="value">
|
||||
<xsl:value-of select="/page/results/@query" />
|
||||
</xsl:attribute>
|
||||
</input>
|
||||
<input type="hidden" name="page">
|
||||
<xsl:attribute name="value">
|
||||
<xsl:value-of select="/page/results/@currentpage - 1" />
|
||||
</xsl:attribute>
|
||||
</input>
|
||||
<input type="hidden" name="pagesize">
|
||||
<xsl:attribute name="value">
|
||||
<xsl:value-of select="/page/results/@pagesize" />
|
||||
</xsl:attribute>
|
||||
</input>
|
||||
<button>
|
||||
<xsl:if test="//results/@currentpage<=1">
|
||||
<xsl:attribute name="disabled">
|
||||
disabled
|
||||
</xsl:attribute>
|
||||
</xsl:if>
|
||||
<img src="/images/tango/48x48/actions/go-previous.png" />
|
||||
</button>
|
||||
|
||||
</fieldset>
|
||||
|
||||
</form>
|
||||
|
||||
<form class="pagination" method="get" enctype="application/x-www-form-urlencoded">
|
||||
<xsl:attribute name="action">
|
||||
<xsl:value-of select="$site_strings[@id='path_search']" />
|
||||
</xsl:attribute>
|
||||
|
||||
<fieldset>
|
||||
|
||||
<input type="hidden" name="query">
|
||||
<xsl:attribute name="value">
|
||||
<xsl:value-of select="/page/results/@query" />
|
||||
</xsl:attribute>
|
||||
</input>
|
||||
<input type="hidden" name="page">
|
||||
<xsl:attribute name="value">
|
||||
<xsl:value-of select="/page/results/@currentpage + 1" />
|
||||
</xsl:attribute>
|
||||
</input>
|
||||
<input type="hidden" name="pagesize">
|
||||
<xsl:attribute name="value">
|
||||
<xsl:value-of select="/page/results/@pagesize" />
|
||||
</xsl:attribute>
|
||||
</input>
|
||||
<button>
|
||||
<xsl:if test="//results/@lastpage<=//results/@currentpage">
|
||||
<xsl:attribute name="disabled">
|
||||
disabled
|
||||
</xsl:attribute>
|
||||
</xsl:if>
|
||||
<img src="/images/tango/48x48/actions/go-next.png" />
|
||||
</button>
|
||||
|
||||
</fieldset>
|
||||
|
||||
</form>
|
||||
|
||||
<form class="pagination" method="get" enctype="application/x-www-form-urlencoded">
|
||||
<xsl:attribute name="action">
|
||||
<xsl:value-of select="$site_strings[@id='path_search']" />
|
||||
</xsl:attribute>
|
||||
|
||||
<fieldset>
|
||||
|
||||
<input type="hidden" name="query">
|
||||
<xsl:attribute name="value">
|
||||
<xsl:value-of select="/page/results/@query" />
|
||||
</xsl:attribute>
|
||||
</input>
|
||||
<input type="hidden" name="page">
|
||||
<xsl:attribute name="value">
|
||||
<xsl:value-of select="/page/results/@lastpage" />
|
||||
</xsl:attribute>
|
||||
</input>
|
||||
<input type="hidden" name="pagesize">
|
||||
<xsl:attribute name="value">
|
||||
<xsl:value-of select="/page/results/@pagesize" />
|
||||
</xsl:attribute>
|
||||
</input>
|
||||
<button>
|
||||
<xsl:if test="//results/@lastpage<=//results/@currentpage">
|
||||
<xsl:attribute name="disabled">
|
||||
disabled
|
||||
</xsl:attribute>
|
||||
</xsl:if>
|
||||
<img src="/images/tango/48x48/actions/go-last.png" />
|
||||
</button>
|
||||
|
||||
</fieldset>
|
||||
|
||||
</form>
|
||||
|
||||
<br />
|
||||
|
||||
<xsl:value-of select="//results/@currentpage" />
|
||||
|
||||
</div>
|
||||
|
||||
<a>
|
||||
<xsl:attribute name="href">
|
||||
<xsl:value-of select="concat($query_string, '&page=', //results/@currentpage + 1)" />
|
||||
</xsl:attribute>
|
||||
<xsl:if test="//results/@lastpage<=//results/@currentpage">
|
||||
<xsl:attribute name="style">
|
||||
visibility: hidden;
|
||||
</xsl:attribute>
|
||||
</xsl:if>
|
||||
<img src="./images/tango/go-next.png" />
|
||||
</a>
|
||||
<a>
|
||||
<xsl:attribute name="href">
|
||||
<xsl:value-of select="concat($query_string, '&page=', //results/@lastpage)" />
|
||||
</xsl:attribute>
|
||||
<xsl:if test="//results/@lastpage<=//results/@currentpage">
|
||||
<xsl:attribute name="style">
|
||||
visibility: hidden;
|
||||
</xsl:attribute>
|
||||
</xsl:if>
|
||||
<img src="./images/tango/go-last.png" />
|
||||
</a>
|
||||
</div>
|
||||
</xsl:template>
|
||||
|
||||
</xsl:stylesheet>
|
||||
|
|
|
@ -23,8 +23,8 @@
|
|||
|
||||
<input type="text" name="query">
|
||||
<xsl:attribute name="value">
|
||||
<xsl:if test="//results/@argument='query'">
|
||||
<xsl:value-of select="//results/@value" />
|
||||
<xsl:if test="/page/results/@query">
|
||||
<xsl:value-of select="/page/results/@query" />
|
||||
</xsl:if>
|
||||
</xsl:attribute>
|
||||
</input>
|
||||
|
|
|
@ -11,6 +11,127 @@
|
|||
>
|
||||
<xsl:template name="uploadform">
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
<!--
|
||||
this looks awfully ugly, but nevertheless generates javascript inside _valid_ XHTML
|
||||
kudos to toby white who details the solution on http://scispace.net/tow21/weblog/718.html
|
||||
-->
|
||||
|
||||
<xsl:text disable-output-escaping="yes"><![CDATA[
|
||||
<![CDATA[
|
||||
|
||||
// stupid and quick hack, paging information should be provided via xforms
|
||||
|
||||
function show_page_1()
|
||||
{
|
||||
document.getElementById('data').parentNode.style.display = 'none';
|
||||
|
||||
document.getElementById('dcterms:abstract').parentNode.style.display = 'block';
|
||||
document.getElementById('dcterms:alternative').parentNode.style.display = 'block';
|
||||
document.getElementById('dcterms:created').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:creator').parentNode.style.display = 'block';
|
||||
document.getElementById('dcterms:contributor').parentNode.style.display = 'block';
|
||||
document.getElementById('dcterms:hasFormat').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:hasPart').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:isFormatOf').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:isPartOf').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:language').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:license').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:references').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:replaces').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:rightsHolder').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:source').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:spatial').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:subject').parentNode.style.display = 'block';
|
||||
document.getElementById('dcterms:temporal').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:title').parentNode.style.display = 'block';
|
||||
|
||||
document.getElementById('commercial').parentNode.parentNode.style.display = 'none';
|
||||
document.getElementById('remix').parentNode.parentNode.style.display = 'none';
|
||||
|
||||
document.getElementById('next').removeAttribute('disabled');
|
||||
document.getElementById('next').setAttribute('onclick', 'show_page_2()');
|
||||
document.getElementById('previous').removeAttribute('onclick');
|
||||
document.getElementById('previous').setAttribute('disabled', 'disabled');
|
||||
|
||||
document.getElementById('upload').setAttribute('disabled', 'disabled');
|
||||
}
|
||||
|
||||
function show_page_2()
|
||||
{
|
||||
document.getElementById('data').parentNode.style.display = 'none';
|
||||
|
||||
document.getElementById('dcterms:abstract').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:alternative').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:created').parentNode.style.display = 'block';
|
||||
document.getElementById('dcterms:creator').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:contributor').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:hasFormat').parentNode.style.display = 'block';
|
||||
document.getElementById('dcterms:hasPart').parentNode.style.display = 'block';
|
||||
document.getElementById('dcterms:isFormatOf').parentNode.style.display = 'block';
|
||||
document.getElementById('dcterms:isPartOf').parentNode.style.display = 'block';
|
||||
document.getElementById('dcterms:language').parentNode.style.display = 'block';
|
||||
document.getElementById('dcterms:license').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:references').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:replaces').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:rightsHolder').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:source').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:spatial').parentNode.style.display = 'block';
|
||||
document.getElementById('dcterms:subject').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:temporal').parentNode.style.display = 'block';
|
||||
document.getElementById('dcterms:title').parentNode.style.display = 'none';
|
||||
|
||||
document.getElementById('commercial').parentNode.parentNode.style.display = 'none';
|
||||
document.getElementById('remix').parentNode.parentNode.style.display = 'none';
|
||||
|
||||
document.getElementById('next').removeAttribute('disabled');
|
||||
document.getElementById('next').setAttribute('onclick', 'show_page_3()');
|
||||
document.getElementById('previous').removeAttribute('disabled');
|
||||
document.getElementById('previous').setAttribute('onclick', 'show_page_1()');
|
||||
|
||||
document.getElementById('upload').setAttribute('disabled', 'disabled');
|
||||
}
|
||||
|
||||
function show_page_3()
|
||||
{
|
||||
document.getElementById('data').parentNode.style.display = 'none';
|
||||
|
||||
document.getElementById('dcterms:abstract').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:alternative').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:created').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:creator').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:contributor').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:hasFormat').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:hasPart').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:isFormatOf').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:isPartOf').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:language').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:license').parentNode.style.display = 'block';
|
||||
document.getElementById('dcterms:references').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:replaces').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:rightsHolder').parentNode.style.display = 'block';
|
||||
document.getElementById('dcterms:source').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:spatial').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:subject').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:temporal').parentNode.style.display = 'none';
|
||||
document.getElementById('dcterms:title').parentNode.style.display = 'none';
|
||||
|
||||
document.getElementById('commercial').parentNode.parentNode.style.display = 'block';
|
||||
document.getElementById('remix').parentNode.parentNode.style.display = 'block';
|
||||
|
||||
document.getElementById('next').removeAttribute('onclick');
|
||||
document.getElementById('next').setAttribute('disabled', 'disabled');
|
||||
document.getElementById('previous').removeAttribute('disabled');
|
||||
document.getElementById('previous').setAttribute('onclick', 'show_page_2()');
|
||||
|
||||
document.getElementById('upload').removeAttribute('disabled');
|
||||
}
|
||||
|
||||
]]]]></xsl:text>
|
||||
<xsl:text disable-output-escaping="yes">></xsl:text>
|
||||
</script>
|
||||
|
||||
<form method="post">
|
||||
|
||||
<xsl:attribute name="action">
|
||||
|
@ -192,11 +313,33 @@
|
|||
|
||||
<br />
|
||||
|
||||
<button name="upload" type="submit">
|
||||
<button disabled="disabled" id="previous" type="button" >
|
||||
<xsl:attribute name="value">
|
||||
<xsl:value-of select="$lang_strings[@id='button_next_page']" />
|
||||
</xsl:attribute>
|
||||
<img src="/images/tango/128x128/actions/document-send.png">
|
||||
<img src="/images/tango/48x48/actions/go-previous.png">
|
||||
<xsl:attribute name="alt">
|
||||
<xsl:value-of select="$lang_strings[@id='button_upload_send_file']" />
|
||||
</xsl:attribute>
|
||||
</img>
|
||||
</button>
|
||||
|
||||
<button disabled="disabled" id="next" type="button" >
|
||||
<xsl:attribute name="value">
|
||||
<xsl:value-of select="$lang_strings[@id='button_next_page']" />
|
||||
</xsl:attribute>
|
||||
<img src="/images/tango/48x48/actions/go-next.png">
|
||||
<xsl:attribute name="alt">
|
||||
<xsl:value-of select="$lang_strings[@id='button_upload_send_file']" />
|
||||
</xsl:attribute>
|
||||
</img>
|
||||
</button>
|
||||
|
||||
<button id="upload" type="submit">
|
||||
<xsl:attribute name="value">
|
||||
<!-- <xsl:value-of select="$lang_strings[@id='button_next_page']" />-->
|
||||
</xsl:attribute>
|
||||
<img src="/images/tango/48x48/actions/document-send.png">
|
||||
<xsl:attribute name="alt">
|
||||
<xsl:value-of select="$lang_strings[@id='button_upload_send_file']" />
|
||||
</xsl:attribute>
|
||||
|
|
|
@ -20,6 +20,12 @@
|
|||
</xsl:attribute>
|
||||
</xsl:if>
|
||||
|
||||
<xsl:if test="/page/xforms:instance">
|
||||
<xsl:attribute name="onload">
|
||||
show_page_1()
|
||||
</xsl:attribute>
|
||||
</xsl:if>
|
||||
|
||||
<xsl:call-template name="header"/>
|
||||
|
||||
<xsl:call-template name="searchbar" />
|
||||
|
@ -42,15 +48,15 @@
|
|||
<xsl:call-template name="results"/>
|
||||
</xsl:when>
|
||||
|
||||
<xsl:when test="//page/video">
|
||||
<xsl:when test="/page/video">
|
||||
<xsl:call-template name="video"/>
|
||||
</xsl:when>
|
||||
|
||||
<xsl:when test="//page/results">
|
||||
<xsl:when test="/page/results">
|
||||
<xsl:call-template name="results"/>
|
||||
</xsl:when>
|
||||
|
||||
<xsl:when test="//page/xforms:instance">
|
||||
<xsl:when test="/page/xforms:instance">
|
||||
<xsl:call-template name="uploadform"/>
|
||||
</xsl:when>
|
||||
|
||||
|
|
Loading…
Reference in a new issue