admingit/altocompta
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Select Box : improve position in floating element

Browse source
This commit is contained in:
Dany De Bontridder 2020-06-03 11:45:48 +02:00
parent 1f7610b894
commit 09398054ce
2 changed files with 101 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

3
html/js/scripts.js
View file

@ -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

123
include/lib/select_box.class.php
View file

@ -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,