Replace popup with right pane

 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);

 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);
    

 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',

 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',

 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;

 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>

 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