top banner with previous next navigation bar with svg buttons

author: Ralph Amissah <ralph@amissah.com> 2017-06-20 15:12:56 -0400
committer: Ralph Amissah <ralph@amissah.com> 2019-04-10 15:14:14 -0400
commit: 0905fae7c1ba93b70cb10ad77b6a24dbbc2c5082 (patch)
tree: e3900bf2ee8adba9eb6f1ac4bcd14f473f4dfc18 /org
parent: html seg, work on subtoc & on nav pre-next (diff)
2 files changed, 324 insertions, 97 deletions
diff --git a/org/output_xmls.org b/org/output_xmls.org
index b826a12..d8681fb 100644
--- a/org/output_xmls.org
+++ b/org/output_xmls.org
@@ -126,86 +126,194 @@ string _xhtml_anchor_tags(const(string[]) anchor_tags) {
 #+END_SRC
 
 **** doc head & tails
-***** scroll head
+***** metadata
 
 #+name: xhtml_format_objects
 #+BEGIN_SRC d
-auto html_scroll_head(Dm)(
+auto header_metadata(Dm)(
   Dm doc_matters,
 ) {
+  string _title="Title";
+  string _author="Author";
+  string _publisher="Publisher";
+  string _date="Date";
+  string _date_created="Date";
+  string _date_issued="Date";
+  string _date_available="Date";
+  string _date_valid="Date";
+  string _date_modified="Date";
+  string _language="en";
+  string _rights="Copyright: Copyright (C) year holder";
+  string _generator="sdp [SiSU 7.1.8 of 2016w08/5 (2016-02-26)] (n*x and D)";
+  string _generator_home="http://www.sisudoc.org";
   string o;
-  o = format(q"¶<!DOCTYPE html>
-<html>
-<head>
-  <title>
-    %s%s
-  </title>
-  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
-  <meta name="dc.title" content="Title" />
-  <meta name="dc.author" content="Author" />
-  <meta name="dc.publisher" content="SiSU http://www.jus.uio.no/sisu (this copy)" />
-  <meta name="dc.date" content="year" />
-  <meta name="dc.date.created" content="year" />
-  <meta name="dc.date.issued" content="year" />
-  <meta name="dc.date.available" content="year" />
-  <meta name="dc.date.valid" content="year" />
-  <meta name="dc.date.modified" content="year" />
-  <meta name="dc.language" content="US" />
-  <meta name="dc.rights" content="Copyright: Copyright (C) year holder />
-  <meta name="generator" content="sdp [SiSU 7.1.8 of 2016w08/5 (2016-02-26)] (n*x and D)" />
-  <link rel="generator" href="http://www.sisudoc.org/" />
-  <link rel="shortcut icon" href="../../image/rb7.ico" />
-  <link href="../../css/html.css" rel="stylesheet" />
-</head>
-<body lang="%s">
-<a name="top" id="top"></a>¶",
-    doc_matters.dochead_meta["title"]["full"],
-    (doc_matters.dochead_meta["creator"]["author"].empty) ? "" : ", " ~ doc_matters.dochead_meta["creator"]["author"],
-    doc_matters.language,
+  o = format(q"¶<!-- SiSU header metadata -->
+<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+<meta name="dc.title" content="%s" />
+<meta name="dc.author" content="%s" />
+<meta name="dc.publisher" content="%s" />
+<meta name="dc.date" content="%s" />
+<meta name="dc.date.created" content="%s" />
+<meta name="dc.date.issued" content="%syear" />
+<meta name="dc.date.available" content="%syear" />
+<meta name="dc.date.valid" content="%syear" />
+<meta name="dc.date.modified" content="%syear" />
+<meta name="dc.language" content="%s" />
+<meta name="dc.rights" content="%s" />
+<meta name="generator" content="%s" />
+<link rel="generator" href="%s" />
+<!-- SiSU header metadata -->¶",
+  _title,
+  _author,
+  _publisher,
+  _date,
+  _date_created,
+  _date_issued,
+  _date_available,
+  _date_valid,
+  _date_modified,
+  _language,
+  _rights,
+  _generator,
+  _generator_home,
+  );
+  return o;
+}
+#+END_SRC
+
+***** site info button
+
+#+name: xhtml_format_objects
+#+BEGIN_SRC d
+auto site_info_button(Dm)(
+  Dm doc_matters,
+) {
+  string _location_1_url ="http://www.sisudoc.org";
+  string _location_1_lnk ="SiSU";
+  string _location_2_url ="http://www.sisudoc.org";
+  string _location_2_lnk ="www.sisudoc.org";
+  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 -->¶",
+  _location_1_url,
+  _location_1_lnk,
+  _location_2_url,
+  _location_2_lnk,
+  _location_3_url,
+  _location_3_lnk,
+  );
+  return o;
+}
+#+END_SRC
+
+***** search form
+
+#+name: xhtml_format_objects
+#+BEGIN_SRC d
+auto inline_search_form(Dm)(
+  Dm doc_matters,
+) {
+  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 -->¶",
+  _action,
+  _db,
   );
   return o;
 }
 #+END_SRC
 
-***** seg head
+***** html head & head banner
 
 #+name: xhtml_format_objects
 #+BEGIN_SRC d
-auto html_seg_head(Dm)(
+auto html_head(Dm)(
   Dm doc_matters,
+  string type,
 ) {
   string o;
   o = format(q"¶<!DOCTYPE html>
 <html>
 <head>
-  <meta charset="utf-8">
-    <title>
-      %s%s
-    </title>
-    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
-    <meta name="dc.title" content="Title" />
-    <meta name="dc.author" content="Author" />
-    <meta name="dc.publisher" content="SiSU http://www.jus.uio.no/sisu (this copy)" />
-    <meta name="dc.date" content="year" />
-    <meta name="dc.date.created" content="year" />
-    <meta name="dc.date.issued" content="year" />
-    <meta name="dc.date.available" content="year" />
-    <meta name="dc.date.valid" content="year" />
-    <meta name="dc.date.modified" content="year" />
-    <meta name="dc.language" content="US" />
-    <meta name="dc.rights" content="Copyright: Copyright (C) year holder" />
-    <meta name="generator" content="sdp [SiSU 7.1.8 of 2016w08/5 (2016-02-26)] (n*x and D)" />
-  </meta>
+  <meta charset="utf-8" />
+  <title>
+    %s%s
+  </title>
+  <!-- metadata -->
+  %s
+  <!-- metadata -->
   <link rel="generator" href="http://www.sisudoc.org/" />
-  <link rel="shortcut icon" href="../../../image/rb7.ico" />
-  <link href="../../../css/html.css" rel="stylesheet" />
+  <link rel="shortcut icon" href="%s" />
+  <link href="%s" rel="stylesheet" />
 </head>
 <body lang="%s">
-<a name="top" id="top"></a>¶",
+<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">
+      [&nbsp;document&nbsp;manifest&nbsp;]
+    </font>
+  </a>
+</td>
+  <!-- SiSU Search open -->
+   %s
+  <!-- SiSU Search close -->
+</tr></table>
+</td>
+</table>
+</div>
+</div>%s¶",
     doc_matters.dochead_meta["title"]["full"],
     (doc_matters.dochead_meta["creator"]["author"].empty) ? ""
       : ", " ~ doc_matters.dochead_meta["creator"]["author"],
+    header_metadata(doc_matters),
+    ((type == "seg") ? "../../../" : "../../") ~ "image/rb7.ico",
+    ((type == "seg") ? "../../../" : "../../") ~ "css/html.css",
     doc_matters.language,
+    site_info_button(doc_matters),
+    inline_search_form(doc_matters),
+    ((type == "seg") ? "" : "\n</div>"),
   );
   return o;
 }
@@ -477,68 +585,90 @@ string lev4_heading_subtoc(O)(
 }
 #+END_SRC
 
-**** navigation pre next
+**** navigation pre next svg
 
 #+name: xhtml_format_objects
 #+BEGIN_SRC d
-string nav_pre_next_table(O)(
+auto nav_pre_next_svg(O)(
   auto return ref const O    obj,
 ) {
   string prev, next, toc;
-  if (obj.segname_prev == "") {
+  if (obj.segment_anchor_tag == "toc") {
+    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>
+¶",
+    );
+  }
+  if (obj.segname_prev == "") {
+    prev = "";
+  } else {                               // previous
     prev = format(q"¶
-      <td align="center" bgcolor="#ffffff">
-        <a href="%s.html" target="_top">
-          <img border="0" width="22" height="22" src="../../../image/arrow_prev_red.png" alt=" &lt;&lt; [ prev ] " />
-        </a>
-      </td>
+     <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 == "") {
+  if (obj.segname_next == "") {            // next
     next = "";
   } else {
     next = format(q"¶
-      <td align="center" bgcolor="#ffffff">
-        <a href="%s.html" target="_top">
-          <img border="0" width="22" height="22" src="../../../image/arrow_next_red.png" alt=" [ next ] &gt;&gt; " />
-        </a>
-      </td>
+      <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,
     );
   }
-  if (obj.segment_anchor_tag == "toc") {
-    toc = "";
-    prev = "";
-  } else {
-    toc = format(q"¶
-      <td align="center" bgcolor="#ffffff">
-        <a href="toc.html" target="_top">
-          <img border="0" width="22" height="22" src="../../../image/arrow_up_red.png" alt=" [ toc ] " />
-        </a>
-      </td>
-¶",
-    );
-  }
-  string o = format(q"¶<div class="nav">
-  <table summary="segment navigation pre/next" border="0" cellpadding="3" cellspacing="0">
-    <tr>
+  string _toc_pre_next = format(q"¶
+   <!-- <div class="icon-bar"> -->
+    <div class="nav-bar">
       %s
       %s
       %s
-    </tr>
-  </table>
-</div>
+    </div>
+  </div>
 ¶",
-    prev,
     toc,
+    prev,
     next,
   );
-  return o;
+  string _pre_next = format(q"¶
+    <div class="nav-bar">
+      %s
+      %s
+    </div>
+¶",
+    prev,
+    next,
+  );
+  struct bar {
+    string toc_pre_next() {
+      return _toc_pre_next;
+    }
+    string pre_next() {
+      return _pre_next;
+    }
+  }
+  return bar();
 }
 #+END_SRC
 
@@ -1155,7 +1285,6 @@ module sdp.output.html;
 template outputHTML() {
   <<output_imports>>
   mixin outputXHTMLs;
-  <<output_html>>
   <<output_html_scroll>>
   <<output_html_seg>>
   <<output_html_css>>
@@ -1205,8 +1334,7 @@ void scroll(D,I)(
           break;
         }
         break;
-      case "body": //                    assert(part == "body");
-        assert(part == "body" || "head"); // surprise
+      case "body":                     assert(part == "body" || "head"); // surprise
         switch (obj.is_of) {
         case "para":
           switch (obj.is_a) {
@@ -1308,7 +1436,7 @@ void scroll(D,I)(
       }
     }
   }
-  doc = xhtml_format.html_scroll_head(doc_matters) ~ doc_html ~ xhtml_format.tail;
+  doc = xhtml_format.html_head(doc_matters, "scroll") ~ doc_html ~ xhtml_format.tail;
   scroll_write_output(doc_matters, doc);
 }
 #+END_SRC
@@ -1326,7 +1454,6 @@ void scroll_write_output(M,C)(
   }
   string fn_src = doc_matters.source_filename;
   auto src_path_info = doc_matters.src_path_info;
-  string fn_rel_pth = doc_matters.source_filename;
   string lng = doc_matters.language;
   auto pth_html = SiSUpathsHTML!()(src_path_info, lng);
   try {
@@ -1341,6 +1468,7 @@ void scroll_write_output(M,C)(
   catch (ErrnoException ex) {
     // Handle error
   }
+  writeln(" ", doc_matters.environment["pwd"],  "/", pth_html.fn_scroll(fn_src));
 }
 #+END_SRC
 
@@ -1361,6 +1489,8 @@ void seg(D,I)(
   string[] doc;
   string segment_filename;
   string[] top_level_headings = ["","","",""];
+  string _bottom_bar ="";
+  string previous_seg_filename = "";
   string suffix = ".html";
   foreach (part; doc_matters.keys_seq.seg) {
     foreach (obj; doc_abstraction[part]) {
@@ -1397,14 +1527,18 @@ void seg(D,I)(
           break;
         case 4:
           segment_filename = obj.segment_anchor_tag;
-          doc_html[segment_filename] ~= xhtml_format.html_seg_head(doc_matters);
+          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;
+          previous_seg_filename = segment_filename;
           foreach (top_level_heading; top_level_headings) {
             // writeln(top_level_heading);
             doc_html[segment_filename] ~= top_level_heading;
           }
           auto t = xhtml_format.heading_seg(obj, _txt, suffix);
           doc_html[segment_filename] ~= to!string(t[0]);
-          doc_html[segment_filename] ~= xhtml_format.nav_pre_next_table(obj);
           doc_html[segment_filename] ~= xhtml_format.lev4_heading_subtoc(obj);
           doc_html_endnotes[segment_filename] ~= t[1];
           break;
@@ -1584,7 +1718,6 @@ void seg_write_output(M,D,E)(
   mixin SiSUoutputRgxInit;
   auto rgx = Rgx();
   auto src_path_info = doc_matters.src_path_info;
-  string fn_rel_pth = doc_matters.source_filename;
   string lng = doc_matters.language;
   auto pth_html = SiSUpathsHTML!()(src_path_info, lng);
   auto xhtml_format = outputXHTMLs();
@@ -1607,6 +1740,7 @@ void seg_write_output(M,D,E)(
   catch (ErrnoException ex) {
     // handle error
   }
+  writeln(" ", doc_matters.environment["pwd"],  "/", pth_html.fn_seg(doc_matters.source_filename, "toc"));
 }
 #+END_SRC
 
@@ -1781,6 +1915,30 @@ string epub3_oebps_content(D,I,P)(D doc_abstraction, I doc_matters, P parts) {
   content ~= parts["guide"];
   content ~= "  " ~ "</guide>"            ~ "\n  ";
   content ~= ""   ~ "</package>";
+  debug(epubmanifest) {
+    foreach (s; doc_matters.keys_seq.seg) {
+      foreach (obj; doc_abstraction[s]) {
+        if (obj.is_a == "heading") {
+          if (obj.heading_lev_markup == 4) {
+            writefln(
+              "%s~ [%s.xhtml] %s",
+              obj.marked_up_level,
+              obj.segment_anchor_tag,
+              obj.text
+            );
+          } else if (obj.heading_lev_markup > 4) {
+            writefln(
+              "%s~ [%s.xhtml#%s] %s",
+              obj.marked_up_level,
+              obj.segment_anchor_tag,
+              obj.obj_cite_number,
+              obj.text
+            );
+          }
+        }
+      }
+    }
+  }
   return content;
 }
 #+END_SRC
@@ -2276,7 +2434,6 @@ void epub3_write_output_files(M,D,E,Mt,Mic,Otnx,Otn,Oc)(
     static assert(is(typeof(oebps_content_opf)      == string));
   }
   auto src_path_info = doc_matters.src_path_info;
-  string fn_rel_pth = doc_matters.source_filename;
   string lng = doc_matters.language;
   auto pth_epub3 = SiSUpathsEPUB!()(src_path_info, lng);
   auto xhtml_format = outputXHTMLs();
@@ -2450,6 +2607,7 @@ void epub3_write_output_files(M,D,E,Mt,Mic,Otnx,Otn,Oc)(
   catch (ErrnoException ex) {
     // Handle error
   }
+  writeln(" ", doc_matters.environment["pwd"],  "/", fn_epub);
 #+END_SRC
 
 ** zip debug, read zip  archive
diff --git a/org/output_xmls_css.org b/org/output_xmls_css.org
index e56654d..0a9afb5 100644
--- a/org/output_xmls_css.org
+++ b/org/output_xmls_css.org
@@ -895,4 +895,73 @@ template SiSUcss() {
   nav#toc ol {
     list-style-type: none;
   }
+  .icon-bar {
+    width: 100%;
+    overflow: auto;
+    margin: 0em 0em 0em;
+  }
+  .left-bar {
+    width: 85%;
+    float: left;
+    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;
+    width: 2em;
+    height: 2em;
+    border-radius: 50%;
+    background: #cccccc;
+  }
+  .toc-button svg {
+    position: relative;
+    left: 25%;
+    top: 25%;
+    width: 150%;
+    height: 150%;
+  }
+  .toc-button p {
+    vertical-align: center;
+    font-size: 120%;
+  }
+  .prev-next-button {
+    position: absolute;
+    top: 0em;
+    width: 2em;
+    height: 2em;
+    border-radius: 50%;
+    background: #cccccc;
+  }
+  .prev-next-button svg {
+    position: relative;
+    left: 20%;
+    top: 20%;
+    width: 60%;
+    height: 60%;
+  }
+  .menu {
+    right: 6em;
+   }
+  .previous {
+    right: 3em;
+   }
+  .next {
+    right: 0em;
+   }
+  .arrow { fill: #333333; }
 #+END_SRC
author	Ralph Amissah <ralph@amissah.com>	2017-06-20 15:12:56 -0400
committer	Ralph Amissah <ralph@amissah.com>	2019-04-10 15:14:14 -0400
commit	0905fae7c1ba93b70cb10ad77b6a24dbbc2c5082 (patch)
tree	e3900bf2ee8adba9eb6f1ac4bcd14f473f4dfc18 /org
parent	html seg, work on subtoc & on nav pre-next (diff)