[Noalyss-commit] [noalyss] 22/46: HtmlOutput tab , add mode row

[Dany De Bontridder]

sparkyx pushed a commit to branch master
in repository noalyss.

commit 6c4c728d17e6415353c46dda5776113d8b4332b3
Author: Dany De Bontridder <address@hidden>
AuthorDate: Fri Mar 20 20:05:08 2020 +0100

    HtmlOutput tab , add mode row
---
 html/style-classic.css                | 105 +++++++++++++++++++++++++-
 html/style-classic7.css               | 105 +++++++++++++++++++++++++-
 html/style-light.css                  | 105 +++++++++++++++++++++++++-
 include/lib/output_html_tab.class.php | 137 +++++++++++++++++++++++++++++-----
 4 files changed, 430 insertions(+), 22 deletions(-)

diff --git a/html/style-classic.css b/html/style-classic.css
index ae70d41..c24061e 100644
--- a/html/style-classic.css
+++ b/html/style-classic.css
@@ -2316,4 +2316,107 @@ span.warning {
     background-color: #eddadd;
     padding:10px;
     border:red solid 1px;
-}
\ No newline at end of file
+}
+ 
/**********************************************************************************************************************/
+ /* LI as list
+ * Tabs like row
+ ****************************************************************************/
+ ul.tab_row {
+     padding-top: 15px;
+     display:block;
+     width:96%;
+     padding-left:2%;
+     padding-right:2%;
+     list-style: none;
+     margin-left:2px;
+ }
+ ul.tab_row  a  {
+     display:block;
+     width:100%;
+ }
+ li.tab_row_selected {
+     display:block;
+     width:90%;
+     background: #C2E3FC; /* Old browsers */
+     background: -moz-linear-gradient(top, #C2E3FC 0%, #6393c1 100%); /* 
FF3.6+ */
+     background: -webkit-gradient(linear, left top, left bottom, 
color-stop(0%,#C2E3FC), color-stop(100%,#6393c1)); /* Chrome,Safari4+ */
+     background: -webkit-linear-gradient(top, #C2E3FC 0%,#6393c1 100%); /* 
Chrome10+,Safari5.1+ */
+     background: -o-linear-gradient(top, #C2E3FC 0%,#6393c1 100%); /* Opera 
11.10+ */
+     background: -ms-linear-gradient(top, #C2E3FC 0%,#6393c1 100%); /* IE10+ */
+     background: linear-gradient(to bottom, #C2E3FC 0%,#6393c1 100%); /* W3C */
+     filter: progid:DXImageTransform.Microsoft.gradient( 
startColorstr='#C2E3FC', endColorstr='#6393c1',GradientType=0 ); /* IE6-9 */
+     color:whitesmoke;
+     margin-left: 2px;
+     border-top-left-radius: 10px;
+     border-top-right-radius: 10px;
+     border:1px #879ed4 solid;
+     font-weight: bold;
+     padding:5px;
+     margin-top:13px;
+
+
+ }
+ li.tab_row {
+     display:block;
+     width:90%;
+     background-color: inherit;
+     color:inherit;/*! margin-left: 0px; */
+     /*! padding: 5px; */
+     /*! border-top-left-radius: 10px; */
+     /*! border-top-right-radius: 10px; */
+     border:1px #879ed4 solid;
+     background: whitesmoke;
+     margin-top:13px;
+
+ }
+ li.tab_row:hover {
+     display:block;
+     background-color: lightblue;
+     color:wheat;margin-left: 2px;
+     padding: 5px;
+     border-top-left-radius: 10px;
+     border-top-right-radius: 10px;
+     border:1px #879ed4 solid;
+     white-space: nowrap;
+
+ }
+ @media only screen and (min-width: 1280px) {
+     li.tab_row {
+         display:block;
+         background-color: inherit;
+
+
+         padding: 15px 7px 0px 10px;
+         border-top-left-radius: 10px;
+         border-top-right-radius: 10px;
+         border:1px #879ed4 solid;
+
+     }
+     li.tab_row:hover {
+         display:block;
+         background-color: lightblue;
+         color:wheat;margin-left: 2px;
+         padding: 15px 7px 0px 10px;
+         border-top-left-radius: 5px;
+         border-top-right-radius: 5px;
+         border:1px #879ed4 solid;
+     }
+     li.tab_row_selected {
+         padding: 12px 15px 15px 15px;
+     }
+ }
+ ul.tab_row a {
+     text-decoration: none;
+     color:inherit;
+     display:block;
+     white-space: nowrap;
+     width: 100%;
+     height: 100%;
+     cursor :pointer;
+ }
+ ul.tab_row a:hover {
+     text-decoration: none;
+     color:white;
+     display:block;
+     background-color: lightblue;
+ }
\ No newline at end of file
diff --git a/html/style-classic7.css b/html/style-classic7.css
index 51105a1..0842dec 100644
--- a/html/style-classic7.css
+++ b/html/style-classic7.css
@@ -2323,4 +2323,107 @@ span.warning {
     font-weight: bold;
     background-color: #eddadd;
     padding:10px;
-}
\ No newline at end of file
+}
+/**********************************************************************************************************************/
+ /* LI as list
+ * Tabs like row
+ ****************************************************************************/
+ ul.tab_row {
+     padding-top: 15px;
+     display:block;
+     width:96%;
+     padding-left:2%;
+     padding-right:2%;
+     list-style: none;
+     margin-left:2px;
+ }
+ ul.tab_row  a  {
+     display:block;
+     width:100%;
+ }
+ li.tab_row_selected {
+     display:block;
+     width:90%;
+     background: #C2E3FC; /* Old browsers */
+     background: -moz-linear-gradient(top, #C2E3FC 0%, #6393c1 100%); /* 
FF3.6+ */
+     background: -webkit-gradient(linear, left top, left bottom, 
color-stop(0%,#C2E3FC), color-stop(100%,#6393c1)); /* Chrome,Safari4+ */
+     background: -webkit-linear-gradient(top, #C2E3FC 0%,#6393c1 100%); /* 
Chrome10+,Safari5.1+ */
+     background: -o-linear-gradient(top, #C2E3FC 0%,#6393c1 100%); /* Opera 
11.10+ */
+     background: -ms-linear-gradient(top, #C2E3FC 0%,#6393c1 100%); /* IE10+ */
+     background: linear-gradient(to bottom, #C2E3FC 0%,#6393c1 100%); /* W3C */
+     filter: progid:DXImageTransform.Microsoft.gradient( 
startColorstr='#C2E3FC', endColorstr='#6393c1',GradientType=0 ); /* IE6-9 */
+     color:whitesmoke;
+     margin-left: 2px;
+     border-top-left-radius: 10px;
+     border-top-right-radius: 10px;
+     border:1px #879ed4 solid;
+     font-weight: bold;
+     padding:5px;
+      margin-top:13px;
+
+
+ }
+ li.tab_row {
+     display:block;
+     width:90%;
+     background-color: inherit;
+     color:inherit;/*! margin-left: 0px; */
+     /*! padding: 5px; */
+     /*! border-top-left-radius: 10px; */
+     /*! border-top-right-radius: 10px; */
+     border:1px #879ed4 solid;
+     background: whitesmoke;
+     margin-top:13px;
+
+ }
+ li.tab_row:hover {
+     display:block;
+     background-color: lightblue;
+     color:wheat;margin-left: 2px;
+     padding: 5px;
+     border-top-left-radius: 10px;
+     border-top-right-radius: 10px;
+     border:1px #879ed4 solid;
+     white-space: nowrap;
+
+ }
+ @media only screen and (min-width: 1280px) {
+     li.tab_row {
+         display:block;
+         background-color: inherit;
+
+
+         padding: 15px 7px 0px 10px; 
+         border-top-left-radius: 10px;
+         border-top-right-radius: 10px; 
+         border:1px #879ed4 solid;
+
+     }
+     li.tab_row:hover {
+         display:block;
+         background-color: lightblue;
+         color:wheat;margin-left: 2px;
+         padding: 15px 7px 0px 10px;
+         border-top-left-radius: 5px;
+         border-top-right-radius: 5px;
+         border:1px #879ed4 solid;
+     }
+     li.tab_row_selected {
+         padding: 12px 15px 15px 15px;
+     }
+ }
+ ul.tab_row a {
+     text-decoration: none;
+     color:inherit;
+     display:block;
+     white-space: nowrap;
+     width: 100%;
+     height: 100%;
+     cursor :pointer;
+ }
+ ul.tab_row a:hover {
+     text-decoration: none;
+     color:white;
+     display:block;
+     background-color: lightblue;
+ }
\ No newline at end of file
diff --git a/html/style-light.css b/html/style-light.css
index 1bb1762..df96649 100644
--- a/html/style-light.css
+++ b/html/style-light.css
@@ -2241,4 +2241,107 @@ span.warning {
     font-weight: bold;
     background-color: #eddadd;
     padding:10px;
-}
\ No newline at end of file
+}
+ 
/**********************************************************************************************************************/
+ /* LI as list
+ * Tabs like row
+ ****************************************************************************/
+ ul.tab_row {
+     padding-top: 15px;
+     display:block;
+     width:96%;
+     padding-left:2%;
+     padding-right:2%;
+     list-style: none;
+     margin-left:2px;
+ }
+ ul.tab_row  a  {
+     display:block;
+     width:100%;
+ }
+ li.tab_row_selected {
+     display:block;
+     width:90%;
+     background: #C2E3FC; /* Old browsers */
+     background: -moz-linear-gradient(top, #C2E3FC 0%, #6393c1 100%); /* 
FF3.6+ */
+     background: -webkit-gradient(linear, left top, left bottom, 
color-stop(0%,#C2E3FC), color-stop(100%,#6393c1)); /* Chrome,Safari4+ */
+     background: -webkit-linear-gradient(top, #C2E3FC 0%,#6393c1 100%); /* 
Chrome10+,Safari5.1+ */
+     background: -o-linear-gradient(top, #C2E3FC 0%,#6393c1 100%); /* Opera 
11.10+ */
+     background: -ms-linear-gradient(top, #C2E3FC 0%,#6393c1 100%); /* IE10+ */
+     background: linear-gradient(to bottom, #C2E3FC 0%,#6393c1 100%); /* W3C */
+     filter: progid:DXImageTransform.Microsoft.gradient( 
startColorstr='#C2E3FC', endColorstr='#6393c1',GradientType=0 ); /* IE6-9 */
+     color:whitesmoke;
+     margin-left: 2px;
+     border-top-left-radius: 10px;
+     border-top-right-radius: 10px;
+     border:1px #879ed4 solid;
+     font-weight: bold;
+     padding:5px;
+     margin-top:13px;
+
+
+ }
+ li.tab_row {
+     display:block;
+     width:90%;
+     background-color: inherit;
+     color:inherit;/*! margin-left: 0px; */
+     /*! padding: 5px; */
+     /*! border-top-left-radius: 10px; */
+     /*! border-top-right-radius: 10px; */
+     border:1px #879ed4 solid;
+     background: whitesmoke;
+     margin-top:13px;
+
+ }
+ li.tab_row:hover {
+     display:block;
+     background-color: lightblue;
+     color:wheat;margin-left: 2px;
+     padding: 5px;
+     border-top-left-radius: 10px;
+     border-top-right-radius: 10px;
+     border:1px #879ed4 solid;
+     white-space: nowrap;
+
+ }
+ @media only screen and (min-width: 1280px) {
+     li.tab_row {
+         display:block;
+         background-color: inherit;
+
+
+         padding: 15px 7px 0px 10px;
+         border-top-left-radius: 10px;
+         border-top-right-radius: 10px;
+         border:1px #879ed4 solid;
+
+     }
+     li.tab_row:hover {
+         display:block;
+         background-color: lightblue;
+         color:wheat;margin-left: 2px;
+         padding: 15px 7px 0px 10px;
+         border-top-left-radius: 5px;
+         border-top-right-radius: 5px;
+         border:1px #879ed4 solid;
+     }
+     li.tab_row_selected {
+         padding: 12px 15px 15px 15px;
+     }
+ }
+ ul.tab_row a {
+     text-decoration: none;
+     color:inherit;
+     display:block;
+     white-space: nowrap;
+     width: 100%;
+     height: 100%;
+     cursor :pointer;
+ }
+ ul.tab_row a:hover {
+     text-decoration: none;
+     color:white;
+     display:block;
+     background-color: lightblue;
+ }
\ No newline at end of file
diff --git a/include/lib/output_html_tab.class.php 
b/include/lib/output_html_tab.class.php
index 943faa4..cf54c58 100644
--- a/include/lib/output_html_tab.class.php
+++ b/include/lib/output_html_tab.class.php
@@ -37,24 +37,101 @@ class Output_Html_Tab
 {
 
     private $a_tabs; //!< array of html tabs
-
+    private $class_tab; //!< for normal tab
+    private $class_tab_selected; //!< for class_tab_selected
+    private $mode; //!< mode default tabs
     /**
      *@example html_tab.test.php
      */
     function __construct()
     {
         $this->a_tabs=[];
+        $this->class_tab="tabs";
+        $this->class_tab_selected="tabs_selected";
+    }
+
+    /**
+     * get the mode , possible value are row or tabs
+     * @return mixed
+     */
+    public function get_mode()
+    {
+        return $this->mode;
+        return $this;
+    }
+
+    /**
+     * set the mode , possible values are row or tabs
+     * @param mixed $mode
+     */
+    public function set_mode($mode)
+    {
+        if ($mode != "row" && $mode != "tab") {
+            throw new Exception(_("OUTPUTHTML070 Mode invalide"));
+        }
+        $this->mode = $mode;
+        if ($mode == "row") {
+            $this->set_class_tab_selected("tab_row_selected");
+            $this->set_class_tab("tab_row");
+        }
+        if ( $mode == "tab") {
+            $this->set_class_tab_selected("tabs_selected");
+            $this->set_class_tab("tabs");
+
+        }
+        return $this;
     }
 
     /**
-     * Add Html_Tab 
+     * Add Html_Tab
      * @param Html_Tab $p_html_tab
      */
     function add(Html_Tab $p_html_tab)
     {
         $this->a_tabs[]=clone $p_html_tab;
+
+    }
+
+    /**
+     * get the CSS class of tabs
+     * @return mixed
+     */
+    public function get_class_tab()
+    {
+        return $this->class_tab;
+        return $this;
     }
-    
+
+    /**
+     * set the CSS class of tabs, default is tabs
+     * @param mixed $class_tab
+     */
+    public function set_class_tab($class_tab)
+    {
+        $this->class_tab = $class_tab;
+        return $this;
+    }
+
+    /**
+     * get the CSS class of tabs_selected
+     * @return mixed
+     */
+    public function get_class_tab_selected()
+    {
+        return $this->class_tab_selected;
+        return $this;
+    }
+
+    /**
+     * set the CSS class of tabs, default is tabs_selected
+     * @param mixed $class_tab_selected
+     */
+    public function set_class_tab_selected($class_tab_selected)
+    {
+        $this->class_tab_selected = $class_tab_selected;
+        return $this;
+    }
+
     /**
      * Build the javascript to change the class name of the selected tab, hide 
other div and show the selected one
      * @param string $p_not_hidden id of the showed tab
@@ -66,20 +143,32 @@ class Output_Html_Tab
         $nb=count($this->a_tabs);
         for ($i =0 ; $i < $nb;$i++)
         {
-            if ( $this->a_tabs[$i]->get_id() != $p_not_hidden) {
-                $r .= sprintf("$('div%s').hide();",$this->a_tabs[$i]->get_id() 
);
-                $r .= 
sprintf("$('tab%s').className='tabs';",$this->a_tabs[$i]->get_id() );
-            } else {
-                $r .= sprintf("$('div%s').show();",$p_not_hidden );
-                $r .= 
sprintf("$('tab%s').className='tabs_selected';",$p_not_hidden );
-                
+            if ($this->get_mode()=="tab") {
+
+                if ( $this->a_tabs[$i]->get_id() != $p_not_hidden) {
+                    $r .= 
sprintf("$('div%s').hide();",$this->a_tabs[$i]->get_id() );
+                    $r .= 
sprintf("$('tab%s').className='%s';",$this->a_tabs[$i]->get_id(),$this->class_tab
 );
+                } else {
+                    $r .= sprintf("$('div%s').show();",$p_not_hidden );
+                    $r .= sprintf("$('tab%s').className='%s';",$p_not_hidden 
,$this->class_tab_selected);
+
+                }
+            } elseif ($this->get_mode()=="row") {
+                if ( $this->a_tabs[$i]->get_id() != $p_not_hidden) {
+                    $r .= sprintf("Effect.BlindUp('div%s',{duration : 
1.0});",$this->a_tabs[$i]->get_id() );
+                    $r .= 
sprintf("$('tab%s').className='%s';",$this->a_tabs[$i]->get_id(),$this->class_tab
 );
+                } else {
+                    $r .= sprintf("Effect.SlideDown('div%s',{duration : 
1.0});",$p_not_hidden );
+                    $r .= sprintf("$('tab%s').className='%s';",$p_not_hidden 
,$this->class_tab_selected);
+
+                }
             }
         }
         return $r;
     }
     /**
      * print the html + javascript code of the tabs and the div
-     * 
+     *
      */
     function output()
     {
@@ -88,11 +177,11 @@ class Output_Html_Tab
         {
             return;
         }
-        echo '<ul class="tabs">';
+        printf ( '<ul class="%s">',$this->class_tab);
         for ($i=0; $i<$nb; $i++)
         {
-            printf ('<li id="tab%s" class="tabs">',
-                    $this->a_tabs[$i]->get_id());
+            printf ('<li id="tab%s" class="%s">',
+                    $this->a_tabs[$i]->get_id(),$this->class_tab);
             switch ($this->a_tabs[$i]->get_mode())
             {
                 case 'link':
@@ -122,14 +211,24 @@ class Output_Html_Tab
                     break;
             }
             echo '</li>';
+            if ( $this->get_mode()=="row") {
+                $this->print_div($i);
+            }
         }
         echo '</ul>';
-        for ($i=0;$i<$nb;$i++)
-        {
-            printf('<div id="div%s" 
style="display:none;clear:both">',$this->a_tabs[$i]->get_id());
-            echo $this->a_tabs[$i]->get_content();
-            echo '</div>';
+        if ( $this->get_mode()=="tab" ) {
+            for ($i=0;$i<$nb;$i++)
+            {
+                $this->print_div($i);
+            }
+
         }
     }
+    private function print_div($p_index)
+    {
+        printf('<div id="div%s" 
style="display:none;clear:both">',$this->a_tabs[$p_index]->get_id());
+        echo $this->a_tabs[$p_index]->get_content();
+        echo '</div>';
 
+    }
 }