@govflanders/vl-widget-global-header-types 0.0.7 → 0.0.9
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 +23 -5
- package/package.json +2 -3
package/README.md
CHANGED
|
@@ -18,7 +18,7 @@ Example of using the entry script:
|
|
|
18
18
|
<!DOCTYPE html>
|
|
19
19
|
<html lang="nl">
|
|
20
20
|
<head>
|
|
21
|
-
<script src="https://widgets.test-vlaanderen.be/api/
|
|
21
|
+
<script src="https://widgets.test-vlaanderen.be/api/v2/widget/9717ae3b-84e8-43b2-a814-e35a2547927f/entry"></script>
|
|
22
22
|
<meta charset="UTF-8" />
|
|
23
23
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
24
24
|
<title>Global header entry script example</title>
|
|
@@ -47,7 +47,7 @@ Example of using the embed script:
|
|
|
47
47
|
<title>Global header embed script example</title>
|
|
48
48
|
</head>
|
|
49
49
|
<body>
|
|
50
|
-
<script src="https://widgets.test-vlaanderen.be/api/
|
|
50
|
+
<script src="https://widgets.test-vlaanderen.be/api/v2/widget/9717ae3b-84e8-43b2-a814-e35a2547927f/embed"></script>
|
|
51
51
|
<div class="your-website-code">👋 Hello world</div>
|
|
52
52
|
</body>
|
|
53
53
|
</html>
|
|
@@ -116,7 +116,7 @@ Reset the service points to the initial values defined in the widget’s configu
|
|
|
116
116
|
Set or update the profile configuration for the widget.
|
|
117
117
|
|
|
118
118
|
### setMainLinks(mainLinks: MainLink[]): Promise\<boolean\>
|
|
119
|
-
|
|
119
|
+
Sets the main navigation links that are displayed within the widget. These links will only be visible for widgets that support sessions, and they are displayed only when the user is logged in.
|
|
120
120
|
|
|
121
121
|
### addApplicationMenuLink(link: ApplicationMenuLink): Promise\<ApplicationMenuLink[]\>
|
|
122
122
|
Add a single link to the application menu.
|
|
@@ -135,7 +135,7 @@ The `mount` method allows you to control where the **Global Header Widget** is r
|
|
|
135
135
|
When you include the widget via the following script:
|
|
136
136
|
|
|
137
137
|
```html
|
|
138
|
-
<script src="https://prod.widgets.burgerprofiel.vlaanderen.be/api/
|
|
138
|
+
<script src="https://prod.widgets.burgerprofiel.vlaanderen.be/api/v2/widget/__global_header_id__/entry"></script>
|
|
139
139
|
```
|
|
140
140
|
|
|
141
141
|
The widget is **not automatically rendered** on the page. Instead, you must call the `mount` method from the `window.globalHeaderClient` object to display it. This gives you control over where and when the widget is added. You can either:
|
|
@@ -159,7 +159,7 @@ The `mount` method allows you to control where the **Global Header Widget** is r
|
|
|
159
159
|
If you use this script instead:
|
|
160
160
|
|
|
161
161
|
```html
|
|
162
|
-
<script src="https://prod.widgets.burgerprofiel.vlaanderen.be/api/
|
|
162
|
+
<script src="https://prod.widgets.burgerprofiel.vlaanderen.be/api/v2/widget/__global_header_id__/embed"></script>
|
|
163
163
|
```
|
|
164
164
|
|
|
165
165
|
The widget will **automatically render** at the location where the script is placed in the HTML. No additional action is needed to mount the widget in this case.
|
|
@@ -169,6 +169,24 @@ The `mount` method returns a promise that resolves to `true` if the widget was s
|
|
|
169
169
|
|
|
170
170
|
## Notes
|
|
171
171
|
|
|
172
|
+
### Language Switching
|
|
173
|
+
|
|
174
|
+
The widget automatically adapts to the language of the document. It observes the `lang` attribute on the `<html>` tag, so it's the implementer's responsibility to handle any language switching functionality. If the `lang` attribute changes, the widget will update to display the correct language.
|
|
175
|
+
|
|
176
|
+
Supported languages:
|
|
177
|
+
- nl (Dutch)
|
|
178
|
+
- fr (French)
|
|
179
|
+
- de (German)
|
|
180
|
+
- en (English)
|
|
181
|
+
|
|
182
|
+
To change the document language, you can use the following JavaScript snippet:
|
|
183
|
+
|
|
184
|
+
```js
|
|
185
|
+
window.document.documentElement.lang = 'nl'; // 'nl', 'en', 'de' or 'fr'
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
This will switch the document's language to Dutch, and the widget will automatically reflect the change.
|
|
189
|
+
|
|
172
190
|
### Translatable Type
|
|
173
191
|
|
|
174
192
|
The `Translatable<T>` type allows an object to either be a single value or a language-specific dictionary. This is useful when content needs to be available in multiple languages.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@govflanders/vl-widget-global-header-types",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.9",
|
|
4
4
|
"description": "TypeScript definitions for GlobalHeaderClient",
|
|
5
5
|
"main": "",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -25,7 +25,6 @@
|
|
|
25
25
|
"scripts": {
|
|
26
26
|
"build": "tsc -p tsconfig.json",
|
|
27
27
|
"watch": "tsc -w",
|
|
28
|
-
"release": "yarn build && yarn version --patch --no-git-tag-version && git add . && git commit -m \"Release global-header-types $(node -p \"require('./package.json').version\")\" && git tag \"global-header-types-$(node -p \"require('./package.json').version\")\" && git push && git push --tags"
|
|
29
|
-
"publish": "npm_config_registry=https://registry.npmjs.org/ npm publish --access public"
|
|
28
|
+
"release": "yarn build && yarn version --patch --no-git-tag-version && git add . && git commit -m \"Release global-header-types $(node -p \"require('./package.json').version\")\" && git tag \"global-header-types-$(node -p \"require('./package.json').version\")\" && git push && git push --tags && npm_config_registry=https://registry.npmjs.org/ npm publish --access public"
|
|
30
29
|
}
|
|
31
30
|
}
|