laurence for favorite panel

4 files changed, 109 insertions, 23 deletions

diff --git a/colors.htm b/colors.htm
index f302e1e..986e36e 100644
--- a/colors.htm
+++ b/colors.htm
@@ -49,7 +49,7 @@
 				<div id="favpanel" style="display:none;">
 					<input type="hidden" name="favcolors" id="favcolors" />
 					<label class="paneltitle">FAVORITES</label>
-					<span class="favcolor" style="display:none;"><input name="favcolor" type="radio" id="favnone" onclick="selectfavColor('');"><label>&nbsp;</label></span>	
+					<span class="favcolor" style="display:none;"><input name="favcolor" type="radio" id="favnone" onclick="selectfavColor('');"><label>&nbsp;</label><span class="favcolorbox">&nbsp;</span></span>
 				</div>
 				<div class="clear"></div>
 			</form>
@@ -63,7 +63,7 @@
 	<script type="text/javascript" src="./js/colorpicker.js"></script>
 	<script type="text/javascript" src="./js/jquery.fancybox.js?v=2.1.5"></script>
 	<script type="text/javascript" src="./js/jquery.remember-state.js"></script>
-	<script type="text/javascript">
+	<script type="text/javascript">		
 		$('#submitvalue').click(function(){
 			$("form").rememberState("save");
 		});
@@ -76,6 +76,23 @@
 			  $('#linkrestore').click();			  
 			  ColorPicker.loadColorStorage();
 		});
+		var lastoffset = 0;
+		$(window).scroll(function(){
+			if($(this).scrollTop() == 0) {
+					$('#switches').css({'top': '118px' });
+			}
+			if (bscroll)
+			{
+				if($(this).scrollTop() != 0) {					
+					var fcolors = $('#favcolors').val();	
+					var clist=fcolors.split(separate);
+					if (lastoffset < $(this).scrollTop()) {
+						$('#switches').css({'top': (118 - 19 * (clist.length - 3)) + 'px' });
+					}
+				}
+			}			
+			lastoffset = $(this).scrollTop();			
+		});		
   </script>
 </body>
 </html>
diff --git a/css/style.css b/css/style.css
index 6c57ec6..9e4554b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -218,16 +218,17 @@ label {
 }
 .favcolor label{
 	font-size: 12px;
-	text-align:center;	
+	text-align:left;	
 	padding:0;
-	width:50px;
+	width:150px;
 	margin:0;	
 	color:black;
 }
 .favcolor {
-	float:left;
-	width:47%;
 	margin-right:3px;
+	margin-left:10px;
+	width:inherit;
+	display: block;
 }
 .clear {
 	clear:both;
@@ -238,4 +239,9 @@ label {
 	width:inherit;
 	text-align:center;
 	display:block;
+}
+.favcolorbox {
+	height:11px; 
+	width:18px;
+	display:inline-block;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 357bb39..0e3b683 100644
--- a/index.html
+++ b/index.html
@@ -66,7 +66,7 @@
 			$.fancybox.open({
 				href : 'colors.htm',
 				width  : 700,           // set the width
-				height : 620,
+				height : 610,
 				fitToView : true,
 				autoDimensions:false,
 				autoSize:false,
diff --git a/js/colorpicker.js b/js/colorpicker.js
index bce6593..62ec343 100644
--- a/js/colorpicker.js
+++ b/js/colorpicker.js
@@ -13,6 +13,7 @@ var selectedname = "";
 var selectedrgb;

 var curfavcolor = "";

 var curfavcolorId = "";

+var separate = ';';

 //---------element objects----------

 var transbutton = $('#transbutton');

 var submitvalue = $('#submitvalue');

@@ -32,16 +33,46 @@ var bg_menu = $('#bg_menu');
 var vasebackground = $('#vasebackground');

 var hexswitch = $('#hexswitch');

 var favpanel = $('#favpanel');

+var orgheight = 0;

+var bscroll = false;

 //----------------------------------

 $(function(){

 	ColorPicker.show();

 });

+

 function selectfavColor(selcolor, id)

 {	

 	addfav.html('Remove from Favorites');

 	curfavcolor = selcolor;

 	curfavcolorId = id;

+	var rgbregex = /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/;

+	var hexregex = /^#(?:[0-9a-f]{3}){1,2}$/i;

+	hexes = false;

+	names = false;

+	rgbs = false;

+	var match = rgbregex.exec(selcolor);

+	if (match != null) {

+		selectedname = rgbtoname[selcolor];

+		selectedrgb = selcolor;

+		hexes = true;

+		hexswitch.html('CLICK TO SWITCH TO HEX VALUES');

+	} else if((match = hexregex.exec(selcolor))!= null) {		

+		names = true;			

+		selectedrgb = hextorgb[selcolor];

+		selectedname = rgbtoname[selectedrgb];

+		hexswitch.html('CLICK TO SWITCH TO COLOR NAMES');

+	} else {

+		selectedname = selcolor;

+		selectedrgb = hextorgb[nametohex[selectedname]];

+		hexswitch.html('CLICK TO SWITCH TO RGB VALUES');

+		rgbs = true;	

+	}

+	colornames.html(selcolor);

+	namespace.val(selcolor);

+	preview.css({'background-color':selectedrgb,'border-style':'none'});

+	vasebackground.css('background-color',selectedrgb);

 }

+

 var ColorPicker = {	

 	GoldenFuncs: {

 		regolden: function(num) {

@@ -163,23 +194,38 @@ var ColorPicker = {
 			$(window).resize(function()

 			{

 				ColorPicker.setupdimensions();

-			});

+			});			

+		}

+	},

+	getcolorfromfavorite: function(fvalue){

+		var rgbregex = /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/;

+		var hexregex = /^#(?:[0-9a-f]{3}){1,2}$/i;

+		var retcolor = '';

+		var match = rgbregex.exec(fvalue);

+		if (match != null) {

+			retcolor = fvalue;

+		} else if((match = hexregex.exec(fvalue))!= null) {		

+			retcolor = hextorgb[fvalue];			

+		} else {

+			retcolor = hextorgb[nametohex[fvalue]];

 		}

+		return retcolor;

 	},

 	initfavpanel: function(){

 		var fcolors = $('#favcolors').val();

-		var clist=fcolors.split(',');

+		var clist=fcolors.split(separate);

 		for(var i=0; i < clist.length; i++) {

 			if (clist[i] != '')

 			{

-				var colname = rgbtoname[hextorgb[clist[i]]];				

-				favpanel.append('<span class="favcolor" id="favcol' + i + '" ><input name="favcolor" type="radio"  onclick="selectfavColor(\'' + clist[i] + '\',\'favcol' + i +'\');"><label>' + colname +  '</label></span>');				

+				var colname = clist[i];				

+				favpanel.append('<span class="favcolor" id="favcol' + i + '" ><input name="favcolor" type="radio"  onclick="selectfavColor(\'' + clist[i] 

+					+ '\',\'favcol' + i +'\');"><label>' + colname +  '</label><span class="favcolorbox" style="background-color:' + ColorPicker.getcolorfromfavorite(clist[i]) + '">&nbsp;</span></span>');				

 			}			

 		}

 	},

 	existsfavcolor: function(fcolor) {

 		var fcolors = $('#favcolors').val();

-		var clist=fcolors.split(',');

+		var clist=fcolors.split(separate);

 		for(var i=0; i < clist.length; i++) {

 			if (clist[i] == fcolor)

 			{

@@ -188,19 +234,29 @@ var ColorPicker = {
 		}

 		return -1;

 	},

+	setpaneldimension: function(){

+		var fcolors = $('#favcolors').val();	

+		var clist=fcolors.split(separate);

+		if (clist.length > 3)

+		{

+			switches.css({'height': orgheight + 19 * (clist.length - 3) });

+		}else {

+			switches.css({'height': orgheight });

+		}

+	},

 	addfavourites: function() {

 		var fcolors = $('#favcolors').val();

 		

 		if (curfavcolor != '') {

-			var clist=fcolors.split(',');

+			var clist=fcolors.split(separate);

 			var index = ColorPicker.existsfavcolor(curfavcolor);

 			if(index != 0 && index == clist.length - 1)

 			{

-				fcolors = fcolors.replace(',' + curfavcolor, '');

+				fcolors = fcolors.replace(separate + curfavcolor, '');

 			}else if(clist.length == 1) {

 				fcolors = fcolors.replace(curfavcolor, '');

 			}else{

-				fcolors = fcolors.replace(curfavcolor+ ',', '');

+				fcolors = fcolors.replace(curfavcolor+ separate, '');

 			}

 			$('#' + curfavcolorId).remove();

 			addfav.html('Add to Favorites');

@@ -214,21 +270,23 @@ var ColorPicker = {
 				openfav.attr('class','defaulttrans');

 			}

 		}else {

-			if (ColorPicker.existsfavcolor(rgbtohex[selectedrgb]) == -1)

+			if (ColorPicker.existsfavcolor(namespace.val()) == -1)

 			{				

 				if (fcolors.length > 0) {

-					fcolors = fcolors + ',' + rgbtohex[selectedrgb];

+					fcolors = fcolors + separate + namespace.val();

 				}else {

-					fcolors = rgbtohex[selectedrgb];

+					fcolors = namespace.val();

 				}				

-				var colname = rgbtoname[selectedrgb];

-				var clist=fcolors.split(',');

+				var colname = namespace.val();

+				var clist=fcolors.split(separate);

 				var id = clist.length - 1;

 				$('#favmsg').remove();

-				favpanel.append('<span class="favcolor" id="favcol' + id + '" ><input name="favcolor" type="radio" onclick="selectfavColor(\'' + rgbtohex[selectedrgb] + '\',\'favcol' + id +'\');"><label>' + colname +  '</label></span>');

-			}	

+				favpanel.append('<span class="favcolor" id="favcol' + id + '" ><input name="favcolor" type="radio" onclick="selectfavColor(\'' + namespace.val() 

+					+ '\',\'favcol' + id +'\');"><label>' + colname +  '</label><span class="favcolorbox" style="background-color:' + ColorPicker.getcolorfromfavorite(namespace.val()) + '">&nbsp;</span></span>');

+			}

 		}

 		$('#favcolors').val(fcolors);		

+		ColorPicker.setpaneldimension();

 	},

 	openfavourites: function() {

 		if (favshow) {

@@ -236,6 +294,8 @@ var ColorPicker = {
 			openfav.attr('class','defaulttrans');

 			favshow = false;

 			$('#favmsg').remove();

+			switches.css({'height': orgheight });

+			bscroll = false;

 		}else {

 			favpanel.show();

 			openfav.addClass('hovertrans');

@@ -244,11 +304,13 @@ var ColorPicker = {
 			if(fcolors == '') {

 				favpanel.append('<span class="favmsg" id="favmsg">No favourite colors.</span>');

 			}

+			bscroll = true;

+			ColorPicker.setpaneldimension();

 		}

 		addfav.html('Add to Favorites');

 		curfavcolor = "";

 		curfavcolorId = "";

-		$('#favnone').attr('checked','checked');

+		$('.favcolor input[type=radio]').attr('checked',false);				

 	},

 	loadColorStorage: function() {

 		var opts = $('#opt_hexswitch').val();

@@ -423,6 +485,7 @@ var ColorPicker = {
 		ColorPicker.GoldenFuncs.makegolden('#' + switches.attr('id'),'width');

 		ColorPicker.previewdimensions();

 		transparent.css({'float':'bottom','width':'inherit'});

+		orgheight = switches.height();

 	},

 	switchcolorinfo: function() {

 		if(infostate == 1) {