Un’ idea di plugin: jCropMap

Massimiliano Balestrieri — Thu, 12 Nov 2009 18:12:52 +0000

SOMMARIO

Per chi non avesse la pazienza di leggere, o per chi semplicemente non è italiano, o per gli autori di Jcrop, qui sotto c’è un elenco di link in cui i linguaggi sono universali: html, javascript (jQuery) e qualche proprietà di css.

DOWNLOAD

DEMOS

IL TAG MAP

Il tag map, e il “sottotag” area permettono di “disegnare” link all’interno di un immagine.

Qui c’è un esempio di utilizzo.

LIMITI DEL TAG MAP

Il limite principale di questo tag è a mio modo di vedere l’impossibilità di applicare stili ai tag “AREA” presenti all’interno.
In pratica l’unico indizio visivo del link all’interno di una certa porzione di immagine, che viene dato all’utente, è il cursore.
Non è possibile anche solo applicare bordi.
Tutto questo fondamentalmente perchè il tag map permette di creare aree di tipo “rect” (e non sarebbe un problema per un browser disegnarne il bordo), “circle”, “poly”.
Quindi il browser dovrebbe saper disegnare (canvas).

Altro limite, ma non direttamente del tag, è la difficoltà di scrivere le coordinate.

ALTERNATIVE AL TAG MAP

Listapart ci aveva già pensato, e suggerisce di creare qualcosa di completamente diverso. Javascript legge una lista, disegna dei punti in posizione assoluta, e al click (o al mouseover) visulizza un tooltip.

L’idea è quella.

Siccome il mio problema comunque, era di dare in mano ad un redattore uno strumento per inserire i punti, ho iniziato a fare scouting di plugins che disegnassero aree sopra un’ immagine.

JQUERY JCROP

Ecco che arrivo a Jcrop.

Jcrop è un plugin jQuery principalmente pensato per tagliare immagini.

Inizialmente non pensavo di usarlo come sostituto dei tag map/area.

Pensavo solo di usare le coordinate che restuitiva, salvarle nel database e successivamente creare le aree lato “frontoffice” leggendo dal database le coordinate salvate dal redattore della mappa.

Quindi l’avevo scelto come strumento di backoffice.

Qui un semplice utilizzo di Jcrop con le coordinate restituite in campi form.

JCROP COME SOSTITUTO DEL TAG MAP

Alla fine anche per la presentazione ho deciso di provare ad utilizzare il plugin.

Questo è il risultato.

Una serie di link presi da una lista con le coordinate passate via metadata.

L’implementazione è semplice (anche se le coordinate non sono proprio user-frendly).

L’ESEMPIO BASE

Il container:

L’immagine:

La lista di aree:


	Gattuso
    Pirlo
    Zambrotta
    Camoranesi
    Cannavaro
    Perrotta
    Totti
    Grosso
    Toni
    Barzagli
    Buffon

Il JS NELL’HEAD:

jQuery(window).load(function(){
	jQuery(".jcropmap").jcropmap();
});

NB:

non ci sono regole forti per questo plugin per la struttura html. L’ importante è scegliere una classe o un id per il wrapper container e richiamarla nell’head quando si avvia il costruttore. All’interno di questo wrapper ricordarsi solo che i link vengono cercati all’interno di un ul, e l’immagine DEVE avere come classe jcropbox (sovrascrivibile da opzione).

CREARE LE AREE

Visto che non è proprio semplice scrivere le coordinate delle aree, ho creato una demo con una banale gestione della sessione.

Questa demo non è un plugin.

E’ solo uno spunto per crearsi la propria gestione dei link.

Sarà quindi necessario implementare un servizio che ad esempio salvi le informazioni su db.

VISUALIZZARE IL RISULTATO

Una volta inserite le coordinate nella demo precedente, potrete vedere il risultato dei vostri “tag” qui.

EXTRA : SHAPES, OPTIONS, RELEASE

Ho aggiunto anche la possibilità di visualizzare le aree all’interno del “viewport” di Jcrop, e di sovrascrivere le opzioni che vengono passate. Un esempio.

Qui invece mostro come ho agganciato il metodo release dell’oggetto costruito all’interno del plugin (click sul body).

Non è una tecnica pulitissima. Ma nemmeno quella di Jcrop mi sembra elegante.

FEEDBACK

Se ci sarà un certo riscontro a questo post, magari versionerò il plugin, esporrò meglio le opzioni, e magari anche un API pubblica di metodi.

Fino ad allora per maggiori informazioni o chiedete qui postando un commento, oppure guardate il codice sorgente.

Ahah & unobtrusive javascript

Massimiliano Balestrieri — Mon, 27 Jul 2009 12:59:15 +0000

DEMO

il problema
soluzione “manuale” (responsabilità dello sviluppatore)
soluzione nel plugin (responsabilità affidata al plugin)

IL PROBLEMA

Javascript non intrusivo ha un problema di fondo.
Lavorando sull’evento window.onload, i componenti javascript non intrusivi, NON si attivano nel momento in cui viene fatta un’ iniezione html nel DOM (AHAH).

Qui ho scritto un banale esempio.

Il plugin aggiunge le funzionalità draggable e resizable (jQuery UI) agli elementi HTML selezionati.

Il plugin come “comportamento di default” agisce su tutti gli elementi con classe “box” :

$(document).ready(function(){
	$(".box").myplugin();
});

Quindi nella demo tutti gli elementi con classe “box” saranno draggabili e ridimensionabili.

Il link ADD, nella DEMO, aggiunge elementi box via ajax (AHAH):

$("#add").click(function(){
    $.ajax({
        url     : 'box.html',
        success : function(html){
            $("body").append($(html).myplugin());
        }
    });
});

Questi elementi arrivando da un iniezione HTML non vengono “arricchiti” dal plugin (non sono quindi ridimensionabili ne trascinabili) perchè non sono presenti al window.onload (al document.ready per chi usa jquery).

Questo problema non si avvertirebbe se il componente fosse intrusivo (js cablato nell’html):

Se io iniettassi il codice qui sopra il box si attiverebbe perchè verrebbe valutato il js (almeno se iniettato via jquery) immediatamente senza eventi onload di mezzo.

Spesso i framework server-side sono intrusivi proprio per essere più flessibili.
Il codice html generato sarà sporco (richfaces ad esempio) ma i componenti saranno sempre “funzionanti” sia al primo caricamento sia a seguito di iniezioni html.

SOLUZIONE MANUALE

DEMO

La soluzione “manuale” (a carico dello sviluppatore che implementa il comportamento e USA il plugin) è attivare le funzionalità js prima di appendere il nuovo pezzo di html. DEMO

$("#add").click(function(){
    $.ajax({
        url     : 'box.html',
        success : function(html){
            $("body").append($(html).myplugin());
        }
    });
});

Questa è la soluzione che più di frequente utilizzo.

Se invece avessi scritto il plugin ecco come potrei fare (quindi spostando la responsabilità al plugin stesso).

SOLUZIONE AUTOMATICA

L’idea è : quello che attivo al document.ready lo attivo anche all’evento ajaxStop (quindi inizializzo il plugin sia al window.onload sia alla chiusura di ogni chiamata ajax).

$(document)
.ready(function(){
    $(".box").myplugin();
})
.ajaxStop(function(){
    $(".box").myplugin();
});

Il problema di questa soluzione è che applicando 2 volte ad un elemento lo stesso plugin si “rischia” spesso di ottenere degli effetti indesiderati (doppi eventi al click, interfaccia che si moltiplica a mo’ di matrioska, ecc…).

La soluzione quindi è realizzare un qualche sistema di singleton all’elemento che si arrichisce.
Nel plugin finale ho scritto un banale if che aggiunge una certa classe (flag) all’elemento arricchito.
Se un evento (ajaxStop) invoca il costruttore del plugin più volte il codice non verrà eseguito.

//singleton
if ($(that).is(".myplugin")) {
   return;
} else {
   $(that).addClass(".myplugin");
}
//plugin code...

(function() { » plugin