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

Merge branch 'feature/accessibility-list-reorder' into feature/shortcuts

Browse source 
Conflicts:
	src/components/App.jsx
This commit is contained in:
orangemug 2018-06-03 09:41:07 +01:00
commit 1e09066779
8 changed files with 138 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/App.jsx
View file

@ -3,6 +3,7 @@ import Mousetrap from 'mousetrap'
import cloneDeep from 'lodash.clonedeep'
import clamp from 'lodash.clamp'
import {arrayMove} from 'react-sortable-hoc';
import url from 'url'
import MapboxGlMap from './map/MapboxGlMap'
import OpenLayers3Map from './map/OpenLayers3Map'
@ -153,6 +154,8 @@ export default class App extends React.Component {
Debug.set("maputnik", "styleStore", this.styleStore);
}
const queryObj = url.parse(window.location.href, true).query;
this.state = {
errors: [],
infos: [],
@ -168,7 +171,8 @@ export default class App extends React.Component {
open: false,
shortcuts: false,
export: false,
}
},
mapFilter: queryObj["color-blindness-emulation"],
}
this.layerWatcher = new LayerWatcher({
@ -407,15 +411,25 @@ export default class App extends React.Component {
const metadata = this.state.mapStyle.metadata || {}
const renderer = metadata['maputnik:renderer'] || 'mbgljs'
let mapElement;
// Check if OL3 code has been loaded?
if(renderer === 'ol3') {
return <OpenLayers3Map {...mapProps} />
mapElement = <OpenLayers3Map {...mapProps} />
} else {
return <MapboxGlMap {...mapProps}
mapElement = <MapboxGlMap {...mapProps}
inspectModeEnabled={this.state.inspectModeEnabled}
highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
onLayerSelect={this.onLayerSelect.bind(this)} />
}
const elementStyle = {
"filter": `url('#${this.state.mapFilter}')`
};
return <div style={elementStyle}>
{mapElement}
</div>
}
onLayerSelect(layerId) {

4
src/components/Toolbar.jsx
View file

@ -99,9 +99,13 @@ export default class Toolbar extends React.Component {
return <div className='maputnik-toolbar'>
<div className="maputnik-toolbar__inner">
<ToolbarLink
tabIndex="2"
href={"https://github.com/maputnik/editor"}
className="maputnik-toolbar-logo"
>
<a tabIndex="1" className="maputnik-toolbar-skip" href="#skip-menu">
Skip navigation
</a>
<img src={logoImage} alt="Maputnik" />
<h1>Maputnik
<span className="maputnik-toolbar-version">v{pkgJson.version}</span>

10
src/components/layers/LayerEditor.jsx
View file

@ -48,6 +48,13 @@ export default class LayerEditor extends React.Component {
spec: PropTypes.object.isRequired,
onLayerChanged: PropTypes.func,
onLayerIdChange: PropTypes.func,
onMoveLayer: PropTypes.func,
onLayerDestroy: PropTypes.func,
onLayerCopy: PropTypes.func,
onLayerVisibilityToggle: PropTypes.func,
isFirstLayer: PropTypes.bool,
isLastLayer: PropTypes.bool,
layerIndex: PropTypes.number,
}
static defaultProps = {
@ -202,6 +209,7 @@ export default class LayerEditor extends React.Component {
</LayerEditorGroup>
})
const layout = this.props.layer.layout || {}
const items = {
delete: {
@ -213,7 +221,7 @@ export default class LayerEditor extends React.Component {
handler: () => this.props.onLayerCopy(this.props.layer.id)
},
hide: {
text: "Hide",
text: (layout.visibility === "none") ? "Show" : "Hide",
handler: () => this.props.onLayerVisibilityToggle(this.props.layer.id)
},
moveLayerUp: {

1
src/components/layers/LayerList.jsx
View file

@ -178,6 +178,7 @@ class LayerListContainer extends React.Component {
<div className="maputnik-default-property">
<div className="maputnik-multibutton">
<button
id="skip-menu"
onClick={this.toggleLayers.bind(this)}
className="maputnik-button">
{this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"}

4
src/styles/_layer.scss
View file

@ -137,6 +137,7 @@
user-select: none;
padding: $margin-2;
line-height: 20px;
border-top: solid 1px #36383e;
@include flex-row;
@ -206,10 +207,11 @@
display: flex;
padding: 6px;
background: $color-black;
border-bottom: solid 1px $color-midgray;
&__title {
flex: 1;
margin: 0;
line-height: 24px;
}
&__info {

1
src/styles/_modal.scss
View file

@ -139,6 +139,7 @@
font-size: $font-size-5;
color: $color-lowgray;
background-color: transparent;
width: 100%;
@include flex-row;
}

22
src/styles/_toolbar.scss
View file

@ -16,6 +16,8 @@
background-color: $color-black;
padding: $margin-2;
height: $toolbar-height;
position: relative;
overflow: hidden;
h1 {
display: inline;
@ -80,3 +82,23 @@
flex: 1;
overflow-y: auto;
}
.maputnik-toolbar-skip {
position: absolute;
overflow: hidden;
width: 0px;
height: 100%;
text-align: center;
display: block;
background-color: $color-black;
z-index: 999;
line-height: 40px;
left: 0;
top: 0;
&:active,
&:focus {
width: 100%;
}
}

81
src/template.html
View file

@ -69,6 +69,87 @@
</style>
</head>
<body>
<!-- TODO: Import dynamically -->
<!-- From <https://github.com/hail2u/color-blindness-emulation> -->
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1">
<defs>
<filter id="protanopia">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.567, 0.433, 0, 0, 0
0.558, 0.442, 0, 0, 0
0, 0.242, 0.758, 0, 0
0, 0, 0, 1, 0"/>
</filter>
<filter id="protanomaly">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.817, 0.183, 0, 0, 0
0.333, 0.667, 0, 0, 0
0, 0.125, 0.875, 0, 0
0, 0, 0, 1, 0"/>
</filter>
<filter id="deuteranopia">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.625, 0.375, 0, 0, 0
0.7, 0.3, 0, 0, 0
0, 0.3, 0.7, 0, 0
0, 0, 0, 1, 0"/>
</filter>
<filter id="deuteranomaly">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.8, 0.2, 0, 0, 0
0.258, 0.742, 0, 0, 0
0, 0.142, 0.858, 0, 0
0, 0, 0, 1, 0"/>
</filter>
<filter id="tritanopia">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.95, 0.05, 0, 0, 0
0, 0.433, 0.567, 0, 0
0, 0.475, 0.525, 0, 0
0, 0, 0, 1, 0"/>
</filter>
<filter id="tritanomaly">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.967, 0.033, 0, 0, 0
0, 0.733, 0.267, 0, 0
0, 0.183, 0.817, 0, 0
0, 0, 0, 1, 0"/>
</filter>
<filter id="achromatopsia">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.299, 0.587, 0.114, 0, 0
0.299, 0.587, 0.114, 0, 0
0.299, 0.587, 0.114, 0, 0
0, 0, 0, 1, 0"/>
</filter>
<filter id="achromatomaly">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0.618, 0.320, 0.062, 0, 0
0.163, 0.775, 0.062, 0, 0
0.163, 0.320, 0.516, 0, 0
0, 0, 0, 1, 0"/>
</filter>
</defs>
</svg>
<div id="app">
<div id="loader">Loading...</div>
</div>