[Noalyss-commit] [noalyss] 178/219: NEW : add iselect , display a list with options

[Dany De Bontridder]

sparkyx pushed a commit to branch master
in repository noalyss.

commit 349aa8f856ab3579e8e1da9bf4926073e9ffc6de
Author: Dany De Bontridder <address@hidden>
Date:   Sat Dec 2 23:20:21 2017 +0100

    NEW : add iselect , display a list with options
---
 html/style-r692.css              |  43 ++++++++++++-
 include/lib/select_box.class.php | 127 +++++++++++++++++++++++++++++++++++++++
 scenario/test-iselect-button.php |  53 ++++++++++++++++
 3 files changed, 220 insertions(+), 3 deletions(-)

diff --git a/html/style-r692.css b/html/style-r692.css
index cf906bd..b595241 100644
--- a/html/style-r692.css
+++ b/html/style-r692.css
@@ -562,8 +562,9 @@ div.autocomplete {
     margin:0px;
     padding:1px;
     text-align:left;
-    position:absolute;
-    width:375px;
+    position:relative;
+    top:-3px;
+    width:377px;
 }
 div.autocomplete em {
     color:#0000FF;
@@ -573,6 +574,7 @@ div.autocomplete ul {
     list-style-type:none;
     background-color:#FFFFFF;
     border:1px solid #888;
+     width: 375px;
     margin:0px;
     padding:0px;
 }
@@ -859,7 +861,7 @@ box-shadow: 10px 10px 5px #888;
 div.inner_box  {
     background-color: #DCE1EF;
     font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
-    font-family: OpenSansRegular;
+    font-family: 'OpenSansRegular';
     /*! font-family: 'SansationLight'; */
     /*! padding:2px; */
     margin:0px;
@@ -2151,4 +2153,39 @@ div.content a.arrow {
 .label_item {
     width: 500px;
     display:block;
+}
+/*
+ * Select box : list of actions
+ */
+.select_box {
+    border:solid 0.5px darkblue;
+    background:white;
+    width:455px;
+    max-width:250px;
+    position:relative;
+    z-index:3;
+    padding:3px;
+    margin:0px;
+    margin-top:2px;
+    display:none;
+}
+div.select_box ul {
+    list-style:none;
+    padding:2px;
+    margin:1px;
+    width:100%;
+}
+div.select_box ul li {
+  padding-top:2px;
+  padding-bottom:2px;
+    margin:2px;
+}
+div.select_box a {
+  text-decoration:none;
+  color : darkblue;
+  display:block;
+}
+div.select_box a:hover,div.select_box ul li:hover {
+  background-color : lightgoldenrodyellow;
+  color:brown;
 }
\ No newline at end of file
diff --git a/include/lib/select_box.class.php b/include/lib/select_box.class.php
new file mode 100644
index 0000000..6a66898
--- /dev/null
+++ b/include/lib/select_box.class.php
@@ -0,0 +1,127 @@
+<?php
+
+/*
+ *   This file is part of NOALYSS.
+ *
+ *   NOALYSS is free software; you can redistribute it and/or modify
+ *   it under the terms of the GNU General Public License as published by
+ *   the Free Software Foundation; either version 2 of the License, or
+ *   (at your option) any later version.
+ *
+ *   NOALYSS is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *   GNU General Public License for more details.
+ *
+ *   You should have received a copy of the GNU General Public License
+ *   along with NOALYSS; if not, write to the Free Software
+ *   Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
+ */
+
+// Copyright Author Dany De Bontridder address@hidden
+class Select_Box
+{
+
+    var $id;
+    var $item;
+    private $cnt;
+    var $default_value;
+
+    /**
+     * Default constructor
+     * @param type $p_id javascript DOMid
+     * @param type $value Label to display
+     * 
+     * @example test-iselect-button.php
+     */
+    function __construct($p_id, $value)
+    {
+        $this->id=$p_id;
+        $this->item=array();
+        $this->value=$value;
+        $this->cnt=0;
+        $this->default_value=-1;
+        $this->style_box="";
+    }
+
+    function input()
+    {
+        $javascript=sprintf('$("%s_bt").onclick=function() {
+       try {
+           var newDiv=$("select_box%s");
+              var pos=$("%s_bt").cumulativeOffset();
+           
newDiv.setStyle({display:"block",position:"absolute",top:pos.top+25+"px",left:pos.left+5+"px"});
+
+       } catch(e) {
+            alert(e.message);
+       }
+}
+', $this->id, $this->id, $this->id, $this->id);
+
+        // display the button
+        printf('<input type="button" 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);
+
+
+        // Print the list of possible options
+        echo "<ul>";
+        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']);
+            }
+            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']);
+            }
+            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']);
+            }
+        }
+
+        echo "</ul>";
+        echo "</div>";
+
+        // javascript : onclick on button
+        echo "<script>";
+        echo $javascript;
+        echo "</script>";
+    }
+
+    function add_url($label, $url)
+    {
+        $this->item[$this->cnt]['label']=$label;
+        $this->item[$this->cnt]['url']=$url;
+        $this->item[$this->cnt]['type']="url";
+        $this->cnt++;
+    }
+
+    function add_javascript($label, $javascript)
+    {
+        $this->item[$this->cnt]['label']=$label;
+        
$this->item[$this->cnt]['javascript']=$javascript.";$('select_box{$this->id}').hide()";
+        $this->item[$this->cnt]['type']="javascript";
+        $this->cnt++;
+    }
+
+    function add_value($label, $value)
+    {
+        $this->item[$this->cnt]['label']=$label;
+        $this->item[$this->cnt]['update']=$value;
+        $this->item[$this->cnt]['javascript']=sprintf(" 
$('%s').value='%s';$('%s_bt').value='%s';$('select_box%s').hide()",
+                $this->id, $value, $this->id, $label, $this->id);
+        $this->item[$this->cnt]['type']='value';
+        $this->cnt++;
+    }
+
+}
diff --git a/scenario/test-iselect-button.php b/scenario/test-iselect-button.php
new file mode 100644
index 0000000..ae37bed
--- /dev/null
+++ b/scenario/test-iselect-button.php
@@ -0,0 +1,53 @@
+<html>
+<head>
+    <script src="prototype.js"></script>
+
+    <style>
+      .select_box {
+      border:solid 0.5px darkblue;
+      background:white;
+      width:455px;
+      max-width:250px;
+      position:relative;
+      z-index:3;
+      padding:3px;
+      margin:0px;
+      display:none;
+      top:-17px;
+      }
+     div.select_box ul {
+       list-style:none;
+       padding:2px;
+       margin:1px;
+       width:100%;
+     }
+div.select_box ul li {
+    padding-top:2px;
+    padding-bottom:2px;
+  margin:2px;
+}
+div.select_box a {
+    text-decoration:none;
+  color : darkblue;
+}
+div.select_box a:hover,div.select_box ul li:hover {
+    background-color : blue;
+  color:lightgrey;
+}
+    </style>
+
+</head>
+<body>
+  <?php
+     require NOALYSS_INCLUDE.'/lib/select_box.class.php';
+     $a=new Select_Box("test","click me !");
+     $a->add_url("List","?id=5");
+     $a->add_javascript("Hello","alert('hello')");
+     $a->add_value("Value = 10",10);
+     $a->add_value("Value = 1",1);
+     $a->add_value("Value = 15",15);
+
+     echo $a->input();
+     
+     ?>
+</body>