@saltcorn/markup 0.6.2-beta.2 → 0.6.2-beta.3
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/builder.js +61 -56
- package/layout.js +6 -1
- package/layout_utils.js +62 -26
- package/package.json +1 -1
package/builder.js
CHANGED
|
@@ -22,8 +22,8 @@ const {
|
|
|
22
22
|
const { contract, is } = require("contractis");
|
|
23
23
|
|
|
24
24
|
/**
|
|
25
|
-
* @param {object} rec
|
|
26
|
-
* @param {object} csrf
|
|
25
|
+
* @param {object} rec
|
|
26
|
+
* @param {object} csrf
|
|
27
27
|
* @returns {object}
|
|
28
28
|
*/
|
|
29
29
|
const addCsrf = (rec, csrf) => {
|
|
@@ -32,64 +32,69 @@ const addCsrf = (rec, csrf) => {
|
|
|
32
32
|
};
|
|
33
33
|
|
|
34
34
|
/**
|
|
35
|
-
* @param {object} x
|
|
35
|
+
* @param {object} x
|
|
36
36
|
* @returns {string}
|
|
37
37
|
*/
|
|
38
38
|
const encode = (x) => encodeURIComponent(JSON.stringify(x));
|
|
39
39
|
|
|
40
|
-
module.exports =
|
|
41
|
-
/**
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
(
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
) =>
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
href: version_tag
|
|
68
|
-
? `/static_assets/${version_tag}/fonticonpicker.react.css`
|
|
69
|
-
: "/fonticonpicker.react.css",
|
|
70
|
-
}),
|
|
71
|
-
link({
|
|
72
|
-
rel: "stylesheet",
|
|
73
|
-
type: "text/css",
|
|
74
|
-
media: "screen",
|
|
75
|
-
href: version_tag
|
|
76
|
-
? `/static_assets/${version_tag}/saltcorn-builder.css`
|
|
77
|
-
: "/saltcorn-builder.css",
|
|
78
|
-
}),
|
|
79
|
-
div({ id: "saltcorn-builder" }),
|
|
80
|
-
form(
|
|
81
|
-
{ action, method: "post", id: "scbuildform" },
|
|
82
|
-
input({
|
|
83
|
-
type: "hidden",
|
|
84
|
-
name: "contextEnc",
|
|
85
|
-
value: encodeURIComponent(JSON.stringify(context)),
|
|
40
|
+
module.exports =
|
|
41
|
+
/**
|
|
42
|
+
* @param {object} opts
|
|
43
|
+
* @param {object} opts.options
|
|
44
|
+
* @param {object} opts.context
|
|
45
|
+
* @param {object} opts.action
|
|
46
|
+
* @param {string} opts.stepName
|
|
47
|
+
* @param {object} opts.layout
|
|
48
|
+
* @param {string} [opts.mode = "show"]
|
|
49
|
+
* @param {object} opts
|
|
50
|
+
* @param {object} csrfToken
|
|
51
|
+
* @returns {div}
|
|
52
|
+
*/
|
|
53
|
+
(
|
|
54
|
+
{ options, context, action, stepName, layout, mode = "show", version_tag },
|
|
55
|
+
csrfToken
|
|
56
|
+
) =>
|
|
57
|
+
div(
|
|
58
|
+
script({
|
|
59
|
+
src: version_tag
|
|
60
|
+
? `/static_assets/${version_tag}/builder_bundle.js`
|
|
61
|
+
: "/builder_bundle.js",
|
|
62
|
+
}),
|
|
63
|
+
script({
|
|
64
|
+
src: version_tag
|
|
65
|
+
? `/static_assets/${version_tag}/ckeditor/ckeditor.js`
|
|
66
|
+
: "/ckeditor/ckeditor.js",
|
|
86
67
|
}),
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
68
|
+
link({
|
|
69
|
+
rel: "stylesheet",
|
|
70
|
+
type: "text/css",
|
|
71
|
+
media: "screen",
|
|
72
|
+
href: version_tag
|
|
73
|
+
? `/static_assets/${version_tag}/fonticonpicker.react.css`
|
|
74
|
+
: "/fonticonpicker.react.css",
|
|
75
|
+
}),
|
|
76
|
+
link({
|
|
77
|
+
rel: "stylesheet",
|
|
78
|
+
type: "text/css",
|
|
79
|
+
media: "screen",
|
|
80
|
+
href: version_tag
|
|
81
|
+
? `/static_assets/${version_tag}/saltcorn-builder.css`
|
|
82
|
+
: "/saltcorn-builder.css",
|
|
83
|
+
}),
|
|
84
|
+
div({ id: "saltcorn-builder" }),
|
|
85
|
+
form(
|
|
86
|
+
{ action, method: "post", id: "scbuildform" },
|
|
87
|
+
input({
|
|
88
|
+
type: "hidden",
|
|
89
|
+
name: "contextEnc",
|
|
90
|
+
value: encodeURIComponent(JSON.stringify(context)),
|
|
91
|
+
}),
|
|
92
|
+
input({ type: "hidden", name: "stepName", value: stepName }),
|
|
93
|
+
input({ type: "hidden", name: "columns", value: "" }),
|
|
94
|
+
input({ type: "hidden", name: "layout", value: "" }),
|
|
95
|
+
input({ type: "hidden", name: "_csrf", value: csrfToken })
|
|
96
|
+
),
|
|
97
|
+
script(`builder.renderBuilder(
|
|
93
98
|
"saltcorn-builder",
|
|
94
99
|
"${encode(addCsrf(options, csrfToken))}",
|
|
95
100
|
"${encode(layout || {})}",
|
|
@@ -98,4 +103,4 @@ module.exports =
|
|
|
98
103
|
document.addEventListener('DOMContentLoaded',
|
|
99
104
|
function(){window.onerror=globalErrorCatcher},false);
|
|
100
105
|
;`)
|
|
101
|
-
|
|
106
|
+
);
|
package/layout.js
CHANGED
|
@@ -230,7 +230,12 @@ const render = ({ blockDispatch, layout, role, alerts, is_owner }) => {
|
|
|
230
230
|
return wrap(segment, isTop, ix, segment.contents || "");
|
|
231
231
|
}
|
|
232
232
|
if (segment.type === "breadcrumbs") {
|
|
233
|
-
return wrap(
|
|
233
|
+
return wrap(
|
|
234
|
+
segment,
|
|
235
|
+
isTop,
|
|
236
|
+
ix,
|
|
237
|
+
breadcrumbs(segment.crumbs || [], segment.right)
|
|
238
|
+
);
|
|
234
239
|
}
|
|
235
240
|
if (segment.type === "view") {
|
|
236
241
|
return wrap(segment, isTop, ix, segment.contents || "");
|
package/layout_utils.js
CHANGED
|
@@ -21,17 +21,19 @@ const {
|
|
|
21
21
|
i,
|
|
22
22
|
small,
|
|
23
23
|
br,
|
|
24
|
+
form,
|
|
25
|
+
input,
|
|
24
26
|
} = require("./tags");
|
|
25
27
|
|
|
26
28
|
/**
|
|
27
|
-
* @param {string} item
|
|
29
|
+
* @param {string} item
|
|
28
30
|
* @returns {string}
|
|
29
31
|
*/
|
|
30
32
|
const labelToId = (item) => text(item.replace(" ", ""));
|
|
31
33
|
|
|
32
34
|
/**
|
|
33
|
-
* @param {string} currentUrl
|
|
34
|
-
* @param {object} item
|
|
35
|
+
* @param {string} currentUrl
|
|
36
|
+
* @param {object} item
|
|
35
37
|
* @returns {boolean}
|
|
36
38
|
*/
|
|
37
39
|
const active = (currentUrl, item) =>
|
|
@@ -40,7 +42,7 @@ const active = (currentUrl, item) =>
|
|
|
40
42
|
item.subitems.some((si) => si.link && currentUrl.startsWith(si.link)));
|
|
41
43
|
|
|
42
44
|
/**
|
|
43
|
-
* @param {object[]} sections
|
|
45
|
+
* @param {object[]} sections
|
|
44
46
|
* @returns {object[]}
|
|
45
47
|
*/
|
|
46
48
|
const innerSections = (sections) => {
|
|
@@ -93,8 +95,8 @@ const navSubitems = ({ label, subitems, icon, isUser }) =>
|
|
|
93
95
|
);
|
|
94
96
|
|
|
95
97
|
/**
|
|
96
|
-
* @param {string} currentUrl
|
|
97
|
-
* @param {object[]} sections
|
|
98
|
+
* @param {string} currentUrl
|
|
99
|
+
* @param {object[]} sections
|
|
98
100
|
* @returns {div}
|
|
99
101
|
*/
|
|
100
102
|
const rightNavBar = (currentUrl, sections) =>
|
|
@@ -122,21 +124,54 @@ const rightNavBar = (currentUrl, sections) =>
|
|
|
122
124
|
text(s.label)
|
|
123
125
|
)
|
|
124
126
|
)
|
|
127
|
+
: s.type === "Search"
|
|
128
|
+
? li(
|
|
129
|
+
form(
|
|
130
|
+
{
|
|
131
|
+
action: "/search",
|
|
132
|
+
class: "menusearch",
|
|
133
|
+
method: "get",
|
|
134
|
+
},
|
|
135
|
+
div(
|
|
136
|
+
{ class: "input-group search-bar" },
|
|
137
|
+
|
|
138
|
+
input({
|
|
139
|
+
type: "search",
|
|
140
|
+
class: "form-control search-bar pl-2 hasbl",
|
|
141
|
+
placeholder: s.label,
|
|
142
|
+
id: "inputq",
|
|
143
|
+
name: "q",
|
|
144
|
+
"aria-label": "Search",
|
|
145
|
+
"aria-describedby": "button-search-submit",
|
|
146
|
+
}),
|
|
147
|
+
div(
|
|
148
|
+
{ class: "input-group-append" },
|
|
149
|
+
button(
|
|
150
|
+
{
|
|
151
|
+
class: "btn btn-outline-secondary search-bar",
|
|
152
|
+
type: "submit",
|
|
153
|
+
},
|
|
154
|
+
i({ class: "fas fa-search" })
|
|
155
|
+
)
|
|
156
|
+
)
|
|
157
|
+
)
|
|
158
|
+
)
|
|
159
|
+
)
|
|
125
160
|
: ""
|
|
126
161
|
)
|
|
127
162
|
)
|
|
128
163
|
);
|
|
129
164
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
165
|
+
/**
|
|
166
|
+
* @param {object[]} sections
|
|
167
|
+
* @returns {boolean}
|
|
168
|
+
*/
|
|
134
169
|
const hasMobileItems = (sections) =>
|
|
135
170
|
innerSections(sections).some((s) => s.location === "Mobile Bottom");
|
|
136
171
|
|
|
137
172
|
/**
|
|
138
|
-
* @param {string} currentUrl
|
|
139
|
-
* @param {object[]} sections
|
|
173
|
+
* @param {string} currentUrl
|
|
174
|
+
* @param {object[]} sections
|
|
140
175
|
* @param {string} [cls = ""]
|
|
141
176
|
* @param {string} [clsLink = ""]
|
|
142
177
|
* @returns {footer|string}
|
|
@@ -212,9 +247,9 @@ const leftNavBar = ({ name, logo }) => [
|
|
|
212
247
|
];
|
|
213
248
|
|
|
214
249
|
/**
|
|
215
|
-
* @param {object} brand
|
|
216
|
-
* @param {object[]} sections
|
|
217
|
-
* @param {string} currentUrl
|
|
250
|
+
* @param {object} brand
|
|
251
|
+
* @param {object[]} sections
|
|
252
|
+
* @param {string} currentUrl
|
|
218
253
|
* @param {object} opts
|
|
219
254
|
* @param {boolean} [opts.fixedTop = true]
|
|
220
255
|
* @returns {string}
|
|
@@ -235,8 +270,8 @@ const navbar = (brand, sections, currentUrl, opts = { fixedTop: true }) =>
|
|
|
235
270
|
);
|
|
236
271
|
|
|
237
272
|
/**
|
|
238
|
-
* @param {string} type
|
|
239
|
-
* @param {string} s
|
|
273
|
+
* @param {string} type
|
|
274
|
+
* @param {string} s
|
|
240
275
|
* @returns {string}
|
|
241
276
|
*/
|
|
242
277
|
const alert = (type, s) => {
|
|
@@ -266,8 +301,8 @@ const navbarSolidOnScroll = script(
|
|
|
266
301
|
);
|
|
267
302
|
|
|
268
303
|
/**
|
|
269
|
-
* @param {object} x
|
|
270
|
-
* @param {object} s
|
|
304
|
+
* @param {object} x
|
|
305
|
+
* @param {object} s
|
|
271
306
|
* @returns {object}
|
|
272
307
|
*/
|
|
273
308
|
const logit = (x, s) => {
|
|
@@ -277,7 +312,7 @@ const logit = (x, s) => {
|
|
|
277
312
|
};
|
|
278
313
|
|
|
279
314
|
/**
|
|
280
|
-
* @param {number} len
|
|
315
|
+
* @param {number} len
|
|
281
316
|
* @returns {function}
|
|
282
317
|
*/
|
|
283
318
|
const standardBreadcrumbItem = (len) => ({ href, text }, ix) =>
|
|
@@ -311,10 +346,10 @@ const workflowBreadcrumbItem = ({ workflow, step }) =>
|
|
|
311
346
|
.join("");
|
|
312
347
|
|
|
313
348
|
/**
|
|
314
|
-
* @param {object[]} crumbs
|
|
349
|
+
* @param {object[]} crumbs
|
|
315
350
|
* @returns {string}
|
|
316
351
|
*/
|
|
317
|
-
const breadcrumbs = (crumbs) =>
|
|
352
|
+
const breadcrumbs = (crumbs, right) =>
|
|
318
353
|
nav(
|
|
319
354
|
{ "aria-label": "breadcrumb" },
|
|
320
355
|
ol(
|
|
@@ -323,12 +358,13 @@ const breadcrumbs = (crumbs) =>
|
|
|
323
358
|
c.workflow
|
|
324
359
|
? workflowBreadcrumbItem(c)
|
|
325
360
|
: standardBreadcrumbItem(crumbs.length)(c)
|
|
326
|
-
)
|
|
361
|
+
),
|
|
362
|
+
right ? li({ class: "ml-auto" }, right) : ""
|
|
327
363
|
)
|
|
328
364
|
);
|
|
329
365
|
|
|
330
366
|
/**
|
|
331
|
-
* @param {object[]} headers
|
|
367
|
+
* @param {object[]} headers
|
|
332
368
|
* @returns {string}
|
|
333
369
|
*/
|
|
334
370
|
const headersInHead = (headers) =>
|
|
@@ -346,7 +382,7 @@ const headersInHead = (headers) =>
|
|
|
346
382
|
.join("");
|
|
347
383
|
|
|
348
384
|
/**
|
|
349
|
-
* @param {object[]} headers
|
|
385
|
+
* @param {object[]} headers
|
|
350
386
|
* @returns {string}
|
|
351
387
|
*/
|
|
352
388
|
const headersInBody = (headers) =>
|
|
@@ -367,7 +403,7 @@ const headersInBody = (headers) =>
|
|
|
367
403
|
.join("");
|
|
368
404
|
|
|
369
405
|
/**
|
|
370
|
-
* @param {object[]} tabList
|
|
406
|
+
* @param {object[]} tabList
|
|
371
407
|
* @returns {ul}
|
|
372
408
|
*/
|
|
373
409
|
const cardHeaderTabs = (tabList) =>
|