Skip to content

Commit 954af5f

Browse files
djthorpedjthorpe
committed
Updated framework
1 parent 8a9cc64 commit 954af5f

File tree

17 files changed

+12397
-2714
lines changed

17 files changed

+12397
-2714
lines changed

‎config/rollup.config.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { nodeResolve } from '@rollup/plugin-node-resolve';
2+
import postcss from 'rollup-plugin-postcss';
3+
4+
export default {
5+
input: 'js/index.js',
6+
output: {
7+
file: 'dist/js/index.js',
8+
format: 'iife',
9+
},
10+
plugins: [
11+
nodeResolve(),
12+
postcss({
13+
extensions: ['.css'],
14+
}),
15+
],
16+
external: [
17+
'popper.js',
18+
],
19+
};

‎css/style.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
2+
/* Plus Button */
3+
.btn-circle {
4+
width: 40px;
5+
height: 40px;
6+
padding: 0px;
7+
margin: 40px;
8+
border-radius: 20px;
9+
text-align: center;
10+
font-size: 36px;
11+
line-height: 0;
12+
}

‎etc/rpi4b.conf

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
server {
3+
# HTTP configuration
4+
listen 80;
5+
listen [::]:80;
6+
7+
# Basic details
8+
root /opt/js-framework/html;
9+
index index.html;
10+
11+
# Root location is served from /static
12+
location / {
13+
ssi on;
14+
}
15+
16+
# Serve javascript files
17+
location /js {
18+
alias /opt/js-framework/dist/js;
19+
}
20+
}

‎html/index.html

Lines changed: 153 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -2,64 +2,166 @@
22

33
<head>
44
<title>Test</title>
5-
<script src="../dist/js/index.js"></script>
5+
<script src="/js/index.js"></script>
66
</head>
77

88
<body>
9-
<h1>Tests</h1>
9+
<!-- NAV -->
10+
<nav class="navbar sticky-top navbar navbar-dark navbar-expand-md bg-primary" id="nav">
11+
<div class="container-fluid">
12+
<a class="navbar-brand" href="/"><strong>The VFX Cooperative</strong></a>
13+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-items"
14+
aria-expanded="false">
15+
<span class="navbar-toggler-icon"></span>
16+
</button>
17+
<div class="collapse navbar-collapse" id="navbar-items">
18+
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
19+
<li class="nav-item" id="nav_home">
20+
<a class="nav-link" href="/">Home</a>
21+
</li>
22+
<li class="nav-item" id="nav_projects">
23+
<a class="nav-link" href="/projects/">Projects</a>
24+
</li>
25+
<li class="nav-item" id="nav_dataio">
26+
<a class="nav-link" href="/dataio/">DataIO</a>
27+
</li>
28+
<li class="nav-item" id="nav_docs">
29+
<a class="nav-link" href="/docs/">Docs</a>
30+
</li>
31+
<li class="nav-item" id="nav_status">
32+
<a class="nav-link" href="/status/">Status</a>
33+
</li>
34+
</ul>
35+
</div>
36+
</div>
37+
</nav>
38+
39+
<!-- PLUS BUTTON -->
40+
<div class="fixed-bottom d-flex flex-row-reverse">
41+
<button id="plus" class="btn btn-circle bg-danger text-white onclick-item" title="Add">+</button>
42+
</div>
43+
44+
<!-- TOAST -->
45+
<div class="toast-container position-absolute bottom-0 end-0 p-3 d-none" style="z-index: 9999;">
46+
<div class="toast" id="toast" role="alert">
47+
<div class="toast-header">
48+
<strong class="me-auto _title"></strong>
49+
<small class="text-muted _code"></small>
50+
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
51+
</div>
52+
<div class="toast-body _reason"></div>
53+
</div>
54+
</div>
55+
56+
57+
<!-- FORM -->
58+
<div class="modal fade" id="form" tabindex="-1" role="dialog" aria-hidden="true">
59+
<div class="modal-dialog" role="document">
60+
<div class="modal-content">
61+
<form class="needs-validation" novalidate>
62+
<div class="modal-header">
63+
<h5 class="modal-title">Create New Project</h5>
64+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
65+
</div>
66+
<div class="modal-body">
67+
<div class="row mb-3">
68+
<label for="new-name" class="col-sm-4 col-form-label">Title</label>
69+
<div class="col-sm-8">
70+
<input class="form-control" name="name" id="new-name" required>
71+
<div class="form-text">The name of the project</div>
72+
</div>
73+
</div>
74+
<div class="row mb-3">
75+
<label class="col-sm-4 col-form-label">Radio Buttons</label>
76+
<div class="col-sm-8">
77+
<div class="form-check form-check-inline">
78+
<input class="form-check-input" type="radio" name="radio"
79+
id="inlineRadio1" value="option1">
80+
<label class="form-check-label" for="inlineRadio1">1</label>
81+
</div>
82+
<div class="form-check form-check-inline">
83+
<input class="form-check-input" type="radio" name="radio"
84+
id="inlineRadio2" value="option2">
85+
<label class="form-check-label" for="inlineRadio2">2</label>
86+
</div>
87+
</div>
88+
</div>
89+
<div class="row mb-3">
90+
<label for="range" class="col-sm-4 col-form-label">Range</label>
91+
<div class="col-sm-6">
92+
<input type="range" class="form-range" id="range" name="range">
93+
</div>
94+
<div class="col-sm-2 _range">
95+
[V]
96+
</div>
97+
</div>
98+
<div class="row mb-3">
99+
<label for="range" class="col-sm-4 col-form-label">Select</label>
100+
<div class="col-sm-8">
101+
<select class="form-select" name="select" aria-label="Default select example" required>
102+
<option value="" selected>Open this select menu</option>
103+
<option value="1">One</option>
104+
<option value="2">Two</option>
105+
<option value="3">Three</option>
106+
</select>
107+
</div>
108+
</div>
109+
</div>
110+
<div class="modal-footer">
111+
<button type="submit" id="create" class="btn btn-primary">Create</button>
112+
</div>
113+
</form>
114+
</div>
115+
</div>
116+
</div>
117+
118+
<!-- APPLICATION -->
10119
<script>
11-
class StrModel extends mvc.Model {
12-
constructor(data) {
13-
super({ value: data });
14-
}
15-
}
16-
17-
mvc.Model.define(StrModel, {
18-
"value": "string",
19-
});
120+
window.addEventListener("DOMContentLoaded", (event) => {
121+
var app = mvc.Controller.New();
20122

21-
class KeyModel extends mvc.Model {
22-
constructor(data) {
23-
super(data);
24-
}
25-
getClassName() {
26-
return this.$className;
27-
}
28-
get override() {
29-
return "done!";
30-
}
31-
}
32-
33-
mvc.Model.define(KeyModel, {
34-
"str": "_id string",
35-
"map": "{}number",
36-
"arr": "[]StrModel",
37-
"override": "string",
38-
});
123+
// Models
124+
class Project extends mvc.Model {};
125+
126+
// Add objects to the application
127+
app.Add('nav', new mvc.Nav(document.querySelector("#nav")));
128+
app.Add('toast', new mvc.Toast(document.querySelector("#toast")));
129+
app.Add('plus', new mvc.Button(document.querySelector("#plus")));
130+
app.Add('form', new mvc.Form(document.querySelector("#form")));
131+
app.Add('projects', new mvc.Provider(Project,'https://rpi4b.mutablelogic.com'));
132+
133+
// Show toast when button pressed
134+
app.plus.addEventListener('mvc.button.click', (sender, target) => {
135+
app.form.replace("._range",'');
136+
app.form.show({
137+
name: 'default',
138+
radio: 'option2',
139+
range: '0',
140+
select: '3',
141+
});
142+
});
143+
144+
// Hide form when submitted
145+
app.form.addEventListener('mvc.form.submit', (sender, target) => {
146+
// Hide form
147+
app.form.hide();
148+
149+
// Show toast of values
150+
app.toast.show(JSON.stringify(app.form.values), target.id);
151+
});
152+
153+
// Form range value
154+
app.form.addEventListener('mvc.form.change', (sender, target) => {
155+
if (target.name == "range") {
156+
app.form.replace("._range", target.value);
157+
}
158+
});
159+
160+
// Request projects
161+
app.projects.request('/api/project/');
39162

40-
var obj = new KeyModel({ _id: "[this is the key]", map: { a: 1, b: 2 }, arr: ["a", "b"], override: "not done" });
41-
obj.$type.forEach((v, k) => {
42-
console.log(`${k} => `, v);
43-
});
44-
console.log("className=", obj.$className);
45-
console.log("getClassName=", obj.getClassName());
46-
console.log("str=", obj.str);
47-
console.log("map=", obj.map);
48-
console.log("arr=", obj.arr);
49-
console.log("override=", obj.override);
50-
console.log("toString=", "" + obj);
51-
52-
var provider = new mvc.Provider();
53-
provider.addEventListener('mvc.provider.completed', (sender) => {
54-
console.log("Completed", sender);
55-
});
56-
provider.addEventListener('mvc.provider.error', (sender, error) => {
57-
console.log("Error", error);
58-
});
59-
provider.fetch('https://rpi4b.mutablelogic.com/', {
60-
mode: 'no-cors',
61163
});
62164
</script>
63165
</body>
64166

65-
</html>
167+
</html>

‎js/button.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// Button
2+
3+
import View from './view';
4+
5+
// ////////////////////////////////////////////////////////////////////////////
6+
// CONSTANTS
7+
8+
const EVENT_ROOT = 'mvc.button';
9+
const EVENT_CLICK = `${EVENT_ROOT}.click`;
10+
11+
// ////////////////////////////////////////////////////////////////////////////
12+
// BUTTON
13+
14+
export default class Button extends View {
15+
constructor(node) {
16+
super(node);
17+
node.addEventListener('click', (evt) => {
18+
this.dispatchEvent(EVENT_CLICK, this, evt.target);
19+
});
20+
}
21+
}

‎js/controller.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// Controller class to be subclassed by an actual controller
2+
3+
import { Tooltip } from 'bootstrap';
4+
import View from './view';
5+
import Provider from './provider';
6+
7+
export default class Controller {
8+
constructor() {
9+
this.$providers = new Map();
10+
this.$views = new Map();
11+
12+
// Set up tooltips
13+
document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((node) => {
14+
// eslint-disable-next-line no-new
15+
new Tooltip(node);
16+
});
17+
}
18+
19+
Add(key, object) {
20+
if (!key || this.$providers.has(key) || this.$views.has(key)) {
21+
throw Error(`Controller: Duplicate or invalid key ${key}`);
22+
}
23+
// Set object
24+
if (object instanceof View) {
25+
this.$views.set(key, object);
26+
} else if (object instanceof Provider) {
27+
this.$providers.set(key, object);
28+
} else {
29+
throw new Error(`Controller: Invalid object added to controller with key ${key}`);
30+
}
31+
// Set property
32+
Object.defineProperty(this, key, {
33+
value: object,
34+
writable: false,
35+
});
36+
}
37+
38+
static New() {
39+
return new Controller();
40+
}
41+
}

0 commit comments

Comments
 (0)