Nuova libreria: ExtendDOM

[Mega69]

Nonostante sia ancora giovane come progetto, ho deciso di presentarvi la libreria da me realizzata, ExtendDOM.

Introduzione
Come si evince dal nome ( non sono riuscito a trovarne uno migliore ), essa permette di estendere il DOM, ovvero di creare dei metodi che vengono applicati a tutti gli oggetti del DOM automaticamente, in modo semplice, veloce e crossbrowser ( testato su Firefox 1.5+, IE6+ e Opera9 ).
Ciò accade anche per quegli oggetti creati con document.createElement ( per questo devo ringraziare il mitico Andr3a e il suo webreflection ).
Per adesso manca il supporto per quegli elementi creati con innerHTML, ma il problema riguarda solo IE.

Iniziamo da un esempio stupido: supponiamo di voler creare il metodo hide, che nasconde l'oggetto:

ExtendDOM("hide", function() { this.style.display="none"; });

-
Ovviamente il riferimento all'oggetto va fatto con l'operatore this.
Successivamente potremo usare il metodo con qualsiasi oggetto del DOM:

window.onload=function() {
document.getElementById("myelem").hide();
}

Gia nel file extendDOM.js è presente un metodo, addToEvent. Essa fa da attachEvent per IE e da addEventListener per i browser del w3c.

Tutto qui?
No. ExtendDOM è anche il core di una libreria modulare, ovvero composta da vari moduli che sono indipendenti tra di loro, ma che per funzionare necessitano appunto del core.
Per adesso sono presenti 3 moduli, presto ne aggiungerò altri:
1)megutility ( richiesteAjax )
2)megacolous ( effetti grafici )
3)easyDOM ( getter e setter )
Mi limiterò a descriverli velocemente ( altrimenti la discussione diventa troppo pesante ), maggiori dettagli sono nella documentazione

megutility
Megutility si occupa delle richieste asincrone ( ajax ). Onestamente, almeno per adesso, non ha nulla in più rispetto alle funzioni presenti sul web. Presto però verranno aggiunte nuove funzionalità.

Il metodo della megutility è innerAJAX:

document.getElementById("myelem").innerAJAX("myUrl.php", funzione);

Di default la richiesta è di tipo get ( lo so che ciò va controcorrente ). Maggiori dettagli li trovate nella documentazione.

Funzione è una funzione che viene eseguita dopo che la richiesta ha successo. E' incluso un preloader, di cui bisogna andare a cambiare il path manualmente.

magacolous
Scommetto che il nome vi ricorda qualcosa... che Thomas Fuchs mi perdoni
come già ribadito, è la parte grafica della libreria. Ancora ha parecchi difetti, comunque è molto leggera e dispone almeno degli effetti più basilari.
Permette di:
-rendere draggabile degli elementi;
-realizzare effetti fade ( transizione di opacità )
-muovere degli elementi
-cambiare le dimensioni di un elemento

E in studio un effetto resize.
Esiste anche una funzione effects, ma è tanto poco efficiente che evito di documentarla.

Piuttosto partiamo con gli esempi:

el=document.getElementById("myEl");
el.drag(funzione_al_mouseDown, funzione_al_mouseUp);
el.fade(0, 100, 10, 5);
el.scale(200, 200, 5, 5, 10);
el.move(700, -200, 5, -5, 10);

Essendo questo un esempio faccio partire tutti gli effetti contemporaneamente, inutile dire che non è consigliabile.

EasyDOM
Contiene alcuni metodi per settare e prendere elementi, in modo da facilitare l'interazione col DOM.
Per adesso ha quattro metodi:
1)getElementsByAttribute(attributo, valore, tags, flagIndexOf)
2)get_(byWhat, argomenti)
3)setAttributes(attributi)
4)setArrayProperty - per problemi di compatibilità con IE, setArrayProperty è una semplce funzione, non un metodo.

1)getElementsByAttribute permette di prendere tutti gli elementi da un attributo, anche dalla classe o dagli eventi ad esso associati. Se si desidera che il valore possa essere qualsiasi, inserire "*" al posto di valore.
Stesso discorso per l'argomento tag.
L'ultimo argomento è di default settato a false ( apparte che con gli attributi evento ). Se settato a true, il confronto viene fatto per indexOf, meglio fare un esempio:

myElements=new Array();
myElements=document.getElementsByAttribute("class", "miaClasse", "*");

myElemenys=document.getElementsByAttribute("class", "miaC", "*", 1);

Nel secondo caso, essendo il flagIndexOf true, gli elementi verranno presi anche se il valore del corrispondente attributo contiene altri caratteri oltre a quelli dichiarati. e' meglio settarlo sempre a false se non è necessario.

2)get_ è semplicemente una forma abbreviata per prendere elementi, dall'id, dal tag o dall'attributo.

get_("id", "myEl").get_("tag", "div")[0].get_("at", "title", "prendimi se ci riesci!", "*")[0].style.color="red";

Davanti al primo get si può anche mettere document o un qualsiasi altro oggetto, ma per semplicità, nella maggior parte dei casi può essere omesso.

3)setAttributes, lo dice a parola stessa, setta più attributi in un colpo solo, anche la classe e gli eventi ( i valori di questi non vanno tra virgolette )

esempio:

get_("id", "myEl").setAttributes({
title:"nuovo titolo",
class:"nuova_classe",
onclick:function() { alert(this.title); }
})

4)setArrayProperty permette di settare una proprietà ( ma anche di richiamare un metodo ) di ogni elemento di un array.

esempio per le proprietà:

setArrayProperty(myArray, "title", "nuovo titolo");

esempio per i metodi ():

setArrayProperty(myArray, "setAttribute('title', 'nuovo titolo')");

come detto precedentemente, setArrayAttribute non è un metodo ma una semplice funzione.

ExtendDOM e le altre librerie
ExtendDOM è un progetto ancora molto ma molto giovane e di certo non è al livello di strumenti quali jquery, prototype o mootools.
Chi già utilizza queste librerie non avrà molto interesse a migrare verso ExtendDOM...
In realtà esiste un punto d'incontro: attraverso ExtendDOM, le funzioni di queste librerie possono essere trasformate in metodi, in modo da semplificare di molto il codice e renderlo più omogeneo.
Ciò diventa un grosso vantaggio per librerie quali prototype, poichè sarebbe possibile evitare di dover ogni volta specificare Element.extend.

Esistono termini per l'uso di ExtendDOM e dei suoi moduli?
Solo uno: lasciare inalterati i commenti.

Links
Scarica ExtendDOM
Documentazione
L'intro della libreria ( interamente in javascript )


Sono ben accetti commenti, critiche e suggerimenti.

[andr3a]

uhm ... personalmente preferisco non intaccare mai direttamente gli elementi ... ma se tu usi solo la tua libreria allora puoi fare un pò come vuoi, tanto saprai quali metodi hai aggiunto e quali no.

In tutta onestà, sperando che tu non te la prenda, il codice non mi piace affatto.
Nessun commento, indentazione un pò a caso o assente, "copiaticcio in senso buono" di funzioni ma ci sono dei punti assolutamente "poco convincenti" ... tipo la dichiarazione new Array di una variabile prima di assegnargli subito dopo una HTMLCollection

var pippo = new Array();
// a parte che di solito si scrive var pippo = []; ... salvo casi in cui hai già la length
// var pippo = new Array(10); // so già che pippo non sarà più di 10 elementi
// comunque non serve a niente questa dichiarazione, se subito dopo scrivi
pippo = document.getElementByTagsName("nomeTag");
// che non è assolutamente un array, quindi anche fosse stato
// un finto strict non sarebbe stato corretto lostesso

In compenso sono sicuro potrai migliorarla in tante parti dedicandogli un pò di tempo in più

[edit]
P.S. quando si prende spunto da altre funzioni trovate qua e la, non parlo solo della mia, è buona norma scrivere un commento in più sulla fonte o aggiungerla ai credits, anche l'avessi riscritta tutta da zero ... poichè comunqe sarà stato frutto di "altri esperimenti"

[Mega69]

Originariamente inviato da andr3a
In tutta onestà, sperando che tu non te la prenda...

Ma che! So benissimo che il codice non è un granchè ( ho poca esperienza ). Per adesso è più un esperimento che altro, visto che grazie a questa libreria sto imparando parecchie cose.

uhm ... personalmente preferisco non intaccare mai direttamente gli elementi

Intendi che ciò potrebbe essere svantaggioso per un for-in o c'è qualche altra ragione?

Nessun commento

Questo l'ho fatto giusto per risparmiare qualche byte...

la dichiarazione new Array di una variabile prima di assegnargli subito dopo una HTMLCollection

E' una mia brutta abitudine... Mi sa che passerò alla "nuova" ( esiste già da un pezzo ) e corretta ( visto che una collezione di oggetti è un oggetto ) notazione.

P.S. quando si prende spunto da altre funzioni trovate qua e la, non parlo solo della mia, è buona norma scrivere un commento in più sulla fonte o aggiungerla ai credits, anche l'avessi riscritta tutta da zero ... poichè comunqe sarà stato frutto di "altri esperimenti"

In effetti devo aggiungere qualche commento sia per quanto riguarda il fatto del document.createElement, sia per la funzione setAttributes ( non proprio copiata, ma ispirata da DOMass ).
Anche quella del drag and drop l'ho presa da DinamicDrive, ma di quella ho gia messo il commento.

Mi sa che mettero tutto nei credit, con rispettivi link ( compreso il tuo ovviamente )


EDIT:
Grazie per la pazienza dimostrata a leggere il codice.

[andr3a]

Originariamente inviato da Mega69
Per adesso è più un esperimento che altro, visto che grazie a questa libreria sto imparando parecchie cose.

e questo è un bene

Originariamente inviato da Mega69
Intendi che ciò potrebbe essere svantaggioso per un for-in o c'è qualche altra ragione?

è una cattiva abitudine, che spesso ho anche io, quella di sfruttare gli elementi come oggetti dinamici ai quali aggiungere valori arbitrari al fine di aiutare lo script del momento.
Esempio ... sfrutto un toggle(element) dove nella toggle metto hide = true o hide = false a seconda che sia visualizzzato o meno ... purtroppo l'accortezza di usare prefissi o nomi proprietari è scomoda (element.__andr3a_hide = true .. o false) quindi io con un'altra funzione ed il tuo script incluso rischio di far danni alla tua lib e vice-versa tu rischi di farne alla mia.

Questa è un'abitudine alla prototype che personalmente non condivido affatto e che non a caso rende prototype la lib nemica numero 1 se tu vuoi anche aggiungere codice tuo o altre librerie (prototype sovrascrive anche metodi non standard o anche con nomi standard ma non conformi con gli stessi)

A te difficilmente accadrà di sovrascrivere qualcosa, madato che la proponi forse dovresti scrivere fin da subito che potrebbero esserci problemi di compatibilità (pensa alla banale $("myid") di prototype che ogni volta risovrascrive i tuoi metodi)

Originariamente inviato da Mega69
Questo l'ho fatto giusto per risparmiare qualche byte...

un problema da dimenticare grazie alla packer o, nel mo caso, grazie alla GzOutput

Originariamente inviato da Mega69
E' una mia brutta abitudine... Mi sa che passerò alla "nuova" ( esiste già da un pezzo ) e corretta ( visto che una collezione di oggetti è un oggetto ) notazione.

<script type="text/javascript"><!--//
onload = function(){
	for(var tmp = document.getElementsByTagName("*"), result = new Array(tmp.length + 1), i = 0; i < tmp.length; i++)
		result[i] = [tmp[i], tmp[i].constructor, "Instance of HTMLElement: ".concat(tmp[i] instanceof HTMLElement)];
	result.unshift([tmp, tmp.constructor, "Instance of HTMLCollection: ".concat(tmp instanceof HTMLCollection)]);
	alert(result.join("\n"));
}
//--></script>

Originariamente inviato da Mega69
In effetti devo aggiungere qualche commento sia per quanto riguarda il fatto del document.createElement, sia per la funzione setAttributes ( non proprio copiata, ma ispirata da DOMass ).
Anche quella del drag and drop l'ho presa da DinamicDrive, ma di quella ho gia messo il commento.

Mi sa che mettero tutto nei credit, con rispettivi link ( compreso il tuo ovviamente )

ecco, bravo (o meglio, se la pubblichi e non ci sono credits qualcuno potrebbe prendersela a male e farti perdere di credibilità [codice proposto come mio che mio non è])

Originariamente inviato da Mega69
EDIT:
Grazie per la pazienza dimostrata a leggere il codice.

di nulla, ma se ci pensi, come poter giudicare altrimenti ?
( non ti dico per fare l'articolo sui frameworks JavaScript che sbattimento assurdo )

[Mega69]

Originariamente inviato da andr3a
$("myid") di prototype ogni volta risovrascrive i tuoi metodi

cioè in che senso? Mi cancella i metodi da me creati anche se non hanno lo stesso nome?
Mi sa che dovrò avvisare...

Grazie per tutte le dritte, darò un occhiata a gzoutput.

Per adesso ho cercato di migliorare il codice indentandolo e aggiungendo anche commenti. Aggiunti anche i credit.
Questioni di pochi minuti e li uploado tutto.

( non ti dico per fare l'articolo sui frameworks JavaScript che sbattimento assurdo )

Mi sa che è meglio, potrei non riuscire più a dormire

[andr3a]

Originariamente inviato da Mega69
cioè in che senso? Mi cancella i metodi da me creati anche se non hanno lo stesso nome?

potrebbe farlo, dato che non verifica niente, assegna e basta ...

Originariamente inviato da Mega69
Mi sa che è meglio, potrei non riuscire più a dormire

[Mega69]

Chi fosse interessato agli sviluppi di questo framework/libreria può seguire il blog htt...
Non posso dare il link perchè sarebbe spam, cmq andate nel primo link in firma e cliccate su
"Il blog di mega".

[Mega69]

In questi giorni ho fatto un pò di aggiornamenti:
ve li illustrerò "brevemente", visto che il grosso della documentazione è sempre qui.
E qui lo zip.


ExtendDOM
La principale modifica al core della libreria, extendDOM.js, è che ora i prototipi non sono applicati al costruttore Object, bensì direttamente ad HTMLElement. Il precedente approccio andava a intaccare non solo gli oggetti HTML ma anche tutti gli altri oggetti.
Ad essere estesi sono anche document e window ( attenzione: non i costruttori Document e Window ).
Un grazie a Jason Karl Davis per la dritta su come rendere la libreria compatibile con safari.

E' stato eliminato il metodo addToEvent ( l'addEventListener crossbrowser ), poichè questo è stato rinominato migliorato e spostati in un modulo dedicato agli eventi ( evt.js ).

Per aggiungere in una sola volta più metodi, è ora possibile utilizzare la funzione DOM.extend al posto di richiamare più volte ExtendDOM.

DOM.extend({
  hide:function() { this.style.display="none"; },
  show:function() { this.style.display="block"; }
});

Oltre a ciò è disponibile una funzione ___extend___ che, se applicata a un qualsiasi costruttore, lo rende estendibile.

Costruttore.extend=___extend___;

Costruttore.extend({
  dimmiProprieta:function(property) { alert(this[property]); },
  eseguiTuoMetodo:function(method) { this[method](); }
});

La funzione extend è già applicata di default a diversi costruttori nativi, tra cui String, Array, Number ecc...



Utility
Questo modulo fa parte del core: senza di esso alcuni moduli potrebbero non funzionare.
Per adesso è un pò ( parecchio ) scarno.
L'unica funzionalità è l'oggetto browser, che permette di verificare il browser in uso:

if(browser.ie) {} //Internet explorer
if(browser.ff) {} //Firefox
if(browser.moz) {} //Browser basati su Mozilla
if(browser.ns) {} //Netscape
if(browser.op) {} //Opera
if(browser.saf) {} //Safari

EasyDOM
Contiene una serie metodi che facilitano l'interazione col dom.
Oltre alle già descritte caratteristiche, sono stati aggiunti tre metodi che sostituiscono il vecchio get_.
Sono:
id_(id) prende elemento da id
tag_(tag) prende elementi da tag
at_(attr, value, tags, useIndexOf) prende elementi da attributo

Se usati da soli, senza un oggetto davanti ( come metodi di window in pratica ), la ricerca viene effettuata all'interno del documento.

var elementi=id_("elem").at_("class", "myLinks", "a");
var elemento=document.id_("elem");

Ajax
Il vecchio modulo megutility è stato definitivamente cancellato e rimpiazzato dal file ajax.js.
Il nome della funzione è sempre innerAJAX e i cambiamenti maggiori sono 2:
1)I parametri sono ora scritti nella forma { method:"post", url:"pagina.php" }, in modo da facilitarne l'inserimento;
2)E' ora possibile fare il preload di qualsiasi file, che sia immagine, animazione, video ecc...
Dopo il caricamento, l'oggetto verrà caricato in un tag object ( nei browser decenti ) o in un iframe ( soluzione 1.0 per IE... )

document.getElementById("elem").innerAJAX({
   method:"post",
   url:"http://www.sitomega.net/spaceInvaders.swf",
   type:"application/x-shockwave-flash",
   size:[450, 300]
});

Evt
Modulo dedicato agli eventi.
Pre creare un evento "esteso" è necessario utilizzare il costruttore _Event, che prende come argomento l'oggetto evento W3C.

id_("elem").onclick=function(e) {
  e=new _Event(e);
  alert(e.pageX());
  alert(e.target());
}

Notare che pageX e target non sono proprietà ma metodi, in modo che i valori vengano calcolati effettivamente solo quando servono.
Oltre a ciò i metodi vengono applicati non nella stessa funzione del costruttore ma attraverso prototype, in modo da garantire la massima velocità di esecuzione.

Se si vuole accedere all'oggetto evento vero e proprio è necessario usare l'oggetto evt:

id_("elem").onclick=function(e) {
  e=new _Event(e);
  alert(e.evt.type);
}

Passiamo ai metodi del DOM. Il metodo addToEvent è stato sostituito da addListener. Ovviamente non cambia solo il nome
Oltre al fatto che ora è più compatibile, sono stati aggiunti altri metodi che permettono di manipolare i listener.
rremoveListener(type, listener) rimuove un listener
removeListeners(type) rimuove tutti i listener associati ad un evento
callListeners(type) esegue tutte le funzioni che ascoltano l'evento


Infine è stata inclusa e leggermente riadattata la soluzione di Andrea Giammarchi ( ovviamente con relativi crediti nella pagina di documentazione e nel codice stesso ) riguardo l'evento DOMContentLoaded crossbrowser. Ero indeciso tra questa soluzione e addDOMLoadEvent, alla fine ho scelto questa perchè è molto più leggera.

DOM.oncontent(function() { alert("Il workaround del defer può questo ed altro..."); });
DOM.oncontent(function() { alert("Ne puo aggiungere una, due, tre, quattro ecc..."); });

CSStyle e altri
Questi magari li aggiungo dopo... Comunque c'è già la documentazione.

[Mega69]

CSStyle
Facilita l'interazione javascript - css:
Prima di tutto contiene due metodi di stringa:
noUnit(units) - ritorna una stringa eliminando tutte le occorrenze delle stringhe passate come argomenti. Questa stringa viene però convertita in numero.
noHypher() - ritorna una stringa del tipo "border-color" nel tipo borderColor

Xpos=id_("elem").style.top.noUnit("px");
PropXie="border-style".noHypher();

..e poi una serie di metodi:
getStyle(prop) - prende il valore di una proprietà css direttamente dal foglio di stile
getPosition() - ritorna le coordinate in x [ getPosition().x ] e y [ getPosition().y ]
getSize() - ritorna le dimensioni width [ getSize().x ] ed height [ getSize().y ]
setstyles(rules) - permette di settare più stili alla volta

posizione=id_("elem").getStyle("position");

posizioneX=id_("elem").getPosition().x;

id_("elem").setStyles({
  'position':"absolute",
  'top':posizioneX,
  'zIndex':"20"
});

[lake86]

bella libreria, specialmente, per l'uso che faccio io di js, la parte easy Dom, setAttributes è utilissima :P non so come ho fatto a non pensarci io
Poi altro non posso dire visto che non capisco ancora tutto il codice
Seguiro il tuo lavoro