9:37 a.m.
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)),