Subversion Repositories eFlore/Applications.cel

Compare Revisions

Ignore whitespace Rev 3184 → Rev 3185

/trunk/widget/modules/manager/squelettes/css/manager.css
48,15 → 48,62
 
#zone-appli #register-page #group-settings-form .widget-blocks button,
#group-settings-form .button {
font-size: 1.6rem;
background-color: #a2b93b;
border-radius: .2rem;
border: 0 none;
padding: 1.25rem 2rem;
cursor: pointer;
color: #fff;
display: inline-block;
font-family: Ubuntu,sans-serif;
font-size: 13px;
font-size: 1.3rem;
font-weight: 500;
letter-spacing: 1px;
letter-spacing: .1rem;
line-height: 15px;
line-height: 1.5rem;
text-align: center;
text-decoration: none;
text-transform: capitalize;
-webkit-transition: background .2s ease;
-o-transition: background .2s ease;
transition: background .2s ease;
}
 
#zone-appli #register-page #group-settings-form .widget-blocks button:hover,
#zone-appli #register-page #group-settings-form .widget-blocks button:focus,
#group-settings-form .button:hover,
#group-settings-form .button:focus {
background-color: #b3c954;
}
 
#zone-appli #register-page #group-settings-form .widget-blocks input,
#zone-appli #register-page #group-settings-form .widget-blocks select,
#zone-appli #register-page #group-settings-form .widget-blocks textarea {
width: 100%;
border-radius: .3rem;
border: .1rem solid #ddd;
padding: 1rem;
line-height: 1.15;
margin: 0;
font-size: 1.3rem;
}
 
#zone-appli #register-page #group-settings-form .widget-blocks input[type="checkbox"],
#zone-appli #register-page #group-settings-form .widget-blocks input[type="radio"] {
width: auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
text-align: start;
}
 
#zone-appli #register-page #group-settings-form .widget-blocks input {
overflow: visible;
}
 
 
#zone-appli #register-page #group-settings-form .widget-blocks .message {
background-color: #f8f5ef;
color: #232323;
75,9 → 122,8
padding: 0 3rem 3rem 3rem;
min-height: 100%;
width: 100%;
/*pointer-events: none;*/
overflow: hidden;
/*background: rgba(248, 245, 239, 0.6);*/
background: rgba(248, 245, 239, 0.6);
}
 
#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer h1 {
128,7 → 174,7
 
#zone-appli #register-page #group-settings-form .widget-blocks .list-label,
#zone-appli #register-page #group-settings-form .widget-blocks label {
color: #606060;
color: #000;
display: block;
font-size: 1.5rem;
margin-bottom: 0.4rem;
238,10 → 284,6
#zone-appli #register-page #group-settings-form .widget-blocks .fichier-type:focus {
background-color: rgba(234, 153, 115, 0.7);
}
/*
#zone-appli #register-page #group-settings-form .widget-blocks .remove-file i {
font-size: 1.6rem;
}*/
 
#zone-appli #register-page #group-settings-form .widget-blocks .fichier-type {
text-transform: capitalize;
253,8 → 295,8
color: #ffffff;
border-radius: 0.2rem;
}
/****************************/
 
 
/**** style du formulaire des nouveaux champs après validation ****/
#zone-appli #register-page #group-settings-form .widget-blocks .disabled,
#zone-appli #register-page #group-settings-form .widget-blocks .validated {
287,19 → 329,18
text-align: left;
color: #606060;
}
/******************************************************************/
 
/*************************************************/
 
/**** Style des select ****/
#group-settings-form select,
#group-settings-form .selectBox select {
background-color: rgba(0, 159, 184, 0.5);
border: 0.1rem solid #ddd;
/**** Style des select et checkbox-list ****/
#zone-appli #register-page #group-settings-form .widget-blocks select,
#zone-appli #register-page #group-settings-form .widget-blocks .selectBox select {
background-color: #fff;
border: none;
}
 
#group-settings-form select {
font-size: 3rem;
font-weight: 900;
font-weight: 300;
}
 
#group-settings-form select,
307,7 → 348,7
#group-settings-form .selectBox select,
#group-settings-form .selectBox select:required {
width: 100%;
color:#fff;
color:#333;
border-radius: 0.3rem;
padding: 0.8rem;
line-height: 1.15;
361,25 → 402,30
}
 
#group-settings-form .select-wrapper::after,
#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .selectBox::after {
#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .selectBox::after,
#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .select-wrapper::after {
/* Ajout et style d'une "flèche bas" */
content: '⌄';
pointer-events: none;
position: absolute;
top: 0;
right: 0.5rem;
font-size: 3rem;
font-weight: 900;
color: #fff;
font-size: 2rem;
font-weight: 300;
color: #333;
}
/*******************************************/
 
#group-settings-form #new-fields .select-wrapper::after,
#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .selectBox::after,
#zone-appli #register-page #group-settings-form .widget-blocks .widget-renderer .select-wrapper::after {
/* correction de la position de la flèche
dans le formulaire des champs ajoutés*/
top: -10px;
/**** Input Type Range ****/
#zone-appli #register-page #group-settings-form .widget-blocks .range input[type="range"],
#zone-appli #register-page #group-settings-form .widget-blocks .range input[type="number"] {
border:none;
}
 
#zone-appli #register-page #group-settings-form .widget-blocks .range input[type="number"] {
padding: 0 0 0 0.5rem;
height: 3rem;
text-align: center;
}
/**************************/
 
/**** Affichage des nouveaux champs ****/
/trunk/widget/modules/manager/squelettes/js/manager.js
53,14 → 53,22
function inputListCheckbox() {
// On écoute le click sur une list-checkbox ('.selectBox')
// à tout moment de son insertion dans le dom
$('#zone-appli').on( 'click' , '.selectBox' , function() {
$( '#zone-appli' ).on( 'click' , '.selectBox' , function() {
$( '.checkboxes[data-id="' + $(this).attr( 'data-id' ) + '"]' ).toggleClass( 'hidden' );
});
}
 
// Mettre la première lettre en majuscule, les autres en minuscule
function capitalize( string ) {
return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
function inputRangeDisplayNumber() {
 
$( '#zone-supp' ).on( 'input' , '.range input[type="range"]' , function () {
console.log( $( this ).val() );
$( this ).next( 'input[type="number"]' ).val ( $( this ).val() );
});
$( '#zone-supp' ).on( 'input' , '.range input[type="number"]' , function () {
console.log( $( this ).val() );
$( this ).prev( 'input[type="range"]' ).val ( $( this ).val() );
});
 
}
 
/***********************************************************
543,21 → 551,21
// Certains indices peuvent correspondre à un champ supprimé
if( 0 < $( thisFieldset ).length ) {
// initialisation du tableau de résultats
datasToSubmit[ resultArrayIndex ] = { fieldValues:{} };
datasToSubmit[ resultArrayIndex ] = { fieldValues:{} };
// Ajout de la clé au tableau de resultats
datasToSubmit[ resultArrayIndex ].key = $( '.field-key' , thisFieldset ).val();
datasToSubmit[ resultArrayIndex ].key = $( '.field-key' , thisFieldset ).val();
// Ajout de le nom au tableau de resultats
datasToSubmit[ resultArrayIndex ].name = $( '.field-name' , thisFieldset ).val();
datasToSubmit[ resultArrayIndex ].name = $( '.field-name' , thisFieldset ).val();
// Recueil de l'élément choisi pour le tableau de resultats
datasToSubmit[ resultArrayIndex ].element = $( '.field-element' , thisFieldset ).val();
datasToSubmit[ resultArrayIndex ].element = $( '.field-element' , thisFieldset ).val();
// Ajout de la valeur 'requis' ou non au tableau de resultats
datasToSubmit[ resultArrayIndex ].mandatory = $( '.field-is_mandatory' , thisFieldset ).is( ':checked' );
datasToSubmit[ resultArrayIndex ].mandatory = $( '.field-is_mandatory' , thisFieldset ).is( ':checked' );
// Ajout de l'unité au tableau de resultats
datasToSubmit[ resultArrayIndex ].unit = $( '.field-unit' , thisFieldset ).val() || null;
datasToSubmit[ resultArrayIndex ].unit = $( '.field-unit' , thisFieldset ).val() || null;
// Ajout du tooltip au tableau de resultats
datasToSubmit[ resultArrayIndex ].description = $( '.field-description' , thisFieldset ).val() || null;
// Ajout du nom du document d'aide au tableau de resultats
datasToSubmit[ resultArrayIndex ].help = $( '.file-return.help-doc-' + index ).text() || null;
datasToSubmit[ resultArrayIndex ].help = $( '.file-return.help-doc-' + index ).text() || null;
// Collecte les des données dépendantes de l'élément choisi
// sous forme d'un tableau de resultats
onSelectCollectDataValuesToSubmit( datasToSubmit[ resultArrayIndex ] , thisFieldset );
715,20 → 723,20
function onClickPreviewField( thisFieldset , index ) {
// Récupération des données
// Tous les champs
var fieldLabel = $( '.field-name' , thisFieldset ).val(),//nom
fieldKey = $( '.field-key' , thisFieldset ).val(),//clé
fieldElement = $( '.field-element' , thisFieldset ).val(),//élément
var fieldLabel = $( '.field-name' , thisFieldset ).val() || '',//nom
fieldKey = $( '.field-key' , thisFieldset ).val() || '',//clé
fieldElement = $( '.field-element' , thisFieldset ).val() || '',//élément
fieldIsMandatory = $( '.field-is_mandatory' , thisFieldset ).is( ':checked' ),//champ requis
fieldUnit = $( '.field-unit' , thisFieldset ).val(),//unités
fieldTooltip = $( '.field-description' , thisFieldset ).val(),//info-bulle
fieldHelp = $( '.file-return.help-doc-' + index ).text(),//nom du fichier d'aide
fieldUnit = $( '.field-unit' , thisFieldset ).val() || '',//unités
fieldTooltip = $( '.field-description' , thisFieldset ).val() || '',//info-bulle
fieldHelp = $( '.file-return.help-doc-' + index ).text() || '',//nom du fichier d'aide
fieldPlaceholder = $( '.aide-saisie' , thisFieldset ).val() || '',//placeholder
// Champs à valeur numérique ou date
fieldStep = $( '.step' , thisFieldset ).val(),
fieldMin = $( '.min' , thisFieldset ).val(),
fieldMax = $( '.max' , thisFieldset ).val(),
fieldStep = $( '.step' , thisFieldset ).val() || '',
fieldMin = $( '.min' , thisFieldset ).val() || '',
fieldMax = $( '.max' , thisFieldset ).val() || '',
// Champs "listes"
fieldDefaultNum = $( '.default' , thisFieldset ).val(),//option pas default
fieldDefaultNum = $( '.default' , thisFieldset ).val() || '',// value range/number par default
fieldOtherValue = $( '.option-other-value' , thisFieldset ).is( ':checked' ),//option autre
fieldOptions = collectListOptions( thisFieldset );//Array: toutes les options
// Variables d'affichage
777,7 → 785,7
// Attribut required pour le listes
commonFieldsHtml.fieldInput.mandatoryAttr = ' required="required"';
// Nom du champ (éléments listes)
listFieldsHtml.containerContent += ' *';
listFieldsHtml.containerContent += ' *';
// Nom du champ (éléments simples)
commonFieldsHtml.fieldLabel.labelContent += ' *';
}
1166,7 → 1174,10
}
 
fieldHtml =
'<div class="number">' +
'<div' +
' class="range"' +
' id="' + fieldKey + '"' +
'>' +
'<label' +
// For
commonFieldsHtml.fieldLabel.forAttr +
1182,7 → 1193,6
'</label>' +
// Bouton 'help'
commonFieldsHtml.helpButton +
 
'<input' +
// Type
commonFieldsHtml.fieldInput.typeAttr +
1194,26 → 1204,39
commonFieldsHtml.fieldInput.classAttr +
// Info-bulle
commonFieldsHtml.titleAttr +
// Info-bulle
commonFieldsHtml.fieldInput.placeholderAttr +
// Required
commonFieldsHtml.fieldInput.mandatoryAttr +
// Default
' value="' + fieldDefaultNum + '"' +
// Autres attributs
commonFieldsHtml.fieldInput.otherAttr +
'>' +
'<input' +
' type="number"' +
' name="' + fieldKey + 'Output"' +
// Info-bulle
commonFieldsHtml.titleAttr +
// Placeholder
commonFieldsHtml.fieldInput.placeholderAttr +
' value="' + fieldDefaultNum + '"' +
// Autres attributs
commonFieldsHtml.fieldInput.otherAttr +
// DataId
commonFieldsHtml.dataIdAttr +
'>' +
'</div>';
break;
 
case 'number':
// Step
if( '' !== fieldStep ) {
commonFieldsHtml.fieldInput.otherAttr += ' step="' + fieldStep + '"';
}
case 'date':
case 'number':
// Ouvrir l'attribut class (suppression de '"')
commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1);
// Classe 'and-help'
commonFieldsHtml.fieldInput.classAttr += commonFieldsHtml.helpClass + '"';
// Step
if( '' !== fieldStep ) {
commonFieldsHtml.fieldInput.otherAttr += ' step="' + fieldStep + '"';
}
// Min
if( '' !== fieldMin ) {
commonFieldsHtml.fieldInput.otherAttr += ' min="' + fieldMin + '"';
1248,10 → 1271,12
commonFieldsHtml.fieldInput.classAttr +
// Info-bulle
commonFieldsHtml.titleAttr +
// Info-bulle
// Placeholder
commonFieldsHtml.fieldInput.placeholderAttr +
// Required
commonFieldsHtml.fieldInput.mandatoryAttr +
// Default
' value="' + fieldDefaultNum + '"' +
// Autres attributs
commonFieldsHtml.fieldInput.otherAttr +
'>' +
1317,7 → 1342,7
// Valeur transmise (value)
optionValue : $( this ).find('.list-value').val().toLowerCase(),
// Valeur Visible
optionText : capitalize( $( this ).find('.list-value').val() ),
optionText : $( this ).find('.list-value').val(),
// Booléen "default"
isDefault : $( this ).find( '.is-defaut-value').is( ':checked' ),
// Indice de l'option
1487,6 → 1512,8
inputFile();
// Affichage des List-checkbox
inputListCheckbox();
// Affichage des Range
inputRangeDisplayNumber()
// Modale "aide"
previewFieldHelpModal();
});
/trunk/widget/modules/manager/squelettes/creation.tpl.html
46,7 → 46,6
<link href="https://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/css/smoothness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="https://resources.tela-botanica.org/bootstrap/3.1.0/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="<?php echo $url_base; ?>modules/manager/squelettes/css/manager.css" media="screen" />
<link rel="stylesheet" type="text/css" id="telabotanica-style-css" href="https://www.tela-botanica.org/wp-content/themes/telabotanica/dist/bundle.css?ver=4.9.7" media="all">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
 
<!-- Google Analytics -->
106,12 → 105,13
<?php if ($mode === 'modification') : ?>
<input id="langue" name="langue" readonly value="<?php echo $widget['langue']; ?>">
<?php else : ?>
<input id="langue" name="langue" list="langues">
<datalist id="langues" >
<?php foreach ($langues as $code => $langue) : ?>
<option value="<?php echo $code; ?>"><?php echo $langue['nom']; ?></option>
<?php endforeach; ?>
</datalist>
<div class="select-wrapper">
<select id="langue" name="langue">
<?php foreach ($langues as $code => $langue) : ?>
<option value="<?php echo $code; ?>" <?php echo $code === 'fr' ? 'selected' : '';?>><?php echo $langue['nom']; ?></option>
<?php endforeach; ?>
</select>
</div>
<?php endif; ?>
</div><!-- end #basic-details-section -->
 
243,7 → 243,7
 
<div class="widget-blocks col-md-8">
<!-- <iframe src="http://localhost/widget:cel:saisie2?projet=<?php echo isset($widget['projet'])?$widget['projet']:'base'; ?>" class="widget-renderer" height="100%" width="100%" ></iframe> -->
<div class="widget-renderer" style="background:rgba(248, 245, 239, 0.6);">
<div class="widget-renderer">
 
<div id="preview-header" class="row">
<div id="preview-logo" class="col-md-4">
302,47 → 302,35
 
<h2>Observateur</h2>
 
<div id="zone-courriel" class="row align-items-center">
<div id="zone-courriel" class="row">
 
<div class="col-md-6">
<label for="courriel" class="" title="Veuillez saisir votre adresse courriel.">
<strong class="obligatoire">*</strong>Courriel
<i class="fa fa-envelope"></i> Courriel *
</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input type="email" id="courriel" name="courriel" class="form-control" title="Veuillez saisir votre adresse courriel. ">
<input type="hidden" id="id_utilisateur" name="id_utilisateur">
</div>
<input type="email" id="courriel" name="courriel" title="Veuillez saisir votre adresse courriel. ">
<input type="hidden" id="id_utilisateur" name="id_utilisateur">
</div>
 
<div id="zone-courriel-confirmation" class="col-md-6 ">
<label for="courriel_confirmation" class="" title="Veuillez confirmer le courriel.">
<strong class="obligatoire">*</strong> Courriel (confirmation)
<i class="fa fa-envelope"></i> Courriel * (confirmation)
</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input type="email" id="courriel_confirmation" name="courriel_confirmation" class="form-control">
</div>
<input type="email" id="courriel_confirmation" name="courriel_confirmation">
</div>
 
</div>
 
<div id="zone-prenom-nom" class="row align-items-center">
<div id="zone-prenom-nom" class="row">
 
<div class="col-md-6 ">
<label for="prenom" class="">Prénom</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" id="prenom" name="prenom" class="form-control">
</div>
<div class="col-md-6">
<label for="prenom" class=""><i class="fa fa-user"></i> Prénom</label>
<input type="text" id="prenom" name="prenom">
</div>
 
<div class="col-md-6 ">
<label for="nom" class="">Nom</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" id="nom" name="nom" class="form-control">
</div>
<label for="nom" class=""><i class="fa fa-user"></i> Nom</label>
<input type="text" id="nom" name="nom">
</div>
 
</div>
353,58 → 341,48
 
<h2>Observation</h2>
 
<div id="zone-observation" class="row align-items-center">
<div id="zone-observation" class="row">
 
<div class="col-md-6 ">
<label for="courriel" class="" title="Veuillez saisir votre adresse courriel.">
<strong class="obligatoire">*</strong>Geolocalisation
<i class="fa fa-envelope"></i> Geolocalisation *
</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input type="email" id="courriel" name="courriel" class="form-control" title="Veuillez saisir votre adresse courriel. ">
<input type="hidden" id="id_utilisateur" name="id_utilisateur">
</div>
<label for="milieu" class="">Milieu</label>
<div class=" input-group">
<span class="input-group-addon"><i class="fa fa-street-view"></i></span>
<input type="text" id="milieu" name="milieu" class="form-control" placeholder="bois, champ, falaise, ...">
</div>
<input type="email" id="courriel" name="courriel" title="Veuillez saisir votre adresse courriel. ">
<input type="hidden" id="id_utilisateur" name="id_utilisateur">
 
<label for="milieu" class=""><i class="fa fa-street-view"></i> Milieu</label>
<input type="text" id="milieu" name="milieu" placeholder="bois, champ, falaise, ...">
</div>
 
<div class="col-md-6">
<label for="date" class="" title="">
<strong class="obligatoire">*</strong>Date de relevé
<i class="fa fa-calendar"></i> Date de relevé *
</label>
<div class=" input-group date" id="datetimepicker">
<span id="date-icone" class="input-group-addon"><i class="fa fa-calendar"></i></span>
<div class="date" id="datetimepicker">
<input type="date" id="date" name="date" class="form-control hasDatepicker">
</div>
 
<label for="referentiel" class="" title="">
<strong class="obligatoire">*</strong>Référentiel
<i class="fa fa-book"></i> Référentiel *
</label>
<div class=" input-group">
<span class="input-group-addon"><i class="fa fa-book"></i></span>
<div class="select-wrapper add-field-select">
<select id="referentiel" name="referentiel" class="form-control">
<option value="" selected="" title="">-</option>
</select>
</div>
<div class="select-wrapper add-field-select">
<select id="referentiel" name="referentiel">
<option value="" selected="" title="">-</option>
</select>
</div>
<label for="taxon" class="" title="">Espèce</label>
<div class=" input-group date">
<span class="input-group-addon"><i class="fa fa-leaf"></i></span>
<input type="text" name="taxon" class="form-control" id="taxon" >
 
<label for="taxon" class="" title=""><i class="fa fa-leaf"></i> Espèce</label>
<div class="date">
<input type="text" name="taxon" id="taxon" >
</div>
 
<label for="certitude" class="" title="">
<strong class="obligatoire">*</strong>Certitude
<i class="fa fa-question"></i> Certitude *
</label>
<div class="input-group date" id="datetimepicker">
<span class="input-group-addon"><i class="fa fa-question"></i></span>
<div class="select-wrapper add-field-select">
<select id="certitude" name="certitude" class="form-control">
<option value="">-</option>
</select>
</div>
<div class="date select-wrapper add-field-select id="datetimepicker">
<select id="certitude" name="certitude">
<option value="">-</option>
</select>
</div>
</div>
 
412,6 → 390,7
 
</form>
 
<!-- formulaire d'affichage des bouveaux champs -->
<form id="form-supp" role="form" autocomplete="on">
<div id="zone-supp" class="row align-items-center">
<div class="col-md-6 preview-container"></div>