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
pull/1/head
apfelmaennchen 17 years ago
parent 17375a3d11
commit 16f98e7a5f

@ -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;
}

@ -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;
}

@ -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[

@ -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);

@ -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);

@ -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>

Loading…
Cancel
Save