Générateur de map :: Fire Soft Board

B.Moncef

Equipe de support

Age : 17 ans
Messages : 1926
Inscrit : 10 Septembre 2005

12 Janvier 2008, 22:23

Reprise du dernier message

ça va être chaud, j'arrive pas à grand chose (rien ?) avec mootools là

En gros ce que je veux faire :
Une disposition avec deux colonnes. à gauche des blocs qui représentent les types de lignes possibles à ajouter dans une map, genre un div 'input' avec les champs pour remplir les options etc. un div textarea de même, etc.
Un de chaque quoi.

Et à gauche bah c'est la map, on prends des éléments d'a droite et on les empile, en renseignant les champs d'options (rows, cols, size, etc.) et à la fin un bouton enregistrer ...

C'est ce que grummfy a proposé aussi au début du topic .. vais revoir la doc et chercher des exemples

BlackJowy

Etoile

Age : 22 ans
Messages : 3459
Inscrit : 01 Mars 2007

12 Janvier 2008, 22:27

Mootools demande qu'on s'y interesse un peu, mais après tu sauras faire plein de choses plus rapidement, et tu risque de rapidement l'integrer à chaque fois que tu fais du javascript ^^

"It's backup day today so I'm pissed off. Being the BOFH, however, does have it's advantages. I reassign null to be the tape device — it's so much more economical on my time as I don't have to keep getting up to change tapes every 5 minutes. And it speeds up backups too, so it can't be all bad can it? Of course not." S.Travaglia

BlackJowy's FSB2 - Liste de mes mods (All 2.0.0 Compliant)

Grummfy

Equipe des MODS

Age : 23 ans
Messages : 5458
Inscrit : 16 Septembre 2004

12 Janvier 2008, 23:37

dans mes liens j'ai donné les examens (tu as directement le code css, html, js et éventuellement php)

"La gravité est le bonheur des imbéciles" Charles de Montesquieu > "T'as raison, L'apesanteur c'est plus rigolo" Hébus de Phalompe (Troll de Troy)

http://www.grummfy.com/download/crea/smileys/fsb2.gif

Mods fsb1 - Mods fsb2 - Mon forum - Grummfy's project

B.Moncef

Equipe de support

Age : 17 ans
Messages : 1926
Inscrit : 10 Septembre 2005

14 Janvier 2008, 0:10

Bon j'ai avancé un peu, mais j'avais oublié à quel point c'était chiant le js ...

J'ai un problème difficile à corriger, vu que je vois pas d'où il vient, et que je l'avait pas avant.

Quand je prends un élément du menu de gauche (pour l'instant y en a qu'un) et que je le glisse à droite, si y a déjà quelque chose à droite, bah le texte grossi beaucoup, et se met en gras. mais le reste ça marche.
Je sais qu'il faut du code pour que vous essayiez mais en attendant que je finis quelques tests pour vous en fournir j'ai mis quand même, on sait jamais si quelqu'un à déjà eu ça ...

B.Moncef

Equipe de support

Age : 17 ans
Messages : 1926
Inscrit : 10 Septembre 2005

14 Janvier 2008, 1:12

Bon le problème cité dans le post plus haut vient d'opéra, sous firefox ça semble bien marcher.

sauf :

Code (Sélectionner le code)

var to_insert = null;
switch (type)
{
    case 'input':
        to_insert = create_input();
    break;
}
                       
if (to_insert != null)
{
    to_insert.inject(drop);
}

Ce qui pose problème ici est la ligne to_insert = create_input();
J'ai mis quelques alert() un peu partout et il semblerait que la fonction soit pas exécutée (les alert() avant s'executent, après aussi, mais dans create_input() non)

Si vous avez une idée ...

Grummfy

Equipe des MODS

Age : 23 ans
Messages : 5458
Inscrit : 16 Septembre 2004

14 Janvier 2008, 1:31

sans plus de code c'est difficile ...

"La gravité est le bonheur des imbéciles" Charles de Montesquieu > "T'as raison, L'apesanteur c'est plus rigolo" Hébus de Phalompe (Troll de Troy)

Mods fsb1 - Mods fsb2 - Mon forum - Grummfy's project

B.Moncef

Equipe de support

Age : 17 ans
Messages : 1926
Inscrit : 10 Septembre 2005

14 Janvier 2008, 1:41

mhhh vais mettre le html aussi parce que le reste du js t'aidera pas à mon avis non plus :

Code (Sélectionner le code)

window.addEvent('domready', function() {
    var drop = $('round');
    var dropFx = drop.effect('background-color', {wait: false}); // wait is needed so that to toggle the effect,
    var mes_initial = $('initial');
    
    $$('.drag').each(function(item){
        	item.addEvent('mousedown', function(e) {
        		e = new Event(e).stop();
         
        		var clone = this.clone()
        			.setStyles(this.getCoordinates()) // this returns an object with left/top/bottom/right, so its perfect
                   .setStyles({'height': '15px', 'text-align': 'center'})
        			.addEvent('emptydrop', function() {
        				this.remove();
        				drop.removeEvents();
        			});
            
              /* Le type du champ selectionné */
              var info = clone.getElement('span[class=info]');
              var type = info.firstChild.data;
              info.remove();
              clone.inject(document.body);
              
        		drop.addEvents({
        			'drop': function() {
                       if (mes_initial != false)
                       {
                         mes_initial.remove();
                         mes_initial = false;
                       }
                       
        				drop.removeEvents();
        				clone.remove();
                       
                       var to_insert = null;
                       switch (type)
                       {
                            case 'input':
                                to_insert = create_input();
                            break;
                       }
                       
        				if (to_insert != null)
                       {
                            to_insert.inject(drop);
                       }
                       
        				dropFx.start('7389AE').chain(dropFx.start.pass('ffffff', dropFx));
        			},
        			'over': function() {
        				dropFx.start('98B5C1');
        			},
        			'leave': function() {
        				dropFx.start('dde5ee');
        			}
        		});
         
        		var drag = clone.makeDraggable({
        			droppables: [drop]
        		}); // this returns the dragged element
         
        		drag.start(e); // start the event manual
        	});
    });
});

/* Cré ce qui est necessaire pour la configuration d'une ligne input */
function create_input()
{
    var div = document.createElement('div').setAttribute('class', 'round');
    div.appendChild(document.createTextNode('test'));
    alert('bah');
    return div;
}

HTML (Sélectionner le code)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
    	<title>Fire Soft Board :: Générateur de map</title>
    	
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    	<meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        
    	<link type="text/css" rel="stylesheet" href="../fsb2fi/tpl/WhiteSummer/main.css" />
    	<link type="text/nonsense" rel="stylesheet" href="../fsb2fi/tpl/WhiteSummer/opera.css" />
    	<!--[if lte IE 6]><link type="text/css" rel="stylesheet" href="../fsb2fi/tpl/WhiteSummer/ie6.css" /><![endif]-->
    	<!--[if IE 7]><link type="text/css" rel="stylesheet" href="../fsb2fi/tpl/WhiteSummer/ie7.css" /><![endif]-->
        
    	<link rel="shortcut icon" href="../fsb2fi/tpl/WhiteSummer/img/favicon.ico" />
        <link rel="index" href="../fsb2fi/index.php" />
        <link rel="help" href="../fsb2fi/index.php?p=faq" />
        <link rel="search" href="../fsb2fi/index.php?p=search" />
        <link rel="copyright" href="http://www.fire-soft-board.com" />
        
        <style type="text/css">
        <!--
                        .list .round .content {text-align: center;margin-top: 10px;}
                        .list .round .content span {visibility: hidden;}
                        .form th {width: 50%}
                     -->
        </style>
        
        <script type="text/javascript" src="mootools.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>

    <body>
        <!-- HEADER -->
        <div id="header">
            <div class="left"></div>
            <div class="right"></div>
            <div class="top"></div>

            <a href="http://www.fire-soft-board.com/fsb/index.php" id="header_left"><img src="../fsb2fi/tpl/WhiteSummer/img/logo.png" alt="Fire Soft Board : le forum PHP libre et gratuit" title="Fire Soft Board : le forum PHP libre et gratuit" /></a>
        </div>
        
        <!-- Bloc central de la page -->
        <div class="main">
        <table id="tabs" width="100%">
            <tr>
                <th colspan="2" class="title">Générateur de maps de FSB</th>
            </tr>
            <tr>
                <!-- Gauche -->
                <td class="list" style="width: 20%">
                    <div class="round">
                        <h3>Glissez-déposez à droite :</h3>
                        
                        <div class="drag content">
                            <span class="info">input</span>Champ de texte
                        </div>
                    </div>
                </td>
                
                <!-- Droite -->
                <td valign="top" class="tabs_right">
                    <div id="round">
                        <div id="initial" class="round"><h1>Déposez vos éléments ici</h1></div>
                        
                        <div class="round">
                            <!--<div class="content">-->
                                <table class="form">
                                    <tr>
                                        <th><label>Nom de la ligne (un nom différent pour chaque ligne) :</label></th>
                                        <td><input type="text" size="30" maxlength="20" name="line_name" /></td>
                                    </tr>
                                    <tr>
                                        <th><label>Ce qui sera affiché devant le champ :</label></th>
                                        <td><input type="text" size="30" maxlength="30" name="lang" /></td>
                                    </tr>
                                    <tr>
                                        <th><label>Valeur par défaut :</label></th>
                                        <td><input type="text" size="30" maxlength="30" name="default" /></td>
                                    </tr>
                                    <tr>
                                        <th><label>Taille du champ de texte :</label></th>
                                        <td><input type="text" size="2" maxlength="2" name="size" /></td>
                                    </tr>
                                    <tr>
                                        <th><label>Limite de caractères :</label></th>
                                        <td><input type="text" size="3" maxlength="3" name="maxlength" /></td>
                                    </tr>
                                    <tr>
                                        <th><label>Résultat qui sera affiché dans le post. <br/>
                                        Utilisez %s où vous voulez voir apparaître la saisie de l'utilisateur.</label></th>
                                        <td><input type="text" size="30" name="result" /></td>
                                    </tr>
                                </table>
                            <!--</div>-->
                    </div>
                </td>
            </tr>
        </table>

        <!-- FOOTER -->
        <div id="copyright">
            <a href="http://www.fire-soft-board.com" target="_blank">Fire-Soft-Board</a> &copy; 2004 - 2008</div>
        </div>

    </body>
</html>

Fabogranqi Masculin

Equipe des MODS

Age : 19 ans
Messages : 3095
Inscrit : 29 Décembre 2004

14 Janvier 2008, 9:24

A Moncef, tu vois pourquoi je voulais pas le faire en PHP

Car ça impliquer d'utiliser du js et perso je déteste programmer en js, je trouve ça super chiant ^^

Bonne chance

BlackJowy

Etoile

Age : 22 ans
Messages : 3459
Inscrit : 01 Mars 2007

Message édité 1 fois, dernière édition par BlackJowy, 14 Janvier 2008, 13:41

14 Janvier 2008, 9:31

Tu crois que y'a des gens qui aiment coder en JS ?

Je pense pas que ça existe, quelques timbrés mis à part :lol:

"It's backup day today so I'm pissed off. Being the BOFH, however, does have it's advantages. I reassign null to be the tape device — it's so much more economical on my time as I don't have to keep getting up to change tapes every 5 minutes. And it speeds up backups too, so it can't be all bad can it? Of course not." S.Travaglia

BlackJowy's FSB2 - Liste de mes mods (All 2.0.0 Compliant)

B.Moncef

Equipe de support

Age : 17 ans
Messages : 1926
Inscrit : 10 Septembre 2005

14 Janvier 2008, 13:33

lol on peut faire des trucs sympa avec mais c'est vraiment ... chiant.
Merci Fabo.

Sinon vous avez pas d'idée pour le problème ?

jackjacky

Feu follet

Messages : 166
Inscrit : 11 Janvier 2008

14 Janvier 2008, 14:44

Peut etre que je ne suis pas dans le bon sujet, mais il existe pas deja un mod qui est installé d'office dans fsb2 qui permet de proposer un lien map à google?

http://jeunetaffeur.com

Un site destiné aux jeunes taffeurs (rencontres, experiences, aide, creation des blogs, bons plans, offre d'emploi, delire etc... etc...)

B.Moncef

Equipe de support

Age : 17 ans
Messages : 1926
Inscrit : 10 Septembre 2005

14 Janvier 2008, 15:04

Non c'est pas ça les maps dont il est question ici.
Description : http://www.fire-soft-board.com...tion_du_systeme
Exemple : Va sur le forum rapports de bugs et fait comme si tu allais créer un nouveau sujet, tu verras que le formulaire que tu devras remplir n'est pas le même que sur les autres sujets. C'est à ça que servent les maps.

jackjacky

Feu follet

Messages : 166
Inscrit : 11 Janvier 2008

14 Janvier 2008, 15:07

Ok j'ai compris et mercu B.moncef

http://jeunetaffeur.com

Un site destiné aux jeunes taffeurs (rencontres, experiences, aide, creation des blogs, bons plans, offre d'emploi, delire etc... etc...)

Grummfy

Equipe des MODS

Age : 23 ans
Messages : 5458
Inscrit : 16 Septembre 2004

14 Janvier 2008, 17:09

Citation (Fabogranqi, 14 Janvier 2008, 9:24)

A Moncef, tu vois pourquoi je voulais pas le faire en PHP

Car ça impliquer d'utiliser du js et perso je déteste programmer en js, je trouve ça super chiant ^^

Bonne chance

je voix mal comment tu aurais pu faire autrement que en js ...

mmootools, tu as pris la version du fofo, où autre chsoe -> merci de préciser ....
sinon regarde ceci : http://demos.mootools.net/Sortables

sinon déjà moi je remplacerait ceci :

Code (Sélectionner le code)

 var to_insert = null;
                       switch (type)
                       {
                            case 'input':
                                to_insert = create_input();
                            break;
                       }

par

Code (Sélectionner le code)

 var to_insert;
                       switch (type)
                       {
                            case 'input':
                                to_insert = create_input();
                            break;
                            default:
                                to_insert = null;
                       }

sinon sous ff, j'ai un bug :

Code (Sélectionner le code)

   var div;
    div = document.createElement('div')
	alert(div);    
    div = div.setAttribute('class', 'round');
    alert(div);
    div.appendChild(document.createTextNode('test'));
    alert(div);
    alert('bah');
    return div;

c'est le setattribute qui bug... (utilise firebug pour debugguer)

"La gravité est le bonheur des imbéciles" Charles de Montesquieu > "T'as raison, L'apesanteur c'est plus rigolo" Hébus de Phalompe (Troll de Troy)

Mods fsb1 - Mods fsb2 - Mon forum - Grummfy's project

B.Moncef

Equipe de support

Age : 17 ans
Messages : 1926
Inscrit : 10 Septembre 2005

Message édité 1 fois, dernière édition par B.Moncef, 14 Janvier 2008, 19:53

14 Janvier 2008, 19:52

Okey je vais essayer avec ton code.
J'utilise bien firebug et il m'avait signalé aucune erreur js, ni à propos de appendchild ou autre chose, bizar.

EDIT : la version de mootools j'ai pris celle en téléchargement sur le site, en prenant toutes les classes, et la compression selectionnée par défaut.

B.Moncef

Equipe de support

Age : 17 ans
Messages : 1926
Inscrit : 10 Septembre 2005

15 Janvier 2008, 1:57

Bon bah ça a avancé depuis. demain je compte ajouter les types qu'il manque (assez rapide), rajouter l'entête de la map (aussi) ... mais bon comme on est jamais à l'abris de bug. Me restera alors la partie php.

Au fait, j'ai un truc que je voudrais corriger, j'ai une chaine de caractere dans mon code, avec genre 'message qui apparaitra devant le champ ... <br /> patati'. Et en fait le br il s'affiche tel quel, alors que moi je voudrais qu'il revienne à la ligne ? ça doit être tout con mais je vois pas.

Question : je mets la possibilité de supprimer une ligne après l'avoir ajouté ? (c'est dans mes plans mais je prefere demande quand même)

Grummfy > concernant Sortables, ce serait tres pratique, mais dans le code de la doc et des exemples je vois pas sur quoi est basé le classement. Un id ? en tout cas dans le code je vois pas. Parce que sur le générateur de map, chaque ligne à une id, donc soit quand on défile une ligne avant l'autre on interchange les idées, soit y a un champ hidden position ou autre qu'on interchange. Donc forcément quelque chose à échanger sinon je vois pas trop ...

Générateur de map