From cc873672d0a997d150770b116b2ea2c99f31b845 Mon Sep 17 00:00:00 2001 From: pepper Date: Wed, 4 Sep 2013 00:06:18 -0700 Subject: first commit --- js/colorpicker.js | 308 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 308 insertions(+) create mode 100644 js/colorpicker.js (limited to 'js/colorpicker.js') diff --git a/js/colorpicker.js b/js/colorpicker.js new file mode 100644 index 0000000..9e2bfd6 --- /dev/null +++ b/js/colorpicker.js @@ -0,0 +1,308 @@ +var old = {}; +var colorsheight; +var colorswidth; +var widthratio = 7; +var numberacross = 10; +var backgroundstate = 2; +var infostate = 0; +var names = true; +var hexes = false; +var rgbs = false; +var selectedname = ""; +var selectedrgb; +//---------element objects---------- +var transbutton = $('#transbutton'); +var preview = $('#preview'); +var colornames = $('#colornames'); +var namespace = $('#namespace'); +var extra = $('#extra'); +var container = $('#container'); +var switches = $('#switches'); +var transparent = $('#transparent'); +var infospace = $('#infospace'); +var infoswitch = $('#infoswitch'); +var backgroundswitch = $('#backgroundswitch'); +var bg_menu = $('#bg_menu'); +var vasebackground = $('#vasebackground'); +var hexswitch = $('#hexswitch'); +//---------------------------------- +$(function(){ + ColorPicker.show(); +}); +var ColorPicker = { + GoldenFuncs: { + regolden: function(num) { + ratio = (1+Math.sqrt(5))/2; + newnum = Math.round(num/ratio); + return newnum; + }, + goldenize: function(num) { + ratio = (1+Math.sqrt(5))/2; + newnum = Math.round(num*ratio); + return newnum; + }, + getproperty: function(idandselectr, propertystr) { + //turns css property width or height into an integer value + grab = $(idandselectr).css(propertystr); + grab = grab.slice(0,-2); + numval = parseInt(grab); + return numval; + }, + makegolden: function(idandselectr, propertystr) { + result = ColorPicker.GoldenFuncs.getproperty(idandselectr, propertystr); + newval = ColorPicker.GoldenFuncs.goldenize(result); + propval = newval.toString()+'px'; + if(propertystr == 'height') { + $(idandselectr).css('width', propval); + }else if(propertystr == 'width') { + $(idandselectr).css('height', propval); + } + } + }, + Events: { + addEventListener: function(){ + //--------event handler of transparent button------- + transbutton.click(function() { + namespace.val('transparent'); + preview.css({'background-color':'transparent','border-style':'dashed','border-width':'2px'}); + colornames.html('transparent'); + colornames.fadeOut(100); + colornames.fadeIn(500); + extra.html('

note: the .jpg image format does not support transparency'); + }); + transbutton.hover(function(){ transbutton.addClass('hovertrans')}, + function(){ transbutton.attr('class','defaulttrans')}); + //--------event handler over colorpanel------- + var firstwidth; + $('.colors').mouseover(function() { + extra.html(""); + if(this.id != 'd0') { + $(this).css({'height':ColorPicker.GoldenFuncs.goldenize(colorsheight), + 'width':ColorPicker.GoldenFuncs.goldenize(colorswidth)}); + firstwidth = container.css('width'); + newwidth = firstwidth+ColorPicker.GoldenFuncs.goldenize(colorswidth)-colorswidth; + container.css('width',newwidth); + } + }); + $('.colors').mouseout(function() { + $(this).css('height',colorsheight) + $(this).css('width', colorswidth) + container.css('width',firstwidth) + }); + $('.colors').hover(function() { + var stringvalue = 'CLICK TO CHOOSE THE COLOR'; + colornames.fadeOut(100); + colornames.fadeIn(500); + stringvalue = ColorPicker.showcolorname(this.id); + colornames.html(stringvalue); + }); + $('.colors').click(function() { + selectednameid = $(this).attr('id') + selectedname = divtoname['#'+selectednameid]; + selectedrgb = $(this).css('background-color'); + ColorPicker.putitin(); + }); + //-------------others handler------------------------------- + infoswitch.hover(function(){infospace.show()}, function(){infospace.hide('slow')} ); + infoswitch.click(function(){ColorPicker.switchcolorinfo()}); + backgroundswitch.clicked = false; + backgroundswitch.click(function(){ + if (! backgroundswitch.clicked){ + bg_menu.slideDown("fast", function(){ + backgroundswitch.clicked = true; + backgroundswitch.addClass("switches_depressed"); + }); + }else{ + bg_menu.slideUp("fast", function(){ + backgroundswitch.clicked = false; + backgroundswitch.removeClass("switches_depressed"); + }) + } + }); +// backgroundswitch.hover(function(){}, function(){bg_menu.hide();}); + hexswitch.click(function(){ColorPicker.hexcolorswitch()}); + $('.theswitches').hover(function(){ ColorPicker.switchhovercss(this.id, 'over') }, + function(){ ColorPicker.switchhovercss(this.id, 'out') }); + //-------handler for window resive---- + $(window).resize(function() + { + ColorPicker.setupdimensions(); + }); + } + }, + switchhovercss: function(sel, uno) { + var chng = {}; + chng['color'] = 'white'; + chng['text-shadow'] = 'black 1px 2px'; + chng['background-image'] = "url('./images/hoverbackground.jpg')"; + if(uno == 'over') { + for(var key in chng) { + old[key] = $('#'+sel).css(key); + } + for(var key in chng){ + $('#'+sel).css(key, chng[key]); + } + }else if(uno == 'out') { + for(var key in old){ + $('#'+sel).css(key, old[key]); + } + } + }, + showcolorname: function(divstr) { + var rgb = $('#'+divstr).css('background-color'); + var colorname = divtoname['#'+divstr]; + var imname = colorname; + if (hexes === true) { + imname = rgb; + }else if(rgbs === true) { + imname = colorname; + }else if (names === true) { + imname = rgbtohex[rgb]; + } + return imname; + }, + hexcolorswitch: function() { + if(names == true) { + hexes = false; + rgbs = false; + hexswitch.html('CLICK TO SWITCH TO RGB VALUES'); + namespace.val(selectedname); + names = false; + rgbs = true; + }else if(hexes == true) { + rgbs = false; + names = false; + hexswitch.html('CLICK TO SWITCH TO COLOR NAMES'); + namespace.val(rgbtohex[selectedrgb]); + hexes = false; + names = true; + }else if(rgbs == true) { + names = false; + hexes = false; + hexswitch.html('CLICK TO SWITCH TO HEX VALUES') + namespace.val(selectedrgb) + rgbs = false; + hexes = true; + } + }, + putitin: function() { + if (rgbs === true) { thecolor = selectedname; } + if (hexes === true) { thecolor = selectedrgb; } + if (names === true) { thecolor = rgbtohex[selectedrgb]; } + namespace.val(thecolor); + preview.css({'background-color':selectedrgb,'border-style':'none'}); + vasebackground.css('background-color',selectedrgb); + }, + getcontainerwidth: function () { + basis = $('.colors').css('width'); + basis = parseInt(basis.slice(0,-2)); + secondbasis = '2px'; + secondbasis = parseInt(secondbasis.slice(0,-2)); + widthval = (secondbasis*(numberacross*2))+(basis*numberacross)+(basis*.44);//(goldenize(basis)-basis) + if (widthval < 406){ + widthval = 406; + } + widthval = widthval.toString()+'px'; + return widthval; + }, + shrinkwidth: function(arg, ratio) { + for(var i=0; i < ratio; i++) { + arg = ColorPicker.GoldenFuncs.regolden(arg); + } + division = Math.round(arg); + return division; + }, + setupfonts: function () { + fontratioone = ColorPicker.shrinkwidth(windowWidth, 9); + $('.theswitches').css('font-size',fontratioone); + fontratiotwo = ColorPicker.shrinkwidth(windowWidth, 8); + $('.subtitle').css('font-size',fontratiotwo); + colornames.css('font-size', ColorPicker.GoldenFuncs.goldenize(fontratiotwo)+'px'); + colornames.css('text-shadow', 'black 1px 2px'); + var transfont = ColorPicker.GoldenFuncs.regolden(fontratioone); + $('.smalltitle').css({'width':'100%','font-size':transfont}); + }, + setupsides: function() { + container.css({'position':'relative','z-index':'1'}); + switches.css('z-index','10'); + var basis = container.css('width'); + basis = parseInt(basis.slice(0,-2)); + remainder = (100-basis)/2; + widths = ColorPicker.GoldenFuncs.regolden(basis); + widths = widths.toString()+'px'; + lateralbasis = ColorPicker.GoldenFuncs.regolden(remainder); + leftside = toString(lateralbasis)+'%'; + rightside = toString(100-lateralbasis)+'%'; + colornames.css('left', leftside); + switches.css({'width': widths, 'left': rightside, 'overflow':'hidden','top':'118px'}); + }, + previewdimensions: function() { + first = switches.css('width'); + first = parseInt(first.slice(0,-2)); + width = ColorPicker.GoldenFuncs.regolden(first); + height = ColorPicker.GoldenFuncs.regolden(width); + width = width.toString()+'px'; + height = height.toString()+'px'; + preview.css({'width':width, 'height':height}); + }, + setupdimensions: function() { + if(window.innerWidth > 933) { + windowWidth = window.innerWidth + }else{ windowWidth = 933 } + colorswidth = ColorPicker.shrinkwidth(windowWidth, widthratio); + $('.colors').css('width', colorswidth.toString()+'px'); + colorsheight = ColorPicker.GoldenFuncs.regolden(colorswidth); + propval = colorsheight.toString()+'px'; + $('.colors').css('height', propval); + var containerwidth = ColorPicker.getcontainerwidth(); + container.css('width',containerwidth); + + ColorPicker.setupfonts(); + ColorPicker.setupsides(); + ColorPicker.GoldenFuncs.makegolden('#' + switches.attr('id'),'width'); + ColorPicker.previewdimensions(); + transparent.css({'float':'bottom','width':'inherit'}); + }, + switchcolorinfo: function() { + if(infostate == 1) { + for(var i=0; i < color_values.length; i++) { + $('#d' + i).html(divtoname['#d' + i]); + } + infostate = 2; + infospace.html('(NAMES)'); + }else if(infostate == 0) { + $('.colors').html(""); + infostate = 1; + infospace.html('(NONE)'); + }else if(infostate == 2) { + for(var i=0; i < color_values.length; i++) { + $('#d' + i).html(nametohex[divtoname['#d' + i]]); + } + infostate = 3; + infospace.html('(HEXES)'); + }else if(infostate == 3) { + for(var i=0; i < color_values.length; i++) { + $('#d' + i).html(hextorgb[nametohex[divtoname['#d' + i]]]); + } + infostate = 0; + infospace.html('(RGBS)'); + } + }, + show: function() { + //-------create color panel-------- + for (i=1; i < color_values.length ; i++) + { + $('#d0').attr('style','background-color:' + color_values[0]); + var colorbox = $('#d0').clone(); + colorbox.attr('id','d' + i); + colorbox.attr('style','background-color:' + color_values[i]); + container.append(colorbox); + } + //--------initialize------------ + ColorPicker.setupdimensions(); + ColorPicker.switchcolorinfo(); + ColorPicker.hexcolorswitch(); + + ColorPicker.Events.addEventListener(); + }, +} -- cgit v1.2.3-70-g09d2