refs #6 incude icon in symbol selects

CHANGELOG.md

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

css/gpxedit.css

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

js/gpxedit.js

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