sweeter styles, collapse toggle +/-

Author: mixmix

build/client.js

@@ -3551,6 +3551,7 @@ function toggleStitches(evt) {
 function toggleCollapse(evt) {
   var sectionHandle = evt.target.parentNode.attributes['data-url'].value
 
+  dom('.stitch-mark[data-url="'+sectionHandle+'"] .collapser').toggleClass('has-plus')
   dom('.stitch-mark[data-url="'+sectionHandle+'"] .content').toggleClass('hidden')
 }
 
@@ -3643,7 +3644,7 @@ function plainSubstitute (url, importedText, wholeText) {
 function stitchSubstitute (treeNode, wholeText) {
   var regex = new RegExp('\\+\<a href\=(\'|\")' + treeNode.url + '.*\<\/a\>', 'g')
   var importedText = "<div class='stitch-mark visible' data-url='" + treeNode.url + "'>" + 
-                        "<button class='collapser'>+</button>" +
+                        "<button class='collapser has-plus'></button>" +
                         "<div class='content expanded'>" + treeNode.content + "</div>" +
                         "<div class='content collapsed hidden'>" + treeNode.label + "</div>" +
                      "</div>"

index.html

@@ -12,7 +12,7 @@
         <h1>hypermarkdown</h1>
       </div>
       <div class='container controls'>
-        <button class='toggle-stitches active'>hide stitches</button>
+        <button class='toggle-stitches active'>toggle stitches</button>
       </div>
       <div class='container target'>
         <div id='loading' >

source/client.js

@@ -59,6 +59,7 @@ function toggleStitches(evt) {
 function toggleCollapse(evt) {
   var sectionHandle = evt.target.parentNode.attributes['data-url'].value
 
+  dom('.stitch-mark[data-url="'+sectionHandle+'"] .collapser').toggleClass('has-plus')
   dom('.stitch-mark[data-url="'+sectionHandle+'"] .content').toggleClass('hidden')
 }
 

styles.css

@@ -15,12 +15,12 @@ h1 {
 
 .stitch-mark div.content h1:nth-child(1) { 
   padding-top: 0;
-  margin-top: 0;
+  margin-top: 10px;
 }
 
 .stitch-mark div.content h2:nth-child(1) { 
   padding-top: 0;
-  margin-top: 0;
+  margin-top: 10px;
 }
 
 a { 
@@ -71,6 +71,13 @@ main {
   position: absolute;
 }
 
+button.collapser::after { 
+  content: '-';
+}
+button.collapser.has-plus::after { 
+  content: '+';
+}
+
 .container.target {
   min-height: 1000px;
   margin-bottom: 30px;

treeToHtml.js

@@ -54,7 +54,7 @@ function plainSubstitute (url, importedText, wholeText) {
 function stitchSubstitute (treeNode, wholeText) {
   var regex = new RegExp('\\+\<a href\=(\'|\")' + treeNode.url + '.*\<\/a\>', 'g')
   var importedText = "<div class='stitch-mark visible' data-url='" + treeNode.url + "'>" + 
-                        "<button class='collapser'>+</button>" +
+                        "<button class='collapser has-plus'></button>" +
                         "<div class='content expanded'>" + treeNode.content + "</div>" +
                         "<div class='content collapsed hidden'>" + treeNode.label + "</div>" +
                      "</div>"