Editor refinements.

web/bjcp-styleguide.css

 
 styleguide { 
   font-family: Helvetica, Arial, Geneva, sans-serif;
-/*
-  font-size: 8pt;
-*/
 }
 
 styleguide chapter table {
-/*
-  font-size: 8pt;
-*/
 }
 
 styleguide p.list-item {
@@ -17,9 +11,6 @@ styleguide p.list-item {
 }
 
 styleguide category, styleguide subcategory {
-/*
-  font-size: 9pt;
-*/
   margin-top:1em;
   margin-bottom:1em;
   margin-left:0em;
@@ -51,9 +42,6 @@ styleguide name {
   margin-bottom:1em;
 }
 styleguide description {
-/*
-  font-size: 8pt;
-*/
   margin-left:1em;
   display: block;
 }
@@ -121,9 +109,6 @@ styleguide strength-classifications {
   position: relative;
   margin-left: 1em;
   display: block;
-/*
-  font-size: 8pt;
-*/
 }
 styleguide overall-impression:before,
 styleguide aroma:before,
@@ -167,3 +152,64 @@ styleguide specs div * {
   width: 9em;
 }
 
+
+
+
+styleguide category:before, styleguide subcategory:before {
+    white-space: pre;
+    content: "    " attr(id);
+}
+
+styleguide name {
+    display: inline-block;
+    margin-bottom:1em;
+}
+
+styleguide chapter, styleguide category, styleguide subcategory {
+    margin-top:1em;
+    margin-bottom:1em;
+    margin-left:0em;
+    display: block;
+}
+styleguide category.collapsed, styleguide subcategory.collapsed {
+    height: 1em;
+    overflow: hidden;
+}
+styleguide chapter.collapsed {
+    height: 2em;
+    overflow: hidden;
+    padding: 0px;
+}
+styleguide category.collapsed subcategory, styleguide subcategory.collapsed subcategory {
+    display: none;
+}
+
+styleguide name {
+    margin-left:1em;
+}
+
+styleguide h2 {
+    margin: 0px 1em;
+    font-size: 110%;
+}
+
+styleguide nav {
+    display:inline-block;
+    position: absolute;
+    left:5px;
+    overflow: hidden;
+    margin-left:0em;
+    width:20px;
+    height:18px;
+    transform: rotate(0deg);
+    transition: -webkit-transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
+    transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
+    background-position: center;
+    background-size: 0.75rem auto;
+    background-repeat: no-repeat;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 320 512%27%3E%3Cpath fill=%27%23003f57%27 d=%27M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z%27/%3E%3C/svg%3E");
+}
+
+styleguide chapter.collapsed nav, styleguide category.collapsed nav, styleguide subcategory.collapsed nav {
+    transform: rotate(-90deg);
+}

web/edit.css

@@ -18,6 +18,8 @@ div#editor {
   font-family: Helvetica, Arial, Geneva, sans-serif;
 }
 div#editor-inner {
+    background-color: white;
+    pointer-events: all;
   text-align: left;
   margin: 50 auto;
   padding: 5px;
@@ -43,3 +45,9 @@ div#original {
 *[orig='true'] {
   display:none;
 }
+
+.fade {
+    background-color: rgba(0.5,0.5,0.5,0.6);
+    pointer-events: none;
+}
+

web/edit.js

 
+const body = document.getElementsByTagName("body")[0];
 const editor = document.getElementById("editor");
 const pell = window.pell;
 const pelleditor = document.getElementById("pelleditor");
@@ -111,12 +112,14 @@ function doedit(elem) {
 	render.innerHTML = elem.innerHTML;
     }
     editor.style.display = "block";
+    body.classList.add("fade");
     pelleditor.content.focus();
     
 }
 
 function docancel() {
     editor.style.display = "none";
+    body.classList.remove("fade");
 }
 
 function dosave() {
@@ -138,6 +141,7 @@ function dosave() {
     xhr.onreadystatechange = function() {
 	if (xhr.readyState === 4) {
 	    editor.style.display = "none";
+	    body.classList.remove("fade");
 	    editelem.innerHTML = x;
 	}
     }
@@ -149,3 +153,34 @@ function dosave() {
     xhr.send(x);
 
 }
+
+
+
+
+var l = document.querySelectorAll("chapter, category, subcategory");
+for (var i = 0; i < l.length; i++) {
+
+    nav = document.createElement("nav");
+    l[i].insertBefore(nav, l[i].childNodes[0]);
+    
+    nav.addEventListener("dblclick", function() {
+	if (this.parentNode.classList.contains("collapsed")) {
+	    var l = document.querySelectorAll("category, subcategory");
+	    for (var i = 0; i < l.length; i++) {
+		l[i].classList.remove("collapsed");
+	    }
+	} else {
+	    var l = document.querySelectorAll("category, subcategory");
+	    for (var i = 0; i < l.length; i++) {
+		l[i].classList.add("collapsed");
+	    }
+	}
+    });
+
+    l[i].classList.add("collapsed");
+    
+    nav.addEventListener("click", function() {
+	this.parentNode.classList.toggle("collapsed");
+    });
+}
+

xsl/bjcp-2015-styleguide-html.xsl

@@ -47,7 +47,7 @@
 	    <div id="editor-inner">
 	      <p>Editing <span id="editstyleid">-</span> "<span id="editstylename">-</span>", element: <span id="editelemname">-</span>, last change: <span id="lastdate">-</span> by <span id="lastauthor">-</span></p>
 	      <div id="original">-</div>
-	      <p>Your Author ID: <input type="text" name="author" id="author" /></p>
+	      <p>Your short name (e.g. from hobbybrauer): <input type="text" name="author" id="author" /></p>
 	      <div id="pelleditor"> </div>
 	      <!--
 	      <p>Markup:</p>