Buenas communiters, el dia de hoy necesito que alguien me ayuden con dos problemitas que tengo con una funcion que estoy construyendo, la funcion en si, requiere recibir como parametro una cadena de texto que representa una funcion -webkit-gradient() que es utilizada por los naveradores webkit como google crhome para crear imagenes de degradados que se ponen en el atributo background-image del style de un objeto HTML. La cadena a procesar es mas o menos asi:
-webkit-gradient(radial, 50% 33%, 1, 50% 33%, 180, from(rgb(255, 187, 51)), color-stop(0.49, rgb(255, 46, 0)), color-stop(0.51, rgb(255, 106, 0)), to(rgba(255, 255, 255, 0)))Lo que necesito obtener de la cadena es:
- el tipo, que para este caso es radial (si el tipo es lineal, no hay un valor radio despues de cada par de coordenadas)
- los valores x0 y y0 (coordenadas) que son los porcentajes que estan despues del tipo y su radio (si esta presente), que es un numero que los precede
- los valores x1 y y1 (coordenadas) que son los porcentajes que estan despues de x0 y y0 y su radio (si esta presente), que es un numero que los precede
- el color que esta dentro de la funcion from
- el color que esta dentro de la funcion to
- el valor y el color que esta dentro de cada funcion color-stop
Ahora que mis dos problemas son, que los colores estan expresados en rgb o rgba, ya que es asi como los computa el navegador, y yo los necesito en hsla, el otro problema es que la cantidad de funciones color-stop es variable, pueden ser 0 o mas. de no ser por estos dos problemas la funcion estaria a mi alcance en conocimientos, pero no tengo ni idea de como convertir rgb o rgba a hsla y tampoco se por donde empezar con lo de los color-stop, si alguien tiene alguna idea se lo agradeceria, si necesitan ver la herramienta para hacer degradados que estoy creando, se las posteo aqui, no es muy largo el codigo y es un html que deben abrir con google crhome o safari, pero en safari no lo he probado y no se si funcione bien.
<!doctype html>
<html>
<head>
<title>Degradado</title>
<meta charset=UTF-8 />
<style>
form{width:1000px;display:table;margin:1em auto;}
img{
border:1px solid black;
border-radius:5px;width: 25px;height: 25px;
cursor:pointer;
}
img[id=stopMas]{background-image: -webkit-gradient(radial, 50% 50%, 1, 50% 50%, 16, from(hsla(0,100%,0%,1)), to(hsla(180, 50%, 0%, 1)), color-stop(50%, hsla(180, 0%, 0%, 0)));}
img[id=stopMenos]{background-image: -webkit-gradient(radial, 50% 50%, 1, 50% 50%, 8, from(hsla(0,100%,0%,1)), to(hsla(180, 50%, 0%, 1)), color-stop(50%, hsla(180, 0%, 0%, 0)));}
.left{width:550px;float:left;display:inline;margin-right:5px;}
.right{width:410px;display:inline;}
.control{display:table-row}
.lorem{
position:fixed;display:inline;width:390px;margin: 0px auto auto 5px;
font:normal normal normal 15px/normal 'arial';
}
.left label{
display:table-cell;width:75px;position:relative;
font:normal normal normal 15px/normal 'arial';
}
.dosPorFila label{padding-left:15px;width:auto;}
input[type=radio]{display:table-cell;}
input[type=range]{
display:table-cell;width:420px;position:relative;margin:auto 0px auto 30px;
}
input[type=text]{
display:table;width:400px;
}
label.muestras{border:1px solid black;}
p[id=degradado]{
display: table;margin:auto;
border: 1px solid black;
font: normal normal normal 15px/normal 'arial';
}
div[id=preview]{
border:1px solid black;position:relative;display:table;width:405px;height:405px;margin:0px auto auto 0px;z-index:1;
background-image:-webkit-gradient(linear, 0% 100%, 0% 0%, from(hsla(0, 100%, 0%, 1)), to(hsla(180, 50%, 100%, 0)));
}
</style>
<script>
window.onload = function(){
document.getElementById("t1").onclick = cambiarPuntos;
document.getElementById("t2").onclick = cambiarPuntos;
document.getElementById("salida1").onclick = cambiarSalida;
document.getElementById("salida2").onclick = cambiarSalida;
document.getElementById("texto1").onclick = texto;
document.getElementById("texto2").onclick = texto;
document.getElementById("c1").onclick = tomarColor;
document.getElementById("c2").onclick = tomarColor;
document.getElementById("h").onchange = controlHSLA;
document.getElementById("s").onchange = controlHSLA;
document.getElementById("l").onchange = controlHSLA;
document.getElementById("a").onchange = controlHSLA;
document.getElementById("x0").onchange = controlPuntos;
document.getElementById("y0").onchange = controlPuntos;
document.getElementById("x1").onchange = controlPuntos;
document.getElementById("y1").onchange = controlPuntos;
document.getElementById("radio1").onchange = controlPuntos;
document.getElementById("radio2").onchange = controlPuntos;
document.getElementById("radio1").onclick = controlPuntos;
document.getElementById("radio2").onclick = controlPuntos;
document.getElementById("stopMas").onclick = mas;
document.getElementById("stopMenos").onclick = menos;
}
function texto(){
var texto = document.getElementsByName("texto");
for(var i in texto){
if(texto[i].checked){document.getElementById("lorem").style.visibility = texto[i].value}
}
}
function mas(){
//Creando el control de color
var num = document.getElementsByClassName("chkStop").length;
var label = document.createElement("label");
label.setAttribute("for", "s" num);
label.appendChild(document.createTextNode("Stop " num));
var radioInput = document.createElement("input");
radioInput.setAttribute("type", "radio");
radioInput.setAttribute("name", "color");
radioInput.setAttribute("id", "s" num);
radioInput.setAttribute("value", (num 2));
radioInput.setAttribute("checked", "true");
radioInput.addEventListener("click", tomarColor, false);
var chkInput = document.createElement("input");
chkInput.setAttribute("type", "checkbox");
chkInput.setAttribute("class", "chkStop");
chkInput.setAttribute("name", "chkStop" num);
chkInput.setAttribute("id", "chkStop" num);
chkInput.setAttribute("value", "1");
chkInput.setAttribute("checked", "true");
chkInput.addEventListener("change", controlPuntos, false);
var controlDiv = document.createElement("div");
controlDiv.setAttribute("class", "control");
controlDiv.appendChild(label);
controlDiv.appendChild(radioInput);
controlDiv.appendChild(chkInput);
document.getElementById("stopColors").appendChild(controlDiv);
//Creando el control de posicion
var label2 = document.createElement("label");
label2.setAttribute("for", "stop" num);
label2.appendChild(document.createTextNode("Stop " num));
var rangeInput = document.createElement("input");
rangeInput.setAttribute("type", "range");
rangeInput.setAttribute("min", "0");
rangeInput.setAttribute("max", "100");
rangeInput.setAttribute("step", "1");
rangeInput.setAttribute("value", "50");
rangeInput.setAttribute("name", "stop");
rangeInput.setAttribute("id", "stop" num);
rangeInput.addEventListener("change", controlPuntos, false);
var controlDiv2 = document.createElement("div");
controlDiv2.setAttribute("class", "control");
controlDiv2.appendChild(label2);
controlDiv2.appendChild(rangeInput);
document.getElementById("stopControls").appendChild(controlDiv2);
//Creando el control de previsualizacion
var label3 = document.createElement("label");
label3.setAttribute("for", "color" (num 2));
label3.appendChild(document.createTextNode("Stop " num));
var label4 = document.createElement("label");
label4.setAttribute("id", "muestra" (num 2));
label4.setAttribute("class", "muestras");
label4.appendChild(document.createTextNode("____"));
var textInput = document.createElement("input");
textInput.setAttribute("type", "text");
textInput.setAttribute("class", "color");
textInput.setAttribute("value", "hsla(180,50%,100%,1)");
textInput.setAttribute("name", "colores");
textInput.setAttribute("id", "color" (num 2));
var controlDiv3 = document.createElement("div");
controlDiv3.appendChild(label3);
controlDiv3.appendChild(label4);
controlDiv3.appendChild(textInput);
document.getElementById("stopPreview").appendChild(controlDiv3);
tomarColor();
armarDegradado();
colorear();
}
function menos(){
document.getElementById("stopColors").removeChild(document.getElementById("stopColors").lastChild);
document.getElementById("stopControls").removeChild(document.getElementById("stopControls").lastChild);
document.getElementById("stopPreview").removeChild(document.getElementById("stopPreview").lastChild);
radioInput = document.getElementsByName("color");
radioInput[radioInput.length-1].checked = true;
tomarColor();
armarDegradado();
colorear();
}
function actualizarMuestras(){
muestra = document.getElementsByClassName("muestras");
color = document.getElementsByName("colores");
for(var i = 0; i < muestra.length; i ){
muestra[i].style.backgroundColor = color[i].value;
}
}
function cambiarPuntos(){
var x0 = document.getElementById("x0");
var y0 = document.getElementById("y0");
var x1 = document.getElementById("x1");
var y1 = document.getElementById("y1");
var r1 = document.getElementById("radio1");
var r2 = document.getElementById("radio2");
if(this.value == "linear"){
x0.value = "0";
y0.value = "0";
x1.value = "0";
y1.value = "100";
r1.value = "1";
r2.value = "5";
}else if(this.value == "radial"){
x0.value = "50";
y0.value = "50";
x1.value = "60";
y1.value = "60";
r1.value = "10";
r2.value = "100";
}
armarDegradado();
colorear();
}
function obtenerValoresHSLA(){
h = document.getElementById("h").value;
s = document.getElementById("s").value;
l = document.getElementById("l").value;
a = document.getElementById("a").value;
}
function coloresYPuntos(){
x0 = document.getElementById("x0").value;
y0 = document.getElementById("y0").value;
x1 = document.getElementById("x1").value;
y1 = document.getElementById("y1").value;
t1 = document.getElementById("t1");
t2 = document.getElementById("t2");
color1 = document.getElementById("color1").value;
color2 = document.getElementById("color2").value;
stops=document.getElementsByName("stop");
chkStops=document.getElementsByClassName("chkStop");
stopColors=document.getElementsByClassName("color");
}
function tomarColor(){
var num = 0;
var radio = document.getElementsByName("color");
for(var i in radio){
if(radio[i].checked){num = radio[i].value;}
}
var hsla = document.getElementById("color" num).value
var letras = hsla.split("");
var valores = "";
for(var i in letras){
if(/^(:?\d)$/.test(letras[i]) || letras[i] == "," || letras[i] == "."){
valores = letras[i];
}
}
valores = valores.split(",");
document.getElementById("h").value = valores[0];
document.getElementById("s").value = valores[1];
document.getElementById("l").value = valores[2];
document.getElementById("a").value = valores[3];
if(valores[3] != "0"){
document.getElementById("a").value = valores[3]*100;
}
}
function armarColor(){
obtenerValoresHSLA();
var colorRadios = document.getElementsByName("color");
for(var i in colorRadios){
if(colorRadios[i].checked){
var num = colorRadios[i].value;
}
}
document.getElementById("color" num).value = "hsla(" h ", " s "%, " l "%, " (a/100) ")";
actualizarMuestras();
}
function armarDegradado(){
coloresYPuntos();
if(t1.checked){
var tipo = t1.value;
var radio1 = "";
var radio2 = "";
}
else if(t2.checked){
var tipo = t2.value;
var radio1 = document.getElementById("radio1").value ", ";
var radio2 = document.getElementById("radio2").value ", ";
}
var degradado = "-webkit-gradient(" tipo ", " x0 "% " y0 "%, " radio1 x1 "% " y1 "%, " radio2 "from(" color1 ")" ", to(" color2 ")";
for(var i in chkStops){
if(chkStops[i].checked){
degradado = ", color-stop(" stops[i].value "%, " stopColors[i].value ")";
}
}
degradado = ")";
document.getElementById("degradado").innerHTML = degradado;
}
function colorear(){
var salida = document.getElementsByName("salida");
var preview = "";
for(var i in salida){
if(salida[i].checked){preview = salida[i].value;}
}
document.getElementById(preview).style.backgroundImage = document.getElementById("degradado").innerHTML;
document.getElementById("computado").value = getComputedStyle(document.getElementById(preview), null).backgroundImage;
}
function cambiarSalida(){
var salidas = document.getElementsByName("salida");
var salida = "";
for(var i in salidas){
if(salidas[i].checked){salida = salidas[i].value;}
}
document.getElementById("degradado").innerHTML = document.getElementById(salida).style.backgroundImage;
colorear();
}
function controlHSLA(){
armarColor();
armarDegradado();
colorear();
}
function controlPuntos(){
armarDegradado();
colorear();
}
</script>
</head>
<body id="body">
<form id="formulario" onsubmit="return masOMenos()">
<div class="left">
<h2>Degradado Webkit</h2>
<fieldset class="dosPorFila"><legend>Tipo</legend>
<div class="control">
<label for="t1">Lineal</label>
<input type="radio" name="tipo" id="t1" value="linear" checked />
<label for="t2">Radial</label>
<input type="radio" name="tipo" id="t2" value="radial" />
</div>
</fieldset>
<fieldset class="dosPorFila"><legend>Salida</legend>
<div class="control">
<label for="salida1">Cuadro</label>
<input type="radio" name="salida" id="salida1" value="preview" checked />
<label for="salida2">Body</label>
<input type="radio" name="salida" id="salida2" value="body" />
</div>
</fieldset>
<fieldset class="dosPorFila"><legend>Texto</legend>
<div class="control">
<label for="texto1">Visible</label>
<input type="radio" name="texto" id="texto1" value="visible" checked />
<label for="texto2">Invisible</label>
<input type="radio" name="texto" id="texto2" value="hidden" />
</div>
</fieldset>
<fieldset><legend>Colores</legend>
<div class="control">
<label for="h">Hue</label>
<input type="range" min="0" max="360" value="0" name="h" id="h" />
</div>
<div class="control">
<label for="s">Saturation</label>
<input type="range" min="0" max="100" value="100" name="s" id="s" />
</div>
<div class="control">
<label for="l">Luminance</label>
<input type="range" min="0" max="100" value="0" name="l" id="l" />
</div>
<div class="control">
<label for="a">Alfa</label>
<input type="range" min="0" max="100" value="100" name="a" id="a" />
</div>
<div class="control">
<label for="c1">De</label>
<input type="radio" name="color" id="c1" value="1" checked />
</div>
<div class="control">
<label for="c2">A</label>
<input type="radio" name="color" id="c2" value="2" />
</div>
<div id="stopColors">
<div class="control">
<label>Stops</label>
<img id="stopMas" src="" />
<img id="stopMenos" src="" />
</div>
</div>
</fieldset>
<fieldset><legend>Puntos</legend>
<div class="control">
<label for="x0">X0</label>
<input type="range" min="-50" max="150" step="1" value="0" name="x0" id="x0" />
</div>
<div class="control">
<label for="y0">Y0</label>
<input type="range" min="-50" max="150" step="1" value="100" name="y0" id="y0" />
</div>
<div class="control">
<label for="radio1">Radio 1</label>
<input type="number" min="1" step="1" value="1" name="radio1" id="radio1" />
</div>
<div class="control">
<label for="x1">X1</label>
<input type="range" min="-50" max="150" step="1" value="0" name="x1" id="x1" />
</div>
<div class="control">
<label for="y1">Y1</label>
<input type="range" min="-50" max="150" step="1" value="0" name="y1" id="y1" />
</div>
<div class="control">
<label for="radio2">Radio 2</label>
<input type="number" min="5" step="1" value="5" name="radio2" id="radio2" />
</div>
<div id="stopControls"></div>
</fieldset>
</div>
<div class="right">
<label>background-image aplicado:</label>
<p id="degradado">-webkit-gradient(linear, 0% 100%, 0% 0%, from(hsla(0, 100%, 0%, 1)), to(hsla(180, 50%, 100%, 0)))</p>
<label for="computado">Computado:</label>
<input type="text" value="0" name="computado" id="computado" />
<p class="lorem" id="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div id="preview"></div>
<fieldset><legend>Valores</legend>
<label for="color1" >De:</label><label id="muestra1" class="muestras">____</label>
<input type="text" value="hsla(0,100%,0%,1)" name="colores" id="color1" />
<label for="color2" >A:</label><label id="muestra2" class="muestras">____</label>
<input type="text" value="hsla(180,50%,100%,0)" name="colores" id="color2" />
<div id="stopPreview"></div>
</fieldset>
</div>
</form>
</body>
</html>Para lo que necesito sacar esos valores es que cuando cambio la salida (ya sea al body o al cuadro) necesito sacar el background-image que tienen computado y cargar los valores en los controles para poder modificar el valor que ya tienen y que no se pierda del todo. Cualquier ayuda sera agradecida, y si les sirve de algo mi script quedenselo y usenlo como quieran que es software libre
