[Noalyss-commit] [noalyss] 10/15: Improve : Select_Box , placement

[Dany De Bontridder]

sparkyx pushed a commit to branch master
in repository noalyss.

commit 846c5a8eea6cc196e845c201ea47d2387bec85c6
Author: sparkyx <danydb@noalyss.eu>
AuthorDate: Mon Jan 25 18:40:20 2021 +0100

    Improve : Select_Box , placement
---
 html/js/infobulle.js                      |  44 ++++++++++++
 include/lib/select_box.class.php          | 110 +++---------------------------
 include/template/ledger_detail_bottom.php |   2 +-
 scenario/select-box-test.php              |  35 ++++++----
 4 files changed, 75 insertions(+), 116 deletions(-)

diff --git a/html/js/infobulle.js b/html/js/infobulle.js
index 48ae712..f283d5c 100644
--- a/html/js/infobulle.js
+++ b/html/js/infobulle.js
@@ -65,3 +65,47 @@ function displayBulle(p_comment)  {
     d.style.left=posX+offsetX+"px";
     d.style.visibility="visible";
 }
+
+/**
+ *
+ * @param p_name
+ * @see select_box.class.php
+ */
+function displaySelectBox(p_name) {
+    try {
+        if (! document.getElementById("select_box_content") ) {
+
+            var newDiv=new Element("div");
+            newDiv.id="select_box_content";
+            document.body.appendChild(newDiv);
+            newDiv.addClassName("select_box");
+            $("select_box_content").onmouseleave=function() {
+                try {
+                    var newDiv=$("select_box_content");
+                    newDiv.setStyle({display:"none"});
+                } catch(e) {
+                    alert(e.message);
+                }
+            }
+        } else {
+            var newDiv=document.getElementById("select_box_content");
+        }
+        newDiv.innerHTML=$("select_box"+p_name).innerHTML;
+        var viewport = document.viewport.getDimensions();
+        newDiv.style.top=posY+"px";
+
+        
newDiv.style.left=document.getElementById(p_name+"_bt").offsetLeft+"px";
+        newDiv.setStyle({display:"block",position:"absolute","z-index":999});
+
+        if ( $("search_"+p_name+"_list") ) {
+            var sTmp = newDiv.innerHTML;
+            var regex=new RegExp(p_name+"_list","g");
+            sTmp = sTmp.replace(regex,p_name+"_t_list");
+            newDiv.innerHTML=sTmp;
+            $("search_"+p_name+"_t_list").focus();
+        }
+    } catch(e) {
+        alert(e.message);
+    }
+
+}
diff --git a/include/lib/select_box.class.php b/include/lib/select_box.class.php
index 85b768b..d3a0088 100644
--- a/include/lib/select_box.class.php
+++ b/include/lib/select_box.class.php
@@ -109,109 +109,14 @@ class Select_Box
         switch ($this->position)
         {
             case 'absolute':
-                // Show when click
-                $javascript=sprintf('
-                    $("%s_bt").onclick=function() {
-                        try {
-                          
-                            
-                            if (! document.getElementById("select_box%s") ) {
-                            
-                                var newDiv=new Element("div");
-                                newDiv.id="select_box%s";
-                                document.body.appendChild(newDiv);
-                                newDiv.addClassName("select_box");
-                                $("select_box%s").onmouseleave=function() {
-                                        try {
-                                           var newDiv=$("select_box%s");
-                                           newDiv.setStyle({display:"none"});
-                                        } catch(e) {
-                                             alert(e.message);
-                                        }
-                                       }
-                            } else {
-                                 var 
newDiv=document.getElementById("select_box%s");
-                            }
-                            newDiv.innerHTML=$("select_box%s").innerHTML;
-                            var pos=$("%s_bt").cumulativeOffset();
-                            var nTop=pos.top;
-                            var viewport = document.viewport.getDimensions();
-                            if ( nTop> viewport.height-newDiv.getHeight()-20) 
{ nTop-=newDiv.getHeight()-5}
-                            
-                            
newDiv.setStyle({display:"block",position:"absolute",top:nTop+"px",left:pos.left+5+"px","z-index":999});
-                           
-                           if ( $("search_%s") ) { $("search_%s").focus();}
-                        } catch(e) {
-                             alert(e.message);
-                        }
-                       }
-                        ', $this->id, $this->id, $this->id,$this->id, 
$this->id, $this->id, $this->id, $this->id, $list_id, $list_id);
-
-                break;
             case "normal":
-
-                // Show when click
-                $javascript=sprintf('$("%s_bt").onclick=function() {
-                        try {
-                           var newDiv=$("select_box%s");
-                           var pos=$("%s_bt").cumulativeOffset();
-                           
newDiv.setStyle({display:"block",position:"fixed",top:pos.top+25+"px",left:pos.left+5+"px"});
-
-                           if ( $("search_%s") ) { $("search_%s").focus();}
-
-                        } catch(e) {
-                             alert(e.message);
-                        }
-                       }
-                        ', $this->id, $this->id, $this->id, $list_id, 
$list_id);
-                // Hide when out of the zone
-                
$javascript.=sprintf('$("select_box%s").onmouseleave=function() {
-                try {
-                   var newDiv=$("select_box%s");
-                   newDiv.setStyle({display:"none"});
-                } catch(e) {
-                     alert(e.message);
-                }
-               }', $this->id, $this->id);
-                break;
             case "in-absolute":
                 // Show when click
                 $javascript=sprintf('
                     $("%s_bt").onclick=function() {
-                        try {
-                          
-                            
-                            if (! 
document.getElementById("select_box_content") ) {
-                            
-                                var newDiv=new Element("div");
-                                newDiv.id="select_box_content";
-                                document.body.appendChild(newDiv);
-                                newDiv.addClassName("select_box");
-                                
$("select_box_content").onmouseleave=function() {
-                                        try {
-                                           var newDiv=$("select_box_content");
-                                           newDiv.setStyle({display:"none"});
-                                        } catch(e) {
-                                             alert(e.message);
-                                        }
-                                       }
-                            } else {
-                                 var 
newDiv=document.getElementById("select_box_content");
-                            }
-                            newDiv.innerHTML=$("select_box%s").innerHTML;
-                            var pos=$("%s_bt").cumulativeOffset();
-                            var nTop=pos.top;
-                            var viewport = document.viewport.getDimensions();
-                            if ( nTop> viewport.height-newDiv.getHeight()-20) 
{ nTop-=newDiv.getHeight()-5}
-                            
-                            
newDiv.setStyle({display:"block",position:"absolute",top:nTop+"px",left:pos.left+5+"px","z-index":999});
-                           
-                           if ( $("search_%s") ) { $("search_%s").focus();}
-                        } catch(e) {
-                             alert(e.message);
-                        }
+                        displaySelectBox("%s");
                        }
-                        ', $this->id, $this->id, $this->id, $list_id, 
$list_id);
+                        ', $this->id, $this->id);
 
                 break;
 
@@ -228,12 +133,13 @@ class Select_Box
         // Show when click
         $javascript=$this->compute_position();
 
-
-
         // display the button
-        printf('<input type="button" class="smallbutton " id="%s_bt" value="%s 
&#x25BE;" >', $this->id, $this->value);
-        printf('<input type="hidden" id="%s" name="%s" value="%s">', 
$this->id, $this->id, $this->default_value);
-        printf('<div class="select_box " id="select_box%s" style="%s">', 
$this->id, $this->style_box);
+        printf('<input type="button" class="smallbutton " id="%s_bt" value="%s 
&#x25BE;" >',
+            $this->id, $this->value);
+        printf('<input type="hidden" id="%s" name="%s" value="%s">',
+            $this->id, $this->id, $this->default_value);
+        printf('<div class="select_box " id="select_box%s" style="%s">',
+            $this->id, $this->style_box);
 
         // Show the filter if there is one, 
         if ($this->filter!="")
diff --git a/include/template/ledger_detail_bottom.php 
b/include/template/ledger_detail_bottom.php
index 3675ad2..fd22f8b 100644
--- a/include/template/ledger_detail_bottom.php
+++ b/include/template/ledger_detail_bottom.php
@@ -14,7 +14,7 @@
 require_once NOALYSS_INCLUDE."/lib/select_box.class.php";
 
 $select_box=new \Select_Box("sb_".$jr_id, _("Autre action"));
-$select_box->set_position("in-absolute");
+$select_box->set_position("normal");
 $cn=Dossier::connect();
 // Contains all the linked actions
 $a_followup = Follow_Up::get_all_operation($jr_id);
diff --git a/scenario/select-box-test.php b/scenario/select-box-test.php
index d9dc0a9..9825045 100644
--- a/scenario/select-box-test.php
+++ b/scenario/select-box-test.php
@@ -4,15 +4,15 @@
 
     <style>
       .select_box {
-      border:solid 0.5px darkblue;
-      background:white;
-      width:455px;
-      max-width:250px;
-      padding:3px;
-      margin:0px;
-      display:none;
-      top:-17px;
-      position:absolute;
+          border:solid 0.5px darkblue;
+          background:white;
+          width:455px;
+          max-width:250px;
+          padding:3px;
+          margin:0px;
+          display:none;
+          position:absolute;
+          z-index:10;
       }
      div.select_box ul {
        list-style:none;
@@ -44,10 +44,13 @@ div.select_box a:hover,div.select_box ul li:hover {
             Le CSS est important , surtout la position, il faut qu'il soit 
dans 
             un élément positionné en absolu.
         </p>
+            <h2>in-absolute</h2>
         <p style="float : static">
   <?php
      require_once NOALYSS_INCLUDE.'/lib/select_box.class.php';
-     $a=new Select_Box("test","click me !");
+     $a=new Select_Box("test","position in-absolute click me !");
+     $a->set_position("in-absolute");
+
      $a->add_url("List (link)","?id=5&".Dossier::get());
      $a->add_javascript("Hello (Javascript)","alert('hello')");
      $a->add_value("Value = 10 (set value)",10);
@@ -56,10 +59,15 @@ div.select_box a:hover,div.select_box ul li:hover {
 
      echo $a->input();
      
-     ?>   
+     ?>
+        </p>
+        <h2>normal and absolute</h2>
+        <p>
      <?php
-     $a=new Select_Box("test2","click me !");
+     $a=new Select_Box("test2","position normal click me !");
      $a->set_filter(_("recherche"));
+      $a->set_position("normal");
+
      $a->add_value("Value = 10 (set value)",10);
      $a->add_value("Value = 1 (set value)",1);
      $a->add_value("Value = 17 (set value)",15);
@@ -74,7 +82,8 @@ div.select_box a:hover,div.select_box ul li:hover {
 
      echo $a->input();
      
-     ?>   
+     ?>
         </p>
+
         </div>
 </body>