[Noalyss-commit] [noalyss] 15/39: Select Box : improve position in floating element

[Dany De Bontridder]

sparkyx pushed a commit to branch master
in repository noalyss.

commit 09398054ce087dfab174729fa2ff71ec13c2c0bd
Author: Dany De Bontridder <danydb@noalyss.eu>
AuthorDate: Wed Jun 3 11:45:48 2020 +0200

    Select Box : improve position in floating element
---
 html/js/scripts.js               |   3 +
 include/lib/select_box.class.php | 123 +++++++++++++++++++++++++++++++--------
 2 files changed, 101 insertions(+), 25 deletions(-)

diff --git a/html/js/scripts.js b/html/js/scripts.js
index 631f6a8..404e99e 100644
--- a/html/js/scripts.js
+++ b/html/js/scripts.js
@@ -2969,6 +2969,8 @@ function init_scroll()
     up.innerHTML = '<a class="icon" 
onclick="document.getElementById(\'go_up\').hide()" 
style="float:right;font-size:70%">&#xe816;</a> <a class="icon" href="#up_top" 
>&#xe81a;</a><a href="javascript:show_calc()" class="icon">&#xf1ec;</a>';
     document.body.appendChild(up);
     window.onscroll = function () {
+        if ( document.getElementById("select_box_content") )
+            { 
document.getElementById("select_box_content").setStyle({display:"none"})};
         if (document.viewport.getScrollOffsets().top > 0) {
             if ($('go_up').visible() == false) {
                 $('go_up').setOpacity(0.65);
@@ -2979,6 +2981,7 @@ function init_scroll()
             $('go_up').hide();
         }
     }
+    
 }
 /**
  * Confirm a form thanks a modal dialog Box, it returns true if we agree 
otherwise
diff --git a/include/lib/select_box.class.php b/include/lib/select_box.class.php
index 82c5547..28e6bc7 100644
--- a/include/lib/select_box.class.php
+++ b/include/lib/select_box.class.php
@@ -36,7 +36,8 @@ class Select_Box
     private $cnt;
     private $filter; //!< allow a dynamic not case sensitive search
     var $default_value;
-
+    private $position ; //!< change depending if we are in an absolute block 
or not
+    
     /**
      * Default constructor
      * @param type $p_id javascript DOMid
@@ -52,6 +53,98 @@ class Select_Box
         $this->default_value=-1;
         $this->style_box="";
        $this->filter="";
+        $this->position="normal";
+    }
+    public function get_position()
+    {
+        return $this->position;
+    }
+
+    public function set_position($position)
+    {
+        if ( ! in_array($position,array("normal","in-absolute") ) ) {
+            throw new Exception("SB0005",EXC_PARAM_VALUE);
+        }
+        $this->position=$position;
+        return $this;
+    }
+
+   private function compute_position()
+    {
+        $list_id=sprintf('%s_list', $this->id);
+        switch ($this->position)
+        {
+            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);
+                        }
+                       }
+                        ', $this->id, $this->id, $this->id, $list_id, 
$list_id);
+               
+                        break;
+            
+            default:
+                break;
+        }
+        return $javascript;
     }
 
     function input()
@@ -59,36 +152,16 @@ class Select_Box
         $list_id=sprintf('%s_list',$this->id);
         
         // 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);
+        $javascript=$this->compute_position();
+        
         
-        // 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);
 
         // display the button
-        printf('<input type="button" class="smallbutton icon" id="%s_bt" 
value="%s &#x25BE;">',
+        printf('<input type="button" class="smallbutton icon " 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">',
+        printf('<div class="select_box " id="select_box%s" style="%s">',
                 $this->id, $this->style_box);
 
        // Show the filter if there is one,