A partir de ahora no voy a explicar lo que hago, sino que compartiré lo que considere algo especial, pondré algún enlace a algún otro tutorial y por supuesto el enlace al tag de GitHub.
En esta ocasión he añadido internacionalización al proyecto. Parece una tontería, pero cuanto antes se meta, en mi opinión, mejor que mejor. Luego cambiar todos los textos para que admitan i18n es un tostón enorme.
Para añadir internacionalización usaremos el paquete vue-i18n, que añade todo lo que necesitamos. Aquí hay un tutorial bastante completo que explica cómo usarlo, y es el que yo he seguido.
Lo único que he añadido es que coja el idioma del navegador:
Un buen Javascript que permite añadir zoom a nuestras imágenes. El script añade una ventana con marco sombreado a la imagen en la que se ve el zoom, pudiendo moverla por toda la imagen.
Si hacemos drag hacia arriba el zoom aumenta, hacia abajo disminuye, hacia la derecha la ventana aumenta y hacia la izquierda disminuye. Además permite utilizar otra imágen con mayor resolución para evitar el pixelado. TJPzoom
Vía / WebAppers
Hace tiempo comenté cómo hacer drag & drop directamente sobre el navegador, lo cual nos venía muy bien para subir ficheros (por ejemplo para un correo, galería de fotos, …). Esta vez se trata de descargar ficheros directamente desde el navegador, algo que permite GMail desde Chrome.
El autor de este post lo ha tenido difícil para poder ver cómo lo hace Google, pero al final el código es bastante sencillo:
var file = document.getElementById("dragout");
file.addEventListener("dragstart",function(evt){
evt.dataTransfer.setData("DownloadURL",fileDetails);
},false);
jQSlickWrap es un plugin jQuery que nos permite mostrar el texto según el contorno de una imagen. Para ello hace uso del objeto CANVAS.
Yo no soy muy partidario de usar estas funcionalidades, pero en diseños vistosos puede quedar muy bien. Independientemente de su funcionalidad, el script es impresionante.
TableCloth es un javascript no intrusivo que permite cambiar el estilo de las tablas y el comportamiento referente al estilo. Esto quiere decir que le cambia el diseño y que existen estilos asociados a filas y columnas cuando se produce un mouseover y un click.
No es necesario incluir código en las tablas, ya sean id o class, ya que el script detecta automáticamente las tablas y las trata.
Además diferencia filas alternas y deselecciona la fila y la columna elegida cuando se hace click en cualquier parte de la página. Tablecloth
VÃa / WebAppers
En algunas ocasiones es necesario añadir contenido al calendario que te ofrecer el datepicker de jQuery UI, por ejemplo añadir un combo que indice “horario mañanas/tarde”. Para conseguirlo será necesario ‘toquetear’ un poco el objeto jQuery.datepicker.
Tendremos que hacer dos cosas: primero deberemos evitar que cuando se selecciona un día se cierre automáticamente el popup con el calendario y después tendremos que modificar el HTML que devuelve la clase.
Para evitar el auto-cierre tenemos que añadir la opción showButtonPanel ya que nos ofrecerá el botón “Close” que nos permitirá cerrar el popup cuando hayamos indicado todos los campos necesarios. También es necesario modificar la función jQuery.datepicker._selectDate tal y como lo indican en StackOverflow:
// Añadimos datepicker al input que queremos
jQuery('.fecha')
.datepicker({
showButtonPanel: true,
dateFormat: "DD, d MM, yy"
});
// Modificamos la funcion _selectDate
jQuery.datepicker._selectDateOverload = jQuery.datepicker._selectDate;
jQuery.datepicker._selectDate = function(id, dateStr) {
var target = jQuery(id);
var inst = this._getInst(target[0]);
inst.inline = true;
jQuery.datepicker._selectDateOverload(id, dateStr);
inst.inline = false;
this._updateDatepicker(inst);
// Usar el .html() para luego usar el .text() es porque si usas el regional de datepicker, te salen entidades html en vez de letras acentuadas
// Se le añade el valor del nuevo campo select que hemos incluido
target.val(jQuery('').html(dateStr).text()+' @ '+jQuery('#horario').val());
}
Bien, ya tenemos el evento onSelect modificado, ahora nos falta cambiar el HTML que se dibuja, para ello modificaremos la función jQuery.datepicker._generateHTML:
jQuery.datepicker._generateHTMLExtended = jQuery.datepicker._generateHTML;
jQuery.datepicker._generateHTML = function(inst) {
var html = jQuery.datepicker._generateHTMLExtended(inst);
var div = jQuery('').html(html);
div.find('table:first').after('
Horario:
');
return div.html();
}
// Incluimos tambien un evento para que cuando se seleccione el horario, se modifique el campo input
jQuery('#horario').live('change', function() {
var $obj = jQuery('.fecha');
$obj.val($obj.val().replace(/@.*/, '@ '+jQuery(this).val()));
});
