affiche tous les caractères par défaut; "[a-zA-Z0-9]+" affiche tous les caractères alphanumériques
var cellule = table.rows[0].cells[colonne]; //cellule contenant le titre
cellule.addEvent("mouseup", function(){ //c'est la fonction anomyne qui reçoit la target dans un custom event, mais pas la fonction appelée par cette fonction anonyme!
var e = arguments[0] || window.event; //pour IE
var cible = cnx().event.getTarget(e) || this; // this pour IE<=8 et custom event - trouve la cible de l'évènement
var table = cible.getTagParent("table");
if(cible.tagName != "BUTTON") createZoneCritere(e); //vérifie que la cible n'est pas un button, évite ainsi la propagation de l'event
});
};
};
function createZoneCritere(e){ //genere une input texte pour saisir les critères du filtre as regExpr
var cible = cnx().event.getTarget(e); //la cible recherchée est une cellule, mais le paragraphe contenu dans la cellule peut aussi recevoir l'event
var cellule = false;
if (cible.tagName == "TD" || cible.tagName == "TH") cellule = cible; //cible est une cellule - TD et TH en majuscule car tagName retourne une majuscule!
else cellule = cible.getTagParent("td") || cible.getTagParent("th"); //cible n'est pas une cellule, mais peut être une balise contenue dans la cellule!
var colonne = cellule.getCol(); //retourne le numéro de colonne où se situe la cellule
var zoneCritere = document.createElement("input");
zoneCritere.setAttribute("id", table.id + "-zoneCritere-" + colonne);
zoneCritere.setAttribute("type","text");
if (conditions[colonne] != ".") zoneCritere.value = conditions[colonne];
cellule.appendChild(zoneCritere);
zoneCritere.focus();
zoneCritere.addEvent("keypress", function(e){ //blur n'est pas un custom event, donc getTarget() fonctionne dans la fonction appelée!
var e = arguments[0] || window.event; //pour IE
var cible = cnx().event.getTarget(e) || this; // this pour IE<=8 et custom event - trouve la cible de l'évènement
var keyCode = (window.event) ? parseInt(window.event.keyCode) : parseInt(e.which); //retourne le code numérique de la touche
if (keyCode == 13) actualiseConditions(e); //touche Entrée - recalcule les conditions et applique le nouveau filtre
});
zoneCritere.addEvent("blur", function(e){ //blur n'est pas un custom event, donc getTarget() fonctionne dans la fonction appelée!
var e = arguments[0] || window.event; //pour IE
var cible = cnx().event.getTarget(e) || this; // this pour IE<=8 et custom event - trouve la cible de l'évènement
actualiseConditions(e); //recalcule les conditions et applique le nouveau filtre
});
return false;
};
function addButtonDeleteAllFilters(){ //ajoute un bouton delete all filters
var menuBtn = document.createElement("BUTTON"); //prépare le boutton à ajouter
menuBtn.setAttribute("type","button");
menuBtn.setAttribute("id", table.id + "-MenuButton-" + 0);
menuBtn.setAttribute("title", "Delete all Filters");
//var texte = "M" + "nu".sub(); //sub() met le texte en indice
var texte = "∫";
menuBtn.innerHTML = texte; //ajoute le texte du bouton qui admet une propriété innerHTML
var cellule = table.rows[0].cells[0]; //Première cellule
var tab = cellule.getNodeChilds("ELEMENT_NODE"); //recherche un Element_Node type 1, comme un paragraphe
var elt = tab[tab.length-1]; //on choisit le dernier element
elt.appendChild(menuBtn); //on ajoute le bouton
menuBtn.addEvent("mouseup", filtersDelete);
//cnx().trace.print(cellule.innerHTML);
};
function actualiseConditions(e){ //sauvegarde la condition de filtre et appelle la fonction de filtrage
var cible = cnx().event.getTarget(e); // la cible est un input
var cellule = cible.getTagParent("td"); //recherche un parent de type TD
if (!cellule) var cellule = cible.getTagParent("th"); //recherche un parent de type TH
var colonne = cellule.getCol();
var zoneCritere = cible; //target, cible
conditions[colonne] = zoneCritere.value; //memorise la valeur du filtre pour cette colonne
if (zoneCritere.value == "" || zoneCritere.value == ".") cellule.style.backgroundColor = noFilters; //aucun filtre n'est actif sur la cellule
else cellule.style.backgroundColor = activeFilters; //un filtre est actif sur la cellule
filtreTable(conditions); //filtre la table en fonctions des conditions
zoneCritere.removeElt(); //supprime l'elt de saisie de critere de filtre
};
function filtreTable(conditions){ //applique les conditions à la table
var lignes = table.rows; //collection lignes
var ligne;
var lineStart = 1; //on ne filtre jamais la première ligne de la table - titre row[0]!
for (var x = lineStart; x < lignes.length; x ++) { //liste chacune des lignes de la table
ligne = lignes[x];
var cellules = ligne.cells; //collection des cellules de la ligne
var test = true;
for ( var y = 0; y < cellules.length; y++){ //liste chaque cellule de la ligne
test = test && requeteFiltre(cellules[y], conditions[y]); //teste la condition
};
if (test) ligne.style.display = ""; //la ligne est affichée
else ligne.style.display = "none"; // la ligne est masquée
};
function requeteFiltre(cellule, condition){
var condition = condition.stripTags(); //supprime toutes les balises HTML ou PHP
condition = condition.replace(/ /g, ""); //supprime le caractère espace écrit en HTML
condition = condition.trim(); //élimine les espaces en début et fin
/* --------------------
filtre avec les expressions régulières
// "^debut": chaine qui commence par "debut"
// "fin$": chaine qui se termine par "fin"
// "^chaine$": chaine qui commence et se termine par "cha�ne" - égalité au sens strict ==
// "abc": chaine qui contient "abc"
//conditions[0] = "ligne || cellule"; // recherche de colonne[0] contenant ligne ou cellule
// ------------------------- */
var expReg = new RegExp(condition,"g");
var contenu = cellule.innerHTML;
contenu = contenu.stripTags(); //supprime toutes les balises HTML ou PHP
contenu = contenu.replace(/ /g, ""); //supprime le caractère espace écrit en HTML
contenu = contenu.trim(); //élimine les espaces en début et fin
var test = expReg.test(contenu);
return test;
};
};
function filtersDelete(e){ //supprime tous les filtres et détruit le menu
var cible = cnx().event.getTarget(e); // la cible est un input
var cellule = cible.getTagParent("td"); //recherche un parent de type TD
if (!cellule) var cellule = cible.getTagParent("th"); //recherche un parent de type TH
var tableTitre = cellule.getTagParent("table");
alert(tableTitre.id);
for(var x = 0; x < conditions.length; x++){
conditions[x] = "";
cellule = tableTitre.rows[0].cells[x]; //accède à la cellule en titre
cellule.style.backgroundColor = noFilters; //aucun filtre n'est actif sur la cellule
};
filtreTable(conditions); //détruit tous les filtres en les appliquant avec conditions = vide
//stoppe la propagation de l'event
var e = cnx().event.getEvent(e);
cnx().event.stopPropagation(e); //stoppe la propagation de l'event
return false; // IE style
};
return true;
};
HTMLTableElement.prototype.setSort = function(){ //permet de trier une table HTML
/* --------------
from: http://tympanus.net/codrops/2009/10/03/33-javascript-solutions-for-sorting-tables/
var table = "mytable".getElt();
table.setSort("ASC"); //"DESC" true ou false
----------------- */
var table = this;
if ( !table.isClassName("cnxTableSort") ) table.addClassName("cnxTableSort"); //marque la table comme Sortable
if (table.id == null) table.id = "cnxTableSort" + claude.prototype.log.generatePassword(8); //alloue un id par défaut
var cellules = table.rows[0].cells; //Array() contenant les cellules de la première ligne
for( var x = 0; x < cellules.length; x++){ //ajoute les boutons pour le tri
addButtonSort(x); //x est le numéro de colonne
};
function sortTable (col, tri) { //DESC ou ASC
/* ------------------
Script téléchargé du Coin Web de QuentinC - Tri dynamique de tableau HTML avec le DOM
http://www.quentinc.net/
URL exact : /javascript/script56-tri-dynamique-de-tableau-html-avec-le-dom/
Vous trouverez d'autres scripts à l'adresse :
http://www.quentinc.net/javascript/
---------------- */
var tbody = table.tBodies[0];
var index = 0, value = null, miniValue = null, maxValue = null;
for (var i= tbody.rows.length -1; i >= 0; i -= 1) { //parcours toutes les lignes du tbody de la dernière à la première
miniValue = maxValue = value = null;
index = -1;
for (var j=i; j >= 0; j -= 1) { //parcours toutes les lignes du tbody de la dernière à la première
value = tbody.rows[j].cells[col].firstChild.nodeValue;
if (!isNaN(value)) value = parseFloat(value);
if (tri == "DESC"){
if (maxValue == null || value > maxValue) { index = j; maxValue = value; }; //teste si value > maxValue (tri DESC) ou si value < miniValue (tri ASC)
//cnx().trace.print("tri: " + tri);
};
if (tri == "ASC"){
if (miniValue == null || value < miniValue) { index = j; miniValue = value; }; //teste si value > maxValue (tri DESC) ou si value < miniValue (tri ASC)
//cnx().trace.print("tri: " + tri);
};
};
if (index != -1) { //index existe donc une ligne corespond à maxValue ou miniValue
var row = tbody.rows[index]; //on pointe sur la ligne correspond au critère
if (row) {
tbody.removeChild(row); //détruit la ligne
tbody.appendChild(row); //ajoute la ligne à la dernière position du tbody pour classement
};
};
};
//fin
};
function eventSort(e){ //reçoit l'event qui commande le tri
var e = cnx().event.getEvent(e);
var cible = cnx().event.getTarget(e) || this; // this pour IE<=8 et custom event - trouve la cible de l'évènement
//cnx().trace.print("cible: " + cible);
var cellule;
cellule = cible.getTagParent("TD");
if (!cellule) cellule = cible.getTagParent("TH");
var colonne = cellule.getCol();
var tri;
if (cible.getAttribute("title") == "ASC") { //tri Ascendant
tri = "DESC";
cible.setAttribute("title", "DESC");
cible.innerHTML = "↓"; //fonctionne en mode bascule
}
else { //tri Descendant
tri = "ASC";
cible.setAttribute("title", "ASC");
cible.innerHTML = "↑"; //fonctionne en mode bascule
};
//cnx().trace.print(tri+ " : " + cible.innerHTML + " : " + cible.getAttribute("title") ); //cnx(this.elt).trace.debug = true;
sortTable(colonne, tri); //tri la table
cnx().event.stopPropagation(e); //stoppe la propagation de l'event- ne fonctionne pas avec mouseup seulement avec click ou mousedown!
return false; //
};
function addButtonSort(colonne){ //ajoute un bouton pour le tri
var cellule = table.rows[0].cells[colonne];
var btn = document.createElement("BUTTON"); //prépare le boutton à ajouter
btn.setAttribute("id", table.id + "-boutonTri-" + colonne);
btn.setAttribute("title", "ASC");
btn.style.backgroundColor = "grey";
var Filter = "↑"; //sub() met le texte en indice
btn.innerHTML = Filter; //ajoute le texte du bouton qui admet une propriété innerHTML
/* -------------
recherche si un paragraphe existe, les paragraphes "
" sont de type 1 ELEMENT_NODE
Si oui on ajoute le bouton après le premier paragraphe rencontré
si non, on cherche du texte type 3 TEXT_NODE
si du texte est trouvé, on récupére sa valeur et on détruit ce texte
puis on crée un paragraphe que l'on ajoute à la cellule
ce paragraphe contient le texte déjà trouvé et le bouton
Si aucun texte n'est trouvé, le paragraphe est créé sans texte pour ajouter le bouton
--------------------- */
var tab = cellule.getNodeChilds("ELEMENT_NODE"); //recherche un Element_Node type 1, comme un paragraphe
if (tab.length) { //vérifie si un paragraphe existe
var elt = tab[0]; //on choisit le premier element
elt.doInsertAfter(btn); //on ajoute le bouton -elt.appendChild(btn);
}
else { //pas de ELEMENT_NODE trouvé!
var tab = cellule.getNodeChilds("TEXT_NODE"); //recherche du texte sans paragraphe
var texte ;
if (tab.length){ //vérifie si texte trouvé
var node = tab[0]; //on choisit le premier élément
texte = node.data; //on mémorise sa valeur
/*
alert("node elt: " + node);
node.isWhat();
if ( cnx().user.IE8 ) cnx(node).dom.removeElt();
else node.removeElt(); //on détruit l'élément texte
*/
};
var paragraphe = document.createElement("p"); //on crée un paragraphe
if (!node) paragraphe.innerHTML = "Texte par default"; //ajoute le texte mémorisé si il existe
if (node) paragraphe.appendChild(node); //ajoute le texte au paragraphe
cellule.appendChild(paragraphe); //ajoute le paragraphe à la cellule
paragraphe.appendChild(btn); //ajoute le bouton au paragraphe
};
btn.addEvent("mousedown", eventSort);
return false;
};
};
HTMLTableElement.prototype.setEdit = function(){ // permet de rendre une table HTML éditable donc de saisir dans les cellules
/* -----------------
rend une table html editable
table.setEdit();
http://www.developpez.net/forums/d858266/webmasters-developpement-web/javascript/publications-javascript-ajax/creer-table-html-editable-javascript-v2-0-a/
Lors du double click sur la cellule, nous créons une div avec la propriété contentEditable = true
Nous sauvegardons le contenu de la cellule, puis vidons la cellule pour y placer la div à laquelle nous affectons le contenu de la cellule.
Nous obtenons alors notre cellule, qui contient une div éditable contenant l'ancien contenu de notre cellule.
La div est également affectée de 2 event keypress=return et onblur afin de savoir à quel moment notre utilisateur stoppe la saisie dans la div éditable
Si l'un des 2 event est activé, le contenu de la div est alors transféré dans la cellule et la div détruite
Tout est prêt pour un nouveau cycle de saisie avec dblclick
--------------------------------- */
var table = this; //retourne un objet si il existe, gère les id
addEventSaisir(); //ajoute l'event "saisir" à chaque cellule de la table
function addEventSaisir(){ //parcours la table et ajoute à chaque cellule un event "dblclick"
var lignes = table.rows; //collection rows - ensemble des lignes de la table
var cell;
for (var ligne = 0; ligne < lignes.length; ligne++){ //parcours chacune des ligne de la table
var colonnes = table.rows[ligne].cells; //collection cells - ensemble des colonnes d'une ligne de la table
for (var col = 0; col < colonnes.length; col++){ //parcours chaque cellule de la ligne
cell = table.rows[ligne].cells[col]; //identifie une cellule
/* nous appliquons maintenant les event et la fonction associée à chaque event */
cell.addEvent("dblclick", createSaisir);
};
};
};
function createSaisir(e){ //fonction saisir associée à chaque cellule
/* --------------
ajoute une div avec la propriété contentEditable = true à la cellule
la div possède également 2 event (keypress==13 et onblur)
qui se chargeront via la fonction actualiseCellule() de mettre la jour le contenu modifié de la cellule
--------------- */
var cellule = cnx().event.getTarget(e); //renvoie la cible de l'event
var contenu = cellule.innerHTML;
var divSaisie = document.createElement("div");
divSaisie.setAttribute("contentEditable", true); //rend la saisie active dans la div
divSaisie.innerHTML = contenu;
cellule.innerHTML = ""; //vide la cellule
cellule.appendChild(divSaisie); //divSaisie remplace le contenu de la cellule
//ajout des event à la div de saisie
divSaisie.addEvent("keypress", function(e){ //keypress n'est pas un custom event, donc getTarget() fonctionne dans la fonction appelée!
var e = arguments[0] || window.event; //pour IE
//var cible = cnx().event.getTarget(e) || this; // this pour IE<=8 et custom event - trouve la cible de l'évènement
var keyCode = (window.event) ? parseInt(window.event.keyCode) : parseInt(e.which); //retourne le code numérique de la touche
if (keyCode == 13) actualiseCellule(e, cellule); //touche Entrée - actualise la cellule
});
divSaisie.addEvent("blur", function(e){ //blur n'est pas un custom event, donc getTarget() fonctionne dans la fonction appelée!
var e = arguments[0] || window.event; //pour IE
var cible = cnx().event.getTarget(e) || this; // this pour IE<=8 et custom event - trouve la cible de l'évènement
actualiseCellule(e, cellule); // - actualise la cellule
});
//alert(divSaisie.isContentEditable);
};
function actualiseCellule(e, cellule){ //met à jour le contenu de la cellule après une saisie
var div = cellule.getElementsByTagName("div")[0]; //recherche la div contenue par la cellule
var contenu = div.innerHTML; //réccupère le contenu de la div
div = null; //supprime la div
cellule.innerHTML = contenu; //actualise le contenu de la cellule avec celui de la div précédemment supprimée
contenu = cellule.innerHTML;
var table = cellule.getTagParent("table");
table.focus(); //donne le focus à la table, donc force la cellule à perdre le focus sinon sous IE8 eklle reste editable
return false;
};
return false;
};
HTMLTableElement.prototype.setRedim = function(){ //Redimensionne une table avec la souris
var table = this;
var celluleCible = false; //contient la cellule cible
var couleurFond = false; //couleur de fond de la cellule
var deltaDetection = 20; //détection pour limite de la cellule
initRedim(); //autorise le redimensionnement
function initRedim(){ //initialise le redimensionnement sur la table choisie
/* -------------------------
applique sur chaque cellule
la possibilité de redimensionnement via l'évènement mousedown
mousemove et mouseup ne font que gérer le dimensionnement en largeur de la |
------------------------- */
var cellule;
for (var ligne = 0; ligne < table.rows.length; ligne++){ //parcours chacune des lignes
for (var col = 0; col < table.rows[ligne].cells.length; col++){ //parcours chaque cellule d'une ligne
cellule = table.rows[ligne].cells[col];
cellule.addEvent("mousedown", mouseDown); //ajout des events à chaque cellule
cellule.addEvent("dblclick", doubleClick); //ajout des events à chaque cellule
};
};
document.addEvent("mousemove", mouseMove); //Gestion du déplacement de la souris sur le document
document.addEvent("mouseup", mouseUp);
return false;
};
function doubleClick(e){ //si doubleclick redimensionne la colonne à sa largeur maxi
var cible = cnx().event.getTarget(e);
var cellule = (cible.tagName == "TD") ? cible : cible.getTagParent("td"); //on recherche une cellule
if (!cellule) cellule = (cible.tagName == "TH") ? cible : cible.getTagParent("th"); //on recherche une cellule
if (cellule){ //une cellule est trouvée
celluleCible = cellule;
var posTaille = (parseInt(cellule.getPos()[0]) + cellule.getWidth() );//Récupération de la position de la cellule + la largeur
var posMouseX = parseInt( cnx().event.pageScrollX (e) ); //position de la souris sur l'axe des X
if (posMouseX > (posTaille - deltaDetection) ) { //nous sommes à cheval sur une cellule
var ligneIndex =celluleCible.parentNode.rowIndex;
//cnx().trace.print("ligne n° :" + ligne);
if (ligneIndex == 0) { // c'est la première ligne - on traite la colonne
var colonne = celluleCible.getCol(); //retourne le n° de la colonne
//cnx().trace.print("colonne n° :" + colonne);
var largeurTexteHTML = 0; //définit à 0 pour permettre la comparaison numérique dans la boucle for()
var contenu;
var longueur;
for (var ligne = 0; ligne < table.rows.length; ligne++){ //recherche la largeur maxi de la colonne
contenu = table.rows[ligne].cells[colonne].innerHTML; //chaque ligne de la colonne
var longueur = contenu.getWidth();
largeurTexteHTML = (longueur > largeurTexteHTML) ? longueur : largeurTexteHTML; //le plus grand des 2
//cnx().trace.print(colonne + " : " + contenu + " : " + largeurTexteHTML);
};
//cnx().trace.print("largeur du texte: " + largeurTexteHTML);
var ajout = largeurTexteHTML - celluleCible.getWidth() +10; //calcul de ajour pour largeur table
var col = celluleCible.getCol(); //détermine quelle colonne a été cliquée, redimensionnée
var largeur = (celluleCible.getWidth() + ajout) + "px";
table.setWidthCol(largeur, col); //dimensionne toute la colonne
var largeurTable = table.getWidth(); //retourne la largeur de la table
largeurTable += ajout;
table.setWidth(largeurTable); //fait également varier la largeur de la table
}
else { // ce n'est pas la première ligne - on traite la cellule
var contenu = cellule.innerHTML ;
var largeurTexteHTML = contenu.getWidth(); //donne la largeur en pixel d'une chaine de caractères
var ajout = largeurTexteHTML - celluleCible.getWidth() +10; //calcul de ajour pour largeur table
var col = celluleCible.getCol(); //détermine quelle colonne a été cliquée, redimensionnée
var largeur = (celluleCible.getWidth() + ajout) + "px";
table.setWidthCol(largeur, col); //dimensionne toute la colonne
var largeurTable = table.getWidth();
largeurTable += ajout;
table.setWidth(largeurTable); //fait également varier la largeur de la table
};
celluleCible.style.cursor = "auto";
celluleCible = false; //il n'y a a plus de cellule cible identifiée
};
alert("souris: "+ posMouseX + " cellule: "+ cellule.getPos()[0] + " taille_Width: " + cellule.getWidth() + " : " + cellule.getStyle("width") + " : " + cellule.offsetWidth + " : " + document.defaultView.getComputedStyle(cellule, null).getPropertyValue("width") );
};
return false;
};
function mouseDown(e){
var cible = cnx().event.getTarget(e);
var cellule = (cible.tagName == "TD") ? cible : cible.getTagParent("td"); //on recherche la cellule ayant reçu mousedown
if (!cellule) cellule = (cible.tagName == "TH") ? cible : cible.getTagParent("th"); //on recherche la cellule ayant reçu mousedown
if (cellule){ //une cellule est trouvée
var posTaille = (parseInt(cellule.getPos()[0]) + cellule.getWidth() );//Récupération de la position de la cellule + la largeur
var posMouseX = parseInt( cnx().event.pageScrollX (e) ); //position de la souris sur l'axe des X
if (posMouseX > (posTaille - deltaDetection) ) { //nous sommes à cheval sur une cellule
celluleCible = cellule; //une cellule cible est identifiée
};
};
return false;
};
function mouseMove(e){
var cible = cnx().event.getTarget(e);
//cherche si la cible est une cellule ou est le contenu d'une cellule
var cellule = (cible.tagName == "TD") ? cible : cible.getTagParent("td"); //on recherche la cellule ayant reçu mousedown
if (!cellule) cellule = (cible.tagName == "TH") ? cible : cible.getTagParent("th"); //on recherche la cellule ayant reçu mousedown
if (cellule){ //la cellule est effectivement trouvée
/* ---------------
Si on trouve une cellule et que le curseur se trouve a -5px ou +5px de la bordure
Alors on affiche le curseur de redimmensionnement
----------------- */
var posTaille = (parseInt(cellule.getPos()[0]) + cellule.getWidth() );//Récupération de la position de la cellule + la largeur
var posMouseX = parseInt( cnx().event.pageScrollX (e) ); //position de la souris sur l'axe des X
if (posMouseX > (posTaille - deltaDetection) ) cellule.style.cursor = "w-resize"; //curseur a -delta px de la bordure de la cellule
else cellule.style.cursor = "auto";
};
/* redimensionne la cellule */
if (celluleCible) { // une cellule cible est identifiée via mousedown
celluleCible.focus(); //On lui donne le focus pour éviter la sélection de texte
var col = celluleCible.getCol(); //détermine quelle colonne a été cliquée, redimensionnée
var ajout = parseInt(e.clientX) - (parseInt(celluleCible.getPos()[0]) + celluleCible.getWidth() ); //variation de dimension de la cellule
var largeurTable = table.getWidth();
largeurTable += ajout;
table.setWidth(largeurTable); //fait également varier la largeur de la table
var largeur = (celluleCible.getWidth() + ajout) + "px"; //faut-il -1 et si oui pourquoi?
table.setWidthCol(largeur, col); //dimensionne toute la colonne
//cnx().trace.print("mousemove: cellule " + celluleCible + " : " + col + " : " + largeur + " px " + celluleCible.getWidth() );
};
return false;
};
function mouseUp(e){
var cible = cnx().event.getTarget(e);
if (celluleCible) celluleCible.style.cursor = "auto";
celluleCible = false; //il n'y a a plus de cellule cible identifiée
return false;
};
return false;
};
HTMLTableElement.prototype.setColor = function(){ //Améliore la lisibilité d'une table en la formatant
/* ---------------------
var table = "mytable".getElt();
var myCouleur = {
colorPair: "#CCE799", //couleur des lignes paires 0,2,4...
colorImpair: "#B0E0B6", //couleur des lignes impaires 1,3,5...
colorCible: "#C8C8D0", //couleur de la cellule cible de l'event
fin:""
};
var couleurInvariant = { //ne change pas les couleurs - reste invariant
colorPair: false, //couleur des lignes paires 0,2,4...
colorImpair: false, //couleur des lignes impaires 1,3,5...
colorCible: false, //couleur de la cellule cible de l'event
fin:""
};
table.setColor(myCouleur);
// ou encore
table.setColor(); //Une définition par défaut des couleurs est fournie
-------------------- */
var table = this;
var couleurFond = false; //couleur de fond de la cellule cible de l'event
var couleur = {
colorPair: "#CCE799", //couleur des lignes paires 0,2,4... "#CCE799"
colorImpair: "#B0E0B6", //couleur des lignes impaires 1,3,5... "#B0E0B6"
colorCible: "#C8C8D0", //couleur de la cellule cible de l'event "#C8C8D0" - gris
colorTitre: false,
fin:""
};
if(arguments.length){ //teste si il existe des paramètres à la fonction
var myColor = arguments[0];
couleur.colorPair = (myColor.colorPair) ? myColor.colorPair : false;
couleur.colorImpair = (myColor.colorImpair) ? myColor.colorImpair : false;
couleur.colorCible = (myColor.colorCible) ? myColor.colorCible : false;
couleur.colorTitre = (myColor.colorTitre) ? myColor.colorTitre : false;
//if (myColor.colorPair) couleur.colorPair = myColor.colorPair;
//if (myColor.colorImpair) couleur.colorImpair = myColor.colorImpair;
//if (myColor.colorCible) couleur.colorCible = myColor.colorCible;
};
//alert(couleur.colorPair + " : " + couleur.colorImpair + " : " + couleur.colorCible);
initColor(); //autorise la mise en forme, applique les couleurs
function initColor(){ //initialise la mise en forme des cellules
/* -------------------------
applique sur chaque cellule | un style pour améliorer la lisibilité
mouseover et mouseou ne font que gérer cette visibilité en désignant la cellule cible
------------------------- */
var cellule;
var testApplication = table.getAttribute("firstApplication"); //test pour éviter d'appliquer plusieurs les event mouseOut et mouseOver
//alert(testApplication);
for (var ligne = 0; ligne < table.rows.length; ligne++){ //parcours chacune des lignes
for (var col = 0; col < table.rows[ligne].cells.length; col++){ //parcours chaque cellule d'une ligne
cellule = table.rows[ligne].cells[col];
if (ligne.isPair() && couleur.colorPair) cellule.style.backgroundColor = couleur.colorPair; //rappel la première ligne a pour index 0 donc est Pair!
if (ligne.isImpair() && couleur.colorImpair) cellule.style.backgroundColor = couleur.colorImpair;
if (!testApplication){ //évite d'appliquer plusieurs fois les event mouseOver et mouseOut
cellule.addEvent("mouseout", mouseOut);
cellule.addEvent("mouseover", mouseOver);
};
};
};
if (couleur.colorTitre){ //applique une couleur de titre
for (var col = 0; col < table.rows[0].cells.length; col++){ //parcours chaque cellule de la ligne 0
cellule = table.rows[0].cells[col];
cellule.style.backgroundColor = couleur.colorTitre;
};
};
table.setAttribute("firstApplication", true);
return false;
};
function mouseOut(e){ //rétabli la couleur de fond
var cible = cnx().event.getTarget(e);
var cellule = (cible.tagName == "TD") ? cible : cible.getTagParent("td"); //on recherche la cellule ayant reçu mousedown
if (!cellule) cellule = (cible.tagName == "TH") ? cible : cible.getTagParent("th"); //on recherche la cellule ayant reçu mousedown
if (cellule){
cellule.style.backgroundColor = couleurFond; //rétablit la couleur de fond de la cellule
//cnx().trace.print("couleur Fond in Out: " + couleurFond);
couleurFond = false;
};
return false;
};
function mouseOver(e){
var cible = cnx().event.getTarget(e);
var cellule = (cible.tagName == "TD") ? cible : cible.getTagParent("td"); //on recherche la cellule ayant reçu mousedown
if (!cellule) cellule = (cible.tagName == "TH") ? cible : cible.getTagParent("th"); //on recherche la cellule ayant reçu mousedown
if (cellule){
couleurFond = cellule.style.backgroundColor; //rétablit la couleur de fond de la cellule
if (couleur.colorCible) cellule.style.backgroundColor = couleur.colorCible;
//cnx().trace.print("couleur Fond in Over: " + couleurFond);
};
return false;
};
return false;
};
HTMLTableElement.prototype.setPlugin = function(){ //applique setEdit(), setFilter(), setSort(), setScroll()...
/* ----------------------
var table = "myTable".getElt();
var listeApplication = {
setFilter: true,
setSort: false,
setEdit: true,
setScroll: true,
fin: false
};
table.setExcel(listeApplication);
--------- */
var table = this;
var appli = (arguments) ? arguments[0] : false;
if (!appli) {
table.setFilter();
table.setSort();
table.setEdit();
table.setColor();
table.setScroll();
}
else {
if (appli.setFilter) table.setFilter();
if (appli.setSort) table.setSort();
if (appli.setEdit) table.setEdit();
if (appli.setColor) {
if (typeof appli.setColor === "object") table.setColor(appli.setColor); //il existe un parametre de couleur
else table.setColor(); //couleur par défaut
};
if (appli.setScroll) table.setScroll();
};
return false;
};
HTMLTableElement.prototype.setSheet = function(){ //écrit sous forme tabulaire la table - la trnsforme en Array() avant affichage tabulaire
/* -----------------------------------
var table = "mytablex".getElt(); //elt as
var myconfig = {
ancrage: table, //ancrage du sheet - détermine où le sheet sera écrit, après quel elt le sheet sera écrit
keepTable: false, //si false efface la table d'origine, si true conserve cette table
fin: ""
};
table.setSheet(myconfig); //créer la structure tabulaire
---------------------------- */
var table = this;
var tab = table.getArray(); //retourne un Array() à 2 dimensions
var config = { //valeur par defaut
noPrint: false, //n'affiche pas le sheet si myConfig.noPrint est true
colorTitre: "green",
colorPair: "#CCE799", //couleur des lignes paires 0,2,4... "#CCE799"
colorImpair: "#B0E0B6", //couleur des lignes impaires 1,3,5... "#B0E0B6"
colorCible: "#C8C8D0", //couleur de la cellule cible de l'event "#C8C8D0" - gris
width: 80, //largeur d'une cellule
height: 20, //hauteur d'une cellule
heightBody: "100px", //hauteur pour le scroll dans body
ancrage: table, //ancrage du sheet - détermine où le sheet sera écrit, après quel elt le sheet sera écrit - par défaut c'est la table qu'il représente.
keepTable: false, //si false efface la table d'origine, si true conserve cette table
fin: ""
};
if(arguments.length){ //teste si il existe des paramètres à la fonction
var myConfig = arguments[0];
config.noPrint = (myConfig.noPrint) ? myConfig.noPrint : config.noPrint; //initialise une valeur par défaut
config.colorTitre = (myConfig.colorTitre) ? myConfig.colorTitre : config.colorTitre; //initialise une valeur par défaut
config.colorPair = (myConfig.colorPair) ? myConfig.colorPair : config.colorPair; //initialise une valeur par défaut
config.colorImpair = (myConfig.colorImpair) ? myConfig.colorImpair : config.colorImpair; //initialise une valeur par défaut
config.colorCible = (myConfig.colorCible) ? myConfig.colorCible : config.colorCible; //initialise une valeur par défaut
config.width = (myConfig.width) ? myConfig.width : config.width; //initialise une valeur par défaut
config.height = (myConfig.height) ? myConfig.height : config.height; //initialise une valeur par défaut
config.heightBody = (myConfig.heightBody) ? myConfig.heightBody : config.heightBody; //initialise une valeur par défaut
config.ancrage = (myConfig.ancrage) ? myConfig.ancrage : config.ancrage; //initialise une valeur par défaut
config.keepTable = (myConfig.keepTable) ? myConfig.keepTable : config.keepTable; //initialise une valeur par défaut
};
var sheet = tab.setSheet(config); //sheet est un affichage tabulaire de type tableau
if (!config.keepTable) table.removeElt(); //si true converse la table écrite, autrement l'efface - ce qui est d'ailleurs le comportement par défaut; le sheet remplace alors la table
};
//}
//HTMLTableCellElement - cellule d'une table {
HTMLTableCellElement.prototype.getCol = function(){ // retourne le n° de la colonne correspondant à la cellule
var elt = this; //retourne la cellule
var cellIndex = elt.cellIndex; //la cellule possède une propriété cellIndex associée
var table = elt.getTagParent("table");
var nombreLignes = table.rows.length;//nombre de lignes du tableau
var nombreColonnes = table.rows[0].cells.length;//nombre de colonnes de la ligne 0
var nombresCellules = nombreLignes*nombreColonnes; //nombre de cellules de la table
if (cellIndex < nombresCellules){
var refLigne = parseInt(cellIndex / nombreColonnes); //numéro de la ligne
var refColonne = cellIndex - (refLigne * nombreColonnes) ; //numéro de la colonne
return refColonne;
}
return false;
};
HTMLTableCellElement.prototype.getTable = function(){ // retourne la table parent de la cellule
var elt = this; //retourne la cellule
var table = elt.getTagParent("table");
return table;
};
//}
//HTMLSpanElement - collection span {
HTMLSpanElement.prototype.isSpan = function(){ //ne sert à rien initialise juste la collection div
var span = this;
alert(span + " is a SPAN");
};
//}
//HTMLDivElement - collection div {
HTMLDivElement.prototype.isDiv = function(){ //ne sert à rien initialise juste la collection div
var div = this;
alert(div + " is a DIV");
};
//}
//HTMLInputElement -collection input {
HTMLInputElement.prototype.isInput = function(){
var elt = this;
alert(elt + " is a Input");
};
//}
//
if ( cnx().user.IE8 ){ //Object Collection - contient tous les Elements
if (Element){ //Element - collection commune à tous les éléments HTML - existe sous IE et Firefox pour toutes les versions!
//dom
Element.prototype.getElt = function(){ //cherche un elt
var elt = this; //
var elt = ( elt.isString() ) ? document.getElementById(elt) : elt; //test si String et cherche alors Object HTML lié
if(elt == null){
if (this.toLowerCase() == "body") return document.body;
if (this.toLowerCase() == "document") return document;
if (this.toLowerCase() == "window") return window;
else return false;
}
return elt;
};
Element.prototype.getNodeList = function(){ //parcours les noeuds d'un elt grace au DOM - retourne un Array() d'objet
/* ---------------
var tab = a.getNodeList();
for(x=0; x undefined;
Array a toujours une propriété length qui peut être égale à 0 en l'absence d'élément dans le tableau
------------------------------------------ */
if (this.isString() ) return false;
var elt = this.getElt();
return typeof elt === "object" && typeof elt.length === "undefined";
};
Element.prototype.getTagName = function(){ //tagName d'un elt tjs en minuscule
var elt = this.getElt();
if ( elt.isString() ) return "string";
var tag = elt.tagName;
return tag.toLowerCase(); //toLowerCase - toUpperCase()
};
Element.prototype.getParent = function(niv){// renvoi l'élément parent quelque soit son tag - parent ou grand parent - ex nodeParent()
/*----------------------------------------------------
Permet de récupérer l'élément parent
- elt: élément source (this) - nota peut être un id
- niv: niveau du parent à récupérer, optionnel permet de chercher un grand parent!
exemple d'utilisation:
var parent_table = objetCellule.getParent(1); //retourne la row
avec nodeName retourne le nom de l'élément et "BODY" pour document.body
---------------------------------------------------- */
var elt = this; //retourne Object if exist
(!niv) ? niv=1 : niv=niv;// On initialise le niveau à 1 si besoin est.
if (elt.nodeName == "BODY") return false; // "#document" est le premier ancestre de tous les objet HTML et n'a pas de parent
if (niv != 1 && elt.parentNode){ // Si le nombre de niveaux demandé n'est pas atteint on continue
return (elt.parentNode).getParent(niv -= 1);
} else {
return elt.parentNode; // retourne l'objet.
};
};
Element.prototype.getTagParent = function(tagName, niv){// renvoi l'élément parent correspondant à un Tag donné
/*----------------------------------------------------
Author: jsgorre Jean-sébastien sur javascript codes sources
Permet de récupérer l'élément parent correspondant à un Tag donné
- tagName: Nom du type d'élément à récupérer: exemple TABLE
- elt: élément source (this) - nota peut être un id
- niv: niveau du parent à récupérer, optionnel
exemple d'utilisation:
var parent_table = elt.getTagParent("TABLE"); //retourne la parent
var parent_table = elt.getTagParent("TABLE", 1); //retourne la parent
---------------------------------------------------- */
var elt = this; //retourne Object if exist
if(elt == false) return false; //gestion d'erreur
(!niv) ? niv=1 : niv = niv;// On initialise le niveau à 1 - si false => niv=1
var tagName = tagName.toUpperCase();
if (elt.nodeName == "BODY") return false; // Le document a été parcouru entièrement et aucune balise n'a été trouvée
if (elt.parentNode.nodeName != tagName){ // Si la balise ne correspond pas on continue la recherche avec le parent
return elt.parentNode.getTagParent(tagName, niv);
}
else if (niv!=1){ // le tag est trouvé chez le parent, mais pas encore le niveau
return elt.parentNode.parentNode.getTagParent( tagName, niv-=1); //on continue avec le grand-parent et niv--
}
else {
return elt.parentNode; // Sinon on renvoie le parent correspondant au tagName
};
};
Element.prototype.getCell = function(niv){ //recherche un elt de type cellule (th ou td)
/*----------------------------------------------------
teste si elt est une cellule (tagName==td ou th)
si oui teste si niv == 1 si oui return elt
si non return parent.appel(niv-1)
si non return parent.appel(niv)
avec nodeName retourne le nom de l'élément et "BODY" pour document.body
"BODY" est le nodeName de HTMLBodyElement
et a pour parent HTMLHtmlElement dont le nodeName est "HTML" , qui n'a pas de parent.
2 technologies existe, soit la boucle while(){}, soit un appel récurssif à la fonction
l'appel récurssif est plus lisible en compréhension mais provoque avec IE8 une erreur de type Stack overflow at line0 car la pile gérant ces appels sature!
while(){} ne provoque pas cette erreur mais est plus complexe en lisibilité du code qui doit être très bien commenté!
---------------------------------------------------- */
var elt = this; //retourne Object if exist
(!niv) ? niv = 1 : niv = niv;// donne la valeur 1 par défaut à niv
var cellSearch; //retourne la cellule parent si elle existe
//alert("elt is: " + elt + " : " + elt.nodeName);
while(true){ //il faut une variable !false pour while
if (elt.nodeName == "BODY") { //BODY a pour parent HTML qui n'a plus de parent
cellSearch = false; // plus de parent sauf HTML
break; //sortie de boucle immédiate
};
if (elt.tagName == "TD" || elt.tagName == "TH") { //c'est une cellule
if (niv == 1) { //c'est une cellule et le niv est celui de la recherche
cellSearch = elt; //nous avons trouvé le parent de type cellule correspondant au niveau recherché
break; //sortie de boucle immédiate
}
else { //c'est une cellule, mais le niveau n'est pas bon!
elt = elt.parentNode;
niv--; //décrémente le niveau
};
}
else elt = elt.parentNode; //ce n'est pas une cellule
};
return cellSearch;
};
Element.prototype.isCell = function(){ //teste si elt est de type cellule (th ou td)
/*----------------------------------------------------
teste si elt est une cellule (tagName==td ou th)
---------------------------------------------------- */
var elt = this; //retourne Object if exist
if (elt.tagName == "TD" || elt.tagName == "TH") return elt;
else return false;
};
Element.prototype.getNodeContents = function(){// retourne le contenu d'un élément en fonction de son nodeType
var elt = this.getElt(); //retourne Object if exist
var contents;
switch(elt.nodeType){
case 1: //ELEMENT_NODE
contents = elt.innerHTML;
break;
case 2:
//contents = "ATTRIBUTE_NODE";
break;
case 3: //TEXT_NODE
contents=elt.data;
break;
case 4:
//contents="CDATA_SECTION_NODE";
break;
case 5:
//contents="ENTITY_REFERENCE_NODE";
break;
case 6:
//contents="ENTITY_NODE";
break;
case 7:
//contents="PROCESSING_INSTRUCTION_NODE";
break;
case 8:
//contents="COMMENT_NODE";
break;
case 9:
//contents="DOCUMENT_NODE";
break;
case 10:
//contents="DOCUMENT_TYPE_NODE"
break;
case 11:
//contents="DOCUMENT_FRAGMENT_NODE";
break;
case 12:
//contents="NOTATION_NODE";
break;
default:
//contents="Undefined_Node";
break;
}
return contents;
};
Element.prototype.getNodeType = function(){ // retourne le type d'un élément
var elt = this.getElt(); //retourne Object if exist
var type;
switch(elt.nodeType){
case 1:
type = "ELEMENT_NODE";
break;
case 2:
type = "ATTRIBUTE_NODE";
break;
case 3:
type="TEXT_NODE";
break;
case 4:
type="CDATA_SECTION_NODE";
break;
case 5:
type="ENTITY_REFERENCE_NODE";
break;
case 6:
type="ENTITY_NODE";
break;
case 7:
type="PROCESSING_INSTRUCTION_NODE";
break;
case 8:
type="COMMENT_NODE";
break;
case 9:
type="DOCUMENT_NODE";
break;
case 10:
type="DOCUMENT_TYPE_NODE";
break;
case 11:
type="DOCUMENT_FRAGMENT_NODE";
break;
case 12:
type="NOTATION_NODE";
break;
default:
type="Undefined_Node";
break;
}
return type;
};
Element.prototype.getNodeChilds = function(type) {//retourne un Array() contenant les enfants correspondant à un type donné ou tous les enfants si type est vide
/* ----------------
pour connaître les type voir cnx(elt).dom.getType()
var tab = elt.getNodeChilds(3); //recherche tous les enfants de type TEXT_NODE = 3
for (var i=0; i"); //nodeValue
}
------------------- */
var elt = this.getElt(); //retourne Object if exist
var type = (type) ? type: false;
switch(type){ //type est normalement as integer, si le type est de type String, il faut le transformer en integer correspondant
case "ELEMENT_NODE":
type = 1;
break;
case "ATTRIBUTE_NODE":
type = 2;
break;
case "TEXT_NODE":
type = 3;
break;
case "CDATA_SECTION_NODE":
type = 4;
break;
case "ENTITY_REFERENCE_NODE":
type = 5;
break;
case "ENTITY_NODE":
type = 6;
break;
case "PROCESSING_INSTRUCTION_NODE":
type = 7;
break;
case "COMMENT_NODE":
type = 8;
break;
case "DOCUMENT_NODE":
type = 9;
break;
case "DOCUMENT_TYPE_NODE":
type = 10;
break;
case "DOCUMENT_FRAGMENT_NODE":
type = 11;
break;
case "NOTATION_NODE":
type = 12;
break;
}
var tab = new Array();
var node;
for (var i = 0; i < elt.childNodes.length; i++) {
node = elt.childNodes[i];
if (node.nodeType == type) tab.push(node);
if(!type) tab.push(node); //pas de type, donc on retourne tous les enfants
}
return tab;
};
Element.prototype.setDrag = function(){ //elt as movable, deplacable for drag
/* ------------
var image = "image18".getElt(); //image18 est l'id de l'objet HTML
image.setDrag(); //est déplaçable
---------- */
var elt = this.getElt();
var isDrag = false; //contient l'objet cible à déplacer (drag) si not false
var isDrop = false; //contient l'objet droppable (le conteneur) si not false
var offsetX = 10, //Décalage image par rapport à la souris
offsetY = 10;
var styleDrag = ".cnxDrag{cursor:move;}"; //Style cnxDrag identifie les objets draggable - déplaçable
elt.addClassName("cnxDrag");
function touchStartSelect(e){ // si objet drag le sélectionne
isDrag = cnx().event.getTarget(e);
var x = cnx().event.pageScrollX(e); //position de la souris
var y = cnx().event.pageScrollY(e);
document.body.appendChild(isDrag); //force l'objet isDrag dans document.body
isDrag.style.position = "absolute" ;
isDrag.setLeft(x + offsetX);
isDrag.setTop(y + offsetY);
return false;
}
function touchMoveDrag(e){ // déplace un objet drag
if (!window.addEventListener) e = window.event; //IE <10 ne retourne pas (e); offre une propriété window.event
if (e.preventDefault) {
e.preventDefault(); // the default behaviour is scrolling - impératif avec IE10 et les tablettes!
} else {
e.returnValue = false; //équivallent à e.preventDefault pour IE<=9
}
if (isDrag){
isDrag.setLeft( cnx().event.pageScrollX(e) + offsetX);
isDrag.setTop( cnx().event.pageScrollY(e) + offsetY);
}
return false;
}
function touchEndRaz(e) { //RAZ des paramètres pour une nouvelle sélection
if (isDrop && isDrag){
transfert(); //ajout perso pour ecriture
}
isDrag = false; //libère l'object isDrag
return false;
}
function transfert(){ // transfère la sélection (objet isdrag) dans un isDrop
if(isDrag != isDrop){ //cas où objet drag = obj drop ne rien faire!
/*
isDrag.removeAttribute("style");//supprime les attributs style pour obtenir un placement par défaut: fonctionne mais excessif car détruit tous les styles
*/
isDrag.style.position = ""; //supprime les attributs pour obtenir un placement par défaut: nota null au lieu de "" provoque une erreur sous IE
isDrag.style.left = "";//supprime les attributs pour obtenir un placement par défaut
isDrag.style.top = "";//supprime les attributs pour obtenir un placement par défaut
isDrop.appendChild(isDrag); //ajoute isdrag dans isDrop qui devient son parent et conteneur
}
}
function mouseoverDrop(e){//modifie la couleur d'un conteneur - effet visuel
isDrop = cnx().event.getTarget(e); //cible de event mouseover
if ( !isDrop.isClassName("cnxDrop") ) isDrop = false;
return false;
}
function mouseoutDrop(e){ //
var cible = cnx().event.getTarget(e); //cible de notre event - classe mouse
if (cible == isDrop){
isDrop = false;
}
return false;
}
cnx().style.appendStyle(styleDrag); //ajoute le style className .cnxDrag et .cnxDrop
elt.addEvent("touchstart", touchStartSelect); //document.onmousedown = touchStartSelect;
document.addEvent("touchmove", touchMoveDrag); //document.onmousemove = cnx.dragdrop.touchMoveDrag;
document.addEvent("touchend", touchEndRaz); //document.onmouseup=new Function("isDrag = false"); click ou mouseup?
document.addEvent("mouseover", mouseoverDrop); //
document.addEvent("mouseout", mouseoutDrop); //
};
Element.prototype.setDrop = function(){ //elt as conteneur for drop
/* ----------------
var div = "boite rouge".getElt(); //boite rouge est l'id de l'objet HTML
div.setDrop(); //est un conteneur
---------------- */
var elt = this.getElt();
var styleDrop = ".cnxDrop:hover {background-color: green; cursor: crosshair; }"; //Style cnxDrop identifie les objets droppable - conteneur
cnx().style.appendStyle(styleDrop); //ajoute le style className ".cnxDrop"
elt.addClassName("cnxDrop"); //affecte la classeName à l'elt droppable
};
Element.prototype.removeElt = function (){ //détruit un élément - le retire de sa collection parent
var elt = this.getElt(); //retourne Object if exist
if (!elt) return false; // si elt n'existe pas retourne false
var parent = elt.getParent(1); //recherche le parent
parent.removeChild(elt); //retire l'enfant, donc le détruit
return true;
};
Element.prototype.changeId = function(newID){ // modifie l'id d'un élément
/* var elt.changeID("myNewId"); */
var elt = this.getElt();
if (elt == null) return false; //il faut !null pour IE
elt.id = newID;
return elt.id;
};
Element.prototype.insertAfter = function(newNode) {
var elt = this.getElt();
elt.parentNode.insertBefore(newNode, elt.nextSibling);
};
Element.prototype.doInsertAfter = function(newNode) { //insère newNode après elt - identique à insertAfter()
/* ----------------
pour insérer newNode avant elt il faut écrire:
elt.parentNode.insertBefore(newNode, elt); //insère newNode avant elt - l'instruction insertBefore() existe déjà dans le DOM
----------------- */
var elt = this.getElt();
elt.parentNode.insertBefore(newNode, elt.nextSibling); //insère newNode après elt - l'instruction insertAfter() n'existe pas dans le DOM, d'où cette définition!
// Dans le parent de elt, insérer newNode avant "elt suivant"; donc entre elt et "elt suivant" - soit après elt!
};
Element.prototype.doInsertBefore = function(newNode) { //insère newNode avant elt
/* ----------------
pour insérer newNode avant elt il faut écrire:
elt.parentNode.insertBefore(newNode, elt); //insère newNode avant elt - l'instruction insertBefore() existe déjà dans le DOM
Bien que insertBefore() existe déjà dans le dom nous avons cérit cette fonction car son utilisation nous apparaît comme plus simple
De même nous avons ajouter une fonction doInsertAfter() nous des raisons mémo technique setInsertXX();
----------------- */
var elt = this.getElt();
elt.parentNode.insertBefore(newNode, elt); //insère newNode après elt - l'instruction insertAfter() n'existe pas dans le DOM, d'où cette définition!
// Dans le parent de elt, insérer newNode avant elt
};
Element.prototype.getPos = function(){ //position (x,y) de l'objet
var elt = this;
var x = elt.offsetLeft || 0;
var y = elt.offsetTop || 0;
while (elt = elt.offsetParent) { //tant qu'il y a un parent, on ajoute la position de son parent
x += elt.offsetLeft;
y += elt.offsetTop;
};
return new Array(x,y); //Ici on retourne (x,y) dans un Array()
};
//log
Element.prototype.isWhat = function(reference){
var reference = reference ? reference : "pas de reference fournie.";
alert(this + " appartient à la collection Object - " + reference);
};
//style
Element.prototype.isClassName = function (sClassName){//search className
/* ----------------------
Cherche tous les syles de type className appliqué à un objet elt
puis retourne true si style trouvé, retourne false si style non trouvé!
var verif = elt.isClassName("my_classname");
----------------- */
var elt = this.getElt(); //retourne Object if exist
if(elt == false || elt == null) return null; //erreur sur elt
var liste_className = elt.className;//retourne tous les styles de type className en une seule liste séparée par un espace
var tab_className = liste_className.split(" ");//transforme la liste en un tableau contenant chacun des className appliqués à elt
for(var i = 0 ; i < tab_className.length ; i++){ //parcours le tableau pour voir si l'objet est un contener
if(tab_className[i] == sClassName){
return true; //trouvé !
}
}
return false; //non trouvé!
};
Element.prototype.addClassName = function(newClassName) { //ajoute un className
/* --------------------
var NFait = elt.addClassName("className");
--------------------- */
var elt = this.getElt(); //retourne Object if exist
if(elt == false || elt == null) return null; //erreur sur elt
var allStyles = elt.className;
var tabStyles = allStyles.split(" "); //retourne un Array
var long = tabStyles.length;
for (var i = 0; i < long; i++) {
if (tabStyles[i] == newClassName)
return; //renvoie undefined la classe existe déjà!
}
tabStyles[tabStyles.length] = newClassName; //ajoute la nouvelle classe de style
elt.className = tabStyles.join(" ").replace( /(^\s+)|(\s+$)/g, "" );
return true;
};
Element.prototype.removeClassName = function(sClassName) {//retire un className
/* ----------------
elt.removeClassName("myClasseName");
----------------- */
var elt = this.getElt(); //retourne Object if exist
if(elt == false || elt == null) return null; //erreur sur elt
var s = elt.className;
var p = s.split(" ");
var np = [];
var l = p.length;
var j = 0;
for (var i = 0; i < l; i++) {
if (p[i] != sClassName)
np[j++] = p[i];
}
elt.className = np.join(" ").replace( /(^\s+)|(\s+$)/g, "" );
return true;
};
Element.prototype.getStyle = function(nameStyle) { //lit la valeur du style - nameStyle as String
/* -----------------------------------
getstyle() renvoie la valeur du style
gère un élément (div, img ...), ou un String, mais gère aussi les object
nameStyle est le nom du style dont la valeur sera retournée: "width", "height", "top", "left" ...
en fonction de la propriété testée getStyle retourne une String ou un integer, voire #FFF ou rgb() ...
------------------------- */
var elt = this.getElt(); //retourne Object if exist
if(elt == false || elt == null) return null; //erreur sur elt
var strValue = (elt).style[nameStyle.toJavascriptStyleName()]; //lecture des styles intégré au code HTML ou imposé par javascript
if(!strValue){ //lecture de style dans un fichier CSS ou équivallent ou imposé par javascript
if(document.defaultView) strValue = document.defaultView.getComputedStyle(elt, null).getPropertyValue(nameStyle); //FF, Opera IE10
else if((elt).currentStyle) strValue = (elt).currentStyle[nameStyle.toJavascriptStyleName()]; //IEX8 - (compatible IE10 mais pas FF)
}
return strValue; //String: => width: "100px", faire: parseInt(strValue) pour integer
};
Element.prototype.getTruePosition = function(){ // retourne la position d'un elt par rapport à la page (y compris avec ascenseur et parent en position absolue)
/*----------
script trouvé sur: http://forum.hardware.fr/hfr/Programmation/HTML-CSS-Javascript/javascript-connaitre-position-sujet_45951_1.htm
code de Hermés le messager sur ce forum
var pos = claude.prototype.style.getTruePosition("smile01");
pos.x contient la position par rapport au bord gauche de la page web, soit un offsetLeft global
pos.y contient la position par rapport au bord haut de la page web, soit un offsetTop global
var tab = elt.getTruePosition(); //tab as array()
-------- */
var elt = this.getElt(); //retourne Object if exist
var objet = new Object(); //genère un objet; si objet = elt on provoque une erreur avec FF version 3, mais avec les nouvelles versions de FF ni IE
var x = 0;
var y = 0;
while (elt.tagName != 'BODY'){ //tant que BODY n'est pas le parent
x += elt.offsetLeft;
y += elt.offsetTop;
elt = elt.offsetParent;
}
objet.x = x; //offsetLeft global à la page web
objet.y = y; //offsetTop global à la page web
return objet; //contient l'objet HTML initial avec 2 propriétés x=left; y=top par rapport à la page web même si ascenseur
};
Element.prototype.getTrueLeft = function(){ // position left par rapport à la page y compris si ascenseur et parent en position absolue
/* var left = elt.getTrueLeft(); */
var elt = this.getElt(); //retourne Object if exist
var position = elt.getTruePosition(); //retourne x, y postion de elt par rapport à la page y compris si ascenseur et parent en position absolue
return position.x; // x => left: as integer
};
Element.prototype.getTrueTop = function(){ // position top par rapport à la page y compris si ascenseur et parent en position absolue
/* var top = elt.getTrueTop(); */
var elt = this.getElt(); //retourne Object if exist
var position = elt.getTruePosition(); //retourne x, y postion de elt par rapport à la page y compris si ascenseur et parent en position absolue
return position.y; // y => top: as integer
};
Element.prototype.getWidth = function(){ // retourne la largeur d'un élément as integer
/* --------------------
var largeur = elt.getWidth();
-------------------- */
var elt = this.getElt(); //retourne Object if exist
var strValue = elt.getStyle("width");
if (strValue == "auto" || !strValue) var strValue = elt.offsetWidth; //gestion pour IE qui retourne auto si la table s'ajsute automatiquement à la fenetre
var largeur = elt.offsetWidth; //Pour IE8 il faut tester offset pour les cellules de qui contiennent un texte sans aucun espace
largeur = (largeur > parseInt(strValue) ) ? largeur : parseInt(strValue); //la plus grande valeur des 2 expressions
return parseInt(largeur); // as integer
};
Element.prototype.setWidth = function(strValue){ // impose la largeur d'un élément
/*--------------
Pour supprimer les valeurs de width existantes, il faut faire elt.setWidth("");
on peut écrire elt.setWidth(100); // "100px" également!
nota en HTML width existe sous 2 formes
elt.width et elt.style.width
en principe elt.style.width est prioritaire pour affectée une valeur sur elt.width
Par contre si elt.style.width = ""; elt.style reste actif, il faut donc également écrire elt.width = "";
-------------------- */
var elt = this.getElt(); //retourne Object if exist
strValue = ( strValue.isString() ) ? strValue : strValue + "px"; //vérifie que c'est un String
if (strValue == "") elt.width = ""; //supprime une éventuelle valeur de l'attribut width si il existe
else {
elt.style.width = strValue;
}; //applique le style
//alert("setWidth: " + strValue + " apply to: " + elt);
/* -----------
Nota: pour tester si elt.width existe faire
if (elt.width == "") //elt.width n'existe pas, autrement elt.width retourne la valeur as String également
elt.width retourne "396" as String
| elt.width retourne "396" as String
| elt.width retourne "" as String
------------ */
return parseInt(strValue); //retourne un integer
};
Element.prototype.getHeight = function(){ //
var elt = this.getElt(); //retourne Object if exist
var strValue = elt.getStyle("height");
if (strValue == "auto" || !strValue) var strValue = elt.offsetHeight + "px";
return parseInt(strValue); //integer
};
Element.prototype.setHeight = function(strValue){ //
var elt = this.getElt(); //retourne Object if exist
var strValue = ( strValue.isString() ) ? strValue : strValue + "px"; //vérifie que c'est un String
elt.style.height = strValue; //applique le style
return parseInt(strValue); //retourne un integer
};
Element.prototype.getTop = function(){ //
/* var top = elt.getTop(); */
var elt = this.getElt(); //retourne Object if exist
var strValue = elt.getStyle("top");
if (strValue == "auto" || !strValue) var strValue = elt.offsetTop + "px"; //le px sert à alimenter le getUnit!
return parseInt(strValue); //integer
};
Element.prototype.setTop = function(strValue){ //
/* var top = elt.setTop("hauteur"); */
var elt = this.getElt(); //retourne Object if exist
strValue = ( strValue.isString() ) ? strValue : strValue + "px"; //vérifie que c'est un String
elt.style.top = strValue; //applique le style
return parseInt(strValue); //retourne un integer
};
Element.prototype.getBottom = function(){ //
var elt = this.getElt(); //retourne Object if exist
var strValue = elt.getStyle("bottom");
if (strValue == "auto" || !strValue) var strValue = elt.offsetBottom + "px";
return parseInt(strValue); //integer
};
Element.prototype.setBottom = function(strValue){ //
var elt = this.getElt(); //retourne Object if exist
var strValue = ( strValue.isString() ) ? strValue : strValue + "px"; //vérifie que c'est un String
elt.style.bottom = strValue; //applique le style
return parseInt(strValue); //retourne un integer
};
Element.prototype.getLeft = function(){ //
/* var left = elt.getLeft(); */
var elt = this.getElt(); //retourne Object if exist
var strValue = elt.getStyle("left");
if (strValue == "auto" || !strValue) var strValue = elt.offsetLeft + "px"; //sert à mettre à jour getUnit()
return parseInt(strValue); //integer
};
Element.prototype.setLeft = function(strValue){ //
/* var left = elt.setLeft("left"); */
var elt = this.getElt(); //retourne Object if exist
var strValue = ( strValue.isString() ) ? strValue : strValue + "px"; //vérifie que c'est un String
elt.style.left = strValue; //applique le style
return parseInt(strValue); //retourne un integer
};
Element.prototype.getRight = function(){ //
var elt = this.getElt(); //retourne Object if exist
var strValue = elt.getStyle("right");
if (strValue == "auto" || !strValue) var strValue = elt.offsetRight + "px";
return parseInt(strValue); //integer
};
Element.prototype.setRight = function(strValue){ //
var elt = this.getElt(); //retourne Object if exist
var strValue = ( strValue.isString() ) ? strValue : strValue + "px"; //vérifie que c'est un String
elt.style.right = strValue; //applique le style
return parseInt(strValue); //retourne un integer
};
Element.prototype.getPosition = function(){ //absolute, relative, static
/* var position = elt.getPosition(); */
var elt = this.getElt(); //retourne Object if exist
var strPosition = elt.style.position;
return strPosition;
};
Element.prototype.setPosition = function(strPosition){ //absolute ou relative - static
/* elt.setPosition(); */
var elt = this.getElt(); //retourne Object if exist
elt.style.position = strPosition; //absolute, relative, static
return strPosition;
};
Element.prototype.getVisibility = function(){ // visible ou hidden
var elt = this.getElt(); //retourne Object if exist
var strVisibility = elt.style.visibility; //si inherit recherche la propriété dans le parent également, sauf si parent = document auquel cas reçoit inherit
if (strVisibility == "inherit") strVisibility = "visible"; //la recherche successive de parent abouti sur document, donc je reçois inherit et document est toujours visible
return strVisibility;
};
Element.prototype.setVisibility = function(strVisibility){ // visible ou hidden
var elt = this.getElt(); //retourne Object if exist
if (strVisibility == true) var strVisibility = "visible";
if (strVisibility == false) var strVisibility = "hidden";
elt.style.visibility = strVisibility;
return strVisibility;
};
Element.prototype.setOpacity = function(opacity) { // Opacité
/* ---------------------
script trouvé sur: http://www.supportduweb.com/scripts_tutoriaux-code-source-32-changer-l-opacite-d-un-div-alpha-compatibles-avec-tous-les-navigateurs.html
opacity as integer between 0 /100
100 => opacité = 100% le texte est normal
0 => opacité = 0% le texte est totalement transparent, donc un texte en noir sur fond blanc avec opacity=0 disparaît! => totalement transparent
------------------------- */
var elt = this.getElt(); //retourne Object if exist
if (!elt) return false;
elt.style["filter"] = "alpha(opacity="+opacity+")"; //IE => filter:alpha(opacity=0);
elt.style["-moz-opacity"] = opacity/100;
elt.style["-khtml-opacity"] = opacity/100;
elt.style["opacity"] = opacity/100;
return opacity;
};
//event
Element.prototype.addEvent = function(){
/* -----------
document.addEvent("click", function(){affiche("essai3");} );
function affiche(texte){
alert("click sur document " + texte);
};
----------------- **/
if(window.addEventListener){ // IE >=9 et FF Chrome Opera... : elt.addEventListener
return function(eventName, handler) {
var elt = this.getElt(); //retourne Object if exist
var propagation = false;
eventName = eventName.toLowerCase(); //met en minuscule le nom de l'évènement
if(eventName.indexOf("on") == 0) eventName = eventName.substring(2, eventName.length);//transforme onclick en click
switch(eventName) {
/*
MSPointerOver
MSPointerOut
MSPointerHover
*/
case "mousedown": //pose prb avec FF si suivi d'un autre event - voir drag and drop
if ( handler.isObject() ){ //IE
elt.addEventListener(eventName, handler, propagation); //teste si object et pas function
//cnx(elt).event.onEvent("onmousedown", handler);
}
else { //FF et google chrome
elt.addEventListener(eventName, handler, propagation);
//cnx(elt).event.onEvent("onmousedown", handler); //appelle l'event suivant la méthode onmousedown pour Firefox
//le prb avec FF a disparu avec les nouvelles versions, nous gardons toutefois en mémoire le procédé pour le cas où!
}
break;
case "mousewheel": //onmousewheel - transmet une fonction spécifique haut/bas
elt.addEventListener('DOMMouseScroll',
function(){
var e = arguments[0]; //var e = arguments[0] || event;
claude.prototype.event.mouseWheel(e, handler);
},
false); //FF only - name event spécifique pour FF
elt.addEventListener(eventName,
function(){
var e = arguments[0] || event;
claude.prototype.event.mouseWheel(e, handler);
},
false);
break;
case "load": //l'Event onload s'applique à window, pas à document
window.addEventListener(eventName, handler, propagation); //Ne pas oublier le "on" pour IE
break;
case "touchstart": case "MSPointerDown".toLowerCase(): case "mousedown":
if (window.navigator.msPointerEnabled) elt.addEventListener("MSPointerDown", handler, propagation); //IE10
else if (claude.prototype.user.isMobile() ) elt.addEventListener("touchstart", handler, propagation);
else elt.addEventListener("mousedown", handler, propagation);
break;
case "touchmove": case "MSPointerMove".toLowerCase(): case "mousemove":
if (window.navigator.msPointerEnabled) elt.addEventListener("MSPointerMove", handler, propagation); //IE10
else if (claude.prototype.user.isMobile() ) elt.addEventListener("touchmove", handler, propagation);
else elt.addEventListener("mousemove", handler, propagation);
break;
case "touchend": case "MSPointerUp".toLowerCase(): case "touchcancel": case "mouseup":
if (window.navigator.msPointerEnabled) {
elt.addEventListener("MSPointerUp", handler, propagation); //IE10
}
else if (claude.prototype.user.isMobile() ) elt.addEventListener("touchend", handler, propagation);
else elt.addEventListener("mouseup", handler, propagation);
break;
case "tap".toLowerCase(): //custom event - nécessite un physical event definition
cnx(elt).event.physicalEventAsTap(); //définit les diverses actions physiques correspondantes au tap event
elt.addEventListener(eventName, handler, propagation);//mettre un 3ième argument pour les autres navigateurs FF - optionnel au delà de la version 6 de FF}
break;
case "clickDroit".toLowerCase(): //custom event - nécessite un physical event definition
cnx(elt).event.physicalEventAsClickDroit(); //définit les diverses actions physiques correspondantes au clickDroit event
elt.addEventListener(eventName, handler, propagation);//mettre un 3ième argument pour les autres navigateurs FF - optionnel au delà de la version 6 de FF}
break;
case "clavier".toLowerCase(): //custom event - nécessite un physical event definition
cnx(elt).event.physicalEventAsClavier(); //définit les diverses actions physiques correspondantes au clavier event
elt.addEventListener(eventName, handler, propagation);//mettre un 3ième argument pour les autres navigateurs FF - optionnel au delà de la version 6 de FF}
break;
default:
elt.addEventListener(eventName, handler, propagation);//mettre un 3ième argument pour les autres navigateurs FF - optionnel au delà de la version 6 de FF}
break;
}
}
}
else if(window.attachEvent){ // IE < 9 - && cnx().event.htmlEvents['on' + eventName]
return function(eventName, handler) {
var elt = this.getElt(); //retourne Object if exist
eventName = eventName.toLowerCase(); //met en minuscule le nom de l'évènement
if(eventName.indexOf("on") == 0) eventName = eventName.substring(2, eventName.length);//transforme onclick en click
switch(eventName) {
case "touchstart": case "mousedown":
if (claude.prototype.user.isMobile() ) elt.attachEvent("ontouchstart", handler);
else elt.attachEvent("onmousedown", handler);
break;
case "touchmove": case "mousemove":
if (claude.prototype.user.isMobile() ) elt.attachEvent("ontouchmove", handler);
else elt.attachEvent("onmousemove", handler);
break;
case "touchend": case "touchcancel": case "mouseup":
if (claude.prototype.user.isMobile() ) elt.attachEvent("ontouchend", handler);
else elt.attachEvent("onmouseup", handler);
break;
case "mousewheel": //onmousewheel - transmet une fonction spécifique haut/bas
if (elt == window) elt = document; //IE ne supporte pas window, seulement document
elt.attachEvent("on" + eventName,
function(){
var e = event; //var e = arguments[0] || event;
claude.prototype.event.mouseWheel(e, handler);
}
); //IE
break;
case "load": //l'Event onload s'applique à window, pas à document
window.attachEvent("on" + eventName, handler); //Ne pas oublier le "on" pour IE - il faut window et non pa sdocument pour IE
break;
case "tap".toLowerCase(): //custom event - nécessite un physical event definition
cnx(elt).event.physicalEventAsTap(); //définit les diverses actions physiques correspondantes au tap event
//elt['on' + eventName] = handler;
claude.prototype.event.onEvent(eventName, handler);
break;
case "clickDroit".toLowerCase(): //custom event - nécessite un physical event definition
cnx(elt).event.physicalEventAsClickDroit(); //définit les diverses actions physiques correspondantes au tap event
//elt['on' + eventName] = handler;
claude.prototype.event.onEvent(eventName, handler);
break;
case "clavier".toLowerCase(): //custom event - nécessite un physical event definition
cnx(elt).event.physicalEventAsClavier(); //définit les diverses actions physiques correspondantes au clavier event
//elt['on' + eventName] = handler;
claude.prototype.event.onEvent(eventName, handler);
break;
default:
elt.attachEvent("on" + eventName, handler); //Ne pas oublier le "on" pour IE
break;
}
}
}
else { //autre cas et les custom event pour IE<=8
return function(eventName, handler) {
var elt = this.getElt(); //retourne Object if exist
eventName = eventName.toLowerCase(); //met en minuscule le nom de l'évènement
if(eventName.indexOf("on") == 0) eventName = eventName.substring(2, eventName.length);//transforme onclick en click
switch(eventName) {
case "tap".toLowerCase(): //custom event - nécessite un physical event definition
cnx(elt).event.physicalEventAsTap(); //définit les diverses actions physiques correspondantes au tap event
//elt['on' + eventName] = handler;
claude.prototype.event.onEvent(eventName, handler);
break;
case "clickDroit".toLowerCase(): //custom event - nécessite un physical event definition
cnx(elt).event.physicalEventAsClickDroit(); //définit les diverses actions physiques correspondantes au tap event
//elt['on' + eventName] = handler;
claude.prototype.event.onEvent(eventName, handler);
break;
case "clavier".toLowerCase(): //custom event - nécessite un physical event definition
cnx(elt).event.physicalEventAsClavier(); //définit les diverses actions physiques correspondantes au clavier event
//elt['on' + eventName] = handler;
claude.prototype.event.onEvent(eventName, handler);
break;
default:
elt['on' + eventName] = handler;
break;
}
}
}
return false;
}();
Element.prototype.addEvents = function (eventNames, handler) { //ajoute plusieurs évènements à un objet
var elt = this.getElt(); //retourne Object if exist
var tabEventNames = eventNames.split(" "); //donne un array contenant le nom de chaque event à associer à elt
var eventName;
for (var x=0; x < tabEventNames.length; x++){ //liste chacun des évènements
eventName = tabEventNames[x];
elt.addEvent(eventName, handler); //affecte chaque event à elt
}
};
Element.prototype.removeEvent = function(eventName, handler){ // retire un event d'un objet
var elt = this.getElt(); //retourne Object if exist
var eventName = eventName.toLowerCase(); //met en minuscule le nom de l'évènement
if(eventName.indexOf("on") == 0) eventName = eventName.substring(2, eventName.length);//transforme onclick en click
if(elt.removeEventListener) { //IE>=9 et autre navigateur FF chrome opéra
if (cnx().user.FF && eventName == "mousewheel") eventName == "DOMMouseScroll"; // pour Firefox
elt.removeEventListener(eventName, handler, false);
}
else if(elt.detachEvent) elt.detachEvent("on" + eventName, handler); //pour IE <9
else{
elt['on'+type] = null;
}
};
Element.prototype.ready = function(handler){ //équivallent de $(document).ready(); pour compatibilité
/* -----------
En réalité la fonction $(document).ready(); est un raccourci pour onLoad
window.ready(function() { //équivalent à onload
var img = document.createElement("IMG");
img.src = "../images/warning.gif";
alert("voir ready dans cnx()");
document.body.appendChild(img);
});
---------------- */
if (handler) cnx().event.domReady(handler);
return false;
};
};
if (Window){ //window - Window - IE et Firefox pour toutes les versions! nota: window appartient également à la collection Object si IE>8
//log
Window.prototype.isWhat = function(){
alert(this + " est l'Object window - collection Window ");
};
//event
Window.prototype.ready = function(handler){
/* -----------
En réalité la fonction document.ready(); est un raccourci pour onLoad
document.ready(function() { //équivalent à onload
var img = document.createElement("IMG");
img.src = "../images/warning.gif";
alert("voir ready dans cnx()");
document.body.appendChild(img);
});
---------------- */
if (handler) cnx().event.domReady(handler);
return false;
};
Window.prototype.addEvent = function(eventName, handler){
/* -----------
document.addEvent("click", function(){affiche("essai3");} );
function affiche(texte){
alert("click sur document " + texte);
};
----------------- **/
cnx(this).event.addEvent(eventName, handler);
return false;
};
};
if (HTMLDocument){ //document - HTMLDocument existe sous IE<=8 et Firefox; si IE>8 voir Document
//log
HTMLDocument.prototype.isWhat = function(){
alert(this + " est l'Object document - collection HTMLDocument ");
};
HTMLDocument.prototype.isString = function(){ //teste si String
return Object.prototype.toString.call(this) == '[object String]'; //teste si l'Object est une String
};
HTMLDocument.prototype.getElt = function(){ //cherche un elt
var elt = this; //
var elt = ( elt.isString() ) ? document.getElementById(elt) : elt; //test si String et cherche alors Object HTML lié
if(elt == null){
if (this.toLowerCase() == "body") return document.body;
if (this.toLowerCase() == "document") return document;
if (this.toLowerCase() == "window") return window;
else return false;
}
return elt;
};
//event
HTMLDocument.prototype.ready = function(handler){
/* -----------
document.ready(function() { //équivalent à onload
var img = document.createElement("IMG");
img.src = "../images/warning.gif";
alert("voir ready dans cnx()");
document.body.appendChild(img);
});
---------------- */
if (handler) cnx().event.domReady(handler);
return false;
};
HTMLDocument.prototype.addEvent = function(){
/* -----------
document.addEvent("click", function(){affiche("essai3");} );
function affiche(texte){
alert("click sur document " + texte);
};
----------------- **/
if(window.addEventListener){ // IE >=9 et FF Chrome Opera... : elt.addEventListener
return function(eventName, handler) {
var elt = this.getElt(); //retourne Object if exist
var propagation = false;
eventName = eventName.toLowerCase(); //met en minuscule le nom de l'évènement
if(eventName.indexOf("on") == 0) eventName = eventName.substring(2, eventName.length);//transforme onclick en click
switch(eventName) {
/*
MSPointerOver
MSPointerOut
MSPointerHover
*/
case "mousedown": //pose prb avec FF si suivi d'un autre event - voir drag and drop
if ( handler.isObject() ){ //IE
elt.addEventListener(eventName, handler, propagation); //teste si object et pas function
//cnx(elt).event.onEvent("onmousedown", handler);
}
else { //FF et google chrome
elt.addEventListener(eventName, handler, propagation);
//cnx(elt).event.onEvent("onmousedown", handler); //appelle l'event suivant la méthode onmousedown pour Firefox
//le prb avec FF a disparu avec les nouvelles versions, nous gardons toutefois en mémoire le procédé pour le cas où!
}
break;
case "mousewheel": //onmousewheel - transmet une fonction spécifique haut/bas
elt.addEventListener('DOMMouseScroll',
function(){
var e = arguments[0]; //var e = arguments[0] || event;
claude.prototype.event.mouseWheel(e, handler);
},
false); //FF only - name event spécifique pour FF
elt.addEventListener(eventName,
function(){
var e = arguments[0] || event;
claude.prototype.event.mouseWheel(e, handler);
},
false);
break;
case "load": //l'Event onload s'applique à window, pas à document
window.addEventListener(eventName, handler, propagation); //Ne pas oublier le "on" pour IE
break;
case "touchstart": case "MSPointerDown".toLowerCase(): case "mousedown":
if (window.navigator.msPointerEnabled) elt.addEventListener("MSPointerDown", handler, propagation); //IE10
else if (claude.prototype.user.isMobile() ) elt.addEventListener("touchstart", handler, propagation);
else elt.addEventListener("mousedown", handler, propagation);
break;
case "touchmove": case "MSPointerMove".toLowerCase(): case "mousemove":
if (window.navigator.msPointerEnabled) elt.addEventListener("MSPointerMove", handler, propagation); //IE10
else if (claude.prototype.user.isMobile() ) elt.addEventListener("touchmove", handler, propagation);
else elt.addEventListener("mousemove", handler, propagation);
break;
case "touchend": case "MSPointerUp".toLowerCase(): case "touchcancel": case "mouseup":
if (window.navigator.msPointerEnabled) {
elt.addEventListener("MSPointerUp", handler, propagation); //IE10
}
else if (claude.prototype.user.isMobile() ) elt.addEventListener("touchend", handler, propagation);
else elt.addEventListener("mouseup", handler, propagation);
break;
case "tap".toLowerCase(): //custom event - nécessite un physical event definition
cnx(elt).event.physicalEventAsTap(); //définit les diverses actions physiques correspondantes au tap event
elt.addEventListener(eventName, handler, propagation);//mettre un 3ième argument pour les autres navigateurs FF - optionnel au delà de la version 6 de FF}
break;
case "clickDroit".toLowerCase(): //custom event - nécessite un physical event definition
cnx(elt).event.physicalEventAsClickDroit(); //définit les diverses actions physiques correspondantes au clickDroit event
elt.addEventListener(eventName, handler, propagation);//mettre un 3ième argument pour les autres navigateurs FF - optionnel au delà de la version 6 de FF}
break;
case "clavier".toLowerCase(): //custom event - nécessite un physical event definition
cnx(elt).event.physicalEventAsClavier(); //définit les diverses actions physiques correspondantes au clavier event
elt.addEventListener(eventName, handler, propagation);//mettre un 3ième argument pour les autres navigateurs FF - optionnel au delà de la version 6 de FF}
break;
default:
elt.addEventListener(eventName, handler, propagation);//mettre un 3ième argument pour les autres navigateurs FF - optionnel au delà de la version 6 de FF}
break;
}
}
}
else if(window.attachEvent){ // IE < 9 - && cnx().event.htmlEvents['on' + eventName]
return function(eventName, handler) {
var elt = this.getElt(); //retourne Object if exist
eventName = eventName.toLowerCase(); //met en minuscule le nom de l'évènement
if(eventName.indexOf("on") == 0) eventName = eventName.substring(2, eventName.length);//transforme onclick en click
switch(eventName) {
case "touchstart": case "mousedown":
if (claude.prototype.user.isMobile() ) elt.attachEvent("ontouchstart", handler);
else elt.attachEvent("onmousedown", handler);
break;
case "touchmove": case "mousemove":
if (claude.prototype.user.isMobile() ) elt.attachEvent("ontouchmove", handler);
else elt.attachEvent("onmousemove", handler);
break;
case "touchend": case "touchcancel": case "mouseup":
if (claude.prototype.user.isMobile() ) elt.attachEvent("ontouchend", handler);
else elt.attachEvent("onmouseup", handler);
break;
case "mousewheel": //onmousewheel - transmet une fonction spécifique haut/bas
if (elt == window) elt = document; //IE ne supporte pas window, seulement document
elt.attachEvent("on" + eventName,
function(){
var e = event; //var e = arguments[0] || event;
claude.prototype.event.mouseWheel(e, handler);
}
); //IE
break;
case "load": //l'Event onload s'applique à window, pas à document
window.attachEvent("on" + eventName, handler); //Ne pas oublier le "on" pour IE - il faut window et non pa sdocument pour IE
break;
case "tap".toLowerCase(): //custom event - nécessite un physical event definition
cnx(elt).event.physicalEventAsTap(); //définit les diverses actions physiques correspondantes au tap event
//elt['on' + eventName] = handler;
claude.prototype.event.onEvent(eventName, handler);
break;
case "clickDroit".toLowerCase(): //custom event - nécessite un physical event definition
cnx(elt).event.physicalEventAsClickDroit(); //définit les diverses actions physiques correspondantes au tap event
//elt['on' + eventName] = handler;
claude.prototype.event.onEvent(eventName, handler);
break;
case "clavier".toLowerCase(): //custom event - nécessite un physical event definition
cnx(elt).event.physicalEventAsClavier(); //définit les diverses actions physiques correspondantes au clavier event
//elt['on' + eventName] = handler;
claude.prototype.event.onEvent(eventName, handler);
break;
default:
elt.attachEvent("on" + eventName, handler); //Ne pas oublier le "on" pour IE
break;
}
}
}
else { //autre cas et les custom event pour IE<=8
return function(eventName, handler) {
var elt = this.getElt(); //retourne Object if exist
eventName = eventName.toLowerCase(); //met en minuscule le nom de l'évènement
if(eventName.indexOf("on") == 0) eventName = eventName.substring(2, eventName.length);//transforme onclick en click
switch(eventName) {
case "tap".toLowerCase(): //custom event - nécessite un physical event definition
cnx(elt).event.physicalEventAsTap(); //définit les diverses actions physiques correspondantes au tap event
//elt['on' + eventName] = handler;
claude.prototype.event.onEvent(eventName, handler);
break;
case "clickDroit".toLowerCase(): //custom event - nécessite un physical event definition
cnx(elt).event.physicalEventAsClickDroit(); //définit les diverses actions physiques correspondantes au tap event
//elt['on' + eventName] = handler;
claude.prototype.event.onEvent(eventName, handler);
break;
case "clavier".toLowerCase(): //custom event - nécessite un physical event definition
cnx(elt).event.physicalEventAsClavier(); //définit les diverses actions physiques correspondantes au clavier event
//elt['on' + eventName] = handler;
claude.prototype.event.onEvent(eventName, handler);
break;
default:
elt['on' + eventName] = handler;
break;
}
}
}
return false;
}();
};
if (!Array.prototype.filter){ //ajoute une fonction filter pour les Array() sous IE8
// trouvé sur : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/filter
Array.prototype.filter = function(fun /*, thisArg */) {
"use strict";
if (this === void 0 || this === null) throw new TypeError();
var t = Object(this);
var len = t.length >>> 0;
if (typeof fun != "function") throw new TypeError();
var res = [];
var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
for (var i = 0; i < len; i++){
if (i in t) {
var val = t[i];
// NOTE: Technically this should Object.defineProperty at
// the next index, as push can be affected by
// properties on Object.prototype and Array.prototype.
// But that method's new, and collisions should be
// rare, so use the more-compatible alternative.
if (fun.call(thisArg, val, i, t)) res.push(val);
};
};
return res;
};
};
};
var autoexec = function(){
;
}(); // fonction auto éxécution
})();
| |