added connected drop-down list

mithron · Aug 22, 2014 · 954743d · 954743d
1 parent bcd5868
commit 954743d
Showing 1 changed file with 53 additions and 13 deletions.
diff --git 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');
 
 	}