From 4bf9a457844e360187dc2b37bf164a3b3a58e73a Mon Sep 17 00:00:00 2001 From: Jacek Kowalski <Jacek@jacekk.info> Date: Sun, 30 Aug 2020 20:40:28 +0000 Subject: [PATCH] Fix right panel on Safari browser (overflow: auto + position: fixed) --- map.js | 41 ++++++++++++++++++++++++++++------------- 1 files changed, 28 insertions(+), 13 deletions(-) diff --git a/map.js b/map.js index bd9765b..85542e9 100644 --- a/map.js +++ b/map.js @@ -82,22 +82,27 @@ this._element = element; this._element.classList.add('panel'); - this._hide = addParaWithText(this._element, '▶'); + this._hide = addElementWithText(this._element, 'a', '▶'); this._hide.title = lang.action_collapse; this._hide.className = 'hide'; this._hide.addEventListener('click', this.toggleExpanded.bind(this)); - this._close = addParaWithText(this._element, '×'); + this._container = document.createElement('div'); + this._container.className = 'panel-container'; + + this._close = addElementWithText(this._container, 'a', '×'); this._close.title = lang.action_close; this._close.className = 'close'; this._close.addEventListener('click', this.close.bind(this)); this._content = document.createElement('div'); - this._element.appendChild(this._content); -}; + this._container.appendChild(this._content); + this._element.appendChild(this._container); +} Panel.prototype = { _element: null, _hide: null, + _container: null, _close: null, _content: null, @@ -179,6 +184,11 @@ var query = this.input.value.toUpperCase(); if(query === this.query) return; this.query = query; + + if(query === '') { + deleteChildren(this.results); + return; + } var features = []; stops_type.forEach(function(stop_type) { @@ -271,11 +281,12 @@ fill = '#922'; } - var image = '<svg xmlns="http://www.w3.org/2000/svg" height="30" width="20"><polygon points="10,0 20,23 0,23" style="fill:'+fill+';stroke:'+color_type+';stroke-width:3" /></svg>'; + var image = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="30"><polygon points="10,0 20,23 0,23" style="fill:'+fill+';stroke:'+color_type+';stroke-width:3"/></svg>'; vehicle.setStyle(new ol.style.Style({ image: new ol.style.Icon({ src: 'data:image/svg+xml;base64,' + btoa(image), + imgSize: [20,30], rotation: Math.PI * parseFloat(vehicle.get('heading') ? vehicle.get('heading') : 0) / 180.0, }), text: new ol.style.Text({ @@ -344,7 +355,7 @@ if(vehicle_feature) { vehicles_source[prefix].removeFeature(vehicle_feature); if(feature_clicked && feature_clicked.getId() === vehicle_feature.getId()) { - featureClicked(); + panel.close(); } } continue; @@ -586,6 +597,8 @@ } // Vehicle else if(ttss_types.includes(type)) { + styleVehicle(feature, true); + var span = displayVehicle(feature.get('vehicle_type')); additional = document.createElement('p'); @@ -601,8 +614,6 @@ vehicleTable(feature, tbody); vehiclePath(feature); - - styleVehicle(feature, true); } // Stop or stop point else if(['s', 'p'].includes(type)) { @@ -669,7 +680,7 @@ })}, 10); }; showOnMapElement.addEventListener('click', showOnMapFunction); - showOnMapElement.className = 'icon-pin addon-icon'; + showOnMapElement.className = 'icon icon-pin'; showOnMapElement.title = lang.show_on_map; if(additional) { @@ -703,6 +714,11 @@ function listFeatures(features) { var div = document.createElement('div'); + + if(features.length === 0) { + addParaWithText(div, lang.no_results); + return div; + } addParaWithText(div, lang.select_feature); @@ -747,7 +763,6 @@ var feature = features[0]; if(features.length > 1) { - featureClicked(); panel.show(listFeatures(features)); return; } @@ -901,8 +916,6 @@ vehicles_last_update[type] = 0; }); - ol.style.IconImageCache.shared.setSize(512); - geolocation_feature = new ol.Feature({ name: '', style: new ol.style.Style({ @@ -956,7 +969,9 @@ var layers = [ new ol.layer.Tile({ - source: new ol.source.OSM(), + source: new ol.source.OSM({ + url: 'https://tiles.ttss.pl/{z}/{x}/{y}.png', + }), }), route_layer, geolocation_layer, -- Gitblit v1.9.1