Select Box : improve position in floating element
This commit is contained in:
parent
1f7610b894
commit
09398054ce
2 changed files with 101 additions and 25 deletions
|
|
@ -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 ▾">',
|
||||
printf('<input type="button" class="smallbutton icon " id="%s_bt" value="%s ▾" >',
|
||||
$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,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue