diff --git a/ACCESSIBILITY.md b/ACCESSIBILITY.md index dba830327..b48557f01 100644 --- a/ACCESSIBILITY.md +++ b/ACCESSIBILITY.md @@ -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) | | diff --git a/CHANGELOG.md b/CHANGELOG.md index 31286f2e0..eedfc202f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 848a03b59..9695a3885 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -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 diff --git a/README.md b/README.md index 7f30dd011..7eca06579 100644 --- a/README.md +++ b/README.md @@ -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/). diff --git a/config/esbuild.config.legacy-min.mjs b/config/esbuild.config.legacy-min.mjs deleted file mode 100644 index e2e2f750b..000000000 --- a/config/esbuild.config.legacy-min.mjs +++ /dev/null @@ -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)); - diff --git a/config/esbuild.config.legacy.mjs b/config/esbuild.config.legacy.mjs deleted file mode 100644 index 0fd823911..000000000 --- a/config/esbuild.config.legacy.mjs +++ /dev/null @@ -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)); diff --git a/dist/index.html b/dist/index.html index d49cd996c..d206b8a3c 100644 --- a/dist/index.html +++ b/dist/index.html @@ -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 browser or editor to contribute to the map.'; container.style.padding = '20px'; } else { diff --git a/index.html b/index.html index 2135e3870..6b394ede8 100644 --- a/index.html +++ b/index.html @@ -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 browser or editor to contribute to the map.'; container.style.padding = '20px'; } else { diff --git a/modules/renderer/background.js b/modules/renderer/background.js index 1712f2bcc..b293c6e5f 100644 --- a/modules/renderer/background.js +++ b/modules/renderer/background.js @@ -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(); diff --git a/modules/renderer/background_source.js b/modules/renderer/background_source.js index 26a1780ef..1e5adce1f 100644 --- a/modules/renderer/background_source.js +++ b/modules/renderer/background_source.js @@ -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': diff --git a/modules/ui/conflicts.js b/modules/ui/conflicts.js index 103efd837..7ae7b4c52 100644 --- a/modules/ui/conflicts.js +++ b/modules/ui/conflicts.js @@ -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')) diff --git a/modules/ui/sections/background_display_options.js b/modules/ui/sections/background_display_options.js index 017103ce1..1d4a49f5f 100644 --- a/modules/ui/sections/background_display_options.js +++ b/modules/ui/sections/background_display_options.js @@ -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), diff --git a/modules/ui/sections/changes.js b/modules/ui/sections/changes.js index 81459ca0a..77d3b37ed 100644 --- a/modules/ui/sections/changes.js +++ b/modules/ui/sections/changes.js @@ -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')) diff --git a/modules/ui/settings/custom_data.js b/modules/ui/settings/custom_data.js index 237a10a4e..29a1d83d2 100644 --- a/modules/ui/settings/custom_data.js +++ b/modules/ui/settings/custom_data.js @@ -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) { diff --git a/modules/util/detect.js b/modules/util/detect.js index 974e682a3..93a194fbf 100644 --- a/modules/util/detect.js +++ b/modules/util/detect.js @@ -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 */ diff --git a/package.json b/package.json index 432f86976..10fe24291 100644 --- a/package.json +++ b/package.json @@ -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" ] } \ No newline at end of file