Select_Box Add new position : absolute
This commit is contained in:
parent
259b3f4851
commit
94bba9cf62
1 changed files with 147 additions and 72 deletions
|
|
@ -26,7 +26,6 @@
|
|||
* Display a kind of select
|
||||
* @include select-box-test.php
|
||||
*/
|
||||
|
||||
// Copyright Author Dany De Bontridder danydb@aevalys.eu
|
||||
class Select_Box
|
||||
{
|
||||
|
|
@ -36,8 +35,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
|
||||
|
||||
private $position; //!< change depending if we are in an absolute block or not
|
||||
|
||||
/**
|
||||
* Default constructor
|
||||
* @param type $p_id javascript DOMid
|
||||
|
|
@ -52,9 +51,43 @@ class Select_Box
|
|||
$this->cnt=0;
|
||||
$this->default_value=-1;
|
||||
$this->style_box="";
|
||||
$this->filter="";
|
||||
$this->filter="";
|
||||
$this->position="normal";
|
||||
}
|
||||
|
||||
public function get_id()
|
||||
{
|
||||
return $this->id;
|
||||
}
|
||||
|
||||
public function set_id($id)
|
||||
{
|
||||
$this->id=$id;
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function get_item()
|
||||
{
|
||||
return $this->item;
|
||||
}
|
||||
|
||||
public function get_default_value()
|
||||
{
|
||||
return $this->default_value;
|
||||
}
|
||||
|
||||
public function set_item($item)
|
||||
{
|
||||
$this->item=$item;
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function set_default_value($default_value)
|
||||
{
|
||||
$this->default_value=$default_value;
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function get_position()
|
||||
{
|
||||
return $this->position;
|
||||
|
|
@ -62,45 +95,20 @@ class Select_Box
|
|||
|
||||
public function set_position($position)
|
||||
{
|
||||
if ( ! in_array($position,array("normal","in-absolute") ) ) {
|
||||
throw new Exception("SB0005",EXC_PARAM_VALUE);
|
||||
if (!in_array($position, array("normal", "in-absolute", "absolute")))
|
||||
{
|
||||
throw new Exception("SB0005", EXC_PARAM_VALUE);
|
||||
}
|
||||
$this->position=$position;
|
||||
return $this;
|
||||
}
|
||||
|
||||
private function compute_position()
|
||||
protected 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":
|
||||
case 'absolute':
|
||||
// Show when click
|
||||
$javascript=sprintf('
|
||||
$("%s_bt").onclick=function() {
|
||||
|
|
@ -110,7 +118,7 @@ class Select_Box
|
|||
if (! document.getElementById("select_box%s") ) {
|
||||
|
||||
var newDiv=new Element("div");
|
||||
newDiv.id="select%s";
|
||||
newDiv.id="select_box%s";
|
||||
document.body.appendChild(newDiv);
|
||||
newDiv.addClassName("select_box");
|
||||
$("select_box%s").onmouseleave=function() {
|
||||
|
|
@ -137,10 +145,76 @@ class Select_Box
|
|||
alert(e.message);
|
||||
}
|
||||
}
|
||||
', $this->id,$this->id,$this->id,$this->id,$this->id, $this->id, $this->id, $this->id,$list_id, $list_id);
|
||||
|
||||
break;
|
||||
|
||||
', $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);
|
||||
}
|
||||
}
|
||||
', $this->id, $this->id, $this->id, $list_id, $list_id);
|
||||
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
|
@ -149,55 +223,51 @@ class Select_Box
|
|||
|
||||
function input()
|
||||
{
|
||||
$list_id=sprintf('%s_list',$this->id);
|
||||
|
||||
$list_id=sprintf('%s_list', $this->id);
|
||||
|
||||
// Show when click
|
||||
$javascript=$this->compute_position();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// display the button
|
||||
printf('<input type="button" class="smallbutton " 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">',
|
||||
$this->id, $this->style_box);
|
||||
printf('<input type="button" class="smallbutton " 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">', $this->id, $this->style_box);
|
||||
|
||||
// Show the filter if there is one,
|
||||
if ($this->filter!="")
|
||||
{
|
||||
|
||||
// Show the filter if there is one,
|
||||
if ( $this->filter != "" ) {
|
||||
|
||||
echo HtmlInput::filter_list($list_id);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Print the list of possible options
|
||||
printf('<ul id="%s">',$list_id);
|
||||
printf('<ul id="%s">', $list_id);
|
||||
for ($i=0; $i<count($this->item); $i++)
|
||||
{
|
||||
if ($this->item[$i]['type']=="url")
|
||||
{
|
||||
printf('<li><a href="%s">%s</a></li>', $this->item[$i]['url'],
|
||||
$this->item[$i]['label']);
|
||||
printf('<li><a href="%s">%s</a></li>', $this->item[$i]['url'], $this->item[$i]['label']);
|
||||
}
|
||||
else // For javascript
|
||||
if ($this->item[$i]['type']=="javascript")
|
||||
{
|
||||
printf('<li><a href="javascript:void(0)" onclick="%s">%s</a></li>',
|
||||
$this->item[$i]['javascript'], $this->item[$i]['label']);
|
||||
printf('<li><a href="javascript:void(0)" onclick="%s">%s</a></li>', $this->item[$i]['javascript'],
|
||||
$this->item[$i]['label']);
|
||||
}
|
||||
else if ($this->item[$i]['type']=="value")
|
||||
{
|
||||
printf('<li><a href="javascript:void(0)" onclick="%s">%s</a></li>',
|
||||
$this->item[$i]['javascript'], $this->item[$i]['label']);
|
||||
printf('<li><a href="javascript:void(0)" onclick="%s">%s</a></li>', $this->item[$i]['javascript'],
|
||||
$this->item[$i]['label']);
|
||||
}
|
||||
else if ($this->item[$i]['type']=="input") {
|
||||
else if ($this->item[$i]['type']=="input")
|
||||
{
|
||||
$ok=new IButton("ok");
|
||||
$ok->value=$this->item[$i]['label'];
|
||||
$ok->javascript=$this->item[$i]['input']->javascript;
|
||||
printf('<li> %s %s</li>',
|
||||
$this->item[$i]['input']->input(),
|
||||
$ok->input()
|
||||
);
|
||||
printf('<li> %s %s</li>', $this->item[$i]['input']->input(), $ok->input()
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -235,10 +305,12 @@ class Select_Box
|
|||
$this->item[$this->cnt]['type']='value';
|
||||
$this->cnt++;
|
||||
}
|
||||
function add_input($p_label,HtmlInput $p_element) {
|
||||
|
||||
function add_input($p_label, HtmlInput $p_element)
|
||||
{
|
||||
/* $this->item[$this->cnt]['label']=$p_element->label;
|
||||
$this->item[$this->cnt]['value']=$p_element->value;
|
||||
$this->item[$this->cnt]['javascript']=$p_element->javascript;
|
||||
$this->item[$this->cnt]['value']=$p_element->value;
|
||||
$this->item[$this->cnt]['javascript']=$p_element->javascript;
|
||||
*
|
||||
*/
|
||||
$this->item[$this->cnt]['label']=$p_label;
|
||||
|
|
@ -246,12 +318,15 @@ class Select_Box
|
|||
$this->item[$this->cnt]['type']='input';
|
||||
$this->cnt++;
|
||||
}
|
||||
|
||||
function set_filter($p_filter)
|
||||
{
|
||||
$this->filter=$p_filter;
|
||||
$this->filter=$p_filter;
|
||||
}
|
||||
function get_filter() {
|
||||
return $this->filter;
|
||||
|
||||
function get_filter()
|
||||
{
|
||||
return $this->filter;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue