WebSVN – eFlore/Applications.cel – /branches/v3.00-serfouette/widget/modules/photo2/squelettes/js/WidgetPhotoPopup.js

function WidgetPhotoPopup( proprietes ) {
        if( this.valOk( proprietes ) ) {
                this.urlWidget    = proprietes.urlWidget;
                this.urls         = proprietes.urls;
                this.infos_images = proprietes.infos_images;
                this.indexImage   = proprietes.indexImage;
                this.urlImage     = proprietes.urlImage;
                this.tailleMax    = proprietes.tailleMax;
                this.popup_url       = proprietes.popup_url;
        }
}

WidgetPhotoPopup.prototype =  new WidgetPhotoCommun();

WidgetPhotoPopup.prototype.initTpl = function() {
        this.redimensionnerGalerie();
        if( this.valOk( this.urlImage, false, 'null' ) ) {
                this.indexImage = this.urls.indexOf( this.urlImage );
                $( '#info-img-galerie' ).find( '.active' ).removeClass( 'active' );
                $( '#img-cadre-' + this.indexImage + ',#indicateur-img-' + this.indexImage ).addClass( 'active' );
                this.afficherTitreImage();
        }
        this.redimentionnerModaleCarousel();
};

WidgetPhotoPopup.prototype.initEvts = function() {
        const lthis = this;

        this.initEvtsDefilerImage();
        this.initEvtsContact();
        $( window ).on( 'resize', lthis.redimentionnerModaleCarousel.bind( lthis ) );
        this.initEvtsFonstionsPhoto();
        this.initEvtsRetourGalerieResponsive();
        this.initEvtsTagsPF();
};

WidgetPhotoPopup.prototype.initEvtsDefilerImage = function() {
        const lthis = this;

        $( '#precedent, #suivant' ).on( 'click', function() {
                lthis.defilerImage( this.id );
        });
        $( '#print_content:not(saisir-tag)' ).on( 'keydown', function( event ) {
                var sens = '';

                event = event || window.event;
                // event.keyCode déprécié, on tente d'abord event.key
                if ( 'key' in event ) {
                        if( event.key === 'ArrowLeft') { // gauche
                                sens = 'suivant';
                        } else if ( event.key === 'ArrowRight' ) {  // droite
                                sens = 'precedent';
                        }
                } else if( event.keyCode == 37 ) { // gauche
                        sens = 'suivant';
                } else if( event.keyCode == 39 ) { // droite
                        sens = 'precedent';
                }
                if ( lthis.valOk( sens ) ) {
                        lthis.defilerImage( sens );
                }
        });
};

WidgetPhotoPopup.prototype.initEvtsContact = function() {
        const lthis = this;

        $( '#bloc-infos-img' ).on( 'click', '.lien_contact', function( event ) {
                event.preventDefault();
                lthis.chargerContenuModale( this.href );
        });
};

WidgetPhotoPopup.prototype.initEvtsFonstionsPhoto = function() {
        const lthis = this;

        $( '#boutons-footer #bloc-fct a, #retour-metas' ).on( 'click', function( event ){
                event.preventDefault();
                var voletAOuvrir = $( this ).data( 'volet' ),
                        voletAFermer = $( '.bloc-volet:not(.hidden)' ).data( 'volet' );

                lthis.ouvrirVoletFct( voletAOuvrir, voletAFermer );
                if ( window.matchMedia( '(max-width: 991px)' ).matches ) {
                        $( '#info-img-galerie' ).addClass( 'hidden' );
                        $( '#volet, #retour-galerie' ).removeClass( 'hidden' );
                }
        });
};

WidgetPhotoPopup.prototype.initEvtsRetourGalerieResponsive = function() {
        $( '#retour-galerie' ).on( 'click', function( event ) {
                event.preventDefault();
                $( '#info-img-galerie' ).removeClass( 'hidden' );
                $( this ).addClass( 'hidden' );
                if ( window.matchMedia( '(max-width: 991px)' ).matches ) {
                        $( '#volet' ).addClass( 'hidden' );
                        $( '.bouton-fct.actif' ).removeClass( 'actif' );
                }
        });
};

WidgetPhotoPopup.prototype.initEvtsTagsPF = function() {
        //recupérer tags en ajax (voir pictoflora, peut-être dans le php?)
        //      _OPTIONS
        // https://api-test.tela-botanica.org/service:del:0.1/mots-cles?image=197938
        //      _GET
        // https://api-test.tela-botanica.org/service:del:0.1/mots-cles?image=197938
        this.tagsPfCustom();
        $( '#bloc-tags' ).on( 'click', '.tag', function( event ) {
                event.preventDefault();
                $( this ).toggleClass( 'actif' );
        });
        $( '#bloc-tags' ).on( 'click', '.custom-tag.actif .fermer', function( event ) {
                event.preventDefault();
                //                      Supprimer un custom-tag
                //      _OPTIONS
                // https://api-test.tela-botanica.org/service:del:0.1/mots-cles/38368
                //      _paramètres
                // L'id du tag à la fin de l'url
                //      _DELETE
                // https://api-test.tela-botanica.org/service:del:0.1/mots-cles/38368
                //      _réponse:
                // ""
                //                      Mettre à jour les mots cles
                //      _OPTIONS
                // https://api-test.tela-botanica.org/service:del:0.1/mots-cles?image=197938
                //      _GET
                // https://api-test.tela-botanica.org/service:del:0.1/mots-cles?image=197938
                $( this ).parent( '.custom-tag' ).remove();
        });

        $( '#bloc-tags' ).on( 'keyup', '.custom-tag.actif', function( event ) {
                var supprimerTag = false;

                event = event || window.event;
                // event.keyCode déprécié, on tente d'abord event.key
                if ( 'key' in event ) {
                        supprimerTag = ( 'Delete' === event.key || 'Backspace' === event.key );
                } else {
                        supprimerTag = ( 46 === event.keyCode || 8 === event.keyCode );
                }
                if ( supprimerTag ) {
                //                      Supprimer un custom-tag
                //      _OPTIONS
                // https://api-test.tela-botanica.org/service:del:0.1/mots-cles/38368
                //      _paramètres
                // L'id du tag à la fin de l'url
                //      _DELETE
                // https://api-test.tela-botanica.org/service:del:0.1/mots-cles/38368
                //      _réponse:
                // ""
                //                      Mettre à jour les mots cles
                //      _OPTIONS
                // https://api-test.tela-botanica.org/service:del:0.1/mots-cles?image=197938
                //      _GET
                // https://api-test.tela-botanica.org/service:del:0.1/mots-cles?image=197938
                        $( this ).parent( '.custom-tag' ).remove();
                }
        });
};

WidgetPhotoPopup.prototype.defilerImage = function( sens ) {
        if ( this.valOk( sens, true, 'suivant' ) ) {
                this.indexImage++ ;
                if( this.indexImage >= this.urls.length ) {
                        this.indexImage = 0;
                }
        } else if ( this.valOk( sens, true, 'precedent' ) ) {
                this.indexImage--;
                if( this.indexImage <= 0 ) {
                        this.indexImage = this.urls.length -1;
                }
        }
        this.afficherTitreImage();
};

WidgetPhotoPopup.prototype.afficherTitreImage = function() {
        var item         = this.infos_images[this.urls[this.indexImage]],
                titre        = item['titre'],
                infos        = this.decouperTitre( titre ),
                urlThisImage = $( '#illustration-' + this.indexImage ).attr( 'src' );
                lienContact  =
                        this.urlWidget +'?mode=contact&nn=' + infos.nn +
                        '&nom_sci=' + infos.nom_sci +
                        '&date=' + infos.date +
                        '&id_image=' + item['guid'] +
                        '&auteur=' + infos.auteur;

        if ( this.valOk( this.popup_url ) ) {
                if (! this.popup_url.match( new RegExp( '/img:000' + item['guid'] ) ) ) {
                        this.popup_url = this.actualiserPopupUrl( this.popup_url, urlThisImage );
                }
                lienContact += '&popup_url=' + encodeURIComponent( this.popup_url );
        }

        titre =
                '<a href="' + item['lien'] + '">' + infos.nom_sci + '</a> '+
                ' par <a class="lien_contact" href="' + lienContact + '">' + infos.auteur + '</a> '+
                ' le ' + infos.date + ' ';
        $( '#bloc-infos-img' ).html( titre );
};

WidgetPhotoPopup.prototype.decouperTitre = function( titre ) {
        var tab_titre       = titre.split( '[nn' ),
                nom_sci         = tab_titre[0],
                tab_titre_suite = tab_titre[1].split( ' par ' ),
                nn              = '[nn' + tab_titre_suite[0],
                tab_titre_fin   = tab_titre_suite[1].split( ' le ' ),
                utilisateur     = tab_titre_fin[0],
                date            = tab_titre_fin[1],
                titre_decoupe = {
                        'nom_sci' : nom_sci,
                        'nn'      : nn,
                        'date'    : date,
                        'auteur'  : utilisateur
                };

        return titre_decoupe;
};

WidgetPhotoPopup.prototype.actualiserPopupUrl = function( queryString, remplacement ) {
        const lthis = this;
        var queryStringParsee = queryString.substring(1).split('&');

        $.each( queryStringParsee,  function( i, param ) {
                if( /url_image/.test( param ) ) {
                        queryString = queryString.replace( param, 'url_image=' + remplacement );
                        return false;
                }
        });
        return queryString;
};

WidgetPhotoPopup.prototype.redimentionnerModaleCarousel = function() {
        this.redimensionnerGalerie();
        if ( window.matchMedia( '(max-width: 991px)' ).matches ) {
                $( '#volet, #retour-galerie' ).addClass( 'hidden' );
                $( '#info-img-galerie' ).removeClass( 'hidden' );
                $( '.bouton-fct.actif' ).removeClass( 'actif' );
                $( '.nettoyage-volet.haut' ).text( $( '#bloc-infos-img' ).text() );
                $( '#boutons-footer, #info-img-galerie' ).removeClass( 'col-lg-8' );
                $( '#bloc-infos-img, #volet' ).removeClass( 'col-lg-4' );
        } else {
                $( '#volet, #info-img-galerie' ).removeClass( 'hidden' );
                if ( this.valOk( $( '.bloc-volet:not(.hidden)' ) ) ) {
                        $( '.bouton-fct.' + $( '.bloc-volet:not(.hidden)' ).data( 'volet' ) ).addClass( 'actif' );
                }
                $( '.nettoyage-volet.bas' ).text( $( '#bloc-infos-img' ).text() );
                $( '#boutons-footer, #info-img-galerie' ).addClass( 'col-lg-8' );
                $( '#bloc-infos-img, #volet' ).addClass( 'col-lg-4' );
                $( '#retour-galerie' ).addClass( 'hidden' );
        }
};

WidgetPhotoPopup.prototype.redimensionnerGalerie = function() {
        const lthis = this;
        var maxSize = ( $( window ).width() / $( window ).height() ) < 1 ? $( window ).width() : $( window ).height();

        maxSize -= 30;
        $( '.carousel-item img' ).each( function( index, image ) {
                var proportion  = image.dataset.width / image.dataset.height,
                        cssResize   = {};

                if ( proportion >= 1 ) {
                        cssResize['width'] = maxSize;
                }
                if ( proportion <= 1) {
                        cssResize['height'] = maxSize;
                }
                $( image ).css( cssResize );
        });
};

WidgetPhotoPopup.prototype.ouvrirVoletFct = function( voletAOuvrir, voletAFermer ) {
        if( voletAOuvrir !== voletAFermer ) {
                $( '#boutons-footer  .' + voletAFermer ).removeClass( 'actif' );
                $( '#boutons-footer  .' + voletAOuvrir ).addClass( 'actif' );
                $( '#bloc-' + voletAFermer ).addClass( 'hidden' );
                $( '#bloc-' + voletAOuvrir ).removeClass( 'hidden' );
                $( '#volet' ).scrollTop(0);
                if( 'meta' !== voletAOuvrir ) {
                        $( '#retour-metas' ).removeClass( 'hidden' );
                } else {
                        $( '#retour-metas' ).addClass( 'hidden' );
                }
        }
};

WidgetPhotoPopup.prototype.tagsPfCustom = function() {
        const lthis = this;

        $( '#saisir-tag' ).on( 'blur keyup', function( event ) {
                event = event || window.event;

                var ajouterTag = ( 'blur' === event.type );

                // event.keyCode déprécié, on tente d'abord event.key
                if ( 'key' in event  ) {
                        if ( 'Enter' === event.key ) {
                                ajouterTag = true;
                        }
                } else if ( 13 === event.keyCode ) {
                        ajouterTag = true;
                }
                if      ( ajouterTag ) {
                        var nouveauTag     = $( this ).val(),
                                nouveauTagAttr = lthis.chaineValableAttributsHtml( nouveauTag.toLowerCase() );

                        if( lthis.valOk( nouveauTagAttr ) && !lthis.valOk( $( '#' + nouveauTagAttr + '.tag' ) ) ) {
                                //                      Envoyer tags en ajax :
                                //      _OPTIONS
                                // https://api-test.tela-botanica.org/service:del:0.1/mots-cles/
                                //  _paramètres :
                                //rien
                                //      _PUT
                                // https://api-test.tela-botanica.org/service:del:0.1/mots-cles/
                                //      _paramètres :
                                // image=197938&mot_cle=motcleperso&auteur.id=44084
                                //                      Mettre à jour les mots cles
                                //      _OPTIONS
                                // https://api-test.tela-botanica.org/service:del:0.1/mots-cles?image=197938
                                //      _GET
                                // https://api-test.tela-botanica.org/service:del:0.1/mots-cles?image=197938
                                $( '#tags-pf-supp' ).append(
                                        '<a id="' + nouveauTagAttr + '" class="btn tag custom-tag">' +
                                                nouveauTag + '&nbsp;<i class="fas fa-times-circle fermer"></i>' +
                                        '</a>'
                                );
                                $( '#form-tags-auteur' )[0].reset();
                                $( this ).val( '' );
                        }
                }
        });
};
Subversion Repositories eFlore/Applications.cel

(root)/branches/v3.00-serfouette/widget/modules/photo2/squelettes/js/WidgetPhotoPopup.js @ 3766 – Rev 3668
