Subversion Repositories eFlore/Applications.cel

Compare Revisions

Regard whitespace Rev 3166 → Rev 3167

/trunk/widget/modules/manager/squelettes/creation.tpl.html
37,7 → 37,6
<script type="text/javascript" src="http://localhost/commun/jquery/form/2.95/jquery.form.min.js"></script>
<script type="text/javascript" src="http://localhost/commun/bootstrap/3.1.0/js/bootstrap.min.js"></script>
 
<script type="text/javascript" src="<?php echo $url_base; ?>modules/manager/squelettes/js/manager.js"></script>
 
<!-- Barre de navigation -->
<?php if ($bar !== false): ?>
61,16 → 60,19
<body>
<div id="zone-appli" class="container">
<?php if ($bar !== false): ?>
<div id="tb-navigation" data-courant="widget-cel-export" data-squelette="bootstrap3" data-mode="prod">
</div>
<div id="tb-navigation" data-courant="widget-cel-export" data-squelette="bootstrap3" data-mode="prod"></div>
<br/>
<?php endif; ?>
<h1 id="widget-titre" class="widget-titre"><?php echo ucfirst($mode); ?> de widget de saisie du CEL</h1>
<div id="register-page">
<div class="row">
 
<div class="widget-blocks col-md-4">
<form action="http://localhost/cel/widget/manager?mode=<?php echo $mode; ?>" name="" id="group-settings-form" class="standard-form component component-text" method="post" enctype="multipart/form-data">
 
<div id="group-settings-form">
<form action="http://localhost/cel/widget/manager?mode=<?php echo $mode; ?>" id="new-widget-form" class="standard-form component component-text" method="post" enctype="multipart/form-data">
<div class="register-section" id="basic-details-section">
 
<h2>Meta-données</h2>
 
<?php //var_dump($widget); ?>
91,11 → 93,11
</div>
 
<label for="est_type">Ce widget est un widget type</label>
<input type="radio" name="est_type" id="est_type" <?php echo (isset($widget['est_type']) && $projet['est_type']=== '1') ? 'checked="checked"' : ''; ?>/>
<input type="checkbox" name="est_type" id="est_type" <?php echo (isset($widget['est_type']) && $projet['est_type']=== '1') ? 'checked="checked"' : ''; ?>>
 
<label for="langue">Langue</label>
<?php if ($mode === 'modification') : ?>
<input id="langue" name="langue" readonly value="<?php echo $widget['langue']; ?>" />
<input id="langue" name="langue" readonly value="<?php echo $widget['langue']; ?>">
<?php else : ?>
<input id="langue" name="langue" list="langues" >
<datalist id="langues" >
104,31 → 106,31
<?php endforeach; ?>
</datalist>
<?php endif; ?>
</div><!-- #basic-details-section -->
</div><!-- end #basic-details-section -->
 
 
<div class="register-section" id="profile-details-description-section">
<h2>Description</h2>
<label for="titre">Titre</label>
<input type="text" name="titre" id="titre" value="<?php echo isset($widget['titre']) ? $widget['titre'] : ''; ?>" />
<input type="text" name="titre" id="titre" value="<?php echo isset($widget['titre']) ? $widget['titre'] : ''; ?>">
 
<label for="description">Description</label>
<textarea name="description" id="description"><?php echo isset($widget['description']) ? $widget['description'] : ''; ?></textarea>
 
<div class="input-file-container">
<input type="file" class="input-file" name="logo" id="logo" accept="image" />
<input type="file" class="input-file" name="logo" id="logo" accept="image">
<label for="logo" class="label-file"><i class="fas fa-download"></i> Logo</label>
</div>
<div class="file-return logo"></div>
 
<?php echo isset($widget['logo']) ? '<img src="'.$widget['logo'].'" /><br />Pour changer, télécharger un nouveau fichier.': ''; ?>
<?php echo isset($widget['logo']) ? '<img src="'.$widget['logo'].'"><br />Pour changer, télécharger un nouveau fichier.': ''; ?>
 
<div class="input-file-container">
<input type="file" class="input-file" name="fond" id="fond" value="<?php echo $widget['titre']; ?>" />
<input type="file" class="input-file" name="fond" id="fond" value="<?php echo $widget['titre']; ?>">
<label for="fond" class="label-file"><i class="fas fa-download"></i> Image de fond</label>
</div>
<div class="file-return fond"></div>
</div><!-- #profile-details-description-section -->
</div><!-- end #profile-details-description-section -->
 
<div class="register-section" id="profile-details-fields-section">
<h2>Champs</h2>
144,7 → 146,7
<input type="text" name="localisation" id="localisation" value="<?php echo isset($widget['localisation']) ? $widget['localisation'] : ''; ?>" />
 
<label for="milieux">Milieux</label>
<input type="text" name="milieux" id="milieux" value="<?php echo isset($widget['milieux']) ? $widget['milieux'] : ''; ?>" />
<input type="text" name="milieux" id="milieux" value="<?php echo isset($widget['milieux']) ? $widget['milieux'] : ''; ?>">
 
<label for="type_especes">Type liste espèce *</label>
<div class="select-wrapper">
157,26 → 159,32
</div>
 
<label for="referentiel">Référentiel *</label>
<input type="text" name="referentiel" id="referentiel" required pattern="([a-z]+?)*"
title="Nom du référentiel ex. bdtfx"
value="<?php echo isset($widget['referentiel']) ? $widget['referentiel'] : ''; ?>"/>
<input type="text" name="referentiel" id="referentiel" required pattern="([a-z]+?)*" title="Nom du référentiel ex. bdtfx" value="<?php echo isset($widget['referentiel']) ? $widget['referentiel'] : ''; ?>">
<div class="input-file-container">
<input type="file" class="input-file" name="especes" id="especes" />
<label for="especes"class="label-file"><i class="fas fa-download"></i> Espèces</label>
fichier type
<input type="file" class="input-file" name="especes" id="especes">
<label for="especes"class="label-file"><i class="fas fa-download"></i> Espèces</label> fichier type
</div>
<p class="file-return especes"></p>
<div class="file-return especes"></div>
</div><!-- end #profile-details-fields-section -->
 
<!--Submit-->
<div class="submit complete-registration" id="submit-button">
<button href="#" type="submit" name="signup_submit" id="signup_submit" class="button" target="" title=""><span class="button-text">Terminer </span></button>
</div>
<!--Submit-->
 
<label for="add_fields">Ajouter un champ</label>
<input type="button" class="button" name="add_fields" id="add_fields" title="Ajouter un champ" value="+"/>
</div><!-- #profile-details-fields-section -->
</form><!-- end #new-widget-form -->
 
<div class="submit complete-registration">
<button href="#" type="submit" name="signup_submit" id="signup_submit" class="button" target="" title=""><span class="button-text">Terminer </span></button>
<form id="new-fields">
<h2>Ajouter des champs</h2>
<p class="message"><i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> Attention : Ces nouveaux champs (tout comme le widget) ne seront pris en compte qu'une fois le formulaire validé</p>
</form><!-- #new-fields = fomulaire oû viennent s'insérer les champs supplémentaires -->
<label class="add-fields">Ajouter Champ</label>
<div class="button" id="add-fields" title="Ajouter un champ"><i class="fa fa-plus" aria-hidden="true"></i></div>
</div>
</form>
</div>
 
</div><!-- end .widget-blocks = tout le bloc de gauche-->
 
<div class="widget-blocks col-md-8 project">
<p class="message">
<?php if ($mode === 'modification') : ?>
187,10 → 195,183
obligatoires et la localisation (point ou rue) sera automatiquement déterminée.
<?php endif; ?>
</p>
<iframe src="http://localhost/widget:cel:saisie2?projet=<?php echo isset($widget['projet'])?$widget['projet']:'base'; ?>" class="widget-renderer" height="100%" width="100%" >
</iframe>
<!-- <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">
 
<div class="row">
 
<div class="col-md-4">
<img id="preview-logo" src="" alt="">
<div id="preview-title" class="col-md-8">
<h1></h1>
</div>
</div>
 
</div>
 
<div class="row">
 
<div id="preview-description" class="col-md-6">
<div class="preview-description message"></div>
</div><!-- end #preview-description -->
 
<div id="preview-aide" class="message col-md-6">
<h3>Aide</h3>
<p>
Cet outil vous permet de partager simplement vos observations avec
le <a target="_blank" href="https://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a>
(<a target="_blank" href="https://www.tela-botanica.org/page:licence">licence CC-BY-SA</a>).
Identifiez-vous bien pour ensuite retrouver et gérer vos données dans votre
<a target="_blank" href="https://www.tela-botanica.org/appli:cel"> Carnet en ligne</a>.
Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
Elles apparaissent immédiatement sur les
<a target="_blank" href="https://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
</p>
<p class="discretion">
Pour toute question ou remarque,
<a href="https://www.tela-botanica.org/widget:reseau:remarques?service=cel&pageSource=http%3A%2F%2Flocalhost%2Fcel%2Fwidget%2Findex.php%2F%3Fprojet%3Dbase" target="_blank" onclick=
"
javascript:window.open(
this.getAttribute('href'),
'Tela Botanica - Remarques',
config='height=700, width=640, scrollbars=yes, resizable=yes'
);
return false;
">contactez-nous</a>
</p>
</div>
</div><!-- end #preview-aide -->
 
<div id="preview-formulaire" class="row">
 
<form id="preview-form-observateur" role="form" autocomplete="on">
 
<h2>Observateur</h2>
 
<div id="zone-courriel" class="row align-items-center">
 
<div class="col-md-6">
<label for="courriel" class="" title="Veuillez saisir votre adresse courriel.">
<strong class="obligatoire">*</strong>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>
</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)
</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>
</div>
 
</div>
 
<div id="zone-prenom-nom" class="row align-items-center">
 
<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>
 
<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>
</div>
 
</div>
 
</form>
 
<form id="form-observation" role="form" autocomplete="on">
 
<h2>Observation</h2>
 
<div id="zone-observation" class="row align-items-center">
 
<div class="col-md-6 ">
<label for="courriel" class="" title="Veuillez saisir votre adresse courriel.">
<strong class="obligatoire">*</strong>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>
</div>
 
<div class="col-md-6">
<label for="date" class="" title="">
<strong class="obligatoire">*</strong>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>
<input type="date" id="date" name="date" class="form-control hasDatepicker">
</div>
<label for="referentiel" class="" title="">
<strong class="obligatoire">*</strong>Référentiel
</label>
<div class=" input-group">
<span class="input-group-addon"><i class="fa fa-book"></i></span>
<select id="referentiel" name="referentiel" class="form-control">
<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" >
</div>
<label for="certitude" class="" title="">
<strong class="obligatoire">*</strong>Certitude
</label>
<div class="input-group date" id="datetimepicker">
<span class="input-group-addon"><i class="fa fa-question"></i></span>
<select id="certitude" name="certitude" class="form-control">
<option value="">-</option>
</select>
</div>
</div>
 
</div>
 
</form>
 
<form id="form-supp" role="form" autocomplete="on">
<div id="zone-supp" class="row align-items-center">
<div class="col-md-6"></div>
</div>
</form>
 
<div id="image" class="row align-items-center"></div>
 
</div><!-- end #preview-formulaire -->
 
</div><!-- end #widget-renderer-->
 
</div><!-- #widget-blocks = tout le bloc de droite-->
 
</div>
</div>
</div>
<script type="text/javascript" src="<?php echo $url_base; ?>modules/manager/squelettes/js/manager.js"></script>
<script type="text/javascript" src="<?php echo $url_base; ?>modules/manager/squelettes/js/manger-submit-values.js"></script>
</body>
</html>
/trunk/widget/modules/manager/squelettes/css/manager.css
1,6 → 1,13
@CHARSET "UTF-8";
 
.clear {
clear: both;
height: 0;
 
/* Précaution pour IE 7 */
overflow: hidden;
}
 
h1#widget-titre::before {
content: "";
display: block;
8,7 → 15,6
position: absolute;
left: -5rem;
width: 0.4rem;
 
}
 
h1#widget-titre {
21,11 → 27,6
font-family: Ubuntu,sans-serif;
}
 
#group-settings-form {
font-family: Muli,sans-serif;
float: none;
}
 
h2 {
font-family: Muli,sans-serif;
font-size: 21.5px;
33,6 → 34,40
line-height: 1.15;
}
 
div.widget-blocks {
box-sizing: border-box;
padding: 1rem;
}
 
.message {
background-color: #f8f5ef;
color: #232323;
padding: 1rem;
}
 
/* Aperçu du widget */
.widget-renderer {
border:none;
padding: 3rem;
height: 300rem;
min-height: 100%;
width: 90%;
pointer-events: none;
overflow: hidden
}
 
.register-section{
margin-bottom: 1rem;
}
 
/* Formulaires du nouveau widget*/
#group-settings-form {
font-family: Muli,sans-serif;
float: none;
margin-bottom: 2rem;
position: absolute;
}
 
#group-settings-form label {
color: #606060;
display: block;
42,11 → 77,57
font-weight: 700;
}
 
#group-settings-form #langue{
width: 100%;
border: 0.1rem solid #ddd;
border-radius: 0.3rem;
padding: 1rem;
overflow: hidden;
}
 
/* Styles des champs required*/
#group-settings-form .register-section input[required],
#group-settings-form .register-section select[required] {
#group-settings-form .register-section select[required],
#group-settings-form #new-fields input[required],
#group-settings-form #new-fields select[required] {
border: 0.2rem solid rgba(0, 159, 184, 0.5);
}
 
/* Positionnement visuel du bouton submit pour qu'il reste
sous les nouveaux champs alors que dans le dom
il est positionné avant les nouveaux champs */
#group-settings-form #submit-button {
position: absolute;
bottom: -50px;
}
 
/**** Styles des boutons ajouter et supprimer ****/
#group-settings-form #add-fields.button,
#group-settings-form .add-value-button.button {
background-color: #009fb8;
}
 
#group-settings-form #add-fields.button:hover,
#group-settings-form #add-fields.button:focus,
#group-settings-form .add-value-button.button:hover,
#group-settings-form .add-value-button.button:focus {
background-color: rgba(0, 159, 184, 0.7);
}
 
#group-settings-form .remove-field.button,
#group-settings-form .remove-value.button {
background-color: #ff5d55;
}
 
#group-settings-form .remove-field.button:hover,
#group-settings-form .remove-field.button:focus,
#group-settings-form .remove-value.button:hover,
#group-settings-form .remove-value.button:focus {
background-color: rgba(255, 93, 85, 0.7);
}
/*************************************************/
 
/**** Style des select ****/
#group-settings-form select {
background-color: #fff;
border: 0.1rem solid #ddd;
54,96 → 135,86
 
#group-settings-form select,
#group-settings-form select[required] {
 
width: 100%;
color:#333;
border-radius: 0.3rem;
padding:0.5rem;
text-transform:none;
 
/* On retire la 'flèche' par defaut */
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
width: 100%;
color:#333;
text-transform:none;
}
 
#group-settings-form .select-wrapper {
#group-settings-form .select-wrapper,
#group-settings-form #new-fields .select-wrapper {
position: relative;
}
 
#group-settings-form .select-wrapper::after {
/* Ajout et style d'une "flèche bas" */
content: '⌄';
font-size: 3rem;
font-weight: 900;
pointer-events: none;
position: absolute;
top: 0;
right: 0.5rem;
font-size: 3rem;
font-weight: 900;
color: #606060;
pointer-events: none;
}
 
#group-settings-form #langue{
width: 100%;
border: 0.1rem solid #ddd;
border-radius: 0.3rem;
padding: 1rem;
overflow: hidden;
#group-settings-form #new-fields .select-wrapper::after {
/* correction de la position de la flèche
dans le formulaire des champs ajoutés*/
top: -10px;
}
/**************************/
 
/**** Affichage des nouveaux champs ****/
 
div.widget-blocks {
box-sizing: border-box;
padding: 1rem;
/* Mieux distinguer les différentes strates */
#group-settings-form .new-field,
#group-settings-form .new-value {
margin: 1rem 0;
padding: 2rem;
border-radius: 0.3rem;
background-color: #F8F5EF;
}
 
.message {
background-color: #f8f5ef;
color: #232323;
padding: 1rem;
margin: 1rem;
/* Mieux distinguer les différentes strates */
#group-settings-form .field-details {
margin: 1rem 0;
padding: 2rem;
border-radius: 0.3rem;
background-color: #fcfbf9;
}
/********************************************/
 
iframe.widget-renderer {
 
border:none;
margin: 1rem;
height: 300rem;
min-height: 100%;
width: 90%;
pointer-events: none;
overflow: hidden
}
 
#group-settings-form input#add_fields.button {
background-color: #009fb8;
}
 
.clear {
clear: both;
height: 0;
overflow: hidden; /* Précaution pour IE 7 */
}
 
.register-section{
margin-bottom: 1rem;
}
 
 
/* styles de base si JS est activé */
.js #group-settings-form .input-file-container {
/**** Style des input type "file" ****/
/* styles de base */
#group-settings-form .input-file-container,
#group-settings-form #new-fields .input-file-container {
position: relative;
width: 100%;
}
.js #group-settings-form .label-file {
 
#group-settings-form .label-file,
#group-settings-form #new-fields .label-file {
display: block;
padding: 1rem;
background: #009FB8;
color: #fff !important;
font-size: 1.5rem;
transition: all .4s;
cursor: pointer;
border-radius: 0.2rem;
}
.js #group-settings-form .input-file {
 
#group-settings-form .input-file,
#group-settings-form #new-fields .input-file {
position: absolute;
top: 0; left: 0;
width: 80%;
154,35 → 225,35
}
 
/* quelques styles d'interactions */
.js #group-settings-form .input-file:hover + .label-file,
.js #group-settings-form .input-file:focus + .label-file,
.js #group-settings-form .label-file:hover,
.js #group-settings-form .label-file:focus {
background: #3071A9;
#group-settings-form .input-file:hover + .label-file,
#group-settings-form .input-file:focus + .label-file,
#group-settings-form .label-file:hover,
#group-settings-form .label-file:focus,
#group-settings-form #new-fields .input-file:hover + .label-file,
#group-settings-form #new-fields .input-file:focus + .label-file,
#group-settings-form #new-fields .label-file:hover,
#group-settings-form #new-fields .label-file:focus {
background: rgba(0, 159, 184, 0.7);
color: #fff;
}
 
/* styles du retour visuel */
#group-settings-form .file-return:not(:empty)::before{
#group-settings-form .file-return:not(:empty)::before,
#group-settings-form #new-fields .file-return:not(:empty)::before {
content:'Nom du fichier: ';
font-size: 1rem;
}
 
#group-settings-form .file-return:not(:empty) img{
#group-settings-form .file-return:not(:empty) img,
#group-settings-form #new-fields .file-return:not(:empty) img {
margin: 1rem auto;
display: block;
}
 
.js #group-settings-form .file-return {
#group-settings-form .file-return,
#group-settings-form #new-fields .file-return {
font-style: italic;
font-size: 1.5rem;
font-weight: bold;
}
/* on complète l'information d'un contenu textuel
uniquement lorsque le paragraphe n'est pas vide */
/*.js #group-settings-form .file-return:not(:empty):before {
content: "Fichier sélectionné: ";
font-style: normal;
font-weight: normal;
}
*/
/*************************************/
/trunk/widget/modules/manager/squelettes/js/manager.js
1,42 → 1,331
function nouveauChamps(html){
var html =
'<div>'+
'<label for="nom_champs">Nom du champ</label>'+
'<input type="text" value="Nom du Champs" id="nom_champs">'+
"use strict";
 
'<label for="type_champ">Type de champ</label>'+
'<select name="type_champ" id="type_champ">'+
'<option value="text">Champ texte</option>'+
/***************************
* Lancement des scripts *
***************************/
 
jQuery( document ).ready( function() {
 
// Initialisation d'un identifiant de champ
var fieldId = 1;
 
// Ajout de nouveaux champs
onClickAddNewFields( fieldId );
 
// Affichage des images ou nom des documents importés
inputFile();
 
});
 
/***********************************************************
* Fonctions pour la création des champs supplémentaires *
***********************************************************/
 
// Logique globale pour l'ajout de nouveaux champs
function onClickAddNewFields( fieldId ) {
 
$( '#add-fields' ).click( function() {
 
// Ajout d'un nouveau champ
displayNewField( fieldId );
 
// Suppression d'un champ
onClickRemoveField();
 
$('#submit-button').before(
'<p>hello</p>'+
'<input type="hidden" class="name-field-submit" name="name" data-id="' + fieldId+ '" value="">'
);
 
// Les images ou les nom des documents importés doivent aussi
// s'afficher dans les champs ajoutés
inputFile();
 
fieldId++;
});
}
 
// Création et logique pour un nouveau champ
function newField( fieldId ) {
 
// Le html des nouveaux champs à insérer dans le dom
var fieldsHtml =
'<div data-id="' + fieldId + '" class="new-field">'+
'<h3>Nouveau champ :<br><strong class="field-title"></strong></h3>'+
 
// Nom du champ
'<label for="nom-champs" title="Donnez titre à votre champ">Nom du champ</label>'+
'<input type="text" class="nom-champs" placeholder="Donnez titre à votre champ" required>'+
 
// Type de champ
'<label for="type-champ" title="Quel type de champ">Type de champ</label>'+
'<div class="select-wrapper add-field-select">'+
'<select name="type-champ" class="type-champ" required>'+
'<option value="text" selected="selected">Champ texte</option>'+
'<option value="email">Champ email</option>'+
'<option value="textarea">Champ rédaction</option>'+
'<option value="select">Menu déroulant</option>'+
'<option value="checkbox">Cases à cocher</option>'+
'<option value="list-checkbox">liste Cases à cocher</option>'+
'<option value="radio">Boutons radio</option>'+
'<option value="date">Calendrier</option>'+
'<option value="file">Téléchargement</option>'+
'<option value="hidden">Caché</option>'+
'<option value="button">Bouton</option>'+
'<option value="range">Curseur (curseur entre 2 bornes)</option>'+
'<option value="number">Nombre</option>'+
'</select>'+
'<div>';
'</div>'+
 
// Clé du champ
'<label for="cle" title="Clé du champ (son nom dans la base de données)">'+
'Clé du champ en camelCase (ecritureChameau)<br>'+
'<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> '+
'Pas d\'accents ou de cédille, pas de caractères spéciaux.'+
'</label>'+
'<input type="text" name="cle" class="cle" placeholder="Clé du champ" required title="Clé du champ (son nom dans la base de données)">'+
 
$('#profile-details-fields-section').append(html);
// Tooltip
'<label for="field-tooltip" title="Ajoutez une info-bulle">Info-bulle</label>'+
'<input type="text" name="field-tooltip" class="field-tooltip" placeholder="Quelques mots">'+
 
// Import d'une image ou d'un pdf d'aide à afficher en popup
'<div class="input-file-container">'+
'<input type="file" class="input-file" name="help" id="help" accept="application/pdf, image/*, video/*">'+
'<label for="help" class="label-file"><i class="fas fa-download"></i>Image ou pdf d\'aide (popup)</label>'+
'</div>'+
'<div class="file-return help"></div>'+
 
'<div class="row">'+
 
// Checkbox "champ requis"
'<div class="col-md-5">'+
'<label for="required-field" title="Ce champ est obligatoire">Champ requis ?</label>'+
'<input type="checkbox" name="required-field" id="required-field">'+
'</div>'+
 
// Bouton supprimer le champ
'<div class="col-md-5">'+
'<label for="remove-field">Supprimer ce champ</label>'+
'<div class="remove-field button" name="remove-field" data-id="' + fieldId + '" title="Supprimer un champ"><i class="fa fa-times" aria-hidden="true"></i></div>'
'</div>'+
 
'</div>'+
 
'</div>';
 
$( '#new-fields' ).append( fieldsHtml );
 
// Le nom du champ est affiché dès qu'il est renseigné
onChangeDisplayFieldName( fieldId );
 
// En fonction du type de champ choisi on demande les informations correspondantes
onChangeFieldTypeCollectDetails( fieldId );
}
 
function enregistrerNouveauChamps() {
var $typeChamp = $('#type_champ'),
$valeurNouveauChamp = [];
$type_champ.change(function() {
$valeurNouveauChamp = $(this).val();
console.log($valeurNouveauChamp);
// Un peu d'animation de l'affichage d'un nouveau champ
function displayNewField( fieldId ) {
 
newField( fieldId );
$( '.new-field[data-id="' + fieldId + '"]').hide().removeClass( 'hidden' ).show( 200 );
}
 
// Logique pour le bouton supprimer tout un champ
function onClickRemoveField() {
 
$( '.remove-field.button' ).click( function() {
$( '.new-field[data-id="' + $( this ).attr( 'data-id' ) + '"]').fadeOut( 200 , this.remove() );
});
}
 
// Affichage du nom du champ dès qu'il est renseigné
function onChangeDisplayFieldName( fieldId ) {
 
$('.new-field[data-id="' + fieldId + '"] .nom-champs').change( function() {
var fieldName = $( this ).val();
$( '.new-field[data-id="' + fieldId + '"] .field-title' ).text( fieldName );
$( '.name-field-submit[data-id="' + fieldId + '"]' ).val( fieldName );
});
}
 
/**** Recueil des informations et détails qui dépendent du type de champ choisi ****/
 
// Logique de recueil d'informations en fonction du type de champ choisi
function onChangeFieldTypeCollectDetails( fieldId ) {
 
var fieldDetails =
// Placeholder (champ type text par défaut)
'<label for="aide-saisie" title="Aidez les utilisateurs en deux ou 3 mots ou chiffres à comprendre ce que doit contenir le champ">Texte d\'aide à la saisie</label>'+
'<input type="text" name="aide-saisie" class="aide-saisie" placeholder="Ce que doit contenir le champ">';
// On insère les champs par défaut de recueil d'informations
displayFieldDetailsCollect( fieldId , fieldDetails );
 
$( '.new-field[data-id="' + fieldId + '"] .type-champ' ).change( function() {
 
// on intialise L'id pour les listes la variable qui contiendra un id pour chaque option
var valueId = 1;
 
// Si on hésite on qu'on se trompe dans la liste :
// les champs de détails de l'option précédente doivent être supprimés
$( '.new-field[data-id="' + fieldId + '"] .field-details' ).remove();
 
// $( this ).val() = le type de champ choisi dans select ".type-champ"
switch( $( this ).val() ) {
 
case 'number':
case 'range':
fieldDetails =
// Placeholder
'<label for="aide-saisie" title="Deux ou 3 mots ou chiffres à comprendre ce que doit contenir le champ (ex: min 20, 10 par 10, etc.)">Texte d\'aide à la saisie</label>'+
'<input type="text" name="aide-saisie" class="aide-saisie" placeholder="Ce que doit contenir le champ">'+
 
// Valeur par défaut
'<label for="default" title="Valeur par défaut">Valeur par défaut (1 par défaut)</label>'+
'<input type="number" name="default" class="default" value="1">'+
 
// Incrémentation ( attribut step="" )
'<label for="pas" title="De 10 en 10, de 0.5 en 0.5, etc.">Le "pas" d\'incrémentation,<br>(attention, pas devirgule mais un point),<br>par defaut la valeur augmentera de 1 en 1</label>'+
'<input type="number" name="pas" class="pas" value="1">';
 
// Min
'<label for="min" title="valeur min">Valeur minimale</label>'+
'<input type="number" name="min" class="min" value="1">'+
 
// Max
'<label for="max" title="valeur max">Valeur maximale</label>'+
'<input type="number" name="max" class="max" value="1">';
break;
 
case 'date':
fieldDetails =
// Date min
'<label for="min" title="valeur min">Valeur minimale</label>'+
'<input type="date" name="min" class="min" value="1">'+
 
// Date max
'<label for="max" title="valeur max">Valeur maximale</label>'+
'<input type="date" name="max" class="max" value="1">';
break;
 
case 'select':
case 'checkbox':
case 'list-checkbox':
case 'radio':
fieldDetails =
// Todo : afficher les noms donnés dans le select ".type-champ"
// plutot que le nom des éléments html
'<p class="message">Ajoutez les valeurs de ' + $( this ).val() + '</p>'+
 
// Bouton ajout d'une valeur à la liste
'<label for="add-value" class="add-value" title="Ajouter une valeur à la liste">Ajouter une valeur</label>'+
'<div class="button add-value-button" name="add-value" title="Ajouter une valeur à la liste"><i class="fa fa-plus" aria-hidden="true"></i></div>'+
 
// checkbox ajouter une valeur "Autre:"
'<label for="option-other-value" title="Ajouter une option \'Autre:\' à la fin">Valeur "Autre"</label>'+
'<input type="checkbox" class="option-other-value" name="option-other-value" title="Ajouter une option \'Autre\' à la fin">';
break;
 
case 'file':
fieldDetails = '';
case 'text':
case 'textarea':
case 'email':
default:
fieldDetails =
// Placeholder
'<label for="aide-saisie" title="Aidez les utilisateurs en deux ou 3 mots ou chiffres à comprendre ce que doit contenir le champ">Texte d\'aide à la saisie</label>'+
'<input type="text" name="aide-saisie" class="aide-saisie" placeholder="Ce que doit contenir le champ">';
break;
}
 
if( fieldDetails.length > 0 ) {
//ne pas ajouer une div vide s'il n'y pas d'informations à demander
displayFieldDetailsCollect( fieldId , fieldDetails );
}
 
// Ajout des valeurs possibles
// lorsque le champ est une liste ou case à cocher
onClickAddNewValueToList( fieldId , valueId );
 
});
}
 
// Insertion dans le dom des champs de recueil d'informations
function displayFieldDetailsCollect( fieldId , fieldDetails ) {
 
$( '.new-field[data-id="' + fieldId + '"] .add-field-select' ).after( '<div class="field-details">' + fieldDetails + '</div>' );
}
 
/**** Ajout des valeurs (options) des "champs de listes" (select, checkbox, radio, etc.) ****/
 
// Logique d'ajout des options des listes (deroulantes, cases à cocher etc.)
function onClickAddNewValueToList( fieldId , valueId ) {
 
$( '.new-field[data-id="' + fieldId + '"] .add-value-button' ).click( function() {
 
var valueHtml =
'<div class="new-value" data-list-value-id="' + valueId +'">'+
 
// Recueil d'une valeur de la liste
'<label for="list-value">Valeur:</label>'+
'<input type="text" name="list-value" class="list-value" placeholder="Une des valeurs de la liste">'+
 
'<div class="row">'+
 
'<div class="col-md-5">'+
 
// Checkbox "valeur pas défaut" de la liste
'<label for="is-defaut-value" title="Ceci est la valeur par défaut">Valeur par défaut</label>'+
'<input type="checkbox" name="is-defaut-value" class="is-defaut-value">'+
 
'</div>'+
 
'<div class="col-md-5">'+
 
// Bouton "supprimer la valeur" de la liste
'<label for="remove-value">Supprimer valeur</label>'+
'<div class="remove-value button" name="remove-value" data-list-value-id="' + valueId + '" title="Supprimer une valeur"><i class="fa fa-times" aria-hidden="true"></i></div>'
 
'</div>'+
 
'</div>'+
'</div>';
 
$( '.new-field[data-id="' + fieldId + '"] .add-value' ).before( valueHtml );
 
// Pouvoir supprimer une valeur
onClickRemoveListValue( fieldId );
 
// s'assurer qu'il n'y a qu'une valeur par défaut cochée dans les listes
onClickDefaultValueRemoveOthers( fieldId );
 
valueId++;
});
}
 
// Logique pour le bouton supprimer une valeur
function onClickRemoveListValue( fieldId ) {
 
$('.new-field[data-id="' + fieldId + '"] .remove-value.button').click( function() {
$( '.new-field[data-id="' + fieldId + '"] .new-value[data-list-value-id="' + $( this ).attr( 'data-list-value-id' ) + '"]' ).fadeOut( 200 , this.remove() );
});
}
 
// Dans une liste il ne peut y avoir qu'une valeur pas défaut cochée
function onClickDefaultValueRemoveOthers( fieldId ) {
 
$( '.new-field[data-id="' + fieldId + '"] .is-defaut-value' ).click( function() {
$( '.new-field[data-id="' + fieldId + '"] .is-defaut-value' ).not( $( this ) ).removeAttr('checked');
});
}
 
 
/****************************************
* Fonctions pour afficher les images *
* ou les nom de fichers importés *
****************************************/
 
// Logique d'affichage pour le input type=file
function inputFile() {
 
// ajout de la classe JS à HTML
$('html').addClass('js');
 
// initialisation des variables
var $fileInput = $( ".input-file" ),
$button = $( ".label-file" );
56,12 → 345,16
 
// affiche un retour visuel dès que input:file change
$fileInput.change( function(event) {
var file = event.target.files[0]
var $theReturn = $('.' + $(this).attr('id'));
var file = event.target.files[0],
$theReturn = $( '.' + $( this ).attr( 'id' ) );
 
// affichage du nom du fichier
$theReturn.text(file.name);
 
// si le fichier est une image on l'affiche
if(file.type.match('image')) {
// temporairement retrouver le chemin
// de l'image qui a été chagée, pour affichage
var tmppath = URL.createObjectURL(file);
$theReturn.append('<img src="' + tmppath + '" width="50%">');
}
68,24 → 361,3
});
}
 
jQuery(document).ready(function() {
 
inputFile()
 
// var $projet = $('#projet');
 
// $projet.on('change', function( event ) {
// console.log($projet.val());
// $.ajax({
// url : 'http://localhost/widget:cel:manager',
// type : 'post',
// datatype : 'mode=creation&projet='+ $projet.val()
// });
// });
 
 
$('#add_fields').on("click", function(){
nouveauChamps();
});
 
});