neo.mjs 6.9.11 → 6.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/BACKERS.md +0 -30
- package/apps/ServiceWorker.mjs +2 -2
- package/apps/learnneo/index.html +7 -2
- package/apps/learnneo/neo-config.json +1 -4
- package/apps/learnneo/view/LivePreview.mjs +171 -0
- package/apps/learnneo/view/Viewport.mjs +11 -4
- package/apps/learnneo/view/ViewportController.mjs +2 -2
- package/apps/learnneo/view/home/ContentTreeList.mjs +93 -5
- package/apps/learnneo/view/home/MainContainer.mjs +16 -16
- package/apps/learnneo/view/home/MainContainerController.mjs +5 -20
- package/apps/learnneo/view/home/MainContainerModel.mjs +3 -5
- package/apps/newwebsite/index.html +3 -0
- package/buildScripts/convertDesignTokens.mjs +173 -0
- package/examples/ServiceWorker.mjs +2 -2
- package/package.json +5 -8
- package/resources/data/deck/learnneo/p/2023-10-01T18-29-19-158Z.md +14 -16
- package/resources/data/deck/learnneo/p/2023-10-07T19-18-28-517Z.md +9 -17
- package/resources/data/deck/learnneo/p/2023-10-08T20-20-07-934Z.md +7 -5
- package/resources/data/deck/learnneo/p/2023-10-08T20-20-37-336Z.md +17 -10
- package/resources/data/deck/learnneo/p/2023-10-14T19-25-08-153Z.md +18 -22
- package/resources/data/deck/learnneo/p/2023-10-31T13-59-37-550Z.md +31 -0
- package/resources/data/deck/learnneo/p/MainThreadAddonExample.md +15 -0
- package/resources/data/deck/learnneo/p/MainThreadAddonIntro.md +46 -0
- package/resources/data/deck/learnneo/p/TestLivePreview.md +10 -0
- package/resources/data/deck/learnneo/p/stylesheet.md +22 -8
- package/resources/data/deck/learnneo/t.json +126 -56
- package/resources/data/deck/training/p/2023-01-10T02-21-54-303Z.md +1 -1
- package/resources/data/deck/training/t.json +1276 -1
- package/resources/design-tokens/json/component.json +288 -0
- package/resources/design-tokens/json/core.json +352 -0
- package/resources/design-tokens/json/semantic.json +231 -0
- package/resources/images/logos/Github-logo-black.svg +1 -0
- package/resources/images/logos/Slack-logo-black.svg +17 -0
- package/resources/scss/src/apps/learnneo/Viewport.scss +3 -0
- package/resources/scss/src/apps/learnneo/home/ContentTreeList.scss +60 -13
- package/resources/scss/src/apps/learnneo/home/ContentView.scss +11 -2
- package/resources/scss/src/apps/newwebsite/MainContainer.scss +14 -15
- package/resources/scss/src/list/Base.scss +4 -0
- package/resources/scss/theme-neo-light/Global.scss +36 -16
- package/resources/scss/theme-neo-light/button/Base.scss +46 -45
- package/resources/scss/theme-neo-light/design-tokens/Component.scss +66 -1
- package/resources/scss/theme-neo-light/design-tokens/Core.scss +66 -5
- package/resources/scss/theme-neo-light/design-tokens/Semantic.scss +64 -0
- package/resources/scss/theme-neo-light/list/Base.scss +27 -6
- package/resources/scss/theme-neo-light/tab/header/Button.scss +1 -1
- package/src/DefaultConfig.mjs +2 -2
- package/src/component/StatusBadge.mjs +194 -246
- package/src/component/Video.mjs +19 -25
- package/src/controller/Base.mjs +33 -26
- package/src/core/Base.mjs +2 -2
- package/src/data/connection/Xhr.mjs +1 -1
- package/src/form/field/TextArea.mjs +3 -3
- package/src/main/DomAccess.mjs +64 -70
- package/src/main/DomEvents.mjs +1 -1
- package/src/main/addon/HighlightJS.mjs +16 -1
- package/src/main/addon/Mwc.mjs +6 -1
- package/src/worker/Manager.mjs +8 -3
- package/examples/container/dialog/MainContainer.mjs +0 -68
- package/examples/container/dialog/MainContainerController.mjs +0 -84
- package/examples/container/dialog/app.mjs +0 -6
- package/examples/container/dialog/index.html +0 -11
- package/examples/container/dialog/neo-config.json +0 -7
- package/src/container/Dialog.mjs +0 -205
- package/src/main/addon/Dialog.mjs +0 -68
package/BACKERS.md
CHANGED
|
@@ -21,36 +21,6 @@ to an entire new level.
|
|
|
21
21
|
|
|
22
22
|
This is something I would love to share with you!
|
|
23
23
|
|
|
24
|
-
<h3 align="center">Generous Backers</h3>
|
|
25
|
-
<!--generous backers start-->
|
|
26
|
-
<table>
|
|
27
|
-
<tbody>
|
|
28
|
-
<tr>
|
|
29
|
-
<td align="center" valign="middle">
|
|
30
|
-
<a href="https://github.com/keckeroo">
|
|
31
|
-
<img width="40px" src="https://avatars.githubusercontent.com/u/1653769?v=4">
|
|
32
|
-
</a>
|
|
33
|
-
</td>
|
|
34
|
-
</tr>
|
|
35
|
-
</tbody>
|
|
36
|
-
</table>
|
|
37
|
-
<!--generous backers end-->
|
|
38
|
-
|
|
39
|
-
<h3 align="center">Backers</h3>
|
|
40
|
-
<!--backers start-->
|
|
41
|
-
<table>
|
|
42
|
-
<tbody>
|
|
43
|
-
<tr>
|
|
44
|
-
<td align="center" valign="middle">
|
|
45
|
-
<a href="https://github.com/pyccyp">
|
|
46
|
-
<img width="40px" src="https://avatars.githubusercontent.com/u/66266683?v=4">
|
|
47
|
-
</a>
|
|
48
|
-
</td>
|
|
49
|
-
</tr>
|
|
50
|
-
</tbody>
|
|
51
|
-
</table>
|
|
52
|
-
<!--backers end-->
|
|
53
|
-
|
|
54
24
|
## Special Offer
|
|
55
25
|
The first 4 Bronze, and the first 4 Silver tier sponsors will get kept on the main Readme file for an additional year,
|
|
56
26
|
after the day the 4th sponsor does sign up (*).
|
package/apps/ServiceWorker.mjs
CHANGED
package/apps/learnneo/index.html
CHANGED
|
@@ -5,8 +5,13 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
6
|
<meta charset="UTF-8">
|
|
7
7
|
<title>LearnNeo</title>
|
|
8
|
-
<link
|
|
9
|
-
|
|
8
|
+
<link
|
|
9
|
+
href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500;1,8..60,600;1,8..60,700&display=swap"
|
|
10
|
+
rel="stylesheet">
|
|
11
|
+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
12
|
+
<script>
|
|
13
|
+
|
|
14
|
+
</script>
|
|
10
15
|
</head>
|
|
11
16
|
|
|
12
17
|
<body>
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
import Base from '../../../src/container/Base.mjs';
|
|
2
|
+
import TabContainer from '../../../src/tab/Container.mjs';
|
|
3
|
+
import TextArea from '../../../src/form/field/TextArea.mjs';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @class LearnNeo.view.LivePreview
|
|
7
|
+
* @extends Neo.container.Base
|
|
8
|
+
*/
|
|
9
|
+
class LivePreview extends Base {
|
|
10
|
+
static config = {
|
|
11
|
+
/**
|
|
12
|
+
* @member {String} className='LearnNeo.view.LivePreview'
|
|
13
|
+
* @protected
|
|
14
|
+
*/
|
|
15
|
+
className: 'LearnNeo.view.LivePreview',
|
|
16
|
+
value_: null,
|
|
17
|
+
autoMount: true,
|
|
18
|
+
autoRender: true,
|
|
19
|
+
height: 400,
|
|
20
|
+
layout: 'fit',
|
|
21
|
+
/**
|
|
22
|
+
* @member {Object[]} items
|
|
23
|
+
*/
|
|
24
|
+
items: [{
|
|
25
|
+
module: TabContainer,
|
|
26
|
+
items: [{
|
|
27
|
+
module: TextArea,
|
|
28
|
+
hideLabel: true,
|
|
29
|
+
style: {height: '100%'},
|
|
30
|
+
reference: 'textArea',
|
|
31
|
+
tabButtonConfig: {
|
|
32
|
+
text: 'Editor'
|
|
33
|
+
},
|
|
34
|
+
}, {
|
|
35
|
+
tabButtonConfig: {
|
|
36
|
+
text: 'Preview'
|
|
37
|
+
},
|
|
38
|
+
reference: 'preview',
|
|
39
|
+
ntype: 'container'
|
|
40
|
+
}]
|
|
41
|
+
}],
|
|
42
|
+
listeners: {
|
|
43
|
+
activeIndexChange: () => console.log('activeIndexChange')
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
onConstructed() {
|
|
47
|
+
console.log('constructed');
|
|
48
|
+
this.on('activeIndexChange', () => console.log('onConstructed'));
|
|
49
|
+
super.onConstructed();
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
afterSetValue(value, oldValue) {
|
|
53
|
+
if (value) {
|
|
54
|
+
this.getItem('textArea').value = value;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
doIt(button) {
|
|
59
|
+
let source = this.getReference('source').getValue();
|
|
60
|
+
|
|
61
|
+
this.getReference('codePreview').src = source;
|
|
62
|
+
|
|
63
|
+
const importRegex = /import\s+([\w-]+)\s+from\s+['"]([^'"]+)['"]/;
|
|
64
|
+
const exportRegex = /export\s+(?:default\s+)?(?:const|let|var|class|function|async\s+function|generator\s+function|async\s+generator\s+function|(\{[\s\S]*?\}))/g;
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
const cleanLines = [];
|
|
68
|
+
const importPromises = [];
|
|
69
|
+
const importModuleNames = [];
|
|
70
|
+
|
|
71
|
+
const moduleNameAndPath = [];
|
|
72
|
+
|
|
73
|
+
source.split('\n').forEach(line => {
|
|
74
|
+
let importMatch = line.match(importRegex);
|
|
75
|
+
if (importMatch) {
|
|
76
|
+
let moduleName = importMatch[1];
|
|
77
|
+
let path = importMatch[2];
|
|
78
|
+
moduleNameAndPath.push({
|
|
79
|
+
moduleName,
|
|
80
|
+
path
|
|
81
|
+
});
|
|
82
|
+
// importPromises.push(import(path));
|
|
83
|
+
// importPromises.push(import(path).then(module => {
|
|
84
|
+
// eval(`const ${moduleName} = module.default;`)
|
|
85
|
+
// }));
|
|
86
|
+
importModuleNames.push(moduleName);
|
|
87
|
+
} else if (line.match(exportRegex)) {
|
|
88
|
+
// Skip export statements
|
|
89
|
+
} else {
|
|
90
|
+
cleanLines.push(line);
|
|
91
|
+
}
|
|
92
|
+
});
|
|
93
|
+
var params = [];
|
|
94
|
+
var vars = [];
|
|
95
|
+
// Figure out the parts of the source we'll be running.
|
|
96
|
+
// o The promises/import() corresponding to the user's import statements
|
|
97
|
+
// o The vars holding the name of the imported module based on the module name for each import
|
|
98
|
+
// o The rest of the user-provided source
|
|
99
|
+
// It'll end up looking like this:
|
|
100
|
+
// Promise.all([
|
|
101
|
+
// import('../../../node_modules/neo.mjs/src/container/Base.mjs'),
|
|
102
|
+
// import('../../../node_modules/neo.mjs/src/button/Base.mjs')
|
|
103
|
+
// ]).then(([BaseModule, ButtonModule]) => {
|
|
104
|
+
// const Base = BaseModule.default;
|
|
105
|
+
// const Button = ButtonModule.default;
|
|
106
|
+
// // Class declaration goes here...
|
|
107
|
+
// });
|
|
108
|
+
// Making the promise part of the eval seems weird, but it made it easier to
|
|
109
|
+
// set up the import vars.
|
|
110
|
+
|
|
111
|
+
let promises = moduleNameAndPath.map(item => {
|
|
112
|
+
params.push(`${item.moduleName}Module`);
|
|
113
|
+
vars.push(`const ${item.moduleName} = ${item.moduleName}Module.default`);
|
|
114
|
+
return `import("${item.path}")`;
|
|
115
|
+
});
|
|
116
|
+
const codeString = `
|
|
117
|
+
Promise.all([
|
|
118
|
+
${promises.join(',\n')}
|
|
119
|
+
])
|
|
120
|
+
.then(([${params.join(', ')}]) => {
|
|
121
|
+
${vars.join('\n')}
|
|
122
|
+
${cleanLines.join('\n')}
|
|
123
|
+
container.add({module:Bar});
|
|
124
|
+
})
|
|
125
|
+
.catch(error=>container.add({ntype:'component',html:error.message}));
|
|
126
|
+
`;
|
|
127
|
+
|
|
128
|
+
// console.log(codeString);
|
|
129
|
+
|
|
130
|
+
const container = this.getReference('preview');
|
|
131
|
+
container.removeAll();
|
|
132
|
+
try {
|
|
133
|
+
const dynamicCode = new Function('container', codeString);
|
|
134
|
+
dynamicCode(container);
|
|
135
|
+
} catch (error) {
|
|
136
|
+
container.add({
|
|
137
|
+
ntype: 'component',
|
|
138
|
+
html: error.message
|
|
139
|
+
})
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
/**
|
|
144
|
+
* @param {String} reference
|
|
145
|
+
* @returns {Object|Neo.component.Base|null}
|
|
146
|
+
*/
|
|
147
|
+
getItem(reference, items = this.items) {
|
|
148
|
+
let i = 0,
|
|
149
|
+
len = items.length,
|
|
150
|
+
item,
|
|
151
|
+
childItem;
|
|
152
|
+
|
|
153
|
+
for (; i < len; i++) {
|
|
154
|
+
item = items[i];
|
|
155
|
+
if (item.reference === reference) {
|
|
156
|
+
return item
|
|
157
|
+
} else if (item.items) {
|
|
158
|
+
childItem = this.getItem(reference, item.items);
|
|
159
|
+
|
|
160
|
+
if (childItem) {
|
|
161
|
+
return childItem;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
return null
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
Neo.applyClassConfig(LivePreview);
|
|
170
|
+
|
|
171
|
+
export default LivePreview;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import BaseViewport
|
|
1
|
+
import BaseViewport from '../../../src/container/Viewport.mjs';
|
|
2
2
|
import ViewportController from './ViewportController.mjs';
|
|
3
3
|
|
|
4
4
|
/**
|
|
@@ -27,16 +27,23 @@ class Viewport extends BaseViewport {
|
|
|
27
27
|
*/
|
|
28
28
|
layout: {ntype: 'card'}
|
|
29
29
|
}
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
*
|
|
33
|
+
*/
|
|
30
34
|
onConstructed() {
|
|
31
35
|
super.onConstructed();
|
|
36
|
+
|
|
32
37
|
let me = this;
|
|
38
|
+
|
|
33
39
|
Neo.Main.getByPath({path: 'location.search'})
|
|
34
40
|
.then(data => {
|
|
35
41
|
const searchString = data?.substr(1) || '';
|
|
36
|
-
const search
|
|
37
|
-
me.deck
|
|
42
|
+
const search = searchString ? JSON.parse(`{"${decodeURI(searchString.replace(/&/g, "\",\"").replace(/=/g, "\":\""))}"}`) : {};
|
|
43
|
+
me.deck = search.deck || 'learnneo';
|
|
44
|
+
|
|
38
45
|
me.addCls(me.deck);
|
|
39
|
-
})
|
|
46
|
+
})
|
|
40
47
|
}
|
|
41
48
|
}
|
|
42
49
|
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import
|
|
1
|
+
import Controller from '../../../src/controller/Component.mjs';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* @class LearnNeo.view.ViewportController
|
|
5
5
|
* @extends Neo.controller.Component
|
|
6
6
|
*/
|
|
7
|
-
class ViewportController extends
|
|
7
|
+
class ViewportController extends Controller {
|
|
8
8
|
static config = {
|
|
9
9
|
/**
|
|
10
10
|
* @member {String} className='LearnNeo.view.ViewportController'
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import ContentStore from '../../store/Content.mjs'
|
|
2
2
|
import TreeList from '../../../../src/tree/List.mjs';
|
|
3
|
+
import LivePreview from '../LivePreview.mjs';
|
|
3
4
|
|
|
4
5
|
/**
|
|
5
6
|
* @class LearnNeo.view.home.ContentTreeList
|
|
@@ -16,6 +17,10 @@ class ContentTreeList extends TreeList {
|
|
|
16
17
|
* @member {String[]} cls=['topics-tree']
|
|
17
18
|
*/
|
|
18
19
|
cls: ['topics-tree'],
|
|
20
|
+
/**
|
|
21
|
+
* @member {Boolean} showCollapseExpandAllIcons=false
|
|
22
|
+
*/
|
|
23
|
+
showCollapseExpandAllIcons: false,
|
|
19
24
|
/**
|
|
20
25
|
* @member {Neo.data.Store} store=ContentStore
|
|
21
26
|
*/
|
|
@@ -23,7 +28,7 @@ class ContentTreeList extends TreeList {
|
|
|
23
28
|
}
|
|
24
29
|
|
|
25
30
|
get contentPath() {
|
|
26
|
-
return
|
|
31
|
+
return `../../resources/data/deck/${this.deck}`
|
|
27
32
|
}
|
|
28
33
|
|
|
29
34
|
/**
|
|
@@ -39,8 +44,18 @@ class ContentTreeList extends TreeList {
|
|
|
39
44
|
if (record.isLeaf && path) {
|
|
40
45
|
const data = await fetch(path);
|
|
41
46
|
const content = await data.text();
|
|
47
|
+
let modifiedHtml = await this.highlightPreContent(content);
|
|
48
|
+
|
|
49
|
+
// Replace <pre data-neo></neo> with <div id='neo-preview-1'/>
|
|
50
|
+
// and creaet a map keyed by ID, whose value is the javascript
|
|
51
|
+
// from the <pre>
|
|
52
|
+
let neoDivs = {};
|
|
53
|
+
|
|
54
|
+
modifiedHtml = this.extractNeoContent(modifiedHtml, neoDivs);
|
|
42
55
|
|
|
43
|
-
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
await Neo.main.addon.Markdown.markdownToHtml(modifiedHtml)
|
|
44
59
|
.then(
|
|
45
60
|
html => me.fire('contentChange', {
|
|
46
61
|
component: me,
|
|
@@ -49,9 +64,75 @@ class ContentTreeList extends TreeList {
|
|
|
49
64
|
isLab: record.name?.startsWith('Lab:')
|
|
50
65
|
}),
|
|
51
66
|
() => me.fire('contentChange', {component: me}));
|
|
67
|
+
await this.timeout(50);
|
|
68
|
+
Object.keys(neoDivs).forEach(key => {
|
|
69
|
+
// Create LivePreview for each iteration, set value to neoDivs[key]
|
|
70
|
+
let foo = Neo.create(LivePreview, {
|
|
71
|
+
value: neoDivs[key],
|
|
72
|
+
parentId: key,
|
|
73
|
+
appName: this.appName
|
|
74
|
+
})
|
|
75
|
+
console.log(foo);
|
|
76
|
+
});
|
|
52
77
|
}
|
|
53
78
|
}
|
|
54
79
|
|
|
80
|
+
extractNeoContent(htmlString, map) {
|
|
81
|
+
// 1. Replace <pre data-neo> with <div id='neo-preview-2'/>
|
|
82
|
+
// and update map with key/value pairs, where the key is the ID and the value is the <pre> contents.
|
|
83
|
+
|
|
84
|
+
// Define a regular expression to match <pre data-javascript> tags
|
|
85
|
+
const preRegex = /<pre\s+data-neo\s*>([\s\S]*?)<\/pre>/g;
|
|
86
|
+
|
|
87
|
+
let count = 0;
|
|
88
|
+
// Replace the content with tokens, and create a promise to update the corresponding content
|
|
89
|
+
var updatedHtml = htmlString.replace(preRegex, (match, preContent) => {
|
|
90
|
+
const key = `pre-live-preview-${Neo.core.IdGenerator.getId()}-${count++}`;
|
|
91
|
+
map[key] = preContent;
|
|
92
|
+
return `<div id="${key}"/>`;
|
|
93
|
+
});
|
|
94
|
+
return updatedHtml;
|
|
95
|
+
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
async highlightPreContent(htmlString) {
|
|
99
|
+
// 1. Replace <pre data-javascript> with unique tokens and create a HighlightJS.highlightAuto promise for each
|
|
100
|
+
// 2. When all promises are resolved, use their values to replace the tokens.
|
|
101
|
+
|
|
102
|
+
// Note that if we were to import HighlightJS directly, we wouldn't need all this async code.
|
|
103
|
+
|
|
104
|
+
// Define a regular expression to match <pre data-javascript> tags
|
|
105
|
+
const preRegex = /<pre\s+data-javascript\s*>([\s\S]*?)<\/pre>/g;
|
|
106
|
+
|
|
107
|
+
// Create an array to store promises for each replacement
|
|
108
|
+
const replacementPromises = [];
|
|
109
|
+
let count = 0;
|
|
110
|
+
// Replace the content with tokens, and create a promise to update the corresponding content
|
|
111
|
+
var updatedHtml = htmlString.replace(preRegex, (match, preContent) => {
|
|
112
|
+
const token = `__NEO-PRE-TOKEN-${++count}__`;
|
|
113
|
+
replacementPromises.push(this.getHighlightPromise(preContent, token, `pre-preview-${Neo.core.IdGenerator.getId()}`));
|
|
114
|
+
return token;
|
|
115
|
+
});
|
|
116
|
+
|
|
117
|
+
// Assert: updateHtml is the original, but with <pre data-javascript> replaced with tokens.
|
|
118
|
+
|
|
119
|
+
// Wait for all replacement promises to resolve
|
|
120
|
+
return Promise.all(replacementPromises)
|
|
121
|
+
.then(replacements => {
|
|
122
|
+
// Replace each token with the resolved content
|
|
123
|
+
replacements.forEach((replacement) => updatedHtml = updatedHtml.replace(replacement.token, replacement.after));
|
|
124
|
+
|
|
125
|
+
// Return the final updated HTML string
|
|
126
|
+
return updatedHtml;
|
|
127
|
+
});
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
getHighlightPromise(preContent, token, id) {
|
|
131
|
+
// Resolves to an object of the form {after, token}, where after is the updated <pre> tag content
|
|
132
|
+
return Neo.main.addon.HighlightJS.highlightAuto(preContent)
|
|
133
|
+
.then(highlight => ({after: `<pre data-javascript id="${id}">${highlight.value}</pre>`, token}));
|
|
134
|
+
}
|
|
135
|
+
|
|
55
136
|
/**
|
|
56
137
|
*
|
|
57
138
|
*/
|
|
@@ -63,7 +144,7 @@ class ContentTreeList extends TreeList {
|
|
|
63
144
|
// TODO: Tree lists should do this themselves when their store is loaded.
|
|
64
145
|
me.store.data = data.json.data;
|
|
65
146
|
me.createItems(null, me.getListItemsRoot(), 0);
|
|
66
|
-
me.update()
|
|
147
|
+
me.update()
|
|
67
148
|
})
|
|
68
149
|
}
|
|
69
150
|
|
|
@@ -75,14 +156,21 @@ class ContentTreeList extends TreeList {
|
|
|
75
156
|
|
|
76
157
|
let me = this;
|
|
77
158
|
|
|
159
|
+
Neo.main.addon.HighlightJS.loadLibrary({
|
|
160
|
+
appName: me.appName,
|
|
161
|
+
highlightJsPath: '../../docs/resources/highlight/highlight.pack.js',
|
|
162
|
+
themePath: '../../docs/resources/highlightjs-custom-github-theme.css'
|
|
163
|
+
});
|
|
164
|
+
|
|
78
165
|
Neo.Main.getByPath({path: 'location.search'})
|
|
79
166
|
.then(data => {
|
|
80
167
|
const searchString = data?.substr(1) || '';
|
|
81
168
|
const search = searchString ? JSON.parse(`{"${decodeURI(searchString.replace(/&/g, "\",\"").replace(/=/g, "\":\""))}"}`) : {};
|
|
82
169
|
me.deck = search.deck || 'learnneo';
|
|
170
|
+
|
|
83
171
|
me.doLoadStore();
|
|
84
172
|
console.log(search);
|
|
85
|
-
})
|
|
173
|
+
})
|
|
86
174
|
}
|
|
87
175
|
|
|
88
176
|
/**
|
|
@@ -90,7 +178,7 @@ class ContentTreeList extends TreeList {
|
|
|
90
178
|
*/
|
|
91
179
|
onLeafItemClick(record) {
|
|
92
180
|
super.onLeafItemClick(record);
|
|
93
|
-
this.doFetchContent(record)
|
|
181
|
+
this.doFetchContent(record)
|
|
94
182
|
}
|
|
95
183
|
}
|
|
96
184
|
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import Container
|
|
2
|
-
import ContentView
|
|
3
|
-
import ContentTreeList
|
|
1
|
+
import Container from '../../../../src/container/Base.mjs';
|
|
2
|
+
import ContentView from './ContentView.mjs';
|
|
3
|
+
import ContentTreeList from './ContentTreeList.mjs';
|
|
4
4
|
import MainContainerController from './MainContainerController.mjs';
|
|
5
|
-
import MainContainerModel
|
|
6
|
-
import Splitter
|
|
5
|
+
import MainContainerModel from './MainContainerModel.mjs';
|
|
6
|
+
import Splitter from '../../../../src/component/Splitter.mjs';
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* @class LearnNeo.view.home.MainContainer
|
|
@@ -20,31 +20,33 @@ class MainContainer extends Container {
|
|
|
20
20
|
* @member {Neo.controller.Component} controller=MainContainerController
|
|
21
21
|
*/
|
|
22
22
|
controller: MainContainerController,
|
|
23
|
+
|
|
24
|
+
cls: 'learnneo-maincontainer',
|
|
23
25
|
/**
|
|
24
26
|
* @member {Object[]} items
|
|
25
27
|
*/
|
|
26
28
|
items: [{
|
|
27
|
-
module: Container,
|
|
28
|
-
layout: 'fit',
|
|
29
|
+
module : Container,
|
|
30
|
+
layout : 'fit',
|
|
29
31
|
minWidth: 350,
|
|
30
|
-
width: 350,
|
|
31
|
-
|
|
32
|
+
width : 350,
|
|
33
|
+
cls : 'sidenav-container',
|
|
32
34
|
items: [{
|
|
33
|
-
module: ContentTreeList,
|
|
35
|
+
module : ContentTreeList,
|
|
34
36
|
reference: 'tree',
|
|
35
37
|
listeners: {
|
|
36
38
|
contentChange: 'onContentChange',
|
|
37
39
|
}
|
|
38
40
|
}]
|
|
39
41
|
}, {
|
|
40
|
-
module: Splitter,
|
|
42
|
+
module : Splitter,
|
|
41
43
|
resizeTarget: 'previous',
|
|
42
|
-
size:
|
|
44
|
+
size : 4
|
|
43
45
|
}, {
|
|
44
|
-
module: ContentView,
|
|
46
|
+
module : ContentView,
|
|
45
47
|
reference: 'content',
|
|
46
48
|
listeners: {
|
|
47
|
-
edit: 'onContentEdit',
|
|
49
|
+
edit : 'onContentEdit',
|
|
48
50
|
refresh: 'onContentRefresh'
|
|
49
51
|
}
|
|
50
52
|
}],
|
|
@@ -57,8 +59,6 @@ class MainContainer extends Container {
|
|
|
57
59
|
*/
|
|
58
60
|
model: MainContainerModel
|
|
59
61
|
}
|
|
60
|
-
|
|
61
|
-
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
Neo.applyClassConfig(MainContainer);
|
|
@@ -28,9 +28,9 @@ class MainContainerController extends Controller {
|
|
|
28
28
|
|
|
29
29
|
fetch('../../../../resources/data/deck/EditorConfig.json')
|
|
30
30
|
.then(response => response.json()
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
.then(data =>
|
|
32
|
+
this.getModel().setData('editorConfig', data)
|
|
33
|
+
))
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
/**
|
|
@@ -38,29 +38,14 @@ class MainContainerController extends Controller {
|
|
|
38
38
|
* @returns {Promise<void>}
|
|
39
39
|
*/
|
|
40
40
|
async onContentChange(data) {
|
|
41
|
-
let me
|
|
41
|
+
let me = this,
|
|
42
42
|
content = me.getReference('content');
|
|
43
43
|
|
|
44
44
|
content.toggleCls('lab', data.isLab);
|
|
45
45
|
|
|
46
|
-
content.html
|
|
46
|
+
content.html = data.html;
|
|
47
47
|
content.record = data.record;
|
|
48
48
|
|
|
49
|
-
await me.timeout(200);
|
|
50
|
-
|
|
51
|
-
// todo: we need to add the links as neo configs
|
|
52
|
-
await Neo.main.addon.HighlightJS.loadLibrary({
|
|
53
|
-
appName : me.appName,
|
|
54
|
-
highlightJsPath: '../../docs/resources/highlight/highlight.pack.js',
|
|
55
|
-
themePath : '../../docs/resources/highlightjs-custom-github-theme.css'
|
|
56
|
-
});
|
|
57
|
-
|
|
58
|
-
await me.timeout(200);
|
|
59
|
-
|
|
60
|
-
Neo.main.addon.HighlightJS.syntaxHighlightInit({
|
|
61
|
-
appName: me.appName,
|
|
62
|
-
vnodeId: content.id
|
|
63
|
-
})
|
|
64
49
|
}
|
|
65
50
|
|
|
66
51
|
/**
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import Component from '../../../../src/model/Component.mjs';
|
|
2
|
-
import
|
|
3
|
-
import Store from '../../../../src/data/Store.mjs';
|
|
2
|
+
import Store from '../../store/Content.mjs';
|
|
4
3
|
|
|
5
4
|
/**
|
|
6
5
|
* @class LearnNeo.view.home.MainContainerModel
|
|
@@ -22,9 +21,8 @@ class MainContainerModel extends Component {
|
|
|
22
21
|
*/
|
|
23
22
|
stores: {
|
|
24
23
|
tree: {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
responseRoot: "data",
|
|
24
|
+
module : Store,
|
|
25
|
+
responseRoot: 'data'
|
|
28
26
|
}
|
|
29
27
|
}
|
|
30
28
|
}
|
|
@@ -4,6 +4,9 @@
|
|
|
4
4
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
5
5
|
<meta charset="UTF-8">
|
|
6
6
|
<title>Neo Website</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
9
|
+
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500;1,8..60,600;1,8..60,700&display=swap" rel="stylesheet">
|
|
7
10
|
<body>
|
|
8
11
|
<script src="../../src/MicroLoader.mjs" type="module"></script>
|
|
9
12
|
</body>
|