pmwiki-utils.js: add sortable tables

git-svn-id: svn://pmwiki.org/pmwiki/trunk@3503 524c5546-5005-0410-9a3e-e25e191bd360

3 files changed, 52 insertions, 5 deletions

diff --git a/pub/skins/pmwiki-responsive/README b/pub/skins/pmwiki-responsive/README
index b72a60b3..c64c1ca3 100644
--- a/pub/skins/pmwiki-responsive/README
+++ b/pub/skins/pmwiki-responsive/README
@@ -1,8 +1,8 @@
 This directory contains the files to display pages in PmWiki according
 to the default "responsive" layout, adaptive for large and small screens.
 
-Note that currently this layout is "experimental". It requires 
-relatively recent mobile and desktop browsers (post-2010).
+Note that currently this layout is "beta". It requires relatively recent
+mobile and desktop browsers (post-2010).
 
 ==>Don't edit these files directly, as you may lose your edits the
 next time you upgrade PmWiki!
@@ -19,6 +19,7 @@ The files in this directory:
     skin.tmpl   -- the default template for page layouts
     skin.css    -- PmWiki's default css
     skin.php    -- some template functions
+    skin.js     -- some template functions (browser)
     *.svg       -- icons
 
 Note, the default PmWiki logo is in the "pmwiki" template directory.
diff --git a/pub/skins/pmwiki-responsive/skin.css b/pub/skins/pmwiki-responsive/skin.css
index 611030fb..1c328c9d 100644
--- a/pub/skins/pmwiki-responsive/skin.css
+++ b/pub/skins/pmwiki-responsive/skin.css
@@ -1,6 +1,6 @@
 /***********************************************************************
 **  skin.css
-**  Copyright 2016-2018 Petko Yotov www.pmwiki.org/petko
+**  Copyright 2016-2019 Petko Yotov www.pmwiki.org/petko
 **  
 **  Partially based on pmwiki.css:
 **  Copyright 2004-2006 Patrick R. Michaud pmichaud@pobox.com
@@ -321,6 +321,52 @@ td.top,    th.top    { vertical-align: top;}
 td.bottom, th.bottom { vertical-align: bottom;}
 td.middle, th.middle { vertical-align: middle;}
 
+.noPmTOC {display:none;}
+.PmTOCdiv { display: inline-block; font-size: 13px;}
+.PmTOCdiv a { text-decoration: none;}
+.back-arrow {font-size: .9em; text-decoration: none;}
+#PmTOCchk + label {cursor: pointer;}
+#PmTOCchk {display: none;}
+#PmTOCchk:not(:checked) + label > .show {display: none;}
+#PmTOCchk:checked + label > .hide {display: none;}
+#PmTOCchk:checked + label + div {display: none;}
+
+table.simpletable {
+  border-collapse: collapse;
+}
+table.simpletable tr:nth-child(odd) {
+  background-color: #eee;
+}
+table.simpletable th {
+  background-color: #ccc;
+}
+table.simpletable th, table.simpletable td {
+  border: 1px solid #888;
+}
+
+table.sortable th {
+  cursor: pointer;
+}
+
+table.sortable th:hover::after {
+  color: inherit;
+  content: "\00A0\025B8";
+}
+
+table.sortable th::after {
+  color: transparent;
+  content: "\00A0\025B8";
+}
+
+table.sortable th.dir-d::after {
+  color: inherit;
+  content: "\00A0\025BE";
+}
+
+table.sortable th.dir-u::after {
+  color: inherit;
+  content: "\00A0\025B4";
+}
 
 @media screen and (min-width:50em) {
   html, body, #bodywrap {
diff --git a/pub/skins/pmwiki-responsive/skin.php b/pub/skins/pmwiki-responsive/skin.php
index b58cd6cd..bdb388b8 100644
--- a/pub/skins/pmwiki-responsive/skin.php
+++ b/pub/skins/pmwiki-responsive/skin.php
@@ -1,7 +1,7 @@
 <?php if (!defined('PmWiki')) exit();
 /***********************************************************************
 **  skin.php
-**  Copyright 2016-2017 Petko Yotov www.pmwiki.org/petko
+**  Copyright 2016-2019 Petko Yotov www.pmwiki.org/petko
 **  
 **  This file is part of PmWiki; you can redistribute it and/or modify
 **  it under the terms of the GNU General Public License as published
@@ -14,7 +14,7 @@ global $HTMLStylesFmt, $SkinElementsPages, $DefaultSkinElements, $TableCellAlign
   $SearchBoxInputType, $WrapSkinSections, $HideTemplateSections, $EnableTableAttrToStyles;
 
 # Disable inline styles injected by the PmWiki core (we provide these styles in skin.css)
-$styles = explode(' ', 'pmwiki rtl-ltr wikistyles markup simuledit diff urlapprove vardoc');
+$styles = explode(' ', 'pmwiki rtl-ltr wikistyles markup simuledit diff urlapprove vardoc PmSortable PmTOC');
 foreach($styles as $style) $HTMLStylesFmt[$style] = '';
 
 # CSS alignment for table cells (valid HTML5)