objetDiv.style.overflow= "scroll"; //ajoute les ascenseurs
objetDiv.style.visibility = "hidden";
objetDiv.style.borderColor = "Red";
objetDiv.style.borderStyle = "solid";
objetDiv.style.borderWidth = "1px";
document.body.appendChild(objetDiv);
objetDiv.setDrag();
}
};
//end of private section
return { //public section
print: function(str_print){
/* ----------------------------------------
code de la div asociée:
cnx().trace.debug = true; //ne s'affiche que si cnx(this.elt).trace.debug = true
cnx("id_print").trace.print(data);
----------------------------------------- */
init(); //créer la div si elle n'existe pas
if (cnx(this.elt).trace.debug){ //ne s'affiche que si debug est vrai!
objetDiv.style.visibility="visible"; //rend visible la
automatiquement
var ecriture = objetDiv.innerHTML;
ecriture = str_print + "
" + ecriture;
objetDiv.innerHTML = ecriture;
} else objetDiv.style.visibility = "hidden";
},
setTop: function(str_value){
cnx(this.elt).trace.init(); //créer la div si elle n'existe pas
claude.prototype.style.setTop(str_value, objetDiv);
},
debug: false, //cnx(this.elt).trace.debug = true; pour afficher; ne sert à rien ici, mémorisation du process!
fin: "" // cnx().trace.fin
}; //end of return
})(), //end of trace - la fonction anonyme est en auto exécution, elle n'admet pas de paramètre
fin:""
};
cnx.prototype.add = {
b2: "voir",
end: ""
};
claude.prototype.divers = { // this ne fonctionne pas dans ces fonctions claude.prototype.xxx = {};
version: "version 2013-09-03",
cnxArg: "vide", //mémorisation du contenu de getElt()
cnxClassPHP: "../2013_09/cnx_class_2013_09.php", //adresse de la classe php - appel Ajax
author: "claudecnx jpconnexion",
licence: '
Licence ',
cnxFalse: "elt pas trouvé, equivaut à false",
arg: function(){
return claude.prototype.divers.cnxArg;
},
moisCourt: new Array(),
moisLong: new Array(),
jourCourt: new Array(),
jourLong: new Array(),
traductionDate: function(){
claude.prototype.divers.moisCourt["US"] = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
claude.prototype.divers.moisCourt["FR"] = new Array('Jan', 'Fév', 'Mars', 'Avr', 'Mai', 'Jui', 'Juil', 'Août', 'Sept', 'Oct', 'Nov', 'Déc');
claude.prototype.divers.moisCourt["GE"] = new Array("Jan", "Feb", "März", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez");
claude.prototype.divers.moisCourt["IT"] = new Array("Gen", "Feb", "Mar", "Apr", "Mag", "Giu", "Lug", "aot", "Set", "Ott", "Nov", "Dic");
claude.prototype.divers.moisCourt["SP"] = new Array("Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "aot", "Sep", "Oct", "Nov", "Dic");
claude.prototype.divers.moisLong["US"] = new Array("January", "February", "March", "April", "May", "June", "Jully", "August", "September", "October", "November", "December");
claude.prototype.divers.moisLong["FR"] = new Array('Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre');
claude.prototype.divers.moisLong["GE"] = new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Jul", "August", "September", "Oktober", "November", "Dezember"); //German
claude.prototype.divers.moisLong["IT"] = new Array("Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "aot", "Settembre", "Ottobre", "Novembre", "Dicembre"); //Italian
claude.prototype.divers.moisLong["SP"] = new Array("Enero", "Febrero", "Marcha", "Abril", "Mayo", "Junio", "Julio", "aot", "Septiemre", "Octubre", "Noviemb", "Diciembre"); //Spanish
claude.prototype.divers.jourCourt["US"] = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");
claude.prototype.divers.jourCourt["FR"] = new Array("Dim","Lun","Mar","Mer","Jeu","Ven","Sam");
claude.prototype.divers.jourCourt["GE"] = new Array("Son", "Mon", "Dien", "Mit", "Don", "Frei", "Sam");
claude.prototype.divers.jourCourt["IT"] = new Array("Dom", "Lun", "Mar", "Mer", "Gio", "Ven", "Sab");
claude.prototype.divers.jourCourt["SP"] = new Array("Dom", "Lun", "Mar", "Miér", "Jue", "Vier", "Sáb");
claude.prototype.divers.jourLong["US"] = new Array("Sunday", "Monday", "Tuesday", "Wedesday", "Thusday", "Friday", "Saturday");
claude.prototype.divers.jourLong["FR"] = new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");
claude.prototype.divers.jourLong["GE"] = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"); //German
claude.prototype.divers.jourLong["IT"] = new Array("Domenica", "Lunedi", "Martedì", "Mercoledì", "Giovedi", "Venerdì", "Sabato"); //italian
claude.prototype.divers.jourLong["SP"] = new Array("Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"); //Spanish
},
fin: ""
};
claude.prototype.dom = { // gestion du DOM et nodes éléments
appendChild: function(child){ // ajoute un enfant à un parent
/* ----------------------------
Ajoute un élément enfant (child) à un élément parent
cnx(document.body).dom.appendChild(child);
si utilisé entre les balises se comporte comme un document.write()
----------------------------- */
var parent = claude.prototype.dom.getElt(); //recherche elt HTML si String passé en paramètre
if (!parent) parent = document; //valeur par défaut
if (parent == window) parent = document; //ainsi on peut utiliser cnx(window).dom.appendChild(enfant); ou cnx(document).dom.appendChild(enfant);
if (parent == document){
if (!document.body){ //document.body n'existe pas encore, nous sommes dans les balises
var parent = claude.prototype.dom.doAncrage(); //génère un point d'ancrage via document.write
} //equivallent à document.write dans la balise
else parent = document.body; //pour écrire, il faut document.body et non pas document
}
parent.appendChild(child); //ajoute child au conteneur parent
return child; //retourne child - enfant
},
appendTo: function(parent, child){ // désué, ne plus employer, utiliser dom.appendChild() - ajoute un enfant à un parent
/* ----------------------------
Ajoute un élément enfant (child) à un élément parent
parent = (parent)? parent: document.body;
cnx().dom.appendTo(child, document.body);
----------------------------- */
if (!parent) return false;
if (parent === document.body){ // le parent est document.body; c'est à dire la page web
if (document.readyState != "complete"){ // le document n'est pas encore complètement chargé
var prefix = claude.prototype.log.generatePassword(16); //nombre aléatoire
var id = prefix + "_id_jpCnx_DOM_" + "ancrage";
var ancrage = '
';
document.write(ancrage); //crée un ancrage dans le document en cours d'élaboration
var parent = document.getElementById(id); //cet ancrage devient un parent
}
if (document.readyState === "complete") var parent = document.body; //child sera ajouté à la fin du document!
}
var parent = cnx(parent).dom.getElt(); //recherche elt HTML si String passé en paramètre
parent.appendChild(child);
return child;
},
doAncrage: function(appli){ //crée un ancrage dans la page web
var prefix = claude.prototype.log.generatePassword(16); //nombre aléatoire
var appli = (appli) ? "ancrage"+appli : "ancrage"; //ajoute le nom de l'application à l'id - optionnel!
var id = prefix + "_id_jpCnx_DOM_" + appli;
var ancrage = '
ancrage '; //pour IE il faut un texte par défaut, autyrement l'élément est null!
document.write(ancrage); //crée un ancrage dans le document en cours d'élaboration
var parent = document.getElementById(id); //cet ancrage devient un parent
parent.innerHTML = ""; //vide le texte de ancrage - laisse la place à child pour l'affichage
return parent;
},
removeElt: function (){ //détruit un élément
var elt = claude.prototype.dom.getElt(); //retourne Object if exist
if (!elt) return false; // si elt n'existe pas retourne false
var parent = cnx(elt).dom.getParent(1); //recherche le parent
parent.removeChild(elt); //retire l'enfant, donc le détruit
return true;
},
listeProp: function (){ //lit et affiche toutes les propriétés d'un élément HTML
var elt = claude.prototype.dom.getElt(); //retourne Object if exist
var liste;
for (prop in elt) {
liste += "Propriété : " + prop + " -> " + elt[prop] + "\n
";
}
return liste;
},
changeId: function(ancienID, newID){ // modifie l'id d'un élément
var elt = document.getElementById(ancienID);
if (elt == null) return false; //il faut !null pour IE
elt.id = newID;
return elt.id;
},
getNodeInfos: function (tagName) { //affiche des informations choisies sur un elt et ses enfants
/* cnx(elt) est correct; claude.prototype retourne une valeur erronée! */
var elt = claude.prototype.dom.getElt(); //retourne Object if exist
var Container = "Object: "+elt.nodeName +" / "+elt;
var Identifiant = "\n has for id : " + elt.id;
var Parent = cnx(elt).dom.getParent() ? "\n has for Parent: "+cnx(elt).dom.getParent().nodeName + " / "+ cnx(elt).dom.getParent() : "\n #document has no Parent";
var GrandParent = cnx(elt).dom.getParent(2) ? "\n has for Grand-Parent: "+ cnx(elt).dom.getParent(2).nodeName + " / "+ cnx(elt).dom.getParent(2) : "\n #document has not Grand-Parent";
var Children = "\n has " + cnx(elt).dom.getChilds(false) +" children"; //cnx(elt) et prototype ne donne pas le m^me résultat !!!
var Attributs = "\n has "+ cnx(elt).dom.getAttributes(false)+" attributes : " ;
var Type = "\n is type : " + cnx(elt).dom.getType() + " / " + elt.nodeType;
var Contents = "\n it's contents : " + cnx(elt).dom.getContents();
if (!tagName) alert(Container+Identifiant+Parent+GrandParent+Children+Attributs+Type+Contents + "\n Search Mode: all Tag"); //liste tous les elt si tagName est faux
if( (tagName) && (tagName.toLowerCase() == elt.nodeName.toLowerCase() ) ) alert(Container+Identifiant+Parent+GrandParent+Children+Attributs+Type+Contents + "\n Search in Tag : " + elt.nodeName); //ne liste que les elt correspondant à la balise tagName
for (var i = 0; i < elt.childNodes.length; i++) {
var child = elt.childNodes[i];
cnx(child).dom.getNodeInfos(tagName); //affiche les informations pour chaque enfant
}
return elt.childNodes.length; // retourne le nombre d'enfants
},
getContents: function(){// retourne le contenu d'un élément
var elt = claude.prototype.dom.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;
},
getType: function(){ // retourne le type d'un élément
var elt = claude.prototype.dom.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;
},
getChilds: function(logique){// retourne le nombre d'enfants d'un élément HTML ou un Array() contenant les enfants
/*
var n = cnx(elt).dom.getChilds(false); //retourne le nombre d'enfants
var tab = cnx(elt).dom.getChilds(true); //retourne un Array() contenant la liste des enfants; utiliser split() pour le détail
for (var i=0; i
"); //nodeValue
}
*/
var elt = claude.prototype.dom.getElt(); //retourne Object if exist
var tab = new Array();
for (var i = 0; i < elt.childNodes.length; i++) {
tab[i] = elt.childNodes[i]; //penser à string.split(separateur)
}
if (logique) return tab; //penser à string.split(separateur)
else return i; //retourne le nombre d'enfants d'un élément HTML; elt.childNodes.length ne retourne rien! Donc il faut i!!!
},
getTypeChilds: 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 = cnx(elt).dom.getTypeChilds(3); //recherche tous les enfants de type TEXT_NODE = 3
for (var i=0; i"); //nodeValue
}
------------------- */
var type = (type) ? type: false;
switch(type){
case "ELEMENT_NODE":
type = 1;
break;
case "ATTRIBUTE_NODE":
type = 2;
break;
case "TEXT_NODE":
type = 3;
break;
}
var elt = claude.prototype.dom.getElt(); //retourne Object if exist
var tab = new Array();
var node;
for (var i = 0; i < elt.childNodes.length; i++) {
node = elt.childNodes[i];
//alert(type +" : "+ node.nodeType);
if (type && node.nodeType == type) tab.push(node);
if(!type) tab.push(node); //pas de type , donc on retourne tous les enfants
}
return tab;
},
hasAttribute: function(nameAttribut){ //teste si un elt possède un attribut; renvoie la valeur de l'attribut si trouvé
/* -----------------
var valeurAttribut = cnx(elt).dom.hasAttribute("nameAttribut");
--------------- */
var elt = claude.prototype.dom.getElt(); //retourne Object if exist
if (!elt.attributes) return claude.prototype.divers.cnxFalse;
/* - pour lister les attributs faire:
var tab = cnx(elt).dom.getAttributes(true); //retourne un Array() contenant la liste des attributs; utiliser split() pour le détail
if (tab){
for (var i=0; i");
}
}
-- */
for (var i=0; i < elt.attributes.length; i++){
if(elt.attributes[i].nodeName == nameAttribut) return elt.attributes[i].value; //retourne la valeur de l'attribut si il existe
}
return claude.prototype.divers.cnxFalse;
},
getAttributes: function(logique){// retourne le nombre d'attributs ou un tableau avec les attributs
/* ------------
var n = cnx(elt).dom.getAttributes(false); //retourne le nombre d'attributs
if (n) alert(n + " attributs");
var tab = cnx(elt).dom.getAttributes(true); //retourne un Array() contenant la liste des attributs; utiliser split() pour le détail
if (tab){
for (var i=0; i");
}
}
----------------- */
var elt = claude.prototype.dom.getElt(); //retourne Object if exist
if (!elt.attributes) return claude.prototype.divers.cnxFalse; //remplace false ou 0 pour éviter de faux teste si la valeur de l'elt est juste false ou 0
if (!logique) return elt.attributes.length; //retourne le nombre d'attributs
else {
var tab = new Array();
for (var i=0; i < elt.attributes.length; i++){
tab[i] = elt.attributes[i].nodeName + "=>" +elt.attributes[i].value; //penser à string.split(separateur) - nodeValue est remplacé par value
}
return tab;
}
},
getParent: function(niv){// renvoi l'élément parent quelque soit son tag, juste le parent ou grand parent - ex nodeParent()
/*----------------------------------------------------
Permet de récupérer l'élément parent
- niv: niveau du parent à récupérer, optionnel permet de chercher un grand parent!
exemple d'utilisation:
var parent_table = cnx(elt).dom.getParent(false); //retourne la row
avec nodeName retourne le nom de l'élément et "BODY" pour document.body
---------------------------------------------------- */
var elt = claude.prototype.dom.getElt(); //retourne Object if exist
(!niv) ? niv=1 : niv=niv;// On initialise le niveau à 1 si besoin est.
if (elt.nodeName == "#document") return document.nodeName; // "#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 cnx(elt.parentNode).dom.getParent(niv -= 1);
} else {
return elt.parentNode; // retourne l'objet.
}
},
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 = cnx(elt).dom.getTagParent("TABLE", false, objetCellule); //retourne la parent
var parent_table = cnx(elt).dom.getTagParent("TABLE", 1, objetCellule); //retourne la parent
var parent_table = cnx(objetCellule).dom.getTagParent("TABLE"); //retourne la parent
---------------------------------------------------- */
var elt = claude.prototype.dom.getElt(); //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.parentNode.nodeName == "#document") 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
return cnx(elt.parentNode).dom.getTagParent( tagName, niv);
} else if (niv!=1 && elt.parentNode.parentNode.nodeName==tagName){ // Si le nombre de niveaux demandé n'est pas atteint et qu'il reste des balises correspondantes on continue
return cnx(elt.parentNode).dom.getTagParent( tagName, niv-=1);
} else {
return elt.parentNode; // Sinon on renvoie l'id de la balise correspondante
}
},//
getFirstChild: function (tagName){ //retourne le premier tagName parmi la collection des tagName d'un elt, soit tagName[0]
var elt = claude.prototype.dom.getElt(); //retourne Object if exist
if (elt && !tagName) return elt.firstChild ? elt.firstChild : false;
var tagName = tagName.toUpperCase();
var elts = elt.getElementsByTagName(tagName);
return elts && elts.length > 0 ? elts[0] : false;
},
getTagName: function(){
var elt = claude.prototype.dom.getElt(); //retourne Object if exist
return elt.tagName;
},
getElt: function (){ // retourne un objet même si id fournit
/* ---------------
cnx(elt).dom.getElt();
-------------- */
var elt = claude.prototype.divers.cnxArg; //Récupère la valeur pasée en paramètre de cnx()
var elt = (typeof elt === "string") ? document.getElementById(elt) : elt; //test si String et cherche alors Object HTML lié
//nota: on ne peut pas utiliser elt.getElt(); pas encore actif dans ce fichier, même en entête!
//var elt = elt.getElt();
return elt; //return null si getElementById() = null; return false si elt = false; return true si elt = true;
},
fin:""
}; //end of dom()
claude.prototype.event = { // gestion des évènements
mouseWheel: function (e, handler){ // Event handler for mouse wheel event - DOMMouseScroll
/** --------------------
script trouvé sur:
http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel
http://www.adomas.org/javascript-mouse-wheel/
http://ajaxian.com/archives/javascript-and-mouse-wheels
Nous bloquons le scroll à la souris volontairement car nous détournons l'event
Pour le calculer en simulation utiliser window.scrollBy(horizontal, vertical);
----------------------- */
var e = e ? e : window.event;
var wheelData = e.detail ? e.detail * -1 : e.wheelDelta / 40; //mvt du scroll
if (wheelData) eval("handler(e, wheelData)"); //appel de la function associée: func(e, delta) - delta>0 scroll Up - delta<0 scroll down
if (!navigator.IE) e.preventDefault(); //inhibbe le scroll si besoin
return false; //return false sous IE inhibbe le scroll associé à mousewheel, donc même effet que e.preventDefault() sous firefox
/* ----------------------
pour retouver le mouvement du scroll faire dans la fonction handler
window.scrollBy(horizontal, vertical);
typiquement dans la fonction handler() écrire:
if (navigator.IE) window.scrollBy(0, delta); //scrollBy(horizontal, vertical)
else window.scrollBy(0, -delta*10); //firefox
-------- */
}, //
cancelEvent: function(e) { // arrête l'exécution d'un event ex: scroll wheel
var e = e ? e : window.event;
if(e.stopPropagation) e.stopPropagation();
if(e.preventDefault) e.preventDefault();
e.cancelBubble = true;
e.cancel = true;
e.returnValue = false;
return false;
}, //
onEvent: function(eventName, handler){ // affecte un event avec la méthode on...
/* -----------------
normalement cette fonction est appelée par claude.prototype.event.addEvent()
mais elle peut aussi être appelée directement
---------------------- */
var elt = claude.prototype.dom.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
var oldEvent = elt["on" + eventName]; //mémorise les anciens évènements déjà appliqués: elt.onmousedown
if (typeof oldEvent != "function") elt["on" + eventName] = handler; //applique directement la function
else {
elt["on" + eventName] = function() {
if (oldEvent) oldEvent(); //applique les anciens event
handler(); //ajoute le nouvel event
}
}
}, //
addEvents: function (eventNames, handler) { //ajoute plusieurs évènements à un objet
var elt = claude.prototype.dom.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];
claude.prototype.event.addEvent(eventName, handler);
}
},
addEvent: function () { //ajoute un ou des évènements à un objet
/* ---------------------
//elt est soit un objet soit un id d'un objet (donc string id)
//eventName est de type string "load" ou "onLoad" pour onload
//handler est le nom de la fonction - Om peut écrire affiche
//exemple: cnx(window).event.addEvent( "load", affiche);
//function affiche() { alert(1); }
//cnx(window).event.addEvent( "load", function(){affiche(param);});
--------------------------- */
//ne rien écrire ici, pas pris en compte, en fait la fonction commence après le return
if(window.addEventListener){ // IE >=9 et FF Chrome Opera... : elt.addEventListener
return function(eventName, handler) {
var elt = claude.prototype.dom.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 ( claude.prototype.log.isObject(handler) ){ //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
claude.prototype.event.physicalEventAsTap(elt); //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
claude.prototype.event.physicalEventAsClickDroit(elt); //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
claude.prototype.event.physicalEventAsClavier(elt); //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 = claude.prototype.dom.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
claude.prototype.event.physicalEventAsTap(elt); //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
claude.prototype.event.physicalEventAsClickDroit(elt); //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
claude.prototype.event.physicalEventAsClavier(elt); //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 = claude.prototype.dom.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
claude.prototype.event.physicalEventAsTap(elt); //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
claude.prototype.event.physicalEventAsClickDroit(elt); //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
claude.prototype.event.physicalEventAsClavier(elt); //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;
}(),
removeEvent: function(eventName, handler){ // retire un event d'un objet
var elt = claude.prototype.dom.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;
}
},
getEvent: function(e){//retourne l'évènement
if (!window.addEventListener) e = window.event; //IE <9 ne retourne pas (e); offre une propriété window.event
return e; // e.type fourni le type de l'évènement: ex mousedown
},
getTarget: function(e){ //renvoie la cible d'un évènement
var cible;
if (!window.addEventListener) var e = window.event; //IE ne returne pas (e) mais offre une propriété window.event
if (e == null) return null;
if (e.target) cible = e.target;
else if (e.srcElement) cible = e.srcElement;
if (cible.getType == 3) cible = cible.parentNode; // defeat Safari bug
return cible;
/* ------------------------------------------
cible.id //identificateur de l'objet si il existe
cible.name //nom de l'objet ou undefined
cible.tagName //type de l'objet input, body H1 p ...
cible.object //confirme que sa nature est un objet, fourni l'objet lui-même cad cible en fait!
--------------------------------------- */
},
getType: function(e){ //renvoi le type de l'Event
if (!window.addEventListener) e = window.event; //IE ne returne pas (e)
if (e == null) return null;
return e.type;
},
getName: function(e){ //renvoie le nom de l'évènement
if (!window.addEventListener) e = window.event; //IE ne returne pas (e)
if (e == null) return null;
return e.eventName;
},
isLeft: function(e){
var isleftbutton = (window.event)? (window.event.button==1): (e.type=="mousedown")? (e.which==1): false;
return isleftbutton; //ex si bouton.right=true alors bouton droit cliqué
},
isRight: function(e){
var isrightbutton = (window.event)?(window.event.button==2): (e.which==3); //window.event pour browser clone IEX et e.which pour browser clone FF
return isrightbutton; //ex si bouton.right=true alors bouton droit cliqué
},
isMiddle: function(e){
var ismiddlebutton = (window.event)? ((window.event.button==3) || (window.event.button==4)): (e.which==2);
return ismiddlebutton; //ex si bouton.right=true alors bouton droit cliqué
},
clientX: function(e){
var clientX = (!window.addEventListener) ? (window.event.clientX) : (e.clientX);// Position horizontale sur le client
return clientX;
},
clientY: function(e){
var clientY = (!window.addEventListener) ? (window.event.clientY) : (e.clientY);// Position verticale sur le client
return clientY;
},
screenX: function(e){
var screenX = (!window.addEventListener) ? (window.event.screenX) : (e.screenX);// Position horizontale à l'ecran du pointeur de la souris
return screenX;
},
screenY: function(e){
var screenY = (!window.addEventListener) ? (window.event.screenY) : (e.screenY);// Position verticale à l'ecran du pointeur de la souris
return screenY;
},
pageScrollX: function(e){ //pageX avec le scroll pour IE: X correspond à left
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
}
var pageX = (!window.addEventListener) ? (window.event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft) : (e.pageX) || e.targetTouches[0].pageX;// Position horizontale sur la page du pointeur de la souris - || window.event.targetTouches[0].pageX n'existe pas apparemment
return pageX; //position par rapport à left
},
pageScrollY: function(e){ //pageY avec le scroll pour IE: Y correspond à top
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
}
var pageY = (!window.addEventListener) ? (window.event.clientY + document.body.scrollTop + document.documentElement.scrollTop) : (e.pageY) || e.targetTouches[0].pageY;// Position verticale sur la page du pointeur de la souris - || window.event.targetTouches[0].pageY n'est pas apparemment
return pageY; //position par rapport à top
},
pageX: function(e){ //sous IE ne tient pas compte du scroll, utiliser pageScrollX pour coordonnées avec le scroll
if (e) e.preventDefault(); // the default behaviour is scrolling - impératif avec IE10 et les tablettes!
var pageX = (!window.addEventListener)?(window.event.clientX || window.event.targetTouches[0].pageX): (e.pageX) || e.targetTouches[0].pageX;;// Position horizontale sur la page du pointeur de la souris
return pageX;
},
pageY: function(e){ //sous IE ne tient pas compte du scroll, utiliser pageScrollY pour coordonnées avec le scroll
if (e) e.preventDefault(); // the default behaviour is scrolling - impératif avec IE10 et les tablettes!
var pageY = (!window.addEventListener)?(window.event.clientY || window.event.targetTouches[0].pageY): (e.pageY) || e.targetTouches[0].pageY;;// Position verticale sur la page du pointeur de la souris
return pageY;
},
ismousedown: function(e){
var rep; //variable pour la réponse
var nomEvent = claude.prototype.event.getType(e); //nom ou type du dernier Event
(nomEvent == "mousedown")? rep=true: rep=false; //vrai si Event = mousedown
return rep;
},
ismouseup: function(e){
var rep; //variable pour la réponse
var nomEvent = claude.prototype.event.getType(e); //nom ou type du dernier Event
(nomEvent == "mouseup")? rep=true: rep=false; //vrai si Event = mousedown
return rep;
},
ismousemove: function(e){
var rep; //variable pour la réponse
var nomEvent = claude.prototype.event.getType(e); //nom ou type du dernier Event
(nomEvent == "mousemove")? rep=true: rep=false; //vrai si Event = mousedown
return rep;
},
isclick: function(e){
var rep; //variable pour la réponse
var nomEvent = claude.prototype.event.getType(e); //nom ou type du dernier Event
(nomEvent == "click")? rep=true: rep=false; //vrai si Event = mousedown
return rep;
},
isdblclick: function(e){
var rep; //variable pour la réponse
var nomEvent = claude.prototype.event.getType(e); //nom ou type du dernier Event
(nomEvent == "dblclick")? rep=true: rep=false; //vrai si Event = mousedown
return rep;
},
iscontextmenu: function(e){
var rep; //variable pour la réponse
var nomEvent = claude.prototype.event.getType(e); //nom ou type du dernier Event
(nomEvent == "contextmenu")? rep=true: rep=false; //vrai si Event = mousedown
return rep;
},
mousemove_afficheCoord: function(e){ //affiche les coord de la souris qui suivent le curseur de la souris
/* -----------------------------
pour initialiser ce fonctionnement faire:
cnx().event.initCoord();
ou encore:
cnx().event.postCoord = true; //active le mode suivi coordonnées souris
cnx(document).event.addEvent( "mousemove", cnx().event.mousemove_afficheCoord, false); //document.onmousemove = mousemove_afficheCoord; - charge le mode suivi coordonnées souris
------------------------------------ */
if (!document.getElementById("cnxMouseCoordId") && claude.prototype.event.postCoord == true && document.body){ // || ou &&
var cnxMouseCoord = document.createElement("div");
cnxMouseCoord.id = "cnxMouseCoordId";
cnxMouseCoord.style.position = "absolute";
cnxMouseCoord.style.visibility = "hidden";
cnxMouseCoord.style.zIndex = 100; //reste visible même au survol des autres objet sauf si leur propriété z-index > 100
document.body.appendChild(cnxMouseCoord);
}
var cursor = document.getElementById("cnxMouseCoordId");
if (claude.prototype.event.postCoord == true){
cursor.style.visibility = "visible";
cursor.style.backGroundColor = "Transparent";
cursor.innerHTML = "Left: "+claude.prototype.event.pageScrollX(e) + "px"+ " Top: "+claude.prototype.event.pageScrollY(e) + "px"; //Left
cursor.style.top = claude.prototype.event.pageScrollY(e) + 1 + "px"; //décalage pour even mouseover et lecture
cursor.style.left = claude.prototype.event.pageScrollX(e) + 1 + "px";
}
else cursor.style.visibility = "hidden";
return false;
},
initCoord: function(){ //initialise la lecture des coordonnées de la souris
claude.prototype.event.postCoord = true;
cnx(document).event.addEvent( "mousemove", cnx().event.mousemove_afficheCoord, false); //document.onmousemove = mousemove_afficheCoord;
},
ready: function(handler){ //équivallent de $(document).ready(); pour compatibilité
/* -----------
En réalité la fonction $(document).ready(); est un raccourci pour onLoad
cnx().event.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(window).event.addEvent("load", handler);
return false;
},
setTimeout: function(func, duree){
/* ----------------
cnx().event.setTimeout(fonction, durée);
cnx().event.setTimeout(fonction(param), durée);
cnx().event.setTimeout(function(){fonction(param);}, durée);
------------------- */
if (cnx().log.isNull(func)) func = function(){func;}; //si func(param) alors isNull est true, il faut donc écrire function(){func(param);}
var cnxStopTimeout = setTimeout(func, duree);
return cnxStopTimeout;
},
setInterval: function(func, duree){
/* ----------------
cnx().event.setTimeout(fonction, durée);
cnx().event.setTimeout(fonction(param), durée);
cnx().event.setTimeout(function(){fonction(param);}, durée);
------------------- */
if (cnx().log.isNull(func)) func = function(){func;}; //si func(param) alors isNull est true, il faut donc écrire function(){func(param);}
var cnxStopInterval = setInterval(func, duree);
return cnxStopInterval;
},
isEvent: function (eventName){ //eventName as String - teste si le DOM gère eventName
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
eventName = "on"+eventName; //écrit onclick
return eventName in document.documentElement; //click fonctionne aussi bien que onclick par contre seul onmousewheel nécessite le "on"
},
htmlEvents: {// list of real events
// and Events
onload:1,
onunload:1,
//Form Events
onblur:1,
onchange:1,
onfocus:1,
onreset:1,
onselect:1,
onsubmit:1,
//Image Events
onabort:1,
//Keyboard Events
onkeydown:1,
onkeypress:1,
onkeyup:1,
//Mouse Events
onclick:1,
ondblclick:1,
onmousedown:1,
onmousemove:1,
onmouseout:1,
onmouseover:1,
onmouseup:1,
onmousewheel:1
},
triggerEvent: function (eventName){ //événement qui provoque l'exécution d'un algorithme.
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
var elt = claude.prototype.dom.getElt(); //recherche elt HTML si String passé en paramètre
//alert(elt);
var event;
if (typeof CustomEvent === "function") { //firefox
//alert("CustomEvent Firefox");
event = new CustomEvent(eventName, {
bubbles: true,
cancelable: true
});
}
else if(document.createEvent){
//alert("createEvent");
event = document.createEvent('HTMLEvents');
event.initEvent(eventName, true, true);
}
else if(document.createEventObject){ // IE < 9
//alert("trigger createEventObject() IE8 " + elt + " id: " + elt.id + " eventName :" + eventName);
event = document.createEventObject();
event.eventType = eventName;
}
event.eventName = eventName;
if(elt.dispatchEvent){
//alert("dispatchEvent Firefox");
elt.dispatchEvent(event);
}
else if(elt.fireEvent && claude.prototype.event.htmlEvents['on'+eventName]){// IE < 9
//alert("fireEvent");
elt.fireEvent('on'+event.eventType, event);// can trigger only real event (e.g. 'click')
}
else if(elt[eventName]){
//alert("[eventName]");
elt[eventName]();
}
else if(elt['on'+eventName]){
//alert("on eventName IE8");
elt['on'+eventName]();
}
return event; //retourne l'event
},
physicalEventAsTap: function (elt){
var elt = elt.getElt();
var touchStarted = false;
var cachedX = false;
var cachedY = false;
var currX = false;
var v = false;
var touchStarted = false, // detect if a touch event is sarted
currX = 0,
currY = 0,
cachedX = 0,
cachedY = 0;
var isMobile = claude.prototype.user.isMobile(); //FF mobile détecte touchstart et mousedown ce qui provoque un double appel
if (isMobile) elt.addEvent('touchstart', appelTap); //setting the events listeners
else {
elt.addEvent('click', appelTap); //si l'appareil n'est pas mobile tap est un click
}
elt.addEvents('touchend touchcancel',function (e){
touchStarted = false; // here we can consider finished the touch event
});
elt.addEvent('touchmove',function (e){
if(touchStarted) { // here you are swiping -
}
});
function appelTap(e){
var e = cnx().event.getEvent(e);
var type = cnx().event.getType(e);
if (type == "click") {
elt.triggerEvent("tap"); //Trigger customEvent - Here you get the tap event
return false; //stoppe la fonction
}
cachedX = e.pageX; // caching the current x
cachedY = e.pageY; // caching the current y
touchStarted = true; // a touch event is detected
//elt.innerHTML = 'Touchstarted'; // -
setTimeout(function (){ // detecting if after 200ms the finger is still in the same position
currX = e.pageX;
currY = e.pageY;
if ((cachedX === currX) && !touchStarted && (cachedY === currY)) {
elt.triggerEvent("tap"); //Trigger customEvent - Here you get the tap event
}
},200);
}
},
physicalEventAsClickDroit: function (elt){ //associe le custom event à une combinaison d'évènements physiques
var elt = elt.getElt();
elt.addEvent("mousedown",function (e){ //setting the events listeners
var e = cnx().event.getEvent(e);
var droit = cnx().event.isRight(e);
if (droit) {
//alert("click droit in mousedown");
elt.triggerEvent("clickDroit"); //Trigger customEvent - Here you get the tap event
}
});
},
physicalEventAsClavier: function (elt){ //associe le custom event à une combinaison d'évènements physiques
/* --------------------
document.addEvent("clavier", eventclavier);
function eventclavier(e){
var touche = cnx().clavier.charCode; //touche appuyée en format texte - as String
var code = cnx().clavier.keyClavier;
}
----------------------- */
var elt = elt.getElt();
elt.addEvent("keydown", function (e){
var e = cnx().event.getEvent(e);
claude.prototype.clavier.initClavier(e);
var type = cnx().event.getType(e);
cnx(elt).event.triggerEvent("clavier");
});
elt.addEvent("keypress", function (e){
var e = cnx().event.getEvent(e);
claude.prototype.clavier.initClavier(e);
var type = cnx().event.getType(e);
cnx(elt).event.triggerEvent("clavier");
});
elt.addEvent("keyup", function (e){
var e = cnx().event.getEvent(e);
claude.prototype.clavier.initClavier(e);
var type = cnx().event.getType(e);
cnx(elt).event.triggerEvent("clavier");
});
},
postCoord: false, //cnx().event.postCoord = true; pour afficher les coordonnées de la souris
fin:""
}; //end of event
claude.prototype.clavier = {
/* ----------------------------------------------------
* Developpée par jpconnexion depuis
* clavier.js
* Role : capture et gere les evenements clavier
* Projet : JsLib
* Auteur : Etienne CHEVILLARD (echevillard@users.sourceforge.net)
Mettre cnx().clavier.initClavier() dans la fonction handler de vos event keydown, keypress et keyup
-------------------------------------------------------- */
keyCode: false, //code du dernier évènement clavier - keyCode ou e.which
keyClavier: false, //sert à gérer les touches spéciales et la différence de réponse entre keyDown et keyPress
isShift: false, //une action sur la touche Shift est détectée
isCtrl: false, //une action sur la touche Ctrl est détectée
isAlt: false, //une action sur la touche alt est détectée
isAltGr: false, //une action sur la touche altGr est détectée
charCode: false, //la touche appuyée en texte (ASCII) y compris pour les touches spéciales ou de fonctions
isKeyDown: false, //une touche est enfoncée - event keydown
isKeyPress: false, //une touche reste enfoncée - event keypress
isKeyUp: false, //une touche est relachée - event keyup
keyCodeDown: false, //keyCode pour keydown
keyCodePress: false, //keyCode pour keypress
keyCodeUp: false, //keyCode pour keyup
clavierCorrespondance: new Array(), // correspondance code/role pour les touches de fonction et les touches spéciales
version: "classe clavier: version de septembre 2013", //numéro de version de la classe
initClavier: function(e){ //initialise le traitement de l'évènement clavier et retourne as String la touche ou la combinaison de touche appuyée y compris les touches de fonctions ou les touches spéciales
/* ---------------------------------------------------
exploitation de l'evenement clavier
mise à jour des variables globales associées à la classe
-------------------------------------------------- */
claude.prototype.clavier.initClavierCorrespondance(); //charge les valeurs de touche spéciales, ex touches de fonctions...
var event = claude.prototype.event.getEvent(e);
var type = claude.prototype.event.getType(e);
//alert(event + ": "+type);
claude.prototype.clavier.keyCode = (window.event) ? parseInt(window.event.keyCode) : parseInt(e.which);
if (type == "keydown") claude.prototype.clavier.keyCodeDown = claude.prototype.clavier.keyCode;
if (type == "keypress") claude.prototype.clavier.keyCodePress = claude.prototype.clavier.keyCode;
if (type == "keyup") claude.prototype.clavier.keyCodeUp = claude.prototype.clavier.keyCode;
claude.prototype.clavier.isShift = (window.event) ? window.event.shiftKey : e.shiftKey || (e.modifiers > 3);
claude.prototype.clavier.isAlt = (window.event) ? window.event.altKey : e.altKey || (e.modifiers % 2);
claude.prototype.clavier.isCtrl = (window.event) ? window.event.ctrlKey : e.ctrlKey || (e.modifiers == 2) || (e.modifiers == 3) || (e.modifiers > 5);
claude.prototype.clavier.isAltGr = (claude.prototype.clavier.isAlt && claude.prototype.clavier.isCtrl) ? true : false;
claude.prototype.clavier.isKeyDown = (type == "keydown") ? true : false;
claude.prototype.clavier.isKeyPress = (type == "keypress") ? true : false;
claude.prototype.clavier.isKeyUp = (type == "keyup") ? true : false;
var touche = claude.prototype.clavier.touche(); //contient en texte la touche appuyée
return touche; //c'est en fait claude.prototype.clavier.charCode
},
touche: function(){ //détermine quelle touche est appuyée et retourne sa valeur en texte - as String
if (claude.prototype.clavier.isKeyDown) { //action pour keydown
claude.prototype.clavier.keyClavier = claude.prototype.clavier.keyCode; //cas général
if (claude.prototype.clavier.keyCode >= 0 && claude.prototype.clavier.keyCode <= 40)
claude.prototype.clavier.keyClavier = claude.prototype.clavier.keyCode + 1000;
if (claude.prototype.clavier.isAltGr)
claude.prototype.clavier.keyClavier = claude.prototype.clavier.keyCode;
if (claude.prototype.clavier.keyCode >= 45 && claude.prototype.clavier.keyCode <= 46)
claude.prototype.clavier.keyClavier = claude.prototype.clavier.keyCode + 1000;
if (claude.prototype.clavier.keyCode >= 91 && claude.prototype.clavier.keyCode <= 93)
claude.prototype.clavier.keyClavier = claude.prototype.clavier.keyCode + 1000; //touche windows
if (claude.prototype.clavier.keyCode >= 112 && claude.prototype.clavier.keyCode <= 123)
claude.prototype.clavier.keyClavier = claude.prototype.clavier.keyCode + 1000; //touche de fonction F1 à F12
if (claude.prototype.clavier.keyCode >= 127 && claude.prototype.clavier.keyCode <= 160)
claude.prototype.clavier.keyClavier = claude.prototype.clavier.keyCode + 1000;
}
if (claude.prototype.clavier.isKeyPress) { //puis action si keyPress
if (claude.prototype.clavier.keyClavier > 1000) ; //ne rien faire keydown est prépondérant
else {
if (claude.prototype.clavier.keyCode >= 33 && claude.prototype.clavier.keyCode <= 126)
claude.prototype.clavier.keyClavier = claude.prototype.clavier.keyCode; //code ASCII standard
if (claude.prototype.clavier.keyCode >= 161 && claude.prototype.clavier.keyCode <= 256)
claude.prototype.clavier.keyClavier = claude.prototype.clavier.keyCode; //code ASCII spéciaux
}
}
if (claude.prototype.clavier.isKeyUp) { //action si keyup
if (claude.prototype.clavier.keyCode == 44) { //la touche Print Screen n'est détectée que lors qu'un keyup et seulement par FF et IE, mais pas OP
claude.prototype.clavier.keyClavier = claude.prototype.clavier.keyCode + 1000;
//claude.prototype.clavier.charCode = "print Screen";
}
}
if (claude.prototype.clavier.keyClavier > 1000) { //on récupère la valeur as String pour charCode
claude.prototype.clavier.charCode = (claude.prototype.clavier.clavierCorrespondance[claude.prototype.clavier.keyClavier - 1000]) ? claude.prototype.clavier.clavierCorrespondance[claude.prototype.clavier.keyClavier - 1000] : "touche non trouvée!";
}
else {
claude.prototype.clavier.charCode = String.fromCharCode(claude.prototype.clavier.keyClavier);
if (claude.prototype.clavier.isCtrl)
claude.prototype.clavier.charCode = "CTRL+" + claude.prototype.clavier.charCode; //ajout ctrl si touche ctrl appuyée
}
return claude.prototype.clavier.charCode; //contient as String la touche appuyée
},
initClavierCorrespondance: function(){ //définit les touches spéciales en texte clair -as String
claude.prototype.clavier.clavierCorrespondance[3] = "Cancel key";
claude.prototype.clavier.clavierCorrespondance[6] = "Help key";
claude.prototype.clavier.clavierCorrespondance[8] = "Retour arriere-Backspace key";
claude.prototype.clavier.clavierCorrespondance[9] = "Tabulation-Tab key";
claude.prototype.clavier.clavierCorrespondance[12] = "Milieu (pave numerique)-5 key on Numpad when NumLock is unlocked";
claude.prototype.clavier.clavierCorrespondance[13] = "Entree-Return/enter";
claude.prototype.clavier.clavierCorrespondance[14] = "Reserved, but not used";
claude.prototype.clavier.clavierCorrespondance[16] = "Shift";
claude.prototype.clavier.clavierCorrespondance[17] = "Ctrl";
claude.prototype.clavier.clavierCorrespondance[18] = "Alt";
claude.prototype.clavier.clavierCorrespondance[19] = "Pause";
claude.prototype.clavier.clavierCorrespondance[20] = "Verr Maj-Caps lock";
claude.prototype.clavier.clavierCorrespondance[27] = "Echap";
claude.prototype.clavier.clavierCorrespondance[32] = "Espace-Space bar";
claude.prototype.clavier.clavierCorrespondance[33] = "Page precedente-Page Up key";
claude.prototype.clavier.clavierCorrespondance[34] = "Page suivante-Page Down key";
claude.prototype.clavier.clavierCorrespondance[35] = "Fin-End key";
claude.prototype.clavier.clavierCorrespondance[36] = "Debut-Home key";
claude.prototype.clavier.clavierCorrespondance[37] = "Fleche gauche-Left arrow";
claude.prototype.clavier.clavierCorrespondance[38] = "Fleche haut-Up arrow";
claude.prototype.clavier.clavierCorrespondance[39] = "Fleche droite-Right arrow";
claude.prototype.clavier.clavierCorrespondance[40] = "Fleche bas-Down arrow";
claude.prototype.clavier.clavierCorrespondance[44] = "print Screen-Impr ecran";
claude.prototype.clavier.clavierCorrespondance[45] = "Inser-Ins(ert) key";
claude.prototype.clavier.clavierCorrespondance[46] = "Suppr-Del(ete) key";
claude.prototype.clavier.clavierCorrespondance[91] = "Menu Demarrer Windows-Windows logo key on Windows";
claude.prototype.clavier.clavierCorrespondance[92] = "Menu Demarrer Windows";
claude.prototype.clavier.clavierCorrespondance[93] = "Menu contextuel Windows-Opening context menu key";
claude.prototype.clavier.clavierCorrespondance[112] = "F1";
claude.prototype.clavier.clavierCorrespondance[113] = "F2";
claude.prototype.clavier.clavierCorrespondance[114] = "F3";
claude.prototype.clavier.clavierCorrespondance[115] = "F4";
claude.prototype.clavier.clavierCorrespondance[116] = "F5";
claude.prototype.clavier.clavierCorrespondance[117] = "F6";
claude.prototype.clavier.clavierCorrespondance[118] = "F7";
claude.prototype.clavier.clavierCorrespondance[119] = "F8";
claude.prototype.clavier.clavierCorrespondance[120] = "F9";
claude.prototype.clavier.clavierCorrespondance[121] = "F10";
claude.prototype.clavier.clavierCorrespondance[122] = "F11";
claude.prototype.clavier.clavierCorrespondance[123] = "F12";
claude.prototype.clavier.clavierCorrespondance[144] = "Verr Num-Num Lock key";
claude.prototype.clavier.clavierCorrespondance[145] = "Arret defil-Scroll Lock key";
},
fin: ""
};
claude.prototype.log = { // logique, reg expression, is quelquechose
trim: function (aString) { // Supprime les espaces inutiles en début et fin de la chaîne passée en paramètre.
/* ---------------------------------------------------
Retourne la chaîne sans ses espaces
Trouver sur: http://anothergeekwebsite.com/fr/2007/03/trim-en-javascript
Trim en Javascript
Posted 20. March 2007 - 10:28 by papy.reno
----------------------------------------------------- */
if (String.trim) return aString.trim(); //new browser
var regExpBeginning = /^\s+/;
var regExpEnd = /\s+$/;
return aString.replace(regExpBeginning, "").replace(regExpEnd, "");
},//
trimLeft: function (aString) { // Supprime les espaces inutiles en début de la chaîne passée en paramètre
/* ---------------------------------------------------
Retourne la chaîne sans ses espaces
Trouver sur: http://anothergeekwebsite.com/fr/2007/03/trim-en-javascript
Trim en Javascript
Posted 20. March 2007 - 10:28 by papy.reno
----------------------------------------------------- */
if (String.trimLeft) return aString.trimLeft(); //new browser
var regExpBeginning = /^\s+/;
return aString.replace(regExpBeginning, "");
},//
trimRight:function (aString) { // Supprime les espaces inutiles en fin de la chaîne passée en paramètre.
/* ---------------------------------------------------
Retourne la chaîne sans ses espaces
Trouver sur: http://anothergeekwebsite.com/fr/2007/03/trim-en-javascript
Trim en Javascript
Posted 20. March 2007 - 10:28 by papy.reno
----------------------------------------------------- */
if (String.trimRight) return aString.trimRight(); //new browser
var regExpEnd = /\s+$/;
return aString.replace(regExpEnd, "");
},
leftSubstring: function(chaine, strSearch){ //recherche la racine d'un élément; partie gauche d'une chaine de caractère; équivallent à search_racine
var leftRacine = chaine.substring(0, chaine.indexOf(strSearch)); //retourne la partie à gauche de chaine par rapport à strSearch
return leftRacine;
},
borneSubstring: function(chaine, strDebut, strFin) { //retourne les caractères entre les caractères strDebut et strFin
var indexDebut = chaine.indexOf(strDebut);
if (indexDebut == -1) return undefined;
indexDebut += strDebut.length;
var indexFin = chaine.indexOf(strFin, indexDebut);
if (indexFin == -1) return undefined;
return chaine.slice(indexDebut, indexFin);
},
d2b: function (int_d) {return int_d.toString(2);}, //transforme un nombre décimal en une chaine binaire
b2d: function (str_h) {return parseInt(str_h,2);}, //transforme une chaine binaire en un entierdécimal
d2o: function (int_d) {return int_d.toString(8);}, //transforme un nombre décimal en une chaine octal
o2d: function (str_h) {return parseInt(str_h,8);}, //transforme une chaine octal en un entier décimal
d2h: function (int_d) {return int_d.toString(16);}, //transforme un nombre décimal en une chaine hexadécimale
h2d: function (str_h) {return parseInt(str_h,16);}, //transforme une chaine hexadécimale en un entier décimal
chr: function (int_ascii) {return String.fromCharCode(int_ascii);}, //retourne le caractère correspondant au code ASCII fournit en argument (type décimal)
asc: function (str_chaine, int_pos) {return str_chaine.charCodeAt(int_pos);}, //retourne le caractère ASCII situé à int_pos dans la chaine de caractère str_chaine
RGBtoHex: function(int_R,int_G,int_B) { //Conversion Couleur: fournie en RGB en un code hexa
return "#" + claude.prototype.log.toHex(int_R)+claude.prototype.log.toHex(int_G)+claude.prototype.log.toHex(int_B); //return a string, avec le "#" pour afficher une couleur
},//
toHex: function(N) {// N est de type Integer - retourne un String contenant la valeur exadécimale de N
if (N==null) return "00";
N=parseInt(N);
if (N==0 || isNaN(N)) return "00";
N=Math.max(0,N);
N=Math.min(N,255);
N=Math.round(N);
return "0123456789ABCDEF".charAt((N-N%16)/16) + "0123456789ABCDEF".charAt(N%16);
},//
hexToRGB: function(str_Hex){ //Conversion Couleur: attention il faut le # dans str_Hex; Converti une couleur fournie en hexa en un code RGB
var colorRGB = new Object();
colorRGB.R = claude.prototype.log.hexToRed(str_Hex);
colorRGB.G = claude.prototype.log.hexToGreen(str_Hex);
colorRGB.B = claude.prototype.log.hexToBlue(str_Hex);
return colorRGB; //il faut récupérer chacune des composantes R G B de l'objet colorRGB
}, //
hexToRed: function(h) { //Conversion Couleur
return parseInt((claude.prototype.log.cutHex(h)).substring(0,2),16);
},
hexToGreen: function(h) { //Conversion Couleur
return parseInt((claude.prototype.log.cutHex(h)).substring(2,4),16);
},
hexToBlue: function(h) { //Conversion Couleur
return parseInt((claude.prototype.log.cutHex(h)).substring(4,6),16);
},
cutHex: function(h) { //Conversion Couleur
return (h.charAt(0)=="#") ? h.substring(1,7):h;
},
isNotNull: function(elt){ // cnx().log.isNotNull(elt)
(elt == null)? retour = false: retour = true; //true si isNotNull
return retour; //renvoie true si la donnée n'est pas null
}, //
isNull: function(elt){ //
(elt == null)? retour = true: retour = false;
return retour; //renvoie true si la donnée est null
}, //
isNumber: function(elt){
return typeof elt === "number"; //null et false retourne false; par contre (null*1) et (false*1) = 0 et retourne true!
},
isString: function(elt){
return typeof elt === "string";
},
isUndefined: function(elt) {
return typeof elt === "undefined"; //retourne true si undefined
},
isNotUndefined: function(elt) {
var reponse = typeof elt === "undefined";
return !reponse; //renvoie false si undefined
},
isArray: function(elt) {
/* ---------------------------------------
Array et Object avec typeof retourne "object";
Array possède une propriété length qui peut être 0 si aucun élément dans le tableau;
Object n'a pas de propriété length et Object.length => undefined
-------------------------------------------- */
return typeof elt === "object" && (elt.length > -1);
},
isObject: function(elt) {
/* -------------------------------------------------
Object et Array avec typeof retourne "object";
Object n'a pas de propriété length et Object.length => undefined;
Array a toujours une propriété length qui peut être égale à 0 en l'absence d'élément dans le tableau
------------------------------------------ */
return typeof elt === "object" && typeof elt.length === "undefined";
},
isTable: function(elt){
/* --------------------------
on cherche à tester un objet
est un objet avec une collection rows
-------------------------------- */
return typeof elt === "object" && typeof elt.length === "undefined" && elt.rows != null;
},
isFunction: function(elt) {
/* ------------------------------------------
une classe JSON: var a={} retourne "object" et non pas "function" avec typeof;
une classe closure retourne "function"
les "function" ont une propriété length qui semble toujours = 0!
----------------------------------------- */
return typeof elt === "function";
},
isDate: function(x){ //retourne true si Date() et False si pas Date()
return (null != x) && !isNaN(x) && ("undefined" !== typeof x.getDate);
},
isEvent: function (e){
var reponse;
try {
reponse = e.isEvent(); //evalue, calcule la variable
}
catch(error) {
reponse = false; //il y a une erreur, donc ce n'est pas un évènement
}
finally {
return reponse; // true ou flase
}
},
isWhat: function(elt){ //return un "string" donnant le type de l'élément
var nature = ""; //pas de catégorie connue ou encore testée!
if (elt == null) nature += " null";
if (typeof elt === "number") nature += " number";
if (typeof elt === "string") nature += " string";
if (typeof elt === "undefined") nature += " undefined";
if ( claude.prototype.log.isDate(elt) ) nature += " Date"; //Date() est également un object; donc il faut tester isDate() avant isObject()
if (!!(elt && elt.nodeType == 1)) nature += " HTML elt";
if (typeof elt === "function") nature += " function";
if (typeof elt === "object"){
if (elt.length > -1) nature += " array";
if (typeof elt.length === "undefined" && elt.rows != null) nature += " HTML ";
if (claude.prototype.log.isEvent(elt) ) nature += " Event";
if (typeof elt.length === "undefined") nature += " object";
}
if (nature == "") nature += " autre cas!";
alert(elt + " in cnx().log.isWhat(elt) is : " + nature);
return nature;
},
isHTML: function (elt){ //elt est soit un objet soit un id: renvoie true si objet HTML; sinon false
return !!(elt && elt.nodeType == 1); // issu de la classe Prototype: true si elt HTML autrement false
},
isDefined: function(variableAsString, defaultValue) {
/* ------------------------------------------------------------------
variableAsString: c'est à dire si data est le nom de la variable, reçoit "data"
defaultValue: si defaultValue existe, la variable sera crée avec cette valeur
Permet de tester que la variable existe, est déclarée, ce qui est différend de undefined où la variable existe mais n'est affectée d'aucune valeur
Cela entraine donc une erreur d'où la gestion d'erreur associée à ce programme.
----------------------------------------------- */
var erreur = false;
try {
eval(variableAsString); //evalue, calcule la variable
}
catch(error) {
erreur = true; //il y a une erreur, donc la variable n'est pas définie
//alert("catch: "+error);
}
finally {
if(erreur && defaultValue != undefined) {eval(variableAsString + "= '" + defaultValue+"';")}; //donne une valeur par defaut à la variable testée si elle n'existe pas
return !erreur; // false si variable non définie initialement
}
},
isNotDefined: function(variableAsString, defaultValue) {
/* ------------------------------------------------------------------
variableAsString: c'est à dire si data est le nom de la variable, reçoit "data"
defaultValue: si defaultValue existe, la variable sera crée avec cette valeur
Permet de tester que la variable existe, est déclarée, ce qui est différend de undefined où la variable existe mais n'est affectée d'aucune valeur
Cela entraine donc une erreur d'où la gestion d'erreur associée à ce programme.
----------------------------------------------- */
var erreur = false; //nous supposons qu'il n'y a pas d'erreur donc que la variable existe, est définie!
try {
eval(variableAsString); //evalue, calcule la variable
}
catch(error) {
erreur = true; //il y a une erreur, donc la variable n'est pas définie
//alert("catch: "+error);
}
finally {
if(erreur && defaultValue != undefined) {eval(variableAsString + "= '" + defaultValue+"' ;")}; //donne une valeur par defaut à la variable testée si elle n'existe pas
return erreur; // true si variable non définie initialement
}
},
isHash: function(elt) { // fonction issu de la classe Prototype
return elt instanceof Hash;
},
generatePassword: function(plength){ //
//Un generateur de mot de passe - par lecodejava.com
if (!plength) var plength=16; //alloue une longueur par défaut
var keylist="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789";
var password=""; //initialise le password
for (var i=0; i nombreMaxTirages) nombreTirages = nombreMaxTirages; //gestion erreur
for (i=0; i < nombreTirages ;i++){
nombre = Math.floor(Math.random() * nombreMax)+1; //retourne un nombre au hasard entre 1 et nombreMax
if (nombre >= nombreMini){
contenuTirage[i]= nombre;
for (t=0 ; t < i ;t++){
if (contenuTirage[t]==nombre){ //si nombre existe déjà refait un tirage en décrémentant i
i--;
}
}
}
else i--;
}
if (nombreTirages == 1){
var retour = contenuTirage[0];
return retour;
}
return contenuTirage;
},
fin: ""
};
claude.prototype.user = { //browser navigateur
IE: navigator.userAgent.indexOf('MSIE') > -1,
FF: navigator.userAgent.indexOf('Firefox') > -1,
Opera: Object.prototype.toString.call(window.opera) == '[object Opera]',
WebKit: navigator.userAgent.indexOf('AppleWebKit/') > -1,
Gecko: navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') === -1,
Chrome: navigator.userAgent.indexOf('Chrome') > -1,
MobileSafari: /Apple.*Mobile/.test(navigator.userAgent),
isMobile: function(){ //détecte si le matériel est un telephone portable ou une tablette, donc un mobile
var userAgent = navigator.userAgent||navigator.vendor||window.opera;
var mobile = "android"; //type de matériel mobile détecté
mobile = mobile + "|tablet";
mobile = mobile + "|Touch|IEMobile|windows phone";
mobile = mobile + "|iphone|blackberry";
mobile = mobile + "|symbian|symbianos|symbos";
mobile = mobile + "|netfront|model-orange|javaplatform";
mobile = mobile + "|samsung|htc";
mobile = mobile + "|opera mobile|opera mobi|opera mini";
mobile = mobile + "|presto|huawei|blazer|bolt|doris|fennec";
mobile = mobile + "|gobrowser|iris|maemo browser|mib|cldc|minimo|semc-browser";
mobile = mobile + "|skyfire|teashark|teleca|uzard|uzardweb|meego|nokia|bb10|playbook";
//mobile = mobile + "|mozilla|firefox|MSIE"; //pour test uniquement, ce n'est pas un mobile!
//alert(mobile + " : " + userAgent);
var expReg = new RegExp(mobile,"gi"); //création de l'expression régulière
var tab = userAgent.match(expReg); //retourne un Array() contenant les réponses trouvées, ou null
if (tab == null) tab = false; //pas d'occurence trouvée
//var reponse = (tab) ? true : false;
//alert(reponse + " : " + tab + " : " + tab.length);
return function() {
return tab;
}
}(), //autoexecution
isTablette: function(){ //détecte si c'est une tablette
if ( claude.prototype.user.getType() == "tablette" ) return true;
else return false;
},
getType: function(){ //renvoie tablette, téléphone mobile ou bureau
if (claude.prototype.user.isMobile() ) {
if ( ((screen.width >= 480) && (screen.height >= 800)) || ((screen.width >= 800) && (screen.height >= 480)) || navigator.userAgent.match(/ipad/gi) ) {
//alert('tablette');
return "tablette";
} else {
//alert('mobile');
return "telephone"; //telephone portable
}
} else {
//alert('bureau');
return "bureau"; //ordinateur de bureau ou portable
}
},
isTactile: function(){ //retourne true si écran tactile géré par le DOM
return 'ontouchstart' in window // works on most browsers
|| 'onmsgesturechange' in window; // works on ie10
//on peut remplacer window par document.documentElement
//eventName in document.documentElement
},
getURLparameters: function(){ //lit et retourne les paramètres transmis en URL méthode GET
/* ----------------------
cette fonction lit les paramètres passés en URL
génère les variables ainsi transmises via la méthode eval()
les variables sont déclarées globales pour être actives hors de la fonction
Si des paramètres existent, retourne un Array() à deux dimensions
Array[x] contient les expressions
Array[x][0] contient le nom de la variable
Array[x][1] contient la valeur de la variable transmise en paramètre
fait appel à isNaN() - is Not a Numéric
si Number renvoie false
si String renvoie true
--------------- */
if (location.search == "") return false; //pas de paramètres dans les URL - gestion d'erreur
var variable; //nom de la variable
var valeur; //valeur de la variable
var parameters = location.search.substring(1).split("&"); //séparateur d'expressions: &
for(var x = 0; x < parameters.length; x++){
parameters[x] = parameters[x].split("="); //séparateur variable, valeur: =
variable = parameters[x][0] = unescape( parameters[x][0] ); //nom de la variable
valeur = parameters[x][1] = unescape( parameters[x][1] ); //valeur de la variable
if (isNaN(valeur) == false) eval(variable + "=" + valeur); //c'est un nombre - génère la variable dans javascript as Number
else eval(variable + ' = "' + valeur + '"'); //génère la variable dans javascript as String
}
return parameters;
},
getScreenHeight: function(){ //dimension de l'écran - résolution
/*
var hauteurScreen = cnx().user.getScreenHeight();
*/
return window.screen.height;
},
getScreenWidth: function(){ //dimension de l'écran - résolution
/*
var largeurScreen = cnx().user.getScreenWidth();
*/
return window.screen.width;
},
getWidth: function(){ //dimension disponible à l'intérieur de la fenêtre du navigateur
/*
var largeurBrowser = cnx().user.getWidth(); //width => left
*/
if (claude.prototype.user.IE) return document.body.clientWidth; //document.body.clientWidth
else return window.innerWidth;
return 0;
},
getHeight: function(){ //dimension disponible à l'intérieur de la fenêtre du navigateur
/*
var hauteurBrowser = cnx().user.getHeight(); //height => top
*/
if (claude.prototype.user.IE) return document.body.clientHeight; //document.body.clientWidth
else return window.innerHeight;
return 0;
},
getFullWidth: function(){ //dimension de la fenêtre du navigateur
/*
var largeurBrowser = cnx().user.getFullWidth();
*/
if (document.body && document.body.offsetWidth) return document.body.offsetWidth; //document.body.clientWidth
if (window.innerWidth) return window.innerWidth;
return 0;
},
getFullHeight: function(){ //dimension de la fenêtre du navigateur
/*
var hauteurBrowser = cnx().user.getFullHeight();
*/
if (document.body && document.body.offsetHeight) return document.body.offsetHeight; //document.body.clientWidth
if (window.innerHeight) return window.innerHeight;
return 0;
},
getIEVersion: function() {
// Returns the version of Windows Internet Explorer or a -1 // (indicating the use of another browser).
var rv = false; // Return value assumes failure.
if (navigator.appName == 'Microsoft Internet Explorer') {
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
},
getVersion: function(){ //retourne la version du navigateur
var ua = navigator.userAgent,
possibilities = [
'Flock',
'Navigator',
'Epiphany',
'Konqueror',
'Firefox',
'MSIE',
'Chrome',
'Opera',
'Safari',
'SeaMonkey',
'Shiretoko',
'Iceape',
'Iceweasel',
'Kazehakase',
'Minefield'
],
index,
navigateur = 'Navigateur inconnu',
version = 'Version inconnue',
match,
p, i, l = possibilities.length;
for(i=0;i=0) {
navigateur = p;
match = ua.match(/Version\/(\w+(?:\.\w+)*)/) || ua.match(new RegExp(p+'[/ ](\\w+(?:\\.\\w+)*)'));
if(match&&match[1]) {
version = match[1];
}
break;
}
}
version = parseFloat(version);
//alert(navigateur+' '+version);
//claude.prototype.user.version = version; //provoque une erreur
return version;
},
getIp: function(){ //retourne l'ip du poste client
var strPagePHP = claude.prototype.divers.cnxClassPHP; //adresse de la classe php - appel Ajax;
var strFonctionPHP = "cnxDivers->getIp";
var ip = cnx().ajax.phpPostSyn(strPagePHP, strFonctionPHP);
ip = ip.trim(); //supprime les caractères inutiles
return ip;
},
fin: ""
};
claude.prototype.style = { //gestion des styles
appendStyle: function (styles) {// permet ajouter un style CSS via un fichier js, le CSS est inclus dans le js
/* -------------------------------------------
Appending Style Nodes with Javascript by Jon Raasch
Permet d'ajouter des styles directement dans un js
Il faut définir les styles comme ceci:
var styles = '#header { color: red; font-size: 40px; font-family: Verdana, sans; }';
styles += ' .content { color: blue; text-align: left; }';
cnx().style.appendStyle(styles);
ou encore
cnx(document).style.appendStyle(styles);
---------------------------------------- */
var css = document.createElement('style');
css.type = 'text/css';
if (css.styleSheet) css.styleSheet.cssText = styles;
else css.appendChild(document.createTextNode(styles));
document.getElementsByTagName("head")[0].appendChild(css); //ajoute le style
return true;
},//
isClassName: function (sClassName){//search className
/*
Cherche tous les syles de type className appliqué à un objet elt
puis recherche si le style est trouvé dans l'ensemble de ces styles
*/
var elt = claude.prototype.dom.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é!
}, //
addClassName: function(sClassName) { //ajoute un className
var elt = claude.prototype.dom.getElt(); //retourne Object if exist
if(elt == false || elt == null) return null; //erreur sur elt
var s = elt.className;
var p = s.split(" ");
var l = p.length;
for (var i = 0; i < l; i++) {
if (p[i] == sClassName)
return; //renvoie undefined la classe existe déjà!
}
p[p.length] = sClassName;
elt.className = p.join(" ").replace( /(^\s+)|(\s+$)/g, "" );
return true;
}, //
removeClassName: function(sClassName) {//retire un className
var elt = claude.prototype.dom.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;
}, //
unit: "px", //fourni l'unité de mesure: exemple: "px"
getStyle: function(str_style) { //lit la valeur du style
/* -----------------------------------
getstyle() renvoie la valeur du style
id_element est l'identificateur de l'élément (div, img ...), donc String, mais gère aussi les object
style 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 Interger, voire #FFF ou rgb() ...
------------------------- */
var elt = claude.prototype.dom.getElt(); //retourne Object if exist
if(elt == false || elt == null) return null; //erreur sur elt
var str_value = (elt).style[claude.prototype.style.toJavascriptStyleName(str_style)]; //lecture des styles intégré au code HTML
if(!str_value){ //lecture de style dans un fichier CSS ou équivallent
if(document.defaultView) str_value = document.defaultView.getComputedStyle(elt, null).getPropertyValue(str_style); //FF et Opera
else if((elt).currentStyle) str_value = (elt).currentStyle[claude.prototype.style.toJavascriptStyleName(str_style)]; //IEX
}
return str_value; //String: => width: "100px", faire: parseInt(str_value) pour integer
}, //
setStyle: function(str_style, str_value) { // applique un style
/* ------------------------------
setstyle() sert à définir, à appliquer une valeur à une style
(elt) est l'identificateur de l'élément: div, img, donc String, mais gère aussi les object
str_style est le nom du style à modifier: width, top, ... au format html avec tiret et String
str_value est la nouvelle valeur du style à appliquer à id_element
----------------------------- */
var elt = claude.prototype.dom.getElt(); //retourne Object if exist
//alert(elt.id);
if(elt == false || elt == null) return null; //erreur sur elt
//alert("classe style: " + elt.id);
var op_correct = false;
if (elt) op_correct = (elt).style[claude.prototype.style.toJavascriptStyleName(str_style)] = str_value; //retourne str_value si opération correctement effectuée
//alert("op: "+op_correct);
return op_correct;
}, //
getUnit: function(str_value){ // retourne l'unité utilisée; exemple: "px"
if (!str_value) str_value = claude.prototype.style.unit; //fourni une valeur par défaut
var modele = /[0-9]/g; //recherche tous les nombres
claude.prototype.style.unit = str_value.replace(modele, ""); //retourne la partie texte, donc l'unité utilisée
return claude.prototype.style.unit; //String
}, //
getWidth: function(){ //
var elt = claude.prototype.dom.getElt(); //retourne Object if exist
var str_value = claude.prototype.style.getStyle("width");
if (str_value == "auto"){ //gestion pour IE qui retourne auto si la table s'ajsute automatiquement à la fenetre
var largeur = elt.offsetWidth;
claude.prototype.style.unit = "px";
}
else {
var largeur = parseInt(str_value);
claude.prototype.style.unit = claude.prototype.style.getUnit(str_value); //unité utilisée: claude.prototype.style.unit
}
return parseInt(largeur); // c'est un integer
}, //
setWidth: function(str_value){ //
str_value = (claude.prototype.log.isString(str_value)) ? str_value : str_value + "px"; //vérifie que c'est un String
claude.prototype.style.unit = claude.prototype.style.getUnit(str_value); //unité utilisée: claude.prototype.style.unit
claude.prototype.style.setStyle("width", str_value); //applique le style
return parseInt(str_value); //retourne un integer
}, //
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.getpos("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 elt = claude.prototype.dom.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
//alert("getPos: "+x+" : "+y);
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
}, //
getTrueLeft: function(){ // position left par rapport à la page y compris si ascenseur et parent en position absolue
var position = claude.prototype.style.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
}, //
getTrueTop: function(){ // position top par rapport à la page y compris si ascenseur et parent en position absolue
var position = claude.prototype.style.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
}, //
getTrueHeight: function() { //taille réelle d'une image ici height
var elt = claude.prototype.dom.getElt(); //retourne Object if exist
var newImg = new Image();// Declaration d'un objet Image
newImg.src = elt.src;// Affectation du chemin de l'image a l'objet
var h = newImg.height;// On recupere les tailles reelles
var w = newImg.width;// On recupere les tailles reelles
newImg = null; //détruit image
return h; //as integer
}, //
getTrueWidth: function() { //taille réelle d'une image ici width
var elt = claude.prototype.dom.getElt(); //retourne Object if exist
var newImg = new Image();// Declaration d'un objet Image
newImg.src = elt.src;// Affectation du chemin de l'image a l'objet
var h = newImg.height;// On recupere les tailles reelles
var w = newImg.width;// On recupere les tailles reelles
newImg = null; //détruit image
return w; //as integer
}, //
setTop: function(str_value){ //
str_value = (claude.prototype.log.isString(str_value)) ? str_value : str_value + "px"; //vérifie que c'est un String
claude.prototype.style.getUnit(str_value); //unité utilisée: claude.prototype.style.unit
claude.prototype.style.setStyle("top", str_value); //applique le style
return parseInt(str_value); //retourne un integer
}, //
getTop: function(){ //
var elt = claude.prototype.dom.getElt(); //retourne Object if exist
var str_value = claude.prototype.style.getStyle("top");
if (str_value == "auto") str_value = elt.offsetTop + "px";
claude.prototype.style.getUnit(str_value); //unité utilisée: claude.prototype.style.unit
return parseInt(str_value); //integer
}, //
setLeft: function(str_value){ //
var str_value = (claude.prototype.log.isString(str_value)) ? str_value : str_value + "px"; //vérifie que c'est un String
claude.prototype.style.getUnit(str_value); //unité utilisée: claude.prototype.style.unit
claude.prototype.style.setStyle("left", str_value); //applique le style
return parseInt(str_value); //retourne un integer
}, //
getLeft: function(){ //
var elt = claude.prototype.dom.getElt(); //retourne Object if exist
var str_value = claude.prototype.style.getStyle("left");
if (str_value == "auto") str_value = elt.offsetLeft + "px";
claude.prototype.style.getUnit(str_value); //unité utilisée: claude.prototype.style.unit
return parseInt(str_value); //integer
}, //
setPosition: function(strPosition){ // absolute et relative
claude.prototype.style.setStyle("position", strPosition); //absolute, relative, static
return strPosition;
}, //
getPosition: function(){ //
var strPosition = claude.prototype.style.getStyle("position");
return strPosition;
}, //
getRight: function(){ //
var elt = claude.prototype.dom.getElt(); //retourne Object if exist
var str_value = claude.prototype.style.getStyle("right");
if (str_value == "auto") str_value = elt.offsetRight + "px";
claude.prototype.style.getUnit(str_value); //unité utilisée: claude.prototype.style.unit
return parseInt(str_value); //integer
}, //
setRight: function(str_value){ //
var str_value = (claude.prototype.log.isString(str_value)) ? str_value : str_value + "px"; //vérifie que c'est un String
claude.prototype.style.getUnit(str_value); //unité utilisée: claude.prototype.style.unit
claude.prototype.style.setStyle("right", str_value); //applique le style
return parseInt(str_value); //retourne un integer
}, //
getHeight: function(){ //
var elt = claude.prototype.dom.getElt(); //retourne Object if exist
var str_value = claude.prototype.style.getStyle("height");
if (str_value == "auto") str_value = elt.offsetHeight + "px";
claude.prototype.style.getUnit(str_value); //unité utilisée: claude.prototype.style.unit
return parseInt(str_value); //integer
}, //
setHeight: function(str_value){ //
var str_value = (claude.prototype.log.isString(str_value)) ? str_value : str_value + "px"; //vérifie que c'est un String
claude.prototype.style.getUnit(str_value); //unité utilisée: claude.prototype.style.unit
claude.prototype.style.setStyle("height", str_value); //applique le style
return parseInt(str_value); //retourne un integer
}, //
setBottom: function(str_value){ //
var str_value = (claude.prototype.log.isString(str_value)) ? str_value : str_value + "px"; //vérifie que c'est un String
claude.prototype.style.getUnit(str_value); //unité utilisée: claude.prototype.style.unit
claude.prototype.style.setStyle("bottom", str_value); //applique le style
return parseInt(str_value); //retourne un integer
}, //
getBottom: function(){ //
var elt = claude.prototype.dom.getElt(); //retourne Object if exist
var str_value = claude.prototype.style.getStyle("bottom");
if (str_value == "auto") str_value = elt.offsetBottom + "px";
claude.prototype.style.getUnit(str_value); //unité utilisée: claude.prototype.style.unit
return parseInt(str_value); //integer
}, //
setVisibility: function(strVisibility){ //
if (strVisibility == true) var strVisibility = "visible";
if (strVisibility == false) var strVisibility = "hidden";
claude.prototype.style.setStyle("visibility", strVisibility);
return strVisibility;
}, //
getVisibility: function(){ //
var strVisibility = claude.prototype.style.getStyle("visibility");
return strVisibility;
}, //
setMultipleStyle: function(str_style){ //
/* ----------------------------
Reçoit une chaine de caractères de type : position:absolute; left: 10px; top: 20px;
Applique alors chacun de ces styles en appelant styleExtraction()
--------------------- */
var table_array = claude.prototype.style.styleExtraction(str_style); //retourne la liste des styles et leur valeur décomposée en un seul array
for (var i=0; i
Nous avons souhaité reproduire dans la classe style cette possibilité
Ecrire sur une seule ligne plusieurs instructions de style
Tout en gardant également un format similaire au HTML
Il nous fallait alors pouvoir décomposer cette ligne en instruction pour chacun des styles employés
Tel est le rôle de styleExtraction() qui fonctionne avec setMultipleStyle()
------------------------------------------- */
var chaine = claude.prototype.log.trim(chaine); //supprime les espaces en début et fin de chaine
var reg=new RegExp("[ :;]+", "g"); //expression régulière, recherche dans toute la chaineles caractères : et ; en éliminant les espaces interne
var tableau = chaine.split(reg); //transforme la chaine de caractères en tableau en fonction des critères de recherche de l'expression régulière
var fin = tableau.length -1; //cherche l'indice du dernier élément du tableau
if (tableau[fin].length == 0) tableau.pop(); //supprime le dernier élément si son contenu est null
return tableau; //retourne un tableau à partir de la chaine de caractères passée en paramètre
}, //
toJavascriptStyleName: function(text){ //
/* ----------------------------------------
En HTML le nom de certains styles s'écrive avec un tiret comme: background-color
Ce même style en javascript s'écrit en supprimant le tiret: backgroundColor
toJavascriptStyleName() permet de transformer un style composé avec tiret en un style format javascript
sur les autres nom de style, rien ne se produit
---------------------------- */
var modele= /-/;
while(modele.test(text)){
var pos=text.search(modele);
text=text.substring(0, pos) + text.charAt(pos+1).toUpperCase() + text.substring(pos+2, text.length);
}
return text;
}, //
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 = claude.prototype.dom.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;
},
fin: ""
}; //end of style
claude.prototype.ajax = { //fait appel à cnx_class.php - version professionelle
/** http://www.siteduzero.com/tutoriel-3-100294-l-objet-xmlhttprequest.html */
allResponseHeaders: false, //return un ensemble de propriétés
server: false, //type du serveur qui retourne la réponse
contentType: false, //text/html; application/xml; text/plain
getArgument: function (objetAppelant) { //lit et met en forme les formulaires pour transmissions des arguments
//liste tous les éléments du formulaire
var argument="";
for (var i=0;i ne contient pas
else callback(xhr.responseXML); // xhr.responseXML ou xhr.responseText
}
}
xhr.open("POST", pagePHP, true); //Pour FF, il faut être en mode asynchrone - le script n'attend pas la fin de la requete
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //Si vous utilisez la méthode POST, vous devez absolument changer le type MIME de la requête avec la méthode setRequestHeader , sinon le serveur ignorera la requête :
xhr.send(requete);
},
postSyn: function (pagePHP, requete) { // cnx().ajax.postSynchro("../2012_06/test_ajax.php", null);
/*
var synchrone = false; //le script va attendre que la requete AJAX vers le serveur soit faite pour se poursuivre: Utiliser dans xhr.open()
var asynchrone = true; //le script n'attend pas la fin de la requete: Utiliser dans xhr.open()
var methode = "POST"; // GET
exemple de requete associée: mode post!
var requete = "adresseIp=" + adresseIp;
*/
var xhr = claude.prototype.ajax.getXMLHttpRequest();
claude.prototype.ajax.contentType = false; //force à false, même avec requete = null renvoi html si exécution correcte, même en abscence de echo dans pagePHP
//pas de readystatechange avec le mode synchronisation
xhr.open("POST", pagePHP, false); //mode synchronisation, le script attend la réponse du serveur
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //Si vous utilisez la méthode POST, vous devez absolument changer le type MIME de la requête avec la méthode setRequestHeader , sinon le serveur ignorera la requête :
xhr.send(requete);
claude.prototype.ajax.allResponseHeaders = xhr.getAllResponseHeaders(); //retourne toutes les caractéristiques
claude.prototype.ajax.server = xhr.getResponseHeader('Server'); //type du serveur
claude.prototype.ajax.contentType = xhr.getResponseHeader('Content-Type'); // xml; plain; html ... - type de response par le serveur
/*Détermine si response est de type xml ou pas */
if ( claude.prototype.ajax.contentType.indexOf("xml") == -1) return xhr.responseText; //pour mémoire si (indexOf == -1) => ne contient pas
else return xhr.responseXML; // xhr.responseXML ou xhr.responseText
},
phpPostSyn: function (){//permet d'appeler une fonction PHP depuis javascript méthode post mode synchro, admet un paramètre en retour, attente du serveur
/* ----------------------------
var echo = cnx().ajax.phpPostSyn(strPagePHP, strFonctionPHP, a, b);
reçoit à minima 2 paramètres
arguments[0]: type String; contient le nom de la page PHP contenant la fonction PHP à appeler, doit avoir un include read_parametre3.inc ou équivallent pour fonctionner
arguments[1]: type String; contient le nom de la fonction PHP à appeler
arguments[x >+ 2]: les autres arguments transmis à la fonction PHP
----------------------- */
var pagePHP = arguments[0]; //page PHP contenant la fonction PHP à appeler
var fonctionPHP = arguments[1]; // nom de la fonction php à appeler
var requete = "cnxFunc=" + fonctionPHP;
for (x=2; x 2]: les autres arguments transmis à la fonction PHP
----------------------- */
var pagePHP = arguments[0]; //page PHP contenant la fonction PHP à appeler
var fonctionPHP = arguments[1]; // nom de la fonction php à appeler
var callback = arguments[2]; // fonction appelée en callback par le mode Asynchrone - pas d'attente du serveur
var requete = "cnxFunc=" + fonctionPHP;
for (x=3; x"+ noeud.nodeName +" | Type "+ noeud.nodeType+" | "+ noeud.childNodes.length+ " fils" + "";
var valeur = cnx(noeud).xml.getValue();
result += valeur + "";
for(var i = 0; i";
}
}
}
}
},
searchNodesByName: function (nom){ //Parcours un noeud et renvoie les noeuds fils selon leur nom
/* ---------------------------------------------------------------
var tab = cnx(noeud).xml.searchNodesByName("channel");
Parcours un noeud et retourne un Array() avec les noeuds trouvés correspondant au nom demandé:
-------------------------------------------------------------------- */
var elt = claude.prototype.dom.getElt(); //retourne Object if exist
if (elt == null) return false; //
var isChildren = elt.hasChildNodes(); //cherche si des enfants existe
if (isChildren){ // il existe des enfants
var tab = new Array(); //déclaration du tableau pour le retour
var nodeList = elt.childNodes;
for (var i = 0; i < nodeList.length; i++) {
var noeudXML = nodeList[i];
var name = cnx(noeudXML).xml.getName(); // as String - équivallent à elt.nodeName
if (nom == name) tab.push(nodeList[i]); //si l'element est trouvé, on l'ajoute au tableau
}
if (tab.length) return tab;
else return false;
}
return false;
},
rssReader: function (filename, nombre){ //filename as String et nombre as Number
//var texte = cnx().xml.rssReader(filename); //affiche toutes les lignes - nombre est omis
//var texte = cnx().xml.rssReader(filename, 30); //pour afficher les 30 premières lignes
var rssDoc = claude.prototype.xml.xmlOpen(filename); //ouvre un fichier xml /rss
var racine = cnx(rssDoc).xml.getRacine(); //retourne le noeud racine du document xml/rss
var name = cnx(racine).xml.getName(); // as String - retourne le nom du noeud
//alert(name);
if (name == "rss"){ // c'est un document rss
var contenu = ""; //contenu du flux rss
var attributs; //déclaration de variable pour la liste des attributs
var tab = cnx(racine).xml.searchNodesByName("channel"); //Dans un flux RSS le premier élément de la racine est
var channel = tab[0]; //channel est un noeud - admet une propriété nodeName = "channel"
var tab = cnx(channel).xml.searchNodesByName("title"); //on cherche le noeud
var title = tab[0];
var titre = cnx(title).xml.getValue(); //as String
//alert(valeur);
contenu += "" + titre + " "; //écrit le titre du flux rss
var tab = cnx(channel).xml.searchNodesByName("item"); //on cherche les noeuds - contenu dans
//pour chaque - on recherche les éléments à afficher
if (!nombre) var nombre = tab.length; //donne une valeur par défaut
if (tab.length < nombre) nombre = tab.length; //vérifie que la liste affichée soit au moins égale au nombre d'éléments présents
for (var i =0; i < nombre; i++){ //nous allons parcourir le tab des
-
var noeud = tab[i]; //noeud est un des
- contenu dans
var tab2 = cnx(noeud).xml.searchNodesByName("title"); //on cherche le noeud contenu dans -
var title = tab2[0]; //noeud
var titleValue = cnx(title).xml.getValue(); //as String
var tab2 = cnx(noeud).xml.searchNodesByName("link"); //on cherche le noeud contenu dans -
var link = tab2[0]; //noeud
var linkValue = cnx(link).xml.getValue(); //as String
var tab2 = cnx(noeud).xml.searchNodesByName("description"); //on cherche le noeud contenu dans -
var description = tab2[0]; //noeud
var descriptionValue = cnx(description).xml.getValue(); //as String
var tab2 = cnx(noeud).xml.searchNodesByName("pubDate"); //on cherche le noeud contenu dans -
var pubDate = tab2[0]; //noeud
var pubDateValue = cnx(pubDate).xml.getValue(); //as String
pubDateValue = new Date(pubDateValue); //transforme la valeur en un objet Date()
pubDateValue = pubDateValue.setFormat("dd mmm yyyy"); //met enforme l'objet Date() et le renvoie as String
contenu += ''+titleValue+' ';
contenu += descriptionValue + " Publié le: " + pubDateValue + "
";
}
return contenu;
}
},
fin: ""
}; //end of xml
claude.prototype.mysql = { //fait appel à cnx_class.php - version professionelle
/*
var sql = "select * from book";
cnx().sql.sqlAsArray(sql, readData2);
function readData2(texte){ //texte est une String contenant ce qui est affiché par la page PHP appelée par le serveur via ajax
eval(texte); //exécute le code reçu; génère un Array nommé result[fields][rows] à deux dimensions
alert(result[x][y] + "\n Nombre de champs: " + result.length + " \n nombre d'enregistrements: " + result[0].length);
}
*/
mysqlAsArray: function(sql, callback){ //retourne le résultat de la requete as Array() - result[] contient les champs de la requête
var echo = cnx().ajax.phpPostAsyn(claude.prototype.divers.cnxClassPHP, "cnxMysql->mysqlAsArray", callback, sql);
},
mysqlAsTable: function(sql, callback){
var echo = cnx().ajax.phpPostAsyn(claude.prototype.divers.cnxClassPHP, "cnxMysql->mysqlAsTable", callback, sql);
},
mysqlAsCSV: function(sql, callback, fichier){
if (!fichier) fichier = "";
var echo = cnx().ajax.phpPostAsyn(claude.prototype.divers.cnxClassPHP, "cnxMysql->mysqlAsCSV", callback, sql, fichier);
},
mysqlAsXML: function(sql, callback, fichier){
if (!fichier) fichier = "";
var echo = cnx().ajax.phpPostAsyn(claude.prototype.divers.cnxClassPHP, "cnxMysql->mysqlAsXML", callback, sql, fichier);
},
fin: ""
}; //end of sql
claude.prototype.file = { //fait appel à cnx_class.php - version professionelle
/* --------------------------------------
nécessite le fichier "cnx_class.php" pour fonctionner
gère les entrées sorties pour les fichiers depuis javascript
---------------------------------------- */
version: "version: 2013 Fevrier 09",
author: claude.prototype.divers.author,
licence: claude.prototype.divers.licence,
saveFile: function(csv, file, mode, callback){
/* -------------
csv as String - contient les données à sauvegarder => var csv = cnx("table").table.getTableAsCSV();
file as String - contient URL relative du fichier où sauvegarder les données
callback as Function
mode as String: "r" => read; "w" => write; "a" => add-ajout; le signe + indique lecture et écriture pour chacune des options - exemple "a+";"w+", "r+"
exemple d'appel:
function readData2(texte){ //texte est une String contenant ce qui est affiché par la page PHP appelée par le serveur via ajax
if(texte) alert("file " + texte + " saved!");
}
var csv = "texte1;texte2";
var file = "essai.csv";
var temp = cnx().file.saveFile(csv, file, readData2);
---------------- */
var echo = cnx().ajax.phpPostAsyn(claude.prototype.divers.cnxClassPHP, "cnxFiles->saveFile", callback, csv, file, mode);
},
readFile: function(file, callback){
/* -----------------------
file as String - contient URL relative du fichier où lire les données
callback as Function
exemple d'appel:
function readData3(texte){
//alert(texte); //texte est le contenu du fichier - texte as String
var table = cnx().table.setDomTableFromCSV(texte); //génère un objet Dom table
document.body.appendChild(table); //écrit l'objet table dans body
}
var file = "essai.csv";
var temp = cnx().file.readFile(file, readData3);
--------- */
var echo = cnx().ajax.phpPostAsyn(claude.prototype.divers.cnxClassPHP, "cnxFiles->readFile", callback, file);
},
listDossier: function(path, callback){
/* ----------------------------
var path = '.';
var callback = readData;
cnx().file.listDossier(path, callback);
function readData(texte){ //fonction de callback - affiche les données retournées par le serveur php
eval(texte);
var liste = "";
for (var x=0; x < cnxResult.length; x++){ //le serveur retourne un Array() nommé cnxResult
liste += cnxResult[x] + "";
}
var ancrage = document.getElementById("ancrage");
ancrage.innerHTML = liste;
}
------------------- */
var echo = cnx().ajax.phpPostAsyn(claude.prototype.divers.cnxClassPHP, "cnxFiles->listDossier", callback, path);
},
end: ""
}; //end of file
claude.prototype.table = {
/* --------------------------------------
var table = claude.prototype.dom.getElt(); //retourne un objet si il existe, gère les id
var nombreLignes = table.rows.length;//nombre de lignes du tableau
var nombreColonnes = table.rows[0].cells.length;//nombre de colonnes de la ligne 0
---------------------------------------- */
getTableAsArray: function(){ // retourne un Array() contenant les cellules de la HTML
/* -----------------
Parcours toutes les cellules de la HTML
et retourne un Array() à 2 dimensions
table est l'ensemble de la table ou une section de cette table thead tbody tfoot
var tab = cnx("table").table.getTableAsArray(); //génère un Array() à 2 dimensions contenant les données de la HTML
var table = cnx().table.setHtmlTableFromArray(tab); //génère une HTML depuis un Array() à 2 dimensions
--------------------------------- */
var table = claude.prototype.dom.getElt(); //retourne un objet si il existe, gère les id
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 arrayCellsTable = new Array();
for (var x=0; x < nombreLignes; x++){
arrayCellsTable[x] = new Array; //ne pas mettre var dans cette déclaration
for(var y = 0; y < nombreColonnes; y++){
arrayCellsTable[x][y] = table.rows[x].cells[y].innerHTML;
}
}
return arrayCellsTable; //array() à deux dimensions
},
setHtmlTableFromArray: function(tabArray){ //génère une HTML depuis un Array() à 2 dimensions
var nombreLignes = tabArray.length;
if (!tabArray[0]) return false; //gestion erreur si le Array() n'a pas deux dimensions
var nombreColonnes = tabArray[0].length;
var table = "";
for (var x = 0; x < nombreLignes; x++){
table += "";
for(var y = 0; y < nombreColonnes; y++){
table += ""+tabArray[x][y]+" "
}
table += " ";
}
table += "
"; // HTML
return table; //balise
},
getTableAsCSV: function(){ // retourne une chaine String CSV contenant les cellules de la HTML
/* -----------------
Parcours toutes les cellules de la HTML
et retourne une chaine CSV pour écriture d'un fichier
table est l'ensemble de la table ou une section de cette table thead tbody tfoot
var csv = cnx("table").table.getTableAsCSV(); //génère une chaine CSV contenant les données de la HTML
var table = cnx().table.setHtmlTableFromCSV(csv); //génère une HTML depuis une chaine CSV => as String
var ancrage = document.getElementById("button2Html");
ancrage.innerHTML = table; // ou encore document.write(table);
var table = cnx().table.setDomTableFromCSV(csv); //génère une DOM depuis une chaine CSV => as Object
ancrage = document.getElementById("button2Dom");
ancrage.appendChild(table); //ou encore document.body.appendChild(table);
--------------------------------- */
var table = claude.prototype.dom.getElt(); //retourne un objet si il existe, gère les id
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 CSV = "";
var separateur = ";";
var retourLigne = "\r\n";
var reg1 = new RegExp("()|(
)", "gi"); //gi - g: pour toutes les occurences i: pour non sensible à la casse minuscules et majuscules - | permet de fournir une autre chaine
var contenu;
for (var x=0; x < nombreLignes; x++){
for(var y = 0; y < nombreColonnes; y++){
contenu = table.rows[x].cells[y].innerHTML; //contenu de la cellule ligne x - colonne y
contenu = contenu.replace(reg1, ""); //supprime les caractères de reg - donc les paragraphes html
contenu = claude.prototype.log.trim(contenu); //supprime les caractères indésirables comme retour chariot...
CSV += contenu + separateur;
}
CSV = CSV.substring(0,CSV.length-1);;// supprime le dernier separateur
CSV += retourLigne;
}
return CSV; //chaine CSV
},
setHtmlTableFromCSV: function(chaineCSV, separateur, retourLigne){ //génère une HTML depuis une chaine CSV => as String
/* -----------------------
var csv = cnx("table").table.getTableAsCSV(); //génère une chaine CSV contenant les données de la HTML
var table = cnx().table.setHtmlTableFromCSV(csv);
document.write(table);
------------ */
(separateur) ? separateur = separateur : separateur = ";";
(retourLigne) ? retourLigne = retourLigne : retourLigne = "\r\n";
var table = "";
var lignes = chaineCSV.split(retourLigne); //as Array()
var colonnes; //as Array()
for (var x = 0; x < lignes.length; x++){ //parcours les lignes et les lit une à une
table += "";
colonnes = lignes[x].split(separateur);
for (var y = 0; y < colonnes.length; y++){ //parcours les colonnes dans chaque ligne et les lit colonne par colonne
table += "" + colonnes[y] + " ";
}
table += " ";
}
table += "
";
return table;
},
setDomTableFromCSV: function(chaineCSV, separateur, retourLigne){ //génère une DOM depuis une chaine CSV => as Object
/* ------------------
Le principe de création d'une via le dom provient de:
http://www.nyamsprod.com/tutorial/dom/16/
http://books.google.fr/books?id=HVWbcSNKfRUC&pg=PA145&lpg=PA145&dq=cr%C3%A9ation+d%27une+table+via+append+child&source=bl&ots=K04GBz3sfl&sig=usM1xTOizyF4lUAJ3QbjBWnM0mQ&hl=fr&sa=X&ei=q_sLUc-MOuSZ0QWL0oDAAg&ved=0CDgQ6AEwAQ#v=onepage&q=cr%C3%A9ation%20d%27une%20table%20via%20append%20child&f=false
var csv = cnx("table").table.getTableAsCSV(); //génère une chaine CSV contenant les données de la HTML
var table = cnx().table.setDomTableFromCSV(csv);
document.body.appendChild(table);
----------------------- */
(separateur) ? separateur = separateur : separateur = ";";
(retourLigne) ? retourLigne = retourLigne : retourLigne = "\r\n";
//1) setting tbody node
var lignes = chaineCSV.split(retourLigne); //as Array()
var colonnes; //as Array()
var tbody = document.createElement("TBODY");
//alert("nombre de lignes dans la chaine CSV: " + lignes.length);
for(var x = 0; x < lignes.length; x++){ //parcours chaque ligne
var resultat = lignes[x].indexOf(";"); //recherche si ; est contenu dans la line
//alert("contenu de la ligne de la chaine CSV: " + lignes[x]);
if (resultat != -1){ //la ligne n'est pas vide
var tr = document.createElement("TR");
colonnes = lignes[x].split(separateur);
for (var y = 0; y < colonnes.length; y++){ //parcours chaque colonne de chacune des lignes
var td = document.createElement("TD");
var td_text = colonnes[y] ;
td_text = document.createTextNode(td_text);
td.appendChild(td_text); //td.setInnerHTML("contenu de la cellule");
tr.appendChild(td);
}
tbody.appendChild(tr);
}
}
/* --------------
//2) setting thead and tfoot
var thead = document.createElement("THEAD");
var tfoot = document.createElement("TFOOT");
var trTitle = document.createElement("TR");
for (var j = 0; j < colonnes.length; j++){
var th = document.createElement("TH");
th.appendChild(document.createTextNode("colonne " + j));
trTitle.appendChild(th);
}
thead.appendChild(trTitle.cloneNode(true));
tfoot.appendChild(trTitle.cloneNode(true));
*/
/* -------------------
//3) setting caption
var caption = document.createElement("CAPTION");
var caption_text = "ceci est un tableau de "+lignes.length;
caption_text += " lignes et de"+colonnes.length +" colonnes";
caption_text += " publié à l'aide du DOM";
caption_text = document.createTextNode(caption_text);
caption.appendChild(caption_text);
*/
var table = document.createElement("TABLE"); //4) setting table
//table.appendChild(caption);
//table.appendChild(thead);
//table.appendChild(tfoot);
table.appendChild(tbody);
table.setAttribute("border", "1");
return table; //
//document.getElementById("ancrage").appendChild(table); //5) appending table to the document tree
},
setScroll: function(hauteur){ //applique un scroll sur une table - hauteur as Number
/* ------------------------------
var table = "tableScroll".getElt();
table.setScroll(100); //scroll au-delà de "100px" de hauteur
Obtenir le parent de la table
Redimensionne chaque cellule afin que la première ligne soit de même largeur que les autres lignes.
Obtenir la première ligne de la table
Créer une tableClone_thead qui contient une copie de la première ligne de la table
Mettre en mode hide les td et th de la première ligne de la table - line0.style.display = "none";
Créer une div qui contiendra la table
Créer un container pour cet ensemble - type span afin de pouvoir se comporter comme du texte - "relative" et container.style.display = "inline-block";
Le parent doit contenir le container type span qui lui-même contient tableClone_thead et la div
-------------------------- */
var table = claude.prototype.dom.getElt(); //retourne un objet si il existe, gère les id - identifie la table à scroller!
if (!hauteur) var hauteur = 100; //hauteur des éléments afficher, au-delà le scroll s'active
if ( table.getAttribute("align") != null ) table.setAttribute("align", null); // si attribut align; on le supprime
chargeStyles(); //charge les styles className = cnxTableScroll"
if ( !table.isClassName("cnxTableScroll") ) cnx(table).style.addClassName("cnxTableScroll"); //marque la table comme scrollable
if (table.id == null) table.id = "cnx" + claude.prototype.generatePassword(8); //id par défaut de la table
table.setAttribute("cellPadding", 0); //espace entre le texte et la cellule
table.setAttribute("cellSpacing", 0); //espace entre les cellules
/*
for (var line = 0; line < table.rows.length; line++){ //parcours chaque cellule de la table
for (var cell = 0; cell < table.rows[line].cells.length; cell++){
table.rows[line].cells[cell].className = "cnxTableScroll";
table.rows[line].cells[cell].style.backgroundColor = "red";
}
}
*/
/*dimensionne la table en fonction de la largeur de chacune de ses cellules*/
var cellules = table.rows[0].cells; //collection cellules
for (var x=0; x1){ //parcours toutes les lignes sauf l'indice 0
tableClone_thead.deleteRow(-1); // détruit la dernière ligne
}
var line0 = table.rows[0]; //première ligne de table
line0.style.display = 'none'; //masque la ligne
}
else { // autre navigateur que IE <=8
var tableClone_thead = table.cloneNode(false); //génère un double de la table sans ses enfants.
var line0 = table.rows[0]; //première ligne de table
tableClone_thead.appendChild(line0); //transfère la ligne 0 dans la table Clone
}
tableClone_thead.id = table.id + "_thead";
//line0.style.display = 'none'; //masque la ligne - pour ré-afficher la ligne: line0.style.display = "";
/*créer une div qui contiendra la table*/
var div = document.createElement("div");
div.id = table.id + "_div_tbody";
//div.style.overflowX = "hidden"; //axe des XX - overflow-x
div.style.overflowY = "auto"; //auto axe des YY
div.style.height = 150 + "px";
div.style.backgroundColor = "#FFFFB4";
div.style.width = (largeur + 17) + "px"; //17 = épaisseur des barres ascenseurs
var container = document.createElement("span");//créer le container
container.id = table.id + "container";
container.style.border = "1px solid #000000"; // style.border = "width style color";
container.style.backgroundColor = "#999999";
parentTable.insertBefore(container, table); //positionne le container avant table dans la page HTML; le container occupe maintenant l'emplacement de table!
container.appendChild(tableClone_thead); //container contient tableClone_thead
container.appendChild(div); //container contient également div
div.appendChild(table); //la div contient la table
container.style.position = "relative";
container.style.display = "inline-block"; //avec position relative et inline-block le container se comporte comme du texte vis à vis de son emplacement dans la page web
function chargeStyles(){
var style = ".cnxTableScroll {}";
style += ".cnxTableScroll table{}";
style += ".cnxTableScroll td{";
style += "border-left-color: #808080;";
style += "border-left-style: dotted;";
style += "border-left-width: thin;";
style += "border-top-color: #808080;";
style += "border-top-style: dotted;";
style += "border-top-width: thin;";
style += "text-overflow:ellipsis;";
style += "}";
style += ".cnxTableScroll th{";
style += "border-left-color: #808080;";
style += "border-left-style: dotted;";
style += "border-left-width: thin;";
style += "text-overflow:ellipsis;";
style += "}";
claude.prototype.style.appendStyle(style); //charge le style className = "cnxTableScroll"
}
},
setFilter: function(){ //applique un filtre à une table html
/* -------------------
obtenir la table
parcours la première ligne et ajoute un bouton filtre
Exécution d'un filtre
parcours chaque ligne de la table et teste les conditions du filtre - conditions as Array()
si conditions true, on affiche ligne - pour afficher la ligne: line0.style.display = "";
dans le cas contraire on masque la ligne - line0.style.display = 'none'; //masque la ligne
------------------ */
var table = claude.prototype.dom.getElt(); //retourne un objet si il existe, gère les id - identifie la table à scroller!
var appel = arguments[0]; // si appel contient la fonction a appelée, il est possible d'appeler directement une fonction inclue dans setFilter()
//if ( table.getAttribute("align") != null ) table.setAttribute("align", null); // si attribut align; on le supprime ???? est-ce utile ici???
if ( !table.isClassName("cnxTableFilter") ) cnx(table).style.addClassName("cnxTableFilter"); //marque la table comme filtrable
if (table.id == null) table.id = "cnxTableFilter" + claude.prototype.generatePassword(8); //alloue un id par défaut
var conditions = new Array(); // contient les conditions de filtrage pour chaque colonne
var cellules = table.rows[0].cells; //Array() contenant les cellules de la première ligne
addButtonFilters(); //ajoute chaqu'un des boutons de filtre
addButtonMenu(); //ajoute le bouton gérant le menu de l'applicatif
function addButtonFilters(){ //affiche tous les boutons de filtre
for (var x = 0; x < cellules.length; x++){ //ajoute un bouton de filtre pour chaque colonne
conditions[x] = "."; //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[x]; //cellule contenant le titre
addButtonFilter(x); //ajoute un bouton de filtre pour chaque colonne
}
}
function addButtonMenu(){ //ajoute le bouton d'accès au menu
var menuBtn = document.createElement("BUTTON"); //prépare le boutton à ajouter
menuBtn.setAttribute("id", table.id + "-MenuButton-" + 0);
menuBtn.setAttribute("title", "Menu");
var Texte = "M" + "nu".sub(); //sub() met le texte en indice
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 = cnx(cellule).dom.getTypeChilds("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("click", afficheMenu);
};
function afficheMenu(e){ //affiche le menu de l'applicatif avec ces boutons
var left = claude.prototype.event.pageScrollX(e); //coordonnées de la souris
var top = claude.prototype.event.pageScrollY(e); //coordonnées de la souris
var menuDiv = document.createElement("div"); //prépare la div à ajouter
menuDiv.setAttribute("id", table.id + "-MenuDIV-" + 0);
menuDiv.style.width = "150px";
menuDiv.style.height = "100px";
menuDiv.style.borderColor = "#ff0000";
menuDiv.style.borderStyle = "solid";
menuDiv.style.borderWidth = "1px";
var btnFiltersDeleteAll = document.createElement("BUTTON"); //prépare le boutton à ajouter
btnFiltersDeleteAll.setAttribute("id", table.id + "-boutonFiltersDelete-" + 0);
btnFiltersDeleteAll.style.backgroundColor = "grey";
var texte = "F" + "ilters Delete All".sub(); //sub() met le texte en indice
var texte = ' X ';
btnFiltersDeleteAll.setAttribute("title", "Del All Filters");
btnFiltersDeleteAll.innerHTML = texte; //ajoute le texte du bouton qui admet une propriété innerHTML
document.body.appendChild(menuDiv); //génère visuellement la div dans body
menuDiv.style.left = left+"px";
menuDiv.style.top = top+"px";
menuDiv.style.position = "absolute";
menuDiv.appendChild(btnFiltersDeleteAll); //ajoute le bouton dans la div
btnFiltersDeleteAll.addEvent("tap", filtersDelete); //si click efface tous les filtres
}
function createZoneCritere(e, colonne){ //genere une input texte pour saisir les critères du filtre as regExpr
//alert(table.id + " : "+ colonne);
var cible = cnx().event.getTarget(e); //table.rows[0].cells[colonne];
var cellule = cnx(cible).dom.getTagParent("th");
if (!cellule) var cellule = cnx(cible).dom.getTagParent("td");
//var table = cnx(cible).dom.getTagParent("table");
//alert(table.id);
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, cellule); //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, cellule); //recalcule les conditions et applique le nouveau filtre
});
}
function addButtonFilter(colonne){ //ajoute un bouton pour le filtre
var cellule = table.rows[0].cells[colonne];
var btn = document.createElement("BUTTON"); //prépare le boutton à ajouter
btn.setAttribute("id", table.id + "-bouton-" + colonne);
btn.style.backgroundColor = "grey";
var Filter = "F" + "lt".sub(); //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 = cnx(cellule).dom.getTypeChilds("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.appendChild(btn); //on ajoute le bouton
}
else { //pas de ELEMENT_NODE trouvé!
var tab = cnx(cellule).dom.getTypeChilds("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
cnx(node).dom.removeElt(); //on détruit l'élément texte
}
var paragraphe = document.createElement("p"); //on crée un paragraphe
if (texte) paragraphe.innerHTML = texte; //ajoute le texte mémorisé si il existe
cellule.appendChild(paragraphe); //ajoute le paragraphe à la cellule
paragraphe.appendChild(btn); //ajoute le bouton au paragraphe
}
btn.addEvent("tap", 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 = cnx(cible).dom.getTagParent("table");
createZoneCritere(e, colonne);
});
}
function actualiseConditions(e, cellule){ //sauvegarde la condition de filtre et appelle la fonction de filtrage
//var table = cellule.getTable();
//cellule.isWhat();
var colonne = cellule.getCol();
var zoneCritere = cnx().event.getTarget(e); //target, cible
conditions[colonne] = zoneCritere.value; //memorise la valeur du filtre pour cette colonne
var bouton = document.getElementById(table.id + "-bouton-" + colonne); //identifie le bouton associé
if (zoneCritere.value == "" || zoneCritere.value == ".") bouton.style.backgroundColor = "grey";
else bouton.style.backgroundColor = "yellow";
filtreTable(conditions); //filtre la table en fonctions des conditions
cnx(zoneCritere).dom.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;
for (var x = 1; 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.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 test = expReg.test(cellule.innerHTML);
//alert("regular: " + expReg + " in "+ cellule.innerHTML + " is " + test);
return test;
}
}
function filtersDelete(){ //supprime tous les filtres et détruit le menu
var btn;
for(var x = 0; x < conditions.length; x++){
conditions[x] = "";
btn = (table.id + "-bouton-" + x).getElt();
btn.style.backgroundColor = "grey";
}
filtreTable(conditions); //détruit tous les filtres en les appliquant avec conditions = vide
var eltMenu = document.getElementById(table.id + "-MenuDIV-" + 0);
cnx(eltMenu).dom.removeElt(); //il faut détruire le menu
}
return true;
},
getWidthCol: function(col){ // retourne la largeur actuelle d'une colonne
var table = claude.prototype.dom.getElt(); //retourne un objet si il existe, gère les id
var arrayColonne = table.getArrayCol(col); //retourne un array contenant toutes les cellules de la colonne
var largeur = 0;
for (var x=0; x < arrayColonne.length; x++){
var largeur2 = cnx(arrayColonne[x]).style.getWidth(); //donne la largeur de chaque cellule de la colonne
largeur = (largeur > largeur2) ? largeur : largeur2; // le plus grand des 2
}
return largeur; //integer
},
getArrayCol: function(col){ // retourne un array() à 1 dimension contenant toutes les cellules d'une colonne dans une table
/* -----------------
retourne un Array à 1 dimension contenant
toutes les cellules de la colonne
--------------------------------- */
var table = claude.prototype.dom.getElt(); //retourne un objet si il existe, gère les id
var col = (col) ? col: 0;
var nombreLignes = table.rows.length;//nombre de lignes du tableau
var nombreColonnes = table.rows[0].cells.length;//nombre de colonnes de la ligne 0; c'est également le nombre de cellules de la ligne 0
if( col < nombreColonnes){
var arrayCellsCol = new Array();
for (var x=0; x 0 ? elts[0] : false;
};
Element.prototype.getArrayChilds = function (tagName){ //retourne les enfants correspondant à tagName sous forme d'un Array()
//elt.getChilds(); //retourne les enfants sous forme d'une collection d'enfants
//
var elt = this; //retourne Object if exist
var tab = new Array();
if (!tagName) { //retourne tous les enfants
for (var i = 0; i < elt.childNodes.length; i++) {
tab[i] = elt.childNodes[i]; //penser à string.split(separateur)
}
}
else { //retourne les enfants coorespondant au tagName
var tagName = tagName.toUpperCase();
for (var i = 0; i < elt.childNodes.length; i++) {
if (elt.childNodes[i].tagName == tagName) tab[i] = elt.childNodes[i]; //penser à string.split(separateur)
};
};
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;
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
cnx(elt).style.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" ;
cnx(isDrag).style.setLeft(x + offsetX);
cnx(isDrag).style.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){
cnx(isDrag).style.setLeft( cnx().event.pageScrollX(e) + offsetX);
cnx(isDrag).style.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
//alert("l'objet: "+ isDrag.nodeName + " a été ajouté à: " + isDrop.nodeName + " : " + isDrop.innerHTML); // test seulement!
}
}
function mouseoverDrop(e){//modifie la couleur d'un conteneur - effet visuel
isDrop = cnx().event.getTarget(e); //cible de event mouseover
if (!cnx(isDrop).style.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
cnx(elt).event.addEvent("touchstart", touchStartSelect); //document.onmousedown = touchStartSelect;
cnx(document).event.addEvent("touchmove", touchMoveDrag); //document.onmousemove = cnx.dragdrop.touchMoveDrag;
cnx(document).event.addEvent("touchend", touchEndRaz); //document.onmouseup=new Function("isDrag = false"); click ou mouseup?
cnx(document).event.addEvent("mouseover", mouseoverDrop); //
cnx(document).event.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;
var styleDrop = ".cnxDrop:hover {background-color: green; cursor: crosshair; }"; //Style cnxDrop identifie les objets droppable - conteneur
//isDrop.style.cursor = "crosshair";
cnx(elt).style.addClassName("cnxDrop"); //affecte la classeName à l'elt droppable
cnx().style.appendStyle(styleDrop); //ajoute le style className ".cnxDrop"
}
Element.prototype.setScroll = function(hauteur){ //applique un scroll sur une table - hauteur as Number - pour Safari qui n'exploite pas la collection HTMLTableElement
/* ------------------------------
var table = "tableScroll".getElt();
table.setScroll(100); //scroll au-delà de "100px" de hauteur
-------------------------- */
var table = this; //identifie la table à scroller!
if (!hauteur) var hauteur = 100; //hauteur des éléments afficher, au delà on scroll
if ((table.tagName).toLowerCase() == "table") cnx(table).table.setScroll(hauteur); //pour Safari qui n'exploite pas la collection HTMLTableElement
}
Element.prototype.setFilter = function(){ //applique un filtre à une table html - pour Safari qui n'exploite pas la collection HTMLTableElement
var table = this; //identifie la table à scroller!
if ((table.tagName).toLowerCase() == "table") cnx(table).table.setFilter(); //pour Safari qui n'exploite pas la collection HTMLTableElement
}
Element.prototype.getCol = function(){ //applique un filtre à une table html - pour Safari qui n'exploite pas la collection HTMLTableElement
var cellule = this; //identifie la table à scroller!
if ((cellule.tagName).toLowerCase() == "td" || (cellule.tagName).toLowerCase() == "th" ){
var col = cnx(this).cell.getCol(); //pour Safari qui n'exploite pas la collection HTMLTableElement
return col;
}
return false;
}
Element.prototype.getWidthCol = function(col){ // retourne la largeur actuelle d'une colonne
var table = this; //retourne un objet si il existe, gère les id
if( cnx(table).log.isTable() ) {
var largeur = cnx(table).table.getWidthCol(col);
return largeur; //integer
}
return false;
}
Element.prototype.getArrayCol = function(col){ // retourne un array() à 1 dimension contenant toutes les cellules d'une colonne dans une table
/* -----------------
retourne un Array à 1 dimension contenant
toutes les cellules de la colonne
--------------------------------- */
var table = this; //retourne un objet si il existe, gère les id
if( cnx(table).log.isTable() ){
var arrayCellsCol = cnx(table).table.getArrayCol(col);
return arrayCellsCol; //contenu de la colonne identifiée par col, c'est un Array
}
return false;
};
Element.prototype.setWidthCol = function(strWidth, col){ // impose la largeur "strWidth" aux cellules contenues dans la colonne "col" de la table
var table = this; //retourne un objet si il existe, gère les id
if( cnx(table).log.isTable() ) cnx(table).table.setWidthCol(strWidth, col);
return parseInt(strWidth);
}
//log
Element.prototype.isWhat = function(){
alert(this + " est un élément HTML - collection Element ");
};
//style
Element.prototype.appendStyle = function (styles) {// permet ajouter un style CSS via un fichier js, le CSS est inclus dans le js
/* -------------------------------------------
Appending Style Nodes with Javascript by Jon Raasch
Permet d'ajouter des styles directement dans un js
Il faut définir les styles comme ceci:
var styles = '#header { color: red; font-size: 40px; font-family: Verdana, sans; }';
styles += ' .content { color: blue; text-align: left; }';
elt.appendStyle(styles);
ou encore
document.appendStyle(styles);
---------------------------------------- */
var css = document.createElement('style');
css.type = 'text/css';
if (css.styleSheet) css.styleSheet.cssText = styles;
else css.appendChild(document.createTextNode(styles));
document.getElementsByTagName("head")[0].appendChild(css); //ajoute le style
return true;
};
Element.prototype.isClassName = function (sClassName){//search className
//Cherche tous les syles de type className appliqué à un objet elt
//puis recherche si le style est trouvé dans l'ensemble de ces styles retourn true, retourne false si style non trouvé!
//var verif = elt.isClassName("my_classname");
var elt = this; //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(sClassName) { //ajoute un className
/* --------------------
var NFait = elt.addClassName("className");
--------------------- */
var elt = this; //retourne Object if exist
if(elt == false || elt == null) return null; //erreur sur elt
var s = elt.className;
var p = s.split(" ");
var l = p.length;
for (var i = 0; i < l; i++) {
if (p[i] == sClassName)
return; //renvoie undefined la classe existe déjà!
}
p[p.length] = sClassName;
elt.className = p.join(" ").replace( /(^\s+)|(\s+$)/g, "" );
return true;
};
Element.prototype.removeClassName = function(sClassName) {//retire un className
/* ----------------
elt.removeClassName("myClasseName");
----------------- */
var elt = this; //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(str_style) { //lit la valeur du style
/* -----------------------------------
getstyle() renvoie la valeur du style
id_element est l'identificateur de l'élément (div, img ...), donc String, mais gère aussi les object
style 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 Interger, voire #FFF ou rgb() ...
var reponse = elt.getStyle("background-color"); //"backgroundColor"
------------------------- */
var elt = this; //retourne Object if exist
if(elt == false || elt == null) return null; //erreur sur elt
var styleJavascript = str_style.toJavascriptStyleName(); //équivallent à claude.prototype.style.toJavascriptStyleName(str_style)
var str_value = (elt).style[styleJavascript]; //lecture des styles intégré au code HTML
if(!str_value){ //lecture de style dans un fichier CSS ou équivallent
if(document.defaultView) str_value = document.defaultView.getComputedStyle(elt, null).getPropertyValue(str_style); //FF et Opera
else if((elt).currentStyle) str_value = (elt).currentStyle[styleJavascript]; //IEX
};
if (str_value == "inherit") { //possède la propriét du parent
var parent = elt.getParent(1);
//alert(parent + " : "+ str_value + " => "+elt);
if (parent != document) parent.getStyle(str_style); //document n'a pas de style, on laisse inherit
};
return str_value; //String: => width: "100px", faire: parseInt(str_value) pour integer
};
Element.prototype.setStyle = function(str_style, str_value) { // applique un style
/* ------------------------------
setstyle() sert à définir, à appliquer une valeur à une style
(elt) est l'identificateur de l'élément: div, img, donc String, mais gère aussi les object
str_style est le nom du style à modifier: width, top, ... au format html avec tiret et String
str_value est la nouvelle valeur du style à appliquer à id_element
elt.setStyle("background-color", "blue");
----------------------------- */
var elt = this; //retourne Object if exist
//alert(elt.id);
if(elt == false || elt == null) return null; //erreur sur elt
//alert("classe style: " + elt.id);
var op_correct = false;
var styleJavascript = str_style.toJavascriptStyleName(); //équivallent à claude.prototype.style.toJavascriptStyleName(str_style)
if (elt) op_correct = (elt).style[styleJavascript] = str_value; //retourne str_value si opération correctement effectuée
//alert("op: "+op_correct);
return op_correct;
};
Element.prototype.getUnit = function(str_value){ // retourne l'unité utilisée; exemple: "px"
/* ----------------
var unité = elt.getUnit(); //ou document.getUnit();
on peut également utiliser: cnx().style.getUnit("100px");
-------------------- */
if (!str_value) str_value = claude.prototype.style.unit; //fourni une valeur par défaut
var modele = /[0-9]/g; //recherche tous les nombres
claude.prototype.style.unit = str_value.replace(modele, ""); //retourne la partie texte, donc l'unité utilisée
return claude.prototype.style.unit; //String
};
Element.prototype.getWidth = function(){ // retourne la largeur d'un élément
/* --------------------
var largeur = elt.getWidth();
-------------------- */
var elt = this; //retourne Object if exist
var str_value = elt.getStyle("width");
if (str_value == "auto"){ //gestion pour IE qui retourne auto si la table s'ajsute automatiquement à la fenetre
var largeur = elt.offsetWidth;
claude.prototype.style.unit = "px";
}
else {
var largeur = parseInt(str_value);
claude.prototype.style.unit = elt.getUnit(str_value); //unité utilisée: claude.prototype.style.unit
}
return parseInt(largeur); // c'est un 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 //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
//alert("getPos: "+x+" : "+y);
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.setWidth = function(str_value){ // impose la largeur d'un élément
var elt = this;
str_value = (claude.prototype.log.isString(str_value)) ? str_value : str_value + "px"; //vérifie que c'est un String
claude.prototype.style.unit = elt.getUnit(str_value); //unité utilisée: claude.prototype.style.unit
elt.setStyle("width", str_value); //applique le style
return parseInt(str_value); //retourne un integer
};
Element.prototype.getTrueLeft = function(){ // position left par rapport à la page y compris si ascenseur et parent en position absolue
/* var left = elt.getTrueLeft(); */
var position = this.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 position = this.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.getTrueHeight = function() { //taille réelle d'une image ici height
/* var hauteurRéelle = elt.getTrueHeight(); */
var elt = this; //retourne Object if exist
var newImg = new Image();// Declaration d'un objet Image
newImg.src = elt.src;// Affectation du chemin de l'image a l'objet
var h = newImg.height;// On recupere les tailles reelles
var w = newImg.width;// On recupere les tailles reelles
newImg = null; //détruit image
return h; //as integer
};
Element.prototype.getTrueWidth = function() { //largeur réelle d'un elt
/* var largeurRéelle = elt.getTrueWidth(); */
var elt = this; //retourne Object if exist
if ( elt.getTagName() == "img"){ //taille réelle d'une image ici width
var newImg = new Image();// Declaration d'un objet Image
newImg.src = elt.src;// Affectation du chemin de l'image a l'objet
var h = newImg.height;// On recupere les tailles reelles
var w = newImg.width;// On recupere les tailles reelles
newImg = null; //détruit image
return w; //as integer
}
if ( elt.getTagName() == "table"){ //largeur réelle d'une
var div = document.createElement("div"); //créer une div qui servira de contener au clone de table
div.style.border = "1px solid green"; //bordure pour visualiser à l'écran: ne sert à rien sauf control du programme!
//div.style.visibility = "hidden"; //masque la div pour ne pas perturber l'affichage de la page web
var tableclone = elt.cloneNode(true); //génère un double complet de la table y compris enfants
tableclone.style.border = "1px solid red"; //bordure pour visualiser à l'écran: ne sert à rien sauf control du programme!
div.appendChild(tableclone); //insère le double de la table dans la div
document.body.appendChild(div); //ajoute la table à
var largeurTable = cnx(tableclone).style.getWidth(); //largeur initiale de tableclone
var largeurDiv = cnx(div).style.setWidth(largeurTable); //initialise la largeur de
var boucle = true;
var iteration = 0;
var largeur;
while (boucle){ //largeur div <= largeur tableclone
largeur = largeurTable; //memorise largeur de la table
largeurDiv = cnx(div).style.setWidth(largeurTable+1000); //augmente de 1000 la largeur de la div par itération
largeurTable = cnx(tableclone).style.getWidth();
iteration ++; //incrémente iteration
if (largeur >= largeurTable) boucle = false;
//alert(boucle + " : " + iteration +" : " + largeurDiv +" : " + largeurTable +" : " + largeur)
}; //la table s'ajuste automatiquement jusqu'à être plus petite que la div
largeur = cnx(tableclone).style.getWidth();
//alert(largeur);
document.body.removeChild(div); //détruit l'objet div créé et le clone de la table qu'il contient, libère la mémoire et l'affichage; évite un fonctionnement en sonnette
return largeur; //pas de px, seulement un nombre as integer
}
else return "elt.getTrueWidth() pas traité par ce code";
};
Element.prototype.setTop = function(str_value){ //
/* var top = elt.setTop("hauteur"); */
str_value = (claude.prototype.log.isString(str_value)) ? str_value : str_value + "px"; //vérifie que c'est un String
claude.prototype.style.getUnit(str_value); //unité utilisée: claude.prototype.style.unit
var elt = this;
elt.setStyle("top", str_value); //applique le style
return parseInt(str_value); //retourne un integer
};
Element.prototype.getTop = function(){ //
/* var top = elt.getTop(); */
var elt = this; //retourne Object if exist
var str_value = elt.getStyle("top");
if (str_value == "auto") str_value = elt.offsetTop + "px"; //le px sert à alimenter le getUnit!
claude.prototype.style.getUnit(str_value); //unité utilisée: claude.prototype.style.unit
return parseInt(str_value); //integer
};
Element.prototype.setLeft = function(str_value){ //
/* var left = elt.setLeft("left"); */
var str_value = (claude.prototype.log.isString(str_value)) ? str_value : str_value + "px"; //vérifie que c'est un String
claude.prototype.style.getUnit(str_value); //unité utilisée: claude.prototype.style.unit
var elt = this;
elt.setStyle("left", str_value); //applique le style
return parseInt(str_value); //retourne un integer
};
Element.prototype.getLeft = function(){ //
/* var left = elt.getLeft(); */
var elt = this; //retourne Object if exist
var str_value = elt.getStyle("left");
if (str_value == "auto") str_value = elt.offsetLeft + "px"; //sert à mettre à jour getUnit()
claude.prototype.style.getUnit(str_value); //unité utilisée: claude.prototype.style.unit
return parseInt(str_value); //integer
};
Element.prototype.setPosition = function(strPosition){ // absolute ou relative
/* elt.setPosition(); */
var elt = this;
elt.setStyle("position", strPosition); //absolute, relative, static
return strPosition;
};
Element.prototype.getPosition = function(){
/* var position = elt.getPosition(); */
var strPosition = this.getStyle("position");
return strPosition;
};
Element.prototype.getRight = function(){ //
var elt = this; //retourne Object if exist
var str_value = elt.getStyle("right");
if (str_value == "auto") str_value = elt.offsetRight + "px";
claude.prototype.style.getUnit(str_value); //unité utilisée: claude.prototype.style.unit
return parseInt(str_value); //integer
}; //
Element.prototype.setRight = function(str_value){ //
var elt = this;
var str_value = ( str_value.isString() ) ? str_value : str_value + "px"; //vérifie que c'est un String
claude.prototype.style.getUnit(str_value); //unité utilisée: claude.prototype.style.unit
elt.setStyle("right", str_value); //applique le style
return parseInt(str_value); //retourne un integer
}; //
Element.prototype.getHeight = function(){ //
var elt = this; //retourne Object if exist
var str_value = elt.getStyle("height");
if (str_value == "auto") str_value = elt.offsetHeight + "px";
claude.prototype.style.getUnit(str_value); //unité utilisée: claude.prototype.style.unit
return parseInt(str_value); //integer
}; //
Element.prototype.setHeight = function(str_value){ //
var elt = this;
var str_value = ( str_value.isString() ) ? str_value : str_value + "px"; //vérifie que c'est un String
claude.prototype.style.getUnit(str_value); //unité utilisée: claude.prototype.style.unit
elt.setStyle("height", str_value); //applique le style
return parseInt(str_value); //retourne un integer
}; //
Element.prototype.setBottom = function(str_value){ //
var elt = this;
var str_value = ( str_value.isString() ) ? str_value : str_value + "px"; //vérifie que c'est un String
claude.prototype.style.getUnit(str_value); //unité utilisée: claude.prototype.style.unit
elt.setStyle("bottom", str_value); //applique le style
return parseInt(str_value); //retourne un integer
}; //
Element.prototype.getBottom = function(){ //
var elt = this; //retourne Object if exist
var str_value = elt.getStyle("bottom");
if (str_value == "auto") str_value = elt.offsetBottom + "px";
claude.prototype.style.getUnit(str_value); //unité utilisée: claude.prototype.style.unit
return parseInt(str_value); //integer
}; //
Element.prototype.setVisibility = function(strVisibility){ //
var elt = this;
if (strVisibility == true) var strVisibility = "visible";
if (strVisibility == false) var strVisibility = "hidden";
elt.setStyle("visibility", strVisibility);
return strVisibility;
}; //
Element.prototype.getVisibility = function(){ //
var elt = this;
var strVisibility = elt.getStyle("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.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; //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 (eventName, handler) {//
/*-----------------------------------
elt.addEvent("click", function(){affiche("essai3");} );
function affiche(texte){
alert("click sur div couche " + texte);
};
--------------------------------------*/
var elt = this;
cnx(elt).event.addEvent(eventName, handler);
return false;
}
Element.prototype.addEvents = function (eventName, handler) {//ajoute plusieurs event simultanément
/*-----------------------------------
elt.addEvent("click mousedown", function(){affiche("essai3");} );
function affiche(texte){
alert("click sur div couche " + texte);
};
--------------------------------------*/
var elt = this;
cnx(elt).event.addEvents(eventName, handler);
return false;
}
Element.prototype.triggerEvent = function (eventName){ //créer un nouvel event avec le trigger, elt est la cible
/* ----------------
elt.triggerEvent("myCustomEvent");
----------------------- */
var elt = this;
cnx(elt).event.triggerEvent(eventName); //eventName as String
return false;
}
}
if (Number){
//log
Number.prototype.isWhat = function(){
alert(this + " est un nombre - collection Number");
};
Number.prototype.isString = function(){
return false;
};
};
if (String){
//dom
String.prototype.getElt = function(){
var elt = document.getElementById(this);
if(elt == null) {
var tab = document.getElementsByName(this); //retourne un Array()
elt = tab[0];
if (elt == null && this.toLowerCase() == "document") return document;
if (elt == null && this.toLowerCase() == "window") return window;
if (elt == null || elt == undefined) alert(this + " ne retourne aucun élément! " + elt);
}
//alert(this + " : " + elt);
return elt;
}
String.prototype.getId = function(){
var elt = this.getElt();
var id = elt.id;
return id;
}
String.prototype.getParent = function(niv){// renvoi l'élément parent quelque soit son tag, juste le 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.getElt(); //retourne Object if exist
var parent = elt.getParent(niv);
return parent;
}
String.prototype.setHtmlTableFromCSV = function(separateur, retourLigne){ //génère une
HTML depuis une chaine CSV => as String
/* -----------------------
var csv = cnx("table").table.getTableAsCSV(); //génère une chaine CSV contenant les données de la HTML
var table = cnx().table.setHtmlTableFromCSV(csv);
document.write(table);
------------ */
var texte = this; //valeur de la chaine CSV
var table = cnx().table.setHtmlTableFromCSV(texte);
return table;
}
String.prototype.setDomTableFromCSV = function(separateur, retourLigne){ //génère une DOM depuis une chaine CSV => as Object
/* ------------------
Le principe de création d'une via le dom provient de:
http://www.nyamsprod.com/tutorial/dom/16/
http://books.google.fr/books?id=HVWbcSNKfRUC&pg=PA145&lpg=PA145&dq=cr%C3%A9ation+d%27une+table+via+append+child&source=bl&ots=K04GBz3sfl&sig=usM1xTOizyF4lUAJ3QbjBWnM0mQ&hl=fr&sa=X&ei=q_sLUc-MOuSZ0QWL0oDAAg&ved=0CDgQ6AEwAQ#v=onepage&q=cr%C3%A9ation%20d%27une%20table%20via%20append%20child&f=false
var csv = cnx("table").table.getTableAsCSV(); //génère une chaine CSV contenant les données de la HTML
var table = cnx().table.setDomTableFromCSV(csv);
document.body.appendChild(table);
----------------------- */
var texte = this; //valeur de la chaine CSV
var table = cnx().table.setDomTableFromCSV(texte);
return table;
}
//log
String.prototype.isWhat = function(){
alert(this + " appartient à la collection String ");
};
String.prototype.trim = function () { //retourne la chaîne sans les espaces au début et à la fin.
return this.replace(/^\s+|\s+$/g, "");
};
String.prototype.stripTags = function () {//Supprime les balises HTML et PHP d'une chaîne
/* ----------------------------
// http://kevin.vanzonneveld.net
// + original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + improved by: Luke Godfrey
// + input by: Pul
// + bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + bugfixed by: Onno Marsman
// + input by: Alex
// + bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + input by: Marc Palau
// + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + input by: Brett Zamir (http://brett-zamir.me)
// + bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + bugfixed by: Eric Nagel
// + input by: Bobby Drake
// + bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + bugfixed by: Tomasz Wesolowski
// + input by: Evertjan Garretsen
// + revised by: Rafal Kukawski (http://blog.kukawski.pl/)
---------------------------- */
// * example 1: strip_tags('Kevin
van Zonneveld ', '');
// * returns 1: 'Kevin van Zonneveld '
// * example 2: strip_tags(' Kevin van Zonneveld
', '');
// * returns 2: '
Kevin van Zonneveld
'
// * example 3: strip_tags("Kevin van Zonneveld ", "");
// * returns 3: ' Kevin van Zonneveld '
// * example 4: strip_tags('1 < 5 5 > 1');
// * returns 4: '1 < 5 5 > 1'
// * example 5: strip_tags('1 1');
// * returns 5: '1 1'
// * example 6: strip_tags('1 1', ' ');
// * returns 6: '1 1'
// * example 7: strip_tags('1 1', ' ');
// * returns 7: '1 1'
var allowed;
if (arguments.length) allowed = arguments[0]; //caractères autorisés à être conservé
var input = this; //chaine de caractère à traiter
allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join(''); // making sure the allowed arg is a string containing only tags in lowercase ()
var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
commentsAndPhpTags = /|<\?(?:php)?[\s\S]*?\?>/gi;
var chaine = input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {
return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
});
chaine = chaine.trim(); //supprime les espaces au début et fin de chaine
return chaine;
};
String.prototype.noaccent = function() { //retourne la chaîne sans les accents (Vous pouvez en ajouter)
return this.replace(/[àâä]/gi,"a").replace(/[éèêë]/gi,"e").replace(/[îï]/gi,"i").replace(/[ôö]/gi,"o").replace(/[ùûü]/gi,"u");
};
String.prototype.ucfirst = function() { //retourne la chaîne avec la première lettre en majuscule
return (this.length == 1)? this.toUpperCase():(this.substr(0,1).toUpperCase()+this.substr(1));
};
String.prototype.ucwords = function() { //retourne la chaîne avec la première lettre de chaque mot en majuscule
var words = this.split(" ");
var uwords = [];
for(var i = 0; i < words.length; i++) {
uwords.push( ((words[i]+"").length == 1) ? (words[i]+"").toUpperCase():((words[i]+"").substr(0,1).toUpperCase()+(words[i]+"").substr(1)) );
}
return uwords.join(" "); //transforme un tableau en une chaîne
};
String.prototype.isString = function(){
return true;
};
//style
String.prototype.appendStyle = function(styles){// permet ajouter un style CSS via un fichier js, le CSS est inclus dans le js
/* --------------
Il faut définir les styles comme ceci:
var styles = '#header { color: red; font-size: 40px; font-family: Verdana, sans; }';
styles += ' .content { color: blue; text-align: left; }';
"chaine".appendStyle(styles) //styles est une chaine de caractères décrivant un style
-------------------- */
var elt = this.getElt();
var reponse = elt.appendStyle(styles);
return reponse;
};
String.prototype.isClassName = function (sClassName){//search className
/* ------------
var verif = "myId".isClassname("my_classname");
----------------- */
var elt = this.getElt();
var reponse = elt.isClasName(sClassName);
return reponse;
};
String.prototype.addClassName = function(sClassName) { //ajoute un className
/* --------------------
var NFait = "chaine".addClassName("className");
--------------------- */
var elt = this.getElt();
var reponse = elt.addClassname(sClassName);
return reponse;
};
String.prototype.removeClassName = function(sClassName) {//retire un className
/* ----------------
"chaine".removeClassName("myClasseName");
----------------- */
var elt = this.getElt();
var reponse = elt.removeClassName(sClassName);
return reponse;
};
String.prototype.getStyle = function(str_style) { //lit la valeur du style
/* --------------------
var reponse = "chaine".getStyle("background-color"); //"backgroundColor"
------------------------- */
var elt = this.getElt();
var reponse = elt.getStyle(str_style);
return reponse;
};
String.prototype.setStyle = function(str_style, str_value) { // applique un style
/* ------------------------------
elt.setStyle("background-color", "blue");
----------------------------- */
var elt = this.getElt();
var reponse = elt.setStyle(str_style, str_value);
return reponse;
};
String.prototype.getUnit = function(str_value){ // retourne l'unité utilisée; exemple: "px"
/* ----------------
var unité = "chaine".getUnit();
-------------------- */
if (!str_value) str_value = claude.prototype.style.unit; //fourni une valeur par défaut
var modele = /[0-9]/g; //recherche tous les nombres
claude.prototype.style.unit = str_value.replace(modele, ""); //retourne la partie texte, donc l'unité utilisée
return claude.prototype.style.unit; //String
};
String.prototype.getWidth = function(){ // retourne la largeur d'un élément
/* --------------------
var largeur = "chaine".getWidth();
-------------------- */
var elt = this.getElt();
var largeur = elt.getWidth();
return largeur;
};
String.prototype.setWidth = function(str_value){ // impose la largeur d'un élément
var elt = this.getElt();
var largeur = elt.setWidth(str_value);
return largeur; //retourne un integer
};
String.prototype.toJavascriptStyleName = function(){ // transforme background-color en backgroundColor javascript et style HTML!
/* ----------------------------------------
En HTML le nom de certains styles s'écrive avec un tiret comme: background-color
Ce même style en javascript s'écrit en supprimant le tiret: backgroundColor
toJavascriptStyleName() permet de transformer un style composé avec tiret en un style format javascript
sur les autres nom de style, rien ne se produit
var styleJavascript = "background-color".toJavascriptStyleName();
---------------------------- */
var text = this;
var modele= /-/;
while(modele.test(text)){
var pos=text.search(modele);
text=text.substring(0, pos) + text.charAt(pos+1).toUpperCase() + text.substring(pos+2, text.length);
}
return text;
};
String.prototype.getTruePosition = function(){ // retourne la position d'un elt par rapport à la page (y compris avec ascenseur et parent en position absolue)
/* ---------
var tab = "chaine".getTruePosition(); //tab as array()
-------- */
var elt = this.getElt();
var tab = elt.getTruePosition(); //tab as array() ; tab[x] = left; tab[y] = top;
return tab;
};
String.prototype.getTrueLeft = function(){ // position left par rapport à la page y compris si ascenseur et parent en position absolue
/* var left = "chaine".getTrueLeft(); */
var position = this.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
};
String.prototype.getTrueTop = function(){ // position top par rapport à la page y compris si ascenseur et parent en position absolue
/* var top = "chaine".getTrueTop(); */
var position = this.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
};
String.prototype.getTrueHeight = function() { //taille réelle d'une image ici height
/* var hauteurRéelle = "chaine".getTrueHeight(); */
var elt = this.getElt();
var h = elt.getTrueHeight();
return h; //as integer
};
String.prototype.getTrueWidth = function() { //taille réelle d'une image ici height
/* var largeurRéelle = "chaine".getTrueWidth(); */
var elt = this.getElt();
var w = elt.getTrueWidth();
return w; //as integer
};
String.prototype.setTop = function(str_value){ //
/* var top = "chaine".setTop("hauteur"); */
var elt = this.getElt();
var value = elt.setTop(str_value);
return value; //retourne un integer
};
String.prototype.getTop = function(){ //
/* var top = "chaine".getTop(); */
var elt = this.getElt(); //retourne Object if exist
var value = elt.getTop();
return value; //integer
};
String.prototype.setLeft = function(str_value){ //
/* var left = "chaine".setLeft("left"); */
var elt = this.getElt();
var value = elt.setLeft(str_value);
return value; //retourne un integer
};
String.prototype.getLeft = function(){ //
/* var left = "chaine".getLeft(); */
var elt = this.getElt();
var value = elt.getLeft();
return value; //integer
};
String.prototype.setPosition = function(strPosition){ // absolute ou relative
/* "chaine".setPosition(); */
var elt = this.getElt();
var reponse = elt.setPosition(strPosition);
return reponse;
};
String.prototype.getPosition = function(){ //absolute ou relative
/* var position = "chaine".getPosition(); */
var strPosition = this.getStyle("position");
return strPosition;
};
String.prototype.getRight = function(){ //
var elt = this.getElt(); //retourne Object if exist
var str_value = elt.getRight();
return parseInt(str_value); //integer
}; //
String.prototype.setRight = function(str_value){ //
var elt = this.getElt();
elt.setStyle("right", str_value); //applique le style
return parseInt(str_value); //retourne un integer
}; //
String.prototype.getHeight = function(){ //
var elt = this.getElt(); //retourne Object if exist
var str_value = elt.getHeight();
return parseInt(str_value); //integer
}; //
String.prototype.setHeight = function(str_value){ //
var elt = this.getElt();
elt.setHeight(str_value);
return parseInt(str_value); //retourne un integer
}; //
String.prototype.setBottom = function(str_value){ //
var elt = this.getElt();
elt.setBottom(str_value); //applique le style
return parseInt(str_value); //retourne un integer
}; //
String.prototype.getBottom = function(){ //
var elt = this.getElt(); //retourne Object if exist
var str_value = elt.getBottom();
return parseInt(str_value); //integer
}; //
String.prototype.setVisibility = function(strVisibility){ //
var elt = this.getElt();
var strVisibility = elt.setVisibility(strVisibility);
return strVisibility;
}; //
String.prototype.getVisibility = function(){ //
var elt = this.getElt();
var strVisibility = elt.getVisibility();
return strVisibility;
}; //
String.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
var opacity = elt.setOpacity(opacity);
return opacity;
};
//event
String.prototype.ready = function(fonction){
/* -----------
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);
});
---------------- */
var elt = this.getElt();
cnx(elt).event.addEvent("load", fonction);
return false;
}
String.prototype.addEvent = function(eventName, handler){
/* -----------
"chaine".addEvent("click", function(){affiche("essai3");} );
function affiche(texte){
alert("click sur div couche " + texte);
};
----------------- */
var elt = this.getElt();
//alert(this +" in String devient: " + elt);
elt.addEvent(eventName, handler);
return false;
}
String.prototype.triggerEvent = function (eventName){ //créer un nouvel event avec le trigger, elt est la cible
/* ----------------
"chaine".triggerEvent("myCustomEvent");
----------------------- */
var elt = this.getElt();
elt.triggerEvent(eventName); //eventName as String
return false;
}
}
if (Date){
//log
Date.prototype.isWhat = function(){
alert(this + " est une Date ");
return this;
};
Date.prototype.isDate = function(){
return true;
};
// Date
Date.prototype.setDay = function(intJour){ //calcule le jour suivant - 0 dimanche; 1 lundi; 2 mardi; ... 7 samedi
var uneDate = this;
var daytoset = intJour; //0 dimanche; 1 lundi; 2 mardi; ... 7 samedi
var currentDay = uneDate.getDay();
var distance = (daytoset + 7 - currentDay) % 7; //mardi suivant
uneDate.setDate(uneDate.getDate() + distance);
return uneDate;
};
Date.prototype.setFormat = function(formatDate, langue){
/* --------------------
var d1 = new Date("13 oct 2013 06:15:07 -0800"); //dimanche 13 oct 2013
d1.setFormat("yyyy mm dd ddd dddd", "FR"); //la langue est optionnelle , valeur par défaut US
------------------ */
if (!langue) var langue = "US";
langue = langue.toUpperCase();
var reg = new RegExp(langue, "gi");
var chaine = "US FR GE IT SP"; //US French, German, Italian, Spanish
var test = reg.test(chaine); //treste si langue existe dans chaine
if (!test) langue = "US"; //langue US par défaut
var dayWeek = this.getDay(); //Obtention du jour de la semaine - 0 pour dimanche, 1 pour lundi ...
var month = this.getMonth(); //Obtention du mois - 0 pour janvier, 1 pour février ... 11 pour décembre
var year = this.getFullYear(); //Retourne l'année (sur 4 chiffres)
var hours = this.getHours(); //Retourne la partie heures de l'heure
var minutes = this.getMinutes(); //Retourne la partie minutes de l'heure
var secondes = this.getSeconds(); //Retourne la partie secondes de l'heure
var millisecondes = this.getMilliseconds(); //Retourne la partie millisecondes de l'heure
var dayMonth = this.getDate(); //Obtention du jour du mois
var year1900 = this.getYear(); //Retourne le nombre d'année par rapport à l'année 1900
var numberMillisecondes = this.getTime(); //Retourne le nombre de millisecondes depuis le 01/01/1970 00:00
//var formatDate = "";
claude.prototype.divers.traductionDate(); //active la traduction des mois et des jours
var reg = new RegExp("[ -\/,;:.]+", "gi"); //séparateur possible
var tab = formatDate.split(reg);
for (var x=0; x HTML depuis un Array() à 2 dimensions
var tabArray = this;
var nombreLignes = tabArray.length;
if (!tabArray[0]) return false; //gestion erreur si le Array() n'a pas deux dimensions
var nombreColonnes = tabArray[0].length;
var table = "";
for (var x = 0; x < nombreLignes; x++){
table += "";
for(var y = 0; y < nombreColonnes; y++){
table += ""+tabArray[x][y]+" "
}
table += " ";
}
table += "
"; // HTML
return table; //balise
}
//event
}
if (Function){
Function.prototype.isWhat = function(){
alert(this + " est une fonction - collection Function ");
};
};
if (Boolean){
Boolean.prototype.isWhat = function(){
alert(this + " est un Boolean ");
};
};
if (Image){ //on trouve aussi HTMLImageElement - Image est compatible IE et Firefox toutes versions!
//log
Image.prototype.isWhat = function(){
alert(this + " apparteint à la collection Image ");
};
};
if ( !cnx().user.IE || (cnx().user.IE && cnx().user.getVersion() > 8) && Object ){ //window - Object existe sous IE>8 et Firefox
//Object existe mais n'est pas accessible sous IE<=8
//window appartient à la collection Object
//false appartient à la collection Object
//null n'appartient pas à la collection Object
//log
Object.prototype.isWhat = function(){ //ne fonctionne pas avec IE8, fonctionne avec IE10 et Firefox
alert(this + " appartient à la collection Object "); //window appartient à la collection Object
};
//event
Object.prototype.ready = function(handler){
/* -----------
En réalité la fonction window.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(this).event.addEvent("load", handler);
return false;
};
Object.prototype.addEvent = function(eventName, handler){
/* -----------
window.addEvent("click", function(){affiche("essai3");} );
function affiche(texte){
alert("click sur window " + texte);
};
----------------- */
cnx(this).event.addEvent(eventName, handler);
return false;
};
};
if ( !cnx().user.IE || (cnx().user.IE && cnx().user.getVersion() > 8) && Document ){ //document - Document existe sous IE>8 et Firefox
//log
Document.prototype.isWhat = function(){ //ne fonctionne pas avec IE8, fonctionne avec IE10 et Firefox
alert(this + " appartient à la collection Document "); //document appartient à la collection Document
};
//dom
Document.prototype.getParent = function(){ //document n'a pas de parent et document.parentNode retourne null
return false; //retourne false plutôt que null car false appartient à la collection Object; ce qui n'est pas le cas de null
};
Document.prototype.getElt = function(){ //Object fonctionne également sous Firefox mais pas IE
//alert(this.id + " Element getID: " + this.tagName);
return this;
};
//event
Document.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(window).event.addEvent("load", handler);
return false;
};
Document.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 (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(window).event.addEvent("load", 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 ((cnx().user.IE && cnx().user.getVersion() <= 8) && 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 ");
};
//dom
HTMLDocument.prototype.getParent = function(){ //document n'a pas de parent et document.parentNode retourne null
return false; //retourne false plutôt que null car false appartient à la collection Object; ce qui n'est pas le cas de null
};
HTMLDocument.prototype.getElt = function(){ //Object fonctionne également sous Firefox mais pas IE
//alert(this.id + " Element getID: " + this.tagName);
return this;
};
//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(window).event.addEvent("load", handler);
return false;
};
HTMLDocument.prototype.addEvent = function(){
/* -----------
document.addEvent("click", function(){affiche("essai3");} );
function affiche(texte){
alert("click sur document " + texte);
};
----------------- **/
return function(eventName, func) {
cnx(this).event.addEvent(eventName, func);
}
return false;
}();
};
if (HTMLHtmlElement){ //IE et Firefox pour toutes les versions! - document.documentElement
//ne gère pas les propriétés par défaut de Element
//log
HTMLHtmlElement.prototype.isWhat = function(){
alert(this + " est document.documentElement - collection HTMLHtmlElement ");
};
//dom
HTMLHtmlElement.prototype.getElt = function(){ //Object fonctionne également sous Firefox mais pas IE
//alert(this.id + " Element getID: " + this.tagName);
return this;
};
HTMLHtmlElement.prototype.getParent = function(){ //document n'a pas de parent et document.parentNode retourne null
return this.parentNode; //en fait retourne document
};
};
if (HTMLBodyElement){ //document.body - HTMLBodyElement existe sous IE et Firefox pour toutes les versions!
HTMLBodyElement.prototype.isWhat = function(){
alert(this + " est document.body - collection HTMLBodyElement ");
};
};
if ( Event ){ //collection Evenement - pour IE et Firefox
//Il existe une collection MouseEvent sous Firefox mais pas dans IE!
Event.prototype.isWhat = function(){
alert(this + " est un Evenement - collection Event ");
};
Event.prototype.isEvent = function(eventName){ //eventName as String - teste si un event est géré par le dom
return true; //c'est un évènement!
};
};
if (!cnx().user.Chrome && Navigator){ //Google Chrome ne supporte pas la collection Navigator, mais navigator.user existe!
//log
Navigator.prototype.isWhat = function(){
alert(this + " est un objet Navigator - browser - explorateur web ");
};
Navigator.prototype.getVersion = function(){ //retourne la version du navigateur
var ua = navigator.userAgent,
possibilities = [
'Flock',
'Navigator',
'Epiphany',
'Konqueror',
'Firefox',
'MSIE',
'Chrome',
'Opera',
'Safari',
'SeaMonkey',
'Shiretoko',
'Iceape',
'Iceweasel',
'Kazehakase',
'Minefield'
],
index,
navigateur = 'Navigateur inconnu',
version = 'Version inconnue',
match,
p, i, l = possibilities.length;
for(i=0;i=0) {
navigateur = p;
match = ua.match(/Version\/(\w+(?:\.\w+)*)/) || ua.match(new RegExp(p+'[/ ](\\w+(?:\\.\\w+)*)'));
if(match&&match[1]) {
version = match[1];
}
break;
}
}
version = parseFloat(version);
//alert(navigateur+' '+version);
return version;
};
Navigator.prototype.version = Navigator.prototype.getVersion(); //contient la version du navigateur
Navigator.prototype.IE = navigator.userAgent.indexOf('MSIE') > -1; //si IE
Navigator.prototype.FF = navigator.userAgent.indexOf('Firefox') > -1; //si Firefox
Navigator.prototype.Opera = Object.prototype.toString.call(window.opera) == '[object Opera]'; //si Opera
Navigator.prototype.WebKit = navigator.userAgent.indexOf('AppleWebKit/') > -1;
Navigator.prototype.Gecko = navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') === -1;
Navigator.prototype.Chrome = navigator.userAgent.indexOf('Chrome') > -1; //si chrome - google chrome
Navigator.prototype.MobileSafari = /Apple.*Mobile/.test(navigator.userAgent);
}
if (HTMLTableElement){ //Table Elements
if (HTMLTableElement){ // table collection
HTMLTableElement.prototype.isWhat = function(){
alert(this + " est une table - collection HTMLTableElement ");
}
HTMLTableElement.prototype.getArrayCol = function(col){ // retourne un array() à 1 dimension contenant toutes les cellules d'une colonne dans une table
/* -----------------
retourne un Array à 1 dimension contenant
toutes les cellules de la colonne
--------------------------------- */
var table = this; //retourne un objet si il existe, gère les id
var arrayCellsCol = cnx(table).table.getArrayCol(col);
return arrayCellsCol; //contenu de la colonne identifiée par col, c'est un Array
};
HTMLTableElement.prototype.getCol = function(cellIndex){ // retourne le n° de la colonne
// cellIndex est un nombre indiquant une cellule de la table
var table = this; //retourne un objet si il existe, gère les id
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;
}
HTMLTableElement.prototype.getWidthCol = function(col){ // retourne la largeur actuelle d'une colonne
var table = this; //retourne un objet si il existe, gère les id
var largeur = cnx(table).table.getWidthCol(col);
return largeur; //integer
}
HTMLTableElement.prototype.setWidthCol = function(strWidth, col){ // impose la largeur "strWidth" aux cellules contenues dans la colonne "col" de la table
var table = this; //retourne un objet si il existe, gère les id
cnx(table).table.setWidthCol(strWidth, col);
return parseInt(strWidth);
}
HTMLTableElement.prototype.setScroll = function(hauteur){ //applique un scroll sur une table - hauteur as Number
/* ------------------------------
var table = "tableScroll".getElt();
table.setScroll(100); //scroll au-delà de "100px" de hauteur
-------------------------- */
var table = this; //identifie la table à scroller!
if (!hauteur) var hauteur = 100; //hauteur des éléments afficher, au delà on scrolle
cnx(table).table.setScroll(hauteur);
}
HTMLTableElement.prototype.setFilter = function(){ //applique un filtre à une table html
var table = this; //identifie la table à scroller!
cnx(table).table.setFilter();
}
HTMLTableElement.prototype.getArray = function(){ // retourne un Array() à 2 dimensions contenant les cellules de la HTML
/* -----------------
Parcours toutes les cellules de la HTML
et retourne un Array() à 2 dimensions
table est l'ensemble de la table ou une section de cette table thead tbody tfoot
var tab = cnx("table").table.getTableAsArray(); //génère un Array() à 2 dimensions contenant les données de la HTML
var table = cnx().table.setHtmlTableFromArray(tab); //génère une HTML depuis un Array() à 2 dimensions
--------------------------------- */
var table = this; //retourne un objet si il existe, gère les id
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 arrayCellsTable = new Array();
for (var x=0; x < nombreLignes; x++){
arrayCellsTable[x] = new Array; //ne pas mettre var dans cette déclaration
for(var y = 0; y < nombreColonnes; y++){
arrayCellsTable[x][y] = table.rows[x].cells[y].innerHTML;
}
}
return arrayCellsTable; //array() à deux dimensions
}
HTMLTableElement.prototype.getCSV = function(){ // retourne une chaine String CSV contenant les cellules de la HTML avec separateur=; et retour chariot
/* -----------------
Parcours toutes les cellules de la HTML
et retourne une chaine CSV pour écriture d'un fichier
table est l'ensemble de la table ou une section de cette table thead tbody tfoot
var csv = cnx("table").table.getTableAsCSV(); //génère une chaine CSV contenant les données de la HTML
var table = cnx().table.setHtmlTableFromCSV(csv); //génère une HTML depuis une chaine CSV => as String
var ancrage = document.getElementById("button2Html");
ancrage.innerHTML = table; // ou encore document.write(table);
var table = cnx().table.setDomTableFromCSV(csv); //génère une DOM depuis une chaine CSV => as Object
ancrage = document.getElementById("button2Dom");
ancrage.appendChild(table); //ou encore document.body.appendChild(table);
--------------------------------- */
var table = this; //retourne un objet si il existe, gère les id
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 CSV = "";
var separateur = ";";
var retourLigne = "\r\n";
var reg1 = new RegExp("()|(
)", "gi"); //gi - g: pour toutes les occurences i: pour non sensible à la casse minuscules et majuscules - | permet de fournir une autre chaine
var contenu;
for (var x=0; x < nombreLignes; x++){
for(var y = 0; y < nombreColonnes; y++){
contenu = table.rows[x].cells[y].innerHTML; //contenu de la cellule ligne x - colonne y
contenu = contenu.replace(reg1, ""); //supprime les caractères de reg - donc les paragraphes html
contenu = claude.prototype.log.trim(contenu); //supprime les caractères indésirables comme retour chariot...
CSV += contenu + separateur;
}
CSV = CSV.substring(0,CSV.length-1);;// supprime le dernier separateur
CSV += retourLigne;
}
return CSV; //chaine CSV
}
HTMLTableElement.prototype.addColonne = function(position){ //ajoute une colonne à une table
/* ------------------
position = -1 ; // ajoute une cellule à la fin de la ligne
table.addColonne(-1); //ajoute une colonne en fin de la table
---------------- */
if (position == undefined) position = -1;
if (position < -1) position = -1;
var table = this;
var lignes = table.rows; //collection des lignes
for (var x = 0; x < lignes.length; x++){
if (position > table.rows[x].cells.length) position = -1; //vérifie que position reste inférieur au nombre de colonne déjà existant
table.rows[x].insertCell(position); //ajoute une cellule à la ligne
}
}
}
if (HTMLTableSectionElement){ //it's a section
HTMLTableSectionElement.prototype.isWhat = function(){
alert(this + " est une Section - collection HTMLTableSectionElement ");
};
}
if (HTMLTableRowElement){ //it's a row
HTMLTableRowElement.prototype.isWhat = function(){
alert(this + " est une ligne(rows) - collection HTMLTableRowElement ");
};
}
if (HTMLTableCellElement){ // it's a cell
HTMLTableCellElement.prototype.isWhat = function(){
alert(this + " est une cellule (cells) - collection HTMLTableCellElement ");
};
HTMLTableCellElement.prototype.getCol = function(){ // retourne le n° de la colonne correspondant à la cellule
var col = cnx(this).cell.getCol();
return col;
};
HTMLTableCellElement.prototype.getCoord = function() { //retourne array() contenant: [ligne , colonne]
/* --------------------------
http://www.presence-pc.com/forum/ppc/Programmation/coordonnees-cellules-tableau-sujet-4669-1.htm
var coord = cellule.getCoord();
var ligne = coord[0];
var colonne = coord[1];
---------------------------- */
return [this.parentNode.rowIndex, this.cellIndex]; //retourne array() contenant: ligne , colonne
};
HTMLTableCellElement.prototype.getTable = function() { //retourne la table parent contenant la cellule
var table = cnx(this).dom.getTagParent("TABLE");
return table;
};
}
}
}