Subversion Repositories eFlore/Applications.cel

Compare Revisions

Ignore whitespace Rev 3843 → Rev 3844

/trunk/widget/modules/saisie/squelettes/js/Utils.js
1,9 → 1,7
"use strict";
 
function Utils(){
export function Utils() {
this.cheminFichiers = $( '#zone-appli' ).data( 'url-fichiers' );
// système de traduction minimaliste
this.msgs = {
this.msgs = {
fr: {
'arbre' : 'Arbre',
'dupliquer' : 'Dupliquer',
73,8 → 71,6
};
};
 
var lthis = Utils.prototype;
 
Utils.prototype.init = function() {
// Modale "aide" du projet
this.projetHelpModale();
92,61 → 88,24
this.collectOtherOption();
};
 
/**
* Permet à la fois de vérifier qu'une valeur ou objet existe et n'est pas vide
* et de comparer à une autre valeur :
* Vérifie qu'une variable ou objet n'est pas : vide, null, undefined, NaN
* Si comparer est défini on le compare à valeur en fonction de sensComparaison
* Un booléen est une variable valide : on retourne true
* @param { string || number || object || undefined } valeur
* @param { boolean } sensComparaison : true = rechercher, false = refuser
* @param { string || number || object || undefined || boolean } comparer :valeur à comparer
* @returns {boolean}
*/
Utils.prototype.valOk = function (valeur, sensComparaison = true, comparer = undefined ) {
var retour = true;
if ( 'boolean' !== typeof valeur ) {
switch( typeof valeur ) {
case 'string' :
retour = ( '' !== valeur );
break;
case 'number' :
retour = ( NaN !== valeur );
break;
case 'object' :
retour = ( null !== valeur && undefined !== valeur && !$.isEmptyObject( valeur ) );
if ( null !== valeur && undefined !== valeur.length ) {
retour = ( retour && 0 < valeur.length );
}
break;
case 'undefined' :
default :
retour = false;
}
if ( retour && comparer !== undefined ) {
var resultComparaison = ( comparer === valeur );
retour = ( sensComparaison ) ? resultComparaison : !resultComparaison ;
}
// aide dans le titre du projet
Utils.prototype.projetHelpModale = function() {
const lthis = this;
 
return retour;
$( '#top' ).on ( 'click', '#info-button', function ( event ) {
const fileMimeType = $( this ).data( 'mime-info' ),
label = 'Aide du projet : ' + $( '#titre-projet' ).text();
 
} else {
// Un booléen est une valeur valable
return true;
}
if( fileMimeType.match( 'image' ) ) {
const extention = fileMimeType.replace( /(?:imag)?e\/?/g , '' ),
content = '<img id="modale-aide-img" src="' + lthis.cheminFichiers + 'info.' + extention + '" style="" alt="info projet" />';
}
lthis.activerModale( label, content );
});
};
 
/*************************************
* Fonctions de Style et Affichage *
* des éléments "spéciaux" *
*************************************/
 
// Logique d'affichage pour le input type=file
Utils.prototype.inputFile = function() {
// Initialisation des variables
var $fileInput = $( '.input-file' ),
$button = $( '.label-file' );
 
// Action lorsque la "barre d'espace" ou "Entrée" est pressée
$( '#formulaire' ).on( 'keydown', '.label-file', function( event ) {
if ( event.keyCode == 13 || event.keyCode == 32 ) {
162,7 → 121,7
// _ S'assurer de bien viser la bonne list-checkbox
// _ Au click sur un autre champ remballer la list-checkbox
$( document ).click( function( event ) {
var target = event.target;
const target = event.target;
 
if ( !$( target ).is( '.overSelect' ) && 0 === $( target ).closest( '.checkboxes' ).length ) {
$( '.checkboxes' ).each( function () {
179,12 → 138,13
$( this ).find( 'select' ).toggleClass( 'focus' );
 
// Cacher le volet des autres checkboxes et retirer leur focus
var $checkboxes = $( this ).next(),
count = $( '.checkboxes' ).length;
const $checkboxes = $( this ).next(),
count = $( '.checkboxes' ).length;
 
for ( var i = 0; i < count; i++ ) {
for ( let i = 0; i < count; i++ ) {
if ( $( '.checkboxes' )[i] !== $checkboxes[0] && !$checkboxes.hasClass( 'hidden' ) ) {
var $otherListCheckboxes = $( '.checkboxes' )[i];
const $otherListCheckboxes = $( '.checkboxes' )[i];
 
if ( !$otherListCheckboxes.classList.contains( 'hidden' ) ) {
$otherListCheckboxes.classList.add( 'hidden' );
}
206,9 → 166,7
});
$( '#top' ).on( 'click', '#ajouter-obs', function() {
$( '.range-live-value' ).each( function() {
var $this = $( this );
 
$this.text( '' );
$( this ).text( '' );
});
});
};
219,41 → 177,25
const lthis = this;
 
$( '#zone-appli' ).on( 'click' , '.help-button' , function ( event ) {
var thisFieldKey = $( this ).data( 'key' ),
fileMimeType = $( this ).data( 'mime-type' ),
label = 'Aide pour : ' + $( this ).data( 'name' );
const thisFieldKey = $( this ).data( 'key' ),
fileMimeType = $( this ).data( 'mime-type' ),
label = 'Aide pour : ' + $( this ).data( 'name' );
 
if( fileMimeType.match( 'image' ) ) {
var extention = fileMimeType.replace( /(?:imag)?e\/?/g , '' ),
content = '<img id="modale-aide-img" src="' + lthis.cheminFichiers + thisFieldKey + '.' + extention + '" style="" alt="' + thisFieldKey + '" />';
const extention = fileMimeType.replace( /(?:imag)?e\/?/g , '' ),
content = '<img id="modale-aide-img" src="' + lthis.cheminFichiers + thisFieldKey + '.' + extention + '" style="" alt="' + thisFieldKey + '" />';
}
lthis.activerModale( label, content );
});
};
 
// aide dans le titre du projet
Utils.prototype.projetHelpModale = function() {
const lthis = this;
 
$( '#top' ).on ( 'click', '#info-button', function ( event ) {
var fileMimeType = $( this ).data( 'mime-info' ),
label = 'Aide du projet : ' + $( '#titre-projet' ).text();
 
if( fileMimeType.match( 'image' ) ) {
var extention = fileMimeType.replace( /(?:imag)?e\/?/g , '' ),
content = '<img id="modale-aide-img" src="' + lthis.cheminFichiers + 'info.' + extention + '" style="" alt="info projet" />';
}
lthis.activerModale( label, content );
});
};
 
 
// Activation/Desactivation et contenu de la modale Bootstrap
// https://getbootstrap.com/docs/3.3/javascript/#modals
Utils.prototype.activerModale = function( label, content = '', buttons = [] ) {
var dismiss = '',
buttonsHtmlBase = '<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>',
buttonsHtml = buttonsHtmlBase;
const lthis = this,
buttonsHtmlBase = '<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>';
let dismiss = '',
buttonsHtml = buttonsHtmlBase;
 
// Titre
$( '#fenetre-modal-label' ).text( label );
293,11 → 235,11
};
 
Utils.prototype.redimentionnerImgAide = function() {
var espHorizDisp = $( '.modal-dialog' ).innerWidth() <= 1200 ? $( '.modal-dialog' ).innerWidth() - 30 : 1200,
cssImg = {
'width': espHorizDisp,
'height' : 'auto'
};
const espHorizDisp = $( '.modal-dialog' ).innerWidth() <= 1200 ? $( '.modal-dialog' ).innerWidth() - 30 : 1200,
cssImg = {
'width': espHorizDisp,
'height' : 'auto'
};
 
$( '#modale-aide-img' ).css(cssImg).show(50);
};
304,52 → 246,58
 
// Faire apparaitre un champ text "Autre"
Utils.prototype.onOtherOption = function() {
const PREFIX = 'collect-other-';
 
const lthis = this,
PREFIX = 'collect-other-';
// Ajouter un champ texte pour "Autre"
function optionAdd( otherId, $target, element, dataName, dataLabel ) {
$target.after(
'<div class="control-group">'+
'<label'+
' for="' + otherId + '"'+
' class="' + otherId + '"'+
'>'+
'Autre option "' + dataLabel.toLowerCase() + '" :'+
'</label>'+
'<input'+
' type="text"'+
' id="' + otherId + '"'+
' name="' + otherId + '"'+
' class="collect-other form-control"'+
' data-name="' + dataName + '"'+
' data-element="' + element + '"'+
'>'+
'</div>'
);
$( '#' + otherId ).focus();
}
 
const optionAdd = (
otherId,
$target,
element,
dataName,
dataLabel
) => {
$target.after(
'<div class="control-group">'+
'<label'+
' for="' + otherId + '"'+
' class="' + otherId + '"'+
'>'+
'Autre option "' + dataLabel.toLowerCase() + '" :'+
'</label>'+
'<input'+
' type="text"'+
' id="' + otherId + '"'+
' name="' + otherId + '"'+
' class="collect-other form-control"'+
' data-name="' + dataName + '"'+
' data-element="' + element + '"'+
'>'+
'</div>'
);
$( '#' + otherId ).focus();
};
// Supprimer un champ texte pour "Autre"
function optionRemove( otherId ) {
$( '#' + otherId ).closest('.control-group').remove();
}
const optionRemove = otherId => $( '#' + otherId ).closest('.control-group').remove();
 
let dataName = '',
otherId = '',
dataLabel = '',
element = '';
 
$( '.other', '#formulaire' ).each( function() {
if( $( this ).hasClass( 'is-select' ) ) {
var dataName = $( this ).data( 'name' ),
otherId = PREFIX + dataName,
dataLabel = $( '.select' ).data( 'label' );
 
dataName = $( this ).data( 'name' );
otherId = PREFIX + dataName;
dataLabel = $( '.select' ).data( 'label' );
// Insertion du champ "Autre" après les boutons
if ( !lthis.valOk( $( '#'+otherId ) ) ) {
optionAdd( otherId, $( this ).parent( '.add-field-select' ), 'select', dataName, dataLabel );
}
} else if ( $( this ).is( ':checked' ) ) {
var dataName = $( this ).data( 'name' ),
otherId = PREFIX + dataName,
element = $( this ).data( 'element' ),
dataLabel = $( this ).data( 'label' );
 
dataName = $( this ).data( 'name' );
otherId = PREFIX + dataName;
dataLabel = $( this ).data( 'label' );
element = $( this ).data( 'element' );
// Insertion du champ "Autre" après les boutons
if ( !lthis.valOk( $( '#'+ otherId ) ) ) {
optionAdd( otherId, $( this ).parent( 'label' ), element, dataName, dataLabel );
358,10 → 306,9
});
 
$( '#formulaire' ).on( 'change', '.select', function () {
var dataName = $( this ).data( 'name' ),
otherId = PREFIX + dataName,
dataLabel = $( this ).data( 'label' );
 
dataName = $( this ).data( 'name' );
otherId = PREFIX + dataName;
dataLabel = $( this ).data( 'label' );
if( 'other' === $( this ).val() ) {
// Insertion du champ "Autre" après les boutons
if ( !lthis.valOk( $( '#'+otherId ) ) ) {
375,10 → 322,9
});
 
$( '#formulaire' ).on( 'change', 'input[type=radio]', function () {
var dataName = $( this ).data( 'name' ),
otherId = PREFIX + dataName,
dataLabel = $( this ).data( 'label' );
 
dataName = $( this ).data( 'name' );
otherId = PREFIX + dataName;
dataLabel = $( this ).data( 'label' );
if( 'other' === $( this ).val() ) {
// Insertion du champ "Autre" après les boutons
if ( !lthis.valOk( $( '#'+otherId ) ) ) {
392,11 → 338,10
});
 
$( '#formulaire' ).on( 'click', '.list-checkbox .other,.checkbox .other', function () {
var dataName = $( this ).data( 'name' ),
otherId = PREFIX + dataName,
element = $( this ).data( 'element' ),
dataLabel = $( this ).data( 'label' );
 
dataName = $( this ).data( 'name' );
otherId = PREFIX + dataName;
dataLabel = $( this ).data( 'label' );
element = $( this ).data( 'element' );
if( $( this ).is( ':checked' ) ) {
// Insertion du champ "Autre" après les boutons
if ( !lthis.valOk( $( '#'+otherId ) ) ) {
412,8 → 357,8
 
Utils.prototype.collectOtherOption = function() {
$( '#formulaire' ).on( 'change', '.collect-other', function () {
var otherIdSuffix = $( this ).data( 'name' ).replace( '[]', '' );
var element = $( this ).data( 'element' );
const otherIdSuffix = $( this ).data( 'name' ).replace( '[]', '' ),
element = $( this ).data( 'element' );
 
if ( '' === $( this ).val() ){
if ( 'select' === element ) {
440,3 → 385,52
});
};
 
/**
* Permet à la fois de vérifier qu'une valeur ou objet existe et n'est pas vide
* et de comparer à une autre valeur :
* Vérifie qu'une variable ou objet n'est pas : vide, null, undefined, NaN
* Si comparer est défini on le compare à valeur en fonction de sensComparaison
* Un booléen est une variable valide : on retourne true
* @param { string || number || object || undefined } valeur
* @param { boolean } sensComparaison : true = rechercher, false = refuser
* @param { string || number || object || undefined || boolean } comparer :valeur à comparer
* @returns {boolean}
*/
export const valOk = (
valeur,
sensComparaison = true,
comparer = undefined
) => {
let retour = true;
 
if ( 'boolean' !== typeof valeur ) {
switch( typeof valeur ) {
case 'string' :
retour = ( '' !== valeur );
break;
case 'number' :
retour = ( NaN !== valeur );
break;
case 'object' :
retour = ( null !== valeur && undefined !== valeur && !$.isEmptyObject( valeur ) );
if ( null !== valeur && undefined !== valeur.length ) {
retour = ( retour && 0 < valeur.length );
}
break;
case 'undefined' :
default :
retour = false;
}
if ( retour && comparer !== undefined ) {
const resultComparaison = ( comparer === valeur );
 
retour = ( sensComparaison ) ? resultComparaison : !resultComparaison ;
}
 
return retour;
 
} else {
// Un booléen est une valeur valable
return true;
}
};