Javascript

Drag & Drop de ficheros en Firefox

ByLuis February 18, 2010

Esto puede dar mucho juego, pero tan solo funciona en Firefox 3.6+, por lo que no podemos depender de este script en nuestras aplicaciones. A partir de la versión 3.6, Firefox permite realizar drag&drop de ficheros en nuestra web y mediante Javascript poder obtener los ficheros o textos que se arrastren contra un elemento específico.

Su uso es muy sencillo:

dropzone.addEventListener("drop", function(event) {
  event.preventDefault();
  // Ready to do something with the dropped object
  var allTheFiles = event.dataTransfer.files;
  alert("You've just dropped " + allTheFiles.length + " files");
}, true);

Y dispone de una API tanto para el drag&drop como para los ficheros.

Recomiendo ver el código fuente de este ejemplo para tener una librería que te hace todo el trabajo.

file drag and drop in Firefox 3.6

Javascript

Laboratorio: reordenar lista mediante mootools

ByLuis September 18, 2007

Estoy empezando a curiosear Mootools, y aunque me estÃ¡ gustando bastante, si que echo en falta una documentaciÃ³n mÃ¡s detallada, no solo explicar como va el API, ya que a veces son necesarios ejemplos mÃ¡s bÃ¡sicos para no tener que estar buscando en el API.

En este caso voy a reorganizar mediante drag&drop una lista de elementos, la cual puede tener subelementos tambiÃ©n, un tÃpico ejemplo de categorÃas y subcategorÃas. Para ello me crearÃ© una lista cuyos elementos tendrÃ¡n el estilo categoria y cuyos subelementos tendrÃ¡n el estilo subcategorias, necesario para diferenciar estilos y comportamiento.

<ul id="lista_categorias">
<li class="categoria">Elemento 1</li>
<li class="categoria">Elemento 2
<ul>
<li class="subcategoria">Elemento 2.1</li>
<li class="subcategoria">Elemento 2.2</li>
<li class="subcategoria">Elemento 2.3</li>
<li class="subcategoria">Elemento 2.4</li>
<li class="subcategoria">Elemento 2.5</li>
<li class="subcategoria">Elemento 2.6</li>
</ul>
</li>
<li class="categoria">Elemento 3</li>
<li class="categoria">Elemento 4
<ul>
<li class="subcategoria">Elemento 4.1</li>
<li class="subcategoria">Elemento 4.2</li>
<li class="subcategoria">Elemento 4.3</li>
<li class="subcategoria">Elemento 4.4</li>
</ul>
</li>
<li class="categoria">Elemento 5</li>
<li class="categoria">Elemento 6</li>
<li class="categoria">Elemento 7</li>
<li class="categoria">Elemento 8</li>
<li class="categoria">Elemento 9</li>
</ul>

Para ser lo menos intrusivo que se pueda, anadirÃ© al evento load del objeto window la carga de las funciones necesarias para ello, siempre que exista el objeto lista_categorias (el primer ul de todos).

window.addEventListener('load', function() {
_lista();
}
, false);
function _lista() {
if ($('lista_categorias')) {
...
}

HabrÃ¡ tres operaciones distintas: crear efecto drag, aÃ±adir evento drop a las categorÃas y aÃ±adir evento drop a las subcategorÃas. Digo crear efecto drag porque realmente lo que se hace es que cuando se ejecuta el evento mousedown, se crea una copia del elemento, y es este el que se mueve por la pantalla, guardando una referencia al elemento original. Hay distinciÃ³n entre el evento drop de las categorÃas y las subcategorÃas porque si se trata de una categorÃa se aÃ±ade sin mÃ¡s, y si es una subcategorÃa se aÃ±ade en la categorÃa. A parte, si se intenta mover una categorÃa que contiene subcategorÃas, solo se aÃ±adirÃ¡n las subcategorÃas, no la categorÃa.

// Drag & Drop de listado
function _lista() {
if ($('lista_categorias')) {
// Drag de cada categoria/subcategoria
// Para cada elemento li aÃ±ado el evento mousedown, para que cuando se ejecute se cree una copia de ese elemento, se le de estilo semi transparente y se permita hacer drag
$$('#lista_categorias li').each(function(elemento){
elemento.addEvent('mousedown', function(e) {
e = new Event(e).stop();
window.item = elemento;
window.categoria_clone = this.clone()
.setStyles(this.getCoordinates())
.setStyles({'opacity': 0.7, 'position': 'absolute'})
.addEvent('drop', function() {console.log('DROP')})
.addEvent('emptydrop', function() {
this.remove();
}).inject(document.body);
categoria_clone.makeDraggable({
droppables: $$('#lista_categorias li')
}).start(e);
});
});
// Drop en las categorias
// Para cada categoria, le aÃ±adimos el evento drop, que permite recibir elementos "drag". Si el elemento que se recibe tiene subcategorias, entonces se cogen estas y se aÃ±aden al elemento ul que contiene, si no lo contiene, lo creamos. Si no contiene subcategorÃas, se aÃ±ade sin mÃ¡s.
$$('#lista_categorias li.categoria').each(function(drop){
drop.addEvents({
'drop': function() {
window.categoria_clone.remove();
var ul = window.item.getElement('ul');
if (!drop.getElement('ul')) {
(new Element('ul')).inject(drop);
}
dropul = drop.getElement('ul');
if (ul) {
ul.getElements('li').each(function(li) {
li.inject(dropul);
});
ul.remove();
} else {
window.item.inject(dropul);
}
drop.setStyle('background', '#FFFFFF');
//dropFx.start('7389AE').chain(dropFx.start.pass('ffffff', dropFx));
},
'over': function() {
drop.setStyle('background', '#DDDDFF');
//dropFx.start('98B5C1');
},
'leave': function() {
drop.setStyle('background', '#FFFFFF');
//  				window.categoria_clone.remove();
//dropFx.start('ffffff');
}
})
});
// Si cae el drop en una subcategoria lo inserto en el padre
$$('#lista_categorias li.subcategoria').each(function(drop){
drop.addEvents({
'drop': function() {
window.categoria_clone.remove();
var ul = window.item.getElement('ul');
dropul = drop.parentNode;
if (ul) {
ul.getElements('li').each(function(li) {
li.inject(dropul);
});
ul.remove();
} else {
window.item.inject(dropul);
}
}
})
});
}
}

Ejemplo

Descargar Ã³digo

Javascript

jQuery Masonry: encaja capas HTML

ByLuis June 2, 2009

Supongo que lo de “encajar capas HTML” no es algo que se entienda muy bien, pero realmente se trata de eso. Este plugin de jQuery coloca las capas HTHL de tal forma que no queden espacios en blanco entre ellas (algo normal cuando se usa el css float).

Hay que tener cuidado, porque aunque nos devuelve un layout sin espacios en blanco, también nos lo da con un orden no muy usable, por lo que es importante no usar este plugin cuando el orden de colocación importa.
jQuery Masonry
Vía / WebAppers

Javascript

TrimQuery: usa SQL en Javascript

ByLuis July 4, 2007

TrimQuery es un script que permite usar sentencias SQL para obtener datos contenidos en un objeto JSON.

Entre las caracterÃsticas que permite, nos encontramos con:

Codificado en Javascript estÃ¡ndar.
Admite SELECT … FROM.
ClÃ¡usulas WHERE.
OrdenaciÃ³n (ORDER BY) de varias columnas de forma ascendente (ASC) y descendente (DESC).
Alias (AS).
Agrupaciones (GROUP BY y HAVING).
Funciones: SUM, COUNT y AVG.
Joins
LIMIT y offsets.
ParametrizaciÃ³n.
Es ligero (mÃ¡s o menos), ya que ocupa menos de 700 lÃneas.

Si por ejemplo disponemos del siguiente objeto:

Invoice  : [ { id: 1, total: 100, custId: 10 },
{ id: 2, total: 200, custId: 10 },
{ id: 3, total: 300, custId: 10 },
{ id: 4, total: 400, custId: 20 } ],
Customer : [ { id: 10, acctBalance: 1000 },
{ id: 20, acctBalance: 2000 },
{ id: 30, acctBalance: 3000 } ]

Podemos obtener datos con la siguiente consulta:

SELECT Customer.id, Customer.acctBalance, Invoice.total
FROM Customer, Invoice
WHERE Customer.id = Invoice.custId
ORDER BY Customer.id

Es sensible a mayÃºsculas y minÃºsculas, ya que diferencia entre FROM y from.

Demo

TrimQuery

VÃa / dzone

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

Firefox

Firefox 2.0 alpha 3 lanzada

ByLuis May 29, 2006

La gente de Mozilla ha sacado la versiÃ³n alpha 3 de Friefox 2.0. Como novedades nos encontramos la protecciÃ³n anti-phishing y el soporte para sesiones en la parte del cliente, lo cual puede ser bastante interesante, claro que si es el Ãºnico que lo soporta tendremos un problema a la hora de hacer pÃ¡ginas multinavegador.
Bon Echo Alpha 3
VÃa / Mozilla Developer News

Javascript

Hapi.js+Vue.js reorganizar la configuración del servidor

ByLuis April 29, 2019April 29, 2019

Algo bastante importante en un proyecto es la configuración y cómo se gestiona. Para facilitar la gestión usaremos dos librerías dotenv y confidence, la primera permite usar ficheros .env en nuestro entorno de desarrollo para simular variables de entorno. La segunda nos ayudará a recuperar las variables de un objeto permitiendo usar filtros, por ejemplo según de las variables de entorno.

Instalaremos los paquetes:

npm i dotenv

npm i confidence

Confidence necesitará un criterio que nos permitirá obtener distintos resultados según su valor. Imaginemos que tenemos el siguiente criterio:

const criteria = {
	env: 'development',
};

Y estos datos de configuración:

{
	debugLevel: {
		$filter: 'env',
		development: INFO,
		production: ERROR,
	},
}

Si queremos acceder al nivel de debug, al ser env igual a development, obtendíamos INFO.

Vale, ¿y cómo lo usamos en el proyecto? Primero creamos una carpeta config, donde crearemos el fichero index.js que tendrá toda la configuración del servidor:

const Confidence = require( 'confidence' );
const Dotenv = require( 'dotenv' );

Dotenv.config( { silent: true } );

// NODE_ENV is used in package.json for running development or production environment
const criteria = {
	env: process.env.NODE_ENV,
};

const config = {
	port: 3001,
};

const store = new Confidence.Store( config );

exports.get = function( key ) {
	return store.get( key, criteria );
};

exports.meta = function( key ) {
	return store.meta( key, criteria );
};

Dotenv simplemente se usa para obtener de las variables de entorno de servidor el valor de NODE_ENV. Por ahora solo tendremos la variable port, pero ya estará preparado para poder añadir otras variables de configuración posteriormente.

Creamos un store de Confidence y exportaremos los métodos get y meta.

Haremos algo parecido para el manifest necesario para Glue, creando el fichero manifest.js dentro del directorio config:

const Confidence = require( 'confidence' );
const Config = require( './index' );

const criteria = {
	env: process.env.NODE_ENV,
};

const manifest = {
	server: {
		port: Config.get( '/port' ),
	},
};

const store = new Confidence.Store( manifest );

exports.get = function( key ) {
	return store.get( key, criteria );
};

exports.meta = function( key ) {
	return store.meta( key, criteria );
};

Como se puede apreciar fácilmente obtenemos el valor de port de forma bastante simple.

Y por último modificamos el fichero index.js para hacer eso de estos nuevos ficheros:

const Glue = require( '@hapi/glue' );
const Manifest = require( './config/manifest' );

const options = {
	relativeTo: __dirname,
};

const startServer = async function() {
	try {
		const manifest = Manifest.get( '/' );
		const server = await Glue.compose( manifest, options );
		await server.start();
		console.log( 'hapi days!' ); // eslint-disable-line
	} catch ( err ) {
		console.error( err ); // eslint-disable-line
		process.exit( 1 );
	}
};

startServer();

Puedes bajarte el código aquí

Similar Posts