summaryrefslogtreecommitdiffstats
path: root/idrop-web
diff options
context:
space:
mode:
authorMike Conway <mikeconway@Mike-Conways-MacBook-Pro.local>2011-03-10 23:02:14 (GMT)
committer Mike Conway <mikeconway@Mike-Conways-MacBook-Pro.local>2011-03-10 23:02:14 (GMT)
commita40e70c4a2243ec1768864c0654108a43216de35 (patch)
tree901e2bc88e90b0be6e3e9846c5d19b51c356a5c4 /idrop-web
parentb75b3c07c49e9d26fc1d90e7a9e685317105f9a2 (diff)
downloadQCG-Data-a40e70c4a2243ec1768864c0654108a43216de35.zip
QCG-Data-a40e70c4a2243ec1768864c0654108a43216de35.tar.gz
QCG-Data-a40e70c4a2243ec1768864c0654108a43216de35.tar.bz2
adding splitter
Diffstat (limited to 'idrop-web')
-rw-r--r--idrop-web/grails-app/views/home/index.gsp2
-rw-r--r--idrop-web/grails-app/views/layouts/main.gsp2
-rw-r--r--idrop-web/web-app/css/main.css64
-rw-r--r--idrop-web/web-app/img/paneh.gifbin0 -> 3458 bytes
-rw-r--r--idrop-web/web-app/img/panehc.gifbin0 -> 1196 bytes
-rw-r--r--idrop-web/web-app/img/panev.gifbin0 -> 3885 bytes
-rw-r--r--idrop-web/web-app/img/panevc.gifbin0 -> 1376 bytes
-rw-r--r--idrop-web/web-app/js/splitter.js187
8 files changed, 254 insertions, 1 deletions
diff --git a/idrop-web/grails-app/views/home/index.gsp b/idrop-web/grails-app/views/home/index.gsp
index b005951..8d7d76b 100644
--- a/idrop-web/grails-app/views/home/index.gsp
+++ b/idrop-web/grails-app/views/home/index.gsp
@@ -72,7 +72,7 @@ extra information</div>
<div id="browse">
<div id="browser" class="wrapper">
-<div id="dataTreeView"
+<div id="dataTreeView" class=""
style="float: left; position: relative; width: auto; display: inline-block; overflow: auto;"><!-- no empty divs -->
<div id="dataTreeDiv" class="colLeft"><!-- no empty divs --></div>
<div id="infoDiv" class="colRight roundedContainer">
diff --git a/idrop-web/grails-app/views/layouts/main.gsp b/idrop-web/grails-app/views/layouts/main.gsp
index 0395f97..79685fd 100644
--- a/idrop-web/grails-app/views/layouts/main.gsp
+++ b/idrop-web/grails-app/views/layouts/main.gsp
@@ -18,6 +18,8 @@
<g:javascript library="jquery.dataTables.min" />
<g:javascript library="mydrop/lingo_common" />
<g:javascript library="mydrop/main" />
+<g:javascript library="splitter" />
+
<!-- preserve the application context as a js variable for use in AJAX callbacks -->
diff --git a/idrop-web/web-app/css/main.css b/idrop-web/web-app/css/main.css
index e62b507..ff98a97 100644
--- a/idrop-web/web-app/css/main.css
+++ b/idrop-web/web-app/css/main.css
@@ -535,4 +535,68 @@ th.desc a {
#verticalForm select {
display: block;
+}
+
+/* browser */
+#browse {
+ background: #ffffff;
+ padding: 0;
+}
+
+#splitterContainer {/* Main splitter element */
+height:95%;width:100%;margin:0;padding:0;
+}
+#leftPane{
+float:left;width:15%;height:100%;border-top:solid 1px #9cbdff;
+background:#c4dcfb;
+overflow: auto;
+}
+#rightPane{ /*Contains toolbar and horizontal splitter*/
+float:right;width:85%;height:100%;
+background:#f4f4f4;
+}
+#rightSplitterContainer{/*horizontal splitter*/
+width:100%;
+background:#FFFFFF;border-top:solid 1px #9cbdff;
+}
+
+#rightTopPane{/*Top nested in horizontal splitter */
+width:100%;height:50%;overflow:auto;background:#f4f4f4;
+}
+#rightBottomPane{/*Bottom nested in horizontal splitter */
+background:#f4f4f4;width:100%;overflow:auto;
+}
+
+
+/* Splitbar styles; these are the default class names and required styles */
+.splitbarV {
+float:left;width:6px;height:100%;
+line-height:0px;font-size:0px;
+border-left:solid 1px #9cbdff;border-right:solid 1px #9cbdff;
+background:#cbe1fb url(img/panev.gif) 0% 50%;
+}
+.splitbarH {
+height:6px;text-align:left;line-height:0px;font-size:0px;
+border-top:solid 1px #9cbdff;border-bottom:solid 1px #9cbdff;
+background:#cbe1fb url(img/paneh.gif) 50% 0%;
+}
+
+.splitbuttonV{
+margin-top:-41px;margin-left:-4px;top:50%;position:relative;
+height:83px;width:10px;
+background:transparent url(img/panevc.gif) 10px 50%;
+}
+.splitbuttonV.invert{
+margin-left:0px;background:transparent url(img/panevc.gif) 0px 50%;
+}
+.splitbuttonH{
+margin-left:-41px;left:50%;position:relative;
+height:10px !important;width:83px;
+background:transparent url(img/panehc.gif) 50% 0px;
+}
+.splitbuttonH.invert{
+margin-top:-4px;background:transparent url(img/panehc.gif) 50% -10px;
+}
+.splitbarV.working,.splitbarH.working,.splitbuttonV.working,.splitbuttonH.working{
+ -moz-opacity:.50; filter:alpha(opacity=50); opacity:.50;
} \ No newline at end of file
diff --git a/idrop-web/web-app/img/paneh.gif b/idrop-web/web-app/img/paneh.gif
new file mode 100644
index 0000000..3195a27
--- /dev/null
+++ b/idrop-web/web-app/img/paneh.gif
Binary files differ
diff --git a/idrop-web/web-app/img/panehc.gif b/idrop-web/web-app/img/panehc.gif
new file mode 100644
index 0000000..f5ae2a7
--- /dev/null
+++ b/idrop-web/web-app/img/panehc.gif
Binary files differ
diff --git a/idrop-web/web-app/img/panev.gif b/idrop-web/web-app/img/panev.gif
new file mode 100644
index 0000000..4af6e94
--- /dev/null
+++ b/idrop-web/web-app/img/panev.gif
Binary files differ
diff --git a/idrop-web/web-app/img/panevc.gif b/idrop-web/web-app/img/panevc.gif
new file mode 100644
index 0000000..da64078
--- /dev/null
+++ b/idrop-web/web-app/img/panevc.gif
Binary files differ
diff --git a/idrop-web/web-app/js/splitter.js b/idrop-web/web-app/js/splitter.js
new file mode 100644
index 0000000..d5e6e41
--- /dev/null
+++ b/idrop-web/web-app/js/splitter.js
@@ -0,0 +1,187 @@
+/*
+* jQuery.splitter.js - animated splitter plugin
+*
+* version 1.0 (2010/01/02)
+*
+* Dual licensed under the MIT and GPL licenses:
+* http://www.opensource.org/licenses/mit-license.php
+* http://www.gnu.org/licenses/gpl.html
+*/
+
+/**
+* jQuery.splitter() plugin implements a two-pane resizable animated window, using existing DIV elements for layout.
+* For more details and demo visit: http://krikus.com/js/splitter
+*
+* @example $("#splitterContainer").splitter({splitVertical:true,A:$('#leftPane'),B:$('#rightPane'),closeableto:0});
+* @desc Create a vertical splitter with toggle button
+*
+* @example $("#splitterContainer").splitter({minAsize:100,maxAsize:300,splitVertical:true,A:$('#leftPane'),B:$('#rightPane'),slave:$("#rightSplitterContainer"),closeableto:0});
+* @desc Create a vertical splitter with toggle button, with minimum and maximum width for plane A and bind resize event to the slave element
+*
+* @name splitter
+* @type jQuery
+* @param Object options Options for the splitter ( required)
+* @cat Plugins/Splitter
+* @return jQuery
+* @author Kristaps Kukurs (contact@krikus.com)
+*/
+
+
+
+;(function($){
+
+ $.fn.splitter = function(args){
+ args = args || {};
+ return this.each(function() {
+ var _ghost; //splitbar ghosted element
+ var splitPos; // current splitting position
+ var _splitPos; // saved splitting position
+ var _initPos; //initial mouse position
+ var _ismovingNow=false; // animaton state flag
+
+ // Default opts
+ var direction = (args.splitHorizontal? 'h':'v');
+ var opts = $.extend({
+ minAsize:0, //minimum width/height in PX of the first (A) div.
+ maxAsize:0, //maximum width/height in PX of the first (A) div.
+ minBsize:0, //minimum width/height in PX of the second (B) div.
+ maxBsize:0, //maximum width/height in PX of the second (B) div.
+ ghostClass: 'working',// class name for _ghosted splitter and hovered button
+ invertClass: 'invert',//class name for invert splitter button
+ animSpeed: 250 //animation speed in ms
+ },{
+ v:{ // Vertical
+ moving:"left",sizing: "width", eventPos: "pageX",splitbarClass:"splitbarV",buttonClass: "splitbuttonV", cursor: "e-resize"
+ },
+ h: { // Horizontal
+ moving:"top",sizing: "height", eventPos: "pageY",splitbarClass:"splitbarH",buttonClass: "splitbuttonH", cursor: "n-resize"
+ }
+ }[direction], args);
+
+ //setup elements
+ var splitter = $(this);
+ var mychilds =splitter.children(); //$(">*", splitter[0]);
+ var A = args.A; // left/top frame
+ var B = args.B;// right/bottom frame
+ var slave=args.slave;//optional, elemt forced to receive resize event
+//Create splitbar
+var C=$('<div><span></span></div>');
+A.after(C);
+C.attr({"class": opts.splitbarClass,unselectable:"on"}).css({"cursor":opts.cursor,"user-select": "none", "-webkit-user-select": "none","-khtml-user-select": "none", "-moz-user-select": "none"})
+.bind("mousedown", startDrag);
+
+if(opts.closeableto!=undefined){
+var Bt=$('<div></div>').css("cursor",'pointer');
+C.append(Bt);
+Bt.attr({"class": opts.buttonClass, unselectable: "on"});
+Bt.hover(function(){$(this).addClass(opts.ghostClass);},function(){$(this).removeClass(opts.ghostClass);});
+Bt.mousedown(function(e){if(e.target != this)return;Bt.toggleClass(opts.invertClass).hide();splitTo((splitPos==opts.closeableto)?_splitPos:opts.closeableto,true);return false;});
+}
+//reset size to default.
+var perc=(((C.position()[opts.moving]-splitter.offset()[opts.moving])/splitter[opts.sizing]())*100).toFixed(1);
+splitTo(perc,false,true);
+// resize event handlers;
+splitter.bind("resize",function(e, size){if(e.target!=this)return;splitTo(splitPos,false,true);});
+$(window).bind("resize",function(){splitTo(splitPos,false,true);});
+
+//C.onmousedown=startDrag
+ function startDrag(e) {
+ if(e.target != this)return;
+ _ghost = _ghost || C.clone(false).insertAfter(A);
+ splitter._initPos=C.position();
+ splitter._initPos[opts.moving]-=C[opts.sizing]();
+_ghost.addClass(opts.ghostClass).css('position','absolute').css('z-index','250').css("-webkit-user-select", "none").width(C.width()).height(C.height()).css(opts.moving,splitter._initPos[opts.moving]);
+mychilds.css("-webkit-user-select", "none"); // Safari selects A/B text on a move
+A._posSplit = e[opts.eventPos];
+
+$(document).bind("mousemove", performDrag).bind("mouseup", endDrag);
+ }
+//document.onmousemove=performDrag
+ function performDrag(e) {
+ if (!_ghost||!A) return;
+ var incr = e[opts.eventPos]-A._posSplit;
+ _ghost.css(opts.moving, splitter._initPos[opts.moving]+incr);
+ }
+//C.onmouseup=endDrag
+ function endDrag(e){
+ var p=_ghost.position();
+ _ghost.remove(); _ghost = null;
+ mychilds.css("-webkit-user-select", "text");// let Safari select text again
+ $(document).unbind("mousemove", performDrag).unbind("mouseup", endDrag);
+ var perc=(((p[opts.moving]-splitter.offset()[opts.moving])/splitter[opts.sizing]())*100).toFixed(1);
+ splitTo(perc,(splitter._initPos[opts.moving]>p[opts.moving]),false);
+ splitter._initPos=0;
+ }
+//Perform actual splitting and animate it;
+ function splitTo(perc,reversedorder,fast) {
+if(_ismovingNow||perc==undefined)return;//generally MSIE problem
+_ismovingNow=true;
+if(splitPos&&splitPos>10&&splitPos<90)//do not save accidental events
+ _splitPos=splitPos;
+splitPos=perc;
+
+var barsize=C[opts.sizing]()+(2*parseInt(C.css('border-'+opts.moving+'-width')));//+ border. cehap&dirty
+var splitsize=splitter[opts.sizing]();
+if(opts.closeableto!=perc){
+var percpx=Math.max(parseInt((splitsize/100)*perc),opts.minAsize);
+if(opts.maxAsize)percpx=Math.min(percpx,opts.maxAsize);
+}else{
+var percpx=parseInt((splitsize/100)*perc,0);
+}
+if(opts.maxBsize){
+if((splitsize-percpx)>opts.maxBsize)
+percpx=splitsize-opts.maxBsize;
+}
+if(opts.minBsize){
+if((splitsize-percpx)<opts.minBsize)
+percpx=splitsize-opts.minBsize;
+}
+var sizeA=Math.max(0,(percpx-barsize));
+var sizeB=Math.max(0,(splitsize-percpx));
+splitsize=(splitsize-barsize);
+
+//A.attr('title','- '+sizeA); B.attr('title','- '+sizeB);
+ if(fast){
+ A.show().css(opts.sizing,sizeA+'px');
+ B.show().css(opts.sizing,sizeB+'px');
+ Bt.show();
+ if (!$.browser.msie ){
+ mychilds.trigger("resize");if(slave)slave.trigger("resize");
+ }
+ _ismovingNow=false;
+ return true;
+ }
+ if(reversedorder){//reduces flickering if total percentage becomes more than 100 (possible while animating)
+ var anob={};
+ anob[opts.sizing]=sizeA+'px';
+ A.show().animate(anob,opts.animSpeed,function(){Bt.fadeIn('fast');if($(this)[opts.sizing]()<2){this.style.display='none';B.stop(true,true);B[opts.sizing](splitsize+'px');}});
+ var anob2={};
+ anob2[opts.sizing]=sizeB+'px';
+ B.show().animate(anob2,opts.animSpeed,function(){Bt.fadeIn('fast');if($(this)[opts.sizing]()<2){this.style.display='none';A.stop(true,true);A[opts.sizing](splitsize+'px')}});
+ }else{
+ var anob={};
+ anob[opts.sizing]=sizeB+'px';
+ B.show().animate(anob,opts.animSpeed,function(){Bt.fadeIn('fast');if($(this)[opts.sizing]()<2){this.style.display='none';A.stop(true,true);A[opts.sizing](splitsize+'px')}});
+ var anob={};
+ anob[opts.sizing]=sizeA+'px';
+ A.show().animate(anob,opts.animSpeed,function(){Bt.fadeIn('fast');if($(this)[opts.sizing]()<2){this.style.display='none';B.stop(true,true);B[opts.sizing](splitsize+'px');}});
+}
+//trigger resize evt
+splitter.queue(function(){
+setTimeout(function(){
+splitter.dequeue();
+_ismovingNow=false;
+mychilds.trigger("resize");if(slave)slave.trigger("resize");
+}, opts.animSpeed+5);
+});
+
+ }//end splitTo()
+
+
+
+
+
+});//end each
+ };//end splitter
+
+})(jQuery); \ No newline at end of file