refs #6 incude icon in symbol selects
Julien Veyssier
parent
de9b03301a
commit
078eece7f0
|
|
@ -18,6 +18,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
|
|||
[#7](https://gitlab.com/eneiluj/gpxedit-oc/issues/7) @eneiluj
|
||||
- load/save/edit symbol value (sym)
|
||||
[#6](https://gitlab.com/eneiluj/gpxedit-oc/issues/6) @eneiluj
|
||||
- symbol selects include icons
|
||||
[#6](https://gitlab.com/eneiluj/gpxedit-oc/issues/6) @eneiluj
|
||||
|
||||
### Changed
|
||||
- detach marker and tooltip styling option
|
||||
|
|
|
|||
|
|
@ -471,6 +471,14 @@ input[type=checkbox]
|
|||
width: 25px !important;
|
||||
height: 41px !important;
|
||||
}
|
||||
.marker-select{
|
||||
background: url('images/marker-icon.png') no-repeat right 8px center rgba(240, 240, 240, 0.90);
|
||||
background-size: 12px 20px;
|
||||
}
|
||||
.dot-select{
|
||||
background: url('images/symbols/dot.png') no-repeat right 8px center rgba(240, 240, 240, 0.90);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
||||
.leaflet-marker-red
|
||||
{
|
||||
|
|
@ -487,12 +495,24 @@ input[type=checkbox]
|
|||
.flag-blue{
|
||||
background-image: url('images/symbols/flag-blue.png') !important;
|
||||
}
|
||||
.flag-blue-select{
|
||||
background: url('images/symbols/flag-blue.png') no-repeat right 8px center rgba(240, 240, 240, 0.90);
|
||||
background-size: 15px 20px;
|
||||
}
|
||||
.flag-red{
|
||||
background-image: url('images/symbols/flag-red.png') !important;
|
||||
}
|
||||
.flag-red-select{
|
||||
background: url('images/symbols/flag-red.png') no-repeat right 8px center rgba(240, 240, 240, 0.90);
|
||||
background-size: 15px 20px;
|
||||
}
|
||||
.flag-green{
|
||||
background-image: url('images/symbols/flag-green.png') !important;
|
||||
}
|
||||
.flag-green-select{
|
||||
background: url('images/symbols/flag-green.png') no-repeat right 8px center rgba(240, 240, 240, 0.90);
|
||||
background-size: 15px 20px;
|
||||
}
|
||||
.diamond-blue, .diamond-red, .diamond-green{
|
||||
background-size: 18px 18px !important;
|
||||
background-repeat: no-repeat !important;
|
||||
|
|
@ -502,12 +522,24 @@ input[type=checkbox]
|
|||
.diamond-blue{
|
||||
background-image: url('images/symbols/diamond-blue.png') !important;
|
||||
}
|
||||
.diamond-blue-select{
|
||||
background: url('images/symbols/diamond-blue.png') no-repeat right 8px center rgba(240, 240, 240, 0.90);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
.diamond-green{
|
||||
background-image: url('images/symbols/diamond-green.png') !important;
|
||||
}
|
||||
.diamond-green-select{
|
||||
background: url('images/symbols/diamond-green.png') no-repeat right 8px center rgba(240, 240, 240, 0.90);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
.diamond-red{
|
||||
background-image: url('images/symbols/diamond-red.png') !important;
|
||||
}
|
||||
.diamond-red-select{
|
||||
background: url('images/symbols/diamond-red.png') no-repeat right 8px center rgba(240, 240, 240, 0.90);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
.block-blue, .block-red, .block-green{
|
||||
background-size: 16px 16px !important;
|
||||
background-repeat: no-repeat !important;
|
||||
|
|
@ -517,12 +549,24 @@ input[type=checkbox]
|
|||
.block-blue{
|
||||
background-image: url('images/symbols/block-blue.png') !important;
|
||||
}
|
||||
.block-blue-select{
|
||||
background: url('images/symbols/block-blue.png') no-repeat right 8px center rgba(240, 240, 240, 0.90);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
.block-green{
|
||||
background-image: url('images/symbols/block-green.png') !important;
|
||||
}
|
||||
.block-green-select{
|
||||
background: url('images/symbols/block-green.png') no-repeat right 8px center rgba(240, 240, 240, 0.90);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
.block-red{
|
||||
background-image: url('images/symbols/block-red.png') !important;
|
||||
}
|
||||
.block-red-select{
|
||||
background: url('images/symbols/block-red.png') no-repeat right 8px center rgba(240, 240, 240, 0.90);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
.pin-blue, .pin-red, .pin-green{
|
||||
background-size: 21px 30px !important;
|
||||
background-repeat: no-repeat !important;
|
||||
|
|
@ -532,12 +576,24 @@ input[type=checkbox]
|
|||
.pin-blue{
|
||||
background-image: url('images/symbols/pin-blue.png') !important;
|
||||
}
|
||||
.pin-blue-select{
|
||||
background: url('images/symbols/pin-blue.png') no-repeat right 8px center rgba(240, 240, 240, 0.90);
|
||||
background-size: 15px 20px;
|
||||
}
|
||||
.pin-green{
|
||||
background-image: url('images/symbols/pin-green.png') !important;
|
||||
}
|
||||
.pin-green-select{
|
||||
background: url('images/symbols/pin-green.png') no-repeat right 8px center rgba(240, 240, 240, 0.90);
|
||||
background-size: 15px 20px;
|
||||
}
|
||||
.pin-red{
|
||||
background-image: url('images/symbols/pin-red.png') !important;
|
||||
}
|
||||
.pin-red-select{
|
||||
background: url('images/symbols/pin-red.png') no-repeat right 8px center rgba(240, 240, 240, 0.90);
|
||||
background-size: 15px 20px;
|
||||
}
|
||||
.medical{
|
||||
background-image: url('images/symbols/medical.png') !important;
|
||||
background-size: 26px 22px !important;
|
||||
|
|
@ -545,6 +601,10 @@ input[type=checkbox]
|
|||
width: 26px !important;
|
||||
height: 22px !important;
|
||||
}
|
||||
.medical-select{
|
||||
background: url('images/symbols/medical.png') no-repeat right 8px center rgba(240, 240, 240, 0.90);
|
||||
background-size: 24px 20px;
|
||||
}
|
||||
.campground{
|
||||
background-image: url('images/symbols/campground.png') !important;
|
||||
background-size: 24px 24px !important;
|
||||
|
|
@ -552,6 +612,10 @@ input[type=checkbox]
|
|||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
}
|
||||
.campground-select{
|
||||
background: url('images/symbols/campground.png') no-repeat right 8px center rgba(240, 240, 240, 0.90);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
.hike{
|
||||
background-image: url('images/symbols/hike.png') !important;
|
||||
background-size: 24px 24px !important;
|
||||
|
|
@ -559,6 +623,10 @@ input[type=checkbox]
|
|||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
}
|
||||
.hike-select{
|
||||
background: url('images/symbols/hike.png') no-repeat right 8px center rgba(240, 240, 240, 0.90);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
.bike-trail{
|
||||
background-image: url('images/symbols/bike-trail.png') !important;
|
||||
background-size: 24px 24px !important;
|
||||
|
|
@ -566,6 +634,10 @@ input[type=checkbox]
|
|||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
}
|
||||
.bike-trail-select{
|
||||
background: url('images/symbols/bike-trail.png') no-repeat right 8px center rgba(240, 240, 240, 0.90);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
.bar{
|
||||
background-image: url('images/symbols/bar.png') !important;
|
||||
background-size: 20px 24px !important;
|
||||
|
|
@ -573,6 +645,10 @@ input[type=checkbox]
|
|||
width: 20px !important;
|
||||
height: 24px !important;
|
||||
}
|
||||
.bar-select{
|
||||
background: url('images/symbols/bar.png') no-repeat right 8px center rgba(240, 240, 240, 0.90);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
.skullcross{
|
||||
background-image: url('images/symbols/skullcross.png') !important;
|
||||
background-size: 25px 25px !important;
|
||||
|
|
@ -580,6 +656,10 @@ input[type=checkbox]
|
|||
width: 25px !important;
|
||||
height: 25px !important;
|
||||
}
|
||||
.skullcross-select{
|
||||
background: url('images/symbols/skullcross.png') no-repeat right 8px center rgba(240, 240, 240, 0.90);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
.geocache{
|
||||
background-image: url('images/symbols/geocache.png') !important;
|
||||
background-size: 22px 20px !important;
|
||||
|
|
@ -587,6 +667,10 @@ input[type=checkbox]
|
|||
width: 22px !important;
|
||||
height: 20px !important;
|
||||
}
|
||||
.geocache-select{
|
||||
background: url('images/symbols/geocache.png') no-repeat right 8px center rgba(240, 240, 240, 0.90);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
.geocache-open{
|
||||
background-image: url('images/symbols/geocache-open.png') !important;
|
||||
background-size: 22px 20px !important;
|
||||
|
|
@ -594,6 +678,10 @@ input[type=checkbox]
|
|||
width: 22px !important;
|
||||
height: 20px !important;
|
||||
}
|
||||
.geocache-open-select{
|
||||
background: url('images/symbols/geocache-open.png') no-repeat right 8px center rgba(240, 240, 240, 0.90);
|
||||
background-size: 22px 20px;
|
||||
}
|
||||
/*
|
||||
Block, Blue
|
||||
Blue Diamond
|
||||
|
|
@ -652,3 +740,7 @@ h2.popupTitle{
|
|||
#saveName{
|
||||
width:78%;
|
||||
}
|
||||
.selectimg{
|
||||
background: url('images/symbols/geocache-open.png') no-repeat right 8px center rgba(240, 240, 240, 0.90);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,31 @@ var gpxedit = {
|
|||
layersData: {}
|
||||
};
|
||||
|
||||
var symbolSelectClasses = {
|
||||
'marker': 'marker-select',
|
||||
'Dot, White': 'dot-select',
|
||||
'Pin, Blue': 'pin-blue-select',
|
||||
'Pin, Green': 'pin-green-select',
|
||||
'Pin, Red': 'pin-red-select',
|
||||
'Flag, Green': 'flag-green-select',
|
||||
'Flag, Red': 'flag-red-select',
|
||||
'Flag, Blue': 'flag-blue-select',
|
||||
'Block, Blue': 'block-blue-select',
|
||||
'Block, Green': 'block-green-select',
|
||||
'Block, Red': 'block-red-select',
|
||||
'Blue Diamond': 'diamond-blue-select',
|
||||
'Green Diamond': 'diamond-green-select',
|
||||
'Red Diamond': 'diamond-red-select',
|
||||
'Trail Head': 'hike-select',
|
||||
'Bike Trail': 'bike-trail-select',
|
||||
'Campground': 'campground-select',
|
||||
'Bar': 'bar-select',
|
||||
'Skull and Crossbones': 'skullcross-select',
|
||||
'Geocache': 'geocache-select',
|
||||
'Geocache Found': 'geocache-open-select',
|
||||
'Medical Facility': 'medical-select',
|
||||
}
|
||||
|
||||
var symbolIcons = {
|
||||
'marker': L.divIcon({
|
||||
className: 'leaflet-marker-blue',
|
||||
|
|
@ -333,7 +358,8 @@ function load_map() {
|
|||
buttonParent.find('input.layerName').val(gpxedit.layersData[id].name);
|
||||
buttonParent.find('textarea.layerDesc').val(gpxedit.layersData[id].description);
|
||||
buttonParent.find('textarea.layerCmt').val(gpxedit.layersData[id].comment);
|
||||
buttonParent.find('select.symbol').val(gpxedit.layersData[id].symbol);
|
||||
buttonParent.find('select[role=symbol]').val(gpxedit.layersData[id].symbol);
|
||||
buttonParent.find('select[role=symbol]').change();
|
||||
});
|
||||
|
||||
}
|
||||
|
|
@ -351,7 +377,7 @@ function onCreated(type, layer){
|
|||
'<tr><td>Name</td><td><input class="layerName"></input></td></tr>'+
|
||||
'<tr><td>Description</td><td><textarea class="layerDesc"></textarea></td></tr>'+
|
||||
'<tr><td>Comment</td><td><textarea class="layerCmt"></textarea></td></tr>';
|
||||
popupTxt = popupTxt + '<tr><td>Symbol</td><td><select class="symbol">';
|
||||
popupTxt = popupTxt + '<tr><td>Symbol</td><td><select role="symbol">';
|
||||
popupTxt = popupTxt + '<option value="">No symbol</option>';
|
||||
for (var cl in symbolIcons){
|
||||
if (cl !== 'marker'){
|
||||
|
|
@ -712,6 +738,9 @@ function addTileServer(){
|
|||
// affects future markers and also existing ones
|
||||
function updateLeafletDrawMarkerStyle(){
|
||||
var wst = $('#markerstyleselect').val();
|
||||
var theclass = symbolSelectClasses[wst];
|
||||
$('#markerstyleselect').removeClass($('#markerstyleselect').attr('class'));
|
||||
$('#markerstyleselect').addClass(theclass);
|
||||
var tst = $('#tooltipstyleselect').val();
|
||||
var theicon = symbolIcons[wst];
|
||||
|
||||
|
|
@ -837,7 +866,7 @@ $(document).ready(function(){
|
|||
var name = $(this).parent().find('.layerName').val();
|
||||
var description = $(this).parent().find('.layerDesc').val();
|
||||
var comment = $(this).parent().find('.layerCmt').val();
|
||||
var symbol = $(this).parent().find('select.symbol').val();
|
||||
var symbol = $(this).parent().find('select[role=symbol]').val();
|
||||
var wst = $('#markerstyleselect').val();
|
||||
var tst = $('#tooltipstyleselect').val();
|
||||
var symboo = $('#symboloverwrite').is(':checked');
|
||||
|
|
@ -970,6 +999,11 @@ $(document).ready(function(){
|
|||
addTileServer();
|
||||
});
|
||||
|
||||
$('body').on('change', 'select[role=symbol]', function() {
|
||||
$(this).removeClass($(this).attr('class'));
|
||||
$(this).addClass(symbolSelectClasses[$(this).val()]);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
})(jQuery, OC);
|
||||
|
|
|
|||
Loading…
Reference in New Issue