From 16f98e7a5fe6b7d5a5b826fcfd24d650510c8616 Mon Sep 17 00:00:00 2001
From: apfelmaennchen <apfelmaennchen@6c8d7289-2bf4-0310-a012-ef5d649a1542>
Date: Wed, 28 May 2008 16:34:54 +0000
Subject: [PATCH] YaCy-UI: introduction of modal window for edit bookmarks
 dialouge...

git-svn-id: https://svn.berlios.de/svnroot/repos/yacy/trunk@4863 6c8d7289-2bf4-0310-a012-ef5d649a1542
---
 htroot/yacy/ui/css/base.css    | 60 +++++++++++++++++++++++++++
 htroot/yacy/ui/css/ui.tabs.css | 18 ++++-----
 htroot/yacy/ui/index.html      |  4 +-
 htroot/yacy/ui/js/jqDnR.js     | 32 +++++++++++++++
 htroot/yacy/ui/js/jqModal.js   | 67 ++++++++++++++++++++++++++++++
 htroot/yacy/ui/ymarks.html     | 74 +++++++++++++++++++++-------------
 6 files changed, 218 insertions(+), 37 deletions(-)
 create mode 100644 htroot/yacy/ui/js/jqDnR.js
 create mode 100644 htroot/yacy/ui/js/jqModal.js

diff --git a/htroot/yacy/ui/css/base.css b/htroot/yacy/ui/css/base.css
index c6f1c8f55..d78cae940 100644
--- a/htroot/yacy/ui/css/base.css
+++ b/htroot/yacy/ui/css/base.css
@@ -320,3 +320,63 @@ dl.pairs dt {
 }
 
 
+/* jqmDialog ---------------------------*/
+
+div.whiteOverlay { background: white; }
+div.jqDrag {cursor: move;}
+
+div.jqmDialog {
+  display: none;
+  position: fixed;
+  top: 17%;
+  left: 50%;
+  margin-left: -200px;
+  width: 600px;
+  overflow: hidden;
+  font-family:verdana,tahoma,helvetica;
+}
+
+/* Fixed posistioning emulation for IE6
+     Star selector used to hide definition from browsers other than IE6
+     For valid CSS, use a conditional include instead */
+* html div.jqmDialog {
+     position: absolute;
+     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
+}
+
+/* [[[ Title / Top Classes ]]] */
+div.jqmdTC { 
+  background: url(../img/box600.png) no-repeat;  
+  color: black;
+  padding: 7px 22px 5px 5px;
+  font-family:"sans serif",verdana,tahoma,helvetica;
+  font-weight: bold;
+  * zoom: 1;
+}
+
+
+/* [[[ Body / Message Classes ]]] */
+div.jqmdBC {
+  background: white;
+  margin: 0px;
+  border: 1px solid black;
+  height: 250px;
+  overflow: auto;
+}
+
+
+div.jqmdMSG { color: black; }
+
+
+/* [[[ Button classes ]]] */
+input.jqmdX {
+  position: absolute;
+  right: 7px;
+  top: 4px;
+  padding: 0 0 0 19px;
+  height: 19px;
+  width: 0px;
+  background: url(../img-2/cancel.png) no-repeat center;
+  overflow: hidden;
+  cursor: pointer;
+}
diff --git a/htroot/yacy/ui/css/ui.tabs.css b/htroot/yacy/ui/css/ui.tabs.css
index 78b9e75c2..9ea916553 100644
--- a/htroot/yacy/ui/css/ui.tabs.css
+++ b/htroot/yacy/ui/css/ui.tabs.css
@@ -116,18 +116,18 @@
 
 /* close button */
 .close {
-        display: none;
-        position: absolute;
-        top: 8px;
-        right: 7px;
-        z-index: 2000;
-        width: 12px;
-        height: 12px;
+	display: none;
+    position: absolute;
+    top: 8px;
+    right: 7px;
+    z-index: 2000;
+    width: 12px;
+    height: 12px;
 	border: 0;
-
+	cursor: pointer;
 }
 .ui-tabs-selected .close {
-        display: block;
+    display: block;
 }
 
 
diff --git a/htroot/yacy/ui/index.html b/htroot/yacy/ui/index.html
index c1ae4d387..76e672e07 100644
--- a/htroot/yacy/ui/index.html
+++ b/htroot/yacy/ui/index.html
@@ -21,7 +21,9 @@
   <script src="js/jquery.field.min.js" type="text/javascript"></script>  
   <script src="js/jquery.accordion.js" type="text/javascript"></script>
   <script src="js/jquery.pagination.js" type="text/javascript"></script>
-  <script src="js/jquery-faviconize-1.0.js" type="text/javascript"></script> 
+  <script src="js/jquery-faviconize-1.0.js" type="text/javascript"></script>
+  <script src="js/jqModal.js" type="text/javascript"></script>
+  <script src="js/jqDnR.js" type="text/javascript"></script> 
   <script src="js/ui.tabs.min.js" type="text/javascript"></script>
   <script type="text/javascript">
    //<![CDATA[
diff --git a/htroot/yacy/ui/js/jqDnR.js b/htroot/yacy/ui/js/jqDnR.js
new file mode 100644
index 000000000..0da7018be
--- /dev/null
+++ b/htroot/yacy/ui/js/jqDnR.js
@@ -0,0 +1,32 @@
+/*
+ * jqDnR - Minimalistic Drag'n'Resize for jQuery.
+ *
+ * Copyright (c) 2007 Brice Burgess <bhb@iceburg.net>, http://www.iceburg.net
+ * Licensed under the MIT License:
+ * http://www.opensource.org/licenses/mit-license.php
+ * 
+ * $Version: 2007.08.19 +r2
+ */
+
+(function($){
+$.fn.jqDrag=function(h){return i(this,h,'d');};
+$.fn.jqResize=function(h){return i(this,h,'r');};
+$.jqDnR={dnr:{},e:0,
+drag:function(v){
+ if(M.k == 'd')E.css({left:M.X+v.pageX-M.pX,top:M.Y+v.pageY-M.pY});
+ else E.css({width:Math.max(v.pageX-M.pX+M.W,0),height:Math.max(v.pageY-M.pY+M.H,0)});
+  return false;},
+stop:function(){E.css('opacity',M.o);$().unbind('mousemove',J.drag).unbind('mouseup',J.stop);}
+};
+var J=$.jqDnR,M=J.dnr,E=J.e,
+i=function(e,h,k){return e.each(function(){h=(h)?$(h,e):e;
+ h.bind('mousedown',{e:e,k:k},function(v){var d=v.data,p={};E=d.e;
+ // attempt utilization of dimensions plugin to fix IE issues
+ if(E.css('position') != 'relative'){try{E.position(p);}catch(e){}}
+ M={X:p.left||f('left')||0,Y:p.top||f('top')||0,W:f('width')||E[0].scrollWidth||0,H:f('height')||E[0].scrollHeight||0,pX:v.pageX,pY:v.pageY,k:d.k,o:E.css('opacity')};
+ E.css({opacity:0.8});$().mousemove($.jqDnR.drag).mouseup($.jqDnR.stop);
+ return false;
+ });
+});},
+f=function(k){return parseInt(E.css(k))||false;};
+})(jQuery);
\ No newline at end of file
diff --git a/htroot/yacy/ui/js/jqModal.js b/htroot/yacy/ui/js/jqModal.js
new file mode 100644
index 000000000..4257d8122
--- /dev/null
+++ b/htroot/yacy/ui/js/jqModal.js
@@ -0,0 +1,67 @@
+/*
+ * jqModal - Minimalist Modaling with jQuery
+ *
+ * Copyright (c) 2007 Brice Burgess <bhb@iceburg.net>, http://www.iceburg.net
+ * Licensed under the MIT License:
+ * http://www.opensource.org/licenses/mit-license.php
+ * 
+ * $Version: 2007.08.17 +r11
+ * 
+ */
+(function($) {
+$.fn.jqm=function(o){
+var _o = {
+zIndex: 3000,
+overlay: 50,
+overlayClass: 'jqmOverlay',
+closeClass: 'jqmClose',
+trigger: '.jqModal',
+ajax: false,
+target: false,
+modal: false,
+toTop: false,
+onShow: false,
+onHide: false,
+onLoad: false
+};
+return this.each(function(){if(this._jqm)return; s++; this._jqm=s;
+H[s]={c:$.extend(_o, o),a:false,w:$(this).addClass('jqmID'+s),s:s};
+if(_o.trigger)$(this).jqmAddTrigger(_o.trigger);
+});};
+
+$.fn.jqmAddClose=function(e){hs(this,e,'jqmHide'); return this;};
+$.fn.jqmAddTrigger=function(e){hs(this,e,'jqmShow'); return this;};
+$.fn.jqmShow=function(t){return this.each(function(){if(!H[this._jqm].a)$.jqm.open(this._jqm,t)});};
+$.fn.jqmHide=function(t){return this.each(function(){if(H[this._jqm].a)$.jqm.close(this._jqm,t)});};
+
+$.jqm = {
+hash:{},
+open:function(s,t){var h=H[s],c=h.c,cc='.'+c.closeClass,z=(/^\d+$/.test(h.w.css('z-index')))?h.w.css('z-index'):c.zIndex,o=$('<div></div>').css({height:'100%',width:'100%',position:'fixed',left:0,top:0,'z-index':z-1,opacity:c.overlay/100});h.t=t;h.a=true;h.w.css('z-index',z);
+ if(c.modal) {if(!A[0])F('bind');A.push(s);o.css('cursor','wait');}
+ else if(c.overlay > 0)h.w.jqmAddClose(o);
+ else o=false;
+
+ h.o=(o)?o.addClass(c.overlayClass).prependTo('body'):false;
+ if(ie6){$('html,body').css({height:'100%',width:'100%'});if(o){o=o.css({position:'absolute'})[0];for(var y in {Top:1,Left:1})o.style.setExpression(y.toLowerCase(),"(_=(document.documentElement.scroll"+y+" || document.body.scroll"+y+"))+'px'");}}
+
+ if(c.ajax) {var r=c.target||h.w,u=c.ajax,r=(typeof r == 'string')?$(r,h.w):$(r),u=(u.substr(0,1) == '@')?$(t).attr(u.substring(1)):u;
+  r.load(u,function(){if(c.onLoad)c.onLoad.call(this,h);if(cc)h.w.jqmAddClose($(cc,h.w));e(h);});}
+ else if(cc)h.w.jqmAddClose($(cc,h.w));
+
+ if(c.toTop&&h.o)h.w.before('<span id="jqmP'+h.w[0]._jqm+'"></span>').insertAfter(h.o);	
+ (c.onShow)?c.onShow(h):h.w.show();e(h);return false;
+},
+close:function(s){var h=H[s];h.a=false;
+ if(A[0]){A.pop();if(!A[0])F('unbind');}
+ if(h.c.toTop&&h.o)$('#jqmP'+h.w[0]._jqm).after(h.w).remove();
+ if(h.c.onHide)h.c.onHide(h);else{h.w.hide();if(h.o)h.o.remove();} return false;
+}};
+var s=0,H=$.jqm.hash,A=[],ie6=$.browser.msie&&($.browser.version == "6.0"),
+i=$('<iframe src="javascript:false;document.write(\'\');" class="jqm"></iframe>').css({opacity:0}),
+e=function(h){if(ie6)if(h.o)h.o.html('<p style="width:100%;height:100%"/>').prepend(i);else if(!$('iframe.jqm',h.w)[0])h.w.prepend(i); f(h);},
+f=function(h){try{$(':input:visible',h.w)[0].focus();}catch(e){}},
+F=function(t){$()[t]("keypress",m)[t]("keydown",m)[t]("mousedown",m);},
+m=function(e){var h=H[A[A.length-1]],r=(!$(e.target).parents('.jqmID'+h.s)[0]);if(r)f(h);return !r;},
+hs=function(w,e,y){var s=[];w.each(function(){s.push(this._jqm)});
+ $(e).each(function(){if(this[y])$.extend(this[y],s);else{this[y]=s;$(this).click(function(){for(var i in {jqmShow:1,jqmHide:1})for(var s in this[i])if(H[this[i][s]])H[this[i][s]].w[i](this);return false;});}});};
+})(jQuery);
\ No newline at end of file
diff --git a/htroot/yacy/ui/ymarks.html b/htroot/yacy/ui/ymarks.html
index ca9acd39c..68c97a449 100644
--- a/htroot/yacy/ui/ymarks.html
+++ b/htroot/yacy/ui/ymarks.html
@@ -1,4 +1,3 @@
-
 <script type="text/javascript">
    //<![CDATA[
 	$(document).ready(function() {     	
@@ -25,41 +24,62 @@
 						 var icon = '<img src="img-2/lock.png" alt="private bookmark" title="private bookmark"/>'
 					}				
 					$('<tr></tr')
-						.html('<td><input type="checkbox" value="true" /></td><td>' +icon+ '</td><td><h3 class="linktitle">' +title+ '</h3><p class="desc">' +desc+ '</p><p class="url"><a href="' +link+ '">' +link+ '</a></p><td>' +tags+ ' </td><td>' +date+ '</td><td><a href="/Bookmarks.html?edit=' +hash+ '"><img src="img-2/pencil.png" alt="edit bookmark" title="edit bookmark" /></a><img src="img-2/cancel.png" alt="delete bookmark" title="delete bookmark"/></td>')						
+						.html('<td><input type="checkbox" value="true" /></td><td>' +icon+ '</td><td><h3 class="linktitle">' +title+ '</h3><p class="desc">' +desc+ '</p><p class="url"><a href="' +link+ '">' +link+ '</a></p><td>' +tags+ ' </td><td>' +date+ '</td><td><a href="'+hash+'" class="yeditTrigger"><img src="img-2/pencil.png" alt="edit bookmark" title="edit bookmark" /></a><img src="img-2/cancel.png" alt="delete bookmark" title="delete bookmark"/></td>')						
 						.appendTo('#ymarks tbody');																						
 				}); //close each(
 				$('#ymarks') 
     				.tablesorter({widgets: ['zebra']}) 
-    				.tablesorterPager({container: $('#pager'), size: 5, positionFixed: false});				
+    				.tablesorterPager({container: $('#pager'), size: 5, positionFixed: false});
+    			$('#yedit').jqm({
+				    trigger: '.yeditTrigger',
+				    overlay: 30, 
+				    overlayClass: 'whiteOverlay',
+				    onShow: function(hash){$('<p></p>').html(hash.t).appendTo('.jqmdMSG'); hash.w.show();}
+				}).jqDrag('.jqDrag');				
 			}
-		}); //close $.ajax(				
+		}); //close $.ajax(							
 	});
   //]]>
 </script>
 
-<!-- Table -->		
-		<table class="ytable" id="ymarks" summary="YaCy Bookmarks">
-			<colgroup>
-				<col width="25"/>
-				<col width="25"/>
-				<col width="425"/>
-				<col width="150"/>
-				<col width="150"/>
-				<col width="25"/>								
-			</colgroup>
-			<thead>
-			  <tr>			 
-				<th class="{sorter: false}"></th>
-				<th></th>
-				<th>Title</th>
-				<th>Tags</th>				
-				<th>Date</th>
-				<th class="{sorter: false}"></th>							
-			  </tr>
-			</thead>			
-			<tbody>			
-			</tbody>
-		</table>
+<!-- Display Bookmarks Table -->		
+<table class="ytable" id="ymarks" summary="YaCy Bookmarks">
+	<colgroup>
+		<col width="25"/>
+		<col width="25"/>
+		<col width="425"/>
+		<col width="150"/>
+		<col width="150"/>
+		<col width="25"/>								
+	</colgroup>
+	<thead>
+	  <tr>			 
+		<th class="{sorter: false}"></th>
+		<th></th>
+		<th>Title</th>
+		<th>Tags</th>				
+		<th>Date</th>
+		<th class="{sorter: false}"></th>							
+	  </tr>
+	</thead>			
+	<tbody>			
+	</tbody>
+</table>
+
+<!-- Edit Bookmarks -->			
+<div id="yedit" class="jqmDialog">
+	<div class="jqmdTC jqDrag">
+		Edit Bookmark
+	</div>
+	<div class="jqmdBC">	
+		<div class="jqmdMSG">
+			Edit bookmark dialog is not functional yet!	 
+			<br /><br />
+			At least it seems possible to transport the edit bookmark link and hash into the dialog window...
+		</div>
+	</div>
+	<input type="image" src="img-2/cancel.png" class="jqmdX jqmClose" />
+</div>