Laboratorio: shortcuts en formularios

ByLuis July 10, 2006

Algo a lo que suelo estar acostumbrado es a usar el teclado para realizar ciertas acciones (shortcuts), cuando estÃ¡s 8 horas diarias delante de un ordenador, si no haces uso de los shortcuts, perderÃ¡s mucho tiempo moviendo el ratÃ³n de un lado para otro.

Antes el uso estaba mÃ¡s restringido a las aplicaciones de escritorio (CTRL + S para guardar el documento, ALT + F4 para cerrar la ventana, …), pero ahora que cada vez se usa con mÃ¡s frecuencia aplicaciones web, se echan en falta estas facilidades. Aunque hay que decir que Ãºltimamente se ven con mÃ¡s frecuencia: TAB + INTRO para enviar un correo en GMail (claro que esta no se programa), CONTROL + S para guardar una entrada en Blogger, …

El desarrollo para esta funcionalidad es bastante sencillo, se trata de capturar el evento del teclado en el elemento HTML que deseemos, en nuestro caso en un textarea para escribir entradas en un blog (por ejemplo).

Tampoco es tan sencillo como capturar el evento del teclado, hay que capturar realmente el evento de “apretar” una tecla (onkeydown), para evitar que se realice la acciÃ³n por defecto cuando “soltamos” la tecla (onkeyup).

Otra dificultad a la que nos enfrentamos es la de evitar que cierto juego de teclas ejecuten la acciÃ³n predeterminada por el navegador. Por ejemplo, en Firefox, si pulso CTRL + S me querrÃ¡ guardar la pÃ¡gina como un HTML en mi disco duro, cuando yo lo que quiero es enviar el formulario al servidor para guardarlo. Para evitar el comportamiento por defecto, hay que “anular” los eventos en el elemento body.

Los eventos yo prefiero manejarlos llamando dentro del evento en la etiqueta HTML, pasÃ¡ndole como parÃ¡metro el objeto event:

<textarea onkeydown="shortcut(event)" ... ></textarea>

El objeto event solo existe en IE (para variar), en Firefox, se pasa el evento como primer parÃ¡metro de la funciÃ³n, por lo cual en firefox, al no existir event, se le pasa automÃ¡ticamente el objeto evento (en este caso KeyboardEvent), asÃ nos ahorramos el trabajo de ir preguntando que tipo de navegador es y tener que buscar el objeto event. Una vez ya tenemos en nuestro poder el objeto evento, para acceder a la tecla pulsada, solo tenemos que recuperar el valor de keyCode, que nos darÃ¡ un nÃºmero que representa la tecla pulsada, para saber si estÃ¡ pulsada la tecla control o alt, solo tendremos que chequear el valor de ctrlKey y altKey. Para saber el valor de las teclas que queremos capturar, os recomiendo que useis un alert y vayÃ¡is apuntando los nÃºmeros que os salen cuando pulsÃ¡is las teclas.

Para cancelar el evento y que no siga con lo predeterminado, hay que usar el siguiente cÃ³digo, el cual sirve para IE y para Firefox, aunque creo que ninguno de los dos es estÃ¡ndar:

evt.cancelBubble = true;
// Para Firefox
if (evt.stopPropagation) {
evt.preventDefault();
}

En el ejemplo que os voy a pasar, he capturado CONTROL+S para guardar el documento y CONTROL+B para poner en negrita el texto seleccionado dentro del textarea. Para obtener el texto seleccionado, es necesario el siguiente cÃ³digo (incluyo el aÃ±adir la etiqueta que deseamos):

if (obj.createTextRange) { // IE
var r = document.selection.createRange();
texto = r.text;
r.text = '<'+etiqueta+'>'+texto+'</'+etiqueta+'>'
} else if (obj.setSelectionRange) { // Firefox
// Posicion inicial en el string del texto seleccionado
var ini = obj.selectionStart;
// Posicion final en el string del texto seleccionado
var fin = obj.selectionEnd;
// Obtengo el substring
obj.value = obj.value.substring(0, ini)+'<'+etiqueta+'>'+obj.value.substring(ini, fin)+'</'+etiqueta+'>'+obj.value.substring(fin);
// Selecciono lo que estaba seleccionado anteriormente mÃ¡s las etiquetas
obj.selectionStart = fin+5+(etiqueta.length*2);
obj.selectionEnd = fin+5+(etiqueta.length*2);
}

El cÃ³digo necesario para realizar los shortcuts serÃa el siguiente:

<script type="text/javascript">
// Controla la pulsaciÃ³n de teclas
function shortcut(evt) {
if (evt.keyCode == 83 && evt.ctrlKey) { // CONTROL+S
// Simulacion de guardado
setTimeout('alert("GUARDADO")', 1000);
} else if (evt.keyCode == 66 && evt.ctrlKey) { // CONTROL+B
modificaTextoSeleccionado(document.getElementById("caja-texto"), 'strong');
return false;
} else {
return true;
}
}
// Se cancela los eventos que se producen
function evitaEvento(evt) {
if (evt.ctrlKey) { // CONTROL+S
evt.cancelBubble = true;
// Para Firefox
if (evt.stopPropagation) {
evt.preventDefault();
}
}
}
// Obtiene el texto seleccionado y se encierra entre etiquetas
function modificaTextoSeleccionado(obj, etiqueta) {
var texto = "";
if (obj.createTextRange) {  // IE
var r = document.selection.createRange();
texto = r.text;
r.text = '<'+etiqueta+'>'+texto+'</'+etiqueta+'>'
} else if (obj.setSelectionRange) {  // Firefox
// Posicion inicial en el string del texto seleccionado
var ini = obj.selectionStart;
// Posicion final en el string del texto seleccionado
var fin = obj.selectionEnd;
// Obtengo el substring
obj.value = obj.value.substring(0, ini)+'<'+etiqueta+'>'+obj.value.substring(ini, fin)+'</'+etiqueta+'>'+obj.value.substring(fin);
// Selecciono lo que estaba seleccionado anteriormente mÃ¡s las etiquetas
obj.selectionStart = fin+5+(etiqueta.length*2);
obj.selectionEnd = fin+5+(etiqueta.length*2);
}
}
</script>
</head>
<body onkeypress="evitaEvento(event)">
<textarea onkeydown="shortcut(event)" id="caja-texto">
...
</textarea>

Demo

Javascript

Hapi.js + Vue.js avatar

ByLuis December 22, 2019December 22, 2019

En esta nueva versión se ha añadido el poder subir el avatar, recortando la imagen usando la librería Cropper.js y para ello también se usará Vuex para guardar el avatar y que se actualice en toda la app.

Para subir la imagen se usará el siguiente método.

this.cropper
	.getCroppedCanvas( this.outputOptions )
	.toBlob( blob => {
		new ApiFectch()
			.updateAvatar( blob )
			.then( response => {
				if ( response.response ) {
					success( response.message );
					this.avatar = avatar + '?cache=' + new Date();
					this.$store.commit( `user/${ USER_SET_AVATAR }`, new User().getAvatarURL( userData.username ) + '?cache=' + ( new Date() ) );
				} else {
					error( response.message );
				}
			} );
	} );

Para manejar todo habrá que usar Vuex con módulos, por ejemplo, para el módulo user:

import { USER_SET_AVATAR, USER_SET_USERNAME } from '../mutation-types';

const state = {
	avatar: null,
	username: null,
};

const mutations = {
	/**
	 * Sets avatar
	 *
	 * @param {Object} mutationState Vuex state.
	 * @param {String} avatar Avatar string.
	 */
	[ USER_SET_AVATAR ]( mutationState, avatar ) {
		mutationState.avatar = avatar;
	},

	/**
	 * Sets username
	 *
	 * @param {Object} mutationState Vuex state.
	 * @param {String} username User name.
	 */
	[ USER_SET_USERNAME ]( mutationState, username ) {
		mutationState.username = username;
	},
};

export default {
	namespaced: true,
	state,
	mutations,
};

Aquí está el código

Javascript

DocumentFragments en Javascript

ByLuis July 22, 2008

Nunca se para de aprender, y de John Resig menos. DocumentFragments son contenedores ligeros que pueden almacenar objetos DOM de Javascript. Yo ni había oído hablar de ellos y la verdad es que su uso es sencillo y mucho más potente que trabajar con el DOM normalmente (de 2 a 3 veces más rápido).

El ejemplo que muestra John lo dice todo y muy fácil. Primero creamos unos elementos para luego insertarlos (de forma normal y con DocumentFragments):

var elems = [
document.createElement("hr"),
text( document.createElement("b"), "Links:" ),
document.createTextNode(" "),
text( document.createElement("a"), "Link A" ),
document.createTextNode(" | "),
text( document.createElement("a"), "Link B" ),
document.createTextNode(" | "),
text( document.createElement("a"), "Link C" )
];
function text(node, txt){
node.appendChild( document.createTextNode(txt) );
return node;
}

Y luego la inserción normal:

var div = document.getElementsByTagName("div");

for ( var i = 0; i < div.length; i++ ) {
for ( var e = 0; e < elems.length; e++ ) {
div[i].appendChild( elems[e].cloneNode(true) );
}
}
Y por último el nuevo método:
var div = document.getElementsByTagName("div");

var fragment = document.createDocumentFragment();

for ( var e = 0; e < elems.length; e++ ) {
fragment.appendChild( elems[e] );
}
for ( var i = 0; i < div.length; i++ ) {
div[i].appendChild( fragment.cloneNode(true) );
}
Resumiendo, mucho más eficiente y sencillo de usar. Seguro que para la próxima versión de jQuery nos ofrece esta implementación.

Javascript

Mejora tus técnicas de programación en Javascript

ByLuis November 27, 2006

Ya hemos publicado anteriormente una referencia a un artÃculo de new earth online y hoy vamos a hablar sobre otro de sus grandes artÃculos.

En este caso se trata de cÃ³mo mejorar nuestra forma de programar con Javascript. Una de las ventajas o inconvenientes de Javascript, segÃºn quien lo vea, es que se puede usar en cualquier parte de la pÃ¡gina web y que no existe ningÃºn mÃ©todo obligatorio de uso. Pero aÃºn asÃ, hay veces que es mejor seguir ciertos pasos para tener un cÃ³digo mejor y mÃ¡s limpio:

Separa el contenido de la funcionalidad, por ejemplo, si vas a aÃ±adir un evento a un objeto (onclick) aÃ±Ã¡delo mediante el evento window.onload usando un archivo js.
Una cosa que ya hemos comentado anteriormente es ver cÃ³mo funciona tu aplicaciÃ³n web si no estÃ¡ activado Javascript.
Realiza cÃ³digo compatible con los distintos navegadores. Desgraciadamente, a veces es necesario detectar el navegador y resolver segÃºn el navegador que sea.
Declara las variables usando var, si no lo haces puedes tener problemas en las funciones recursivas, por ejemplo si en una funciÃ³n tienes un for con una variable i y dentro de ese for vuelves a llamar a la misma funciÃ³n, al llegar al mismo bucle puedes tener problemas.

Javascript Best Practices

VÃa / dzone

Javascript | Uncategorized

Hapi.js + Vue.js inicializar el frontend

ByLuis July 16, 2019July 16, 2019

El backend ya está algo configurado, por lo que voy a empezar a configurar el frontend.

Instalaré varias librerías:

Vue.js
Webpack: configurado para que funcione con HMR
Eslint: para que no haya errores Javascript
Stylelint: lo mismo para CSS
Buefy: una librería que combina Bulma y Vue
Sass loader

En vez de ir instalando una a una, usando el siguiente package.json y ejecutando npm i, lo tendremos todo instalado.

{
  "name": "hapi-frontend",
  "version": "1.0.0",
  "description": "Hapi.js frontend",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --mode development --config webpack.config.dev.js",
    "build": "webpack --mode production --config webpack.config.production.js"
  },
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.5.4",
    "babel-eslint": "^10.0.2",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.0.0",
    "eslint": "^6.0.1",
    "eslint-plugin-html": "^6.0.0",
    "eslint-plugin-vue": "^5.2.3",
    "mini-css-extract-plugin": "^0.7.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "stylelint": "^10.1.0",
    "stylelint-config-standard": "^18.3.0",
    "stylelint-webpack-plugin": "^0.10.5",
    "vue-hot-reload-api": "^2.3.3",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^15.7.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2",
    "webpack-merge": "^4.2.1"
  },
  "dependencies": {
    "buefy": "^0.7.10",
    "vue": "^2.6.10"
  }
}

Como se puede ver, existen dos scripts dentro de npm: build que compila el js y extrae los CSS, y dev, que arranca el servidor de webpack habilitando HMR (🎶 ¡ya no puedo vivir sin él! 🎶).

Ambas configuraciones de webpack usan un script en común (webpack.config.common.js):

const webpack = require( 'webpack' );
const path = require( 'path' );
// Carga los ficheros .vue
const VueLoaderPlugin = require( 'vue-loader/lib/plugin' );
// Configura stylelint
const StyleLintPlugin = require( 'stylelint-webpack-plugin' );

// Para obtener un path para los alias
function resolve( dir ) {
	return path.join( __dirname, '.', dir );
}

module.exports = {
	mode: 'production',
	// Fichero inicial del proyecto
	entry: './js/main.js',
	// Fichero final para incluir
	output: {
		filename: 'js/main.js',
		publicPath: '/dist/',
	},
	module: {
		// Reglas para los ficheros
		rules: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				loader: 'babel-loader',
			},
			{
				test: /\.vue$/,
				loader: 'vue-loader',
			},
			{
				test: /\.css$/,
				use: [
					'css-loader',
					'sass-loader',
				],
			},
		],
	},
	plugins: [
		new webpack.HotModuleReplacementPlugin(),
		new VueLoaderPlugin(),
		new StyleLintPlugin( {
			files: [ '**/*.{vue,htm,html,css,sss,less,scss,sass}' ],
		} ),
	],
	resolve: {
		extensions: [ '.js', '.vue', '.json' ],
		alias: {
			'@': resolve( '' ),
		},
	},
};

El frontend se gestiona desde el fichero main.js, que inicializará Vue y añadirá el componente principal:

import Vue from 'vue';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';

import App from './components/App.vue';

import '@/assets/scss/main.scss';

Vue.use( Buefy );

new Vue( {
	el: '#app',
	components: {
		App,
	},
	render: ( c ) => c( 'app' ),
} );

// accept replacement modules
if ( module.hot ) {
	module.hot.accept();
}

Y ya por último el componente App.vue, que muestra simplemente un poco de HTML

<template>
	<header class="hero">
		<div class="hero-head">
			<h1>{{ title }}</h1>
		</div>
	</header>
</template>

<script>
export default {
	data() {
		return {
			title: "Demo site",
		};
	},
};
</script>

<style lang="scss" scoped>
	div {

		h1 {
			color: #fff;
		}
	}
</style>

Bueno, ha sido un resumen rápido, pero bajándote el código seguro que lo entiendes fácil

Javascript

Evita el uso de eval en Javascript

ByLuis February 19, 2007

Buen truco, o mejor dicho, implementaciÃ³n, para crear un objeto en Javascript en el que las funciones son referenciadas mediante un string. Puede ser muy Ãºtil cuando tenemos en un string el nombre de la funciÃ³n que queremos ejecutar, pero no queremos usar eval.

Para ello lo que creamos es un array de funciones, y el array, implementado como una tabla hash (los indices son strings), hace referencia a una funciÃ³n.

var obj = {
funciones : new Array(),
creaMetodo : function(nombre, fn) {
this.funciones[nombre] = fn;
},
ini : function() {
this.creaMetodo("prueba", function(){alert(1);});
}
}

Ahora podremos referenciar a la funciÃ³n ejecutando:

obj.funciones['prueba']();

VÃa / Scriptia

How to | Javascript | Laboratorio

Laboratorio: realizar drag and drop de elementos HTML

ByLuis June 19, 2006

Dentro de la Web 2.0 se intentan hacer cosas menos web y mÃ¡s tipo aplicaciÃ³n de escritorio. Una de estas cosas es realizar un drag and drop. Esto nos puede ser Ãºtil para interactuar con elementos, por ejemplo, tenemos una lista de productos, pinchamos en uno y arrastramos en otro, obteniendo una comparativa de los productos. Bueno, las aplicaciones que le podemos dar depende de nuestras necesidades y de nuestra imaginaciÃ³n. Eso sÃ, la forma de realizarlo es la misma.

En el ejemplo que hemos creado, hacemos que el elemento seleccionado se posicione encima del elemento sobre el que realizamos el drop. TambiÃ©n hay que tener en cuenta, que en este caso, el drag&drop que hacemos es pinchando-moviendo-pinchando, no pinchando-moviendo-soltando. Realmente tambiÃ©n se podrÃa hacer asÃ, pero como lo hemos hecho vÃ¡lido para texto, si lo hacemos de la manera normal, se podrÃa ir seleccionando el texto segÃºn se mueve el ratÃ³n.

Similar Posts