Item10247: attachments table (sorting), documentation

git-svn-id: http://svn.foswiki.org/trunk/BaseSkin@12440 0b4bb1d4-4e5a-0410-9cc4-b2b747904278

data/System/BaseSkinAttachtablesTemplate.txt

@@ -1,35 +1,45 @@
 %{<verbatim class="tml">
 ===================================================
-Base Skin topic template
-The attachtables template defines how attachments are displayed:
-- on the topic page
-- on the attachment screen
+	Base Skin topic template
+
+	The attachtables template defines how attachments are displayed:
+		- on the topic page
+		- on the attachment screen
 ===================================================
 }%%{
 ---------------------------------------------------
-Top table row definition for topic attachments and top table in attach screen
+	Top table row definition for topic attachments and top table in attach screen
 ---------------------------------------------------
 }%%TMPL:DEF{ATTACH:files:header(toprow)}%<div class='foswikiToolHeader'>
-%MAKETEXT{"Sort on:"}% <a href='#' class='foswikiSort' data-sort="data-file">%MAKETEXT{"Name"}%</a> <a href='#' class='foswikiSort' data-sort="data-size">%MAKETEXT{"Size"}%</a> <a href='#' class='foswikiSort' data-sort="data-ext">%MAKETEXT{"Extension"}%</a> <a href='#' class='foswikiSort' data-sort="data-user">%MAKETEXT{"User"}%</a>
+<select class='foswikiSort'>
+	<option value="data-file">%MAKETEXT{"Ordered by name"}%</option>
+	<option value="data-date">%MAKETEXT{"Ordered by date"}%</option>
+	<option value="data-size">%MAKETEXT{"Ordered by size"}%</option>
+	<option value="data-ext">%MAKETEXT{"Ordered by kind"}%</option>
+	<option value="data-user">%MAKETEXT{"Ordered by user"}%</option>
+</select>
 <ul class='foswikiToolButtonRow'>
 	<li>
+		<span>manage</span>
+<!--
 		<a href="%SCRIPTURLPATH{"attach"}%/%WEB%/%TOPIC%" class="jqButton">Attach new file</a>
+-->
 	</li>
 </ul>
 </div>%TMPL:END%%{
 ---------------------------------------------------
-Header definition for topic attachments and top table in attach screen
+	Header definition for topic attachments and top table in attach screen
 ---------------------------------------------------
 }%%TMPL:DEF{ATTACH:files:header(basic)}%<div class="foswikiAttachments foswikiSearchResults">
 %TMPL:P{ATTACH:files:header(toprow)}%<ul>%TMPL:END%%{
 ---------------------------------------------------
-A basic row definition, for attachment table and attach screen
-Use %A_URL% instead of %PUBURLPATH%/%WEB%/%TOPIC%/%A_FILE% to get a viewfile link
+	A basic row definition, for attachment table and attach screen
+	Use %A_URL% instead of %PUBURLPATH%/%WEB%/%TOPIC%/%A_FILE% to get a viewfile link
 ---------------------------------------------------
 }%%TMPL:DEF{ATTACH:files:row(basic)}%<li class="foswikiAttachment foswikiSearchResult" data-size="%A_FILESIZE%" data-ext="%A_EXT%" data-user="%A_USER%" data-file="%A_EFILE%" data-date="%A_EPOCH%" data-rev="%A_REV%" data-comment="<literal>%A_COMMENT%</literal>">
 	<ul>
 		<li class='foswikiAction'>
-			<a href="%SCRIPTURLPATH{"attach"}%/%WEB%/%TOPIC%?filename=%ENCODE{"%A_FILE%"}%;revInfo=1" class="foswikiUnvisited" title="%MAKETEXT{"change, update, previous revisions, move, delete..."}%" rel="nofollow">%MAKETEXT{"manage"}%</a>
+			<a href="%SCRIPTURLPATH{"attach"}%/%WEB%/%TOPIC%?filename=%ENCODE{"%A_FILE%"}%;revInfo=1" class="foswikiUnvisited" title="%MAKETEXT{"change, update, previous revisions, move, delete..."}%" rel="nofollow">&rarr;</a>
 		</li><li>
 			%A_ICON%
 		</li><li class='foswikiSearchResultContents'>
@@ -42,47 +52,47 @@ Use %A_URL% instead of %PUBURLPATH%/%WEB%/%TOPIC%/%A_FILE% to get a viewfile lin
 	</ul>
 </li>%TMPL:END%%{
 ---------------------------------------------------
-Header for topic attachment table
+	Header for topic attachment table
 ---------------------------------------------------
 }%%TMPL:DEF{ATTACH:files:header}%<div class="foswikiLarge">Attachments on this topic</div>
 %TMPL:P{ATTACH:files:header(basic)}%
 %TMPL:END%%{
 ---------------------------------------------------
-Row for topic attachment table
+	Row for topic attachment table
 ---------------------------------------------------
 }%%TMPL:DEF{ATTACH:files:row}%%TMPL:P{ATTACH:files:row(basic)}%
 %TMPL:END%%{
 ---------------------------------------------------
-Footer for topic attachment table
+	Footer for topic attachment table
 ---------------------------------------------------
 }%%TMPL:DEF{ATTACH:files:footer}%</ul></div>%TMPL:END%%{
 ---------------------------------------------------
-Header for table at top of attach screen
+	Header for table at top of attach screen
 ---------------------------------------------------
 }%%TMPL:DEF{ATTACH:files:header:A}%%TMPL:P{ATTACH:files:header(basic)}% *%MAKETEXT{"Attribute"}%* |
 %TMPL:END%%{
 ---------------------------------------------------
-Row for table at top of attach screen
+	Row for table at top of attach screen
 ---------------------------------------------------
 }%%TMPL:DEF{ATTACH:files:row:A}%%TMPL:P{ATTACH:files:row(basic)}%  %A_ATTRS% |
 %TMPL:END%%{
 ---------------------------------------------------
-Footer for table at top of attach screen
+	Footer for table at top of attach screen
 ---------------------------------------------------
 }%%TMPL:DEF{ATTACH:files:footer:A}%</div>%TMPL:END%%{
 ---------------------------------------------------
-Header for versions table in attach screen
+	Header for versions table in attach screen
 ---------------------------------------------------
 }%%TMPL:DEF{ATTACH:versions:header}%|  *%MAKETEXT{"Version"}%*  |  *%MAKETEXT{"Action"}%*   |  *%MAKETEXT{"Date"}%*  |  *%MAKETEXT{"Who"}%*  |  *%MAKETEXT{"Comment"}%*  |
 %TMPL:END%%{
 ---------------------------------------------------
-Row for versions table in attach screen
-Use %A_URL% instead of %PUBURLPATH%/%WEB%/%TOPIC%/%A_FILE% to get a viewfile link
+	Row for versions table in attach screen
+	Use %A_URL% instead of %PUBURLPATH%/%WEB%/%TOPIC%/%A_FILE% to get a viewfile link
 ---------------------------------------------------
 }%%TMPL:DEF{ATTACH:versions:row}%| %A_REV%  | <a href="%SCRIPTURL{viewfile}%/%WEB%/%TOPIC%?filename=%ENCODE{%A_FILE%}%;rev=%A_REV%">%MAKETEXT{"view"}%</a>  |  <span class="foswikiNoBreak">%A_DATE%</span>|%A_USER%  |%A_COMMENT%  |
 %TMPL:END%%{
 ---------------------------------------------------
-Footer for versions table in attach screen
+	Footer for versions table in attach screen
 ---------------------------------------------------
 }%%TMPL:DEF{ATTACH:versions:footer}%%TMPL:END%%{
 ===================================================

data/System/BaseSkinCommonTemplate.txt

@@ -1,15 +1,16 @@
 %{<verbatim class="tml">
 ===================================================
-Base Skin topic template
-The common template contains definitions used in multiple templates.
+	Base Skin topic template
+
+	The common template does nothing in itself, but contains definitions that are handy to share between other templates.
 ===================================================
 }%%{
 ---------------------------------------------------
-Macro for including JavaScript files from system paths
-Takes as arguments:
-- id
-- file url, must NOT include .css extension
-- requires
+	Macro for including JavaScript files from system paths
+	Takes as arguments:
+		- id
+		- file url, must NOT include .css extension
+		- requires
 ---------------------------------------------------
 }%
 %TMPL:DEF{"LIBJS"}%%ADDTOZONE{
@@ -19,27 +20,27 @@ Takes as arguments:
 	requires="%requires%"
 }%%TMPL:END%%{
 ---------------------------------------------------
-Macro for including CSS files from *system* paths
-Takes as arguments:
-- id
-- file url, must NOT include .css extension
-- requires
+	Macro for including CSS files from *system* paths
+	Takes as arguments:
+		- id
+		- file url, must NOT include .css extension
+		- requires
 ---------------------------------------------------
 }%%TMPL:DEF{"LIBCSS"}%%ADDTOZONE{
-	"head"
+	"head-base"
 	id="%id%"
 	text="<link rel='stylesheet' href='%PUBURLPATH%/%SYSTEMWEB%/%id%%FWSRC%.css' />"
 	requires="%requires%"
 }%%TMPL:END%%{
 ---------------------------------------------------
-Macro for including CSS files from other paths
-Takes as arguments:
-- id
-- file url, must include .css extension
-- requires
+	Macro for including CSS files from other paths
+	Takes as arguments:
+		- id
+		- file url, must include .css extension
+		- requires
 ---------------------------------------------------
 }%%TMPL:DEF{"CSS"}%%ADDTOZONE{
-	"head"
+	"head-base"
 	id="%id%"
 	text="$percntFORMAT{
 		\"%url%\"

data/System/BaseSkinDocumentTemplate.txt

@@ -1,7 +1,10 @@
 %{<verbatim class="tml">
 ===================================================
-Base Skin topic template
-The document template defines the structure of the html document and should be included by all script topic templates.
+	Base Skin topic template
+
+	This is the most top level template; it only includes 'common' for handy definitions.
+
+	The document template defines the structure of the html document and should be included by all script topic templates.
 ===================================================
 }%%TMPL:INCLUDE{"common"}%%{
 ---------------------------------------------------
@@ -13,16 +16,20 @@ The document template defines the structure of the html document and should be i
 %TMPL:P{"htmlend"}%%TMPL:END%%{
 	HTML5 doctype
 }%%TMPL:DEF{"htmldoctype"}%<!DOCTYPE html>%TMPL:END%%{
+---------------------------------------------------
 	HTML5 root element
 	Add class "no-js" for Modernizr script
+---------------------------------------------------
 }%%TMPL:DEF{"htmlstart"}%<html lang="%LANG%" class="no-js">%TMPL:END%
 %TMPL:DEF{"htmlend"}%</html>%TMPL:END%%{
 ---------------------------------------------------
 }%%TMPL:DEF{"head"}%<head>
 %TMPL:P{"head:windowtitle"}%
 %TMPL:P{"head:meta"}%%TMPL:P{"head:script"}%%TMPL:P{"head:css"}%%{
 	Render head css and js after all TMPL:DEFs are read
-}%%RENDERZONE{"head"}%%RENDERZONE{"script"}%</head>%TMPL:END%%{
+}%%RENDERZONE{"head"}%%{
+	Render base skin CSS files after all other CSS files
+}%%RENDERZONE{"head-base"}%%RENDERZONE{"script"}%</head>%TMPL:END%%{
 ---------------------------------------------------
 }%%TMPL:DEF{"body"}%<body class="%TMPL:P{"body:class"}%">
 %TMPL:P{"page"}%
@@ -35,8 +42,8 @@ The document template defines the structure of the html document and should be i
 %TMPL:P{"content"}%
 </section>%TMPL:END%%{
 ---------------------------------------------------
-}%%{
 	TODO: add more meta macros for author, keywords, dublincore (see natskin)
+---------------------------------------------------
 }%%TMPL:DEF{"head:meta"}%%TMPL:P{context="edit" then="head:meta:ie8compatibilitymode"}%<meta charset="%CHARSET%" /><meta name="robots" content="noindex" />%HTTP_EQUIV_ON_VIEW%
 <link rel="icon" href="%FAVICON%" type="image/x-icon" />
 <link rel="shortcut icon" href="%FAVICON%" />
@@ -47,13 +54,10 @@ The document template defines the structure of the html document and should be i
 }%
 <base href="%SCRIPTURL{%SCRIPTNAME%}%/%WEB%/%TOPIC%" /><!--[if IE]></base><![endif]-->%TMPL:END%%{
 ---------------------------------------------------
-}%%{
 	Default Base Skin javascripts.
 
 	Modernizr script (http://www.modernizr.com/) to enable the use of html5 elements in older browsers.
 	Modernizr runs through a little loop in JavaScript to enable the various elements from HTML5 (as well as abbr) for styling in Internet Explorer. Note that this does not mean it suddenly makes IE support the Audio or Video element, it just means that you can use section instead of div and style them in CSS.
-
-}%%{
 ---------------------------------------------------
 }%%TMPL:DEF{"head:script"}%%TMPL:P{
 	"LIBJS"
@@ -63,8 +67,8 @@ The document template defines the structure of the html document and should be i
 ---------------------------------------------------
 }%%TMPL:DEF{"head:css"}%%TMPL:END%%{
 ---------------------------------------------------
-}%%{
 	Item2476: Put IE8 into compatibility mode to work around slow, erratic textarea
+---------------------------------------------------
 }%%TMPL:DEF{"head:meta:ie8compatibilitymode"}%%IF{"$EDIT_FORCE_IE8_COMPATIBILITYMODE='on'" then="<meta http-equiv=\"X-UA-Compatible\" content=\"IE=EmulateIE7\"/>"}%%TMPL:END%%{
 ---------------------------------------------------
 }%%TMPL:DEF{"head:meta:description"}%%TOPIC%%TMPL:END%%{
@@ -73,12 +77,12 @@ The document template defines the structure of the html document and should be i
 ---------------------------------------------------
 }%%TMPL:DEF{"head:windowtitle"}%<title>%TMPL:P{"titleaction"}% <nop>%BASETOPIC%%TMPL:P{"head:windowtitle:separator"}%%BASEWEB%%TMPL:P{"head:windowtitle:separator"}%<nop>%WIKITOOLNAME%</title>%TMPL:END%%{
 ---------------------------------------------------
-}%%{
 	Allow other templates to easy add body class names. These should make sure that class 'foswikiNoJs' is always written.
+---------------------------------------------------
 }%%TMPL:DEF{"body:class"}%foswikiNoJs%TMPL:END%%{
 ---------------------------------------------------
-}%%{
 	Render the document
+---------------------------------------------------
 }%%TMPL:P{"document"}%%{
 ===================================================
 </verbatim>}%

data/System/BaseSkinFormtablesTemplate.txt

@@ -1,14 +1,15 @@
 %{<verbatim class="tml">
 ===================================================
-Base Skin topic template
-The formtables template defines how data forms are displayed:
-- on the topic page
-- on the edit screen
-- on the preview screen
+	Base Skin topic template
+
+	The formtables template defines how data forms are displayed:
+		- on the topic page
+		- on the edit screen
+		- on the preview screen
 ===================================================
 }%%{
 ---------------------------------------------------
-Header definition for topic attachments and top table in attach screen
+	Header definition for topic attachments and top table in attach screen
 ---------------------------------------------------
 }%%TMPL:DEF{FORM:display:header}%
 <div class="foswikiForm">
@@ -18,20 +19,20 @@ Header definition for topic attachments and top table in attach screen
 }%
 <table class='foswikiTable foswikiFormTable' border='1' summary='%MAKETEXT{"Form data"}%'>%TMPL:END%%{
 ---------------------------------------------------
-Each row
+	Each row
 ---------------------------------------------------
 }%%TMPL:DEF{FORM:display:row}%%IF{"context preview" then="<noautolink>"}%<tr valign='top'><td class='foswikiFormTableRow foswikiFirstCol' align='right'> %A_TITLE%</td><td> %A_VALUE% </td></tr>%IF{"context preview" then="</noautolink>"}%%TMPL:END%%{
 ---------------------------------------------------
-Footer
+	Footer
 ---------------------------------------------------
 }%%TMPL:DEF{FORM:display:footer}%</table></div>%TMPL:END%%{
 ---------------------------------------------------
-Title link in header
+	Title link in header
 ---------------------------------------------------
 }%%TMPL:DEF{FORM:display:header:titlelink}%<div class='foswikiRight'><a href='%SCRIPTURL{edit}%/%WEB%/%TOPIC%?t=%GMTIME{$epoch}%;action=form' class='foswikiButton'>%MAKETEXT{"Edit form data"}%</a></div>
 <div class='foswikiLarge foswikiUnvisited'><noautolink>%A_TITLE%</noautolink></div>%TMPL:END%%{
 ---------------------------------------------------
-Title name in header
+	Title name in header
 ---------------------------------------------------
 }%%TMPL:DEF{FORM:display:header:titlename}%<noautolink><h3>%A_TITLE%</h3></noautolink>%TMPL:END%%{
 ===================================================

data/System/BaseSkinTestPage.txt

@@ -22,9 +22,13 @@ text
 <h6>Heading 6</h6> 
 
 text
+
 <h2 id="paragraph">A very very very very very very very very very very very very very very very very very very very very very very very very long header</h2> 
-<p>Lorem ipsum dolor sit amet, <a href="#" title="test link">test link</a> adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p> 
-<p>Lorem ipsum dolor sit amet, <em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p> 
+
+Lorem ipsum dolor sit amet, <a href="#" title="test link">test link</a> adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
+
+Lorem ipsum dolor sit amet, <em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
+
 <h2 id="list_types">List Types</h2> 
 
 <h3>Definition List</h3> 
@@ -143,7 +147,6 @@ Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. No
 Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. 
 </div>
 
-
 ---++ Text sizes
 
 Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal 
@@ -157,11 +160,6 @@ Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. No
 <span class="foswikiAlert">Alert text.</span>
 
 
----++ foswikiNotification
-<div class="foswikiNotification">
-Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. N
-</div>
-
 ---++ Blockquote
 <blockquote>
 Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text.
@@ -317,8 +315,16 @@ class="simple"
 ---+++ foswikiBroadcastMessage
 <div class="foswikiBroadcastMessage"> <strong>NOTE:</strong> Edit and Attach will be disabled today between 05:00 PM and 06:00 PM PDT (00:00 to 01:00 GMT) for a scheduled Foswiki maintenance.</div>
 
----+++ foswikiNotification
-<div class="foswikiNotification">This is a notification.</div>
+---++ foswikiNotification
+<div class="foswikiNotification">
+Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. N
+</div>
+
+text before 
+<div class="foswikiNotification">
+Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. Normal text. 
+</div>
+text after
 
 ---+++ foswikiMessage
 <span class="foswikiMessage">This is a message.</span>
@@ -346,7 +352,6 @@ class="simple"
 	<div class="foswikiClear"></div>
 </div>
 
-
 ---+++ JQuery Tabs
 %META:FORM{name="UserForm"}%
 %META:FIELD{name="FirstName" attributes="M" title="FirstName" value="Test"}%