experiments in a post-browser web
Merge pull request #23 from autonome/switch
Switch more
authored by
Dietrich Ayala
and committed by
GitHub
7ebe4d98
42bcdcd8
+826
-126
+33
features/cmd/settings.css
+33
features/cmd/settings.css
···
1
+
body {
2
+
font-family: -apple-system, BlinkMacSystemFont, helvetica neue, helvetica, sans-serif;
3
+
font-feature-settings: "tnum";
4
+
font-size: 12.4px;
5
+
font-variant-numeric: tabular-nums;
6
+
margin: 12px;
7
+
}
8
+
9
+
body > div {
10
+
margin-bottom: 10px;
11
+
}
12
+
13
+
body > div > div {
14
+
margin-bottom: 10px;
15
+
}
16
+
17
+
h1 {
18
+
margin-top: 1px;
19
+
margin-bottom: 2px;
20
+
}
21
+
22
+
.houseofpane {
23
+
justify-content: space-between;
24
+
columns: 2;
25
+
}
26
+
27
+
/* tweakpanes */
28
+
.houseofpane > div {
29
+
min-width: 380px;
30
+
max-width: 380px;
31
+
margin-bottom: 10px;
32
+
break-inside: avoid-column;
33
+
}
+33
features/cmd/settings.html
+33
features/cmd/settings.html
···
1
+
<!DOCTYPE html>
2
+
<html>
3
+
<head>
4
+
<title>peek:core:settings</title>
5
+
<meta charset="UTF-8">
6
+
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
7
+
<meta http-equiv="Content-Security-Policy" content="script-src 'self';">
8
+
<meta name="description" content="">
9
+
<meta name="viewport" content="width=device-width, initial-scale=1">
10
+
<link rel="stylesheet" href="settings.css">
11
+
<link rel="stylesheet" href="settings.css">
12
+
<link rel="stylesheet" href="../../node_modules/lil-gui/dist/lil-gui.min.css">
13
+
</head>
14
+
<body>
15
+
<div>
16
+
<h1>peek</h1>
17
+
</div>
18
+
19
+
<div class="houseofpane">
20
+
</div>
21
+
22
+
<div>
23
+
Node.js <span id="node-version"></span><br>
24
+
Chromium <span id="chrome-version"></span><br>
25
+
Electron <span id="electron-version"></span><br>
26
+
</div>
27
+
28
+
<script type=module src="../utils.js"></script>
29
+
<script type=module src="./config.js"></script>
30
+
<script type=module src="./settings.js"></script>
31
+
32
+
</body>
33
+
</html>
+70
features/cmd/settings.js
+70
features/cmd/settings.js
···
1
+
import { id, labels, schemas, storageKeys, defaults } from './config.js';
2
+
import { log as l, openStore, addToGUI } from "../utils.js";
3
+
import GUI from './../../node_modules/lil-gui/dist/lil-gui.esm.min.js';
4
+
5
+
const log = function(...args) { l(id, args); };
6
+
7
+
log('background', id);
8
+
9
+
const debug = window.app.debug;
10
+
const clear = false;
11
+
12
+
const store = openStore(id, defaults, clear /* clear storage */);
13
+
const api = window.app;
14
+
15
+
const container = document.querySelector('.houseofpane');
16
+
let prefs = store.get(storageKeys.PREFS);
17
+
18
+
const persistToStorage = () => {
19
+
store.set(storageKeys.PREFS, prefs);
20
+
};
21
+
22
+
const init = () => {
23
+
24
+
/*
25
+
pubsub.publish('open', {
26
+
feature: msg.prefs.startupFeature
27
+
});
28
+
*/
29
+
30
+
// Initialize settings UI
31
+
const container = document.querySelector('.houseofpane');
32
+
33
+
const gui = new GUI({
34
+
touchStyles: false,
35
+
container: container,
36
+
title: labels.featureDisplay
37
+
});
38
+
39
+
// anytime anything changes, persist to storage
40
+
gui.onFinishChange(persistToStorage);
41
+
42
+
// Add prefs
43
+
const prefsFolder = gui.addFolder(
44
+
schemas.prefs.title
45
+
);
46
+
47
+
const pProps = schemas.prefs.properties;
48
+
const data = prefs;
49
+
50
+
Object.keys(pProps).forEach(k => {
51
+
// schema for property
52
+
const s = pProps[k];
53
+
54
+
// value (or default)
55
+
const v =
56
+
(data && data.hasOwnProperty(k))
57
+
? data[k]
58
+
: pProps[k].default;
59
+
60
+
const disabled = false;
61
+
const step = pProps[k].type == 'integer' ? 1 : null;
62
+
63
+
addToGUI(prefsFolder, k, v, disabled, step).onChange(e => {
64
+
// TODO: validate new value against schema
65
+
prefs[k] = e;
66
+
});;
67
+
});
68
+
};
69
+
70
+
window.addEventListener('load', init);
+1
-24
features/core/settings.js
+1
-24
features/core/settings.js
···
1
1
import { id, labels, schemas, storageKeys, defaults } from './config.js';
2
-
import { log as l, openStore } from "../utils.js";
2
+
import { log as l, openStore, addToGUI } from "../utils.js";
3
3
import GUI from './../../node_modules/lil-gui/dist/lil-gui.esm.min.js';
4
4
5
5
const log = function(...args) { l(id, args); };
···
86
86
};
87
87
88
88
window.app.openWindow(params, () => window.app.log(title, 'settings win opened', address));
89
-
}
90
-
91
-
const addToGUI = (gui, label, value, disabled = false, step = null, max = null) => {
92
-
const params = {};
93
-
params[label] = value;
94
-
95
-
const ctr = gui.add(params, label);
96
-
97
-
/*
98
-
if (disabled == true) {
99
-
ctr.disable();
100
-
}
101
-
102
-
if (max != null) {
103
-
ctr.max(max);
104
-
}
105
-
106
-
if (step != null) {
107
-
ctr.step(step);
108
-
}
109
-
*/
110
-
111
-
return ctr;
112
89
}
113
90
114
91
window.addEventListener('load', init);
+33
features/groups/settings.css
+33
features/groups/settings.css
···
1
+
body {
2
+
font-family: -apple-system, BlinkMacSystemFont, helvetica neue, helvetica, sans-serif;
3
+
font-feature-settings: "tnum";
4
+
font-size: 12.4px;
5
+
font-variant-numeric: tabular-nums;
6
+
margin: 12px;
7
+
}
8
+
9
+
body > div {
10
+
margin-bottom: 10px;
11
+
}
12
+
13
+
body > div > div {
14
+
margin-bottom: 10px;
15
+
}
16
+
17
+
h1 {
18
+
margin-top: 1px;
19
+
margin-bottom: 2px;
20
+
}
21
+
22
+
.houseofpane {
23
+
justify-content: space-between;
24
+
columns: 2;
25
+
}
26
+
27
+
/* tweakpanes */
28
+
.houseofpane > div {
29
+
min-width: 380px;
30
+
max-width: 380px;
31
+
margin-bottom: 10px;
32
+
break-inside: avoid-column;
33
+
}
+33
features/groups/settings.html
+33
features/groups/settings.html
···
1
+
<!DOCTYPE html>
2
+
<html>
3
+
<head>
4
+
<title>peek:core:settings</title>
5
+
<meta charset="UTF-8">
6
+
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
7
+
<meta http-equiv="Content-Security-Policy" content="script-src 'self';">
8
+
<meta name="description" content="">
9
+
<meta name="viewport" content="width=device-width, initial-scale=1">
10
+
<link rel="stylesheet" href="settings.css">
11
+
<link rel="stylesheet" href="settings.css">
12
+
<link rel="stylesheet" href="../../node_modules/lil-gui/dist/lil-gui.min.css">
13
+
</head>
14
+
<body>
15
+
<div>
16
+
<h1>peek</h1>
17
+
</div>
18
+
19
+
<div class="houseofpane">
20
+
</div>
21
+
22
+
<div>
23
+
Node.js <span id="node-version"></span><br>
24
+
Chromium <span id="chrome-version"></span><br>
25
+
Electron <span id="electron-version"></span><br>
26
+
</div>
27
+
28
+
<script type=module src="../utils.js"></script>
29
+
<script type=module src="./config.js"></script>
30
+
<script type=module src="./settings.js"></script>
31
+
32
+
</body>
33
+
</html>
+98
features/groups/settings.js
+98
features/groups/settings.js
···
1
+
import { id, labels, schemas, storageKeys, defaults } from './config.js';
2
+
import { log as l, openStore, addToGUI } from "../utils.js";
3
+
import GUI from './../../node_modules/lil-gui/dist/lil-gui.esm.min.js';
4
+
5
+
const log = function(...args) { l(id, args); };
6
+
7
+
log('background', id);
8
+
9
+
const debug = window.app.debug;
10
+
const clear = false;
11
+
12
+
const store = openStore(id, defaults, clear /* clear storage */);
13
+
const api = window.app;
14
+
15
+
const container = document.querySelector('.houseofpane');
16
+
let prefs = store.get(storageKeys.PREFS);
17
+
//let items = store.get(storageKeys.ITEMS);
18
+
19
+
const persistToStorage = () => {
20
+
store.set(storageKeys.PREFS, prefs);
21
+
//store.set(storageKeys.ITEMS, items);
22
+
};
23
+
24
+
const init = () => {
25
+
26
+
/*
27
+
pubsub.publish('open', {
28
+
feature: msg.prefs.startupFeature
29
+
});
30
+
*/
31
+
32
+
// Initialize settings UI
33
+
const container = document.querySelector('.houseofpane');
34
+
35
+
const gui = new GUI({
36
+
touchStyles: false,
37
+
container: container,
38
+
title: labels.featureDisplay
39
+
});
40
+
41
+
// anytime anything changes, persist to storage
42
+
gui.onFinishChange(persistToStorage);
43
+
44
+
// Add prefs
45
+
const prefsFolder = gui.addFolder(
46
+
schemas.prefs.title
47
+
);
48
+
49
+
const pProps = schemas.prefs.properties;
50
+
const data = prefs;
51
+
52
+
Object.keys(pProps).forEach(k => {
53
+
// schema for property
54
+
const s = pProps[k];
55
+
56
+
// value (or default)
57
+
const v =
58
+
(data && data.hasOwnProperty(k))
59
+
? data[k]
60
+
: pProps[k].default;
61
+
62
+
const disabled = false;
63
+
const step = pProps[k].type == 'integer' ? 1 : null;
64
+
65
+
addToGUI(prefsFolder, k, v, disabled, step).onChange(e => {
66
+
// TODO: validate new value against schema
67
+
prefs[k] = e;
68
+
});;
69
+
});
70
+
71
+
/*
72
+
// Add items
73
+
items.forEach((item, i) => {
74
+
const folder = gui.addFolder(item.title);
75
+
76
+
addToGUI(folder, 'Key mapping', item.keyNum).disable();
77
+
addToGUI(folder, 'Address to load', item.address).onChange(e => {
78
+
items[i].address = e;
79
+
});
80
+
addToGUI(folder, 'Persist state (not supported)', item.persistState).disable();
81
+
addToGUI(folder, 'Keep live', item.keepLive).onChange(e => {
82
+
items[i].keepLive = e;
83
+
});
84
+
addToGUI(folder, 'Allow sound (not supported)', item.allowSound).disable();
85
+
addToGUI(folder, 'Window height', item.height).onChange(e => {
86
+
items[i].height = e;
87
+
});
88
+
addToGUI(folder, 'Window width', item.width).onChange(e => {
89
+
items[i].width = e;
90
+
});
91
+
addToGUI(folder, 'Enabled', item.enabled).onChange(e => {
92
+
items[i].enabled = e;
93
+
});
94
+
});
95
+
*/
96
+
};
97
+
98
+
window.addEventListener('load', init);
+33
features/peeks/settings.css
+33
features/peeks/settings.css
···
1
+
body {
2
+
font-family: -apple-system, BlinkMacSystemFont, helvetica neue, helvetica, sans-serif;
3
+
font-feature-settings: "tnum";
4
+
font-size: 12.4px;
5
+
font-variant-numeric: tabular-nums;
6
+
margin: 12px;
7
+
}
8
+
9
+
body > div {
10
+
margin-bottom: 10px;
11
+
}
12
+
13
+
body > div > div {
14
+
margin-bottom: 10px;
15
+
}
16
+
17
+
h1 {
18
+
margin-top: 1px;
19
+
margin-bottom: 2px;
20
+
}
21
+
22
+
.houseofpane {
23
+
justify-content: space-between;
24
+
columns: 2;
25
+
}
26
+
27
+
/* tweakpanes */
28
+
.houseofpane > div {
29
+
min-width: 380px;
30
+
max-width: 380px;
31
+
margin-bottom: 10px;
32
+
break-inside: avoid-column;
33
+
}
+33
features/peeks/settings.html
+33
features/peeks/settings.html
···
1
+
<!DOCTYPE html>
2
+
<html>
3
+
<head>
4
+
<title>peek:core:settings</title>
5
+
<meta charset="UTF-8">
6
+
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
7
+
<meta http-equiv="Content-Security-Policy" content="script-src 'self';">
8
+
<meta name="description" content="">
9
+
<meta name="viewport" content="width=device-width, initial-scale=1">
10
+
<link rel="stylesheet" href="settings.css">
11
+
<link rel="stylesheet" href="settings.css">
12
+
<link rel="stylesheet" href="../../node_modules/lil-gui/dist/lil-gui.min.css">
13
+
</head>
14
+
<body>
15
+
<div>
16
+
<h1>peek</h1>
17
+
</div>
18
+
19
+
<div class="houseofpane">
20
+
</div>
21
+
22
+
<div>
23
+
Node.js <span id="node-version"></span><br>
24
+
Chromium <span id="chrome-version"></span><br>
25
+
Electron <span id="electron-version"></span><br>
26
+
</div>
27
+
28
+
<script type=module src="../utils.js"></script>
29
+
<script type=module src="./config.js"></script>
30
+
<script type=module src="./settings.js"></script>
31
+
32
+
</body>
33
+
</html>
+96
features/peeks/settings.js
+96
features/peeks/settings.js
···
1
+
import { id, labels, schemas, storageKeys, defaults } from './config.js';
2
+
import { log as l, openStore, addToGUI } from "../utils.js";
3
+
import GUI from './../../node_modules/lil-gui/dist/lil-gui.esm.min.js';
4
+
5
+
const log = function(...args) { l(id, args); };
6
+
7
+
log('background', id);
8
+
9
+
const debug = window.app.debug;
10
+
const clear = false;
11
+
12
+
const store = openStore(id, defaults, clear /* clear storage */);
13
+
const api = window.app;
14
+
15
+
const container = document.querySelector('.houseofpane');
16
+
let prefs = store.get(storageKeys.PREFS);
17
+
let items = store.get(storageKeys.ITEMS);
18
+
19
+
const persistToStorage = () => {
20
+
store.set(storageKeys.PREFS, prefs);
21
+
store.set(storageKeys.ITEMS, items);
22
+
};
23
+
24
+
const init = () => {
25
+
26
+
/*
27
+
pubsub.publish('open', {
28
+
feature: msg.prefs.startupFeature
29
+
});
30
+
*/
31
+
32
+
// Initialize settings UI
33
+
const container = document.querySelector('.houseofpane');
34
+
35
+
const gui = new GUI({
36
+
touchStyles: false,
37
+
container: container,
38
+
title: labels.featureDisplay
39
+
});
40
+
41
+
// anytime anything changes, persist to storage
42
+
gui.onFinishChange(persistToStorage);
43
+
44
+
// Add prefs
45
+
const prefsFolder = gui.addFolder(
46
+
schemas.prefs.title
47
+
);
48
+
49
+
const pProps = schemas.prefs.properties;
50
+
const data = prefs;
51
+
52
+
Object.keys(pProps).forEach(k => {
53
+
// schema for property
54
+
const s = pProps[k];
55
+
56
+
// value (or default)
57
+
const v =
58
+
(data && data.hasOwnProperty(k))
59
+
? data[k]
60
+
: pProps[k].default;
61
+
62
+
const disabled = false;
63
+
const step = pProps[k].type == 'integer' ? 1 : null;
64
+
65
+
addToGUI(prefsFolder, k, v, disabled, step).onChange(e => {
66
+
// TODO: validate new value against schema
67
+
prefs[k] = e;
68
+
});;
69
+
});
70
+
71
+
// Add items
72
+
items.forEach((item, i) => {
73
+
const folder = gui.addFolder(item.title);
74
+
75
+
addToGUI(folder, 'Key mapping', item.keyNum).disable();
76
+
addToGUI(folder, 'Address to load', item.address).onChange(e => {
77
+
items[i].address = e;
78
+
});
79
+
addToGUI(folder, 'Persist state (not supported)', item.persistState).disable();
80
+
addToGUI(folder, 'Keep live', item.keepLive).onChange(e => {
81
+
items[i].keepLive = e;
82
+
});
83
+
addToGUI(folder, 'Allow sound (not supported)', item.allowSound).disable();
84
+
addToGUI(folder, 'Window height', item.height).onChange(e => {
85
+
items[i].height = e;
86
+
});
87
+
addToGUI(folder, 'Window width', item.width).onChange(e => {
88
+
items[i].width = e;
89
+
});
90
+
addToGUI(folder, 'Enabled', item.enabled).onChange(e => {
91
+
items[i].enabled = e;
92
+
});
93
+
});
94
+
};
95
+
96
+
window.addEventListener('load', init);
+1
-1
features/scripts/config.js
+1
-1
features/scripts/config.js
+33
features/scripts/settings.css
+33
features/scripts/settings.css
···
1
+
body {
2
+
font-family: -apple-system, BlinkMacSystemFont, helvetica neue, helvetica, sans-serif;
3
+
font-feature-settings: "tnum";
4
+
font-size: 12.4px;
5
+
font-variant-numeric: tabular-nums;
6
+
margin: 12px;
7
+
}
8
+
9
+
body > div {
10
+
margin-bottom: 10px;
11
+
}
12
+
13
+
body > div > div {
14
+
margin-bottom: 10px;
15
+
}
16
+
17
+
h1 {
18
+
margin-top: 1px;
19
+
margin-bottom: 2px;
20
+
}
21
+
22
+
.houseofpane {
23
+
justify-content: space-between;
24
+
columns: 2;
25
+
}
26
+
27
+
/* tweakpanes */
28
+
.houseofpane > div {
29
+
min-width: 380px;
30
+
max-width: 380px;
31
+
margin-bottom: 10px;
32
+
break-inside: avoid-column;
33
+
}
+33
features/scripts/settings.html
+33
features/scripts/settings.html
···
1
+
<!DOCTYPE html>
2
+
<html>
3
+
<head>
4
+
<title>peek:core:settings</title>
5
+
<meta charset="UTF-8">
6
+
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
7
+
<meta http-equiv="Content-Security-Policy" content="script-src 'self';">
8
+
<meta name="description" content="">
9
+
<meta name="viewport" content="width=device-width, initial-scale=1">
10
+
<link rel="stylesheet" href="settings.css">
11
+
<link rel="stylesheet" href="settings.css">
12
+
<link rel="stylesheet" href="../../node_modules/lil-gui/dist/lil-gui.min.css">
13
+
</head>
14
+
<body>
15
+
<div>
16
+
<h1>peek</h1>
17
+
</div>
18
+
19
+
<div class="houseofpane">
20
+
</div>
21
+
22
+
<div>
23
+
Node.js <span id="node-version"></span><br>
24
+
Chromium <span id="chrome-version"></span><br>
25
+
Electron <span id="electron-version"></span><br>
26
+
</div>
27
+
28
+
<script type=module src="../utils.js"></script>
29
+
<script type=module src="./config.js"></script>
30
+
<script type=module src="./settings.js"></script>
31
+
32
+
</body>
33
+
</html>
+105
features/scripts/settings.js
+105
features/scripts/settings.js
···
1
+
import { id, labels, schemas, storageKeys, defaults } from './config.js';
2
+
import { log as l, openStore, addToGUI } from "../utils.js";
3
+
import GUI from './../../node_modules/lil-gui/dist/lil-gui.esm.min.js';
4
+
5
+
const log = function(...args) { l(id, args); };
6
+
7
+
log('background', id);
8
+
9
+
const debug = window.app.debug;
10
+
const clear = false;
11
+
12
+
const store = openStore(id, defaults, clear /* clear storage */);
13
+
const api = window.app;
14
+
15
+
const container = document.querySelector('.houseofpane');
16
+
let prefs = store.get(storageKeys.PREFS);
17
+
let items = store.get(storageKeys.ITEMS);
18
+
19
+
const persistToStorage = () => {
20
+
store.set(storageKeys.PREFS, prefs);
21
+
store.set(storageKeys.ITEMS, items);
22
+
};
23
+
24
+
const init = () => {
25
+
26
+
/*
27
+
pubsub.publish('open', {
28
+
feature: msg.prefs.startupFeature
29
+
});
30
+
*/
31
+
32
+
// Initialize settings UI
33
+
const container = document.querySelector('.houseofpane');
34
+
35
+
const gui = new GUI({
36
+
touchStyles: false,
37
+
container: container,
38
+
title: labels.featureDisplay
39
+
});
40
+
41
+
// anytime anything changes, persist to storage
42
+
gui.onFinishChange(persistToStorage);
43
+
44
+
// Add prefs
45
+
const prefsFolder = gui.addFolder(
46
+
schemas.prefs.title
47
+
);
48
+
49
+
const pProps = schemas.prefs.properties;
50
+
const data = prefs;
51
+
52
+
Object.keys(pProps).forEach(k => {
53
+
// schema for property
54
+
const s = pProps[k];
55
+
56
+
// value (or default)
57
+
const v =
58
+
(data && data.hasOwnProperty(k))
59
+
? data[k]
60
+
: pProps[k].default;
61
+
62
+
const disabled = false;
63
+
const step = pProps[k].type == 'integer' ? 1 : null;
64
+
65
+
addToGUI(prefsFolder, k, v, disabled, step).onChange(e => {
66
+
// TODO: validate new value against schema
67
+
prefs[k] = e;
68
+
});;
69
+
});
70
+
71
+
// Add items
72
+
items.forEach((item, i) => {
73
+
const folder = gui.addFolder(item.title);
74
+
75
+
addToGUI(folder, 'Id', item.id).onChange(e => {
76
+
items[i].id = e;
77
+
});
78
+
addToGUI(folder, 'Script title', item.address).onChange(e => {
79
+
items[i].title = e;
80
+
});
81
+
addToGUI(folder, 'Version', item.version).onChange(e => {
82
+
items[i].version = e;
83
+
});
84
+
addToGUI(folder, 'Address to load', item.address).onChange(e => {
85
+
items[i].address = e;
86
+
});
87
+
addToGUI(folder, 'Selector', item.selector).onChange(e => {
88
+
items[i].selector = e;
89
+
});
90
+
// TODO: make options
91
+
addToGUI(folder, 'Property', item.property).onChange(e => {
92
+
items[i].property = e;
93
+
});
94
+
addToGUI(folder, 'Interval', item.interval).onChange(e => {
95
+
items[i].interval = e;
96
+
});
97
+
addToGUI(folder, 'Store history (not supported)', item.storeHistory).disable();
98
+
addToGUI(folder, 'Notify on changed value', item.notifyOnChange).disable();
99
+
addToGUI(folder, 'Enabled', item.enabled).onChange(e => {
100
+
items[i].enabled = e;
101
+
});
102
+
});
103
+
};
104
+
105
+
window.addEventListener('load', init);
+33
features/slides/settings.css
+33
features/slides/settings.css
···
1
+
body {
2
+
font-family: -apple-system, BlinkMacSystemFont, helvetica neue, helvetica, sans-serif;
3
+
font-feature-settings: "tnum";
4
+
font-size: 12.4px;
5
+
font-variant-numeric: tabular-nums;
6
+
margin: 12px;
7
+
}
8
+
9
+
body > div {
10
+
margin-bottom: 10px;
11
+
}
12
+
13
+
body > div > div {
14
+
margin-bottom: 10px;
15
+
}
16
+
17
+
h1 {
18
+
margin-top: 1px;
19
+
margin-bottom: 2px;
20
+
}
21
+
22
+
.houseofpane {
23
+
justify-content: space-between;
24
+
columns: 2;
25
+
}
26
+
27
+
/* tweakpanes */
28
+
.houseofpane > div {
29
+
min-width: 380px;
30
+
max-width: 380px;
31
+
margin-bottom: 10px;
32
+
break-inside: avoid-column;
33
+
}
+33
features/slides/settings.html
+33
features/slides/settings.html
···
1
+
<!DOCTYPE html>
2
+
<html>
3
+
<head>
4
+
<title>peek:core:settings</title>
5
+
<meta charset="UTF-8">
6
+
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
7
+
<meta http-equiv="Content-Security-Policy" content="script-src 'self';">
8
+
<meta name="description" content="">
9
+
<meta name="viewport" content="width=device-width, initial-scale=1">
10
+
<link rel="stylesheet" href="settings.css">
11
+
<link rel="stylesheet" href="settings.css">
12
+
<link rel="stylesheet" href="../../node_modules/lil-gui/dist/lil-gui.min.css">
13
+
</head>
14
+
<body>
15
+
<div>
16
+
<h1>peek</h1>
17
+
</div>
18
+
19
+
<div class="houseofpane">
20
+
</div>
21
+
22
+
<div>
23
+
Node.js <span id="node-version"></span><br>
24
+
Chromium <span id="chrome-version"></span><br>
25
+
Electron <span id="electron-version"></span><br>
26
+
</div>
27
+
28
+
<script type=module src="../utils.js"></script>
29
+
<script type=module src="./config.js"></script>
30
+
<script type=module src="./settings.js"></script>
31
+
32
+
</body>
33
+
</html>
+96
features/slides/settings.js
+96
features/slides/settings.js
···
1
+
import { id, labels, schemas, storageKeys, defaults } from './config.js';
2
+
import { log as l, openStore, addToGUI } from "../utils.js";
3
+
import GUI from './../../node_modules/lil-gui/dist/lil-gui.esm.min.js';
4
+
5
+
const log = function(...args) { l(id, args); };
6
+
7
+
log('background', id);
8
+
9
+
const debug = window.app.debug;
10
+
const clear = false;
11
+
12
+
const store = openStore(id, defaults, clear /* clear storage */);
13
+
const api = window.app;
14
+
15
+
const container = document.querySelector('.houseofpane');
16
+
let prefs = store.get(storageKeys.PREFS);
17
+
let items = store.get(storageKeys.ITEMS);
18
+
19
+
const persistToStorage = () => {
20
+
store.set(storageKeys.PREFS, prefs);
21
+
store.set(storageKeys.ITEMS, items);
22
+
};
23
+
24
+
const init = () => {
25
+
26
+
/*
27
+
pubsub.publish('open', {
28
+
feature: msg.prefs.startupFeature
29
+
});
30
+
*/
31
+
32
+
// Initialize settings UI
33
+
const container = document.querySelector('.houseofpane');
34
+
35
+
const gui = new GUI({
36
+
touchStyles: false,
37
+
container: container,
38
+
title: labels.featureDisplay
39
+
});
40
+
41
+
// anytime anything changes, persist to storage
42
+
gui.onFinishChange(persistToStorage);
43
+
44
+
// Add prefs
45
+
const prefsFolder = gui.addFolder(
46
+
schemas.prefs.title
47
+
);
48
+
49
+
const pProps = schemas.prefs.properties;
50
+
const data = prefs;
51
+
52
+
Object.keys(pProps).forEach(k => {
53
+
// schema for property
54
+
const s = pProps[k];
55
+
56
+
// value (or default)
57
+
const v =
58
+
(data && data.hasOwnProperty(k))
59
+
? data[k]
60
+
: pProps[k].default;
61
+
62
+
const disabled = false;
63
+
const step = pProps[k].type == 'integer' ? 1 : null;
64
+
65
+
addToGUI(prefsFolder, k, v, disabled, step).onChange(e => {
66
+
// TODO: validate new value against schema
67
+
prefs[k] = e;
68
+
});;
69
+
});
70
+
71
+
// Add items
72
+
items.forEach((item, i) => {
73
+
const folder = gui.addFolder(item.title);
74
+
75
+
addToGUI(folder, 'Key mapping', item.keyNum).disable();
76
+
addToGUI(folder, 'Address to load', item.address).onChange(e => {
77
+
items[i].address = e;
78
+
});
79
+
addToGUI(folder, 'Persist state (not supported)', item.persistState).disable();
80
+
addToGUI(folder, 'Keep live', item.keepLive).onChange(e => {
81
+
items[i].keepLive = e;
82
+
});
83
+
addToGUI(folder, 'Allow sound (not supported)', item.allowSound).disable();
84
+
addToGUI(folder, 'Window height', item.height).onChange(e => {
85
+
items[i].height = e;
86
+
});
87
+
addToGUI(folder, 'Window width', item.width).onChange(e => {
88
+
items[i].width = e;
89
+
});
90
+
addToGUI(folder, 'Enabled', item.enabled).onChange(e => {
91
+
items[i].enabled = e;
92
+
});
93
+
});
94
+
};
95
+
96
+
window.addEventListener('load', init);
+18
-101
features/utils.js
+18
-101
features/utils.js
···
67
67
return store;
68
68
};
69
69
70
-
/*
71
-
const paneGenerator = (pane, labels, schema, data, onChange, disabled) => {
72
-
const schemaKeys = Object.keys(schema.properties);
73
-
const dataKeys = data ? Object.keys(data): [];
74
-
const keys = shemaKeys.append(dataKeys);
75
-
76
-
const inSchema = (data && data.hasOwnProperty(k))
77
-
78
-
Object.keys(data).forEach(k => {
79
-
// TODO: unhack
80
-
if (k == 'settingsAddress') {
81
-
log('sa', data[k], data);
82
-
//log('settingsAddress', k, 'v', data[k]);
83
-
const btn = pane.addButton({title: k});
84
-
85
-
btn.on('click', () => {
86
-
console.log('settings click!')
87
-
const address = data[k];
70
+
const addToGUI = (gui, label, value, disabled = false, step = null, max = null) => {
71
+
const params = {};
72
+
params[label] = value;
88
73
89
-
const params = {
90
-
debug: window.app.debug,
91
-
feature: labels.featureType,
92
-
file: address,
93
-
};
74
+
const ctr = gui.add(params, label);
94
75
95
-
window.app.publish('open', {
96
-
feature: 'feature/cmd/settings'
97
-
});
98
-
});
99
-
}
100
-
else {
101
-
// schema for property
102
-
const s = props[k];
76
+
/*
77
+
if (disabled == true) {
78
+
ctr.disable();
79
+
}
103
80
104
-
// value (or default)
105
-
const v =
106
-
(data && data.hasOwnProperty(k))
107
-
? data[k]
108
-
: props[k].default;
81
+
if (max != null) {
82
+
ctr.max(max);
83
+
}
109
84
110
-
const params = {};
111
-
const opts = {};
85
+
if (step != null) {
86
+
ctr.step(step);
87
+
}
88
+
*/
112
89
113
-
// dedecimalize
114
-
if (s.type == 'integer') {
115
-
opts.step = 1;
116
-
}
117
-
118
-
// disabled fields
119
-
if (disabled.includes(k)) {
120
-
opts.disabled = true;
121
-
}
122
-
123
-
params[k] = v;
124
-
125
-
const input = pane.addBinding(params, k, opts);
126
-
127
-
// TODO: consider inline state management
128
-
input.on('change', ev => {
129
-
// TODO: validate against schema
130
-
log('inline field change', k, ev.value)
131
-
data[k] = ev.value;
132
-
onChange(data)
133
-
});
134
-
}
135
-
});
136
-
};
137
-
*/
138
-
139
-
// TODO: fuckfuckfuck
140
-
// https://github.com/cocopon/tweakpane/issues/431
141
-
const exportPaneData = pane => {
142
-
//const val = pane.exportState();
143
-
//
144
-
const children = pane.rackApi_.children.filter(p => p.children);
145
-
const val = children.map(paneChild => {
146
-
return paneChild.children.reduce((obj, field) => {
147
-
const k = field.label;
148
-
if (!k) {
149
-
return obj;
150
-
}
151
-
152
-
let v = null;
153
-
154
-
const input = field.element.querySelector('.tp-txtv_i')
155
-
if (input) {
156
-
v = input.value;
157
-
}
158
-
159
-
const checkbox = field.element.querySelector('.tp-ckbv_i');
160
-
if (checkbox) {
161
-
v = checkbox.checked;
162
-
}
163
-
164
-
// TODO: drop fields not supported for now
165
-
if (v != undefined) {
166
-
obj[k] = v;
167
-
}
168
-
169
-
return obj;
170
-
}, {});
171
-
});
172
-
//
173
-
return val;
174
-
};
90
+
return ctr;
91
+
}
175
92
176
93
export {
177
94
log,
178
95
openStore,
179
-
//settingsPane
96
+
addToGUI
180
97
};
+11
preload.js
+11
preload.js
···
154
154
});
155
155
};
156
156
*/
157
+
158
+
window.addEventListener('DOMContentLoaded', () => {
159
+
const replaceText = (selector, text) => {
160
+
const element = document.getElementById(selector)
161
+
if (element) element.innerText = text
162
+
}
163
+
164
+
for (const dependency of ['chrome', 'node', 'electron']) {
165
+
replaceText(`${dependency}-version`, process.versions[dependency])
166
+
}
167
+
})