Skip to content

Commit 1370cb0

Browse files
tariqksolimantariqksoliman
committed
IFrame examples
1 parent 6fd57ec commit 1370cb0

File tree

15 files changed

+30166
-124
lines changed

15 files changed

+30166
-124
lines changed

‎API/templates/config_template.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,13 @@ module.exports = {
2424
look: {
2525
pagename: "MMGIS",
2626
minimalist: false,
27+
topbar: true,
28+
toolbar: true,
29+
scalebar: true,
30+
coordinates: true,
2731
zoomcontrol: false,
2832
graticule: false,
33+
miscellaneous: true,
2934
bodycolor: "",
3035
topbarcolor: "",
3136
toolbarcolor: "",
@@ -39,7 +44,7 @@ module.exports = {
3944
helpurl: "",
4045
},
4146
panels: ["viewer", "map", "globe"],
42-
time:["enabled"],
47+
time: ["enabled"],
4348
tools: [
4449
{
4550
name: "Layers",

‎config/js/config.js

+25-3
Original file line numberDiff line numberDiff line change
@@ -499,15 +499,30 @@ function initialize() {
499499
$("#tab_look #look_pagename").val(cData.look.pagename);
500500
}
501501
$("#tab_look input").prop("checked", false);
502-
if (cData.look && cData.look.minimalist == true) {
502+
if (cData.look && cData.look.minimalist != true) {
503503
$("#tab_look #look_minimalist").prop("checked", true);
504504
}
505-
if (cData.look && cData.look.zoomcontrol == true) {
505+
if (cData.look && cData.look.topbar != true) {
506+
$("#tab_look #look_topbar").prop("checked", true);
507+
}
508+
if (cData.look && cData.look.toolbar != true) {
509+
$("#tab_look #look_toolbar").prop("checked", true);
510+
}
511+
if (cData.look && cData.look.scalebar != true) {
512+
$("#tab_look #look_scalebar").prop("checked", true);
513+
}
514+
if (cData.look && cData.look.coordinates != true) {
515+
$("#tab_look #look_coordinates").prop("checked", true);
516+
}
517+
if (cData.look && cData.look.zoomcontrol != true) {
506518
$("#tab_look #look_zoomcontrol").prop("checked", true);
507519
}
508-
if (cData.look && cData.look.graticule == true) {
520+
if (cData.look && cData.look.graticule != true) {
509521
$("#tab_look #look_graticule").prop("checked", true);
510522
}
523+
if (cData.look && cData.look.miscellaneous != true) {
524+
$("#tab_look #look_miscellaneous").prop("checked", true);
525+
}
511526

512527
//look colors
513528
$("#tab_look #look_primarycolor").val(
@@ -1987,8 +2002,15 @@ function save() {
19872002
//Look
19882003
json.look["pagename"] = $("#tab_look #look_pagename").val();
19892004
json.look["minimalist"] = $("#tab_look #look_minimalist").prop("checked");
2005+
json.look["topbar"] = $("#tab_look #look_topbar").prop("checked");
2006+
json.look["toolbar"] = $("#tab_look #look_toolbar").prop("checked");
2007+
json.look["scalebar"] = $("#tab_look #look_scalebar").prop("checked");
2008+
json.look["coordinates"] = $("#tab_look #look_coordinates").prop("checked");
19902009
json.look["zoomcontrol"] = $("#tab_look #look_zoomcontrol").prop("checked");
19912010
json.look["graticule"] = $("#tab_look #look_graticule").prop("checked");
2011+
json.look["miscellaneous"] = $("#tab_look #look_miscellaneous").prop(
2012+
"checked"
2013+
);
19922014
//look colors
19932015
json.look["primarycolor"] = $("#tab_look #look_primarycolor").val();
19942016
json.look["secondarycolor"] = $("#tab_look #look_secondarycolor").val();

‎docs/pages/Configure/Tabs/Look/Look_Tab.md

+26-4
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,40 @@ grand_parent: Configure
1010

1111
Configure the look of MMGIS's UI for the mission
1212

13+
### Rebranding
14+
1315
#### Page Name
1416

1517
Sets the browser tab title and, if the UI is not minimalist, sets the title in the top bar. Defaults to `MMGIS`
1618

17-
#### Minimalist UI
19+
### User Interface
20+
21+
Toggles user interface elements on or off.
22+
23+
#### Minimalist UI (DISABLED)
1824

1925
If checked, hides the top bar. The top bar contains descriptive elements and interactions as well as a search bar. Checking this may cause other setups to be irrelevant.
2026

21-
#### Zoom Control
27+
#### Tob Bar
28+
29+
#### Tool Bar
30+
31+
#### Scale Bar
32+
33+
#### Coordinates
34+
35+
#### Map Zoom Control
2236

2337
If checked, adds `+` and `-` zoom buttons to the top right of the Map.
2438

25-
#### Graticule
39+
#### Map Graticule
2640

2741
Displays a grid of longitudinal and latitudinal lines over the Map.
2842

43+
#### Miscellaneous
44+
45+
### Colors
46+
2947
#### Body Color
3048

3149
Sets the background color of MMGIS to a [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). Might have little impact.
@@ -46,7 +64,9 @@ Sets the background of the Map to a [CSS color](https://developer.mozilla.org/en
4664

4765
Sets the highlight of active vector features to a [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).
4866

49-
#### Swap
67+
### Secondary Tools
68+
69+
#### Swap (DISABLED)
5070

5171
If checked, adds a button in the tool bar that enables users to switch seamlessly between missions. This functionality may be buggy and break things depending on the missions switched to and from. It's recommended to return to the landing page to switch between missions or to extensively test swapping between your missions before enabling Swap.
5272

@@ -62,6 +82,8 @@ If checked, adds a button in the tool bar that enables users to screenshot the c
6282

6383
If checked, adds a button in the tool bar that enables users to quickly enter and exit fullscreen mode.
6484

85+
### User Help
86+
6587
#### Help
6688

6789
If checked, adds a button in the tool bar that links to help documentation. That link can be specified below in Help URL.

‎docs/pages/Setup/ENVs/ENVs.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,11 @@ Potentially logs a bunch of extra stuff for development purposes | bool | defaul
7474

7575
#### `FRAME_ANCESTORS=`
7676

77-
Sets the `Content-Security-Policy: frame-ancestors` header to allow the embedding of MMGIS in the specified external sites | string[] | default `null`
77+
Sets the `Content-Security-Policy: frame-ancestors` header to allow the embedding of MMGIS in the specified external sites | string[] | default `null` | ex. FRAME_ANCESTORS='["http://localhost:8888"]'
78+
79+
#### `FRAME_SRC=`
80+
81+
Sets the `Content-Security-Policy: frame-src` header to allow the embedding iframes from external origins into MMGIS | string[] | default `null` | ex. FRAME_SRC='["http://localhost:8888"]'
7882

7983
#### `PUBLIC_URL=`
8084

‎examples/ReactWrappedIframe/index.html

+217
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>React Wrapped iframe</title>
5+
<meta charset="utf-8" />
6+
<meta
7+
name="viewport"
8+
content="width=device-width,user-scalable=no,minimum-scale=1,maximum-scale=1"
9+
/>
10+
<meta name="theme-color" content="#1d1f20" />
11+
<meta
12+
name="description"
13+
content="A web-based mapping and localization solution for science operation on planetary missions."
14+
/>
15+
<script src="../lib/react.development.js"></script>
16+
<script src="../lib/react-dom.development.js"></script>
17+
<script src="../lib/babel.min.js"></script>
18+
<style>
19+
body,
20+
html {
21+
background: #1d1f20;
22+
overflow: hidden;
23+
margin: 0;
24+
padding: 0;
25+
width: 100%;
26+
height: 100%;
27+
box-sizing: border-box;
28+
font-family: sans-serif;
29+
}
30+
iframe {
31+
width: 100%;
32+
height: 100%;
33+
border: none;
34+
}
35+
ul {
36+
list-style-type: none;
37+
margin: 0;
38+
padding: 0;
39+
}
40+
ul li {
41+
width: 40px;
42+
text-align: center;
43+
padding: 10px 0px;
44+
}
45+
p {
46+
font-size: 14px;
47+
}
48+
#root {
49+
width: 100%;
50+
height: 100%;
51+
}
52+
.App {
53+
width: 100%;
54+
height: 100%;
55+
display: flex;
56+
flex-flow: column;
57+
}
58+
.TopBar {
59+
width: 100%;
60+
height: 40px;
61+
background: white;
62+
font-weight: bold;
63+
padding: 10px;
64+
box-sizing: border-box;
65+
border-bottom: 1px solid #ddd;
66+
}
67+
.main {
68+
display: flex;
69+
height: calc(100vh - 40px);
70+
width: 100%;
71+
}
72+
.Toolbar {
73+
height: 100%;
74+
width: 40px;
75+
background: white;
76+
box-sizing: border-box;
77+
border-right: 1px solid #ddd;
78+
}
79+
.Panel {
80+
height: 100%;
81+
background: #f5f5f5;
82+
padding: 10px;
83+
box-sizing: border-box;
84+
overflow-y: auto;
85+
}
86+
.MMGIS {
87+
flex: 1;
88+
}
89+
.layer {
90+
height: 10px;
91+
margin: 2px 0px;
92+
padding-left: 6px;
93+
line-height: 12px;
94+
cursor: pointer;
95+
width: 220px;
96+
text-align: left;
97+
}
98+
.layer.on {
99+
border-left: 12px solid green;
100+
}
101+
.layer.off {
102+
border-left: 12px solid red;
103+
}
104+
</style>
105+
</head>
106+
<body>
107+
<div id="root"></div>
108+
109+
<!--
110+
<div id="main">
111+
<div id="top"></div>
112+
<div id="middle">
113+
<div id="left"></div>
114+
<div id="center">
115+
<iframe src="http://localhost:8888" title="MMGIS"></iframe>
116+
</div>
117+
<div id="right"></div>
118+
</div>
119+
<div id="bottom"></div>
120+
</div>
121+
-->
122+
</body>
123+
<footer>
124+
<script type="text/babel">
125+
function TopBar() {
126+
return <div className="TopBar">React Wrapped Iframe</div>;
127+
}
128+
129+
function Toolbar() {
130+
return (
131+
<div className="Toolbar">
132+
<ul>
133+
<li>A</li>
134+
<li>B</li>
135+
<li>C</li>
136+
<li>D</li>
137+
</ul>
138+
</div>
139+
);
140+
}
141+
function Panel(props) {
142+
const { width } = props;
143+
return (
144+
<div className="Panel" style={{ width: `${width || 250}px` }}>
145+
{props.children}
146+
</div>
147+
);
148+
}
149+
function MMGIS() {
150+
React.useEffect(() => {
151+
const MMGISIframe = document.getElementById("MMGISIframe");
152+
MMGISIframe.addEventListener("load", function () {
153+
window.mmgisAPI = this.contentWindow.mmgisAPI;
154+
});
155+
MMGISIframe.src = "http://localhost:8888?mission=MSL";
156+
}, []);
157+
return (
158+
<div className="MMGIS">
159+
<iframe id="MMGISIframe"></iframe>
160+
</div>
161+
);
162+
}
163+
164+
function App() {
165+
const [availableLayers, setAvailableLayers] = React.useState(null);
166+
return (
167+
<div className="App">
168+
<TopBar />
169+
<div className="main">
170+
<Toolbar />
171+
<Panel width={300}>
172+
{availableLayers == null && (
173+
<button
174+
onClick={() => {
175+
setAvailableLayers(mmgisAPI.getVisibleLayers());
176+
}}
177+
>
178+
Show Layers
179+
</button>
180+
)}
181+
<ul>
182+
{availableLayers &&
183+
Object.keys(availableLayers).map((layerName, i) => (
184+
<li
185+
key={i}
186+
className={`layer ${
187+
availableLayers[layerName] ? "on" : "off"
188+
}`}
189+
onClick={async () => {
190+
await mmgisAPI.toggleLayer(layerName);
191+
setAvailableLayers(mmgisAPI.getVisibleLayers());
192+
}}
193+
>
194+
{layerName}
195+
</li>
196+
))}
197+
</ul>
198+
</Panel>
199+
<MMGIS />
200+
<Panel width={400}>
201+
<h3>How to run this example:</h3>
202+
<p>Add .env: FRAME_ANCESTORS='["http://localhost:8888"]'</p>
203+
<p>Add .env: FRAME_SRC='["http://localhost:8888"]'</p>
204+
<p>`npm run build`</p>
205+
<p>`npm run start:prod:with_examples`</p>
206+
<p>
207+
Go to: localhost:8888/examples/ReactWrappedIframe/index.html
208+
</p>
209+
</Panel>
210+
</div>
211+
</div>
212+
);
213+
}
214+
ReactDOM.render(<App />, document.getElementById("root"));
215+
</script>
216+
</footer>
217+
</html>

0 commit comments

Comments
 (0)