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; |
} |
}; |