WebSVN – eFlore/Applications.cel – /branches/topic-dbsingleton/widget/generateur.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Générateur de widgets</title>
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.6.2/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
                //<![CDATA[
                           
                var url_base_widget = 'http://localhost/widget:cel:';
                var timer = null;
                
                var criteresPourWidget = new Object();
                criteresPourWidget['carto'] = new Array('utilisateur', 'dept', 'commune', 'projet', 'taxon');
                criteresPourWidget['cartoPoint'] =  new Array('utilisateur', 'dept', 'commune', 'projet', 'taxon', 'titre', 'logo', 'url_site','image', 'photos');
                criteresPourWidget['observation'] = new Array('utilisateur', 'dept', 'commune', 'projet', 'taxon');
                criteresPourWidget['photo'] = new Array('utilisateur', 'dept', 'commune', 'projet', 'taxon', 'titre');
                
                $(document).ready(function() {  
                        $('#mise_a_jour_auto').change(function() {
                                if($('#mise_a_jour_auto').val() == 'on') {
                                        activerTimerMaj();
                                } else {
                                        desactiverTimerMaj();
                                }
                        });
                                                
                        $('#mise_a_jour').click(function(event) {
                                mettreAjourApercu();
                        });
                        
                        $("#formulaire_widget_carto_point input").keypress(function (event) {
                            if (event.which == 13) {
                                mettreAjourApercu();
                            }
                         });
                        
                        $('input[name=type_widget]').change(function(event){
                                afficherCriteresPourWidget();
                                mettreAjourApercu();
                        });
                        
                        $('#options').hide();
                        $('#options_secondaires').hide();
                });
                           
                function htmlEncode(value){
                    if (value) {
                        return jQuery('<div />').text(value).html();
                    } else {
                        return '';
                    }
                }
                
                Object.size = function(obj) {
                    var size = 0, key;
                    for (key in obj) {
                        if (obj.hasOwnProperty(key)) size++;
                    }
                    return size;
                };

                
                function genererIFrame(url, hauteur, largeur) {
                        return '<iframe src="'+url+'" width="'+largeur+'" height="'+hauteur+'">';
                }
                                
                function afficherCriteresPourWidget() {
                        var type_widget = $('input[name=type_widget]:checked').val();
                        $('#options .critere').each(function() {
                                var nom = $(this).find('.modificateur').attr("name");
                                if(critereExistePourWidget(type_widget, nom)) {
                                        $(this).fadeIn();
                                } else {
                                        $(this).fadeOut();
                                }
                        });
                        $('#options').show();
                        $('#options_secondaires').show();
                }
                
                function critereExistePourWidget(type_widget, nom) {
                        var champsAffiches = criteresPourWidget[type_widget];
                        return (champsAffiches.indexOf(nom) != -1);
                }
                
                function activerTimerMaj() {
                        $('.modificateur').change(function(event) {
                                if(timer != null) {
                                        clearTimeout(timer);
                                }
                                timer = setTimeout(function(){mettreAjourApercu();},500);
                        });
                }
                
                function desactiverTimerMaj() {
                        if(timer != null) {
                                clearTimeout(timer);
                        }
                        $('.modificateur').unbind('change');
                }
                
                function mettreAjourApercu() {
                        var valeurs_form = new Object();
                        var type_widget = $('input[name=type_widget]:checked').val();
                        $('#options .critere').each(function() {
                                var nom = $(this).find('.modificateur').attr("name");
                                var valeur = $(this).find('.modificateur').val();
                                if(critereExistePourWidget(type_widget, nom) && valeur != "") {
                                        valeurs_form[nom] = valeur;
                                };
                        });

                        var url_widget = url_base_widget+type_widget;
                        if(Object.keys(valeurs_form).length > 0) {
                                params_iframe = $.param(valeurs_form);
                                url_widget += "?"+params_iframe;
                        }
                                
                        var hauteur = $('#hauteur').val();
                        var largeur = $('#largeur').val();
                        
                        var lien_widget = '<a href="'+url_widget+'">'+url_widget+'</a>';
                        $('#code_widget').html("Vous pouvez voir ce widget en plein écran en cliquant sur ce lien "+lien_widget);
                        $('#code_widget').show();
                        
                        var code_widget_apercu = genererIFrame(url_widget, hauteur, largeur);
                        $('#apercu').html(code_widget_apercu);
                        $('#apercu').show();
                        
                        var code_widget_inclure = genererIFrame(url_widget, hauteur, largeur);
                        $('#code_widget').html("Copiez-collez ce code pour inclure le widget sur votre site "+"<pre>"+htmlEncode(code_widget_inclure)+"</pre>");
                        $('#code_widget').show();
                }
                //]]>
                </script>
<style>
        #formulaire_widget_carto_point {
                padding:10px;
                border:1px solid grey;
                width: 30%;
                float:left;
        }
        .critere {
                padding:5px;
        }
        
        .modificateur.droite {
                float: right;
                width: 420px;
        }
        #url_widget {
                border: 1px solid grey;
                background-color : #F5F5F5;
                padding: 10px;
                display: none;
        }
        
        #apercu {
                border: 1px solid grey;
                background-color : #F5F5F5;
                padding: 10px;
                display: none;
                float: right;
                width: 60%;
        }
        #contenu_widget_apercu {
                width: 100%;
        }
        
        .nettoyage {
                visibility: hidden;
                clear: both;
        }
</style>
</head>
<body>
<div id="formulaire_widget_carto_point">
        <div class="critere"><label for="utilisateur">Type de widget : </label><br />
                <input autocomplete="off" class="modificateur" type="radio" name="type_widget" value="carto">Carto à la commune<br />
                <input autocomplete="off" class="modificateur" type="radio" name="type_widget" value="cartoPoint">Carto au point précis <br />
                <input autocomplete="off" class="modificateur" type="radio" name="type_widget" value="observation">Observations <br />
                <input autocomplete="off" class="modificateur" type="radio" name="type_widget" value="photo">Photos <br />
        </div>
        <div id="options">
                <div class="critere"><label for="utilisateur">Utilisateur : </label><input class="modificateur droite" type="text" name="utilisateur" id="utilisateur" /></div>
                <div class="critere"><label for="dept">Département : </label><input type="text" class="modificateur droite" name="dept" id="dept" /></div>
                <div class="critere"><label for="commune">Commune : </label><input type="text" class="modificateur droite" name="commune" id="commune" /></div>
                <div class="critere"><label for="projet">Projet : </label><input type="text" class="modificateur droite" name="projet" id="projet" /></div>
                <div class="critere"><label for="taxon">Taxon : </label><input type="text" class="modificateur droite" name="taxon" id="taxon" /></div>
                <div class="critere"><label for="titre">Titre : </label><input type="text" class="modificateur droite" name="titre" id="titre" /></div>
                <div class="critere"><label for="logo">Url du logo : </label><input type="text" class="modificateur droite" name="logo" id="logo" /></div>
                <div class="critere"><label for="image">Url de l'image : </label><input type="text" class="modificateur droite" name="image" id="image" /></div>
                <div class="critere"><label for="url_site">Url du site : </label><input type="text" class="modificateur droite" name="url_site" id="url_site" /></div>
                <div class="critere"><label for="photos">Présence de photos : </label>
                        <select class="modificateur" name="photos" id="photos">
                                <option selected="selected" value="">Toutes les observations</option>
                                <option value="1">Uniquement avec photos</option>
                        </select>
                </div>
        </div>
        <div id="options_secondaires">
                <div class="critere"><label for="largeur">Largeur : </label>
                                                        <input type="text" class="modificateur" size="10" name="largeur" id="largeur" value="700"/>
                                                        <label for="hauteur">Hauteur : </label>
                                                        <input type="text" class="modificateur" size="10" name="hauteur" id="hauteur" value="700"/>
                                                        </div>
                <div>
                        <label for="mise_a_jour_auto">Maj auto de la carte à chaque changement : </label>
                        <input type="checkbox" id="mise_a_jour_auto" name="mise_a_jour_auto" />
                </div>
        </div>
        <button id="mise_a_jour" name="mise_a_jour">Rafraichir</button>
</div>
<div id="apercu">Aperçu en temps réel
        <div id="contenu_widget_apercu"></div>
</div>
<hr class="nettoyage" />
<div id="code_widget"></div>
</body>
</html>
Subversion Repositories eFlore/Applications.cel

(root)/branches/topic-dbsingleton/widget/generateur.html @ 1748 – Rev
