Skip to content

Commit 1bee564

Browse files
lxieyanglxieyang
committed
refactoring
1 parent 34eb0b8 commit 1bee564

File tree

4 files changed

+156
-141
lines changed

4 files changed

+156
-141
lines changed

‎public/global.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,10 @@ button.mapboxgl-popup-close-button {
128128
min-height: 550px;
129129
}
130130

131+
.mapboxgl-canvas:focus {
132+
outline: none;
133+
}
134+
131135
.map-popup {
132136
z-index: 10000;
133137
}
@@ -156,4 +160,4 @@ button.mapboxgl-popup-close-button {
156160

157161
color: #fff;
158162
padding: 2px 4px;
159-
}
163+
}

‎src/Graph.svelte renamed to ‎src/Graph/Graph.svelte

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@
1818
timeRangeOnSlider,
1919
yesterday,
2020
mounted,
21-
} from './stores.js';
22-
import { calculateValFromRectified } from './util.js';
23-
import { DIRECTION_THEME } from './theme.js';
21+
} from '../stores.js';
22+
import { calculateValFromRectified } from '../util.js';
23+
import { DIRECTION_THEME } from '../theme.js';
2424
import * as d3 from 'd3';
2525
import d3Tip from 'd3-tip';
2626

‎src/Graph/GraphContainer.svelte

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
<script>
2+
import Graph from './Graph.svelte';
3+
import { mapFirstLoaded } from '../stores.js';
4+
5+
export let isIE, graphShowStatus, toggleGraphShowStatus;
6+
</script>
7+
8+
<style>
9+
.graph-container {
10+
position: absolute;
11+
z-index: 1001;
12+
bottom: 12px;
13+
right: 10px;
14+
background-color: rgba(255, 255, 255, 0.9);
15+
padding: 5px 5px;
16+
box-sizing: border-box;
17+
transition: opacity 0.3s ease-in-out;
18+
visibility: hidden;
19+
opacity: 0;
20+
}
21+
22+
.graph-container.show {
23+
visibility: visible;
24+
opacity: 1;
25+
}
26+
27+
.hide-graph-button-anchor {
28+
position: relative;
29+
}
30+
31+
.hide-graph-button {
32+
position: absolute;
33+
top: 0;
34+
left: 0;
35+
width: 14px;
36+
height: 14px;
37+
color: #333;
38+
font-size: 12px;
39+
display: flex;
40+
justify-content: center;
41+
align-items: center;
42+
cursor: pointer;
43+
background-color: transparent;
44+
padding: 0;
45+
border: 0;
46+
transition: opacity 0.1s ease-in;
47+
opacity: 0.7;
48+
}
49+
50+
.hide-graph-button:hover {
51+
opacity: 1;
52+
}
53+
54+
.graph-toggole-button-container {
55+
position: absolute;
56+
float: right;
57+
z-index: 1001;
58+
bottom: 12px;
59+
right: 10px;
60+
background-color: rgba(255, 255, 255, 0.9);
61+
padding: 5px 5px;
62+
box-sizing: border-box;
63+
}
64+
65+
.graph-toggle-button {
66+
font-family: 'Open Sans', sans-serif;
67+
width: 85px;
68+
height: 40px;
69+
font-size: 14px;
70+
cursor: pointer;
71+
color: #333;
72+
background-color: transparent;
73+
padding: 0;
74+
border: 0;
75+
transition: all 0.1s ease-in;
76+
position: relative;
77+
}
78+
79+
.graph-toggle-button:hover {
80+
background-color: #eee;
81+
}
82+
83+
button.graph-toggle-button .button-tooltip {
84+
visibility: hidden;
85+
width: 120px;
86+
border-style: solid;
87+
border-width: 1px;
88+
border-color: #666;
89+
background-color: #fff;
90+
color: #333;
91+
font-weight: 400;
92+
font-size: 14px;
93+
line-height: 14px;
94+
text-align: center;
95+
border-radius: 6px;
96+
padding: 5px 5px;
97+
position: absolute;
98+
z-index: 1;
99+
top: 0px;
100+
right: 120%;
101+
}
102+
103+
button.graph-toggle-button .button-tooltip::after {
104+
content: '';
105+
position: absolute;
106+
top: 50%;
107+
left: 100%;
108+
margin-top: -5px;
109+
border-width: 5px;
110+
border-style: solid;
111+
border-color: transparent transparent transparent #666;
112+
}
113+
114+
button.graph-toggle-button:hover .button-tooltip {
115+
visibility: visible;
116+
}
117+
</style>
118+
119+
{#if $mapFirstLoaded && !graphShowStatus}
120+
<div class="graph-toggole-button-container">
121+
<button
122+
title={isIE !== undefined ? 'Show time series' : ''}
123+
class="graph-toggle-button"
124+
aria-label="show time series"
125+
on:click={event => toggleGraphShowStatus(false)}>
126+
<span class="button-tooltip">Show time series</span>
127+
<b>View Time Graph</b>
128+
</button>
129+
</div>
130+
{/if}
131+
132+
<div class="graph-container {$mapFirstLoaded && graphShowStatus ? 'show' : ''}">
133+
<div class="hide-graph-button-anchor">
134+
<button
135+
title="Hide time series"
136+
aria-label="Hide time series"
137+
on:click={toggleGraphShowStatus}
138+
class="hide-graph-button">
139+
&#10005;
140+
</button>
141+
</div>
142+
143+
<Graph />
144+
</div>

‎src/MapBox.svelte

Lines changed: 4 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
import Options from './Options.svelte';
99
import Legend from './Legend.svelte';
1010
import Time from './Time.svelte';
11-
import Graph from './Graph.svelte';
11+
import Graph from './Graph/Graph.svelte';
12+
import GraphContainer from './Graph/GraphContainer.svelte';
1213
1314
import {
1415
levels,
@@ -993,7 +994,7 @@
993994
position: absolute;
994995
top: 12px;
995996
left: 10px;
996-
max-width: 210px;
997+
max-width: 220px;
997998
z-index: 1001;
998999
background-color: rgba(255, 255, 255, 0.9);
9991000
padding: 10px 10px;
@@ -1024,115 +1025,6 @@
10241025
box-sizing: border-box;
10251026
transition: all 0.1s ease-in;
10261027
}
1027-
1028-
.graph-container {
1029-
position: absolute;
1030-
z-index: 1001;
1031-
bottom: 12px;
1032-
right: 10px;
1033-
background-color: rgba(255, 255, 255, 0.9);
1034-
padding: 5px 5px;
1035-
box-sizing: border-box;
1036-
transition: opacity 0.3s ease-in-out;
1037-
visibility: hidden;
1038-
opacity: 0;
1039-
}
1040-
1041-
.graph-container.show {
1042-
visibility: visible;
1043-
opacity: 1;
1044-
}
1045-
1046-
.hide-graph-button-anchor {
1047-
position: relative;
1048-
}
1049-
1050-
.hide-graph-button {
1051-
position: absolute;
1052-
top: 0;
1053-
left: 0;
1054-
width: 14px;
1055-
height: 14px;
1056-
color: #333;
1057-
font-size: 12px;
1058-
display: flex;
1059-
justify-content: center;
1060-
align-items: center;
1061-
cursor: pointer;
1062-
background-color: transparent;
1063-
padding: 0;
1064-
border: 0;
1065-
transition: opacity 0.1s ease-in;
1066-
opacity: 0.7;
1067-
}
1068-
1069-
.hide-graph-button:hover {
1070-
opacity: 1;
1071-
}
1072-
1073-
.graph-toggole-button-container {
1074-
position: absolute;
1075-
float: right;
1076-
z-index: 1001;
1077-
bottom: 12px;
1078-
right: 10px;
1079-
background-color: rgba(255, 255, 255, 0.9);
1080-
padding: 5px 5px;
1081-
box-sizing: border-box;
1082-
}
1083-
1084-
.graph-toggle-button {
1085-
font-family: 'Open Sans', sans-serif;
1086-
width: 85px;
1087-
height: 40px;
1088-
font-size: 14px;
1089-
cursor: pointer;
1090-
color: #333;
1091-
background-color: transparent;
1092-
padding: 0;
1093-
border: 0;
1094-
transition: all 0.1s ease-in;
1095-
position: relative;
1096-
}
1097-
1098-
.graph-toggle-button:hover {
1099-
background-color: #eee;
1100-
}
1101-
1102-
button.graph-toggle-button .button-tooltip {
1103-
visibility: hidden;
1104-
width: 120px;
1105-
border-style: solid;
1106-
border-width: 1px;
1107-
border-color: #666;
1108-
background-color: #fff;
1109-
color: #333;
1110-
font-weight: 400;
1111-
font-size: 14px;
1112-
line-height: 14px;
1113-
text-align: center;
1114-
border-radius: 6px;
1115-
padding: 5px 5px;
1116-
position: absolute;
1117-
z-index: 1;
1118-
top: 0px;
1119-
right: 120%;
1120-
}
1121-
1122-
button.graph-toggle-button .button-tooltip::after {
1123-
content: '';
1124-
position: absolute;
1125-
top: 50%;
1126-
left: 100%;
1127-
margin-top: -5px;
1128-
border-width: 5px;
1129-
border-style: solid;
1130-
border-color: transparent transparent transparent #666;
1131-
}
1132-
1133-
button.graph-toggle-button:hover .button-tooltip {
1134-
visibility: visible;
1135-
}
11361028
</style>
11371029

11381030
<div class="banner">
@@ -1221,30 +1113,5 @@
12211113
<Time />
12221114
</div>
12231115

1224-
{#if $mapFirstLoaded && !graphShowStatus}
1225-
<div class="graph-toggole-button-container">
1226-
<button
1227-
title={isIE !== undefined ? 'Show time series' : ''}
1228-
class="graph-toggle-button"
1229-
aria-label="show time series"
1230-
on:click={event => toggleGraphShowStatus(false)}>
1231-
<span class="button-tooltip">Show time series</span>
1232-
<b>View Time Graph</b>
1233-
</button>
1234-
</div>
1235-
{/if}
1236-
1237-
<div class="graph-container {$mapFirstLoaded && graphShowStatus ? 'show' : ''}">
1238-
<div class="hide-graph-button-anchor">
1239-
<button
1240-
title="Hide time series"
1241-
aria-label="Hide time series"
1242-
on:click={toggleGraphShowStatus}
1243-
class="hide-graph-button">
1244-
&#10005;
1245-
</button>
1246-
</div>
1247-
1248-
<Graph />
1249-
</div>
1116+
<GraphContainer {isIE} {graphShowStatus} {toggleGraphShowStatus} />
12501117
</div>

0 commit comments

Comments
 (0)