From eddb5024ee2c447d5db0090b2bef3c08420c902a Mon Sep 17 00:00:00 2001
From: Jacek Kowalski <Jacek@jacekk.info>
Date: Sat, 06 Jul 2019 00:01:22 +0000
Subject: [PATCH] Fix map and panel animations (use position: fixed instead of absolute)

---
 map.js |  165 +++++++++++++++++++++++++++++++++++++++++-------------
 1 files changed, 124 insertions(+), 41 deletions(-)

diff --git a/map.js b/map.js
index 1bbd8c2..bc0370f 100644
--- a/map.js
+++ b/map.js
@@ -70,6 +70,7 @@
 var map = null;
 
 var panel = null;
+var find = null;
 
 var fail_element = document.getElementById('fail');
 var fail_text = document.querySelector('#fail span');
@@ -143,6 +144,80 @@
 		this._element.classList.remove('enabled');
 	},
 };
+
+
+function Find() {
+	this.div = document.createElement('div');
+	
+	this.form = document.createElement('form');
+	this.div.appendChild(this.form);
+	
+	var para = addParaWithText(this.form, lang.enter_query);
+	para.appendChild(document.createElement('br'));
+	this.input = document.createElement('input');
+	this.input.type = 'text';
+	this.input.style.width = '80%';
+	para.appendChild(this.input);
+	para.appendChild(document.createElement('hr'));
+	
+	this.results = document.createElement('div');
+	this.div.appendChild(this.results);
+	
+	this.input.addEventListener('keyup', this.findDelay.bind(this));
+	this.form.addEventListener('submit', this.findDelay.bind(this));
+}
+Find.prototype = {
+	query: '',
+	timeout: null,
+	
+	div: null,
+	form: null,
+	input: null,
+	results: null,
+	
+	find: function() {
+		var query = this.input.value.toUpperCase();
+		if(query === this.query) return;
+		this.query = query;
+		
+		var features = [];
+		stops_type.forEach(function(stop_type) {
+			if(stop_type.substr(0,1) === 'p') return;
+			stops_source[stop_type].forEachFeature(function(feature) {
+				if(feature.get('name').toUpperCase().indexOf(query) > -1) {
+					features.push(feature);
+				}
+			});
+		});
+		
+		ttss_types.forEach(function(ttss_type) {
+			vehicles_source[ttss_type].forEachFeature(function(feature) {
+				if(feature.get('vehicle_type') && feature.get('vehicle_type').num.indexOf(query) > -1) {
+					features.push(feature);
+				}
+			});
+		});
+		
+		deleteChildren(this.results);
+		this.results.appendChild(listFeatures(features));
+	},
+	findDelay: function(e) {
+		e.preventDefault();
+		if(this.timeout) clearTimeout(this.timeout);
+		this.timeout = setTimeout(this.find.bind(this), 100);
+	},
+	open: function(panel) {
+		ignore_hashchange = true;
+		window.location.hash = '#!f';
+		
+		panel.show(this.div, this.close.bind(this));
+		this.input.focus();
+	},
+	close: function() {
+		if(this.timeout) clearTimeout(this.timeout);
+	},
+};
+
 
 function fail(msg) {
 	setText(fail_text, msg);
@@ -269,7 +344,7 @@
 				if(vehicle_feature) {
 					vehicles_source[prefix].removeFeature(vehicle_feature);
 					if(feature_clicked && feature_clicked.getId() === vehicle_feature.getId()) {
-						featureClicked();
+						panel.close();
 					}
 				}
 				continue;
@@ -594,7 +669,7 @@
 		})}, 10);
 	};
 	showOnMapElement.addEventListener('click', showOnMapFunction);
-	showOnMapElement.className = 'icon-zoom pad-left-icon';
+	showOnMapElement.className = 'icon-pin addon-icon';
 	showOnMapElement.title = lang.show_on_map;
 	
 	if(additional) {
@@ -626,6 +701,41 @@
 	feature_clicked = feature;
 }
 
+function listFeatures(features) {
+	var div = document.createElement('div');
+	
+	addParaWithText(div, lang.select_feature);
+	
+	var feature, p, a, full_type, typeName;
+	for(var i = 0; i < features.length; i++) {
+		feature = features[i];
+		
+		p = document.createElement('p');
+		a = document.createElement('a');
+		p.appendChild(a);
+		a.addEventListener('click', function(feature) { return function() {
+			featureClicked(feature);
+		}}(feature));
+		
+		full_type = feature.getId().match(/^[a-z]+/)[0];
+		typeName = lang.types[full_type];
+		if(typeof typeName === 'undefined') {
+			typeName = '';
+		}
+		if(feature.get('vehicle_type')) {
+			typeName += ' ' + feature.get('vehicle_type').num;
+		}
+		
+		addElementWithText(a, 'span', typeName).className = 'small';
+		a.appendChild(document.createTextNode(' '));
+		addElementWithText(a, 'span', normalizeName(feature.get('name')));
+		
+		div.appendChild(p);
+	}
+	
+	return div;
+}
+
 function mapClicked(e) {
 	var point = e.coordinate;
 	var features = [];
@@ -637,41 +747,7 @@
 	var feature = features[0];
 	
 	if(features.length > 1) {
-		featureClicked();
-		
-		var div = document.createElement('div');
-		
-		addParaWithText(div, lang.select_feature);
-		
-		var p, a, full_type, typeName;
-		for(var i = 0; i < features.length; i++) {
-			feature = features[i];
-			
-			p = document.createElement('p');
-			a = document.createElement('a');
-			p.appendChild(a);
-			a.addEventListener('click', function(feature) { return function() {
-				featureClicked(feature);
-			}}(feature));
-			
-			full_type = feature.getId().match(/^[a-z]+/)[0];
-			typeName = lang.types[full_type];
-			if(typeof typeName === 'undefined') {
-				typeName = '';
-			}
-			if(feature.get('vehicle_type')) {
-				typeName += ' ' + feature.get('vehicle_type').num;
-			}
-			
-			addElementWithText(a, 'span', typeName).className = 'small';
-			a.appendChild(document.createTextNode(' '));
-			addElementWithText(a, 'span', normalizeName(feature.get('name')));
-			
-			div.appendChild(p);
-		}
-		
-		panel.show(div);
-		
+		panel.show(listFeatures(features));
 		return;
 	}
 	
@@ -720,6 +796,7 @@
 	}
 }
 
+
 function hash() {
 	if(ignore_hashchange) {
 		ignore_hashchange = false;
@@ -744,6 +821,9 @@
 		stopId = window.location.hash.substr(2,1) + 't' + window.location.hash.substr(3);
 	} else if(window.location.hash.match(/^#![sp][tb]-?[0-9]+$/)) {
 		stopId = window.location.hash.substr(2);
+	} else if(window.location.hash.match(/^#!f$/)) {
+		find.open(panel);
+		return;
 	}
 	
 	if(vehicleId) {
@@ -777,6 +857,7 @@
 
 function init() {
 	panel = new Panel(document.getElementById('panel'));
+	find = new Find();
 	
 	route_source = new ol.source.Vector({
 		features: [],
@@ -839,9 +920,9 @@
 	geolocation_layer = new ol.layer.Vector({
 		source: geolocation_source,
 	});
-	geolocation_button = document.querySelector('#track button');
+	geolocation_button = document.querySelector('#track');
 	if(!navigator.geolocation) {
-		geolocation_button.classList.add('hidden');
+		geolocation_button.remove();
 	}
 	
 	geolocation = new ol.Geolocation({projection: 'EPSG:3857'});
@@ -866,9 +947,11 @@
 	geolocation.on('error', function(error) {
 		fail(lang.error_location + ' ' + error.message);
 		trackingStop();
-		geolocation_button.classList.add('hidden');
+		geolocation_button.remove();
 	});
 	geolocation_button.addEventListener('click', trackingToggle);
+	
+	document.getElementById('find').addEventListener('click', find.open.bind(find, panel));
 	
 	var layers = [
 		new ol.layer.Tile({
@@ -904,7 +987,7 @@
 				element: fail_element,
 			}),
 			new ol.control.Control({
-				element: document.getElementById('track'),
+				element: document.getElementById('menu'),
 			}),
 		]),
 		loadTilesWhileAnimating: false,

--
Gitblit v1.9.1