schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-28 17:31:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #518 from orangemug/fix/color-accessibility-ua-switch

Browse source 
Toggle color accessibility based on user agent
This commit is contained in:
pathmapper 2019-05-19 19:58:42 +02:00 committed by GitHub
commit 47965d5f57
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
package-lock.json generated
View file

@ -4116,6 +4116,11 @@
"integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
"dev": true
},
"detect-browser": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/detect-browser/-/detect-browser-4.5.0.tgz",
"integrity": "sha512-uwyZNBwMhvRIOBIBTuDu+h4/a2bfFE/elUIvAOuKuBZcuy6yAJ/9dOe4r3wyWO/ZW2PcsP0dhEwiVwTPTTJp2Q=="
},
"detect-node": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.0.4.tgz",

1
package.json
View file

@ -26,6 +26,7 @@
"classnames": "^2.2.6",
"codemirror": "^5.40.2",
"color": "^3.0.0",
"detect-browser": "^4.5.0",
"file-saver": "^1.3.8",
"jsonlint": "github:josdejong/jsonlint#85a19d7",
"lodash.capitalize": "^4.2.1",

12
src/components/Toolbar.jsx
View file

@ -1,6 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import {detect} from 'detect-browser';
import {MdFileDownload, MdOpenInBrowser, MdSettings, MdLayers, MdHelpOutline, MdFindInPage, MdAssignmentTurnedIn} from 'react-icons/md'
@ -9,6 +10,11 @@ import logoImage from 'maputnik-design/logos/logo-color.svg'
import pkgJson from '../../package.json'
// This is required because of <https://stackoverflow.com/a/49846426>, there isn't another way to detect support that I'm aware of.
const browser = detect();
const colorAccessibilityFiltersEnabled = ['chrome', 'firefox'].indexOf(browser.name) > -1;
class IconText extends React.Component {
static propTypes = {
children: PropTypes.node,
@ -137,18 +143,22 @@ export default class Toolbar extends React.Component {
{
id: "filter-deuteranopia",
title: "Map (deuteranopia)",
disabled: !colorAccessibilityFiltersEnabled,
},
{
id: "filter-protanopia",
title: "Map (protanopia)",
disabled: !colorAccessibilityFiltersEnabled,
},
{
id: "filter-tritanopia",
title: "Map (tritanopia)",
disabled: !colorAccessibilityFiltersEnabled,
},
{
id: "filter-achromatopsia",
title: "Map (achromatopsia)",
disabled: !colorAccessibilityFiltersEnabled,
},
];
@ -201,7 +211,7 @@ export default class Toolbar extends React.Component {
<select onChange={(e) => this.handleSelection(e.target.value)} value={currentView.id}>
{views.map((item) => {
return (
<option key={item.id} value={item.id}>
<option key={item.id} value={item.id} disabled={item.disabled}>
{item.title}
</option>
);