Javascript

Detectar copiar, pegar y cortar en una caja de texto con jQuery

ByLuis July 10, 2009

Algo sencillo que no conocía y que nos permite detectar cuando se copia, corta y pega en cajas de texto usando jQuery.

$(document).ready(function() {
$("input:text").bind('copy', function(e) {
alert('Copiando...');
});
$("input:text").bind('paste', function(e) {
alert('Pegando...');
});
$("input:text").bind('cut', function(e) {
alert('Cortando...');
});
});

Detect Copy, Paste and Cut operations on a TextBox using jQuery

Vía / Script & Style

Javascript | Quicklinks

Optimizing Search Functionality with Large JavaScript Arrays

ByLuis August 11, 2010

Processing arrays can take quite a few bit of time, this is something that can directly impacts the loading speed of your page and depend of the computer and the browser your users use. When you think that a typical users can load your website with a netbook , or an iphone for that matter, speeding up search in large arrays can be a good way to optimize your code …

Post original

PHP

FluentDOM: librería PHP estilo jQuery para tratar con DOMDocument

ByLuis June 15, 2009

Interesante librería que nos permite trabajar con DOMDocument de una forma sencilla, permite xpath y namespaces. La librería me recuerda a QueryPath, la cual realiza funciones similares.

echo FluentDOM($xml)
->node(
FluentDOM($samples)
->find('//b[@id = "first"]')
->removeAttr('id')
->addClass('imported')
)
->replaceAll('//p');

FluentDOM

AJAX | EstÃ¡ndares | Firefox | Javascript

FireBug: extensión de Firefox para depurar

ByLuis April 10, 2006

Una extensión que nos va a ser muy útil ya que nos permite depurar nuestras aplicaciones web. Entre las opciones que nos ofrece se encuentra la posibilidad de crear trazas en nuestras páginas web, olvidándonos así de los mensajes con alert para ver qué es lo que hace el código; nos avisa de los errores visualmente, algo que siempre he echado en falta en Firefox; inspector del DOM, CSS y eventos; línea de comandos para Javascript, se acabó el escribir el javascript: para ejecutar pruebas aisladas; monitoriza las peticiones AJAX, así como las respuestas; editor de elementos del DOM.

Completa e imprescindible
FireBug
Vía / Genbeta

Firefox | Javascript

FUEL: framework para desarrollo de extensiones de Firefox

ByLuis May 30, 2007

FUEL es un framework cuyo sentido es ayudar a realizar extensiones para Firefox de forma sencilla que accedan a las herramientas y a nivel del systema de aplicaciÃ³n. Para ello proveerÃ¡ unas librerÃas estables y documentadas, obteniendo extensiones mÃ¡s estables y por consiguiente una aplicaciÃ³n mÃ¡s estable tambiÃ©n.
Entre sus objetivos nos encontramos con la facilidad de acceder a las interfaces, componentes y servicios, disponer de paquetes para abrir ventanas, para tratar el nsIProcess, y para tratar ficheros, texto o stream enviado mediante XMLHttpRequest.
Es importante resaltar tambiÃ©n que nos ayudarÃ¡ al acceso a datos (bookmarks, microsumarios y proveedores de bÃºsquedas), al monitoreo de eventos y notificaciones, e interactuaciÃ³n con el UI de la aplicaciÃ³n.
Estoy deseando tener un poco de tiempo para mirarlo con detalle, ya que a veces al desarrollar una aplicaciÃ³n XUL nos encontramos con unas librerÃas un tanto enrevesadas.
FUEL
VÃa / Ajaxline

Javascript

Nitobi UI: elementos UI para javascript

ByLuis February 25, 2009

Impresionante librería para incluir elementos UI en nuestras aplicaciones javascript. Contiene los siguientes elementos:

Grid: tabla con celdas estilo hoja de cálculo
TreeGrid: igual que el anterior pero permite desplegar filas
ComboBox: un combo mas interactivo, como los de auto-sugerencias
TabStrip: gestión de pestañas
Tree: árbol de datos, tipo directorios/ficheros
FishEye: aumentar elementos con efecto “ojo de pez”
Callout: mensajes popup en plan bocadillo
Spotlight: resaltar elementos DOM, muy útil para realizar guías interactivas
Calendar: calendarios
Toolkit: herramientas varias para Ajax

Nitobi UI

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

One Comment

Freddy MejÃa Torres says:

August 6, 2009 at 5:45 pm

Hola, me ha servido mucho tu publicaciÃ³n, pero tengo una duda, como evito que un usuario, arrastre y coloque un texto desde alguna parte del sitio o inclusive de un texto en word o en otro programa?

Comments are closed.

Similar Posts

One Comment