Merge pull request #38 from fupduck/0.1.9

bugfixes, improvements
dwilhelm89 · Oct 31, 2017 · c1364d5 · c1364d5
2 parents 37ab7ad + 9687d19
commit c1364d5
Show file tree

Hide file tree

Showing 14 changed files with 188 additions and 95 deletions.
diff --git a/dist/css/Leaflet.StyleEditor.min.css b/dist/css/Leaflet.StyleEditor.min.css
diff --git a/dist/javascript/Leaflet.StyleEditor.min.js b/dist/javascript/Leaflet.StyleEditor.min.js
diff --git a/src/css/Leaflet.StyleEditor.css b/src/css/Leaflet.StyleEditor.css
@@ -85,19 +85,23 @@
     width: 150px;
 }
 .leaflet-styleeditor-select {
+    position: relative;
     height: 32px;
     margin-bottom: 5px;
     padding-left: 10px;
     background: #fff;
     border: 1px solid rgba(0, 0, 0, 0.1);
     outline: none;
     width: 150px;
+    overflow: hidden;
+    padding: 0;
 }
 .leaflet-styleeditor-select-option-wrapper {
     position: absolute;
     list-style: none;
     padding: 0;
     overflow-y: scroll;
+    overflow-x: hidden;
     border: 1px solid rgba(0, 0, 0, 0.1);
     background: white;
     top: 80px;
@@ -111,14 +115,19 @@
     cursor: pointer;
     position: relative;
 }
-.leaflet-styleeditor-select-image {
-    position: relative;
-    width: 20px;
-    height: 30px;
-    left: calc(50% - 10px);
-    overflow: hidden;
+.leaflet-styleeditor-select-image-wrapper {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    overflow: visible;
+    width: 100%;
+    height: 100%;
+}
+.leaflet-styleeditor-select-image-defaultmarker {
+    top: 11px;
 }
 .leaflet-styleeditor-select-image {
+    position: relative;
     padding: 0;
     margin: 0;
 }
@@ -197,8 +206,9 @@
 .leaflet-styleeditor-tooltip-wrapper {
 	position: absolute;
 	text-align: center;
-	top: 80%;
+	bottom: 10%;
 	width: 100%;
+    z-index: 1000;
 }
 .leaflet-styleeditor-tooltip {
 	background-color: rgba(68, 68, 68, 0.2);

diff --git a/src/index.html b/src/index.html
@@ -199,6 +199,7 @@
         map.on('styleeditor:changed', function(element){
             console.log(element);
         });
+
     </script>
 </body>
 

diff --git a/src/javascript/Control.js b/src/javascript/Control.js
@@ -2,23 +2,30 @@ L.Control.StyleEditor = L.Control.extend({
     options: {
         position: 'topleft',
         enabled: false,
+
         colorRamp: ['#1abc9c', '#2ecc71', '#3498db', '#9b59b6', '#34495e', '#16a085', '#27ae60', '#2980b9', '#8e44ad',
                     '#2c3e50', '#f1c40f', '#e67e22', '#e74c3c', '#ecf0f1', '#95a5a6', '#f39c12', '#d35400', '#c0392b',
                     '#bdc3c7', '#7f8c8d'],
         defaultColor: null,
         currentElement: null,
+
         markerType: L.StyleEditor.marker.DefaultMarker,
+        markers: null,
+        defaultMarkerIcon: null,
+        defaultMarkerColor: null,
+
         geometryForm: L.StyleEditor.forms.GeometryForm,
+
         editLayers: [],
         layerGroups: [],
+
         openOnLeafletDraw: true,
         showTooltip: true,
+
         strings: {
             tooltip: 'Click on the element you want to style',
             tooltipNext: 'Choose another element you want to style'
         },
-        markers: null,
-        defaultMarker: null,
         useGrouping: true
     },
 
@@ -220,7 +227,7 @@ L.Control.StyleEditor = L.Control.extend({
 
         for (var i = 0; i < this.options.layerGroups.length; ++i) {
         	group = this.options.layerGroups[i];
-        	if (group && layer != group && group.hasLayer(layer)) {
+        	if (group && layer !== group && group.hasLayer(layer)) {
         		// we use the opacity style to check for correct object
         		if (!group.options || !group.options.opacity) {
         			group.options = layer.options;

diff --git a/src/javascript/Form/GeometryForm.js b/src/javascript/Form/GeometryForm.js
@@ -13,7 +13,7 @@ L.StyleEditor.forms.GeometryForm = L.StyleEditor.forms.Form.extend({
     /** show the fillOptions (fillColor and fillOpacity) only if the Element can be filled */
     showFormElements: function () {
         for (var i = 0; i < this.options.initializedElements.length; i++) {
-            if (this.options.initializedElements[i].options.styleOption.indexOf('fill') == 0) {
+            if (this.options.initializedElements[i].options.styleOption.indexOf('fill') === 0) {
                 if (this.options.styleEditorOptions.util.fillCurrentElement()) {
                     this.options.initializedElements[i].show();
                 } else {

diff --git a/src/javascript/Form/MarkerForm.js b/src/javascript/Form/MarkerForm.js
@@ -6,11 +6,6 @@ L.StyleEditor.forms.MarkerForm = L.StyleEditor.forms.Form.extend({
             'color': L.StyleEditor.formElements.ColorElement,
             'size': L.StyleEditor.formElements.SizeElement
         }
-    },
-
-    /** before showing the MarkerForm update currently used MarkerIcon */
-    preShow: function () {
-        Object.assign(this.options.styleEditorOptions.markerType.getIconOptions(),
-            this.options.styleEditorOptions.util.getCurrentElement().options.icon.options);
     }
+
 });
diff --git a/src/javascript/FormElements/ColorElement.js b/src/javascript/FormElements/ColorElement.js
@@ -14,8 +14,8 @@ L.StyleEditor.formElements.ColorElement = L.StyleEditor.formElements.FormElement
     _getColorRamp: function() {
         if (!this.options.colorRamp) {
             // if markers have own colorRamp use it
-            if (this.options.parentForm instanceof L.StyleEditor.forms.MarkerForm && !! this.options.styleEditorOptions.markerType.colorRamp){
-                this.options.colorRamp = this.options.styleEditorOptions.markerType.colorRamp;
+            if (this.options.parentForm instanceof L.StyleEditor.forms.MarkerForm && !! this.options.styleEditorOptions.markerType.options.colorRamp){
+                this.options.colorRamp = this.options.styleEditorOptions.markerType.options.colorRamp;
             // else use the default
             } else {
                 this.options.colorRamp = this.options.styleEditorOptions.colorRamp;

diff --git a/src/javascript/FormElements/IconElement.js b/src/javascript/FormElements/IconElement.js
@@ -9,7 +9,7 @@ L.StyleEditor.formElements.IconElement = L.StyleEditor.formElements.FormElement.
     /** create the icon selectBoxes */
     createContent: function() {
         var uiElement = this.options.uiElement;
-        var selectBox = L.DomUtil.create('button', 'leaflet-styleeditor-select', uiElement);
+        var selectBox = L.DomUtil.create('div', 'leaflet-styleeditor-select', uiElement);
         var selectBoxImage = this.options.selectBoxImage = this._createSelectInputImage(selectBox);
 
         L.DomEvent.addListener(selectBox, 'click', this._toggleSelectInput, this);
@@ -18,7 +18,7 @@ L.StyleEditor.formElements.IconElement = L.StyleEditor.formElements.FormElement.
     /** show the correct icon in the correct color if the icon or color changed */
     style: function () {
         this._styleSelectInputImage(this.options.selectBoxImage,
-            this.options.styleEditorOptions.markerType.options.iconOptions.icon);
+            this.options.styleEditorOptions.markerType.getIconOptions().icon);
         this._createColorSelect(this.options.styleEditorOptions.markerType.options.iconOptions.iconColor);
         this._hideSelectOptions();
     },
@@ -30,7 +30,8 @@ L.StyleEditor.formElements.IconElement = L.StyleEditor.formElements.FormElement.
 
     /** create image container that hides/shows the iconSelectBox */
     _createSelectInputImage: function(parentUiElement) {
-        return L.DomUtil.create('div', 'leaflet-styleeditor-select-image', parentUiElement);
+        var wrapper = L.DomUtil.create('div', 'leaflet-styleeditor-select-image-wrapper', parentUiElement);
+        return L.DomUtil.create('div', 'leaflet-styleeditor-select-image', wrapper);
     },
 
     /** create appropriate image for color and icon */
@@ -42,7 +43,7 @@ L.StyleEditor.formElements.IconElement = L.StyleEditor.formElements.FormElement.
             }
         }
 
-        var iconOptions = this.options.styleEditorOptions.markerType.options.iconOptions;
+        var iconOptions = this.options.styleEditorOptions.markerType.getIconOptions();
         if (!!color) {
             iconOptions.iconColor = color;
         }
@@ -78,11 +79,12 @@ L.StyleEditor.formElements.IconElement = L.StyleEditor.formElements.FormElement.
             if (target.nodeName === 'UL') {
                 return;
             }
-            while (target.nodeName !== 'LI') {
+            if(target.parentNode.className === 'leaflet-styleeditor-select-image') {
                 target = target.parentNode;
-            }
-            if (target.nodeName === 'LI') {
-                target = target.childNodes[0];
+            } else {
+                while (target && target.className !== 'leaflet-styleeditor-select-image') {
+                    target = target.childNodes[0];
+                }
             }
             this._selectMarker({
                 'target': target

diff --git a/src/javascript/FormElements/SizeElement.js b/src/javascript/FormElements/SizeElement.js
@@ -8,17 +8,17 @@ L.StyleEditor.formElements.SizeElement = L.StyleEditor.formElements.FormElement.
         var uiElement = this.options.uiElement;
         var select = L.DomUtil.create('div', 'leaflet-styleeditor-sizeicon sizeicon-small', uiElement);
         L.DomEvent.addListener(select, 'click', function () {
-            this.setStyle([20, 50]);
+            this.setStyle(this.options.styleEditorOptions.markerType.options.size.small);
         }, this);
 
         select = L.DomUtil.create('div', 'leaflet-styleeditor-sizeicon sizeicon-medium', uiElement);
         L.DomEvent.addListener(select, 'click', function () {
-            this.setStyle([30, 70]);
+            this.setStyle(this.options.styleEditorOptions.markerType.options.size.medium);
         }, this);
 
         select = L.DomUtil.create('div', 'leaflet-styleeditor-sizeicon sizeicon-large', uiElement);
         L.DomEvent.addListener(select, 'click', function () {
-            this.setStyle([35, 90]);
+            this.setStyle(this.options.styleEditorOptions.markerType.options.size.large);
         }, this);
     }
 });