/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(); |
}); |
}); |