Skip to content

Commit 8ae9153

Browse files
francisashleyfrancisashley
committed
💥 add 'root' option for users to select the DOM element to attach MDE to
1 parent 50f2f3e commit 8ae9153

File tree

4 files changed

+80
-28
lines changed

4 files changed

+80
-28
lines changed

‎README.md‎

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,12 @@ With [unpkg.com](https://unpkg.com/browse/@fa-repo/mobile-dev-environment@latest
4848
import mobileDevEnvironment from '@fa-repo/mobile-dev-environment';
4949
import '@fa-repo/mobile-dev-environment/mobile-dev-environment.css';
5050

51-
new mobileDevEnvironment({
52-
stateId : 'my-multi-page-app',
53-
actionsCorner : 'tl'
51+
window.addEventListener("DOMContentLoaded", event => {
52+
new mobileDevEnvironment({
53+
root: document.getElementById('mde'),
54+
stateId : 'my-multi-page-app',
55+
actionsCorner : 'tl'
56+
});
5457
});
5558

5659
// app.html
@@ -74,15 +77,16 @@ new mobileDevEnvironment({
7477
<head>
7578
<link href="https://unpkg.com/@fa-repo/mobile-dev-environment@latest/dist/mde.min.css" rel="stylesheet" type="text/css">
7679
<script src="https://unpkg.com/@fa-repo/mobile-dev-environment@latest/dist/mde.min.js" defer></script>
77-
<script defer>
80+
</head>
81+
<body>
82+
<div id="mde"></div>
83+
<script>
7884
new mobileDevEnvironment({
85+
root: document.getElementById('mde'),
7986
stateId : 'my-multi-page-app',
8087
actionsCorner : 'tl'
8188
});
8289
</script>
83-
</head>
84-
<body>
85-
<div id="mde"></div>
8690
</body>
8791
</html>
8892
```
@@ -91,52 +95,64 @@ new mobileDevEnvironment({
9195

9296
<table>
9397
<tr>
94-
<th colspan="4" align="left" valign="top"><a href="#options" name="options">Options</a></th>
98+
<th colspan="5" align="left" valign="top"><a href="#options" name="options">Options</a></th>
9599
</tr>
96100
<tr>
97101
<th align="left" valign="top">Option</th>
98102
<th align="left" valign="top">Description</th>
99103
<th align="left" valign="top">Type</th>
100104
<th align="left" valign="top">Default</th>
105+
<th align="left" valign="top">Required</th>
101106
</tr>
102107
<tr>
103108
<td valign="top"><code>actions</code></td>
104109
<td valign="top">An array of <a href="#modules" name="modules">actions</a> to load</td>
105110
<td valign="top"><code>array</code></td>
106111
<td valign="top"><code>['reload','tray']</code></td>
112+
<td valign="top"></td>
107113
</tr>
108114
<tr>
109115
<td valign="top"><code>actionsCorner</code></td>
110116
<td valign="top">The actions bar position, top left <code>'tl'</code> or right <code>'tr'</code></td>
111117
<td valign="top"><code>string</code></td>
112118
<td valign="top"><code>'tr'</code></td>
119+
<td valign="top"></td>
113120
</tr>
114121
<tr>
115122
<td valign="top"><code>hardReload</code></td>
116123
<td valign="top">Refresh browser cache</td>
117124
<td valign="top"><code>string</code></td>
118125
<td valign="top"><code>true</code></td>
126+
<td valign="top"></td>
127+
</tr>
128+
<tr>
129+
<td valign="top"><code>root</code></td>
130+
<td valign="top">Provide a DOM element for MDE to hook on too.</td>
131+
<td valign="top"><code>DOM element</code></td>
132+
<td valign="top"></td>
133+
<td valign="top">Required</td>
119134
</tr>
120135
<tr>
121136
<td valign="top"><code>stateId</code></td>
122137
<td valign="top">Share state information like open/close, height etc across instances of MDE on other pages</td>
123138
<td valign="top"><code>string</code></td>
124139
<td valign="top"><code>'global'</code></td>
140+
<td valign="top"></td>
125141
</tr>
126142
<tr>
127-
<th colspan="4" align="left" valign="top"><a href="#modules" name="modules">Modules</a></th>
143+
<th colspan="5" align="left" valign="top"><a href="#modules" name="modules">Modules</a></th>
128144
</tr>
129145
<tr>
130146
<th colspan="1" align="left" valign="top">Module</th>
131-
<th colspan="3" align="left" valign="top">Description</th>
147+
<th colspan="4" align="left" valign="top">Description</th>
132148
</tr>
133149
<tr>
134150
<td colspan="1" valign="top"><code>reload</code></td>
135-
<td colspan="3" valign="top">An easily accessible button for reloading the page</td>
151+
<td colspan="4" valign="top">An easily accessible button for reloading the page</td>
136152
</tr>
137153
<tr>
138154
<td colspan="1" valign="top"><code>tray</code></td>
139-
<td colspan="3" valign="top">A toggleable, color coded, resizable tray for displaying log messages</td>
155+
<td colspan="4" valign="top">A toggleable, color coded, resizable tray for displaying log messages</td>
140156
</tr>
141157
</table>
142158

‎example/index.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,10 @@
2020
<img src="http://placekitten.com/g/740/420" alt="cute cat placeholder" />
2121
<div id="mde"></div>
2222
<script>
23-
mobileDevEnvironment({ actionsCorner: "tr" });
23+
mobileDevEnvironment({
24+
root: document.getElementById("mde"),
25+
actionsCorner: "tr"
26+
});
2427

2528
intentional_error;
2629
</script>

‎src/mde.js‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,34 @@
1+
import { defaults, isElement } from "lodash";
2+
13
import ActionBar from "./features/action-bar/action-bar";
24
import Tray from "./features/tray/tray";
35
import crel from "crel";
4-
import { defaults } from "lodash";
56
import stately from "./utils/state";
67
import tracer from "./utils/tracer.js";
78

89
(function() {
910
"use strict";
1011

1112
function mobileDevEnvironment(options = {}) {
13+
if (!isElement(options.root)) {
14+
throw "Could not start MDE because MDE requires a `root` element to attach to the DOM.";
15+
}
16+
1217
/**
1318
* STATE
1419
*/
1520

16-
defaults(options, {
21+
const { root, stateId, actions, hardReload, actionsCorner } = defaults(options, {
1722
stateId: "global",
1823
actions: ["reload", "toggle-tray"],
1924
hardReload: true,
2025
actionsCorner: "tr"
2126
});
2227

23-
const state = stately(options.stateId);
24-
state.set("action-bar", options.actions);
25-
state.set("action-bar.corner", options.actionsCorner);
26-
state.set("reload.refreshCache", options.hardReload);
28+
const state = stately(stateId);
29+
state.set("action-bar", actions);
30+
state.set("action-bar.corner", actionsCorner);
31+
state.set("reload.refreshCache", hardReload);
2732
state.setCache("tray.open", state.getCache("tray.open", true));
2833
state.setCache(
2934
"tray.height",
@@ -112,7 +117,6 @@ import tracer from "./utils/tracer.js";
112117
// render
113118

114119
function render() {
115-
const root = document.getElementById("mde");
116120
root.innerHTML = "";
117121

118122
// render action bar

‎src/mde.test.js‎

Lines changed: 37 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,29 @@ afterEach(() => {
1111
});
1212

1313
test("MDE renders to dom without crashing", () => {
14-
mobileDevEnvironment();
14+
mobileDevEnvironment({
15+
root: document.getElementById("mde")
16+
});
1517

1618
expect(!!document.getElementById("mde-action-bar")).toBe(true);
1719
expect(!!document.getElementById("mde-tray")).toBe(true);
1820
});
1921

22+
test("MDE throws an error if `root` option does not contain a DOM element", () => {
23+
try {
24+
mobileDevEnvironment();
25+
expect(false).toBe(true);
26+
} catch (error) {
27+
expect(error).toBe(
28+
"Could not start MDE because MDE requires a `root` element to attach to the DOM."
29+
);
30+
}
31+
});
32+
2033
test("MDE console.log()'s to tray", () => {
21-
mobileDevEnvironment();
34+
mobileDevEnvironment({
35+
root: document.getElementById("mde")
36+
});
2237

2338
console.log("works");
2439

@@ -31,7 +46,9 @@ test("MDE console.log()'s to tray", () => {
3146
});
3247

3348
test("MDE console.error()'s to tray", () => {
34-
mobileDevEnvironment();
49+
mobileDevEnvironment({
50+
root: document.getElementById("mde")
51+
});
3552

3653
console.error("works");
3754

@@ -44,7 +61,9 @@ test("MDE console.error()'s to tray", () => {
4461
});
4562

4663
test("MDE console.assert()'s to tray", () => {
47-
mobileDevEnvironment();
64+
mobileDevEnvironment({
65+
root: document.getElementById("mde")
66+
});
4867

4968
console.assert(false, "works");
5069

@@ -70,6 +89,7 @@ test("MDE console.assert()'s to tray", () => {
7089

7190
test("MDE shows correct actions", () => {
7291
mobileDevEnvironment({
92+
root: document.getElementById("mde"),
7393
actions: ["reload", "toggle-tray"]
7494
});
7595

@@ -78,16 +98,25 @@ test("MDE shows correct actions", () => {
7898
});
7999

80100
test("MDE shows actions tray on top right by default", () => {
81-
mobileDevEnvironment();
101+
mobileDevEnvironment({
102+
root: document.getElementById("mde")
103+
});
82104

83105
expect(document.querySelector("#mde-action-bar[data-corner=tr]")).toBeTruthy();
84106
});
107+
85108
test("MDE shows actions tray on top left", () => {
86-
mobileDevEnvironment({ actionsCorner: "tl" });
109+
mobileDevEnvironment({
110+
root: document.getElementById("mde"),
111+
actionsCorner: "tl"
112+
});
87113
expect(document.querySelector("#mde-action-bar[data-corner=tl]")).toBeTruthy();
88114
});
89-
test("MDE shows actions tray on top right", () => {
90-
mobileDevEnvironment({ actionsCorner: "tr" });
91115

116+
test("MDE shows actions tray on top right", () => {
117+
mobileDevEnvironment({
118+
root: document.getElementById("mde"),
119+
actionsCorner: "tr"
120+
});
92121
expect(document.querySelector("#mde-action-bar[data-corner=tr]")).toBeTruthy();
93122
});

0 commit comments

Comments
 (0)