Subversion Repositories eFlore/Applications.cel

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.popupUrl                     = proprietes.popupUrl;
                this.urlBaseTelechargement        = proprietes.urlBaseTelechargement;
                this.urlServiceRegenererMiniature = proprietes.urlServiceRegenererMiniature;
        }

        this.mettreAJourInfosImage();
}

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.mettreAJourPopup();
        }

        this.redimentionnerModaleCarousel();
};

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

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

WidgetPhotoPopup.prototype.mettreAJourPopup = function() {
        this.mettreAJourInfosImage();
        this.afficherTitreImage();
        this.traiterMetas();
        this.regenererMiniature();
        this.fournirLienIdentiplante();
};

WidgetPhotoPopup.prototype.mettreAJourInfosImage = function() {
        this.item         = this.infos_images[this.urls[this.indexImage]];
        this.titreImage   = this.item['titre'];
        this.lienEflore   = this.item['lien'];
        this.idImage      = this.item['id_photo'];
        this.urlThisImage = this.item['url_photo']+'.jpg';
        this.obs          = this.item['obs'];
        this.nn           = '[nn' + this.obs['nom_sel_nn']+']';
        this.urlIP        = 'https://'+this.obs['url_ip'];
        this.auteur       = this.item['utilisateur']['nom_utilisateur'];
        this.urlProfil    = '/profil-par-id/'+this.item['utilisateur']['id_utilisateur'];
        this.date         = this.item['date'];
};

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 ) {

                const determinerSens = function( enventKey, left, right ) {
                        switch ( enventKey ) {
                                case left:
                                        return 'suivant';
                                case right:
                                        return 'precedent'
                                default:
                                        break;
                        }

                        return;
                }

                event = (event || window.event);
                // event.keyCode déprécié, on tente d'abord event.key
                let sens = ( 'key' in event ) ? determinerSens( event.key, 'ArrowLeft', 'ArrowRight' ) : determinerSens( event.keyCode, 37, 39 );;

                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.initEvtsFonctionsPhoto = 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 ) {
                let 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 ( 'suivant' === sens ) {
                this.indexImage++ ;
                if( this.indexImage >= this.urls.length ) {
                        this.indexImage = 0;
                }
        } else if ( 'precedent' === sens ) {
                this.indexImage--;
                if( this.indexImage <= 0 ) {
                        this.indexImage = this.urls.length -1;
                }
        }
        // @TODO: Modifier l'attr content de 'meta[property=og:image]' et y mettre l'url de l'image
        this.mettreAJourPopup();
};

WidgetPhotoPopup.prototype.afficherTitreImage = function() {
        let lienContact  =
                        this.urlWidget +'?mode=contact&nn=' + this.nn +
                        '&nom_sci=' + this.obs['nom_sel'] +
                        '&date=' + this.date +
                        '&localisation=' + this.obs['localisation'] +
                        '&id_image=' + this.idImage +
                        '&auteur=' + this.auteur;

        if ( this.valOk( this.popupUrl ) ) {
                if (! this.popupUrl.match( new RegExp( 'img:' + this.idImage ) ) ) {
                        this.popupUrl = this.actualiserPopupUrl( this.popupUrl, this.urlThisImage );
                }
                lienContact += '&popup_url=' + encodeURIComponent( this.popupUrl );
        }

        $( '#bloc-infos-img' ).html(
                '<a href="' + this.lienEflore + '">' + this.obs['nom_sel'] + '</a> '+
                ' par '+
                '<a class="lien_contact" href="' + lienContact + '">' + this.auteur + '</a> '+
                ' le ' + this.date + ' - ' + this.obs['localisation']
        );
};

WidgetPhotoPopup.prototype.actualiserPopupUrl = function( queryString, remplacement ) {
        let 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() {
        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);
                $( '#retour-metas' ).removeClass( 'hidden', 'meta' === voletAOuvrir );
        }
};

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 actif">' +
                                                nouveauTag + '&nbsp;<i class="fas fa-times-circle fermer"></i>' +
                                        '</a>'
                                );
                                $( '#form-tags-auteur' )[0].reset();
                                $( this ).val( '' );
                        }
                }
        });
};

WidgetPhotoPopup.prototype.traiterMetas = function() {
        this.afficherMetas();
        this.afficherPopupLocalisation();
        this.afficherMetasPlus();
        this.fournirLienTelechargement();
};

WidgetPhotoPopup.prototype.afficherMetas = function() {
        const lthis         = this;
        const META_CONTENUS = {
                'nom' : '<a href="' + this.lienEflore + '" target="_blank">' + this.obs['nom_sel'] + '</a> ',
                'localisation' : this.obs['localisation'],
                'auteur' : this.auteur,
                'date-obs' : this.date,
                'commentaire' : this.obs['commentaire'],
                'certitude' : this.obs['certitude'],
                'fiabilite' : this.obs['fiabilite'],
                'num-photo' : this.idImage,
                'titre-original' : this.item['nom_original'],
                'date-photo' : this.formaterDate( this.item['date_photo'] ),
                'attribution-copy' : this.item['attribution'],
                'url-copy' : this.urlThisImage
        };

        $.each( META_CONTENUS, function( attrId, contenu ) {
                let $metaContainer = $( '#bloc-meta #'+attrId );

                if ( lthis.valOk( contenu ) ) {
                        switch( attrId ) {
                                case 'attribution-copy' :
                                case 'url-copy' :
                                        $metaContainer.val( contenu );
                                        lthis.copieAutoChamp( $metaContainer );
                                        break;
                                case 'nom' :
                                        $( '.contenu', $metaContainer ).html( contenu );
                                        $( '.bouton', $metaContainer ).attr( 'href', lthis.lienEflore );
                                        break;
                                case 'auteur' :
                                        $( '.bouton', $metaContainer ).attr( 'href', lthis.urlProfil );
                                default:
                                        $( '.contenu', $metaContainer ).text( contenu );
                                        break;
                        }
                }
        });
};

WidgetPhotoPopup.prototype.copieAutoChamp = function($champACopier) {
        $champACopier.on( 'click', function() {

                $( this ).select();
                document.execCommand( 'copy' );

                $( this ).after(
                        '<p class="copy-message alert-success" style="width: 100%; height:' + $( this ).outerHeight() + 'px; margin: 0; display:flex;">'+
                                '<span style="margin:auto; font-size:1rem;">Copié dans le presse papier</span>'+
                        '</p>'
                ).addClass( 'hidden' );

                setTimeout( function() {
                        $( '.copy-message' ).remove();
                        $champACopier.removeClass( 'hidden' );
                }, 1000 );
        });
};

WidgetPhotoPopup.prototype.afficherMetasPlus = function() {
        const lthis         = this;
        const META_LABELS  = {
                'id_obs' : 'observation n°',
                'projet' : 'projet',
                'date_obs' : 'date d´observation',
                'nom_sel': 'nom scientifique',
                'nom_sel_nn' : 'nom scientifique n°',
                'nom_ret' : 'nom retenu',
                'nom_ret_nn' : 'nom retenu n°',
                'famille' : 'famille',
                'nom_referentiel' : 'réferentiel',
                'commentaire' : 'commentaire',
                'certitude' : 'certitude',
                'fiabilite' : 'fiabilite',
                'tags_obs' : 'tags de l´observation',
                'localisation' : 'localisation',
                'lieudit' : 'lieu dit',
                'station' : 'station',
                'milieu' : 'milieu',
                'latitude' : 'latitude',
                'longitude' : 'longitude',
                'altitude' : 'altitude',
                'localisation_precision': 'précision de la localisation',
                'code_insee' : 'code insee de la commune',
                'dept' : 'département',
                'pays' : 'pays',
                'est_ip_valide' : 'validée sur identiplante',
                'score_ip' : 'score identiplante',
                'url_ip' : 'url identiplante',
                'abondance' : 'abondance',
                'phenologie' : 'phénologie',
                'spontaneite' : 'spontaneite',
                'type_donnees' : 'type de donnees',
                'biblio' : 'bibliographie',
                'source' : 'source',
                'herbier' : 'herbier',
                'observateur' : 'observateur',
                'observateur_structure' : 'structure'
        };
        const $contenuPlusMeta  = $( '#contenu-meta-plus' );
        let degres = '0';

        this.rotationFleche( degres );

        $.each( META_LABELS, function( cle, label ) {
                let idAttr = cle.replace( '_', '-' ),
                        contenu = lthis.obs[cle];

                if ( 0 <= $.inArray( cle, ['est_ip_valide', 'herbier'] ) && '0' === contenu ) {
                        contenu = 'non';
                } else if ( 'date_obs' === cle ) {
                        contenu = lthis.formaterDate(contenu);
                }

                if ( lthis.valOk( contenu ) ) {
                        $contenuPlusMeta.append(
                                '<li id="' + idAttr + '-meta-plus" class="row">'+
                                        '<div class="col-5 label">' + label.charAt( 0 ).toUpperCase() + label.slice( 1 ) + '</div>'+
                                        '<div class="col-5 contenu">' + contenu + '</div>'+
                                '</li>'
                        );
                }
        });

        $contenuPlusMeta.hide();
        $( '#plus-meta' ).off( 'click' ).on( 'click', function( event ) {
                event.preventDefault();

                $contenuPlusMeta.toggle( 200, function() {
                        degres = $contenuPlusMeta.is( ':visible' ) ? '180' : '0';
                        lthis.rotationFleche( degres );
                });
        });
};

WidgetPhotoPopup.prototype.rotationFleche = function( degres ) {
        $( '#plus-meta i' ).css({
                '-webkit-transform' : 'rotate('+ degres +'deg)',
                '-moz-transform' : 'rotate('+ degres +'deg)',
                '-ms-transform' : 'rotate('+ degres +'deg)',
                'transform' : 'rotate('+ degres +'deg)'
        });
};

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

        $( '#formats' ).on( 'change', function() {
                let format             = ( $( this ).val() || 'O' ),
                        lienTelechargement = lthis.urlBaseTelechargement + lthis.idImage + '?methode=telecharger&format=' + format;

                $( '#telecharger' ).attr( 'href', lienTelechargement );
        });

        $( '#formats' ).trigger( 'change' );
};


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

        $( '#localisation a.bouton' ).on( 'click', function( event ){
                event.preventDefault();

                $( this ).after(
                        '<div id="localisation-map-container">'+
                                '<button id="map-close" type="button" class="bouton btn btn-sm btn-outline-secondary" aria-label="Close">'+
                                        '<span aria-hidden="true">×</span>'+
                                '</button>'+
                                '<div id="localisation-map"></div>'+
                        '</div>'
                );

                let lat = lthis.obs['latitude'],
                        lng = lthis.obs['longitude'],
                        map = L.map( 'localisation-map', {
                                zoomControl: true,
                                dragging: false,
                                scrollWheelZoom: 'center'
                        } ).setView( [lat, lng], 12 );

                map.markers = [];

                L.tileLayer(
                        'https://osm.tela-botanica.org/tuiles/osmfr/{z}/{x}/{y}.png',
                        {
                                attribution: 'Data © <a href="http://osm.org/copyright">OpenStreetMap</a>',
                                maxZoom: 18
                        }
                ).addTo( map );

                map.addLayer( new L.FeatureGroup() );

                let marker = new L.Marker(
                        {
                                'lat': lat,
                                'lng': lng
                        },
                        {
                                draggable: false,
                        }
                );


                map.addLayer( marker );
                map.markers.push( marker );

                $( '#map-close' ).on( 'click', function( event ){
                        $( '#localisation-map-container' ).remove();
                });
        });

        $( '#fenetre-modal' ).on( 'click', function( event ) {
                if(
                        !$( event.target ).closest( '#localisation-map-container' ).length
                        && !$( event.target ).closest( '#obs-localisation' ).length
                ) {
                        $( '#localisation-map-container' ).remove();
                }
        });
};


WidgetPhotoPopup.prototype.regenererMiniature = function() {
        const lthis = this;
        $( '#regenerer-miniature' ).off( 'click' ).on( 'click', function( event ) {
                event.preventDefault();

                let url = lthis.urlServiceRegenererMiniature + lthis.idImage;

                $.get( url ).fail( function() {
                        console.log( 'a foiré :(' );
                });
        });
};

WidgetPhotoPopup.prototype.formaterDate = function( sqlDate ) {
        dateFormatee = sqlDate
                .substring( 0, 10 )
                .split( '-' )
                .reverse()
                .join('/');

        return dateFormatee;
};

WidgetPhotoPopup.prototype.fournirLienIdentiplante = function() {
        const lthis = this;
        $( '.signaler-erreur-obs' ).each( function() {
                $( this ).attr( 'href', lthis.urlIP );
        });
};

// WidgetPhotoPopup.prototype.afficherTags = function() {
//      const lthis = this;
//      const TAGS_BASE = [
//              'port',
//              'fleur',
//              'fruit',
//              'feuille',
//              'ecorce',
//              'rameau',
//              'planche',
//              'insecte'
//      ];

        
// };