couleur.js
console.log("Ce programme JS vient d'être chargé");$(document).ready(function(){ console.log("Le document est pret"); // Eviter le glisser-déposer par défaut de l'image. $('.potentiometre img').on('dragstart', function(event) { event.preventDefault(); }); // Début de mouvement dans un potentiomètre var posDepartSouris; var posDepartPoignee; $('.potentiometre img').mousedown(function(event) { console.log("Le bouton de la souris a été appuyé sur la poignée."); // Seulement le bouton gauche de la souris if(event.which!==1){return;} // Éviter de sélectionner texte si la souris bouge pendant le click event.preventDefault(); var poignee=$(this); $('.en-mouvement').removeClass('en-mouvement'); poignee.addClass('en-mouvement'); // Se souvenir de la position de départ posDepartSouris =event.pageX; posDepartPoignee =poignee.offset().left; }); // Fin de mouvement d'un potentiomètre $('html').mouseup(function(e) { console.log("Le bouton de la souris a été relaché."); $('.en-mouvement').removeClass('en-mouvement'); }); // Mouvement d'un potentiomètre $('html').mousemove(function(event) { console.log("La souris a bougé dans la page"); var poignee=$('.en-mouvement'); if(poignee.length===0){return;} var potentiometre=poignee.parent(); var pos=event.pageX; pos-=posDepartSouris; pos+=posDepartPoignee; // Bord gauche du potentiomètre par rapport à la page var gauche=potentiometre.offset().left-12; if(pos<gauche){pos=gauche;} if(pos>gauche+potentiometre.width()){pos=gauche+potentiometre.width();} poignee.offset({left: pos, top: poignee.offset().top}); // Largeur de la couleur de fond de la partie à gauche de la poignée potentiometre.find('span').width(pos-gauche); // Calculer la valeur du potentiometre entre 0 et 100 var valeur=Math.floor(255*(pos-gauche)/potentiometre.width()); // Déterminer le id du span valeur à partir de l'id du potentiomètre var valId='valeur-'+potentiometre.attr('id'); // Afficher la valeur $('#'+valId).val(valeur); $('#'+valId).removeClass('erreur'); mise_a_jour_hex_et_couleur(); }); // Touche appuyée dans rouge, vert ou bleu $('input.valeur').keyup(function(event) { var v=parseInt($(this).val()); // Validation $(this).toggleClass('erreur',isNaN(v) || v<0 || v>255); if($(this).hasClass('erreur')){return;} mise_a_jour_position_pot($(this).parent().find('.potentiometre')); mise_a_jour_hex_et_couleur(); }); // Touche appuyée dans hexadécimal $('#hex').keyup(function(event) { var hex=$(this).val(); // Validation $(this).toggleClass('erreur',!/^#[0-9a-f]{6}$/.test(hex)); if($(this).hasClass('erreur')){return;} // Mettre à jour les champs texte rouge, vert et bleu $('#valeur-pot-rouge').val(parseInt(hex.substr(1,2),16)); $('#valeur-pot-vert' ).val(parseInt(hex.substr(3,2),16)); $('#valeur-pot-bleu' ).val(parseInt(hex.substr(5,2),16)); $('.valeur').removeClass('erreur'); // Mettre à jour les 3 potentiomètres mise_a_jour_position_pot($('#pot-rouge')); mise_a_jour_position_pot($('#pot-vert' )); mise_a_jour_position_pot($('#pot-bleu' )); // Mettre à jour la couleur dans la boite $('#boite-couleur').css('background-color',hex); }); console.log("La mise en place est finie. En attente d'événements...");});// Met à jour la position de la poignée d'un potentiometre en fonction de la valeur de l'inputfunction mise_a_jour_position_pot(potentiometre){ var poignee=potentiometre.find('img'); // Chercher l'élément input correspondat et prendre sa valeur var v=parseInt(potentiometre.parent().find('input.valeur').val()); // Calculer la position par rapport à la page var pos=(v/255)*potentiometre.width(); poignee.css('left',pos-12); /* 12 = largeur image / 2 */ potentiometre.find('span').width(pos);}// Met à jour la valeur hexadécimale et la couleur de la boite // à partir des champs texte rouge, vert et bleufunction mise_a_jour_hex_et_couleur(){ var hex='#'; // S'il y a une erreur sur un des 4 champs texte, ne pas mettre à jour if($('.valeur.erreur').length){return;} // Ajouter à la chaîne successivement rouge, vert et bleu hex+=hex_deux_chiffres(parseInt($('#valeur-pot-rouge').val())); hex+=hex_deux_chiffres(parseInt($('#valeur-pot-vert' ).val())); hex+=hex_deux_chiffres(parseInt($('#valeur-pot-bleu' ).val())); // Afficher la valeur hexadécimale $('#hex').val(hex); $('#hex').removeClass('erreur'); // Changer la couleur dans la boite $('#boite-couleur').css('background-color',hex);}// Renvoie une chaîne hexadécimale à deux chiffres à partir d'un nombre décimal.function hex_deux_chiffres(n){ var res=Number(n).toString(16); if(res.length===1){res="0"+res;} return res;}