Skip to content

Commit 58c7041

Browse files
author
Conrad Sollitt
committed
✨Development and Demo Updates
1 parent 7c7d06e commit 58c7041

6 files changed

Lines changed: 162 additions & 13 deletions

File tree

‎docs/to-do-list.txt‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,14 @@ TODO List
3434
will need to be updated to point to it:
3535
~/examples/framework-classes-hbs.htm
3636
~/examples/framework-classes-vue.htm
37+
~/examples/template-files-hbs.htm
38+
~/examples/template-files-vue.htm
3739
- Pending updates
40+
- Need new build and re-test with new build
3841
- Update build for [js\pages\classes\JsonData.js]
39-
- Add new class templates under [js/templates/*]
42+
- Add new class templates under [js/templates/*] and related demos:
43+
examples\template-files-hbs.htm
44+
examples\template-files-vue.htm
4045
- Update Quick Docs and Playground Code (after release and CDN refreshes)
4146

4247
**) Update the Getting Started CSS Template used here:

‎examples/template-files-hbs.htm‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -97,15 +97,18 @@
9797
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/extensions/handlebars-helpers.min.js"></script>
9898

9999
<!-- DataFormsJS Standard Files -->
100-
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/DataFormsJS.min.js"></script>
100+
<script src="../js/DataFormsJS.js"></script>
101+
<!-- <script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/DataFormsJS.min.js"></script> -->
101102
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/navLinks.min.js"></script>
102103
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/pages/jsonData.min.js"></script>
103104

104105
<!-- DataFormsJS Template Files -->
105-
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/templates/page-object.min.js"></script>
106-
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/templates/page-from-jsonData.min.js"></script>
107-
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/templates/plugin-function.min.js"></script>
108-
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/templates/plugin-object.min.js"></script>
106+
<!-- <script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/templates/page-object.js"></script> -->
107+
<script src="../js/templates/page-class.js"></script>
108+
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/templates/page-from-jsonData.js"></script>
109+
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/templates/plugin-function.js"></script>
110+
<!-- <script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/templates/plugin-object.js"></script> -->
111+
<script src="../js/templates/plugin-class.js"></script>
109112
<!-- For an example of [page-from-entryForm.js] search the source code -->
110113
</body>
111114
</html>

‎examples/template-files-vue.htm‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -126,18 +126,21 @@ <h3 v-if="hasError" class="error">{{ errorMessage }}</h3>
126126
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
127127

128128
<!-- DataFormsJS Standard Files -->
129-
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/DataFormsJS.min.js"></script>
129+
<script src="../js/DataFormsJS.js"></script>
130+
<!-- <script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/DataFormsJS.min.js"></script> -->
130131
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/navLinks.min.js"></script>
131132
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/pages/jsonData.min.js"></script>
132133

133134
<!-- DataFormsJS Vue Directives -->
134135
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/extensions/vue-directives.min.js"></script>
135136

136137
<!-- DataFormsJS Template Files -->
137-
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/templates/page-object.min.js"></script>
138-
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/templates/page-from-jsonData.min.js"></script>
139-
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/templates/plugin-function.min.js"></script>
140-
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/templates/plugin-object.min.js"></script>
138+
<!-- <script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/templates/page-object.js"></script> -->
139+
<script src="../js/templates/page-class.js"></script>
140+
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/templates/page-from-jsonData.js"></script>
141+
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/templates/plugin-function.js"></script>
142+
<!-- <script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/templates/plugin-object.js"></script> -->
143+
<script src="../js/templates/plugin-class.js"></script>
141144

142145
<script>
143146
(function () {

‎js/DataFormsJS.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1350,7 +1350,7 @@
13501350
if (typeof page === 'object') {
13511351
obj = page;
13521352
checkModel = true;
1353-
} else if (typeof page === 'function' && page.prototype !== undefined) {
1353+
} else if (typeof page === 'function' && page.toString().substr(0, 5) === 'class') {
13541354
// JavaScript class is being used
13551355
obj = page.prototype;
13561356
} else {
@@ -1423,7 +1423,7 @@
14231423
}
14241424

14251425
// If a class was passed then create an instance
1426-
if (typeof plugin === 'function' && plugin.prototype !== undefined) {
1426+
if (typeof plugin === 'function' && plugin.toString().substr(0, 5) === 'class') {
14271427
plugin = new plugin();
14281428
}
14291429

‎js/templates/page-class.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/**
2+
* Page Class Template
3+
*/
4+
5+
/* global app */
6+
/* jshint esversion: 6 */
7+
8+
class Page {
9+
constructor() {
10+
this.counter = 0;
11+
}
12+
13+
logFuncHash(func) {
14+
console.log('%cpage.' + func + ': ' + window.location.hash, 'color:navy;');
15+
}
16+
17+
// Called once when the view is loaded with data
18+
setupView() {
19+
// ** Add custom page logic here
20+
this.logFuncHash('setup');
21+
}
22+
23+
/**
24+
* Controller function that is called once before the route
25+
* will be loaded. This is usefull for calling web services
26+
* before any rendering happens. For example, see usage on the
27+
* core [pages/jsonData.js] file.
28+
*
29+
* When using Vue this will be called from the Vue instance
30+
* [mounted()] function.
31+
*/
32+
onRouteLoad() {
33+
console.log('%cPage Loaded', 'font-weight:bold;');
34+
this.counter++;
35+
this.logFuncHash('onRouteLoad');
36+
}
37+
38+
/**
39+
* Define the Controller [onBeforeRender()] function.
40+
* This gets called each time the view is redrawn before
41+
* the the HTML is rendered.
42+
*
43+
* When using Vue this function will not be called so instead
44+
* use [onRouteLoad()] to handle early controller logic.
45+
*/
46+
onBeforeRender() {
47+
this.logFuncHash('onBeforeRender');
48+
}
49+
50+
/**
51+
* Define the Controller [onRendered()] function.
52+
* This gets called each time the view is redrawn.
53+
*/
54+
onRendered() {
55+
this.logFuncHash('onRendered');
56+
this.setupView();
57+
}
58+
59+
/**
60+
* Define the Controller [onRouteUnload()] function.
61+
* This event gets called only once per hash change when
62+
* the current route is unloaded. It can be used to call
63+
* [window.clearTimeout()] for page timers or cleanup
64+
* for other resources.
65+
*
66+
* When using Vue this will be called from the Vue instance
67+
* [beforeDestroy()] function.
68+
*/
69+
onRouteUnload() {
70+
this.logFuncHash('onRouteUnload');
71+
console.log('%cPage Unloaded', 'font-weight:bold;');
72+
}
73+
}
74+
75+
/**
76+
* Add page to app
77+
* The name defined here can be used with [data-page] from HTML
78+
*/
79+
app.addPage('pageName', Page);

‎js/templates/plugin-class.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/**
2+
* Plugin Class Template
3+
*/
4+
5+
/* global app */
6+
/* jshint esversion: 6 */
7+
8+
class MyPlugin {
9+
/**
10+
* Event that runs only once per hash change and before the view is
11+
* rendered. Plugins that use [onRouteLoad()] run only one function
12+
* at a time. This event would typically be used to download resources
13+
* needed by the page that are not part of the page's controller. Since
14+
* this blocks the view from updating is should only be used with very
15+
* fast web services, for example downloading simple JSON files.
16+
*
17+
* If calling [next(false)] then the route will not be loaded; this should
18+
* only be used if the plugin changes the URL - [window.location = 'new_url'].
19+
*
20+
* @param {function} next
21+
*/
22+
onRouteLoad(next) {
23+
console.log('plugin.onRouteLoad');
24+
next();
25+
}
26+
27+
/**
28+
* Event called before the current view is rendered
29+
*/
30+
onBeforeRender() {
31+
console.log('plugin.onBeforeRender');
32+
}
33+
34+
/**
35+
* Event called after the HTML is rendered and before the page's controller
36+
* [onRendered()] function runs. Defining and using [element] is optional and
37+
* only passed when certain functions such as [app.refreshHtmlControl()] are called.
38+
*
39+
* @param {undefined|HTMLElement}
40+
*/
41+
onRendered(element) {
42+
console.log('plugin.onRendered');
43+
/* eslint no-unused-vars: "off" */
44+
element = (element === undefined ? document : element);
45+
}
46+
47+
/**
48+
* Event called only once per hash change or page refresh
49+
* and occurs before the current page is unloaded.
50+
*/
51+
onRouteUnload() {
52+
console.log('plugin.onRouteUnload');
53+
}
54+
};
55+
56+
/**
57+
* Add Plugin to DataFormsJS
58+
*/
59+
app.addPlugin('pluginName', MyPlugin);

0 commit comments

Comments
 (0)