drop legacy builds, unneeded polyfills, document drop of IE11 support

This commit is contained in:
Martin Raifer
2022-02-02 09:56:10 +01:00
parent b4228c4220
commit 632e24137a
16 changed files with 45 additions and 143 deletions
+5 -5
View File
@@ -30,14 +30,14 @@ should fallback gracefully without breaking other aspects of the app.
This table covers high-level compatibility, with individual features to be detailed
elsewhere in this document.
| | Icon | Browser | Notes | Issues |
|---|---|---|---|---|
| | Icon | Browser | Notes |
|---|---|---|---|
| ✅ | ![chrome logo] | [Chrome](https://en.wikipedia.org/wiki/Google_Chrome) | |
| ✅* | ![firefox logo] | [Firefox](https://en.wikipedia.org/wiki/Firefox) | \*Minor known issues | [#7132](https://github.com/openstreetmap/iD/issues/7132) |
| ✅ | ![firefox logo] | [Firefox](https://en.wikipedia.org/wiki/Firefox) | |
| ✅ | ![safari logo] | [Safari](https://en.wikipedia.org/wiki/Safari_(web_browser)) | |
| 🟩 | ![opera logo] | [Opera](https://en.wikipedia.org/wiki/Opera_(web_browser)) | |
| 🟩 | ![edge logo] | [Edge](https://en.wikipedia.org/wiki/Microsoft_Edge) | |
| 🟠 | ![ie logo] | [Internet Explorer](https://en.wikipedia.org/wiki/Internet_Explorer) | IE has been discontinued, but [IE 11 is still maintained](https://docs.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge). iD [polyfills](https://en.wikipedia.org/wiki/Polyfill_(programming)) modern web features for IE 11 where possible, but full support should not be expected |
| | ![ie logo] | [Internet Explorer](https://en.wikipedia.org/wiki/Internet_Explorer) | IE has been discontinued, but [IE 11 is still maintained](https://docs.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge). iD uses features of modern web standard which are not supported by Internet Explorer. |
| ✅ | ![webkit logo] | [iOS](https://en.wikipedia.org/wiki/IOS) browsers | All browsers on iOS (e.g. Safari, Chrome, Firefox, Edge) use the [WebKit](https://en.wikipedia.org/wiki/WebKit) engine and should thus have equivalent support |
| 🟩 | ![android logo] | [Android](https://en.wikipedia.org/wiki/Android_(operating_system)) browsers | Browsers on Android can use their own engines, so support may vary, but there are currently no known issues |
| 🟩 | 🌐 | Others | iD should run on any browser implementing [modern web standards](https://www.w3.org/standards/). Hardware factors such as screen size may affect usability |
@@ -74,7 +74,7 @@ It's impractical to ensure every single input device works as expected, so the t
| 🟩 | ![apple adb mouse] | Single-button [mouse](https://en.wikipedia.org/wiki/Computer_mouse) | Primary click (e.g. left-click) can be used for all pointer interactions. Long-clicking on map features opens the edit menu |
| 🟩 | ![ibm mouse] | Multi-button mouse | Secondary click (e.g. right-click) can be used on map features to open the edit menu. Middle click, etc., are not needed by iD but are passed through to the browser |
| 🟩 | [![magic mouse]](https://en.wikipedia.org/wiki/Magic_Mouse) | Multi-touch mouse | 2D scrolling in the map is treated as panning, not zooming |
| 🟠 | ![vertical scroll wheel] | Vertical [scroll wheel](https://en.wikipedia.org/wiki/Scroll_wheel) | Should zoom the map in and out | [#5550](https://github.com/openstreetmap/iD/issues/5550) |
| 🟠 | ![vertical scroll wheel] | Vertical [scroll wheel](https://en.wikipedia.org/wiki/Scroll_wheel) | Should zoom the map in and out | [#5550](https://github.com/openstreetmap/iD/issues/5550) |
| ❌ | | Horizontal scroll wheel | Currently does nothing in the map | [#7134](https://github.com/openstreetmap/iD/issues/7134) |
| 🤷 | [![apple mighty mouse]](https://en.wikipedia.org/wiki/Apple_Mighty_Mouse) | Scroll ball | Works like combined vertical/horizontal scroll wheels |
| 🟩 | 🖲 | [Trackball](https://en.wikipedia.org/wiki/Trackball) | |
+3
View File
@@ -41,10 +41,13 @@ _Breaking developer changes, which may affect downstream projects or sites that
# Unreleased
#### :newspaper: News
* Drop legacy support for Internet Explorer 11 ([#8811])
#### :hammer: Development
* Switch build system to [esbuild](https://esbuild.github.io/) for much faster builds ([#8774], thanks [@ mbrzakovic] and [@bhousel])
[#8774]: https://github.com/openstreetmap/iD/pull/8774
[#8811]: https://github.com/openstreetmap/iD/issues/8811
# 2.20.4
##### 2022-Feb-03
+2 -4
View File
@@ -322,9 +322,7 @@ instead of surprising us with a pull request.
### JavaScript
Legacy iD code was written with ES5 syntax, however we now support most ES6 syntax via [Rollup.js](https://rollupjs.org/guide/en) and the [Rollup Bublé plugin](https://github.com/rollup/plugins/tree/master/packages/buble). You can find details about Bublé [here](https://buble.surge.sh/guide/).
In order to continue to support older browsers like IE11 and our PhantomJS-based test runner, we also include the [browser-polyfills](https://github.com/tiagomapmarques/browser-polyfills#what-does-it-have) package.
iD code was initially written with ES5 syntax, however we do now develop using ES6 syntax.
We mostly follow the Airbnb style guide for JavaScript:
- [Modern ES6](https://github.com/airbnb/javascript)
@@ -360,7 +358,7 @@ Just like HTML and JavaScript, 4 space soft tabs always.
```
We write vanilla CSS with no preprocessing step. Since iD targets modern browsers,
(Chrome, Firefox, Safari, Opera, IE11, and Edge) feel free to use newer features wisely.
(Chrome, Firefox, Safari, Opera, and Edge) feel free to use newer features wisely.
### Tests
+1 -1
View File
@@ -8,7 +8,7 @@
* It's intentionally simple. It lets you do the most basic tasks while
not breaking other people's data.
* It supports all popular modern desktop browsers: Chrome, Firefox, Safari,
Opera, Edge, and IE11.
Opera, and Edge.
* iD is not yet designed for mobile browsers, but this is something we hope to add!
* Data is rendered with [d3.js](https://d3js.org/).
-24
View File
@@ -1,24 +0,0 @@
import esbuild from 'esbuild';
import babel from 'esbuild-plugin-babel';
esbuild
.build({
minify: true,
bundle: true,
sourcemap: true,
entryPoints: ['./modules/id.js'],
legalComments: 'none',
logLevel: 'info',
outfile: 'dist/iD.legacy.min.js',
target: 'es5',
plugins: [babel({
filter: /.*/,
namespace: '',
babelHelpers: 'bundled',
// avoid circular dependencies due to `useBuiltIns: usage` option
exclude: [/\/core-js\//],
sourceType: 'unambiguous',
})],
})
.catch(() => process.exit(1));
-22
View File
@@ -1,22 +0,0 @@
import esbuild from 'esbuild';
import babel from 'esbuild-plugin-babel';
esbuild
.build({
bundle: true,
sourcemap: true,
entryPoints: ['./modules/id.js'],
legalComments: 'none',
logLevel: 'info',
outfile: 'dist/iD.legacy.js',
target: 'es5',
plugins: [babel({
filter: /.*/,
namespace: '',
babelHelpers: 'bundled',
// avoid circular dependencies due to `useBuiltIns: usage` option
exclude: [/\/core-js\//],
sourceType: 'unambiguous',
})],
})
.catch(() => process.exit(1));
+2 -4
View File
@@ -30,16 +30,14 @@
newScript.type = 'text/javascript';
newScript.onload = checkScript;
newScript.onerror = checkScript;
var isIE11 = !!(navigator.userAgent.match(/Trident/) && !navigator.userAgent.match(/MSIE/));
newScript.src = isIE11 ? 'iD.legacy.min.js' : 'iD.min.js';
newScript.src = 'iD.min.js';
document.getElementsByTagName('head')[0].appendChild(newScript);
function checkScript() {
if (typeof iD === 'undefined' || !iD.utilDetect().support) {
container.innerHTML = 'Sorry, your browser is not currently supported. Please use Potlatch 2 to edit the map.';
container.innerHTML = 'Sorry, your browser is not currently supported. Please use another <a href="https://github.com/openstreetmap/iD#basics">browser</a> or <a href="https://wiki.openstreetmap.org/wiki/Editors">editor</a> to contribute to the map.';
container.style.padding = '20px';
} else {
+2 -4
View File
@@ -30,16 +30,14 @@
newScript.type = 'text/javascript';
newScript.onload = checkScript;
newScript.onerror = checkScript;
var isIE11 = !!(navigator.userAgent.match(/Trident/) && !navigator.userAgent.match(/MSIE/));
newScript.src = isIE11 ? 'dist/iD.legacy.js' : 'dist/iD.js';
newScript.src = 'dist/iD.js';
document.getElementsByTagName('head')[0].appendChild(newScript);
function checkScript() {
if (typeof iD === 'undefined' || !iD.utilDetect().support) {
container.innerHTML = 'Sorry, your browser is not currently supported. Please use Potlatch 2 to edit the map.';
container.innerHTML = 'Sorry, your browser is not currently supported. Please use another <a href="https://github.com/openstreetmap/iD#basics">browser</a> or <a href="https://wiki.openstreetmap.org/wiki/Editors">editor</a> to contribute to the map.';
container.style.padding = '20px';
} else {
+15 -23
View File
@@ -10,7 +10,6 @@ import { geoExtent, geoMetersToOffset, geoOffsetToMeters} from '../geo';
import { rendererBackgroundSource } from './background_source';
import { rendererTileLayer } from './tile_layer';
import { utilQsString, utilStringQs } from '../util';
import { utilDetect } from '../util/detect';
import { utilRebind } from '../util/rebind';
@@ -18,7 +17,6 @@ let _imageryIndex = null;
export function rendererBackground(context) {
const dispatch = d3_dispatch('change');
const detected = utilDetect();
const baseLayer = rendererTileLayer(context).projection(context.projection);
let _checkedBlocklists = [];
let _isValid = true;
@@ -110,20 +108,18 @@ export function rendererBackground(context) {
let baseFilter = '';
if (detected.cssfilters) {
if (_brightness !== 1) {
baseFilter += ` brightness(${_brightness})`;
}
if (_contrast !== 1) {
baseFilter += ` contrast(${_contrast})`;
}
if (_saturation !== 1) {
baseFilter += ` saturate(${_saturation})`;
}
if (_sharpness < 1) { // gaussian blur
const blur = d3_interpolateNumber(0.5, 5)(1 - _sharpness);
baseFilter += ` blur(${blur}px)`;
}
if (_brightness !== 1) {
baseFilter += ` brightness(${_brightness})`;
}
if (_contrast !== 1) {
baseFilter += ` contrast(${_contrast})`;
}
if (_saturation !== 1) {
baseFilter += ` saturate(${_saturation})`;
}
if (_sharpness < 1) { // gaussian blur
const blur = d3_interpolateNumber(0.5, 5)(1 - _sharpness);
baseFilter += ` blur(${blur}px)`;
}
let base = selection.selectAll('.layer-background')
@@ -134,11 +130,7 @@ export function rendererBackground(context) {
.attr('class', 'layer layer-background')
.merge(base);
if (detected.cssfilters) {
base.style('filter', baseFilter || null);
} else {
base.style('opacity', _brightness);
}
base.style('filter', baseFilter || null);
let imagery = base.selectAll('.layer-imagery')
@@ -153,7 +145,7 @@ export function rendererBackground(context) {
let maskFilter = '';
let mixBlendMode = '';
if (detected.cssfilters && _sharpness > 1) { // apply unsharp mask
if (_sharpness > 1) { // apply unsharp mask
mixBlendMode = 'overlay';
maskFilter = 'saturate(0) blur(3px) invert(1)';
@@ -165,7 +157,7 @@ export function rendererBackground(context) {
}
let mask = base.selectAll('.layer-unsharp-mask')
.data(detected.cssfilters && _sharpness > 1 ? [0] : []);
.data(_sharpness > 1 ? [0] : []);
mask.exit()
.remove();
+1 -7
View File
@@ -132,15 +132,9 @@ export function rendererBackgroundSource(data) {
if (source.type === 'wms') {
var tileToProjectedCoords = (function(x, y, z) {
//polyfill for IE11, PhantomJS
var sinh = Math.sinh || function(x) {
var y = Math.exp(x);
return (y - 1 / y) / 2;
};
var zoomSize = Math.pow(2, z);
var lon = x / zoomSize * Math.PI * 2 - Math.PI;
var lat = Math.atan(sinh(Math.PI * (1 - 2 * y / zoomSize)));
var lat = Math.atan(Math.sinh(Math.PI * (1 - 2 * y / zoomSize)));
switch (source.projection) {
case 'EPSG:4326':
+4 -14
View File
@@ -9,7 +9,6 @@ import { JXON } from '../util/jxon';
import { geoExtent } from '../geo';
import { osmChangeset } from '../osm';
import { svgIcon } from '../svg/icon';
import { utilDetect } from '../util/detect';
import {
utilEntityOrMemberSelector,
@@ -81,7 +80,6 @@ export function uiConflicts(context) {
// Download changes link
var detected = utilDetect();
var changeset = new osmChangeset();
delete changeset.id; // Export without changeset_id
@@ -94,18 +92,10 @@ export function uiConflicts(context) {
.append('a')
.attr('class', 'download-changes');
if (detected.download) { // All except IE11 and Edge
linkEnter // download the data as a file
.attr('href', window.URL.createObjectURL(blob))
.attr('download', fileName);
} else { // IE11 and Edge
linkEnter // open data uri in a new tab
.attr('target', '_blank')
.on('click.download', function() {
navigator.msSaveBlob(blob, fileName);
});
}
// download the data as a file
linkEnter
.attr('href', window.URL.createObjectURL(blob))
.attr('download', fileName);
linkEnter
.call(svgIcon('#iD-icon-load', 'inline'))
@@ -6,7 +6,6 @@ import { prefs } from '../../core/preferences';
import { t, localizer } from '../../core/localizer';
import { svgIcon } from '../../svg/icon';
import { uiSection } from '../section';
import { utilDetect } from '../../util/detect';
export function uiSectionBackgroundDisplayOptions(context) {
@@ -15,14 +14,11 @@ export function uiSectionBackgroundDisplayOptions(context) {
.label(t.html('background.display_options'))
.disclosureContent(renderDisclosureContent);
var _detected = utilDetect();
var _storedOpacity = prefs('background-opacity');
var _minVal = 0;
var _maxVal = _detected.cssfilters ? 3 : 1;
var _maxVal = 3;
var _sliders = _detected.cssfilters
? ['brightness', 'contrast', 'saturation', 'sharpness']
: ['brightness'];
var _sliders = ['brightness', 'contrast', 'saturation', 'sharpness'];
var _options = {
brightness: (_storedOpacity !== null ? (+_storedOpacity) : 1),
+3 -15
View File
@@ -7,7 +7,6 @@ import { JXON } from '../../util/jxon';
import { actionDiscardTags } from '../../actions/discard_tags';
import { osmChangeset } from '../../osm';
import { svgIcon } from '../../svg/icon';
import { utilDetect } from '../../util/detect';
import { uiSection } from '../section';
import {
@@ -18,8 +17,6 @@ import {
export function uiSectionChanges(context) {
var detected = utilDetect();
var _discardTags = {};
fileFetcher.get('discarded')
.then(function(d) { _discardTags = d; })
@@ -116,18 +113,9 @@ export function uiSectionChanges(context) {
.append('a')
.attr('class', 'download-changes');
if (detected.download) { // All except IE11 and Edge
linkEnter // download the data as a file
.attr('href', window.URL.createObjectURL(blob))
.attr('download', fileName);
} else { // IE11 and Edge
linkEnter // open data uri in a new tab
.attr('target', '_blank')
.on('click.download', function() {
navigator.msSaveBlob(blob, fileName);
});
}
linkEnter
.attr('href', window.URL.createObjectURL(blob))
.attr('download', fileName);
linkEnter
.call(svgIcon('#iD-icon-load', 'inline'))
+1 -1
View File
@@ -45,7 +45,7 @@ export function uiSettingsCustomData(context) {
.attr('class', 'field-file')
.attr('type', 'file')
.attr('accept', '.gpx,.kml,.geojson,.json,application/gpx+xml,application/vnd.google-earth.kml+xml,application/geo+json,application/json')
.property('files', _currSettings.fileList) // works for all except IE11
.property('files', _currSettings.fileList)
.on('change', function(d3_event) {
var files = d3_event.target.files;
if (files && files.length) {
+1 -3
View File
@@ -52,15 +52,13 @@ export function utilDetect(refresh) {
if (_detected.browser.toLowerCase() === 'msie') {
_detected.ie = true;
_detected.browser = 'Internet Explorer';
_detected.support = parseFloat(_detected.version) >= 11;
_detected.support = false;
} else {
_detected.ie = false;
_detected.support = true;
}
_detected.filedrop = (window.FileReader && 'ondrop' in window);
_detected.download = !(_detected.ie || _detected.browser.toLowerCase() === 'edge');
_detected.cssfilters = !(_detected.ie || _detected.browser.toLowerCase() === 'edge');
/* Platform */
+3 -10
View File
@@ -12,20 +12,18 @@
],
"license": "ISC",
"scripts": {
"all": "run-s clean build build:legacy dist",
"all": "run-s clean build dist",
"build": "run-s build:css build:data build:modern",
"build:css": "node scripts/build_css.js",
"build:data": "shx mkdir -p dist/data && node scripts/build_data.js",
"build:stats": "esbuild-visualizer --metadata dist/esbuild.json --exclude *.png --filename docs/statistics.html",
"build:modern": "node config/esbuild.config.modern.mjs",
"build:modern:watch": "node config/esbuild.config.modern.mjs --watch",
"build:legacy": "node config/esbuild.config.legacy.mjs",
"clean": "shx rm -f dist/esbuild.json dist/*.js dist/*.map dist/*.css dist/img/*.svg",
"dist": "run-p dist:**",
"dist:mapillary": "shx mkdir -p dist/mapillary-js && shx cp -R node_modules/mapillary-js/dist/* dist/mapillary-js/",
"dist:pannellum": "shx mkdir -p dist/pannellum-streetside && shx cp -R node_modules/pannellum/build/* dist/pannellum-streetside/",
"dist:min:modern": "node config/esbuild.config.modern-min.mjs",
"dist:min:legacy": "node config/esbuild.config.legacy-min.mjs",
"dist:svg:iD": "svg-sprite --symbol --symbol-dest . --shape-id-generator \"iD-%s\" --symbol-sprite dist/img/iD-sprite.svg \"svg/iD-sprite/**/*.svg\"",
"dist:svg:community": "svg-sprite --symbol --symbol-dest . --shape-id-generator \"community-%s\" --symbol-sprite dist/img/community-sprite.svg node_modules/osm-community-index/dist/img/*.svg",
"dist:svg:fa": "svg-sprite --symbol --symbol-dest . --symbol-sprite dist/img/fa-sprite.svg svg/fontawesome/*.svg",
@@ -70,9 +68,6 @@
"which-polygon": "2.2.0"
},
"devDependencies": {
"@babel/core": "^7.15.8",
"@babel/plugin-transform-runtime": "^7.15.8",
"@babel/preset-env": "^7.15.6",
"@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-brands-svg-icons": "~5.15.1",
"@fortawesome/free-regular-svg-icons": "~5.15.1",
@@ -80,7 +75,6 @@
"@ideditor/temaki": "~5.0.0",
"@mapbox/maki": "^6.0.0",
"autoprefixer": "^10.0.1",
"babel-plugin-inline-json-import": "^0.3.2",
"btoa": "^1.2.1",
"chai": "^4.3.4",
"cldr-core": "37.0.0",
@@ -90,7 +84,6 @@
"d3": "~6.6.0",
"editor-layer-index": "github:osmlab/editor-layer-index#gh-pages",
"esbuild": "^0.14.17",
"esbuild-plugin-babel": "^0.2.3",
"esbuild-visualizer": "^0.3.1",
"eslint": "^8.8.0",
"fetch-mock": "^9.11.0",
@@ -125,9 +118,9 @@
"vparse": "~1.1.0"
},
"engines": {
"node": ">=10"
"node": ">=12"
},
"browserslist": [
"> 0.2%, last 6 major versions, Firefox ESR, IE 11, maintained node versions"
"> 0.2%, last 6 major versions, Firefox ESR, maintained node versions"
]
}