laurence for favorite panel

1 files changed, 79 insertions, 16 deletions

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) {