refs #6 incude icon in symbol selects

merge-requests/1/head
Julien Veyssier 2016-12-07 18:53:14 +01:00
parent de9b03301a
commit 078eece7f0
3 changed files with 131 additions and 3 deletions

View File

@ -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

View File

@ -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;
}

View File

@ -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);