Modal customizable.

Kr4n3oK

Hola he programado un modal en JavaScript, este utiliza jQuery aunque no lo extiende. Lo he programado de tal forma que permite gran variedad de personalización y poder hacer con el casi lo que te de la gana en "tiempo de ejecución" y además crear themes de una forma muy simple.
Os pongo aquí el GIT, no sé si será spam. La idea es ponerlo aquí como aportación para quien quiera usarlo o modificarlo a sus anchas.

Aún estoy documentandolo bien, pero vienen 10 ejemplos de uso donde se puede ver que se puede hacer con el.

http://adelamata.github.io/tpr.modal-plugin

DEMOS

http://adelamata.github.io/tpr.modal-plugin/demos.html

[Actualizado] 23/05/2017
Cambio de nombre de repositorio

Refloto. He actualizado la documentación y he creado un ejemplo mas, el example11.html

Saludos.

2
Kr4n3oK

Hola de nuevo. He añadido una rama del plugin, este no utilizará jQuery, si no JavaScript a pelo.
Si alguien quiere ayudar, tiene las puertas abiertas.

Gracias y saludos.

1
HeXaN

Deberías poner algunos ejemplos de cómo se ve en la web. Quieras que no, estas cosas entran por los hogos.

2 1 respuesta
Kr4n3oK

#3 Tienes 11 ejemplos en el repo. De todos modos no sé si te refieres aqui en mediavida.
Gracias y saludos!.

1 respuesta
BLZKZ

#4 que en la web que has puesto, enlaces a paginas donde se muestre "qué se puede hacer" para que la gente lo vea en vivo.

1 1 respuesta
Kr4n3oK

#5 Ah, si, pues no es mala idea. Gracias lo haré :D

15 días después
Kr4n3oK

Hola, updateo esto. He credo un html donde se puede acceder a los ejemplos mas comunes del modal, lo he hecho de esta manera para que así se pueda acceder mas rápido y ver las posibilidad.

http://kraneok.github.io/tpr.modal-plugin/demos.html

1 respuesta
Kiroushi

#7 ¿Qué beneficios ofrece tu plugin frente al bootstrap modal? Lo pregunto sin crítica, sólo curiosidad.

1 1 respuesta
Kr4n3oK

#8 Bueno así a bote pronto, quizás sea mas fácilmente modificable y customizable. Le puedes meters los botones que quieras con la lógica que quieras, puedes fácilmente cambiar textos en tiempo de ejecución, etc.

Puedes crear temas sencillamente con reglas CSS. La idea es que por ejemplo te creas un modal para mensajes satisfactorios, en tu CSS escribes las reglas (de color verde por ejemplo) y lo instancias como un modal GLOBAL. Después puedes sacarlo cuando te de la gana modificandolo para cada caso como mas lo necesites.

21 días después
Kr4n3oK

Hola subo esto para comentar que se ha refactorizado el modal para orientarlo a eventos.
Si antes el evento del boton añadido se hacía así:

buttons :{
   accept : {
       click : callback
   }
}

Ahora se hace así.

buttons {
    accept : {
        ....
    },
    otherbutton : {
        ....
    }
}

modal.on ('accept', function () {
});
modal.on ('otherbutton', function () {
});

Saludos,

1 respuesta
Tunnecino

#10 Mola! Tengo una duda... no sería conveniente añadir un prefix o algo al evento? No puede colisionar esos nombres con los de otros plugins?

1 respuesta
Kr4n3oK

#11 Hombre la verdad que el nombre es algo especialito xDD. TPRMODAL, pero vamos que es una gran aportación. Así que lo apunto y lo añado, o puedes hacerlo tu mismo.
De todos modos me da la sensación de que no te he entendido bien, ¿te refieres al nombre del evento? ¿o del plugin?

Muchas gracias!

1 respuesta
Tunnecino

#12 Al del evento. Si yo meto o hago otro plugin y le meto que lance un evento como en tu ejemplo, accept, no entraría en conflicto?

1 respuesta
Kr4n3oK

#13 No, que va. Es decir, el plugin tiene sus eventos internos y cuando los añades tu los estás añadiendo a ese elemento DOM concreto, que es quien lanza dicho evento.

bazoo

He estado mirando un poco el código y he visto que repites bastante el método append en _buildModal (y self.$modal también xD).

La repetición de self.$modal la puedes apañar con un simple: var modal = self.$modal y ya te ahorras unas cuantas letras.

Lo otro:

self.$modal.$modalcontent.append(self.$modal.$modalmorelbtn);
self.$modal.$modalcontent.append(self.$modal.$modalmorebox);

//...

self.$modal.$modalbox.append(self.$modal.$modaltopbar);
self.$modal.$modalbox.append(self.$modal.$modalcontent);
self.$modal.$modalbox.append(self.$modal.$modalbotbar);

Lo puedes abstraer en una función y te puede quedar algo así:

function append(destination, element) {
    var m = self.$modal;
    return m[destination].append(m[element]);
}

append('$modalcontent', '$modalmorelbtn');
append('$modalcontent', '$modalmorebox');

//...

append('$modalbox', '$modaltopbar');
append('$modalbox', '$modalcontent');
append('$modalbox', '$modalbotbar');

O incluso otros métodos siempre que sigan ese patrón (self.$modal.DESTINO.METODO(self.$modal.ELEMENTO)) con algo así:

function method(destination, method, element) {
    var m = self.$modal;
    return m[destination][method](m[element]);
}
// puedes luego simplificar la función append así:
function append(destination, element) {
  return method(destination, 'append', element);
}

//...

//self.$modal.$modalbox.appendTo(self.$modal.$modalbackground);
// ^ antes
// v después
$method('$modalbox', 'appendTo', '$modalbackground');

Y seguro que lo puedes simplificar más aún.

Claro, que yo soy un novato en esto y no se lo que digo, no me hagas mucho caso xD

1 1 respuesta
Kr4n3oK

#15 Hola muchas gracias por tu aporte. Tengo que mirarlo. De todos modos no veo muy bien el código, se ve mal.
¿Podrías ponerlo de nuevo mejor?.

Gracias!!

1 respuesta
bazoo

#16 Te lo paso en un gist, que no se por qué sale así :S

12 meses después
Kr4n3oK

Buenas tardes a todos. He actualizado el modal añadiendo la sugerencia del compañero Bazoo, aunque aún hay que limpiar algunas sentencias mas de paso para dejarlo del todo limpito, limpito.
Se han simplicado ademas algunas configuraciones elementos, como los botones.
Se ha actualizado el readme.md
Se ha añadido gulp con varias tareas: JSMinToProducto, CSSMinToProduction y un watch para que traspase los ficheros de desarrollo al directorio de examples, que es donde se encuentran todos los ejemplos, a la carpeta resources.

Por otra parte se ha actualizado el directorio de trabajo. Se añadido el directorio src que es donde se trabaja con los ficheros del proyecto. Luego con las tareas de gulp se lanzan minimificados a dist y con el task watch de gulp a examples/resources

https://github.com/adelamata/tpr.modal-plugin

Saludos a todos

Usuarios habituales

  • Kr4n3oK
  • bazoo
  • Tunnecino
  • Kiroushi
  • BLZKZ
  • HeXaN