<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>color event</title>
<script type="text/javascript">
//var colors = [{name:'rouge', value:'#F00'}];
function initPage(){
// initialisation des écouteurs
document.body.addEventListener('colorSelection', function(event){
console.log('colorSelection', event.detail);
document.body.style.backgroundColor = event.detail;
});
console.log('loadColors');
// charger le fichier de couleurs
var colorLoader = new XMLHttpRequest();
colorLoader.addEventListener('load', onColorsLoaded);
colorLoader.addEventListener('error', onLoadError);
colorLoader.open('get', 'colors.json', true);
colorLoader.send();
}
/* fonction de traitement des données chargées
depuis le fichier colors.json*/
function onColorsLoaded(event){
console.log('onColorsLoaded');
var result = event.currentTarget.responseText;
console.log('reponse', result);
var loadedObject = JSON.parse(result);
console.log('loadedObject', loadedObject);
var colors = loadedObject.colors;
console.log(
'couleur 0',colors[0],
'name', colors[0].name,
"value", colors[0].value
);
displayColors(colors);
}
/* fonction de traitement des erreurs de chargement
depuis le fichier colors.json*/
function onLoadError(event){
console.log('onLoadError');
alert('une erreur a eu lieu. merci de ré-esayer ultérieurement');
console.log('error', event);
}
function displayColors(colors){
/* afficher un boutpon pour chaque couleur
de la liste transmise*/
/*var numColors = colors.length;
for(var i = 0 ; i < numColors; i ++){
var color = colors[i];
// cree un bouton
var bt = document.createElement('button');
// on insère le titre du bouton
bt.innerText = color.name;
// on associe la valeur/value au bouton
bt.setAttribute('data-color', color.value);
document.body.appendChild(bt);
// on ajoute un écouteur d'evenement pour capter le clic
}*/
// fonction map cf learnRX
colors.filter(function(color){
if( color.name != '')
return true;
else return false;
}).map(function( color ){
var bt = document.createElement('button');
// on insère le titre du bouton
bt.innerText = color.name;
// on associe la valeur/value au bouton
bt.setAttribute('data-color', color.value);
bt.addEventListener('click', function(event){
var selectedColor = event.currentTarget.dataset.color;
console.log('click', selectedColor);
var colorEvent = new CustomEvent(
'colorSelection',{
bubbles:true,
detail : selectedColor
});
event.currentTarget.dispatchEvent(colorEvent);
});
return bt;
}).forEach(function(bt){
document.body.appendChild(bt);
});
}
</script>
</head>
<body onload="initPage()">
</body>
</html>
1 Response
Write a comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.