@gov-cy/govcy-frontend-renderer 1.6.0 → 1.7.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/README.md
CHANGED
|
@@ -434,6 +434,100 @@ All content in design elements are defined with an object defining the available
|
|
|
434
434
|
|
|
435
435
|
If the `params.lang` is defined in the design element, the package will also render element with a `lang` attribute.
|
|
436
436
|
|
|
437
|
+
## Browser usage (client-side)
|
|
438
|
+
> [!WARNING]
|
|
439
|
+
> Browser classes are not thoroughly tested, so use with care.
|
|
440
|
+
|
|
441
|
+
The package offers compiled templates in `govcyCompiledTemplates.browser.js` and a helper class `govcyFrontendRenderer.browser.js` to render the same components on the browser. Unlike the note.js methods, you will need to provide the HTML shell.
|
|
442
|
+
|
|
443
|
+
The easiest way to use these is to include the libraries via CDN in your HTML and use the `renderFromJSON` and `updateDOMAndInitialize` functions.
|
|
444
|
+
|
|
445
|
+
Here's an example:
|
|
446
|
+
|
|
447
|
+
```html
|
|
448
|
+
|
|
449
|
+
<!DOCTYPE html>
|
|
450
|
+
<html lang="en">
|
|
451
|
+
|
|
452
|
+
<head>
|
|
453
|
+
<!-- Required meta tags -->
|
|
454
|
+
<meta charset="utf-8">
|
|
455
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
456
|
+
<!-- CSS -->
|
|
457
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/gov-cy/govcy-design-system@v3/dist/css/govcy.uds.min.css">
|
|
458
|
+
<title>Page title - Service Name - gov.cy</title>
|
|
459
|
+
<meta name="description" content="Description of what the service does">
|
|
460
|
+
|
|
461
|
+
</head>
|
|
462
|
+
|
|
463
|
+
<body>
|
|
464
|
+
<!--bodyStart-->
|
|
465
|
+
<section class="govcy-container-fluid" id="bodyStartContainer">
|
|
466
|
+
<a href="#mainContainer" class="govcy-skip-link">Skip to main content</a>
|
|
467
|
+
</section>
|
|
468
|
+
<!--main-->
|
|
469
|
+
<main class="govcy-container" id="mainContainer">
|
|
470
|
+
<div class="govcy-row">
|
|
471
|
+
<article class="govcy-col-8">
|
|
472
|
+
<div id="output" class="govcy-form"></div>
|
|
473
|
+
</article>
|
|
474
|
+
</div>
|
|
475
|
+
</main>
|
|
476
|
+
<script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-design-system@v3/dist/js/govcy.uds.min.js"></script>
|
|
477
|
+
<script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1/dist/govcyCompiledTemplates.browser.js"></script>
|
|
478
|
+
<script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-frontend-renderer@v1/dist/govcyFrontendRenderer.browser.js"></script>
|
|
479
|
+
<script>
|
|
480
|
+
|
|
481
|
+
document.addEventListener("DOMContentLoaded", async function () {
|
|
482
|
+
|
|
483
|
+
// Create an instance of GovcyFrontendRendererBrowser
|
|
484
|
+
const renderer = new GovcyFrontendRendererBrowser();
|
|
485
|
+
|
|
486
|
+
// Define the input data
|
|
487
|
+
const inputData =
|
|
488
|
+
{
|
|
489
|
+
"site": {
|
|
490
|
+
"lang": "en"
|
|
491
|
+
}
|
|
492
|
+
};
|
|
493
|
+
|
|
494
|
+
// Construct the JSONTemplate
|
|
495
|
+
const JSONTemplate = {
|
|
496
|
+
"elements": [
|
|
497
|
+
{
|
|
498
|
+
"element": "backLink",
|
|
499
|
+
"params": {}
|
|
500
|
+
},
|
|
501
|
+
{
|
|
502
|
+
"element": "tag",
|
|
503
|
+
"params": {
|
|
504
|
+
"text": {
|
|
505
|
+
"en": "SIMPLE TAG",
|
|
506
|
+
"el": "ΑΠΛΟ TAG"
|
|
507
|
+
}
|
|
508
|
+
}
|
|
509
|
+
}
|
|
510
|
+
]
|
|
511
|
+
};
|
|
512
|
+
|
|
513
|
+
//render HTML into string
|
|
514
|
+
let renderedHtml = renderer.renderFromJSON(JSONTemplate,inputData);
|
|
515
|
+
//update DOM and initialize the JS components
|
|
516
|
+
renderer.updateDOMAndInitialize('output', renderedHtml);
|
|
517
|
+
});
|
|
518
|
+
</script>
|
|
519
|
+
</body>
|
|
520
|
+
|
|
521
|
+
</html>
|
|
522
|
+
```
|
|
523
|
+
|
|
524
|
+
### Things you should know about browser usage
|
|
525
|
+
Using the example above as reference:
|
|
526
|
+
1. `renderer.renderFromJSON(JSONTemplate,inputData);` generates the HTML based on the JSON input template.
|
|
527
|
+
2. `renderer.updateDOMAndInitialize('output', renderedHtml);` updates the DOM and initializes the JS components. It finds the element with id `output` and :
|
|
528
|
+
- used the `innerHTML` to update it's contents
|
|
529
|
+
- initializes all GOVCY design system's JS components within that elements (so it will not re-initialize other elements such as `header` in different sections of the page)
|
|
530
|
+
|
|
437
531
|
## Change the package
|
|
438
532
|
|
|
439
533
|
Details on how to build, test and update the project can be found in the [project notes](NOTES.md) document.
|
|
@@ -770,7 +770,7 @@ context.addExport("ariaDescribedBy", t_53);
|
|
|
770
770
|
}
|
|
771
771
|
;
|
|
772
772
|
}
|
|
773
|
-
t_26 += runtime.suppressValue((lineno =
|
|
773
|
+
t_26 += runtime.suppressValue((lineno = 132, colno = 20, runtime.callWrap(t_31, "fieldset", context, [{"ariaDescribedby": runtime.contextOrFrameLookup(context, frame, "ariaDescribedBy"),"classes": runtime.memberLookup((l_params),"classes"),"lang": runtime.memberLookup((l_params),"lang")},runtime.makeKeywordArgs({"caller": (function (){var macro_t_54 = runtime.makeMacro(
|
|
774
774
|
[],
|
|
775
775
|
[],
|
|
776
776
|
function (kwargs) {
|
|
@@ -780,7 +780,7 @@ kwargs = kwargs || {};
|
|
|
780
780
|
if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
|
|
781
781
|
frame.set("caller", kwargs.caller); }
|
|
782
782
|
var t_55 = "";t_55 += "\n ";
|
|
783
|
-
t_55 += runtime.suppressValue((lineno =
|
|
783
|
+
t_55 += runtime.suppressValue((lineno = 133, colno = 22, runtime.callWrap(t_39, "legend", context, [{"legend": runtime.memberLookup((l_params),"legend"),"isPageHeading": runtime.contextOrFrameLookup(context, frame, "isPageHeading"),"lang": runtime.memberLookup((l_params),"lang")},runtime.makeKeywordArgs({"caller": (function (){var macro_t_56 = runtime.makeMacro(
|
|
784
784
|
[],
|
|
785
785
|
[],
|
|
786
786
|
function (kwargs) {
|
|
@@ -804,9 +804,9 @@ var t_61 = t_58.govcyElementsFromArray;
|
|
|
804
804
|
cb(new Error("cannot import 'govcyElementsFromArray'")); return;
|
|
805
805
|
}
|
|
806
806
|
frame.set("govcyElementsFromArray", t_61);
|
|
807
|
-
t_55 += runtime.suppressValue((lineno =
|
|
807
|
+
t_55 += runtime.suppressValue((lineno = 137, colno = 33, runtime.callWrap(t_61, "govcyElementsFromArray", context, [runtime.memberLookup((l_params),"elements"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
|
|
808
808
|
t_55 += "\n ";
|
|
809
|
-
t_55 += runtime.suppressValue((lineno =
|
|
809
|
+
t_55 += runtime.suppressValue((lineno = 138, colno = 27, runtime.callWrap(t_47, "formControl", context, [{"isError": (runtime.memberLookup((l_params),"hideFormControlError")?false:runtime.memberLookup((l_params),"error"))},runtime.makeKeywordArgs({"caller": (function (){var macro_t_62 = runtime.makeMacro(
|
|
810
810
|
[],
|
|
811
811
|
[],
|
|
812
812
|
function (kwargs) {
|
|
@@ -816,7 +816,7 @@ kwargs = kwargs || {};
|
|
|
816
816
|
if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
|
|
817
817
|
frame.set("caller", kwargs.caller); }
|
|
818
818
|
var t_63 = "";t_63 += "\n ";
|
|
819
|
-
t_63 += runtime.suppressValue((lineno =
|
|
819
|
+
t_63 += runtime.suppressValue((lineno = 139, colno = 24, runtime.callWrap(t_35, "hint", context, [{"hint": runtime.memberLookup((l_params),"hint"),"id": runtime.contextOrFrameLookup(context, frame, "hintId"),"lang": runtime.memberLookup((l_params),"lang")},runtime.makeKeywordArgs({"caller": (function (){var macro_t_64 = runtime.makeMacro(
|
|
820
820
|
[],
|
|
821
821
|
[],
|
|
822
822
|
function (kwargs) {
|
|
@@ -830,7 +830,7 @@ frame = frame.pop();
|
|
|
830
830
|
return new runtime.SafeString(t_65);
|
|
831
831
|
});
|
|
832
832
|
return macro_t_64;})()})])), env.opts.autoescape);
|
|
833
|
-
t_63 += runtime.suppressValue((lineno =
|
|
833
|
+
t_63 += runtime.suppressValue((lineno = 141, colno = 32, runtime.callWrap(t_43, "errorMessage", context, [{"message": runtime.memberLookup((l_params),"error"),"id": runtime.contextOrFrameLookup(context, frame, "errorId"),"lang": runtime.memberLookup((l_params),"lang")},runtime.makeKeywordArgs({"caller": (function (){var macro_t_66 = runtime.makeMacro(
|
|
834
834
|
[],
|
|
835
835
|
[],
|
|
836
836
|
function (kwargs) {
|
|
@@ -860,7 +860,7 @@ frame.set("loop.first", t_68 === 0);
|
|
|
860
860
|
frame.set("loop.last", t_68 === t_69 - 1);
|
|
861
861
|
frame.set("loop.length", t_69);
|
|
862
862
|
if(t_71) {
|
|
863
|
-
t_63 += runtime.suppressValue((lineno =
|
|
863
|
+
t_63 += runtime.suppressValue((lineno = 145, colno = 37, runtime.callWrap(runtime.contextOrFrameLookup(context, frame, "_checkboxItem"), "_checkboxItem", context, [l_params,t_71,runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "loop")),"index"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
|
|
864
864
|
;
|
|
865
865
|
}
|
|
866
866
|
;
|
|
@@ -3753,7 +3753,7 @@ context.addExport("ariaDescribedBy", t_66);
|
|
|
3753
3753
|
}
|
|
3754
3754
|
;
|
|
3755
3755
|
}
|
|
3756
|
-
t_38 += runtime.suppressValue((lineno =
|
|
3756
|
+
t_38 += runtime.suppressValue((lineno = 165, colno = 20, runtime.callWrap(t_44, "fieldset", context, [{"ariaDescribedby": runtime.contextOrFrameLookup(context, frame, "ariaDescribedBy"),"classes": runtime.memberLookup((l_params),"classes"),"lang": runtime.memberLookup((l_params),"lang")},runtime.makeKeywordArgs({"caller": (function (){var macro_t_67 = runtime.makeMacro(
|
|
3757
3757
|
[],
|
|
3758
3758
|
[],
|
|
3759
3759
|
function (kwargs) {
|
|
@@ -3763,7 +3763,7 @@ kwargs = kwargs || {};
|
|
|
3763
3763
|
if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
|
|
3764
3764
|
frame.set("caller", kwargs.caller); }
|
|
3765
3765
|
var t_68 = "";t_68 += "\n ";
|
|
3766
|
-
t_68 += runtime.suppressValue((lineno =
|
|
3766
|
+
t_68 += runtime.suppressValue((lineno = 166, colno = 22, runtime.callWrap(t_52, "legend", context, [{"legend": runtime.memberLookup((l_params),"legend"),"isPageHeading": runtime.contextOrFrameLookup(context, frame, "isPageHeading"),"lang": runtime.memberLookup((l_params),"lang")},runtime.makeKeywordArgs({"caller": (function (){var macro_t_69 = runtime.makeMacro(
|
|
3767
3767
|
[],
|
|
3768
3768
|
[],
|
|
3769
3769
|
function (kwargs) {
|
|
@@ -3787,9 +3787,9 @@ var t_74 = t_71.govcyElementsFromArray;
|
|
|
3787
3787
|
cb(new Error("cannot import 'govcyElementsFromArray'")); return;
|
|
3788
3788
|
}
|
|
3789
3789
|
frame.set("govcyElementsFromArray", t_74);
|
|
3790
|
-
t_68 += runtime.suppressValue((lineno =
|
|
3790
|
+
t_68 += runtime.suppressValue((lineno = 170, colno = 33, runtime.callWrap(t_74, "govcyElementsFromArray", context, [runtime.memberLookup((l_params),"elements"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
|
|
3791
3791
|
t_68 += "\n ";
|
|
3792
|
-
t_68 += runtime.suppressValue((lineno =
|
|
3792
|
+
t_68 += runtime.suppressValue((lineno = 171, colno = 27, runtime.callWrap(t_60, "formControl", context, [{"isError": (runtime.memberLookup((l_params),"hideFormControlError")?false:runtime.memberLookup((l_params),"error"))},runtime.makeKeywordArgs({"caller": (function (){var macro_t_75 = runtime.makeMacro(
|
|
3793
3793
|
[],
|
|
3794
3794
|
[],
|
|
3795
3795
|
function (kwargs) {
|
|
@@ -3798,7 +3798,7 @@ frame = frame.push(true);
|
|
|
3798
3798
|
kwargs = kwargs || {};
|
|
3799
3799
|
if (Object.prototype.hasOwnProperty.call(kwargs, "caller")) {
|
|
3800
3800
|
frame.set("caller", kwargs.caller); }
|
|
3801
|
-
var t_76 = "";t_76 += runtime.suppressValue((lineno =
|
|
3801
|
+
var t_76 = "";t_76 += runtime.suppressValue((lineno = 173, colno = 24, runtime.callWrap(t_48, "hint", context, [{"hint": runtime.memberLookup((l_params),"hint"),"id": runtime.contextOrFrameLookup(context, frame, "hintId"),"lang": runtime.memberLookup((l_params),"lang")},runtime.makeKeywordArgs({"caller": (function (){var macro_t_77 = runtime.makeMacro(
|
|
3802
3802
|
[],
|
|
3803
3803
|
[],
|
|
3804
3804
|
function (kwargs) {
|
|
@@ -3812,7 +3812,7 @@ frame = frame.pop();
|
|
|
3812
3812
|
return new runtime.SafeString(t_78);
|
|
3813
3813
|
});
|
|
3814
3814
|
return macro_t_77;})()})])), env.opts.autoescape);
|
|
3815
|
-
t_76 += runtime.suppressValue((lineno =
|
|
3815
|
+
t_76 += runtime.suppressValue((lineno = 175, colno = 32, runtime.callWrap(t_56, "errorMessage", context, [{"message": runtime.memberLookup((l_params),"error"),"id": runtime.contextOrFrameLookup(context, frame, "errorId"),"lang": runtime.memberLookup((l_params),"lang")},runtime.makeKeywordArgs({"caller": (function (){var macro_t_79 = runtime.makeMacro(
|
|
3816
3816
|
[],
|
|
3817
3817
|
[],
|
|
3818
3818
|
function (kwargs) {
|
|
@@ -3842,7 +3842,7 @@ frame.set("loop.first", t_81 === 0);
|
|
|
3842
3842
|
frame.set("loop.last", t_81 === t_82 - 1);
|
|
3843
3843
|
frame.set("loop.length", t_82);
|
|
3844
3844
|
if(t_84) {
|
|
3845
|
-
t_76 += runtime.suppressValue((lineno =
|
|
3845
|
+
t_76 += runtime.suppressValue((lineno = 179, colno = 34, runtime.callWrap(runtime.contextOrFrameLookup(context, frame, "_radioItem"), "_radioItem", context, [l_params,t_84,runtime.contextOrFrameLookup(context, frame, "isInline"),runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "loop")),"index"),runtime.memberLookup((l_params),"lang")])), env.opts.autoescape);
|
|
3846
3846
|
;
|
|
3847
3847
|
}
|
|
3848
3848
|
;
|
|
@@ -16494,6 +16494,64 @@ var GovcyFrontendRendererBrowser = (function () {
|
|
|
16494
16494
|
this.env.addGlobal('globalData', data);
|
|
16495
16495
|
return this.env.renderString(jsonTemplate, data);
|
|
16496
16496
|
}
|
|
16497
|
+
|
|
16498
|
+
/**
|
|
16499
|
+
* Updates the dom element with the rendered html and initializes the components
|
|
16500
|
+
* @param {*} elementId The id of the element to update it's inner html
|
|
16501
|
+
* @param {*} renderedHtml The HTML to render
|
|
16502
|
+
*/
|
|
16503
|
+
updateDOMAndInitialize(elementId, renderedHtml) {
|
|
16504
|
+
const parent = document.getElementById(elementId);
|
|
16505
|
+
// if the parent exists
|
|
16506
|
+
if (parent) {
|
|
16507
|
+
// Update the inner html
|
|
16508
|
+
parent.innerHTML = renderedHtml;
|
|
16509
|
+
// If the GOVCY object exists, initialize the components
|
|
16510
|
+
if (typeof GOVCY !== 'undefined') {
|
|
16511
|
+
// Initialize Accordion
|
|
16512
|
+
parent.querySelectorAll('.govcy-accordion-button').forEach((element) => {
|
|
16513
|
+
new GOVCY.Accordion(element);
|
|
16514
|
+
});
|
|
16515
|
+
|
|
16516
|
+
// Initialize CharacterCount
|
|
16517
|
+
parent.querySelectorAll('.govcy-character-count').forEach((element) => {
|
|
16518
|
+
new GOVCY.CharacterCount(element);
|
|
16519
|
+
});
|
|
16520
|
+
|
|
16521
|
+
// Initialize Collapsable
|
|
16522
|
+
parent.querySelectorAll('.govcy-collapsable').forEach((element) => {
|
|
16523
|
+
new GOVCY.Collapsable(element);
|
|
16524
|
+
});
|
|
16525
|
+
|
|
16526
|
+
// Initialize DatePicker
|
|
16527
|
+
parent.querySelectorAll('.govcy-date-picker').forEach((element) => {
|
|
16528
|
+
new GOVCY.DatePicker(element);
|
|
16529
|
+
});
|
|
16530
|
+
|
|
16531
|
+
// Initialize HeaderMenu
|
|
16532
|
+
parent.querySelectorAll('.govcy-header').forEach((element) => {
|
|
16533
|
+
new GOVCY.HeaderMenu(element);
|
|
16534
|
+
});
|
|
16535
|
+
|
|
16536
|
+
// Initialize MobileOTP
|
|
16537
|
+
if ('OTPCredential' in window) {
|
|
16538
|
+
parent.querySelectorAll('input[autocomplete="one-time-code"]').forEach((element) => {
|
|
16539
|
+
new GOVCY.MobileOTP(element);
|
|
16540
|
+
});
|
|
16541
|
+
}
|
|
16542
|
+
|
|
16543
|
+
// Initialize Tab
|
|
16544
|
+
parent.querySelectorAll('.govcy-tab-link').forEach((element) => {
|
|
16545
|
+
new GOVCY.Tab(element);
|
|
16546
|
+
});
|
|
16547
|
+
|
|
16548
|
+
// Initialize ConditionalContactToggler
|
|
16549
|
+
parent.querySelectorAll('.govcy-radio-input').forEach((element) => {
|
|
16550
|
+
new GOVCY.ConditionalContactToggler(element);
|
|
16551
|
+
});
|
|
16552
|
+
}
|
|
16553
|
+
}
|
|
16554
|
+
}
|
|
16497
16555
|
}
|
|
16498
16556
|
|
|
16499
16557
|
return GovcyFrontendRendererBrowser;
|
package/package.json
CHANGED