From e01dea2a867cebcaa20aa25fa14f4ab7bdc459ae Mon Sep 17 00:00:00 2001 From: laurence Date: Thu, 19 Sep 2013 08:49:48 +0800 Subject: laurence for favorite panel --- colors.htm | 21 ++++++++++-- css/style.css | 14 +++++--- index.html | 2 +- js/colorpicker.js | 95 +++++++++++++++++++++++++++++++++++++++++++++---------- 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 @@
@@ -63,7 +63,7 @@ - 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(''); + var colname = clist[i]; + favpanel.append(' '); } } }, 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(''); - } + favpanel.append(' '); + } } $('#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('No favourite colors.'); } + 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) { -- cgit v1.2.3-70-g09d2