Merge pull request #3 from mithron/fullist-new

Add Select for locations
mithron · Aug 22, 2014 · 9d10894 · 9d10894
2 parents eade212 + 9af3ceb
commit 9d10894
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 22 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -10,11 +10,11 @@
 		</style>
 
         <!-- Include Leaflet -->
-        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
+        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
         <!--[if lte IE 8]>
-            <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
+            <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.ie.css" />
         <![endif]-->
-        <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
+        <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
 
         <link rel="stylesheet" href="../src/leaflet.locationlist.css" />
         <script>
@@ -36,7 +36,7 @@
 
 			var m = L.map('map').setView([50.65,-13.95],3);			
 
-			var llist = L.control.locationlist();
+			var llist = L.control.locationlist({ showList: true, nextTitle: "Go Forward!"});
 			m.addControl(llist);
 
 			var layer = L.tileLayer(MB_URL, {attribution: MB_ATTR, id: 'examples.map-20v6611k'}).addTo(m);

diff --git a/src/leaflet.locationlist.css b/src/leaflet.locationlist.css
@@ -1,16 +1,35 @@
-.leaflet-bar .leaflet-control-location-list-arrow-next { 
+.leaflet-control-locationlist-arrow-next { 
 		background-image: url('../img/icon-next.png');
 		float: left;
 		border-top-left-radius: 0px !important;
 		border-bottom-left-radius: 0px !important;
 		border-top-right-radius: 4px !important;
 		border-bottom-right-radius: 4px !important;	}
-.leaflet-bar .leaflet-control-location-list-arrow-prev { 
+.leaflet-control-locationlist-arrow-prev { 
 		background-image: url('../img/icon-prev.png');
 		float: left;
 		border-top-left-radius: 4px !important;
 		border-bottom-left-radius: 4px !important;
 		border-top-right-radius: 0px !important;
 		border-bottom-right-radius: 0px !important;
 		}
+.leaflet-control-locationlist {
+	background-color : transparent;	
+	text-align:center;	
+}
+.leaflet-control-locationlist-arrows {
+    background-color : rgba(0,0,0,0);	
+	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+	border-radius: 4px;	
+	display:inline-block;
+}
 
+.leaflet-control-locationlist-form {
+	background-color : rgba(0,0,0,0);
+	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+	border-radius: 4px;	
+}
+
+.leaflet-control-locationlist-list {
+	border-radius: 4px;	
+}
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,35 +22,67 @@ 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');		
+		container = this._contentContainer = L.DomUtil.create('div', className);		
 
 		this._currentLocation_index = 0;
 
+		arrowsContainer = L.DomUtil.create('div', className + '-arrows leaflet-bar', container);		
 
 		this._prevButton = this._createButton(this.options.prevText, this.options.prevTitle,
-													className + '-arrow-prev', container, this._switchPrev, this);
+													className + '-arrow-prev', arrowsContainer, this._switchPrev, this);
 
 		this._nextButton = this._createButton(this.options.nextText, this.options.nextTitle, 
-													className + '-arrow-next', container, this._switchNext, this);
+													className + '-arrow-next', arrowsContainer, this._switchNext, this);
+
+		if (this.options.showList) {
+			var form = this._form = L.DomUtil.create('form', className + '-form leaflet-bar');
+			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 (e) {
+
+		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 (e) {		
+		// 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));
+		};
+
+		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');
 
 	}