Skip to content

Commit 76c4bf3

Browse files
djthorpedjthorpe
committed
Switched to webpack
1 parent 23165cd commit 76c4bf3

File tree

6 files changed

+3920
-13881
lines changed

6 files changed

+3920
-13881
lines changed

‎config/rollup.config.js

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎config/webpack.config.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const path = require('path');
2+
3+
module.exports = {
4+
entry: './js/index.js',
5+
mode: 'production',
6+
output: {
7+
path: path.resolve(__dirname, '../dist'),
8+
filename: 'index.js',
9+
library: {
10+
name: 'mvc',
11+
type: 'umd',
12+
},
13+
},
14+
module: {
15+
rules: [
16+
{
17+
test: /\.css$/i,
18+
use: ['style-loader', 'css-loader'],
19+
},
20+
{
21+
test: /\.(woff|woff2|eot|ttf|otf)$/i,
22+
type: 'asset/resource',
23+
},
24+
],
25+
},
26+
};

‎html/index.html

Lines changed: 1 addition & 182 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@
22

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

88
<body>
9-
<!-- NAV -->
109
<nav class="navbar sticky-top navbar navbar-dark navbar-expand-md bg-primary" id="nav">
1110
<div class="container-fluid">
1211
<a class="navbar-brand" href="/"><strong>The VFX Cooperative</strong></a>
@@ -35,186 +34,6 @@
3534
</div>
3635
</div>
3736
</nav>
38-
39-
<!-- TABLE -->
40-
<div class="container">
41-
<table class="table table-hover">
42-
<thead>
43-
<tr>
44-
<th>Project</th>
45-
</tr>
46-
</thead>
47-
<tbody id="table">
48-
<tr class="_template">
49-
<td class="_name">Project</td>
50-
</tr>
51-
</tbody>
52-
</table>
53-
</div>
54-
55-
<!-- PLUS BUTTON -->
56-
<div class="fixed-bottom d-flex flex-row-reverse">
57-
<button id="plus" class="btn btn-circle bg-danger text-white onclick-item" title="Add">+</button>
58-
</div>
59-
60-
<!-- TOAST -->
61-
<div class="toast-container position-absolute bottom-0 end-0 p-3 d-none" style="z-index: 9999;">
62-
<div class="toast" id="toast" role="alert">
63-
<div class="toast-header">
64-
<strong class="me-auto _title"></strong>
65-
<small class="text-muted _code"></small>
66-
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
67-
</div>
68-
<div class="toast-body _reason"></div>
69-
</div>
70-
</div>
71-
72-
73-
<!-- FORM -->
74-
<div class="modal fade" id="form" tabindex="-1" role="dialog" aria-hidden="true">
75-
<div class="modal-dialog" role="document">
76-
<div class="modal-content">
77-
<form class="needs-validation" novalidate>
78-
<div class="modal-header">
79-
<h5 class="modal-title">Create New Project</h5>
80-
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
81-
</div>
82-
<div class="modal-body">
83-
<div class="row mb-3">
84-
<label for="new-name" class="col-sm-4 col-form-label">Title</label>
85-
<div class="col-sm-8">
86-
<input class="form-control" name="name" id="new-name" required>
87-
<div class="form-text">The name of the project</div>
88-
</div>
89-
</div>
90-
<div class="row mb-3">
91-
<label class="col-sm-4 col-form-label">Radio Buttons</label>
92-
<div class="col-sm-8">
93-
<div class="form-check form-check-inline">
94-
<input class="form-check-input" type="radio" name="radio" id="inlineRadio1"
95-
value="option1">
96-
<label class="form-check-label" for="inlineRadio1">1</label>
97-
</div>
98-
<div class="form-check form-check-inline">
99-
<input class="form-check-input" type="radio" name="radio" id="inlineRadio2"
100-
value="option2">
101-
<label class="form-check-label" for="inlineRadio2">2</label>
102-
</div>
103-
</div>
104-
</div>
105-
<div class="row mb-3">
106-
<label for="range" class="col-sm-4 col-form-label">Range</label>
107-
<div class="col-sm-6">
108-
<input type="range" class="form-range" id="range" name="range">
109-
</div>
110-
<div class="col-sm-2 _range">
111-
[V]
112-
</div>
113-
</div>
114-
<div class="row mb-3">
115-
<label for="range" class="col-sm-4 col-form-label">Select</label>
116-
<div class="col-sm-8">
117-
<select class="form-select" name="select" aria-label="Default select example" required>
118-
<option value="" selected>Open this select menu</option>
119-
<option value="1">One</option>
120-
<option value="2">Two</option>
121-
<option value="3">Three</option>
122-
</select>
123-
</div>
124-
</div>
125-
</div>
126-
<div class="modal-footer">
127-
<button type="submit" id="create" class="btn btn-primary">Create</button>
128-
</div>
129-
</form>
130-
</div>
131-
</div>
132-
</div>
133-
134-
<!-- APPLICATION -->
135-
<script>
136-
window.addEventListener("DOMContentLoaded", (event) => {
137-
var app = mvc.Controller.New();
138-
139-
// Models
140-
class Project extends mvc.Model {
141-
constructor(data) {
142-
super(data);
143-
console.log(data);
144-
}
145-
};
146-
mvc.Model.define(Project, {
147-
key: "_id string",
148-
name: "string",
149-
status: "string",
150-
createdDate: "created_date date",
151-
updatedDate: "updated_date date",
152-
tags: "{}string",
153-
});
154-
155-
// Add objects to the application
156-
app.Add('nav', new mvc.Nav(document.querySelector("#nav")));
157-
app.Add('toast', new mvc.Toast(document.querySelector("#toast")));
158-
app.Add('plus', new mvc.Button(document.querySelector("#plus")));
159-
app.Add('form', new mvc.Form(document.querySelector("#form")));
160-
app.Add('projects', new mvc.Provider(Project, 'https://rpi4b.mutablelogic.com'));
161-
app.Add('table', new mvc.List(document.querySelector("#table"), "_template"));
162-
163-
// Show toast when button pressed
164-
app.plus.addEventListener('mvc.button.click', (sender, target) => {
165-
app.form.replace("._range", '');
166-
app.form.show({
167-
name: 'default',
168-
radio: 'option2',
169-
range: '0',
170-
select: '3',
171-
});
172-
});
173-
174-
// Hide form when submitted
175-
app.form.addEventListener('mvc.form.submit', (sender, target) => {
176-
// Hide form
177-
app.form.hide();
178-
179-
// Show toast of values
180-
app.toast.show(JSON.stringify(app.form.values), target.id);
181-
});
182-
183-
// Form range value
184-
app.form.addEventListener('mvc.form.change', (sender, target) => {
185-
if (target.name == "range") {
186-
app.form.replace("._range", target.value);
187-
}
188-
});
189-
190-
// Set active row
191-
app.table.addEventListener('mvc.list.click', (sender, target, key) => {
192-
app.table.setClassForKey(key, 'table-active');
193-
});
194-
195-
// Projects
196-
app.projects.addEventListener('mvc.provider.error', (sender, error) => {
197-
app.toast.show(error);
198-
});
199-
app.projects.addEventListener('mvc.provider.added', (sender, project) => {
200-
app.table.set(project, project.key).replace('._name', project.$json);
201-
});
202-
app.projects.addEventListener('mvc.provider.changed', (sender, project) => {
203-
app.table.set(project, project.key).replace('._name', project.$json);
204-
});
205-
app.projects.addEventListener('mvc.provider.deleted', (sender, project) => {
206-
app.table.deleteForKey(project.key);
207-
});
208-
app.projects.addEventListener('mvc.provider.completed', (sender, changed) => {
209-
// Resort table if changed
210-
console.log("Projects loaded, changed=", changed);
211-
});
212-
213-
// Request projects every 30 secs
214-
app.projects.request('/api/project/', null, null, 30 * 1000);
215-
216-
});
217-
</script>
21837
</body>
21938

22039
</html>

‎js/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import Error from './error';
1818
import Emitter from './events';
1919
import './string';
2020

21-
// CSS and fonts
21+
// CSS and Fonts
2222
import 'bootstrap/dist/css/bootstrap.min.css';
2323
import 'bootstrap-icons/font/bootstrap-icons.css';
2424
import 'bootstrap-icons/font/fonts/bootstrap-icons.woff';

0 commit comments

Comments
 (0)