From 954743d0f859aa634376cfa2f7b346113a60f1b2 Mon Sep 17 00:00:00 2001
From: Mithron <mithron@gmail.com>
Date: Fri, 22 Aug 2014 13:36:11 +0400
Subject: [PATCH] added connected drop-down list

---
 src/leaflet.locationlist.js | 66 +++++++++++++++++++++++++++++--------
 1 file changed, 53 insertions(+), 13 deletions(-)

diff --git a/src/leaflet.locationlist.js b/src/leaflet.locationlist.js
index 182be5f..69916b7 100644
--- a/src/leaflet.locationlist.js
+++ b/src/leaflet.locationlist.js
@@ -4,7 +4,7 @@ L.Control.LocationList = L.Control.extend({
 	
 	options: {
 		position: 'topright',
-		showlist: true,		
+		showList: true,		
 		locationsList : [ {title: 'Poland', latlng: [52.03, 19.27], zoom: 6},
 						  {title: 'Other', latlng: [50.04, 14.28], zoom: 6},
 						  {title: 'Other2', latlng: [50.04, 19.27], zoom: 12}],
@@ -22,7 +22,7 @@ L.Control.LocationList = L.Control.extend({
 		
 		this._map = map;
 		
-		var className = 'leaflet-control-location-list', container;
+		var className = 'leaflet-control-locationlist', container;
 		
 		container = this._contentContainer = L.DomUtil.create('div', 'leaflet-bar');		
 		
@@ -34,23 +34,55 @@ L.Control.LocationList = L.Control.extend({
 													
 		this._nextButton = this._createButton(this.options.nextText, this.options.nextTitle, 
 													className + '-arrow-next', container, this._switchNext, this);
+		
+		if (this.options.showList) {
+			var form = this._form = L.DomUtil.create('form', className + '-fullist');
+			this._fullist = L.DomUtil.create('select', className + '-list', form);
+			this._fullist.style.width = '100%';
+	
+			L.DomEvent.on(this._fullist, 'change', this._onListChange, this);
+			
+			container.appendChild(form);
 			
+			this._update();
+		}
+		
 		return container;
 		
     },
 	
+	_onListChange: function () {
+
+		this._currentLocation_index = this._fullist.selectedIndex;
 	
-//	_createList: function (list, linkClass, container, fn, context) {			
-//			for location in list{
-//				var link = L.DomUtil.create('a', linkClass,container);
-//				link.href = location.latlng;
-//				link.innerHTML = location.title;
-//						
-//			}
-//			
-//			return content
-//	},
-	
+		this._map.setView(this.options.locationsList[this._currentLocation_index].latlng, this.options.locationsList[this._currentLocation_index].zoom);
+		this.fire('changed');
+  },
+		
+  _createListElement: function (obj,ind) {
+		var option = document.createElement('option');		
+		option.innerHTML = obj.title;
+		if (this._currentLocation_index == ind ) {
+			option.setAttribute('selected', true);
+		}
+		return option;
+  },
+  
+  _update: function () {		
+		// L.DomUtil.empty(this._fullist); add in 0.7.4
+		while (this._fullist.firstChild) {
+				this._fullist.removeChild(this._fullist.firstChild);
+		};	
+		var i, obj;
+		for (i in this.options.locationsList) {
+			obj = this.options.locationsList[i];
+			this._fullist.appendChild(this._createListElement(obj,i));
+		};
+
+		console.log(this);
+		return this;
+  },
+  
 	_createButton: function (text, title, className, container, fn, context) {
 		
 		var link = L.DomUtil.create('a', className, container);
@@ -73,6 +105,10 @@ L.Control.LocationList = L.Control.extend({
 			 this._currentLocation_index = 0 ;}
 			
 		this._map.setView(this.options.locationsList[this._currentLocation_index].latlng, this.options.locationsList[this._currentLocation_index].zoom);
+		if (this.options.showList) {
+			this._update();
+		};
+		this.fire('changed');
 		this.fire('next');
 	},
 	_switchPrev: function (e) {
@@ -82,6 +118,10 @@ L.Control.LocationList = L.Control.extend({
 			this._currentLocation_index = this.options.locationsList.length - 1 ;}
 			
 		this._map.setView(this.options.locationsList[this._currentLocation_index].latlng, this.options.locationsList[this._currentLocation_index].zoom);
+		if (this.options.showList) {
+			this._update();
+		};
+		this.fire('changed');
 		this.fire('prev');
 	
 	}