Skip to content

Commit 7c7d06e

Browse files
author
Conrad Sollitt
committed
🚀 Add JsonData class
1 parent 8f446b5 commit 7c7d06e

7 files changed

Lines changed: 593 additions & 11 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,13 @@ Overall the core Framework files, React Components, and Web Components and API a
88

99
* Updated DataFormsJS Framework to support JavaScript classes
1010
* Originally the DataFormsJS Framework was designed and developed prior to ES6 being supported among Web Browsers. Because of this custom app code was designed around ES5. This update allows for custom app code (Pages and Plugins) to use classes rather than objects which allows for modern style JavaScript development.
11-
* Functions updated:
11+
* Functions updated for the main App object:
12+
* https://github.com/dataformsjs/dataformsjs/blob/master/js/DataFormsJS.js
1213
* `app.addPage()`
1314
* `app.addPlugin()`
15+
* New class version of the core `jsonData` page object:
16+
* `js/pages/classes/JsonData.js`
17+
* All variables and functions from the original file exist in the new one. The purpose of the new file is so that an app can extend it for custom page logic when defining pages as ES6 classes rather than ES5 objects.
1418
```
1519
app.addPage('name', class Page {
1620
onRouteLoad() {}
@@ -25,6 +29,15 @@ Overall the core Framework files, React Components, and Web Components and API a
2529
onRendered() {}
2630
onRouteUnload() {}
2731
})
32+
33+
class MyPage extends JsonData {
34+
onRouteLoad() { super.onRouteLoad() };
35+
onRouteUnload() { super.onRouteUnload() };
36+
onRendered() {
37+
console.log('MyPage.onRendered()')
38+
}
39+
}
40+
app.addPage('MyPage', MyPage);
2841
```
2942

3043
## 5.10.6 (January 6, 2022)

‎docs/to-do-list.txt‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,8 @@ TODO List
3535
~/examples/framework-classes-hbs.htm
3636
~/examples/framework-classes-vue.htm
3737
- Pending updates
38+
- Update build for [js\pages\classes\JsonData.js]
3839
- Add new class templates under [js/templates/*]
39-
- New JsonData class or similar name to avoid conflict with existing [jsonData.js]
40-
This is still under consideration
4140
- Update Quick Docs and Playground Code (after release and CDN refreshes)
4241

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

‎examples/css/app-layout-1.css‎

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
* { padding:0; margin:0; }
22

3+
:root {
4+
--light-color: hsl(207deg 100% 93%);
5+
--medium-color: hsl(207deg 100% 73%);
6+
--border-color: hsl(207deg 100% 43%);
7+
}
8+
39
html {
410
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
511
min-height:100vh;
@@ -52,7 +58,13 @@ select {
5258
margin: 16px;
5359
}
5460

61+
.max-width-300 {
62+
width: 100%;
63+
max-width: 300px;
64+
}
65+
5566
.max-width-500 {
67+
width: 100%;
5668
max-width: 500px;
5769
}
5870

@@ -61,15 +73,42 @@ ul.record-list {
6173
}
6274

6375
ul.record-list li {
64-
border: 1px solid hsl(207deg 100% 43%);
76+
border: 1px solid var(--border-color);
6577
padding: 8px 16px;
6678
text-align: center;
6779
border-bottom: none;
6880
}
6981
ul.record-list li:last-child {
70-
border-bottom: 1px solid hsl(207deg 100% 43%);
82+
border-bottom: 1px solid var(--border-color);
7183
}
7284

7385
ul.record-list li:nth-child(even) {
74-
background-color: hsl(207deg 100% 93%);
75-
}
86+
background-color: var(--light-color);
87+
}
88+
89+
table {
90+
border-collapse: collapse;
91+
}
92+
93+
th,
94+
td {
95+
border: 1px solid var(--border-color);
96+
padding: 4px 8px;
97+
}
98+
99+
thead tr {
100+
background-color: var(--medium-color);
101+
}
102+
103+
tbody tr:nth-child(even) {
104+
background-color: var(--light-color);
105+
}
106+
107+
tbody tr.row-odd { background-color: #fff; }
108+
tbody tr.row-even { background-color: var(--light-color); }
109+
tbody tr.highlight { background-color: yellow; }
110+
111+
.text-right { text-align: right; }
112+
113+
.mt-0 { margin-top:0; }
114+
.mt-15 { margin-top:15px; }

‎examples/framework-classes-hbs.htm‎

Lines changed: 70 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
<a class="active" href="#/">Home</a>
1515
<a href="#/calc">Calculator</a>
1616
<a href="#/time">Time</a>
17+
<a href="#/data">Data</a>
1718
</nav>
1819
</header>
1920

@@ -37,7 +38,7 @@ <h1>DataFormsJS Framework Demo using Handlebars with ES6 Code and JavaScript Cla
3738
<template
3839
data-route="/calc"
3940
data-page="calculator"
40-
data-lazy-load="Calculator, dataBind">
41+
data-lazy-load="calculator, dataBind">
4142

4243
<section class="flex-col-600">
4344
<input data-bind="currentX" placeholder="Value X" size="7">
@@ -79,6 +80,66 @@ <h1>DataFormsJS Framework Demo using Handlebars with ES6 Code and JavaScript Cla
7980
<section data-time="ar"></section>
8081
</template>
8182

83+
<!--
84+
This page uses the `JsonData` page class instead of the `jsonData` page object.
85+
Using "jsonData" for both [data-page] and [data-lazy-load] will cause the `jsonData`
86+
version to be used. There is no difference in features. `JsonData` would be used
87+
if an app is using classes for page development and needed to extend from `JsonData`.
88+
-->
89+
<script
90+
type="text/x-template"
91+
data-engine="handlebars"
92+
data-route="/data"
93+
data-page="JsonData"
94+
data-url="https://www.dataformsjs.com/data/geonames/countries"
95+
data-load-only-once
96+
data-lazy-load="JsonData, flags, filter, sort, clickToHighlight, hbsHelpers">
97+
98+
<section class="flex-col">
99+
{{#if isLoading}}Loading...{{/if}}
100+
{{#if hasError}}Error {{errorMessage}}{{/if}}
101+
{{#if isLoaded}}
102+
<input
103+
class="max-width-300 mt-0"
104+
data-filter-selector="table"
105+
data-filter-results-text-selector="h1"
106+
data-filter-results-text-all="{totalCount} Countries"
107+
data-filter-results-text-filtered="Showing {displayCount} of {totalCount} Countries"
108+
placeholder="Enter filter, example 'North America'">
109+
110+
<table
111+
class="mt-15"
112+
data-sort
113+
data-sort-class-odd="row-odd"
114+
data-sort-class-even="row-even">
115+
<thead>
116+
<tr>
117+
<th>Code</th>
118+
<th>Name</th>
119+
<th class="text-right">Size (KM)</th>
120+
<th class="text-right">Population</th>
121+
<th>Continent</th>
122+
</tr>
123+
</thead>
124+
<tbody class="click-to-highlight">
125+
{{#each countries}}
126+
<tr>
127+
<td>{{iso}}</td>
128+
<td>
129+
<i class="{{lowerCase iso}} flag"></i>
130+
{{country}}
131+
</td>
132+
<td class="text-right" data-value="{{area_km}}">{{formatNumber area_km}}</td>
133+
<td class="text-right" data-value="{{population}}">{{formatNumber population}}</td>
134+
<td>{{continent}}</td>
135+
</tr>
136+
{{/each}}
137+
</tbody>
138+
</table>
139+
{{/if}}
140+
</section>
141+
</script>
142+
82143
<!--
83144
Handlebars
84145
https://handlebarsjs.com/
@@ -94,9 +155,16 @@ <h1>DataFormsJS Framework Demo using Handlebars with ES6 Code and JavaScript Cla
94155
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/navLinks.min.js"></script>
95156
<script>
96157
app.lazyLoad = {
97-
Calculator: 'framework-classes-calc-page.js',
158+
calculator: 'framework-classes-calc-page.js',
98159
time: 'framework-classes-time-plugin.js',
99160
dataBind: 'https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/dataBind.min.js',
161+
jsonData: 'https://cdn.jsdelivr.net/npm/dataformsjs@5/js/pages/jsonData.min.js',
162+
JsonData: '../js/pages/classes/JsonData.js',
163+
flags: 'https://cdn.jsdelivr.net/npm/semantic-ui-flag@2.4.0/flag.min.css',
164+
filter: 'https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/filter.min.js',
165+
sort: 'https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/sort.min.js',
166+
clickToHighlight: 'https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/clickToHighlight.min.js',
167+
hbsHelpers: 'https://cdn.jsdelivr.net/npm/dataformsjs@5/js/extensions/handlebars-helpers.min.js',
100168
};
101169
app.settings.lazyTemplateSelector = '#loading-screen';
102170
</script>

‎examples/framework-classes-vue.htm‎

Lines changed: 67 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
<a class="active" href="#/">Home</a>
1515
<a href="#/calc">Calculator</a>
1616
<a href="#/time">Time</a>
17+
<a href="#/data">Data</a>
1718
</nav>
1819
</header>
1920

@@ -39,7 +40,7 @@ <h1>DataFormsJS Framework Demo using Vue with ES6 Code and JavaScript Classes</h
3940
data-engine="vue"
4041
data-route="/calc"
4142
data-page="calculator"
42-
data-lazy-load="Calculator, dataBind">
43+
data-lazy-load="calculator, dataBind">
4344

4445
<section class="flex-col-600">
4546
<input v-model="currentX" placeholder="Value X" size="7">
@@ -71,6 +72,63 @@ <h1>DataFormsJS Framework Demo using Vue with ES6 Code and JavaScript Classes</h
7172
<section data-time="ar"></section>
7273
</template>
7374

75+
<!--
76+
This page uses the `JsonData` page class instead of the `jsonData` page object.
77+
Using "jsonData" for both [data-page] and [data-lazy-load] will cause the `jsonData`
78+
version to be used. There is no difference in features. `JsonData` would be used
79+
if an app is using classes for page development and needed to extend from `JsonData`.
80+
-->
81+
<script
82+
type="text/x-template"
83+
data-engine="vue"
84+
data-route="/data"
85+
data-page="JsonData"
86+
data-url="https://www.dataformsjs.com/data/geonames/countries"
87+
data-load-only-once
88+
data-countries
89+
data-lazy-load="JsonData, flags, filter, sort, clickToHighlight, vueDirectives">
90+
91+
<section v-if="isLoading">Loading</section>
92+
<section v-if="hasError">{{ errorMessage }}</section>
93+
<section v-if="isLoaded" class="flex-col">
94+
<input
95+
class="max-width-300 mt-0"
96+
data-filter-selector="table"
97+
data-filter-results-text-selector="h1"
98+
data-filter-results-text-all="{totalCount} Countries"
99+
data-filter-results-text-filtered="Showing {displayCount} of {totalCount} Countries"
100+
placeholder="Enter filter, example 'North America'">
101+
102+
<table
103+
class="mt-15"
104+
data-sort
105+
data-sort-class-odd="row-odd"
106+
data-sort-class-even="row-even">
107+
<thead>
108+
<tr>
109+
<th>Code</th>
110+
<th>Name</th>
111+
<th class="text-right">Size (KM)</th>
112+
<th class="text-right">Population</th>
113+
<th>Continent</th>
114+
</tr>
115+
</thead>
116+
<tbody class="click-to-highlight">
117+
<tr v-for="country in countries">
118+
<td>{{ country.iso }}</td>
119+
<td>
120+
<i v-bind:class="country.iso.toLowerCase() + ' flag'"></i>
121+
<span>{{ country.country }}<span>
122+
</td>
123+
<td class="text-right" v-bind:data-value="country.area_km" v-format-number="country.area_km"></td>
124+
<td class="text-right" v-bind:data-value="country.population" v-format-number="country.population"></td>
125+
<td>{{ country.continent }}</td>
126+
</tr>
127+
</tbody>
128+
</table>
129+
</section>
130+
</script>
131+
74132
<!--
75133
Vue
76134
https://vuejs.org/
@@ -89,9 +147,16 @@ <h1>DataFormsJS Framework Demo using Vue with ES6 Code and JavaScript Classes</h
89147
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/navLinks.min.js"></script>
90148
<script>
91149
app.lazyLoad = {
92-
Calculator: 'framework-classes-calc-page.js',
150+
calculator: 'framework-classes-calc-page.js',
93151
time: 'framework-classes-time-plugin.js',
94152
dataBind: 'https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/dataBind.min.js',
153+
jsonData: 'https://cdn.jsdelivr.net/npm/dataformsjs@5/js/pages/jsonData.min.js',
154+
JsonData: '../js/pages/classes/JsonData.js',
155+
flags: 'https://cdn.jsdelivr.net/npm/semantic-ui-flag@2.4.0/flag.min.css',
156+
filter: 'https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/filter.min.js',
157+
sort: 'https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/sort.min.js',
158+
clickToHighlight: 'https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/clickToHighlight.min.js',
159+
vueDirectives: 'https://cdn.jsdelivr.net/npm/dataformsjs@5/js/extensions/vue-directives.min.js',
95160
};
96161
app.settings.lazyTemplateSelector = '#loading-screen';
97162
</script>

0 commit comments

Comments
 (0)