WebSVN – eFlore/Applications.eflore-consultation – /trunk/presentations/scripts/fiche-synthese.js

//+----------------------------------------------------------------------------------------------------------+
// Onglets et Portlets
/**
 * Les variables suivantes ont été ajoutée par php
 * 
 * var urlTexteBrutSectionWikiTpl : url pour obtenir le texte brut d'une section de wiki
 * var urlEditionSectionWikiTpl : url pour éditer une section du wiki 
 * var urlTexteFormateSectionWikiTpl : url pour obtenir le texte formaté en html d'une section de wiki
 * var pageWikiTaxon : url pour obtenir le texte formaté en html d'une section de wiki
 * 
*/

/**
 * Variables globales du script
 */
var modules = Array();
var tableauOnglets = Array();
var nbOngletsInvisibles = 0;
var ongletSyntheseCharge = true;

/** Classe Module
* Définit un module de type portlet
**/
function Module(id, module, onglet, statique) {

        // Variables de classe : identifiant, titre, et le HTML du résumé à afficher dans le contenu
        this.id = id;
        this.titre;
        this.htmlResume;
        this.statique = statique;

        // Les objets Portlet et Onglet que l'ont garde en mémoire pour pouvoir y accéder facilement 
        this.portlet = module;
        this.onglet;

        // creerPortlet 
        // Créer l'objet Portlet HTML à afficher et le stocker dans les variables de classe
        this.creerPortlet = function() {
                var objet = this;

                var titre = $(module).children('.titre');
                titre.className = 'titre ui-widget-header ui-corner-all';
                titre.id = 'titre-' + this.id;
                
                var lienTitre = $(module).children('.titre').children('a');
                lienTitre.attr('href','#'+this.id);
                lienTitre.click(function() {
                        if (objet.onglet.is(':visible')) {
                                $('#zone_onglets').tabs('select', '#ui-tabs-'+objet.id);
                        }
                        return false;
                });
                lienTitre.hover(function() {
                        if (!objet.ongletEstAffiche()) {
                                $(this).css({"color":"white"});
                        } else {
                                $(this).css({"color":"#E78F08"});
                        }
                }); 
                
                lienTitre.mouseout(function() {
                        $(this).css({"color":"white"});
                });

                var contenu = $(module).children('.contenu');
                contenu.id = 'contenu-' + this.id;
                contenu.className ='contenu';

                var lienToggle = document.createElement('span');
                lienToggle.className = 'lienToggle ui-icon ui-icon-minusthick';
                $(titre).append(lienToggle);
                $(lienToggle).click(function() {
                        objet.afficherCacherModule();
                });

                this.portlet = module;
                return module;  
        }
        
        this.ongletEstAffiche = function() {
                return $(this.onglet.selector).is(':visible');
        }

        // Crée l'objet Onglet HTML
        this.creerOnglet = function() {
                var objet = this;

                if (!statique) {
                        var span = document.createElement('span');
                        span.className = "ui-icon ui-icon-close";
                
                        // Gestion de la fermeture de l'onglet
                        $(span).live( "click", function() {
                                objet.afficherCacherModule();
                                redimensionnerOnglets();
                        });
                        $(onglet).append(span);
                }
                this.onglet = onglet;
        }
                
        // Initialisation de l'objet
        this.creerPortlet();
        this.creerOnglet();
        
        // Accesseurs de la classe
        this.getOnglet = function() {
                return this.onglet;     
        }
        
        this.getPortlet = function() {
                return this.portlet;
        }
        
        // fonctions d'affichage et cachage (je sais pas si on dit ça comme ça) des onglets
        this.afficherCacherModule = function() { 
                $(this.portlet).find(".lienToggle").toggleClass("ui-icon-plusthick");
                $(this.portlet).find(".lienToggle").toggleClass("ui-icon-minusthick");
                $(this.portlet).find(".titreOnglet").toggleClass("pasDeCurseur");
                $(this.portlet).find(".contenu").toggle();
                $(this.onglet).toggle();
                
                redimensionnerOnglets();
        }
}

function afficherCacherMenuOnglets() {
        if ($("#conteneurMenuOnglets").html() != '') {
                $("#conteneurMenuOnglets").html('');
                $('#lienOngletEtPlus').text('+');
        } else {
                var htmlMenu = '<ul class="menuModules">';
                nbOngletsInvisibles = 0;
                for (idOnglet in tableauOnglets) {
                        var classe = "elementMenuModules";
                        if (!$(idOnglet).is(':visible')) {
                                nbOngletsInvisibles++;
                                htmlMenu += '<li class="'+classe+'" rel="'+idOnglet+'" id="menu_module_'+idOnglet+'">'+tableauOnglets[idOnglet].titre+'</li>';
                        }
                }
                htmlMenu += '</ul>';
                
                if (nbOngletsInvisibles > 0) { 
                        $("#conteneurMenuOnglets").html(htmlMenu);
                        $("#conteneurMenuOnglets").toggle();
                        $('#lienOngletEtPlus').text('-');
                }
        }
}

function fermerMenuOnglets() {
        $("#conteneurMenuOnglets").html('');
        $('#lienOngletEtPlus').text('+');
}
        
function redimensionnerOnglets() {
        // 570 px au max
        // 18 px largeur croix 
        // 18 px largeur texte 
        // 36 px largeur totale
        // 25 px largeur et +
        var liensVisibles = $('#zone_onglets > ul > li:visible > a');
        var longueurLiens = 0;
        liensVisibles.each(function() {
                longueurLiens += $(this).width();
        });
        var nbOnglets = $('#zone_onglets > ul > li:visible').length;
        var longueurMax =  750 - (nbOnglets * 36);
        if (longueurLiens >= longueurMax || nbOnglets > 5) { 
                $('#zone_onglets > ul > li > a').not('.lien-statique').width(longueurMax/nbOnglets);
        } else {
                $('#zone_onglets > ul > li > a').not('.lien-statique').css("width","auto");     
        }
}

function selectionnerOngletSynthese() {
        // Suppression des classes css qui mettent en surbrillance l'onglet actif
        $('#zone_onglets > ul > li').removeClass('ui-tabs-selected');
        $('#zone_onglets > ul > li').removeClass('ui-state-active');
        
        // application de ces même classes css à l'onglet "acceuil" qui est un onglet "articifiel"
        $('#onglet_synthese').addClass('ui-tabs-selected');
        $('#onglet_synthese').addClass('ui-state-active'); 
        
        // si des onglets ont été ajouté ou supprimé pendant que l'onglet synthèse n'était pas selectionné
        // on s'assure que l'état des blocs ouvert correspond bien à celui de onglets
        synchroniserOngletsOuvertsEtBlocs();
}

function synchroniserOngletsOuvertsEtBlocs() {
        for (indice in tableauOnglets) {
                var ongletEnCours = tableauOnglets[indice];
                if (ongletEnCours.onglet != null) {
                        var ongletVisible = ongletEnCours.onglet.is(':visible');
                        $(ongletEnCours.portlet).find(".contenu").toggle(ongletVisible);
                }
        }
}

function deselectionnerOngletSynthese() {
        // Suppression des classes css qui mettent en surbrillance l'onglet actif sur l'onglet acceuil
        $('#onglet_synthese').removeClass('ui-tabs-selected');
        $('#onglet_synthese').removeClass('ui-state-active'); 
}

function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

function selectionnerOngletParDefautOuEnregistre() {
        // Si un onglet est précisé dans l'url
        // Récupération de l'adresse de l'onglet sélectionné
        var urlVars = getUrlVars();
        if (urlVars['onglet'] == undefined) {   
                // Si pas d'onglet enregistré, selection du premier par défaut
                // Si c'est l'onglet fiche, on le sélectionne artificiellement
                selectionnerOngletSynthese();
                $('.ui-tabs-panel').hide();
                $('#synthese').show();
        } else {
                ongletSyntheseCharge = false;
        }
        var cookieOnglet = obtenirOngletCookiePourPage();
        
        // On réouvre le dernier onglet consulté, à voir si on garde ça en prod, en tout cas c'est 
        // pratique pendant le développement
        if (cookieOnglet && cookieOnglet != 'ui-tabs-1') {
                $('#zone_onglets').tabs("select", '#'+cookieOnglet);
        } else {
                selectionnerOngletSynthese();
                $('.ui-tabs-panel').hide();
                $('#synthese').show();
        }
}

function afficherOngletsPourNiveau() {
        /* affiche les onglets par default selon niveau*/
        for (indice in tableauOnglets) {
                var ongletEnCours = tableauOnglets[indice];
                titre_onglet = ongletEnCours.titre;
                titre_onglet = $.trim(titre_onglet);
                if (!Array.indexOf) {
                          Array.prototype.indexOf = function (obj, start) {
                            for (var i = (start || 0); i < this.length; i++) {
                              if (this[i] == obj) {
                                return i;
                              }
                            }
                            return -1;
                          }
                        }
                if (ongletsDefaut.indexOf(titre_onglet) == -1) {
                        ongletEnCours.afficherCacherModule();   
                        nbOngletsInvisibles++;
                }
        }
}

function surSelectionOnglet(event,ui) {
        // Récupération de l'adresse de l'onglet sélectionné
        var url = ui.tab.href;
        // le fragment suivant le # dans l'url contient l'id de l'onglet
        var fragmentsAncre = url.split('#');
        fancyboxinitialise = false;
        
        if (fragmentsAncre.length > 0) {
                var ancre = fragmentsAncre[fragmentsAncre.length - 1];
                // si on a cliqué sur l'onglet etPlus, on ne doit rien faire car celui-ci affiche le menu
                // TODO: voir s'il convient d'afficher le menu EtPlus dans d'autres onglets que celui de synthese
                if (ancre != 'etPlus') {
                        // Si c'est un onglet correspondant à un projet, on cache la synthèse et le plugin
                        // chargera son contenu dans l'espace approprié
                        if (ancre != 'ui-tabs-1') {
                                var panel = $(ui.panel);
                            if (panel.is(":empty")) {
                                panel.append("<div class='tab-chargement'>Chargement des informations...</div>")
                            }

                                deselectionnerOngletSynthese();
                                $('.ui-tabs-panel').show();
                                $('#zone_contenu_fiche').hide();
                                
                                enregistrerOngletCookiePourPage(ancre);
                        } else {
                                if (ongletSyntheseCharge) {
                                        // Si c'est l'onglet fiche, on le sélectionne artificiellement
                                        selectionnerOngletSynthese();
                                        $('.ui-tabs-panel').hide();
                                        $('#zone_contenu_fiche').show();
                                        
                                        enregistrerOngletCookiePourPage(ancre);
                                        return false;
                                } else {
                                        window.location = url;
                                }
                        }
                }
        }
        return true;
}

function obtenirOngletCookiePourPage() {
        var urlVars = getUrlVars();
        var id_cookie = 'onglet_eflore';
        if (urlVars['num_nom']) {
                id_cookie += '_'+urlVars['num_nom'];
        }       
        return $.cookie(id_cookie) ? $.cookie(id_cookie) : null;
}

function enregistrerOngletCookiePourPage(valeur) {
        var urlVars = getUrlVars();
        var id_cookie = 'onglet_eflore';
        if(urlVars['num_nom'] && urlVars['num_nom'] != undefined) {
                id_cookie += '_'+urlVars['num_nom'];
        }
        $.cookie(id_cookie, valeur);
}

function lierModulesEtOnglets() {
        var i = 1;
        
        //Parcourir la totalité des modules générés et les lier grâce à la classe Module
        $(".module").each(function () {
                i++;
                identifiantOnglet = "#zone_onglets>ul>li:nth-child(" + i +")";
                var module = new Module(i, this, $(identifiantOnglet));
                var titre = $(this).children('h3').text();
                module.titre = titre;
                
                tableauOnglets[identifiantOnglet] = module;
        });
        $(".lien-onglet").each(function() {
                var urlOnglet = $(this).attr('href');
                urlOnglet = urlOnglet.replace(/index\.php/, "service.php");
                urlOnglet = urlOnglet.replace('action=fiche','action=onglet');
                $(this).attr('href', urlOnglet);
        });
}

function creerMenuOngletsFermes() {
        $("#ongletEtPlus").click(function() {
                afficherCacherMenuOnglets();
        });
        
        $('.elementMenuModules').live('click', function() {     
                var idOnglet = $(this).attr('rel');
                var objet = tableauOnglets[idOnglet];
                objet.afficherCacherModule();
                $(this).toggleClass("elementMenuModulesSelectionne");
                
                // suppression de l'item correspondant dans le menu
                $(this).remove();
                nbOngletsInvisibles --;
                // si tous les onglets sont affichés alors on cache le menu
                if (nbOngletsInvisibles == 0) {
                        afficherCacherMenuOnglets();
                }
                
                // enfin, on selectionne l'onglet sur lequel on a cliqué
                $('#zone_onglets').tabs('select', '#ui-tabs-'+objet.id);
        });
                
        $('#conteneurMenuOnglets').live("mouseleave", function() {
                fermerMenuOnglets();
        });
}

function ajouterTitreSurvolOnglets() {
        /* ajout de l'info au survol de l'onglet quand la taille est diminuée*/
        $('.lien-onglet').parent().each(function() {
                $(this).attr("title",$(this).children("a").text());
        });
} 

function gererLiensOuvertureOnglets() {
        // chaque lien avec cette classe dans un bloc provoque l'ouverture de l'onglet
        // auquel le bloc est associé
        $('.lien_ouverture_onglet_parent').live('click', function(event) {
                event.preventDefault(); 
                var parent = $(this).parent();
                // attention aux majuscules obligatoires dans la comparaison avec BODY
                while (!parent.hasClass('module') && parent.get(0).tagName != 'BODY') {
                        var parent = parent.parent();
                }
                
                if (parent.get(0).tagName != 'BODY') {
                        parent.find('.lien-onglet-synthese').click();
                }
        });
}

//+----------------------------------------------------------------------------------------------------------+
// Wikini Flora
var htmlWikiOriginal = '';
var objetContenuWiki = null;

function getTemplateFormulaireEditionWiki(page, section, texte) {       
        var urlWebServiceWiki = getUrlEditionPourPageEtSection(page, section);
        var formulaire = 
                '<form method="post" id="formulaire_edition_wiki" name="formulaire_edition_wiki" action="'+urlWebServiceWiki+'">'+
                  '<div>'+
                        '<textarea id="pageContenu" name="pageContenu" class="champ_edition_wiki">'+texte+'</textarea>'+
                  '</div>'+
                  '<input type="hidden" name="pageSectionTitre" id="pageSectionTitre" value="'+section+'" />'+
                  '<input type="submit" text="sauver" />'+
                  '<input class="bouton_annuler_edition" type="button" value="annuler" />';
                '</form>';              
        return formulaire;
}

function getSection() {
        return objetContenuWiki.attr("title");
}

function getPageWikiTaxon() {
        return pageWikiTaxon;
}

function getUrlEditionPourPageEtSection(page, section) {
        return urlEditionSectionWikiTpl.replace('{pageTag}', page).replace('{sectionTitre}', section);
}

function getUrlTextePourPageSectionBrute(page, section) {
        return urlTexteBrutSectionWikiTpl.replace('{pageTag}', page).replace('{sectionTitre}', section);
}

function getUrlTextePourPageSectionFormatee(page, section) {
        return urlTexteFormateSectionWikiTpl.replace('{pageTag}', page).replace('{sectionTitre}', section);
}

function remplacerContenuWikiParFormulaireEdition(objet_contenu) {
        objetContenuWiki = objet_contenu;
        var adresse = getUrlEditionPourPageEtSection(getPageWikiTaxon(), getSection());
        htmlWikiOriginal = objet_contenu.html();
        $.getJSON(adresse, function(data) {
                objetContenuWiki.html(getTemplateFormulaireEditionWiki(getPageWikiTaxon(), getSection(), data.texte));
        });
}

function gererEvenementsWiki() {
        //TODO: ajout automatique d'un lien ouvrant une page d'aide (un popup) au formatage des pages wikini
        $('.contenu_editable').live('dblclick',function(event) {
                remplacerContenuWikiParFormulaireEdition($(this).children('.editable_sur_clic'));
        });
        
        $('#formulaire_edition_wiki').live('submit',function(event) {
            event.preventDefault(); 
                var valeurs = $(this).serialize();
                $.post($(this).attr('action'), valeurs, function(data) {
                        var adresse = getUrlTextePourPageSectionFormatee(getPageWikiTaxon(), getSection());
                        $.getJSON(adresse, function(data) {
                                objetContenuWiki.html(data.texte);
                        });
                });
        });
        
        $('.bouton_annuler_edition').live('click', function(event) {
                 event.preventDefault(); 
                 objetContenuWiki.html(htmlWikiOriginal);
        });
        
        rendreLienAffichableDansNouvelleFenetre('.contenu_editable');
}

//+----------------------------------------------------------------------------------------------------------+
//Affichage dans une nouvelle fenetre
function rendreLienAffichableDansNouvelleFenetre(selecteur) {
        $(selecteur).find('a').live('click', function(event) {
                window.open($(this).attr('href'));
                event.preventDefault();
                return false;
        });
}

//+----------------------------------------------------------------------------------------------------------+
// Plier / déplier
function plierTout() {
        $('.nom').children('.imagetteMoins').removeClass('imagetteMoins').addClass('imagettePlus');
        $('.plus').css('display', 'none');
}

function deplierTout() {
        $('.nom').children('.imagettePlus').removeClass('imagettePlus').addClass('imagetteMoins');
        $('.plus').css('display', 'inline');
}

function gestionBiblio(parent) {
        parent.children('.nom').each(function () {
                html = $(this).html();
                posCrochetGauche = html.indexOf('[');
                if (posCrochetGauche > 0) {
                        nom = html.substr(0, posCrochetGauche);
                        biblio = html.substr(posCrochetGauche, html.length);
                        $(this).html(nom);
                        
                        imagettePlus = document.createElement('div');
                        $(imagettePlus).addClass('imagettePlus');
                        $(this).prepend($(imagettePlus));
                        
                        plus = document.createElement('span');
                        $(plus).addClass('plus');
                        $(plus).html(biblio);
                        $(plus).hide();
                        
                        $(this).click(function() {
                                if (!$(this).children('.plus').is(':visible')) {
                                        $(this).children('.imagettePlus').removeClass('imagettePlus').addClass('imagetteMoins');
                                        $(this).children('.plus').css('display', 'inline');
                                } else {
                                        $(this).children('.imagetteMoins').removeClass('imagetteMoins').addClass('imagettePlus');
                                        $(this).children('.plus').css('display', 'none');
                                }
                        });                             
                        $(this).append($(plus));                
                }
        });
}

function gererEvenementsPliage() {
        $('.lien_tout_deplier').live('click', function() {
                deplierTout();
        });
        $('.lien_tout_plier').live('click', function() {
                plierTout();
        });
        gestionBiblio(document);
}

//+----------------------------------------------------------------------------------------------------------+
// ancienne fonction CEL  
function ouvrirPopUpImgCel(event) {
        event.preventDefault();
        window.open($(this).attr('href'), "Photo "+$(this).children("img").attr("alt"), 
                'height= 750, width= 630, top=100, left=100, toolbar=no, menubar=no, location=no, resizable=yes, scrollbars=yes, status=no');
}


//Pop Up images
function ouvrirPopUpImg(event) {
        event.preventDefault();
        window.open($(this).attr('href'),"Photo "+$(this).children("img").attr("alt"),
                        'height='+ event.data.h +', width='+ event.data.w +', top='+ event.data.t +', left='+ event.data.l 
                        +', toolbar='+ event.data.toolbar +', menubar='+ event.data.menubar +', location='
                        + event.data.location +', resizable='+ event.data.resizable +', scrollbars='+ event.data.scrollbars 
                        +', status='+ event.data.status  );
}

//+----------------------------------------------------------------------------------------------------------+
// Message de chargement pour les graphique écologie
function gererChargementGraphiqueEcologie() {
        $('.ecologie_svg').addClass('chargement');
}
//+----------------------------------------------------------------------------------------------------------+
// Initialisation
var fancyboxinitialise = false;
var param_popup_Coste = {h: 650, w: 550, t: 100, l: 100, 
                toolbar: 'no', menubar: 'no', location: 'no', resizable: 'yes', scrollbars: 'yes', status: 'no'};

var param_popup_Cel = {h: 750, w: 630, t: 100, l: 100, 
                toolbar: 'no', menubar: 'no', location: 'no', resizable: 'yes', scrollbars: 'yes', status: 'no'};

//Initialisation
$(document).ready(function() {
        lierModulesEtOnglets();
        
        $('#ongletEtPlus').show();
        
        /* mouvement des blocs */
        $(".colonne").sortable({
                connectWith: ".colonne",
                handle: $(".module").children('h3') // mouvement seulement sur les titres
        });

        $(".colonne").disableSelection();
        
        $('#zone_onglets').tabs({
                add: function(event, ui) {
                        redimensionnerOnglets();
                },
                remove: function(event, ui) {
                        redimensionnerOnglets();
                },
                select: function(event, ui) {   
                        return surSelectionOnglet(event,ui)
                }
        });
        // TODO : devrait être .on() à la place de live()
        $('.lien_popup').live('click',function(event) {
                event.preventDefault();
                $.fancybox(this,{
                        autoDimensions:false,
                        width:580
                });
        });
        
        $('.lien-image-cel').live('click', param_popup_Cel , ouvrirPopUpImg);
        $('.lien-image-coste').live('click', param_popup_Coste , ouvrirPopUpImg);
        
        creerMenuOngletsFermes();
        afficherOngletsPourNiveau();
        ajouterTitreSurvolOnglets();
        redimensionnerOnglets();
        selectionnerOngletParDefautOuEnregistre();
        
        $('.ui-icon-close').click(function() {
                estOngletActif = $(this).parent().hasClass('ui-state-active');
                if (estOngletActif) {
                        //L'onglet que l'on veut fermet est celui qui est ouvert, on va donc le masquer et afficher celui d'accueil
                        $("#zone_onglets").tabs('select', 0);
                }
        });
        
        gererLiensOuvertureOnglets();
        gererEvenementsWiki();
        gererEvenementsPliage();
});

$(document).ajaxStop(function() {
        gererChargementGraphiqueEcologie();
        if (document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#BasicStructure', '1.1') == false) {
                $('.svg').each(function() {
                        alt = $(this).attr('alt');
                        img = document.createElement('img');
                        img.src = alt;
                        $(this).replaceWith(img);
                });
        }
});
Subversion Repositories eFlore/Applications.eflore-consultation

(root)/trunk/presentations/scripts/fiche-synthese.js – Rev 840
