top banner with previous next navigation bar with svg buttons

4 files changed, 309 insertions, 94 deletions

diff --git a/src/sdp/output/epub3.d b/src/sdp/output/epub3.d
index 2c014b5..00814d4 100644
--- a/src/sdp/output/epub3.d
+++ b/src/sdp/output/epub3.d
@@ -101,6 +101,30 @@ template outputEPub3() {
     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;
   }
   string epub3_oebps_toc_nav_xhtml(D,I)(D doc_abstraction, I doc_matters) {
@@ -567,7 +591,6 @@ template outputEPub3() {
       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();
@@ -741,6 +764,7 @@ template outputEPub3() {
     catch (ErrnoException ex) {
       // Handle error
     }
+    writeln(" ", doc_matters.environment["pwd"],  "/", fn_epub);
     debug(epub_archive) {
       if (exists(fn_epub)) {
         try {
diff --git a/src/sdp/output/html.d b/src/sdp/output/html.d
index f620498..b12be65 100644
--- a/src/sdp/output/html.d
+++ b/src/sdp/output/html.d
@@ -12,7 +12,6 @@ template outputHTML() {
     sdp.output.xmls,
     sdp.output.xmls_css;
   mixin outputXHTMLs;
-  
   void scroll(D,I)(
     auto return ref const D    doc_abstraction,
     auto return ref I          doc_matters,
@@ -51,8 +50,7 @@ template outputHTML() {
             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) {
@@ -154,7 +152,7 @@ template outputHTML() {
         }
       }
     }
-    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);
   }
   void scroll_write_output(M,C)(
@@ -166,7 +164,6 @@ template outputHTML() {
     }
     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 {
@@ -181,6 +178,7 @@ template outputHTML() {
     catch (ErrnoException ex) {
       // Handle error
     }
+    writeln(" ", doc_matters.environment["pwd"],  "/", pth_html.fn_scroll(fn_src));
   }
   void seg(D,I)(
     auto return ref const D    doc_abstraction,
@@ -194,6 +192,8 @@ template outputHTML() {
     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]) {
@@ -230,14 +230,18 @@ template outputHTML() {
             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;
@@ -411,7 +415,6 @@ template outputHTML() {
     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();
@@ -434,6 +437,7 @@ template outputHTML() {
     catch (ErrnoException ex) {
       // handle error
     }
+    writeln(" ", doc_matters.environment["pwd"],  "/", pth_html.fn_seg(doc_matters.source_filename, "toc"));
   }
   void css(M)(
     auto return ref M          doc_matters,
diff --git a/src/sdp/output/xmls.d b/src/sdp/output/xmls.d
index c7dd552..b86fb46 100644
--- a/src/sdp/output/xmls.d
+++ b/src/sdp/output/xmls.d
@@ -64,76 +64,172 @@ template outputXHTMLs() {
       }
       return tags;
     }
-    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;
+    }
+    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;
+    }
+    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;
     }
-    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;
     }
@@ -353,64 +449,86 @@ template outputXHTMLs() {
       lev4_subtoc ~= "  </div>\n";
       return lev4_subtoc.to!string;
     }
-    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();
     }
     auto heading(O)(
       auto return ref const O    obj,
diff --git a/src/sdp/output/xmls_css.d b/src/sdp/output/xmls_css.d
index 6bb493a..637bca9 100644
--- a/src/sdp/output/xmls_css.d
+++ b/src/sdp/output/xmls_css.d
@@ -853,6 +853,75 @@ 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; }
 ";
     struct _css {
       auto html_css() {