1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166
| var listeLiens = [
{
titre: "So Foot",
url: "http://sofoot.com",
auteur: "yann.usaille"
},
{
titre: "Guide d'autodéfense numérique",
url: "http://guide.boum.org",
auteur: "paulochon"
},
{
titre: "L'encyclopédie en ligne Wikipedia",
url: "http://Wikipedia.org",
auteur: "annie.zette"
}
];
// TODO : compléter ce fichier pour ajouter les liens à la page web
function elements(link)
{
var titreElt = document.createElement("a"); // création variable "titreElt" de la balise "a".
titreElt.href = link.url; // récupération de l'"url" présente dans le tableau
titreElt.style.color = "#428bca"; // ajout de la couleur
titreElt.appendChild(document.createTextNode(link.titre));
var lienUrl = document.createElement("span"); // création variable "lienUrl" par rapport aux paramètres "span" dans le fichier CSS
lienUrl.appendChild(document.createTextNode(link.url));
var insertTitre = document.createElement("h2"); // création variable "insertTitre" correspondant au sous-titre "h2" contenant le "titre" et son "URL" présent dans le tableau
insertTitre.appendChild(titreElt); // "titre" présent dans le tableau
insertTitre.appendChild(lienUrl); // "URL" présent dans le tableau
var insertTitreUrl = document.createElement("span") // création variable "insertTitreUrl" pour l'auteur présent dans le tableau par rapport aux paramètres "span" dans le fichier CSS
insertTitreUrl.appendChild(document.createTextNode("Ajouté par " + link.auteur));
var insertDiv = document.createElement("div"); // création variable "insertDiv" pour la balise "DIV" pour chaque élément
insertDiv.classList.add("lien"); // ajout de cette balise en tenant compte des paramètres présents dans le fichier CSS "lien"
insertDiv.appendChild(insertTitre); // insertion du titre "h2" avec son URL
insertDiv.appendChild(insertTitreUrl); // insertion de l'auteur
return insertDiv;
}
listeLiens.forEach(function (lien) // fonction qui permet d'ajouter tous les éléments présents dans le tableau par rapport à la fonction "elements"
{
document.getElementById("contenu").appendChild(elements(lien));
})
//Bouton d'affichage du formulaire
var affichageFormBouton = document.getElementById("ajoutForm");
//Element Formulaire
var formElt = document.getElementById("ajoutLien");
//Elements du message de confirmation
var messageAjout = document.getElementById("messageAjout");
var messageTitre = document.getElementById("titre");
//Affichage du formulaire d'ajout
affichageFormBouton.addEventListener('click', function()
{
affichageFormBouton.style.display = "none";
formElt.style.display = "block";
});
formElt = creerForm();
document.body.insertBefore(formElt, contenu);
// Animations et validation du formulaire
formElt.addEventListener('submit', function(event)
{
formElt.style.display = "none";
affichageFormBouton.style.display = "inline-block";
ajoutNouveauLien();
formElt.reset();
event.preventDefault();
});
// Animations et validation du formulaire
formElt.addEventListener('submit', function(event)
{
formElt.style.display = "none";
affichageFormBouton.style.display = "inline-block";
ajoutNouveauLien();
formElt.reset();
event.preventDefault();
});
function creerForm()
{
formElt = document.createElement("form");
formElt.id = "ajoutLien";
formElt.appendChild(inputMaker({"type":"text",
"name":"auteur",
"placeholder": "Entrez votre nom",
"required":"required"}));
formElt.appendChild(inputMaker({"type":"text",
"name":"titre",
"placeholder": "Entrez le titre du lien",
"size": "30",
"required":"required"}));
formElt.appendChild(inputMaker({"type":"text",
"name":"url",
"placeholder": "Entrez l'URL du lien",
"size" : "30",
"required":"required"}));
formElt.appendChild(inputMaker({"type":"submit",
"name":"bouton",
"value": "Ajouter"}));
return formElt;
}
function inputMaker(attributes)
{
var element = document.createElement("input");
for (var key in attributes){
element.setAttribute(key, attributes[key])
}
return element;
}
function ajoutNouveauLien()
{
var url = formElt.elements.url.value;
if ((url.indexOf("http://") !== 0) && (url.indexOf("https://") !== 0))
{
// On la préfixe par "http://"
url = "http://" + url;
}
var lien ={
auteur : formElt.elements.auteur.value,
titre : formElt.elements.titre.value,
url : url,
}
contenu.insertBefore(elements(lien),contenu.childNodes[1]);
//gestion des affichages
messageTitre.textContent = lien.titre;
messageAjout.style.display = "block";
setTimeout(function(){messageAjout.style.display = "none";}, 2000);
} |
Partager