From 5145148fc5daf2e380231f339a31df42a4cbf23a Mon Sep 17 00:00:00 2001
From: Frank Steinberg <steinberg@ibr.cs.tu-bs.de>
Date: Fri, 25 Oct 2019 11:08:03 +0200
Subject: [PATCH] I do hate CSS.
---
README.md | 4 +-
glossary-en-de.csv | 1 +
web/edit.css | 16 +++--
web/edit.html | 2 +
web/edit.js | 92 ++++++++-----------------
web/pell.js | 3 +-
web/show.css | 59 +++++++++-------
web/show.js | 7 ++
xsl/bjcp-2015-styleguide-doc-to-xml.xsl | 4 +-
9 files changed, 87 insertions(+), 101 deletions(-)
diff --git a/README.md b/README.md
index 0a8284e..e573085 100644
--- a/README.md
+++ b/README.md
@@ -129,4 +129,6 @@ See the LICENSE file. Note that this license relates only to the content of this
- Maybe, some keyboard control?
- Support editing "p" (not only in "description"), "li", "td".
- Better rendering of specs with text content, e.g. 33A.
-- navigate by tags?
+- Navigate by: tags, commercial examples, specs
+- Handling IDs correctly in editor and when saving.
+- modifying parts of whole document addressed by getPathTo().
diff --git a/glossary-en-de.csv b/glossary-en-de.csv
index 7847621..f2451cd 100644
--- a/glossary-en-de.csv
+++ b/glossary-en-de.csv
@@ -28,3 +28,4 @@ enter,einreichen
entered,eingereicht
fermentation,Gärung
fermented,vergoren
+funk,Funk
diff --git a/web/edit.css b/web/edit.css
index 29bb69a..18a8649 100644
--- a/web/edit.css
+++ b/web/edit.css
@@ -26,15 +26,15 @@ div#editor {
font-size: 9pt;
}
div#editor-inner {
+ z-index: 2;
background-color: white;
pointer-events: all;
- text-align: left;
- margin: 10px auto;
- padding: 5px;
- width: 90%;
- z-index: 2;
- border: 2px solid black;
- background: #ddd;
+ text-align: left;
+ margin: 10px auto;
+ padding: 5px;
+ width: 90%;
+ border: 2px solid black;
+ background: #ddd;
}
div#editor-inner input {
background: white;
@@ -102,3 +102,5 @@ styleguide nav:not([todo="0"]) {
styleguide nav:not([todo]) {
background-color: white;
}
+
+
diff --git a/web/edit.html b/web/edit.html
index fea164d..fd25aa2 100644
--- a/web/edit.html
+++ b/web/edit.html
@@ -95,7 +95,9 @@
<div id="pelleditor"> </div>
</div>
</div>
+ <div id="styleguide"/>
<script src="pell.js"> </script>
+ <script src="show.js"> </script>
<script src="edit.js"> </script>
</body>
</html>
diff --git a/web/edit.js b/web/edit.js
index 40f46ac..c2c87cd 100644
--- a/web/edit.js
+++ b/web/edit.js
@@ -20,6 +20,11 @@ var edit_id;
var edit_element;
var element_name;
+var styleuide_orig;
+var styleuide_auto;
+
+
+
pell.init({
element: pelleditor,
defaultParagraphSeparator: "p",
@@ -65,7 +70,11 @@ pell.init({
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
editor.style.display = "none";
- edit_element.innerHTML = text;
+ if (element_name == "name") {
+ edit_element.innerHTML = edit_id + ": " + text;
+ } else {
+ edit_element.innerHTML = text;
+ }
edit_element.setAttribute("date", "today");
edit_element.setAttribute("author", "you");
edit_element.setAttribute("addr", "local");
@@ -114,26 +123,6 @@ pell.init({
-var styleguide;
-var styleuide_orig;
-var styleuide_auto;
-var styleguide_node;
-
-
-
-// load styleguide and trigger rendering
-var xhr1 = new XMLHttpRequest();
-xhr1.onreadystatechange = function() {
- if (xhr1.readyState === 4) {
- styleguide = xhr1.responseXML.querySelector("styleguide");
- renderStyleguide(styleguide);
- }
-}
-xhr1.open('GET', document.querySelector('link[rel="styleguide"]').href, true);
-xhr1.setRequestHeader('Content-Type','text/xml; charset=UTF-8');
-xhr1.responseType = "document";
-xhr1.send();
-
// load styleguide_orig
var xhr2 = new XMLHttpRequest();
xhr2.onreadystatechange = function() {
@@ -151,6 +140,8 @@ var xhr3 = new XMLHttpRequest();
xhr3.onreadystatechange = function() {
if (xhr3.readyState === 4) {
styleguide_auto = xhr3.responseXML.querySelector("styleguide");
+ // TBD: call initEditor() event driven, when show.js is ready.
+ setTimeout(initEditor, 1000);
}
}
xhr3.open('GET', document.querySelector('link[rel="styleguide-auto"]').href, true);
@@ -159,6 +150,7 @@ xhr3.responseType = "document";
xhr3.send();
+
function recalcTodo() {
var parts = styleguide_node.querySelectorAll("category, subcategory");
for (var i = 0; i < parts.length; i++) {
@@ -183,11 +175,12 @@ function recalcTodo() {
}
}
-function renderStyleguide(styleguide) {
- styleguide_node = document.importNode(styleguide, true);
+
+function initEditor() {
+
var editor = document.querySelector("div[id='editor']");
- editor.parentNode.insertBefore(styleguide_node, editor);
+ //editor.parentNode.insertBefore(styleguide_node, editor);
var parts = styleguide_node.querySelectorAll("name, description, overall-impression, aroma, appearance, flavor, mouthfeel, comments, history, characteristic-ingredients, style-comparison, entry-instructions, commercial-examples, specs");
for (var i = 0; i < parts.length; i++) {
@@ -213,6 +206,10 @@ function renderStyleguide(styleguide) {
text = text.replace(/<p>/g, " ");
text = text.replace(/<\/p>/g, " ");
}
+ if (element_name == "name") {
+ text = text.replace(/^.*: /g, "");
+ }
+
pelleditor.content.innerHTML = text;
if (lastdate && lastauthor) {
text = "last updated by " + lastauthor + " on " + lastdate;
@@ -231,7 +228,11 @@ function renderStyleguide(styleguide) {
auto.innerHTML = auto_element.innerHTML;
}
if (undo) {
- undo.innerHTML = edit_element.innerHTML;
+ if (element_name == "name") {
+ undo.innerHTML = edit_element.innerHTML.replace(/^.*: /g, "");
+ } else {
+ undo.innerHTML = edit_element.innerHTML;
+ }
}
if (markup) {
markup.innerText = edit_element.innerHTML;
@@ -244,50 +245,11 @@ function renderStyleguide(styleguide) {
});
}
- var parts = styleguide_node.querySelectorAll("chapter, category, subcategory");
- for (var i = 0; i < parts.length; i++) {
-
- // add category id to the name element, so that it becomes searchable in browsers
- if ((parts[i].tagName == "category") || (parts[i].tagName == "subcategory")) {
- var id0 = parts[i].getAttribute("id");
- var name0 = parts[i].querySelector("name");
- if (id0 && name0) {
- id0 = id0.replace(/\-.*$/,"");
- name0.textContent = id0 + ": " + name0.textContent;
- }
- }
-
- // add navigation element
- var nav = document.createElement("nav");
- parts[i].insertBefore(nav, parts[i].childNodes[0]);
-
- nav.addEventListener("dblclick", function() {
- if (this.parentNode.classList.contains("collapsed")) {
- var parts = document.querySelectorAll("category, subcategory");
- for (var i = 0; i < parts.length; i++) {
- parts[i].classList.remove("collapsed");
- }
- } else {
- var parts = document.querySelectorAll("category, subcategory");
- for (var i = 0; i < parts.length; i++) {
- parts[i].classList.add("collapsed");
- }
- }
- });
-
- nav.addEventListener("click", function() {
- this.parentNode.classList.toggle("collapsed");
- });
-
- parts[i].classList.add("collapsed");
-
- }
-
recalcTodo();
}
+
function copy_to_edit(id) {
pelleditor.content.innerHTML = document.getElementById(id).innerHTML;
}
-
diff --git a/web/pell.js b/web/pell.js
index c4f9024..e858b74 100644
--- a/web/pell.js
+++ b/web/pell.js
@@ -179,7 +179,8 @@ var init = function init(settings) {
};
content.onkeydown = function (event) {
if (event.key === "Escape") {
- docancel();
+ //docancel();
+ editor.style.display = "none";
}
if (event.key === 'Enter' && queryCommandValue(formatBlock) === 'blockquote') {
setTimeout(function () {
diff --git a/web/show.css b/web/show.css
index d25c552..126567c 100644
--- a/web/show.css
+++ b/web/show.css
@@ -3,16 +3,24 @@ styleguide {
font-family: Helvetica, Arial, Geneva, sans-serif;
}
-styleguide chapter p, styleguide chapter h1, styleguide chapter h2, styleguide chapter h3, styleguide chapter h4, styleguide chapter ol, styleguide chapter ul, styleguide chapter {
+styleguide chapter p,
+styleguide chapter h1, styleguide chapter h2, styleguide chapter h3, styleguide chapter h4,
+styleguide chapter ol, styleguide chapter ul,
+styleguide chapter {
margin-left: 0.7em;
}
+styleguide chapter {
+ padding: 0px;
+ margin: 0px;
+}
+
/* the following rules are copied from standard html rules */
styleguide p {
display: block;
- margin-block-start: 1em;
- margin-block-end: 1em;
+ margin-top: 1em;
+ margin-bottom: 1em;
}
styleguide h2 {
@@ -35,17 +43,17 @@ styleguide h4 {
styleguide ol {
display: block;
list-style-type: decimal;
- margin-block-start: 1em;
- margin-block-end: 1em;
- padding-inline-start: 40px;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ padding-left: 40px;
}
styleguide ul {
display: block;
list-style-type: disc;
- margin-block-start: 1em;
- margin-block-end: 1em;
- padding-inline-start: 40px;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ padding-left: 40px;
}
styleguide a {
@@ -244,7 +252,6 @@ styleguide entry-instructions,
styleguide commercial-examples,
styleguide tags,
styleguide strength-classifications {
- position: relative;
margin-left: 1em;
display: block;
}
@@ -295,12 +302,7 @@ styleguide specs ibu, styleguide specs srm, styleguide specs og, styleguide spec
/* navigation */
styleguide nav {
- cursor: pointer;
-}
-
-styleguide nav,
-styleguide nav,
-styleguide nav {
+ cursor: pointer;
display:inline-block;
position: absolute;
left:5px;
@@ -309,7 +311,6 @@ styleguide nav {
margin-top:3px;
width:20px;
height:20px;
- 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;
@@ -318,37 +319,45 @@ styleguide nav {
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 {
+styleguide *.collapsed > nav {
+ -webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
+
+styleguide *.uncollapsed > nav {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+}
+
styleguide chapter.collapsed,
styleguide category.collapsed,
styleguide subcategory.collapsed {
overflow: hidden;
}
+styleguide *.collapsed div.table,
styleguide *.collapsed * {
- display:none !important;
+ display:none;
}
styleguide *.collapsed nav,
styleguide *.collapsed h2,
styleguide *.collapsed name {
- display:block !important;
+ display:block;
}
styleguide category > *:nth-child(3),
styleguide subcategory > *:nth-child(3) {
/* spacing after "name" and "nav" */
- margin-block-start: 1em;
+ margin-top: 1em;
}
+
styleguide * *:last-child {
- margin-block-end: 1em;
+ margin-bottom: 1em;
}
+
styleguide subcategory[id="7C"] entry-instructions,
styleguide subcategory[id="21B"] strength-classifications {
/* layout hack for these single occurances */
- margin-block-end: 1em;
+ margin-bottom: 1em;
}
diff --git a/web/show.js b/web/show.js
index f010918..7ed5729 100644
--- a/web/show.js
+++ b/web/show.js
@@ -12,10 +12,13 @@ xhr1.onreadystatechange = function() {
idref = window.location.href.replace(/^.*#/g, '');
var node = document.querySelector("*[id='" + idref + "']");
node.classList.remove("collapsed");
+ node.classList.add("uncollapsed");
if ((node.parentNode.tagName == "subcategory") || (node.parentNode.tagName == "category")) {
node.parentNode.classList.remove("collapsed");
+ node.parentNode.classList.add("uncollapsed");
if (node.parentNode.parentNode.tagName == "category") {
node.parentNode.parentNode.classList.remove("collapsed");
+ node.parentNode.parentNode.classList.add("uncollapsed");
}
}
window.location.href = "#" + idref;
@@ -55,20 +58,24 @@ function renderStyleguide(styleguide) {
var parts = document.querySelectorAll("category, subcategory");
for (var i = 0; i < parts.length; i++) {
parts[i].classList.remove("collapsed");
+ parts[i].classList.add("uncollapsed");
}
} else {
var parts = document.querySelectorAll("category, subcategory");
for (var i = 0; i < parts.length; i++) {
parts[i].classList.add("collapsed");
+ parts[i].classList.remove("uncollapsed");
}
}
});
nav.addEventListener("click", function() {
this.parentNode.classList.toggle("collapsed");
+ this.parentNode.classList.toggle("uncollapsed");
});
parts[i].classList.add("collapsed");
+ parts[i].classList.remove("uncollapsed");
}
diff --git a/xsl/bjcp-2015-styleguide-doc-to-xml.xsl b/xsl/bjcp-2015-styleguide-doc-to-xml.xsl
index 0f85b03..27832a9 100644
--- a/xsl/bjcp-2015-styleguide-doc-to-xml.xsl
+++ b/xsl/bjcp-2015-styleguide-doc-to-xml.xsl
@@ -708,7 +708,7 @@
<xsl:when test="local-name(.) = 'tbl'">
<xsl:element name="div">
<xsl:attribute name="class">
- <xsl:text>table-2</xsl:text>
+ <xsl:text>table</xsl:text>
</xsl:attribute>
<xsl:for-each select="w:tr">
<xsl:choose>
@@ -744,7 +744,7 @@
<xsl:when test="w:r[1]/w:t='Straw'">
<xsl:element name="div">
<xsl:attribute name="class">
- <xsl:text>table-2</xsl:text>
+ <xsl:text>table</xsl:text>
</xsl:attribute>
<xsl:for-each select="w:r[not(w:tab)]">
<xsl:element name="div">
--
GitLab