gérer des boutons

Le 08-12-2013, Une Bévue nous expliquait dans fr.comp.lang.javascript :

Bonjour à toutes et à tous,

Bonjour,

bon, je sais comment enabler et disabler des boutons mais je n'ai pas
d'idée claire et intelligente sur comment les gérer.

Sur mon interface j'ai 2 X 5 boutons.

5 pour mes catégories, 5 pour mes items :

"+", "-", "E", "S" et "C" pour :
ajouter, supprimer, editer, sauvegarder et "canceler.

je cherche donc un moyen pour gérer ça efficacement.

par exemple, après avoir cliqué sur "E" j'édite un item et je souhaite
désactiver "+", "-" et "E", bien sur je sais le faire mais en mettant des :

disableAddButton();
disableRemoveButton;

comme ça à la queue leu leu.

bon au cas où vous auriez des idées.

Je n'ai pas tout compris mais pour faire ce que tu veux il faut ajouter
dans la fonction qui est appelée par le déclenchement de
l'évènement 'click' du bouton 'E' un test de l'état des
boutons '+' et '-' et si nécessaire inverser cet état.


--
Doug - Linux user #307925 - Slackware64 roulaize ;-)
++++++++++++++ Live long and prosper ++++++++++++++

Le 08/12/13 19:53, Doug713705 a écrit :

Je n'ai pas tout compris mais pour faire ce que tu veux il faut ajouter
dans la fonction qui est appelée par le déclenchement de
l'évènement 'click' du bouton 'E' un test de l'état des
boutons '+' et '-' et si nécessaire inverser cet état.

oui enfin non, j'ai du mal m'expliquer.
je ne souhaite pas gérer les boutons un à un mais je suis à la recherche
d'une méthode qui me permette de gérer mes boutons en fonction de l'état
de mon controller.

sur le groupe js us on m'a donné une idée, que j'applique à ma manière.

je définis les ids de mes boutons :

buttons=['add_category',..., 'cancel_item']

les états possible de mon controller :

states=['view_category', 'add_category'...,
'view_items','view_item','add_item'...]

puis les boutons qui sont enablés en fonctions de ces états :

buttons Enabled={
view_categories: ['add_category']
...
, edit_item: ['save_item', 'cancel_item']

}

(les boutons disabled se déduisent des enabled...)

c'est ce que je suis en train de tester.
j'aime bien le coté systématique de cette solution et qui permet d'un
coup d'oeil de voir les différents états des boutons et non pas qqc de
noyé dans le corps du code.

Une Bévue :

Bonjour à toutes et à tous,

Bijôr

bon, je sais comment enabler et disabler des boutons mais je n'ai pas d'idée
claire et intelligente sur comment les gérer.

Sur mon interface j'ai 2 X 5 boutons.

5 pour mes catégories, 5 pour mes items :

"+", "-", "E", "S" et "C" pour :
ajouter, supprimer, editer, sauvegarder et "canceler.

je cherche donc un moyen pour gérer ça efficacement.

par exemple, après avoir cliqué sur "E" j'édite un item et je souhaite
désactiver "+", "-" et "E", bien sur je sais le faire mais en mettant des :

disableAddButton();
disableRemoveButton;

comme ça à la queue leu leu.

bon au cas où vous auriez des idées.

Je ne fais pas pour l'instant vraiment du JS, juste de la cueillette
suivie de modifications. Mais votre problème m'intéresse, puisqu'il va
falloir que je factorise une mise-en-page basée sur Bootstrap.
Ce qui fonctionne en PHP et Python semble être efficace en JS. Il
s'agit d'instancier une structure pour chaque nouveau menu. C'est
clair, lisible et maintenable avec un bon éditeur, si ça veut bien
résister au formattage automatique. Ça m'arrive même de générer ce type
de structure, du PHP généré en Python pour être précis. J'ai fait un
test, le code JS est certainement puéril:

boutons = {
'buttonone' : {'nouveaublaze': 'I'
, 'todisable': ['buttonfive', 'buttonsix']}
, 'buttontwo' : {'nouveaublaze': 'am'
, 'todisable': ['buttonone', 'buttonsix',
'buttonfour']}
, 'buttonthree': {'nouveaublaze': 'the'
, 'todisable': ['buttonone',
'buttonsix']}
, 'buttonfour' : {'nouveaublaze': 'tenebrous'
, 'todisable': ['buttonone',
'buttonsix']}
, 'buttonfive' : {'nouveaublaze': 'the'
, 'todisable': []}
, 'buttonsix' : {'nouveaublaze': 'widow'
, 'todisable': ['buttonone',
'buttonsix']}
}

function myFunction(x) {
document.getElementById(x.id).innerHTML =
boutons[x.id]['nouveaublaze'];
td = boutons[x.id]['todisable'];
for (i in boutons) {
document.getElementById(i).disabled = false;
}
for (b in td) {
document.getElementById(td[b]).disabled = true;
}
}


<button type="button" id="buttonone" onclick="myFunction(this)">
Je
</button>
<button type="button" id="buttontwo" onclick="myFunction(this)">
suis
</button>
<button type="button" id="buttonthree" onclick="myFunction(this)">
le
</button>
<button type="button" id="buttonfour"
onclick="myFunction(this)">
tenebreux
</button>
<button type="button" id="buttonfive"
onclick="myFunction(this)">
le
</button>
<button type="button" id="buttonsix"
onclick="myFunction(this)">
veuf
</button>

Le changement de nom du bouton, c'est juste pour dire de faire quelque
chose.

L'utilisation de dictionnaires, clés 'nouveaublaze' et 'todisable', ne
s'impose pas ici, on peut allèger:

boutons = {
'buttonone' : ['I' , ['buttonfive',
'buttonsix']]
, 'buttontwo' : ['am', ['buttonone', 'buttonsix',
'buttonfour']]
, 'buttonthree': ['the', ['buttonone',
'buttonsix']]
, 'buttonfour' : ['tenebrous', ['buttonone',
'buttonsix']]
, 'buttonfive' : ['the', []]
, 'buttonsix' : ['widow', ['buttonone',
'buttonsix']]
}
function myFunction(x) {
document.getElementById(x.id).innerHTML =
boutons[x.id][0];
td = boutons[x.id][1];
for (i in boutons) {
document.getElementById(i).disabled = false;
}
for (b in td) {
document.getElementById(td[b]).disabled = true;
}
}

--
Pierre Maurette

Le 11/12/13 10:51, Pierre Maurette a écrit :

Mais votre problème m'intéresse, puisqu'il va falloir que je factorise
une mise-en-page basée sur Bootstrap.

Votre code n'est pas si pueril que ça ;-)
Perso j'ai fait un peu la même chose :
var states=['view_categories', 'add_category', 'edit_category',
'view_items', 'add_item', 'view_item', 'edit_item'];
qui sont les états (importants) de mon controller.

var buttons=['add_category', 'delete_category', 'edit_category',
'save_category', 'cancel_category',
'add_item', 'delete_item', 'edit_item', 'save_item',
'cancel_item'];
var buttonsElt={};
var buttonsEnabled={
view_categories: ['add_category']
, add_category: ['save_category', 'cancel_category']
, edit_category: ['save_category', 'cancel_category']
, view_items: ['add_category', 'delete_category',
'edit_category', 'add_item']
, view_item: ['add_category', 'delete_category',
'edit_category', 'add_item', 'delete_item', 'edit_item']
, add_item: ['save_item', 'cancel_item']
, edit_item: ['save_item', 'cancel_item']
};
var buttonsDisabled={};

l'objet buttonsDisabled est généré automatiquement à partir de l'objet
buttonsEnabled (les boutons sont soit enablés ou disablés, évidemment) :

for(var property in buttonsEnabled){
if(buttonsEnabled.hasOwnProperty(property)){
buttonsDisabled[property]=buttons.minus(buttonsEnabled[property]);
}
}

la function minus (porte sur des arrays : [1, 2, 3, 4].minus([2, 3]) =
[1, 4]) est implémentée à partir de prototype :
Array.prototype.minus=function(oa){
var a=[];
for(var i=0,l=this.length;i<l;i++){
if(!oa.include(this[i])){
a[a.length]=this[i];
}
}
return a;
}

qui nécessite la function include ( [1,2].include(1)=true ) :
Array.prototype.include=function(o){
var includeúlse;
for(var i=0,l=this.length;i<l;i++){
if(this[i]===o){
include=true;
break;
}
}
return include;
}

bon après reste à balayer les boutons suivant les états (states) du
controller:
function buttonsControl(){
for(var i=0, l=buttonsDisabled[state].length;i<l;i++){
switch(buttonsDisabled[state][i]){
case 'add_category':
buttonsElt[buttonsDisabled[state][i]].setAttribute('disabled',
'disabled');

buttonsElt[buttonsDisabled[state][i]].removeEventListener('click',
buildAddCategory, false);
break;
case 'delete_category':
...
for(var i=0, l=buttonsEnabled[state].length;i<l;i++){
switch(buttonsEnabled[state][i]){
case 'add_category':
buttonsElt[buttonsEnabled[state][i]].removeAttribute('disabled');
buttonsElt[buttonsEnabled[state][i]].addEventListener('click',
buildAddCategory, false);
break;
case 'delete_category':
var itemsNumber=itemsElt.getElementsByTagName('span').length;
if(itemsNumber===0){
buttonsElt[buttonsEnabled[state][i]].removeAttribute('disabled');

'delete_category' est un cas à part : j'interdis la suppression d'une
catégorie non vide (càd qui a des items, au moins 1, de cette catégorie).