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

trunk/style/colors/tango.css

@@ -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
     {

trunk/style/embedded.css

@@ -1,3 +1,4 @@
+@import "reset.css";
 @import "colors/tango.css";
 
 body

trunk/style/reset.css

@@ -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,

trunk/style/structure/fake6.css

@@ -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"],

trunk/xsl/xhtml/results.xsl

@@ -36,9 +36,7 @@
 
             <xsl:call-template name="results-listing"/>
 
-            <xsl:if test="//results/@lastpage &gt; 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, '&amp;pagesize=', //results/@pagesize)" />
+
     <div>
-        <a>
-            <xsl:attribute name="href">
-                <xsl:value-of select="concat($query_string, '&amp;page=1')" />
-            </xsl:attribute>
-            <xsl:if test="//results/@currentpage&lt;=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, '&amp;page=', //results/@currentpage - 1)" />
-            </xsl:attribute>
-            <xsl:if test="//results/@currentpage&lt;=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 -->
+        <form class="pagination" method="get" enctype="application/x-www-form-urlencoded">
-        <div class="page-number">
+            <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&lt;=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&lt;=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&lt;=//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&lt;=//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, '&amp;page=', //results/@currentpage + 1)" />
-            </xsl:attribute>
-            <xsl:if test="//results/@lastpage&lt;=//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, '&amp;page=', //results/@lastpage)" />
-            </xsl:attribute>
-            <xsl:if test="//results/@lastpage&lt;=//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>

trunk/xsl/xhtml/searchbar.xsl

@@ -23,8 +23,8 @@
 
             <input type="text" name="query">
                 <xsl:attribute name="value">
-                    <xsl:if test="//results/@argument='query'">
+                    <xsl:if test="/page/results/@query">
-                        <xsl:value-of select="//results/@value" />
+                        <xsl:value-of select="/page/results/@query" />
                     </xsl:if>
                 </xsl:attribute>
             </input>

trunk/xsl/xhtml/upload.xsl

@@ -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">&lt;![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>

trunk/xsl/xhtml/xhtml-body.xsl

@@ -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>