From aa6794276c6aafce2e636c2d4f79b0bc5ab9552f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Laura=20Kl=C3=BCnder?= Date: Fri, 21 Dec 2018 16:05:56 +0100 Subject: [PATCH] material icons workaround for android 4.3.3 and other old browsers --- src/c3nav/site/static/site/css/c3nav.scss | 2 +- src/c3nav/site/static/site/js/c3nav.js | 47 +- src/c3nav/static/material-icons/codepoints | 1029 ++++++++++++++++++++ 3 files changed, 1069 insertions(+), 9 deletions(-) create mode 100644 src/c3nav/static/material-icons/codepoints diff --git a/src/c3nav/site/static/site/css/c3nav.scss b/src/c3nav/site/static/site/css/c3nav.scss index fecc0b85..6eb883af 100644 --- a/src/c3nav/site/static/site/css/c3nav.scss +++ b/src/c3nav/site/static/site/css/c3nav.scss @@ -597,7 +597,7 @@ main.show-options #resultswrapper #route-options { position: absolute; top: 0; left: 1px; - content: "search"; + content: "\e8b6"; /* unicode code point for the "seach" ligature, so android 4.3.3 gets it */ color: $color-icon-light; -webkit-transition: color 150ms; -o-transition: color 150ms; diff --git a/src/c3nav/site/static/site/js/c3nav.js b/src/c3nav/site/static/site/js/c3nav.js index 8fb19009..06010eed 100644 --- a/src/c3nav/site/static/site/js/c3nav.js +++ b/src/c3nav/site/static/site/js/c3nav.js @@ -38,6 +38,7 @@ c3nav = { init_completed: false, init: function () { + c3nav.load_material_icons_if_needed(); c3nav.load_searchable_locations(); $('#messages').find('ul.messages li').each(function() { @@ -735,7 +736,7 @@ c3nav = { }, _build_location_html: function(location) { html = $('
') - .append($('').text(location.icon || 'place')) + .append($('').text(c3nav._map_material_icon(location.icon || 'place'))) .append($('').text(location.title)) .append($('').text(location.subtitle)).attr('data-id', location.id); html.attr('data-location', JSON.stringify(location)); @@ -747,7 +748,7 @@ c3nav = { c3nav._locationinput_reset_autocomplete(); elem.toggleClass('selected', !!location).toggleClass('empty', !location) .data('location', location).data('lastlocation', location).removeData('suggestion'); - elem.find('.icon').text(location ? (location.icon || 'place') : ''); + elem.find('.icon').text(location ? c3nav._map_material_icon(location.icon || 'place') : ''); elem.find('input').val(location ? location.title : '').removeData('origval'); elem.find('small').text(location ? location.subtitle : ''); }, @@ -1343,7 +1344,7 @@ c3nav = { c3nav._userLocationLayers[id].clearLayers(); } if (location) { - $('.locationinput .locate, .leaflet-control-user-location a').text('my_location'); + $('.locationinput .locate, .leaflet-control-user-location a').text(c3nav._map_material_icon('my_location')); var latlng = L.GeoJSON.coordsToLatLng(location.geometry.coordinates), layer = c3nav._userLocationLayers[location.level]; L.circleMarker(latlng, { @@ -1357,9 +1358,9 @@ c3nav = { fillOpacity: 1 }).addTo(layer); } else if (c3nav.hasLocationPermission()) { - $('.locationinput .locate, .leaflet-control-user-location a').text('location_searching'); + $('.locationinput .locate, .leaflet-control-user-location a').text(c3nav._map_material_icon('location_searching')); } else { - $('.locationinput .locate, .leaflet-control-user-location a').text('location_disabled'); + $('.locationinput .locate, .leaflet-control-user-location a').text(c3nav._map_material_icon('location_disabled')); } }, _goto_user_location_click: function (e) { @@ -1375,6 +1376,36 @@ c3nav = { c3nav._levelControl.setLevel(c3nav._current_user_location.level); c3nav.map.flyTo(L.GeoJSON.coordsToLatLng(c3nav._current_user_location.geometry.coordinates), 4, { duration: 1 }); } + }, + + _material_icons_codepoints: null, + load_material_icons_if_needed: function() { + // load material icons codepoint for android 4.3.3 and other heccing old browsers + var elem = document.createElement('span'); + elem.style.fontFeatureSettings = '"liga" 1'; + if (!elem.style.fontFeatureSettings) { + $.get('/static/material-icons/codepoints', c3nav._material_icons_loaded); + } + }, + _material_icons_loaded: function(data) { + var lines = data.split("\n"), + line, result = {}; + + for (var i=0;i