Browse Source

Add cursor in poi editor

poi-dev
Léo Serre 2 years ago
parent
commit
91c9517dac
  1. 2
      controllers/d.poi.php
  2. 44
      views/css/d.poi.css
  3. 29
      views/d.poi.edit.html
  4. 21
      views/js/d.poi_map.js

2
controllers/d.poi.php

@ -53,6 +53,8 @@ switch ($controller->splitted_url[1]) {
$head['css'] .= ";../third/leaflet/leaflet.css;../third/leaflet-fullscreen/leaflet.fullscreen.css;../third/leaflet-easybutton/easy-button.css";
$head['js'] = "d.poi_map.js";
$poi->lat = ""; $poi->lon = ""; $poi->alt = "";
$new = 1;
include ($config['views_folder']."d.poi.edit.html");
break;

44
views/css/d.poi.css

@ -42,19 +42,14 @@ html, body {
/** Editor page **/
/*********************************/
form.form input, form.form textarea, #locale {
form.form input, form.form textarea, form.form input[type=radio]:checked+label, #locale {
background: #ddd;
border-bottom: 2px solid #ccc;
display: block;
padding: 10px;
}
form.form textarea {
font-size: 14px;
margin: 10px 0 10px 0px;
width: calc(100% - 20px);
}
form.form input {
form.form h1 input {
width: 58%;
margin: 10px 0 10px 0px;
font-size: 18px;
@ -65,29 +60,46 @@ form.form input {
font-size: 17px;
}
form.form input[type=submit] {
width: auto;
margin: auto;
border-bottom: 2px solid blue;
#permalink {
width: 808px;
margin: 10px 0 0 0px;
padding: 6px;
font-size: 11px;
font-style: italic;
color: #555;
}
#type_selector {
.flex_line {
display: flex;
flex-direction: row;
}
.flex_line input[type=text] {
flex: 1;
margin: 10px 5px 0 5px;
}
form.form input[type=submit] {
width: auto;
margin: 10px auto;
border-bottom: 2px solid blue;
}
form.form input[type=radio] {
display: none;
}
form.form input[type=radio]+label {
font-size: 13px;
flex: 1;
text-align: center;
padding: 10px 5px;
padding: 10px;
vertical-align: middle;
border-bottom: 2px solid transparent;
}
form.form input[type=radio]:checked+label {
background: #ddd;
border-bottom: 2px solid #ccc;
form.form input[type=radio]+label img {
width: 32px;
height: 32px;
}
/*****************************************

29
views/d.poi.edit.html

@ -14,7 +14,7 @@
<i id="slide-icon" class="fas fa-chevron-up"></i>
<form class="form" action="<?=$config['rel_root_folder']?>wiki/<?=$poi->permalink?>/edit" method="post">
<br>
<div id="type_selector">
<div class="flex_line">
<? foreach($poi_types as $type) { ?>
<input type="radio" name="poi_type" value="<?=$type[3]?>" id="<?=$type[3]?>">
<label for="<?=$type[3]?>"><img src="<?=$config['views_url']?>img/<?=$type[3]?>.svg"><br><?=$type[0]?></label>
@ -27,10 +27,17 @@
<option <?=$poi->locale==$locale->name?'selected':''?> value="<?=$locale->name?>"><?=$locale->display_name?></option>
<? } ?>
</select>
<input type="text" value="<?=$poi->name?>" name="name" id="name" placeholder="Titre">
<input type="text" value="<?=$poi->name?>" name="name" id="name" placeholder="Nom de l'hébergement">
</h1>
<? if(isset($new) AND $new==1) { ?>
<input type="text" value="<?=$poi->permalink?>" name="permalink" id="permalink" placeholder="Permalien généré automatiquement" readonly>
<? } ?>
<textarea rows="30" name="content" id="content" placeholder="Contenu de la page"><?=$poi->parameters?></textarea>
<div class="flex_line">
<input type="text" value="<?=$poi->lat?>" name="lat" id="lat" placeholder="Latitude">
<input type="text" value="<?=$poi->lon?>" name="lon" id="lon" placeholder="Longitude">
<input type="text" value="<?=$poi->alt?>" name="alt" id="alt" placeholder="Altitude">
</div>
<input name="submit" id="submit" type="submit" value="Envoyer">
</form>
@ -39,6 +46,22 @@
<script type="text/javascript">
$( "#slide-icon" ).click(function() {
$( "html, body" ).animate({scrollTop: "300px"});
});
$( "#name" ).keyup(function() {
permalink = $( "#name" ).val();
permalink = permalink.replace(/ /g,'_');
permalink = permalink.toLowerCase();
permalink = permalink.replace(/[^a-z0-9_]/g,'-');
permalink = permalink.replace(/[_-]+$/g,'');
$( "#permalink" ).val(permalink);
});
$( "#name" ).change(function() {
permalink = $( "#name" ).val();
permalink = permalink.replace(/ /g,'_');
permalink = permalink.toLowerCase();
permalink = permalink.replace(/[^a-z0-9_]/g,'-');
permalink = permalink.replace(/[_-]+$/g,'');
$( "#permalink" ).val(permalink);
});
</script>

21
views/js/d.poi_map.js

@ -1,4 +1,5 @@
var mymap;
var poi_layer;
$( document ).ready(function() {
// Differents layers for the map
@ -40,13 +41,19 @@ $( document ).ready(function() {
mymap.removeControl(mymap.attributionControl);
$(".close-link").click(function() {
$("footer").show();
$("#footer-credits").hide();
$("#footer-legend").hide();
});
mymap.on('baselayerchange', function(e) {
$("#map-credits").html(e.layer.getAttribution());
});
});
poi_layer = L.marker([-46.407, 51.766], {draggable: true}).addTo(mymap);
mymap.on('click', function(e){
poi_layer.setLatLng(e.latlng);
$("#lat").val(e.latlng.lat);
$("#lon").val(e.latlng.lng);
})
poi_layer.on('move', function(e){
$("#lat").val(e.latlng.lat);
$("#lon").val(e.latlng.lng);
})
});
Loading…
Cancel
Save