Subversion Repositories eFlore/Applications.cel

Compare Revisions

Ignore whitespace Rev 3630 → Rev 3631

/trunk/widget/modules/photo/squelettes/js/WidgetPhotoPopup.js
New file
0,0 → 1,334
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( '' );
}
}
});
};