Subversion Repositories eFlore/Applications.cel

Compare Revisions

Ignore whitespace Rev 3166 → Rev 3167

/trunk/widget/modules/manager/squelettes/creation.tpl.html
1,196 → 1,377
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo $mode; ?> de widget de saisie du CeL</title>
<title><?php echo $mode; ?> de widget de saisie du CeL</title>
 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="Content-script-type" content="text/javascript" />
<meta http-equiv="Content-language" content="fr" />
<meta name="revisit-after" content="15 days" />
<meta name="robots" content="index,follow" />
<meta name="author" content="Tela Botanica" />
<meta name="keywords" content="Tela Botanica, CEL" />
<meta name="description" content="Gestion des widgets de saisie du carnet en ligne" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="Content-script-type" content="text/javascript" />
<meta http-equiv="Content-language" content="fr" />
<meta name="revisit-after" content="15 days" />
<meta name="robots" content="index,follow" />
<meta name="author" content="Tela Botanica" />
<meta name="keywords" content="Tela Botanica, CEL" />
<meta name="description" content="Gestion des widgets de saisie du carnet en ligne" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 
<!-- OpenGraph pour Facebook, Pinterest, Google+ -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Gestion des widgets de saisie du CeL" />
<meta property="og:site_name" content="Tela Botanica" />
<meta property="og:description" content="Gestion des widgets de saisie du Carnet en Ligne" />
<meta property="og:image" content="https://resources.tela-botanica.org/tb/img/256x256/carre_englobant.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="256" />
<meta property="og:image:height" content="256" />
<meta property="og:locale" content="fr_FR" />
<!-- OpenGraph pour Facebook, Pinterest, Google+ -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Gestion des widgets de saisie du CeL" />
<meta property="og:site_name" content="Tela Botanica" />
<meta property="og:description" content="Gestion des widgets de saisie du Carnet en Ligne" />
<meta property="og:image" content="https://resources.tela-botanica.org/tb/img/256x256/carre_englobant.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="256" />
<meta property="og:image:height" content="256" />
<meta property="og:locale" content="fr_FR" />
 
<!-- Favicones -->
<link rel="shortcut icon" type="image/x-icon" href="https://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
<!-- Favicones -->
<link rel="shortcut icon" type="image/x-icon" href="https://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
 
<!-- Jquery -->
<script type="text/javascript" src="http://localhost/commun/jquery/1.7.1/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/commun/jquery/jquery-ui/1.8.17/js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="http://localhost/commun/jquery/jquery-ui/1.8.17/js/jquery.ui.datepicker-fr.js"></script>
<script type="text/javascript" src="http://localhost/commun/jquery/validate/1.9.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://localhost/commun/jquery/validate/1.9.0/messages_fr.js"></script>
<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>
<!-- Jquery -->
<script type="text/javascript" src="http://localhost/commun/jquery/1.7.1/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://localhost/commun/jquery/jquery-ui/1.8.17/js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="http://localhost/commun/jquery/jquery-ui/1.8.17/js/jquery.ui.datepicker-fr.js"></script>
<script type="text/javascript" src="http://localhost/commun/jquery/validate/1.9.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://localhost/commun/jquery/validate/1.9.0/messages_fr.js"></script>
<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): ?>
<script src="<?php echo $url_script_navigation; ?>"></script>
<?php endif; ?>
<!-- Barre de navigation -->
<?php if ($bar !== false): ?>
<script src="<?php echo $url_script_navigation; ?>"></script>
<?php endif; ?>
 
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="http://localhost/commun/jquery/jquery-ui/1.8.18/css/smoothness/jquery-ui-1.8.18.custom.css" media="screen" />
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="http://localhost/commun/jquery/jquery-ui/1.8.18/css/smoothness/jquery-ui-1.8.18.custom.css" media="screen" />
 
<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" href="http://localhost/commun/bootstrap/3.1.0/css/bootstrap.min.css" />
<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">
<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" href="http://localhost/commun/bootstrap/3.1.0/css/bootstrap.min.css" />
<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 -->
<?php if($prod): ?>
<?php include "analytics.html"; ?>
<?php endif; ?>
<!-- Google Analytics -->
<?php if($prod): ?>
<?php include "analytics.html"; ?>
<?php endif; ?>
</head>
 
<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>
<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 class="register-section" id="basic-details-section">
<h2>Meta-données</h2>
<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>
<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">
 
<?php //var_dump($widget); ?>
<label for="projet">Projet *</label>
<input type="text" name="projet" id="projet" pattern="[a-z]*" <?php echo ($mode === 'modification') ? 'value="'.$widget['projet'].'" readonly' : 'required'; ?> title="Champ obligatoire : pas d'espace" />
<div class="widget-blocks col-md-4">
 
<label for="motscles">Autres mots-clés</label>
<input type="text" name="motscles" id="motscles" value="" />
<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">
 
<label for="type">Type de widget</label>
<div class="select-wrapper">
<select id="type" name="type" >
<?php foreach ($type as $id => $projet) : ?>
<option <?php echo (isset($widget['projet']) && $projet['projet']== $widget['projet']) ? 'selected="selected"' : ''; ?> value="<?php echo $projet['projet']; ?>"><?php echo $projet['projet']; ?></option>
<?php endforeach; ?>
<option value=""> ----</option>
</select>
</div>
<h2>Meta-données</h2>
 
<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"' : ''; ?>/>
<?php //var_dump($widget); ?>
<label for="projet">Projet *</label>
<input type="text" name="projet" id="projet" pattern="[a-z]*" <?php echo ($mode === 'modification') ? 'value="'.$widget['projet'].'" readonly' : 'required'; ?> title="Champ obligatoire : pas d'espace" />
 
<label for="langue">Langue</label>
<?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>
<?php endif; ?>
</div><!-- #basic-details-section -->
<label for="motscles">Autres mots-clés</label>
<input type="text" name="motscles" id="motscles" value="" />
 
<label for="type">Type de widget</label>
<div class="select-wrapper">
<select id="type" name="type" >
<?php foreach ($type as $id => $projet) : ?>
<option <?php echo (isset($widget['projet']) && $projet['projet']== $widget['projet']) ? 'selected="selected"' : ''; ?> value="<?php echo $projet['projet']; ?>"><?php echo $projet['projet']; ?></option>
<?php endforeach; ?>
<option value=""> ----</option>
</select>
</div>
 
<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'] : ''; ?>" />
<label for="est_type">Ce widget est un widget type</label>
<input type="checkbox" name="est_type" id="est_type" <?php echo (isset($widget['est_type']) && $projet['est_type']=== '1') ? 'checked="checked"' : ''; ?>>
 
<label for="description">Description</label>
<textarea name="description" id="description"><?php echo isset($widget['description']) ? $widget['description'] : ''; ?></textarea>
<label for="langue">Langue</label>
<?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>
<?php endif; ?>
</div><!-- end #basic-details-section -->
 
<div class="input-file-container">
<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.': ''; ?>
<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'] : ''; ?>">
 
<div class="input-file-container">
<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 -->
<label for="description">Description</label>
<textarea name="description" id="description"><?php echo isset($widget['description']) ? $widget['description'] : ''; ?></textarea>
 
<div class="register-section" id="profile-details-fields-section">
<h2>Champs</h2>
<label for="type_localisation">Type de localisation</label>
<div class="select-wrapper">
<select id="type_localisation" name="type_localisation" >
<option value="<?php echo (isset($widget['type_localisation'])) ? $widget['type_localisation'] : 'point'; ?>"><?php echo (isset($widget['type_localisation'])) ? $widget['type_localisation'] : 'point'; ?></option>
<option value="<?php echo (isset($widget['type_localisation']) && $widget['type_localisation'] == 'rue') ? 'point' : 'rue'; ?>"><?php echo (isset($widget['type_localisation']) && $widget['type_localisation'] == 'rue') ? 'point' : 'rue'; ?></option>
</select>
</div>
<div class="input-file-container">
<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>
 
<label for="localisation">Zoom</label>
<input type="text" name="localisation" id="localisation" value="<?php echo isset($widget['localisation']) ? $widget['localisation'] : ''; ?>" />
<?php echo isset($widget['logo']) ? '<img src="'.$widget['logo'].'"><br />Pour changer, télécharger un nouveau fichier.': ''; ?>
 
<label for="milieux">Milieux</label>
<input type="text" name="milieux" id="milieux" value="<?php echo isset($widget['milieux']) ? $widget['milieux'] : ''; ?>" />
<div class="input-file-container">
<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><!-- end #profile-details-description-section -->
 
<label for="type_especes">Type liste espèce *</label>
<div class="select-wrapper">
<select id="type_especes" name="type_especes" required>
<option selected="selected" value="referentiel">Référentiel</option>
<option value="liste">Liste</option>
<option value="liste" title="remplir référentiel + envoyer csv">Liste + autres</option>
<option value="fixe">Espèce fixée</option>
</select>
</div>
<div class="register-section" id="profile-details-fields-section">
<h2>Champs</h2>
<label for="type_localisation">Type de localisation</label>
<div class="select-wrapper">
<select id="type_localisation" name="type_localisation" >
<option value="<?php echo (isset($widget['type_localisation'])) ? $widget['type_localisation'] : 'point'; ?>"><?php echo (isset($widget['type_localisation'])) ? $widget['type_localisation'] : 'point'; ?></option>
<option value="<?php echo (isset($widget['type_localisation']) && $widget['type_localisation'] == 'rue') ? 'point' : 'rue'; ?>"><?php echo (isset($widget['type_localisation']) && $widget['type_localisation'] == 'rue') ? 'point' : 'rue'; ?></option>
</select>
</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'] : ''; ?>"/>
<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
</div>
<p class="file-return especes"></p>
<label for="localisation">Zoom</label>
<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'] : ''; ?>">
 
<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 -->
<label for="type_especes">Type liste espèce *</label>
<div class="select-wrapper">
<select id="type_especes" name="type_especes" required>
<option selected="selected" value="referentiel">Référentiel</option>
<option value="liste">Liste</option>
<option value="liste" title="remplir référentiel + envoyer csv">Liste + autres</option>
<option value="fixe">Espèce fixée</option>
</select>
</div>
 
<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>
</div>
</form>
<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'] : ''; ?>">
<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
</div>
<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>
<div class="widget-blocks col-md-8 project">
<p class="message">
<?php if ($mode === 'modification') : ?>
Attention vous modifiez un widget déjà existant, le tag et la langue ne peuvent pas être changer.
S'il s'agit d'un projet type, en modifiant ce widget vous modifiez tous les widgets de ce type.
<?php else : ?>
Vous créez un widget, si vous choississez de le mettre dans un type, certains champs deviendront
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>
<!--Submit-->
 
</form><!-- end #new-widget-form -->
 
<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>
 
</div><!-- end .widget-blocks = tout le bloc de gauche-->
 
<div class="widget-blocks col-md-8 project">
<p class="message">
<?php if ($mode === 'modification') : ?>
Attention vous modifiez un widget déjà existant, le tag et la langue ne peuvent pas être changer.
S'il s'agit d'un projet type, en modifiant ce widget vous modifiez tous les widgets de ce type.
<?php else : ?>
Vous créez un widget, si vous choississez de le mettre dans un type, certains champs deviendront
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> -->
<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>
 
<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>
</body>
</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,149 → 1,220
@CHARSET "UTF-8";
 
.clear {
clear: both;
height: 0;
 
/* Précaution pour IE 7 */
overflow: hidden;
}
 
h1#widget-titre::before {
content: "";
display: block;
height: 100%;
position: absolute;
left: -5rem;
width: 0.4rem;
 
content: "";
display: block;
height: 100%;
position: absolute;
left: -5rem;
width: 0.4rem;
}
 
h1#widget-titre {
font-size: 2.6rem;
font-weight: 700;
line-height: 3.2rem;
margin: 0;
position: relative;
color: #232323;
font-family: Ubuntu,sans-serif;
font-size: 2.6rem;
font-weight: 700;
line-height: 3.2rem;
margin: 0;
position: relative;
color: #232323;
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;
font-weight: 700;
line-height: 1.15;
}
 
h2 {
font-family: Muli,sans-serif;
font-size: 21.5px;
font-weight: 700;
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;
font-size: 1.5rem;
margin-bottom: 0.4rem;
margin-top: 2rem;
font-weight: 700;
color: #606060;
display: block;
font-size: 1.5rem;
margin-bottom: 0.4rem;
margin-top: 2rem;
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] {
border: 0.2rem solid rgba(0, 159, 184, 0.5);
#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);
}
 
#group-settings-form select {
background-color: #fff;
border: 0.1rem solid #ddd;
/* 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;
}
 
#group-settings-form select,
#group-settings-form select[required] {
border-radius: 0.3rem;
padding:0.5rem;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
width: 100%;
color:#333;
text-transform:none;
/**** 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 .select-wrapper {
position: relative;
#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 .select-wrapper::after {
content: '⌄';
font-size: 3rem;
font-weight: 900;
position: absolute;
top: 0;
right: 0.5rem;
color: #606060;
pointer-events: none;
#group-settings-form .remove-field.button,
#group-settings-form .remove-value.button {
background-color: #ff5d55;
}
 
#group-settings-form #langue{
width: 100%;
border: 0.1rem solid #ddd;
border-radius: 0.3rem;
padding: 1rem;
overflow: hidden;
#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;
}
 
div.widget-blocks {
box-sizing: border-box;
padding: 1rem;
#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;
}
 
.message {
background-color: #f8f5ef;
color: #232323;
padding: 1rem;
margin: 1rem;
#group-settings-form .select-wrapper,
#group-settings-form #new-fields .select-wrapper {
position: relative;
}
 
iframe.widget-renderer {
 
border:none;
margin: 1rem;
height: 300rem;
min-height: 100%;
width: 90%;
pointer-events: none;
overflow: hidden
#group-settings-form .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: #606060;
}
 
#group-settings-form input#add_fields.button {
background-color: #009fb8;
#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;
}
/**************************/
 
.clear {
clear: both;
height: 0;
overflow: hidden; /* Précaution pour IE 7 */
/**** Affichage des nouveaux champs ****/
 
/* 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;
}
 
.register-section{
margin-bottom: 1rem;
/* Mieux distinguer les différentes strates */
#group-settings-form .field-details {
margin: 1rem 0;
padding: 2rem;
border-radius: 0.3rem;
background-color: #fcfbf9;
}
/********************************************/
 
 
/* 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,91 → 1,363
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>'+
'<option value="textarea">Champ rédaction</option>'+
'<option value="select">Menu déroulant</option>'+
'<option value="checkbox">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>'+
'</select>'+
'<div>';
/***************************
* Lancement des scripts *
***************************/
 
jQuery( document ).ready( function() {
 
$('#profile-details-fields-section').append(html);
// 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++;
});
}
 
function enregistrerNouveauChamps() {
var $typeChamp = $('#type_champ'),
$valeurNouveauChamp = [];
$type_champ.change(function() {
$valeurNouveauChamp = $(this).val();
console.log($valeurNouveauChamp);
});
// 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="range">Curseur (curseur entre 2 bornes)</option>'+
'<option value="number">Nombre</option>'+
'</select>'+
'</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)">'+
 
// 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 );
}
 
// Un peu d'animation de l'affichage d'un nouveau champ
function displayNewField( fieldId ) {
 
function inputFile() {
newField( fieldId );
$( '.new-field[data-id="' + fieldId + '"]').hide().removeClass( 'hidden' ).show( 200 );
}
 
// ajout de la classe JS à HTML
$('html').addClass('js');
// Logique pour le bouton supprimer tout un champ
function onClickRemoveField() {
 
// initialisation des variables
var $fileInput = $( ".input-file" ),
$button = $( ".label-file" );
$( '.remove-field.button' ).click( function() {
$( '.new-field[data-id="' + $( this ).attr( 'data-id' ) + '"]').fadeOut( 200 , this.remove() );
});
}
 
// action lorsque la "barre d'espace" ou "Entrée" est pressée
$button.on( 'keydown', function( event ) {
if ( event.keyCode == 13 || event.keyCode == 32 ) {
$fileInput.focus();
}
});
// Affichage du nom du champ dès qu'il est renseigné
function onChangeDisplayFieldName( fieldId ) {
 
// action lorsque le label est cliqué
$button.click(function() {
$fileInput.focus();
return false;
});
$('.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 );
});
}
 
// 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'));
/**** Recueil des informations et détails qui dépendent du type de champ choisi ****/
 
$theReturn.text(file.name);
// Logique de recueil d'informations en fonction du type de champ choisi
function onChangeFieldTypeCollectDetails( fieldId ) {
 
if(file.type.match('image')) {
var tmppath = URL.createObjectURL(file);
$theReturn.append('<img src="' + tmppath + '" width="50%">');
}
});
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 );
 
});
}
 
jQuery(document).ready(function() {
// Insertion dans le dom des champs de recueil d'informations
function displayFieldDetailsCollect( fieldId , fieldDetails ) {
 
inputFile()
$( '.new-field[data-id="' + fieldId + '"] .add-field-select' ).after( '<div class="field-details">' + fieldDetails + '</div>' );
}
 
// var $projet = $('#projet');
/**** Ajout des valeurs (options) des "champs de listes" (select, checkbox, radio, etc.) ****/
 
// $projet.on('change', function( event ) {
// console.log($projet.val());
// $.ajax({
// url : 'http://localhost/widget:cel:manager',
// type : 'post',
// datatype : 'mode=creation&projet='+ $projet.val()
// });
// });
// 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() {
 
$('#add_fields').on("click", function(){
nouveauChamps();
});
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() {
 
// initialisation des variables
var $fileInput = $( ".input-file" ),
$button = $( ".label-file" );
 
// action lorsque la "barre d'espace" ou "Entrée" est pressée
$button.on( 'keydown', function( event ) {
if ( event.keyCode == 13 || event.keyCode == 32 ) {
$fileInput.focus();
}
});
 
// action lorsque le label est cliqué
$button.click(function() {
$fileInput.focus();
return false;
});
 
// affiche un retour visuel dès que input:file change
$fileInput.change( function( event ) {
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%">' );
}
});
}