diff options
Diffstat (limited to 'org')
| -rw-r--r-- | org/meta_abstraction.org | 2 | ||||
| -rw-r--r-- | org/output_xmls.org | 230 | ||||
| -rw-r--r-- | org/output_xmls_css.org | 136 |
3 files changed, 246 insertions, 122 deletions
diff --git a/org/meta_abstraction.org b/org/meta_abstraction.org index 63ac9ba..f7291cf 100644 --- a/org/meta_abstraction.org +++ b/org/meta_abstraction.org @@ -4216,7 +4216,7 @@ auto _heading_matched_(L,C,O,K,Lv,Lc,T,Me)( #+name: abs_functions_para #+BEGIN_SRC d void _para_match_(L,O,K,I,B,T,C)( - L line, // watch + L line, return ref O an_object, return ref K an_object_key, return ref I indent, diff --git a/org/output_xmls.org b/org/output_xmls.org index ffbd7ed..a89cc88 100644 --- a/org/output_xmls.org +++ b/org/output_xmls.org @@ -51,6 +51,47 @@ import #+END_SRC *** misc +**** div delimiter + +#+name: xhtml_format_objects +#+BEGIN_SRC d +string div_delimit( + string part, + return ref string previous_part +){ + string delimit = ""; + string delimit_ = ""; + if (part != previous_part) { + switch (part) { + case "head": + delimit_ ~= "\n<div class=\"doc_title\">\n" ; + break; + case "toc_seg": + delimit_ ~= "\n<div class=\"doc_toc\">\n" ; + break; + case "toc_scroll": + delimit_ ~= "\n<div class=\"doc_toc\">\n" ; + break; + case "bookindex_seg": + delimit_ ~= "\n<div class=\"doc_bookindex\">\n" ; + break; + case "bookindex_scroll": + delimit_ ~= "\n<div class=\"doc_bookindex\">\n" ; + break; + default: + delimit_ ~= "\n<div class=\"doc_" ~ part ~ "\">\n" ; + break; + } + if (previous_part.length > 0) { + delimit ~= "\n</div>"; + } + previous_part = part; + delimit ~= delimit_; + } + // you also need to close the last div, introduce a footer? + return delimit; +} +#+END_SRC **** special characters #+name: xhtml_format_objects @@ -195,21 +236,17 @@ auto site_info_button(Dm)( string _location_3_url ="http://www.sisudoc.org"; string _location_3_lnk ="sisu"; string o; - o = format(q"¶<!-- Site info button close --> - <table summary="home button / home information" border="0" cellpadding="3" cellspacing="0"> - <tr><td align="left" bgcolor="#ffffff"> - <p class="tiny_left"><a href="%s" target="_top"> - %s - </a></p> - <p class="tiny_left"><a href="%s" target="_top"> - %s - </a></p> - <p class="tiny_left"><a href="%s" target="_top"> - %s - </a></p> - </td></tr> - </table> - <!-- Site info button close -->¶", + o = format(q"¶<div class="flex-menu-option"> + <p class="tiny_left"><a href="%s" target="_top"> + %s + </a></p> + <p class="tiny_left"><a href="%s" target="_top"> + %s + </a></p> + <p class="tiny_left"><a href="%s" target="_top"> + %s + </a></p> + </div>¶", _location_1_url, _location_1_lnk, _location_2_url, @@ -231,19 +268,19 @@ auto inline_search_form(Dm)( string _action="http://www.sisudoc.org/cgi-bin/search.cgi"; string _db="SiSU.7a.manual"; string o; - o = format(q"¶<!-- SiSU Search open --> -<a name="search"></a> -<form method="get" action="%s" target="_top"> -<font size="2"> -<input type="text" name="s1" size="24" maxlength="255" /> -<input type="hidden" name="db" value="%s" /> -<input type="hidden" name="ltd" value="1000" /> -<input type="hidden" name="off" value="0" /> -<input type="hidden" name="doc" value="live-manual" /><br /> -<input type="submit" name="search" value="search doc" /> -<input type="submit" name="search" value="search db" /> -</font></form> -<!-- SiSU Search close -->¶", + o = format(q"¶<div class="flex-menu-option"> + <a name="search"></a> + <form method="get" action="%s" target="_top"> + <font size="2"> + <input type="text" name="s1" size="24" maxlength="255" /> + <input type="hidden" name="db" value="%s" /> + <input type="hidden" name="ltd" value="1000" /> + <input type="hidden" name="off" value="0" /> + <input type="hidden" name="doc" value="live-manual" /><br /> + <input type="submit" name="search" value="search doc" /> + <input type="submit" name="search" value="search db" /> + </font></form> + </div>¶", _action, _db, ); @@ -276,34 +313,17 @@ auto html_head(Dm)( </head> <body lang="%s"> <a name="top" id="top"></a> -<div class="icon-bar"> -<div class="left-bar"> -<div class="table-bar"> -<table summary="table of contents segment navigation band" id="toc" width="85%%" bgcolor="#ffffff"> -<tr><td width="20%%"> - <!-- Site info button open --> - %s - <!-- Site info button close --> -</td> -<td width="75%%" align="center"> -<table summary="segment navigation available documents types: toc,doc,pdf,concordance" border="0" cellpadding="3" cellspacing="0"> -<tr> -<td align="center" bgcolor="#ffffff"> - <td align="center" bgcolor="#ffffff"> - <a href="../../manifest/sisu.en.html" target="_top"> - <font face="verdana, arial, georgia, tahoma, sans-serif, helvetica, times, roman" size="2"> - [ document manifest ] - </font> - </a> -</td> - <!-- SiSU Search open --> - %s - <!-- SiSU Search close --> -</tr></table> -</td> -</table> -</div> -</div>%s¶", +<div class='delimit headband'> + <div class="flex-menu-bar"> + %s + <div class="flex-menu-option"> + <a href="../../manifest/sisu.en.html" target="_top"> + <font face="verdana, arial, georgia, tahoma, sans-serif, helvetica, times, roman" size="2"> + [ document manifest ] + </font> + </a> + </div> + %s%s¶", doc_matters.dochead_meta["title"]["full"], (doc_matters.dochead_meta["creator"]["author"].empty) ? "" : ", " ~ doc_matters.dochead_meta["creator"]["author"], @@ -389,7 +409,8 @@ auto epub3_seg_head(Dm)( #+BEGIN_SRC d auto tail() { string o; - o = format(q"¶ <a name="bottom" id="bottom"></a> + o = format(q"¶ </div> + <a name="bottom" id="bottom"></a> <a name="end" id="end"></a> </body> </html>¶"); @@ -597,66 +618,62 @@ auto nav_pre_next_svg(O)( toc = ""; prev = ""; } else { - toc = format(q"¶ - <a href="toc.html" target="_top"> - <div class="toc-button menu"> - <svg viewbox="0 0 100 100"> - <path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/> - </svg> - </div> - </a> -¶", + toc = format(q"¶<a href="toc.html" target="_top"> + <div class="toc-button menu"> + <svg viewbox="0 0 100 100"> + <path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/> + </svg> + </div> + </a>¶", ); } if (obj.segname_prev == "") { prev = ""; - } else { // previous - prev = format(q"¶ - <a href="%s.html" target="_top"> - <div class="prev-next-button previous"> - <svg viewbox="0 0 100 100"> - <path class="arrow" d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z" transform=" translate(15,0)"> - </svg> - </div> - </a> -¶", + } else { + prev = format(q"¶<a href="%s.html" target="_top"> + <div class="prev-next-button previous"> + <svg viewbox="0 0 100 100"> + <path class="arrow" d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z" transform=" translate(15,0)"> + </svg> + </div> + </a>¶", obj.segname_prev, ); } - if (obj.segname_next == "") { // next + if (obj.segname_next == "") { next = ""; } else { - next = format(q"¶ - <a href="%s.html" target="_top"> - <div class="prev-next-button next"> - <svg viewbox="0 0 100 100"> - <path class="arrow" d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z "transform="translate(85,100) rotate(180) "> - </svg> - </div> - </a> -¶", + next = format(q"¶<a href="%s.html" target="_top"> + <div class="prev-next-button next"> + <svg viewbox="0 0 100 100"> + <path class="arrow" d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z "transform="translate(85,100) rotate(180) "> + </svg> + </div> + </a>¶", obj.segname_next, ); } - string _toc_pre_next = format(q"¶ - <!-- <div class="icon-bar"> --> - <div class="nav-bar"> - %s - %s - %s + string _toc_pre_next = format(q"¶ <div class="flex-menu-option"> + <div class="nav-bar"> + %s + %s + %s + </div> </div> </div> -¶", +</div>¶", toc, prev, next, ); - string _pre_next = format(q"¶ - <div class="nav-bar"> - %s - %s + string _pre_next = format(q"¶ <div class="flex-menu-option"> + <div class="nav-bar"> + %s + %s + </div> </div> -¶", + </div> +</div>¶", prev, next, ); @@ -1306,8 +1323,11 @@ void scroll(D,I)( string[] doc_html; string[] doc; string suffix = ".html"; + string previous_part = ""; + string delimit = ""; foreach (part; doc_matters.keys_seq.scroll) { foreach (obj; doc_abstraction[part]) { + delimit = xhtml_format.div_delimit(part, previous_part); string _txt = xhtml_format.special_characters(obj, obj.text); switch (obj.of_part) { case "frontmatter": assert(part == "head" || "toc_scroll"); @@ -1315,7 +1335,7 @@ void scroll(D,I)( case "para": switch (obj.is_a) { case "heading": - doc_html ~= xhtml_format.heading_scroll(obj, _txt, suffix); + doc_html ~= delimit ~ xhtml_format.heading_scroll(obj, _txt, suffix); break; case "toc": doc_html ~= xhtml_format.para_scroll(obj, _txt, suffix); @@ -1339,7 +1359,7 @@ void scroll(D,I)( case "para": switch (obj.is_a) { case "heading": - doc_html ~= xhtml_format.heading_scroll(obj, _txt, suffix); + doc_html ~= delimit ~ xhtml_format.heading_scroll(obj, _txt, suffix); break; case "para": doc_html ~= xhtml_format.para_scroll(obj, _txt, suffix); @@ -1393,7 +1413,7 @@ void scroll(D,I)( case "para": switch (obj.is_a) { case "heading": - doc_html ~= xhtml_format.heading_scroll(obj, _txt, suffix); + doc_html ~= delimit ~ xhtml_format.heading_scroll(obj, _txt, suffix); break; case "endnote": assert(part == "endnotes"); doc_html ~= xhtml_format.para_scroll(obj, _txt, suffix); @@ -1489,11 +1509,13 @@ void seg(D,I)( string[] doc; string segment_filename; string[] top_level_headings = ["","","",""]; - string _bottom_bar =""; string previous_seg_filename = ""; string suffix = ".html"; + string previous_part = ""; + string delimit = ""; foreach (part; doc_matters.keys_seq.seg) { foreach (obj; doc_abstraction[part]) { + delimit = xhtml_format.div_delimit(part, previous_part); string _txt = xhtml_format.special_characters(obj, obj.text); if (obj.is_a == "heading") { assert(part == "head" || "toc_seg" || "body" || "endnotes" || "glossary" || "bibliography" || "bookindex_seg" || "blurb" || "tail"); @@ -1528,10 +1550,8 @@ void seg(D,I)( case 4: segment_filename = obj.segment_anchor_tag; doc_html[segment_filename] ~= xhtml_format.html_head(doc_matters, "seg"); - doc_html_endnotes[previous_seg_filename] ~= _bottom_bar; // places after segment text and endnotes auto navigation_bar = xhtml_format.nav_pre_next_svg(obj); - doc_html[segment_filename] ~= navigation_bar.toc_pre_next; - _bottom_bar = navigation_bar.toc_pre_next; + doc_html[segment_filename] ~= navigation_bar.toc_pre_next; // navigation bar previous_seg_filename = segment_filename; foreach (top_level_heading; top_level_headings) { // writeln(top_level_heading); diff --git a/org/output_xmls_css.org b/org/output_xmls_css.org index 1adb168..574d562 100644 --- a/org/output_xmls_css.org +++ b/org/output_xmls_css.org @@ -47,6 +47,124 @@ template SiSUcss() { #+name: css_shared #+BEGIN_SRC css + *{ + padding: 0px; + margin: 0px; + } + body { + height: 100vh; + background-color: #ffffff; + } + /* flex */ + .flex-menu-bar { + display: -webkit-flex; + display: flex; + -webkit-flex-wrap: wrap; + -webkit-align-items: center; + align-items: center; + width: 100%; + background-color: #ffffff; + } + .flex-menu-option { + background-color: white; + margin: 8px; + } + .flex-list { + display: -webkit-flex; + display: flex; + -webkit-align-items: center; + display: block; + align-items: center; + width: 100%; + background-color: #ffffff; + } + .flex-list-item { + background-color: white; + margin: 4px; + } + /* grid */ + .wrapper { + display: grid; + grid-template-columns: 100%; + grid-template-areas: + \"headband\" + \"doc_header\" + \"doc_title\" + \"doc_toc\" + \"doc_prefix\" + \"doc_intro\" + \"doc_body\" + \"doc_endnotes\" + \"doc_glossary\" + \"doc_biblio\" + \"doc_bookindex\" + \"doc_blurb\" + \"doc_suffix\"; + margin: 0px; + padding: 0px; + background-color: #ffffff; + } + .delimit { + border-style: none; + border-color: white; + padding: 10px; + } + .headband { + grid-area: headband; + background-color: #ffffff; + } + .doc_header { + grid-area: doc_header; + } + .doc_title { + grid-area: doc_title; + } + .doc_toc { + grid-area: doc_toc; + } + .doc_prefix { + grid-area: doc_prefix; + } + .doc_intro { + grid-area: doc_intro; + } + .doc_body { + grid-area: doc_body; + } + .doc_endnotes { + grid-area: doc_endnotes; + } + .doc_glossary { + grid-area: doc_glossary; + } + .doc_biblio { + grid-area: doc_biblio; + } + .doc_bookindex { + grid-area: doc_bookindex; + } + .doc_blurb { + grid-area: doc_blurb; + } + .doc_suffix { + grid-area: doc_suffix; + } + .nav-ul { + list-style: none; + float: left; + } + .nav-li { + float: left; + padding-right: 0.7em; + } + .nav-li a { + text-decoration: none; + color: white; + } + footer { + background-color: #00704e; + } + /* regular */ body { color: black; background: #ffffff; @@ -906,23 +1024,9 @@ template SiSUcss() { display: inline; overflow: auto; } - .table-bar { - float: left; - overflow: auto; - width: 100%; - display: inline; - } - .nav-bar { - width: 15%; - float: right; - display: inline; - transition: all 0.3s ease; - position: relative; - padding-bottom: 3em; - background: #ffffff; - } .toc-button { position: absolute; + top: 8px; width: 2em; height: 2em; border-radius: 50%; @@ -941,7 +1045,7 @@ template SiSUcss() { } .prev-next-button { position: absolute; - top: 0em; + top: 8px; width: 2em; height: 2em; border-radius: 50%; |