diff options
| -rw-r--r-- | colors.htm | 21 | ||||
| -rw-r--r-- | css/style.css | 14 | ||||
| -rw-r--r-- | index.html | 2 | ||||
| -rw-r--r-- | js/colorpicker.js | 95 |
4 files changed, 109 insertions, 23 deletions
@@ -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> </label></span> + <span class="favcolor" style="display:none;"><input name="favcolor" type="radio" id="favnone" onclick="selectfavColor('');"><label> </label><span class="favcolorbox"> </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 @@ -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]) + '"> </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()) + '"> </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) {
|