From: Will Budic <redacted>
Date: Thu, 23 Nov 2023 07:09:37 +0000 (+1100)
Subject: Web dev.  made to use tabs.
X-Git-Url: https://lifelog.hopto.org/gitweb/?a=commitdiff_plain;h=f7193500c634c05ee96dc5b2b5483424dc13807d;p=LifeLog.git

Web dev.  made to use tabs.
---

diff --git a/.gitignore b/.gitignore
index 1b31734..22acc3e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,4 @@ dump_*
 tree_*.cnf
 vscode_local_extensions/extensions.json
 dbLifeLog/current_*
+htdocs/cgi-bin/static
diff --git a/htdocs/cgi-bin/docs/EContactHashSpecs.md b/htdocs/cgi-bin/docs/EContactHashSpecs.md
index 382cf83..7965e90 100644
--- a/htdocs/cgi-bin/docs/EContactHashSpecs.md
+++ b/htdocs/cgi-bin/docs/EContactHashSpecs.md
@@ -1,7 +1,7 @@
 # Electronic Contact Hash Message Specifications
 
     ECMessage is an alternative to E-Mail postboxes, utilizing a webservice to provide
-    fast and secure one way contact messages for a website. To the website owner ore admin.
+    fast and secure one way contact messages for a website. To the website owner or admin.
 
     With this system in place, website scanners or email ants
     have no way of accessing emails for illegal purposes.
diff --git a/htdocs/cgi-bin/index.cnf b/htdocs/cgi-bin/index.cnf
index 8d0d9af..ed93bd3 100644
--- a/htdocs/cgi-bin/index.cnf
+++ b/htdocs/cgi-bin/index.cnf
@@ -45,11 +45,21 @@
 
     #content {
         border: 1px solid gray;
-        text-align: left;
+        border-top:0;
+        text-align: left !important;
         vertical-align: middle;
-        margin:5px;
+        /*margin:5px;*/
         background: rgba(0, 223, 246, 0.13);
     }
+    #tabspanels > div {
+        border: none;
+        text-align:left !important;
+        padding: 0;
+        border-width: 0;
+    }
+    .no-top-border {
+        border-top: none;
+    }
     .textual {
         width: 40%;
     }
@@ -59,7 +69,10 @@
         padding-right:  5pt;
     }
     #content ul {
-        padding-left: 20px;
+        background: transparent;
+        color:black;
+        margin: 0;
+        padding:5px;
     }
     #content li {
         padding: 0px;
@@ -93,8 +106,12 @@
     .md_doc {
         background: white;
         border: 1px solid gray;
+        border-top: 0;
         padding: 10px; margin: 5px;
         text-align: left;
+        overflow-y:scroll;
+        color:black;
+        margin:0 auto;
     }
 
     .md_doc ul{
@@ -242,8 +259,61 @@
         background: #ccffff;
         text-decoration-style: wavy;
         filter: drop-shadow(    10px 8px 5px #3e6f70);
+        z-index:10;
+    }
+
+    div#tabs  {
+        background:transparent;
+        border:0;
+        padding: 0;
     }
 
+    div#tabs ul  {
+        background:transparent;
+    }
+
+    div#tabs li {
+        font-style: normal;
+        font-weight: bolder;
+        padding:1px;
+        border-top-left-radius:15px;
+        border-top-right-radius:15px;
+        border-bottom: 0;
+        margin-top: 0;
+
+    }
+
+/* Default:
+.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
+  float: left;
+  padding: .5em 1em;
+  text-decoration: none;
+}
+*/
+
+ div#tabs .ui-tabs-anchor {
+    padding: .01em 1em;
+ }
+ div#tabs ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header, .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
+  border: 1px solid #050506;
+  background: transparent;
+  font-style: normal;
+  font-weight: normal;
+  margin-top: 0px;
+  border-bottom: 0;
+ }
+
+ div#tabspanels .ui-state-active a {
+color: #472f80;
+text-decoration-line: underline;
+ }
+
+#menu_page .menu_head a {
+    background: aquamarine;
+}
+
+
+
 ]#]
 >STYLE>
 
@@ -257,6 +327,7 @@
   import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
   mermaid.initialize({ startOnLoad: true });
   window.mermaid = mermaid;
+
 ]#]
 >SCRIPT>
 
@@ -270,7 +341,7 @@ function onIndexBodyLoad(){
         function(e){
             e.preventDefault();
             e.target.setAttribute("style","color:  rgb(136, 58, 200);font-weight: bolder;font-style: italic");
-            $("#status").html("Loading: " + e.target.href).show().fadeOut(3000);
+            $("#status").html("Loading: " + e.target.href).show();
             $.post('index.cgi', {action:'load', doc:e.target.getAttribute('href')}, loadDocResult).fail(
                     function(response) {$('#doc_display').html("Service Error: "+response.status,response.responseText)}
             );
@@ -278,16 +349,32 @@ function onIndexBodyLoad(){
     );
     $("#content a").prop("visitied",false);
     onBodyLoadGeneric();
+
+    $( function() {
+        $( "#tabs" ).tabs();
+    });
+    $( "#tabs" ).show();
 }
 function loadDocResult(content){
     $('#doc_display').html(content);
+    $("#status").fadeOut(1000);
     $(document).scrollTop($("#doc_display").offset().top);
-    window.mermaid.run();
+    if(window.mermaid){
+       window.mermaid.run();
+    }
+    $('#tab_display').click();
+}
+function gotoTabDirListing(){
+    $('#tab_dir_listing').click();
+}
+function gotoTabDisplay(){
+    $('#tab_display').click();
 }
 ]#]
 >SCRIPT>
 
 
+
 >>HEADER>TREE>
 
 
@@ -314,7 +401,10 @@ function loadDocResult(content){
         <span class="ui-icon ui-icon-arrowthick-1-n" style="float:none;"></span></a>
     </span>
     <hr>
-    <a class="ui-button ui-corner-all ui-widget" href="index.cgi">Index</a><hr>
+    <a class="ui-button ui-corner-all ui-widget" href="index.cgi">Index</a><br><br>
+    <a class="ui-button ui-corner-all ui-widget" href="#htop" onclick="gotoTabDirListing()">&lt; Listing &gt;</a><br><br>
+    <a class="ui-button ui-corner-all ui-widget" href="#htop" onclick="gotoTabDisplay()">&lt; Display &gt;</a>
+    <hr>
     <a class="ui-button ui-corner-all ui-widget" href="main.cgi">Life Log</a><hr>
     <a class="ui-button ui-corner-all ui-widget" onclick="return fetchFeeds()">RSS Feeds</a>
 >#>
@@ -339,13 +429,42 @@ style:"height:100vh"
               class:span_status
               <#<Page getting ready...>#>
             >span>
+
             <div<
-                id:content
-                style="height:auto"
-                <*<PAGE_CONTENT>*>
+            id="tabs"
+            style="height:auto;display:none;"
+                <ul<
+                <#<
+                    <li><a id="tab_dir_listing" href="#listing" selected>Dir</a></li>
+                    <li><a id="tab_display" href="#display">Display</a></li>
+                >#>
+                >ul>
+                <div<
+                    id="tabspanels"
+                    class:no-top-border
+                        <div<
+                            id="listing"
+                            class="no-top-border"
+                            <div<
+                            id="content"
+                            <*<PAGE_CONTENT>*>
+                            >div>
+                        >div>
+                        <div<
+                            id="display"
+                            class="ui-state-active no-top-border"
+                            <div<
+                                    id:doc_display
+                                    class:md_doc
+                                    <*<EMPTY_TAB_INFO>*>
+                            >div>
+                        >div>
+                >div>
             >div>
+
+
             <div<
-            id:doc_display
+            id:doc_display_bottom
             class:md_doc
                 <*<INFO_MD>*>
             >div>
@@ -365,14 +484,24 @@ style:"height:100vh"
         <div<
             id:footer
             <*<PAGE_FOOT>*>
-            <span<&#8971;&#8593;>span>
+            <span<&#8968;>span>
+                        <a<
+                            href:#top
+                            title:Goto top of page.
+                            onClick: gotoTabDirListing()
+                            <#<Show Dir Listing>#>
+                        >a>
+
+            <span<&#8971;&nbsp;&#8968;>span>
                         <a<
                             id:code
                             href:#top
                             title:Go to top of page.
                             <#<To Top Of Page>#>
                         >a>
-            <span<&#8968;>span>
+
+
+            <span<&#8971;>span>
                                                         <a<
                                                             name: bottom
                                                         >a>
@@ -383,17 +512,20 @@ style:"height:100vh"
 
 >>PAGE>TREE>
 
+<<EMPTY_TAB_INFO<ESCAPED>
+### Tab is currently empty!
+\>Please, select a link from the [directory listing](#top|onclick="gotoTabDirListing()") above.**
+>>
 
 <<INFO_MD<ESCAPED>
 
-**Now, if you please, select a link from the directory listing above.**
-
-
 ### INFO
 \> This Page is the Documentation listing coming with the [LifeLog](https://github.com/wbudic/LifeLog) Application.
 \>
 \>[Open Source License](https://choosealicense.com/licenses/isc/)
 
+**Now, if you please, select a link from the [directory listing](#top|onclick="gotoTabDirListing()") above.**
+
 <center>Page brought to you by HTMLIndexProcessorPlugin v.<*<HTMLIndexProcessorPlugin::VERSION>*> in Moon Stage (beta).</center>
 
 >>
@@ -409,5 +541,10 @@ style:"height:100vh"
     subroutine  : convert
     property    : INFO_MD
 >>
+<<INFO_MD_TO_HTM2L<PLUGIN> _HAS_PROCESSING_PRIORITY_
+    package     : MarkdownPlugin
+    subroutine  : convert
+    property    : EMPTY_TAB_INFO
+>>
 <<1>>
 
diff --git a/htdocs/cgi-bin/system/modules/HTMLProcessorPlugin.pm b/htdocs/cgi-bin/system/modules/HTMLProcessorPlugin.pm
index 2977a31..0380f04 100644
--- a/htdocs/cgi-bin/system/modules/HTMLProcessorPlugin.pm
+++ b/htdocs/cgi-bin/system/modules/HTMLProcessorPlugin.pm
@@ -28,7 +28,7 @@ sub new ($class, $plugin){
 sub convert ($self, $parser, $property) {
     my ($bfHDR,$style,$jscript,$title, $link, $body_attrs, $header)=("","","","","","","");
     $self->{CNFParser} = $parser;
-     
+
     my $tree = $parser->anon($property);
     die "Tree property '$property' is not available!" if(!$tree or ref($tree) ne 'CNFNode');
 
@@ -48,19 +48,19 @@ try{
             foreach (@$arr){
                 my $v = $_->val();
                 $bfHDR .= qq(\t<script src="$v"></script>\n);
-            } 
+            }
             # Glob find '/*'  now has guaranteed array cast derefence return. Even if nothing found. Some folks will cringe on that. Ahahaha!
-            $arr = $link  -> find('STYLE/*'); 
+            $arr = $link  -> find('STYLE/*');
             foreach (@$arr){
                 $style = "\n<style>\n".  $_ -> val()."</style>"
             }
             $arr = $link  -> find('JAVASCRIPT/*');
             foreach (@$arr){
                 $jscript = "\n<script>\n".  $_ -> val()."</script>"
-            }            
+            }
        }
-       
-       delete $tree -> {'HEADER'};       
+
+       delete $tree -> {'HEADER'};
     }
 
     my $buffer = qq($header
@@ -69,11 +69,11 @@ try{
 <title>$title</title>$bfHDR $style $jscript
 </head>
 );
-    
+
     $buffer .= qq(<body$body_attrs>\n<div class="main"><div class="divTableBody">\n);
-        foreach 
-        my $node($tree->nodes()){  
-        my $bf   = build($parser, $node);     
+        foreach
+        my $node($tree->nodes()){
+        my $bf   = build($parser, $node);
         $buffer .= "$bf\n" if $node;
         }
     $buffer .= "\n</div></div>\n</body>\n</html>\n";
@@ -88,7 +88,7 @@ try{
 
 ###
 # Builds the html version out of a CNFNode.
-# CNFNode with specific tags here are converted also here, 
+# CNFNode with specific tags here are converted also here,
 # those that are out of the scope for normal standard HTML tags.
 # i.e. HTML doesn't have row and cell tags. Neither has meta links syntax.
 ###
@@ -102,14 +102,14 @@ sub build {
         $bf .= "\t"x$tabs."<div".placeAttributes($node).">\n"."\t"x$tabs."<div>";
             foreach my $n($node->nodes()){
                 if($n->{'_'} ne '#'){
-                    my $b = build($parser, $n, $tabs+1);     
+                    my $b = build($parser, $n, $tabs+1);
                     $bf .= "$b\n" if $b;
                 }
             }
             if($node->{'#'}){
                 my $v = $node->val();
                 $v =~ s/\n\n+/\<\/br>\n/gs;
-                $bf .= "\t<div>\n\t<p>\n".$v."</p>\n\t</div>\n"; 
+                $bf .= "\t<div>\n\t<p>\n".$v."</p>\n\t</div>\n";
             }
         $bf .= "\t</div>\t</div>\n"
     }elsif( $name eq 'row' || $name eq 'cell' ){
@@ -120,13 +120,13 @@ sub build {
                     $bf .= "$b\n" if $b;
                 }
             }
-        $bf .= $node->val()."\n" if $node->{'#'};   
+        $bf .= $node->val()."\n" if $node->{'#'};
         $bf .= "\t"x$tabs."</div>"
     }elsif( $name eq 'img' ){
         $bf .= "\t\t<img".placeAttributes($node)."/>\n";
     }elsif($name eq 'list_images'){
         my $paths = $node->{'@@'};
-        foreach my $ndp (@$paths){            
+        foreach my $ndp (@$paths){
             my $path = $ndp -> val();
             my @ext = split(',',"jpg,jpeg,png,gif");
             my $exp = " ".$path."/*.". join (" ".$path."/*.", @ext);
@@ -139,20 +139,20 @@ sub build {
                 $bf .= qq(\t<div class='row'><div class='cell'>);
                 $bf .= qq(\t<a href="$enc"><img src="$enc" with='120' height='120'><br>$fn</a>\n</div></div>\n);
             }
-        }    
+        }
     }elsif($node->{'*'}){ #Links are already captured, in future this might be needed as a relink from here for dynamic stuff?
             my $lval = $node->{'*'};
-            if($name eq 'file_list_html'){ #Special case where html links are provided.                
+            if($name eq 'file_list_html'){ #Special case where html links are provided.
                 foreach(split(/\n/,$lval)){
                      $bf .= qq( [ $_ ] |) if $_
                 }
                 $bf =~ s/\|$//g;
             }else{ #Generic included link value.
                 #is there property data for it?
-                my $prop = $parser->data()->{$node->name()};        
+                my $prop = $parser->data()->{$node->name()};
                 warn "Not found as property link -> ".$node->name() if !$prop;
                 if($prop){
-                    $bf .= $$prop;     
+                    $bf .= $$prop;
                 }else{
                     $bf .= $lval;
                 }
@@ -160,9 +160,9 @@ sub build {
     }
     else{
         $bf .= "\t"x$tabs."<".$node->name().placeAttributes($node).">";
-            foreach my $n($node->nodes()){                 
+            foreach my $n($node->nodes()){
                     my $b = build($parser, $n,$tabs+1);
-                    $bf .= "$b\n" if $b;        
+                    $bf .= "$b\n" if $b;
             }
         $bf .= $node->val() if $node->{'#'};
         $bf .= "</".$node->name().">";
@@ -181,7 +181,7 @@ sub placeAttributes {
         if(@$_[0] ne '#' && @$_[0] ne '_'){
            if(@$_[1]){
               $ret .= " ".@$_[0]."=\"".@$_[1]."\"";
-           }else{ 
+           }else{
               $ret .= " ".@$_[0]." ";
            }
         }
diff --git a/htdocs/cgi-bin/system/modules/MarkdownPlugin.pm b/htdocs/cgi-bin/system/modules/MarkdownPlugin.pm
index 1636665..39484d9 100644
--- a/htdocs/cgi-bin/system/modules/MarkdownPlugin.pm
+++ b/htdocs/cgi-bin/system/modules/MarkdownPlugin.pm
@@ -699,6 +699,7 @@ sub propValCNF($v){
     return $v;
 }
 
+
 sub style ($script){
     MarkdownPluginException->throw(error=>"Invalid argument passed as script!",show_trace=>1) if !$script;
     #Links <https://duckduckgo.com>
@@ -722,10 +723,16 @@ sub style ($script){
     #Images
     $ret =~ s/!\[(.*)\]\((.*)\)/\<div class="div_img"><img class="md_img" src=\"$2\"\ alt=\"$1\"\/><\/div>/;
     #Links [Duck Duck Go](https://duckduckgo.com)
-    $ret =~ s/\[(.*)\]\((.*)\)/\<a href=\"$2\"\>$1\<\/a\>/;
+    $ret =~ s/\[(.*)\]\((.*)\)/&styleHREF($1,$2)/e;
     return \$ret;
 }
 
+sub styleHREF($desc,$specs){
+    my @arr = ($specs=~m/[^|]+/g);
+    my $attrs =""; $attrs .= " ".$arr[$_] foreach(1..$#arr);
+return qq(<a href="$arr[0]"$attrs>$desc</a>)
+}
+
 ###
 # Style sheet used  for HTML conversion. NOTICE - Style sheets overide sequentionaly in order of apperance.
 # Link with: <*<MarkdownPlug::CSS>*> in a TREE instructed property.
diff --git a/htdocs/cgi-bin/wsrc/images/page-bck-std.jpg b/htdocs/cgi-bin/wsrc/images/page-bck-std.jpg
new file mode 100644
index 0000000..bb49c93
Binary files /dev/null and b/htdocs/cgi-bin/wsrc/images/page-bck-std.jpg differ
diff --git a/htdocs/cgi-bin/wsrc/images/page-bck-std.png b/htdocs/cgi-bin/wsrc/images/page-bck-std.png
index 649c175..4ab71a5 100644
Binary files a/htdocs/cgi-bin/wsrc/images/page-bck-std.png and b/htdocs/cgi-bin/wsrc/images/page-bck-std.png differ
diff --git a/htdocs/cgi-bin/wsrc/main.css b/htdocs/cgi-bin/wsrc/main.css
index c371ba1..9bd6815 100644
--- a/htdocs/cgi-bin/wsrc/main.css
+++ b/htdocs/cgi-bin/wsrc/main.css
@@ -1,9 +1,9 @@
 body{
     font-family: Segoe UI,Helvetica,Bookman,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
     font-size: 14px;
-    margin: 0;
-    padding:0;
-    background-image: url('images/page-bck-std.png');
+    /*margin: 0;
+    padding:0;*/
+    background-image: url('images/page-bck-std.jpg');
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;
diff --git a/htdocs/testDirList.html b/htdocs/testDirList.html
new file mode 100644
index 0000000..c3e11dd
--- /dev/null
+++ b/htdocs/testDirList.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
+<style>
+div#tabs li {
+
+font-style: italic;
+font-weight: bolder;
+margin-right: 10px;
+border-top-left-radius:15px;
+border-top-right-radius:15px;
+border-bottom: 0;
+margin-top: 0;
+}
+div#tabs ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
+  border: 1px solid #050506;
+  background: rgb(4, 153, 94);
+  font-weight: normal;
+  margin-top: 0px;
+  border-bottom: 0;
+}
+div#tabs-panels .ntb{
+  border-top: none !important;
+}
+.lihi{
+  background-color: aquamarine;
+
+}
+</style>
+
+<script src="cgi-bin/wsrc/jquery.js"></script>
+<script src="cgi-bin/wsrc/jquery-ui.js"></script>
+<script>
+  var PREV_TAB = "";
+  $( function() {
+    $( "#tabs" ).tabs();
+  } );
+  </script>
+</head>
+<body>
+
+<div class="wrapper">
+    <h2 id="tabs-title">How our company can help you</h2>
+
+    <div id="tabs">
+      <ul>
+        <li><a href="#advertising" selected>Advertising</a></li>
+        <li><a href="#social-media">Socials</a></li>
+        <li><a href="#content-marketing">Marketing</a></li>
+        <li><a href="#email">Email</a></li>
+      </ul>
+
+      <div id="tabs-panels">
+        <div id="advertising" class="ui-state-active ntb">
+          <p>
+            A marketing company can use targeted advertising to reach specific
+            audiences based on demographics, interests, and behaviors. This
+            can increase the effectiveness of advertising campaigns and
+            improve return on investment.
+          </p>
+        </div>
+        <div id="social-media" class="ui-state-active ntb">
+          <p>
+            A marketing company can leverage social media platforms to engage
+            with customers and promote products or services. Social media can
+            also be used to gather customer feedback and insights to inform
+            future marketing strategies.
+          </p>
+        </div>
+        <div id="content-marketing" class="ui-state-active ntb">
+          <p>
+            A marketing company can use content marketing to attract and
+            retain customers by creating and sharing valuable and relevant
+            content. This can help to establish the company as a thought
+            leader in its industry and build trust with customers.
+          </p>
+        </div>
+        <div id="email">
+          <p>
+            A marketing company can use email campaigns to communicate with
+            customers and promote products or services. Email campaigns can be
+            personalized and targeted to specific audiences to increase their
+            effectiveness.
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- filler content -->
+
+    <section class="flow">
+      <h2>More content here</h2>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod officia
+        molestias alias optio aliquam totam est necessitatibus similique cum
+        vero, iste dolorum debitis ex fuga minima? Delectus nostrum maxime
+        soluta.
+      </p>
+      <p>
+        Itaque tempore <a href="#">est rerum quidem</a> nostrum odio, saepe
+        consequatur minus atque numquam voluptas quos veniam cumque, modi,
+        nisi asperiores hic expedita fuga quod ratione veritatis tenetur?
+        Velit, inventore? Possimus, cumque.
+      </p>
+      <p>
+        Quia ullam repudiandae, commodi eius vitae adipisci laudantium numquam
+        voluptas consectetur provident quo, cum vel nihil suscipit nam earum
+        omnis. Aliquid reprehenderit voluptatem impedit nemo nulla quas
+        ratione corporis ducimus!
+      </p>
+      <p>
+        Itaque tempore <a href="#">est rerum quidem</a> nostrum odio, saepe
+        consequatur minus atque numquam voluptas quos veniam cumque, modi,
+        nisi asperiores hic expedita fuga quod ratione veritatis tenetur?
+        Velit, inventore? Possimus, cumque.
+      </p>
+      Uncaught ReferenceError: can't access lexical declaration 'PREV_TAB' before initialization
+    </section>
+  </div>
+
+</body>
+<script>
+  $("#tabs ul").children().on('click',function(e){
+    //this.preventDefault();
+    if(PREV_TAB){
+     //  PREV_TAB.css('background-color', "aliceblue");
+    }
+    $(this).css('font-style', "normal");
+   // $(this).css('background-color', "aquamarine");
+   // $(this).css('color', "black");
+    console.log("Got click on"+e.target);
+    PREV_TAB = $(this);
+  });
+</script>
+
+</html>
\ No newline at end of file