[richfaces-svn-commits] JBoss Rich Faces SVN: r12084 - trunk/sandbox/ui/colorPicker/design.

Sat Jan 3 19:37:56 EST 2009

Author: artdaw
Date: 2009-01-03 19:37:56 -0500 (Sat, 03 Jan 2009)
New Revision: 12084

Modified:
   trunk/sandbox/ui/colorPicker/design/colorPicker.html
   trunk/sandbox/ui/colorPicker/design/ui.colorpicker.js
Log:
rich:colorPicker design: colorPicker top, left position bug was fixed

Modified: trunk/sandbox/ui/colorPicker/design/colorPicker.html
===================================================================

--- trunk/sandbox/ui/colorPicker/design/colorPicker.html	2008-12-31 22:33:20 UTC (rev 12083)
+++ trunk/sandbox/ui/colorPicker/design/colorPicker.html	2009-01-04 00:37:56 UTC (rev 12084)
@@ -196,9 +196,7 @@
 
 
 	</head>
-	<body style="height: 10000px">
-<br /><br /><br /><br /><br /><br /><br />
-<br /><br /><br /><br /><br /><br /><br />
+	<body>
 
 
 <span id="rich-colorPicker" class="rich-colorPicker-span">
@@ -209,10 +207,6 @@
 <input type="button" value="Set gray color in HEX format" onclick="$('#rich-colorPicker').colorPicker('setColor', '#cccccc')"/>
 <input type="button" value="Set seagreen color in HSB format" onclick="$('#rich-colorPicker').colorPicker('setColor', {h:160,s:100,b:100})"/>
 
-<br /><br /><br /><br /><br /><br /><br />
-<br /><br /><br /><br /><br /><br /><br />
-<br /><br /><br /><br /><br /><br /><br />
-<br /><br /><br /><br /><br /><br /><br />
 <div id="rich-colorPicker-ui" class="rich-colorPicker-wrapper">
 	<div class="rich-colorPicker-ext">
 		<div class="rich-colorPicker-color">

Modified: trunk/sandbox/ui/colorPicker/design/ui.colorpicker.js
===================================================================
--- trunk/sandbox/ui/colorPicker/design/ui.colorpicker.js	2008-12-31 22:33:20 UTC (rev 12083)
+++ trunk/sandbox/ui/colorPicker/design/ui.colorpicker.js	2009-01-04 00:37:56 UTC (rev 12084)
@@ -367,17 +367,23 @@
 	_show: function(e) {
 
 		this._trigger("beforeShow", e, { options: this.options, hsb: this.color, hex: this._HSBToHex(this.color), rgb: this._HSBToRGB(this.color) });
-
-		var pos = this.element.offset();
-		var viewPort = this._getScroll();
-		var top = pos.top + this.element[0].offsetHeight;
-		var left = pos.left;
-		if (top + 176 > viewPort.t + Math.min(viewPort.h,viewPort.ih)) {
-			top -= this.element[0].offsetHeight + 176;
-		}
-		if (left + 356 > viewPort.l + Math.min(viewPort.w,viewPort.iw)) {
-			left -= 356;
-		}
+
+		var top = 0;
+		var left = 0;
+		var viewPort = this._getWindowScrollOffset();
+		var window = this._getWindowDimensions();
+
+		if(window.height - (this.element.offset().top - viewPort.scrollTop)  < this.picker.height()){
+			top = this.element[0].offsetTop - this.picker.height();
+		}else{
+			top = this.element[0].offsetTop + this.element[0].offsetHeight;
+		}
+		if(window.width - (this.element.offset().left - viewPort.scrollLeft)  < this.picker.width()){
+			left = this.element[0].offsetLeft - this.picker.width() + this.element[0].offsetWidth;
+		}else{
+			left = this.element[0].offsetLeft;
+		}
+
 		this.picker.css({left: left + 'px', top: top + 'px'});
 		if (this._trigger("show", e, { options: this.options, hsb: this.color, hex: this._HSBToHex(this.color), rgb: this._HSBToRGB(this.color) }) != false) {
 			this.picker.show();
@@ -387,7 +393,32 @@
 		$(document).bind('mousedown.colorPicker', function(e) { return self._hide.call(self, e); });
 		return false;
 
-	},
+	},
+
+	_getWindowDimensions: function() {
+	    var w =  self.innerWidth
+		        || document.documentElement.clientWidth
+		        || document.body.clientWidth
+		        || 0;
+	    var h =  self.innerHeight
+		        || document.documentElement.clientHeight
+		        || document.body.clientHeight
+		        || 0;
+	    return {width:w, height: h};
+	},
+
+	_getWindowScrollOffset: function() {
+	    var x =  window.pageXOffset
+		        || document.documentElement.scrollLeft
+		        || document.body.scrollLeft
+		        || 0;
+	    var y =  window.pageYOffset
+		        || document.documentElement.scrollTop
+		        || document.body.scrollTop
+		        || 0;
+		return {scrollLeft:x, scrollTop:y};
+	},
+
 	_hide: function(e) {
 
 		if (!this._isChildOf(this.picker[0], e.target, this.picker[0])) {
@@ -415,7 +446,8 @@
 			prEl = prEl.parentNode;
 		}
 		return false;
-	},
+	},
+/*
 	_getScroll: function() {
 		var t,l,w,h,iw,ih;
 		if (document.documentElement) {
@@ -432,7 +464,8 @@
 		iw = self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0;
 		ih = self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0;
 		return { t: t, l: l, w: w, h: h, iw: iw, ih: ih };
-	},
+	},
+*/
 	_fixHSB: function(hsb) {
 		return {
 			h: Math.min(360, Math.max(0, hsb.h)),


