added drag + bugfix

drag and drop + bugfix click on list

diff --git a/plugins/suggest-tablefields.php b/plugins/suggest-tablefields.php
index 8e1a07c927d4111031e125ff883c3b8f7aaebc45..9f89cbf6c0bc66e2369de8972f4381dfa2ea9c86 100644 (file)
--- a/plugins/suggest-tablefields.php
+++ b/plugins/suggest-tablefields.php
@@ -27,11 +27,16 @@ class AdminerSuggestTableField
 
     ?>
     <style>
-        #suggest_tablefields_container{min-width:150px;margin:0;padding:0;overflow-y:auto;position:absolute;}
+        #suggest_tablefields_container{min-width:200px;margin:0;padding:0;overflow-y:auto;position:absolute;background-color:#fff;}
         #suggest_tablefields{list-style:none;}
+        #suggest_tablefields dt{font-weight:bold;}
         #suggest_tablefields dd{margin:0;}
         #suggest_tablefields dd strong{background-color:#ff0;}
-        #suggest_search{width:90%;}
+        #suggest_search{width:110px;}
+        #suggest_tablefields_drag{cursor:move;}
+        #suggest_tablefields_stick{cursor:pointer;}
+        .noselect {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
+        .xborder{border: 1px inset rgb(204, 204, 204);}
         /*textarea.sqlarea {display: block!important;}*/
     </style>
     <script<?php echo nonce(); ?> type="text/javascript">
@@ -71,7 +76,7 @@ class AdminerSuggestTableField
         }
 
         function getTable(suggests, tableName){
-            var table =  "<dt><strong>"+ tableName +"</strong></dt>"
+            var table =  "<dt>"+ tableName +"</dt>"
             for(var k in suggests[tableName]){
                 table += "<dd><a href='#' data-text='"+ tableName + "`.`" + suggests[tableName][k] +"'>"+ suggests[tableName][k] +"</a></dd>"
             }
@@ -92,16 +97,21 @@ class AdminerSuggestTableField
 
             var suggests_mysql = ""
 
-            suggests_mysql += "<dt><strong><?php echo lang('Tables') ?></strong></dt>"
+            suggests_mysql += "<dt><?php echo lang('Tables') ?></dt>"
             for(var k in suggests['___tables___']){
                 suggests_mysql += "<dd><a href='#' data-table='1'>"+ suggests['___tables___'][k] +"</a></dd>"
             }
-            suggests_mysql += "<dt><strong><?php echo lang('SQL command') ?></strong></dt>"
+            suggests_mysql += "<dt><?php echo lang('SQL command') ?></dt>"
             for(var k in suggests['___mysql___']){
                 suggests_mysql += "<dd><a href='#' data-nobt='1'>"+ suggests['___mysql___'][k] +"</a></dd>"
             }
 
-            form.insertAdjacentHTML('afterbegin', '<dl id="suggest_tablefields_container" style="height:'+ sqlarea.offsetHeight +'px;top:0;left:'+ (sqlarea.offsetWidth + 3) +'px"><input autocomplete="off" id="suggest_search" type="text" placeholder="<?php echo lang('Search') ?>..."/><div id="suggest_tablefields"></div></dl>')
+            var posLeft = (sqlarea.offsetWidth + 3)
+            form.insertAdjacentHTML('afterbegin',
+                '<div id="suggest_tablefields_container" style="height:'+ sqlarea.offsetHeight +'px;top:0;left:'+ posLeft +'px">'+
+                '<span class="noselect" id="suggest_tablefields_drag">drag</span>|'+
+                '<span class="noselect" id="suggest_tablefields_stick" data-pos-left="'+ posLeft +'px">stick</span>&nbsp;'+
+                '<input autocomplete="off" id="suggest_search" type="text" placeholder="<?php echo lang('Search') ?>..."/><dl id="suggest_tablefields" class="noselect"></dl></div>')
             compile(suggests_mysql)
 
 
@@ -177,6 +187,45 @@ class AdminerSuggestTableField
 
             }, false)
 
+
+            //drag / stick
+            document.getElementById('suggest_tablefields_stick').addEventListener('click', function () {
+                var obj = document.getElementById('suggest_tablefields_container')
+                obj.style.position = "absolute"
+                obj.style.left = this.getAttribute('data-pos-left')
+                obj.style.top = 0
+                obj.classList.remove("xborder")
+            })
+
+            window.onload = function(){
+                draggable('suggest_tablefields_container')
+            }
+
+            var dragObj = null
+            function draggable(id) {
+                var obj = document.getElementById(id)
+                var m = document.getElementById('suggest_tablefields_drag')
+                m.onmousedown = function(){
+                    obj.style.position = "fixed"
+                    obj.classList.add("xborder")
+                    dragObj = obj
+                }
+            }
+
+            document.onmouseup = function(){
+                dragObj = null
+            }
+
+            document.onmousemove = function(e){
+                var x = e.pageX
+                var y = e.pageY
+
+                if(dragObj == null) return
+
+                dragObj.style.left = x +"px"
+                dragObj.style.top= y +"px"
+            }
+
         })
 
     </script>