terça-feira, 10 de julho de 2012
Loading...
Trago a vocês um pequeno mas interessante código que desenvolvi para fazer um seletor de cores, que fiz para usar em um editor (estilo blog) que estou fazendo para uso próprio.
Porque estou trazendo isso pra cá? 
Porque não consegui achar nada parecido, feito puramente em HTML, CSS e Java Script. Se é que existe, esta muito bem escondido ou eu não soube perguntar corretamente para o google. 
Dividi o código em 3 partes, vamos a elas, uma de cada vez, e com uma pequena explanação sobre elas.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Color Picker</title>
<script type="text/javascript" src="color-picker.js"></script>
<link rel="stylesheet" href="color-picker.css" type="text/css">
</head>
<body>
<table border="0" width="180">
<tr>
<td>
<p class="title" align="center">
<b>Color Picker</b>
</p>
</td>
</tr>
<tr>
<td align="center">
<table cellspacing="5" class="colorpick">
<tr>
<td id="C01" onclick="cl('C01');"></td>
<td id="C02" onclick="cl('C02');"></td>
<td id="C03" onclick="cl('C03');"></td>
<td id="C04" onclick="cl('C04');"></td>
<td id="C05" onclick="cl('C05');"></td>
<td id="C06" onclick="cl('C06');"></td>
<td id="C07" onclick="cl('C07');"></td>
<td id="C08" onclick="cl('C08');"></td>
</tr>
<tr>
<td id="C09" onclick="cl('C09');"></td>
<td id="C10" onclick="cl('C10');"></td>
<td id="C11" onclick="cl('C11');"></td>
<td id="C12" onclick="cl('C12');"></td>
<td id="C13" onclick="cl('C13');"></td>
<td id="C14" onclick="cl('C14');"></td>
<td id="C15" onclick="cl('C15');"></td>
<td id="C16" onclick="cl('C16');"></td>
</tr>
<tr>
<td id="C17" onclick="cl('C17');"></td>
<td id="C18" onclick="cl('C18');"></td>
<td id="C19" onclick="cl('C19');"></td>
<td id="C20" onclick="cl('C20');"></td>
<td id="C21" onclick="cl('C21');"></td>
<td id="C22" onclick="cl('C22');"></td>
<td id="C23" onclick="cl('C23');"></td>
<td id="C24" onclick="cl('C24');"></td>
</tr>
<tr>
<td id="C25" onclick="cl('C25');"></td>
<td id="C26" onclick="cl('C26');"></td>
<td id="C27" onclick="cl('C27');"></td>
<td id="C28" onclick="cl('C28');"></td>
<td id="C29" onclick="cl('C29');"></td>
<td id="C30" onclick="cl('C30');"></td>
<td id="C31" onclick="cl('C31');"></td>
<td id="C32" onclick="cl('C32');"></td>
</tr>
<tr>
<td id="C33" onclick="cl('C33');"></td>
<td id="C34" onclick="cl('C34');"></td>
<td id="C35" onclick="cl('C35');"></td>
<td id="C36" onclick="cl('C36');"></td>
<td id="C37" onclick="cl('C37');"></td>
<td id="C38" onclick="cl('C38');"></td>
<td id="C39" onclick="cl('C39');"></td>
<td id="C40" onclick="cl('C40');"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<p align="left">
<span class="exsmall"> ou digite o valor (hex)</span>
</p>
</td>
</tr>
<tr>
<td align="center">
<input type="text" name="PutColor" id="PutColor" size="6" maxlength="6"> <input class="admbox" type="button" tabindex="4" value="OK" onclick="putColor();">
</td>
</tr>
</table>
</body>
</html>
No código HTML, existe uma tabela que é quem “desenha” a caixa com os botões coloridos. Antes que alguém venha no blá blá blá div isso, div aquilo, trabalhar com tabelas neste caso foi muito mais fácil e proporcionou um código menor e exigiu uma ginástica beeeem menor no arquivo CSS como pode ser visto abaixo. 
CSS:
/*********************************************************
Color Picker
©2012 by Luciano Sturaro
Permitido o uso desde que citada a fonte.
*********************************************************/
p.title, span.title {
font-family: Arial, Helvetica, Verdana, Sans-Serif;
font-weight: bold;
}
p.exsmall, span.exsmall {
font-family: Arial, Helvetica, Verdana, Sans-Serif;
font-size: 0.6em;
}
table.colorpick {
border: 0px;
border-collapse: separate;
border-spacing: 5px;
empty-cells: show;
}
table.colorpick td {
border: 1px solid #999999;
width: 11px;
height: 12px;
font-size: 0.1em;
cursor: pointer;
}
#C01 { background-color: #000000; }
#C02 { background-color: #993300; }
#C03 { background-color: #333300; }
#C04 { background-color: #003300; }
#C05 { background-color: #003366; }
#C06 { background-color: #000080; }
#C07 { background-color: #333399; }
#C08 { background-color: #333333; }
#C09 { background-color: #800000; }
#C10 { background-color: #FF6600; }
#C11 { background-color: #808000; }
#C12 { background-color: #008000; }
#C13 { background-color: #008080; }
#C14 { background-color: #0000ff; }
#C15 { background-color: #666699; }
#C16 { background-color: #808080; }
#C17 { background-color: #FF0000; }
#C18 { background-color: #FF9900; }
#C19 { background-color: #99CC00; }
#C20 { background-color: #339966; }
#C21 { background-color: #33CCCC; }
#C22 { background-color: #3366FF; }
#C23 { background-color: #800080; }
#C24 { background-color: #999999; }
#C25 { background-color: #FF00FF; }
#C26 { background-color: #FFCC00; }
#C27 { background-color: #FFFF00; }
#C28 { background-color: #00FF00; }
#C29 { background-color: #00FFFF; }
#C30 { background-color: #00CCFF; }
#C31 { background-color: #993366; }
#C32 { background-color: #C0C0C0; }
#C33 { background-color: #FF99CC; }
#C34 { background-color: #FFCC99; }
#C35 { background-color: #FFFF99; }
#C36 { background-color: #CCFFCC; }
#C37 { background-color: #CCFFFF; }
#C38 { background-color: #99CCFF; }
#C39 { background-color: #CC99FF; }
#C40 { background-color: #FFFFFF; }
Todas as cores são definidas apenas no arquivo CSS, sendo muito simples de alterar as cores padronizadas para qualquer valor de sua preferencia. Basta alterar o valor nos ID #Cxx e pronto, já será alterada na tabela que gera os botões e será a nova cor passada ao clicar nos botões.
Não foi por acaso, essa paleta de cores foi copiada do editor do WordPres eheh. 
Java Script:
// Color Picker
// ©2012 by Luciano Sturaro
// Permitido o uso desde que citada a fonte.
function getstyle(obj, cAttribute) {if (obj.currentStyle) {
this.getstyle = function (obj, cAttribute) {return obj.currentStyle[cAttribute];};
} else {
this.getstyle = function (obj, cAttribute) {return window.getComputedStyle(obj, null)[cAttribute];};}
return getstyle(obj, cAttribute);
}
function cl(value) {
var tryId = document.getElementById(value);
var color = getstyle(tryId, 'backgroundColor');
var m = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(color);
var color = m ? '#' + (1 << 24 | m[1] << 16 | m[2] << 8 | m[3]).toString(16).substr(1) : color;
var color = color.toUpperCase();
alert('<font color="' + color + '">Teste</font>');
}
function putColor() {
var color = document.getElementById("PutColor").value;
var color = '#' + color.toUpperCase();
var regColorcode = /^(#)?([0-9a-fA-F]{3})([0-9a-fA-F]{3})?$/; //Valida codigo de cor
if (color!='#') {
if(regColorcode.test(color) == false) {
alert('Codigo de cor inválido!');
return false;
}
alert('<font color="' + color + '">Teste</font>');
}
}
O javascript captura a cor de fundo dos elementos da tabela, que passam a comportar-se como se fossem botões.
Existe uma certa ginástica nesse codigo, porque os navegadores usam métodos diferentes de captura, retornando valores em formatos diferentes. O IE retorna o valor diretamente em hexadecimal (#rrggbb, já o firefox, chrome e opera, retornam o valor no formato rgb(rrr, ggg, bbb), sendo necessário uma pequena função com expressão regular para converter o valor de rgb decimal para hexadecimal.
Para usar, basta modificar as linhas onde tem os ALERT (linhas 19 e 34 do java script) para jogar a string para a sua função/código/whatever.
Testei esse código no firefox, opera e chrome, e até mesmo no tranqueira do IE6 e funcionou muito bem! E o código pode não ser a coisa mais linda do mundo, mas funciona redondinho, e o W3C não reclama do HTML e muito menos do CSS, esta tudo feito conforme manda os padrões. 
Se quiser usar alguma cor esdruxúla, basta digitar na caixinha e clicar no OK. Existem apenas duas condições de tratamento de erro nessa caixinha, que cercam todas as possibilidades.
A) se digitar um código errado (valores válidos: 0-9, A-F), ou incompleto, dá um alerta de cor inválida.
B) clicar no ok sem entrar valor, mantendo a caixa em branco, nada acontece.
Ah! Na caixa deve ser digitado somente o valor em hexadecimal, não precisa inserir o simbolo #. Ele é inserido automaticamente pelo script.
Tanto faz digitar em maiúsculas o minusculas, o script já passa os valores para maiúsculas.
Você pode fazer um test-drive do código clicando aqui.
Gostou? Usou? Clica nas @#$@#%$ das estrelinhas ali em cima e comente! 
[  Ouvindo: ‘Nick Heyward – Tell Me Why (Rare Original Version) (1988)‘ ] |
2:09 AM | 
Luciano | 
2 comentários
Badulaques da China
realmente muito útil!!
Comentários de danielplacido: 8
Luciano, achei bem interessante esse código, da pra usar ele pra testar a cor do texto em função do fundo da página, mas rápido e prático.
Comentários de Picco: 15