From f637859b0ecffef206d9af3ea052d542ce05bd85 Mon Sep 17 00:00:00 2001 From: laurence Date: Tue, 17 Sep 2013 03:36:57 +0800 Subject: favorite panel --- colors.htm | 13 ++++++- css/style.css | 35 ++++++++++++++++- index.html | 2 +- js/colorpicker.js | 110 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 4 files changed, 149 insertions(+), 11 deletions(-) diff --git a/colors.htm b/colors.htm index bdb1295..f302e1e 100644 --- a/colors.htm +++ b/colors.htm @@ -35,14 +35,23 @@
YOU WILL CHOOSE:
- - SUBMIT + + SUBMIT + Add to Favorites + Open Favorties

to choose transparent as a color, click HERE +

+ +
diff --git a/css/style.css b/css/style.css index 7b944cb..6c57ec6 100644 --- a/css/style.css +++ b/css/style.css @@ -53,7 +53,7 @@ color: black; #preview { height:150px; } -#transparent,#submitvalue { +#transparent,#submitvalue,#addfavlist,#openfavlist { font-size:12px; } #namespace { @@ -205,4 +205,37 @@ label { } #noticeDlg { display:none; +} +#favpanel{ + width:inherit; +} +#favpanel .paneltitle{ + color:black; + font-size: 16px; + text-align:center; + width:inherit; + display:block; +} +.favcolor label{ + font-size: 12px; + text-align:center; + padding:0; + width:50px; + margin:0; + color:black; +} +.favcolor { + float:left; + width:47%; + margin-right:3px; +} +.clear { + clear:both; +} +.favmsg { + font-size: 13px; + color:red; + width:inherit; + text-align:center; + display:block; } \ No newline at end of file diff --git a/index.html b/index.html index 3141b24..357bb39 100644 --- a/index.html +++ b/index.html @@ -66,7 +66,7 @@ $.fancybox.open({ href : 'colors.htm', width : 700, // set the width - height : 560, + height : 620, fitToView : true, autoDimensions:false, autoSize:false, diff --git a/js/colorpicker.js b/js/colorpicker.js index 574349f..bce6593 100644 --- a/js/colorpicker.js +++ b/js/colorpicker.js @@ -8,11 +8,16 @@ var infostate = 0; var names = true; var hexes = false; var rgbs = false; +var favshow = false; var selectedname = ""; var selectedrgb; +var curfavcolor = ""; +var curfavcolorId = ""; //---------element objects---------- var transbutton = $('#transbutton'); var submitvalue = $('#submitvalue'); +var addfav = $('#addfavlist'); +var openfav = $('#openfavlist'); var preview = $('#preview'); var colornames = $('#colornames'); var namespace = $('#namespace'); @@ -26,10 +31,17 @@ var backgroundswitch = $('#backgroundswitch'); var bg_menu = $('#bg_menu'); var vasebackground = $('#vasebackground'); var hexswitch = $('#hexswitch'); +var favpanel = $('#favpanel'); //---------------------------------- $(function(){ ColorPicker.show(); }); +function selectfavColor(selcolor, id) +{ + addfav.html('Remove from Favorites'); + curfavcolor = selcolor; + curfavcolorId = id; +} var ColorPicker = { GoldenFuncs: { regolden: function(num) { @@ -51,7 +63,7 @@ var ColorPicker = { }, makegolden: function(idandselectr, propertystr) { result = ColorPicker.GoldenFuncs.getproperty(idandselectr, propertystr); - newval = ColorPicker.GoldenFuncs.goldenize(result); + newval = ColorPicker.GoldenFuncs.goldenize(result) + 60; propval = newval.toString()+'px'; if(propertystr == 'height') { $(idandselectr).css('width', propval); @@ -59,7 +71,7 @@ var ColorPicker = { $(idandselectr).css('height', propval); } } - }, + }, Events: { addEventListener: function(){ //--------event handler of transparent button------- @@ -75,9 +87,8 @@ var ColorPicker = { function(){ transbutton.attr('class','defaulttrans')}); submitvalue.hover(function(){ submitvalue.addClass('hovertrans')}, function(){ submitvalue.attr('class','defaulttrans')}); - submitvalue.click(function() { - - }); + addfav.hover(function(){ addfav.addClass('hovertrans')}, + function(){ addfav.attr('class','defaulttrans')}); $('.bgOptions').click(function(){ if (this.id == "bg1") { @@ -143,7 +154,8 @@ var ColorPicker = { }) } }); - + addfav.click(function(){ColorPicker.addfavourites()}); + openfav.click(function(){ColorPicker.openfavourites()}); hexswitch.click(function(){ColorPicker.hexcolorswitch()}); $('.theswitches').hover(function(){ ColorPicker.switchhovercss(this.id, 'over') }, function(){ ColorPicker.switchhovercss(this.id, 'out') }); @@ -154,6 +166,90 @@ var ColorPicker = { }); } }, + initfavpanel: function(){ + var fcolors = $('#favcolors').val(); + var clist=fcolors.split(','); + for(var i=0; i < clist.length; i++) { + if (clist[i] != '') + { + var colname = rgbtoname[hextorgb[clist[i]]]; + favpanel.append(''); + } + } + }, + existsfavcolor: function(fcolor) { + var fcolors = $('#favcolors').val(); + var clist=fcolors.split(','); + for(var i=0; i < clist.length; i++) { + if (clist[i] == fcolor) + { + return i; + } + } + return -1; + }, + addfavourites: function() { + var fcolors = $('#favcolors').val(); + + if (curfavcolor != '') { + var clist=fcolors.split(','); + var index = ColorPicker.existsfavcolor(curfavcolor); + if(index != 0 && index == clist.length - 1) + { + fcolors = fcolors.replace(',' + curfavcolor, ''); + }else if(clist.length == 1) { + fcolors = fcolors.replace(curfavcolor, ''); + }else{ + fcolors = fcolors.replace(curfavcolor+ ',', ''); + } + $('#' + curfavcolorId).remove(); + addfav.html('Add to Favorites'); + curfavcolor = ""; + curfavcolorId = ""; + $('#favnone').attr('checked','checked'); + if (fcolors == '') + { + favpanel.hide(); + favshow = false; + openfav.attr('class','defaulttrans'); + } + }else { + if (ColorPicker.existsfavcolor(rgbtohex[selectedrgb]) == -1) + { + if (fcolors.length > 0) { + fcolors = fcolors + ',' + rgbtohex[selectedrgb]; + }else { + fcolors = rgbtohex[selectedrgb]; + } + var colname = rgbtoname[selectedrgb]; + var clist=fcolors.split(','); + var id = clist.length - 1; + $('#favmsg').remove(); + favpanel.append(''); + } + } + $('#favcolors').val(fcolors); + }, + openfavourites: function() { + if (favshow) { + favpanel.hide(); + openfav.attr('class','defaulttrans'); + favshow = false; + $('#favmsg').remove(); + }else { + favpanel.show(); + openfav.addClass('hovertrans'); + favshow = true; + var fcolors = $('#favcolors').val(); + if(fcolors == '') { + favpanel.append('No favourite colors.'); + } + } + addfav.html('Add to Favorites'); + curfavcolor = ""; + curfavcolorId = ""; + $('#favnone').attr('checked','checked'); + }, loadColorStorage: function() { var opts = $('#opt_hexswitch').val(); names = false; @@ -190,6 +286,7 @@ var ColorPicker = { $('#colorpicker').css({'background-image':'none','background-color':$('#' + bgOpt).html()}); } $('#bgURI').val($('#opt_bgURI').val()); + ColorPicker.initfavpanel(); }, switchhovercss: function(sel, uno) { var chng = {}; @@ -370,7 +467,6 @@ var ColorPicker = { ColorPicker.setupdimensions(); ColorPicker.switchcolorinfo(); ColorPicker.hexcolorswitch(); - ColorPicker.Events.addEventListener(); }, } -- cgit v1.2.3-70-g09d2