Problema con scope

[_cronos2]

Hola gente, de nuevo por aquí preguntando. Estoy tratando de hacer un alter ego del FX.js que terminé hace poco para colores. Es decir, si por ejemplo el fondo es de color verde que vaya poco a poco haciéndose azul. De momento lo tengo así. Si tengo algo así:

Código Javascript:

P('#button').click(function(){
 P('#container').gradiente({
  'colores' : ['#F00', '#00F'],
  'duracion' : 10000
 });
});
 

Funciona correctamente, pero si tengo 3 colores:

Código Javascript:

P('#button').click(function(){
 P('#container').gradiente({
  'colores' : ['#F00', '#0F0', '#00F'],
  'duracion' : 10000
 });
});
 

Sólo me hace el último gradiente. En principio para evitarlo lo puse así:

Código Javascript:

var func = (function(){
    return function(){
     obj.fn = function(p){
      var cAct = padre.separarColor(clrs[0]); // act[R,G,B]
      var difer = padre.calcularDiferencia(clrs[0], clrs[1]);
      var objC = padre.crearObjetoColor(parseInt(cAct.R) + difer.R * p, parseInt(cAct.G) + difer.G * p, parseInt(cAct.B) + difer.B * p);
      JSPlus.escribir(padre.RGBValido(objC))
      este.css(obj.prop, padre.RGBValido(objC));
     };
     este.gradienteEnCurso = 1;
     var trans = new JSPlus.Gradiente.Transicion(obj, este);
     trans.inicio(); 
     trans = null;
     };
    })();
 

Pero parece que no tira el asunto ¿A quién se le ocurre algo?
Saludos y gracias :D

[zerokilled]

buenas cronos!

veras, como te decia en otro momento, el codigo lo encuentro muy denso para analizar. por lo que he analizado hasta el momento, me parece que el problema no es de scope sino de procedimiento. todavia no logro dar el punto exacto, pero me parece que debe estar en algun punto por aqui.

Código:

    })(); // /func
    if(este.gradienteEncurso){ return setTimeout(func, obj.intervalo); }
    func();
   } // /for

sin embargo, algunas observaciones.

• fijate que en la primera linea marcada tienes un error tonto pero despues de uno ver tanto codigo ni cuenta uno se da. la propiedad deberia ser gradienteEnCurso.
  
• en la siguiente linea, no le encuentro sentido el porque crear una funcion anonima autoinvocada. dicha linea realmente no tiene ningun proposito salvo crear un array. me parece que quisistes hacer un closure pero en realidad no se crea ninguno. ni siquiera es necesario hacerlo asi puesto que estas creando un array los valores de las variables son directamente asignado cuando se crea el array.
  
  Código:

      var clrs = (function(){ return [act, sig]; })();
  

  lo mismo con la funcion func, en ningun momento se crea un closure.
• por ultimo, esta observacion es mas meramente por gusto o legibilidad. veo que tienes la costumbre de constantemente calcar objetos. es decir, asignar propiedades por defectos a un objeto cuando no estan presentes. me refiero por ejemplo a este codigo.
  Código:

    for(var i in padre.porDefecto){ obj[i] = objeto[i] || padre.porDefecto[i]; } // Calcar porDefecto
  

  opino que el codigo seria mas legible si usaras constructores y en el prototipo asignar los valores por defectos. un ejemplo a lo que me refiero, pero por supuesto adapartarlo a tu libreria.
  
  Código:

  Object.prototype.setProp = function(data){
  if(data === undefined || data.constructor != Object) return false;
  for(var prop in data) if(data.hasOwnProperty(prop)) this[prop] = data[prop];
  return true;
  };
  
  function Sample(){
  if(!this.setProp(arguments[0])) throw new TypeError("Unexpected type of value in arguments.");
  }
  
  Sample.prototype = {
  prop: 0,
  name: "default",
  done: false
  };
  

[_cronos2]

Lo del array, me di cuenta después y lo cambié en local, pero ya no modifiqué el archivo de internet.
El closure de func, bueno pues en teoría queda una function y dentro otra, pero de todas maneras no tengo muy claro cómo crear ese closure. ¿Se te ocurre cómo?
Por último lo de calcar, ya se me había ocurrido, lo que pasa que trato de hacer lo más independientes posibles unos archivos de otros, pero bueno supongo que algo podré hacer al respecto XD
Saludos y gracias por responder (:

[masterpuppet]

Buenas,

A ver, estas sobreecribiendo, obj.fn, en cada iteracion y el tiempo que le estas asignando al timeout es muy bajo, un posible parche:

Código Javascript:

JSPlus.metodos({
    'gradiente' : function(objeto) {
 
        var este = this, padre = JSPlus.Gradiente;
 
        var colores = objeto.colores;
 
        if(colores.constructor === Array) {
 
            objeto.duracion /= colores.length;
 
            for(var i = 1; sig = colores[i]; ++i) {
 
                var obj = {}
                for(var p in padre.porDefecto) {
                    obj[p] = objeto[p] || padre.porDefecto[p];
                }
 
                var act = colores[i - 1];
 
                obj.fn = function(I, F) {
 
                    return function(p) {
 
                        var cAct  = padre.separarColor(I);
                        var difer = padre.calcularDiferencia(I, F);
                        var objC  = padre.crearObjetoColor(
                            parseInt(cAct.R) + difer.R * p,
                            parseInt(cAct.G) + difer.G * p,
                            parseInt(cAct.B) + difer.B * p
                        );
                        este.css(obj.prop, padre.RGBValido(objC));
 
                    };
 
                }(act, sig);
 
                var func = function() {
                    este.gradienteEnCurso = 1;
                    var trans = new JSPlus.Gradiente.Transicion(obj, este);
                    trans.inicio();
                };
 
                if(este.gradienteEnCurso == 1) {
                    return setTimeout(function(){ func(); }, 3400);
                }
 
                func();
 
            }
 
        }
        return este;
     }
});
 

Esto tiene dos fallos grandes, el primero hace el merge dentro del loop, para solucionar esto deberías cambiar la implementacion de JSPlus.Gradiente.Transicion y separar el callback de las propiedades, el otro es setear un timeout para comprobar si el efecto se esta ejecutando, deberias implementar tu clase de eventos y poder asignarle custom events a tus clases, algo esencial para manejar efectos y colas de efectos, deberías poder hacer algo así:

Código Javascript:

new JSPlus.Gradiente.Transicion(el, {
   onStart: function(){...},
   onStep: function(){},
   onComplete: function(){...}
});
 

Te dejo un par de referencias:

http://www.nczonline.net/blog/2010/0...in-javascript/
http://www.geekdaily.net/2008/04/02/...custom-events/

Saludos.

[_cronos2]

Bueno lo primero muchas gracias por contestar. Antes de ponerme a modificar Gradiente.js estoy tratando de hacer mi propio manejador de eventos como me indicaste. Aquí tengo un ejemplo (bastante inútil, pero no se me ocurría otra cosa que hacer )
La pregunta es: ¿Cómo puedo mejorarlo? Esque se me queda muy corto como para hacerlo un plugin aparte, pero demasiado largo para ponerlo en JSPlus.js . Además lo veo bastante manco para algunas cosas.
Y por último, ¿te importaría explicarme la diferencia entre esto:

Código Javascript:

// Eventos
 
JSPlus.metodos((function(){ 
 var eventos = ['blur', 'change', 'click', 'dblClick', 'focus', 'keyDown', 'keyPress', 'keyUp', 'reset', 'select', 'submit'], obj = {}, act;
 for(var i = 0; act = eventos[i]; i++){
  obj[act] = function(closure){
   return function(toDo){
    if(!toDo){
     this[closure]();
     return this; 
    };
    return this.evento(closure, toDo);
   }
  }(act);
 }
 return obj;
})());
 

y esto?

Código Javascript:

obj.fn = function(I, F){
     return function(p){
      console.log(I,F);
      var cAct = padre.separarColor(I); // descomponer act [R,G,B]
      var difer = padre.calcularDiferencia(I, F); // fin - ini
      var objC = padre.crearObjetoColor(
        parseInt(cAct.R) + difer.R * p, 
        parseInt(cAct.G) + difer.G * p, 
        parseInt(cAct.B) + difer.B * p
      );
      JSPlus.escribir(padre.RGBValido(objC))
      este.css(obj.prop, padre.RGBValido(objC));
     };
    }(act, sig);
 

Quiero decir, los dos siguen la estructura

function(a)
return function(b){
// ...
};
}(c);

pero sólo funciona la primera. Puede que influya que una es de @ZK () y la otra mía
Saludos y gracias otra vez :D

[masterpuppet]

¿Cómo puedo mejorarlo? Es que se me queda muy corto como para hacerlo un plugin aparte, pero demasiado largo para ponerlo en JSPlus.js . Además lo veo bastante manco para algunas cosas.

Creo que como implementación inicial, esta bien, en que se puede mejorar, esta en uno de los post's y cito:

1. Bubbling of events
2. Continue to execute event handlers even if one throws an error
3. Allow event handlers to cancel further processing or default actions

pero sólo funciona la primera. Puede que influya que una es de @ZK () y la otra mía

Porque dices que no funciona ?, si haces obj.fn() no se ejecuta la función ?

[_cronos2]

Iniciado por masterpuppet

Creo que como implementación inicial, esta bien, en que se puede mejorar, esta en uno de los post's y cito:

1. Bubbling of events
2. Continue to execute event handlers even if one throws an error
3. Allow event handlers to cancel further processing or default actions

Sí, eso también lo leí, pero no se me ocurrió un caso de bubbling de estos eventos; del segundo, podría almacenar los errores en un array, pero ¿cómo sé cuándo debo 'soltarlos'?; y el tercero no entendí lo que decía

Iniciado por masterpuppet

Porque dices que no funciona ?, si haces obj.fn() no se ejecuta la función ?

Hombre sí, funcionar 'funciona', pero sólo la última vez. Me acuerdo de que para lo de los eventos también tuve problemas porque se quedaba sólo con el último valor ('submit'), y tuve que cambiarlo así para que se hiciera el closure. Y ahora tengo el mismo problema, pero la misma solución no sirve
Saludos (:

[masterpuppet]

1. Un caso de uso de bubbling seria, que tuvieras una clase Queue/Chain, a la que le agregas efectos, podrías hacer el bubbling y que el/los evento/s lo/s maneje el Queue/Chain.
2. La idea es capturar los errores y guardarlos en un stack, al finalizar comprobas si hay errores y o bien los descartas silenciosamente o haces un re-throw.
3. Se refiere a cancelar el evento en ejecución.

Con respecto a obj.fn, yo creo que el problema es que lo estas "pisando" en cada iteración, hace una prueba, agrega un return al final del for y vas a ver como ejecuta el primer gradiente, por esto es la sugerencia de separar las propiedades, del callback.

Saludos.

[_cronos2]

Gracias por contestar :D
A lo primero, ¿te refieres a algo como esto?

Código Javascript:

JSPlus.Cola.Evento('mi evento');
 

A lo segundo, la pregunta sigue siendo la misma ¿Cuándo hago el throw de los errores? ¿Quizás al borrar el evento?
Y a lo tercero, ¿cómo voy a cancelar el evento... en el propio evento?
Y sí, añadiendo el return ejecuta el primer gradiente!
Sinceramente, creo que lo mejor sería que montaras algún ejemplo sencillo para que yo pudiera ver en acción a qué es a lo que te refieres. Me imagino que vas a pensar que soy demasiado pedigüeño, pero esque creo que no acabo de entender bien el concepto
Saludos (:

[masterpuppet]

A ver, no es facil de explicar,

1- La idea seria tener una cola de efectos, y agregar a esta los efectos para que se ejecuten en orden, Queue/Chain

Código Javascript:

var queue = new JSPlus.Events.Queue();
queue.add(new JSPlus.Gradiente.Transicion(el, {
   onStart: function(){...},
   onStep: function(){...},
   onComplete: function(){...}
}));
...
queue.callChain();
 

para que esto funcione correctamente en el complete de cada efecto tiene que haber un callChain, que se mueva al siguiente efecto y lo ejecute, ahora para la parte del bubbling, hay que simular una jerarquia(como la que tiene el DOM), modificando la clase events, Bubbling


2- La idea seria envolver en un try & catch la ejecución de los eventos y guardar los posibles errores en un stack, para luego comprobar si hay errores, y hacer un rethrow o descartarlos silenciosamente.

Código Javascript:

new JSPlus.Gradiente.Transicion(el, {
   onStart: function(){...},
   onStep: function(){...},
   onComplete: function(){
      if(this.hasErrors()){
         throw new Error('An error has occured: ' + this.getErrorsAsString());
      }
   }
});
 

3- Fue una mala traducción, se refiere a que el handler pueda cancelar o parar la ejecución de algún procedimiento, podría ser el caso de onStep, si hay un error hacer un cancel y que salte directamente al complete o podrías eliminar todos los handlers ante un cancel, pero eso ya depende de como lo quieras implementar.

Saludos.

[_cronos2]

Ok, muchas gracias de nuevo por todo, voy a estudiar toda esta info y veré qué puedo hacer
Saludos :D

[Aijoona]

Si sirve:

C-qwncr - A JavaScript animation sequencing utility

https://github.com/vsa-partners/c-qwncr

EDIT: Ahora que releo el primer post, en el codigo que posteaste estas complejizando innecesariamente:

Código Javascript:

var func = (function(){
  return function(){
    // codigo especifico ...
  };
})();
 
// Es lo mismo que
 
var func = function(){
  // codigo especifico ...
};
 

[_cronos2]

Bueno después de dejar esto aparcado por un tiempo, y al haber acabado de implementar una cola de efectos (sencilla), decidí volver a intentarlo. Pero tengo el mismo problema de antes, más o menos.
Si tengo esto:

Código Javascript:

P('#container').gradiente({ 'colores' : ['0,0,0', '#0f0', '#fff'] })
 

todo bien. Sin embargo:

Código Javascript:

P('#container').gradiente({ 'colores' : ['0,0,0', '#0f0', '#00f', '#fff'] })
 

me da problemas. Primero se ejecuta el gradiente de negro a verde, luego de azul a blanco, y otra vez de azul a blanco.
La cuestión es que sólo se ejecutan el primer y el último gradiente, los del medio son iguales que el último. Tengo 4000 console.log repartidos por todo el código, para poder ver dónde narices está el fallo, pero después de mucho buscar no he conseguido sacar nada en claro
Este es el código.
Espero que alguien pueda darse cuenta del error.
Saludos (:

[_cronos2]

Bueno pues como en la anterior ocasión, si hago esto sí funciona:

Código Javascript:

P('#container')
.gradiente({ 'colores' : ['0,0,0', '#0f0', '#00f'] }, { 'duracion' : 10000 * 2/3 })
.gradiente({ 'colores' : ['#00f', '#fff'] }, { 'duracion' : 10000 / 3 })
// 10000 es la duración por defecto
 

Así que el problema tiene que estar al setear obj.fn o al llamar a la función cada 2 colores:

Código Javascript:

for(var i = 0, len = claves.length; i < len - 1; i++){
  objeto.colores = coloresArr.slice(i, i + 2);
  opciones.duracion = opc.duracion * (parseInt(claves[i + 1].lastSubstr(1)) - parseInt(claves[i].lastSubstr(1))) / 100;
  este.gradiente(objeto, opciones);
 }
 

Pero sigo sin ver ni dónde ni cuál es el fallo
Saludos (:

[_cronos2]

Por fin! Después de algo más de 3 meses, he conseguido que funcione! Como imaginaba, era un problema de llamar repetidamente a la función gradiente. Más concretamente, era problema de los parámetros. Se ejecutaba el primer gradiente bien, pero los otros al almacenarse en la cola, debían esperar. Mientrar esperaban, se generaba toda la cola, así que al llamar al siguiente paso de la cola, los parámetros objeto y opciones se habían quedado con el último valor que habían tenido, ya que como son objetos se pasan por referencia.
La solución es sencilla, clonar los objetos por cada iteración. O sea que así queda el código:

Código Javascript:

var clonar = function(obj){
    var clon = {};
    for(var prop in obj){
     if(obj.hasOwnProperty(prop)){
      clon[prop] = (function(este){
       if(este[prop] instanceof Array){
        return este[prop].concat();
       }else if(typeof este[prop] == 'object'){
        return este[prop].esElemento() || este[prop] === null ? este[prop] : este[prop].clonar();
       }
       return este[prop];
      })(obj);
     }
    }
    return clon;
   };
   
   for(var i = 0, len = claves.length; i < len - 1; i++){
    var objeto = clonar(obj), opciones = clonar(opc);
    objeto.colores = coloresArr.slice(i, i + 2);
    opciones.duracion = opc.duracion * (parseInt(claves[i + 1].lastSubstr(1)) - parseInt(claves[i].lastSubstr(1))) / 100;
    este.gradiente(objeto, opciones);
   }
 

Muchas gracias a @musterpuppet por haberme sufrido todo este tiempo, y perdón por ser tan duro de mollera y no entender tus explicaciones
De momento no puedo poner un enlace al código porque al subirlo al hosting no me lo actualiza, problemas con la caché supongo, pero en cuanto pueda edito.
Saludos y gracias de nuevo :D

[Aijoona]

Cuando tengas esos problemas usa versionamiento en el tag script:

Código HTML:

<script src="/js/mylib.js?v=1.0.1"></script>
 

Lo cual obliga al browser a descargar la nueva version.

[_cronos2]

Mmm, cierto, no me había dado cuenta
Gracias!
Edit: Ahora si carga el código actual, pero el problema es que no funciona, sin embargo en el local si va... Supongo que será cosa de que el hosting es gratis
De todas maneras, aquí está el código.
Saludos (: