From 07c71449c320decb58070066f376313e3375130f Mon Sep 17 00:00:00 2001
From: Jacek Kowalski <Jacek@jacekk.info>
Date: Sun, 23 Apr 2017 21:31:36 +0000
Subject: [PATCH] Replace popup with right pane
---
index.js | 26 ------
map.js | 80 ++++++++++---------
common.js | 26 ++++++
lang_en.js | 4 +
map.html | 2
lang_pl.js | 4 +
map.css | 58 +++++++++++++-
7 files changed, 129 insertions(+), 71 deletions(-)
diff --git a/common.js b/common.js
index 1d91ce0..4ec77f3 100644
--- a/common.js
+++ b/common.js
@@ -144,6 +144,32 @@
}
}
+function displayVehicle(vehicleInfo) {
+ if(!vehicleInfo) return document.createTextNode('');
+
+ var span = document.createElement('span');
+ span.className = 'vehicleInfo';
+
+ var floor_type = '';
+ if(vehicleInfo.low == 0) {
+ setText(span, lang.high_floor_sign);
+ floor_type = lang.high_floor;
+ } else if(vehicleInfo.low == 1) {
+ setText(span, lang.partially_low_floor_sign);
+ floor_type = lang.partially_low_floor;
+ } else if(vehicleInfo.low == 2) {
+ setText(span, lang.low_floor_sign);
+ floor_type = lang.low_floor;
+ }
+
+ span.title = lang.tram_type_pattern
+ .replace('$num', vehicleInfo.num)
+ .replace('$type', vehicleInfo.type)
+ .replace('$floor', floor_type);
+
+ return span;
+}
+
// Element mangling
function deleteChildren(element) {
while(element.lastChild) element.removeChild(element.lastChild);
diff --git a/index.js b/index.js
index 551d035..de7a2c8 100644
--- a/index.js
+++ b/index.js
@@ -87,32 +87,6 @@
return lang.time_minutes_prefix + ((actual.getTime() - planned.getTime()) / 1000 / 60) + lang.time_minutes_suffix;
}
-function displayVehicle(vehicleInfo) {
- if(!vehicleInfo) return document.createTextNode('');
-
- var span = document.createElement('span');
- span.className = 'vehicleInfo';
-
- var floor_type = '';
- if(vehicleInfo.low == 0) {
- setText(span, lang.high_floor_sign);
- floor_type = lang.high_floor;
- } else if(vehicleInfo.low == 1) {
- setText(span, lang.partially_low_floor_sign);
- floor_type = lang.partially_low_floor;
- } else if(vehicleInfo.low == 2) {
- setText(span, lang.low_floor_sign);
- floor_type = lang.low_floor;
- }
-
- span.title = lang.tram_type_pattern
- .replace('$num', vehicleInfo.num)
- .replace('$type', vehicleInfo.type)
- .replace('$floor', floor_type);
-
- return span;
-}
-
function fail(message, more) {
if(times_timer) clearTimeout(times_timer);
diff --git a/lang_en.js b/lang_en.js
index e527968..7dce3fc 100644
--- a/lang_en.js
+++ b/lang_en.js
@@ -38,6 +38,10 @@
time_minutes_ago_prefix: '',
time_minutes_ago_suffix: ' min ago',
+ type_vehicle: 'Vehicle',
+ type_stop: 'Stop',
+ type_stoppoint: 'Stop point',
+
tram_type_pattern: '$num $type ($floor)',
high_floor: 'high floor',
high_floor_sign: '\u2010\u00A0',
diff --git a/lang_pl.js b/lang_pl.js
index f343603..ddb1f30 100644
--- a/lang_pl.js
+++ b/lang_pl.js
@@ -38,6 +38,10 @@
time_minutes_ago_prefix: '',
time_minutes_ago_suffix: ' min temu',
+ type_vehicle: 'Pojazd',
+ type_stop: 'Przystanek',
+ type_stoppoint: 'Punkt przystankowy',
+
tram_type_pattern: '$num $type ($floor)',
high_floor: 'wysokopodłogowy',
high_floor_sign: '\u2010\u00A0',
diff --git a/map.css b/map.css
index e497aec..a6e04f6 100644
--- a/map.css
+++ b/map.css
@@ -1,25 +1,71 @@
html, body, #map {
- width: 100%;
- height: 100%;
margin: 0;
font-family: sans-serif;
+ overflow: hidden;
+}
+
+#map {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+
+#map .ol-attribution {
+ left: 0;
+ right: auto;
}
#popup {
color: black;
background: white;
padding: 5px;
- border: 1px solid black;
- border-radius: 10px;
- font-size: 12px;
+ border-left: 1px solid black;
+ font-size: 14px;
+
+ position: absolute;
+ width: 300px;
+ right: -315px;
+ top: 0;
+ bottom: 0;
+
+ transition: right .4s;
+ transition: width .4s;
+
+ opacity: .8;
+}
+
+#popup.show {
+ right: 0;
+}
+
+@media (max-width: 600px) {
+ #popup {
+ width: 90%;
+ right: -100%;
+ }
+
+ #popup.show {
+ right: 0%;
+ }
+}
+
+#popup .type {
+ padding-bottom: 0;
+ color: #444;
+ font-size: 80%;
}
#popup p {
margin: 0;
padding: 5px;
}
-#popup .bold {
+#popup .name {
font-weight: bold;
}
+#popup .vehicleInfo {
+ font-size: 21px;
+}
#title {
top: .5em;
diff --git a/map.html b/map.html
index a1cf93c..ab987b6 100644
--- a/map.html
+++ b/map.html
@@ -11,8 +11,8 @@
<div id="map">
<div id="title" class="ol-unselectable ol-control"><a href="/">TTSS Kraków</a></div>
<div id="fail" class="ol-unselectable ol-control"></div>
-<div id="popup"></div>
</div>
+<div id="popup"></div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
<script src="https://openlayers.org/en/v4.1.0/build/ol.js" integrity="sha384-FkrvSU9IkctjoF6eTvw82jZvg4Rn04zw5X2nCQnYF+vT8IbAY+DJ23IIoaVDtiMe" crossorigin="anonymous"></script>
diff --git a/map.js b/map.js
index f19bd45..fb460e8 100644
--- a/map.js
+++ b/map.js
@@ -14,10 +14,10 @@
var stop_points_source = null;
var stop_points_layer = null;
+var feature_id = null;
+
var map = null;
-var popup_feature_id = null;
var popup_element = document.getElementById('popup');
-var popup = null;
var fail_element = document.getElementById('fail');
var ignore_hashchange = false;
@@ -42,20 +42,8 @@
}
}
-function popupHide() {
- popup.setPosition(undefined);
- popup_feature_id = null;
-}
-
-function popupShow(coordinates, id) {
- popup.setPosition(coordinates);
- if(id) {
- popup_feature_id = id;
- }
-}
-
function getGeometry(object) {
- return new ol.geom.Point(ol.proj.fromLonLat([object.longitude / 3600000.0, object.latitude / 3600000.0]))
+ return new ol.geom.Point(ol.proj.fromLonLat([object.longitude / 3600000.0, object.latitude / 3600000.0]));
}
function updateVehicles() {
@@ -77,8 +65,8 @@
if(vehicle.isDeleted) {
if(vehicle_feature) {
vehicles_source.removeFeature(vehicle_feature);
- if(popup_feature_id == vehicle_feature.getId()) {
- popupHide();
+ if(feature_id == vehicle_feature.getId()) {
+ featureClicked();
}
}
continue;
@@ -128,10 +116,6 @@
} else {
vehicle_feature.setProperties(vehicle);
vehicle_feature.getStyle().getImage().setRotation(Math.PI * parseFloat(vehicle.heading) / 180.0);
-
- if(popup_feature_id == vehicle_feature.getId()) {
- popupShow(vehicle_feature.getGeometry().getCoordinates());
- }
}
}
@@ -193,7 +177,9 @@
function featureClicked(feature) {
if(!feature) {
- popupHide();
+ feature_id = null;
+
+ $(popup_element).removeClass('show');
ignore_hashchange = true;
window.location.hash = '';
@@ -205,20 +191,49 @@
deleteChildren(popup_element);
- addParaWithText(popup_element, feature.get('name')).className = 'bold';
+ var type;
+ var name = feature.get('name');
+ var additional;
+
switch(feature.getId().substr(0, 1)) {
case 'v':
- var vehicle_type = parseVehicle(feature.get('id'));
- if(vehicle_type) {
- addParaWithText(popup_element, vehicle_type.num + ' ' + vehicle_type.type);
+ type = lang.type_vehicle;
+
+ if(!feature.get('vehicle_type')) {
+ break;
}
+
+ var span = displayVehicle(feature.get('vehicle_type'));
+
+ additional = document.createElement('p');
+ setText(additional, span.title);
+ additional.insertBefore(span, additional.firstChild);
break;
+ case 's':
+ type = lang.type_stop;
+ break;
+ case 'p':
+ type = lang.type_stoppoint;
+ break;
+ }
+
+ addParaWithText(popup_element, type).className = 'type';
+ addParaWithText(popup_element, name).className = 'name';
+
+ if(additional) {
+ popup_element.appendChild(additional);
}
ignore_hashchange = true;
window.location.hash = '#!' + feature.getId();
- popupShow(coordinates, feature.getId());
+ map.getView().animate({
+ center: feature.getGeometry().getCoordinates(),
+ });
+
+ $(popup_element).addClass('show');
+
+ feature_id = feature.getId();
}
function hash() {
@@ -260,9 +275,6 @@
}
featureClicked(feature);
- if(feature) {
- map.getView().setCenter(feature.getGeometry().getCoordinates());
- }
}
function init() {
@@ -298,13 +310,6 @@
source: vehicles_source,
});
- popup = new ol.Overlay({
- element: popup_element,
- positioning: 'bottom-center',
- stopEvent: false,
- offset: [0, -12]
- });
-
map = new ol.Map({
target: 'map',
layers: [
@@ -315,7 +320,6 @@
stop_points_layer,
vehicles_layer,
],
- overlays: [popup],
view: new ol.View({
center: ol.proj.fromLonLat([19.94, 50.06]),
zoom: 13
--
Gitblit v1.9.1