Add expander triangles besides rationale headers.

3 files changed, 61 insertions, 6 deletions

diff --git a/doc/templates/magic.js b/doc/templates/magic.js
index 69a0af64..113832b0 100644
--- a/doc/templates/magic.js
+++ b/doc/templates/magic.js
@@ -1,16 +1,47 @@
+/*
+ * magic.js — makes rationales in the HTML-ified spec collapsible.
+ *
+ * Copyright © 2010 Collabora Ltd.
+ * Copyright © 2010 Nokia Corporation.
+ *
+ * This library is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; either version 2.1 of the License, or (at
+ * your option) any later version.
+ *
+ * This library is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this library; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
+ *
+ * Author: Will Thompson <will.thompson@collabora.co.uk>
+ */
+
 $(document).ready(main);
 
+function toggleRationale() {
+  /* Slide the rationale body open or closed */
+  $(this).next().slideToggle();
+
+  /* Rotate the triangle */
+  $(this).children('span.ui-icon').toggleClass(
+    'ui-icon-triangle-1-s ui-icon-triangle-1-e');
+}
+
 function main() {
   h5s = $('.rationale h5')
 
   /* Un-hide the rationale headers */
   h5s.css('display', 'block');
 
-  /* Hide all the rationales... */
+  /* Add a "collapsed" triangle beside all the headers, and collapse them all.
+   */
+  h5s.prepend("<span class='ui-icon ui-icon-triangle-1-e'/>");
   h5s.next().hide();
 
-  /* ...and then make clicking the headers unhide them. */
-  h5s.click(function () {
-    $(this).next().slideToggle();
-  });
+  h5s.click(toggleRationale);
 }
diff --git a/doc/templates/style.css b/doc/templates/style.css
index 29a4cc19..c99b332c 100644
--- a/doc/templates/style.css
+++ b/doc/templates/style.css
@@ -228,8 +228,32 @@ div.rationale h5 {
         /* And all this only matters if the script has un-hidden us. */
         margin: 0;
         padding: 2px;
+        text-height: 12px;
         cursor: pointer;
-        text-decoration: underline;
+}
+
+/* The class names used for the expander icons, and the technique of using a
+ * fixed-size background image, offset into a grid of icons, is pinched from
+ * jQuery-UI, along with the icon grid itself. But I only use a 10×10 square
+ * out of the 16×16 icons, and didn't use their CSS, because jQuery-UI was
+ * overkill here.
+ */
+span.ui-icon {
+        text-decoration: none;
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        margin-right: 0.5em;
+        background-image: url(ui-icons_222222_256x240.png);
+        background-repeat: no-repeat;
+}
+
+span.ui-icon-triangle-1-e {
+        background-position:-35px -19px;
+}
+
+span.ui-icon-triangle-1-s {
+        background-position:-67px -19px;
 }
 
 span.permalink {
diff --git a/doc/templates/ui-icons_222222_256x240.png b/doc/templates/ui-icons_222222_256x240.png
new file mode 100644
index 00000000..b273ff11
--- /dev/null
+++ b/doc/templates/ui-icons_222222_256x240.png