diff --git a/gulpfile.js b/gulpfile.js index 55aaa10..7b58279 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -107,7 +107,16 @@ mapappsBrowserSync.registerTask({ npmModules: [ "mocha", "chai", - "@conterra/mapapps-mocha-runner" + "@conterra/mapapps-mocha-runner", + [ + "@vue/test-utils", + { + // need to overwrite main to load it into the browser + main: "dist/vue-test-utils.umd" + } + ], + // required as peer dependency of @vue/test-utils + "vue-template-compiler" ] }, // prevent reload by browser sync (reload triggered on watch end) diff --git a/package.json b/package.json index af3b813..8e3636d 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "chai": "4.3.10", "ct-mapapps-browser-sync": "0.0.35", "ct-mapapps-gulp-js": "0.10.2", + "dompurify": "~3.1.0", "eslint-config-ct-prodeng": "1.4.0", "license-checker": "25.0.1", "mocha": "10.2.0", @@ -24,6 +25,7 @@ "tsx": "^4.6.0", "typescript": "5.2.2", "vue": "2.7.15", - "vue-template-compiler": "2.7.15" + "vue-template-compiler": "2.7.15", + "@vue/test-utils": "1.3.5" } } diff --git a/src/main/js/apps/sample/app.json b/src/main/js/apps/sample/app.json index ffa168a..bf1e426 100644 --- a/src/main/js/apps/sample/app.json +++ b/src/main/js/apps/sample/app.json @@ -24,9 +24,6 @@ "toolset", "dn_welcome" ], - "require": [ - "${app}/app" - ], "i18n": [ "bundle" ] @@ -38,9 +35,9 @@ "infoText": "${welcome.infoText}", "showButton": true, "buttonText": "${welcome.buttonText}", - "buttonDependsOnCheckbox": true, + "buttonDependsOnCheckbox": false, "showCheckbox": true, - "checkboxChecked": true, + "checkboxChecked": false, "checkboxText": "${welcome.checkboxText}", "showImage": true, "imageHeight": "300px", diff --git a/src/main/js/apps/sample/external-test-resources/infotext-with-heading.html b/src/main/js/apps/sample/external-test-resources/infotext-with-heading.html new file mode 100644 index 0000000..94cb271 --- /dev/null +++ b/src/main/js/apps/sample/external-test-resources/infotext-with-heading.html @@ -0,0 +1,6 @@ + + +

Welcome IFrame

+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

+ + diff --git a/src/main/js/apps/sample/external-test-resources/infotext.html b/src/main/js/apps/sample/external-test-resources/infotext.html new file mode 100644 index 0000000..8936469 --- /dev/null +++ b/src/main/js/apps/sample/external-test-resources/infotext.html @@ -0,0 +1,5 @@ + + +

Welcome IFrame

+ + diff --git a/src/main/js/apps/sample/external-test-resources/infotext.txt b/src/main/js/apps/sample/external-test-resources/infotext.txt new file mode 100644 index 0000000..d5b2be6 --- /dev/null +++ b/src/main/js/apps/sample/external-test-resources/infotext.txt @@ -0,0 +1 @@ +This is an external resource that is embedded into an iframe. diff --git a/src/main/js/bundles/dn_welcome/README.md b/src/main/js/bundles/dn_welcome/README.md index 0dd965c..56efce9 100644 --- a/src/main/js/bundles/dn_welcome/README.md +++ b/src/main/js/bundles/dn_welcome/README.md @@ -19,6 +19,7 @@ All configuration is performed on the `Config` component as show in the followin "Config": { "heading": "${welcome.heading}", "infoText": "${welcome.infoText}", + "infoTextUrl": "", "showButton": true, "buttonText": "${welcome.buttonText}", "buttonDependsOnCheckbox": true, @@ -27,27 +28,64 @@ All configuration is performed on the `Config` component as show in the followin "checkboxChecked": true, "showImage": true, "imageUrl": "resource('${app}:images/welcome.jpg')", - "imageHeight": "300px" + "imageHeight": "300px" } } } ``` + +### Including external resources + +In some cases, it is helpful to be able to include text or an image from an external location. +For example, if the info text in the dialog changes frequently, it may be easier to include the text from an external HTML file. +The file can then be edited by the responsible people without requiring access to the map.apps Manager. +Including the info text from an HTML file also allows for a much more sophisticated layout, if you include CSS. + +To do this, create an HTML file on a publicly accessible web server. The file should look something like this: + +````html + + +

Welcome IFrame

+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

+ + +```` + +In your `app.json`, configure the `infoTextUrl` property to the URL of that HTML file: + +````json +{ + "dn_welcome": { + "Config": { + "infoTextUrl": "https://www.example.com/resources/infotext.html" + } + } +} +```` + +The HTML file is then embedded within an Iframe in the welcome dialog. + +The same is possible for images at the top of the dialog. +Simply set the `imageUrl` to the URL of an external image, e.g. https://www.example.com/resources/myimage.jpg + #### Available properties All of these properties are optional. -| Property | Type | Possible values | Default | Description | -|--------------|---------|-----------------------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| `heading` | String | | | The heading shown below the image. | -| `infoText` | String | | | The text displayed in the main content area of the window. | -| `showButton` | Boolean | `true` | `false` | `true` | Whether to show the button. If you still require a way to close the windo without using the button, you can remove `noTitleBarAndWindowTools` CSS class from the window's `windowClass` property. The window title bar containing a "close" button will then become visible. See the [templates bundle documentation](https://demos.conterra.de/mapapps/resources/jsregistry/root/templates/latest/README.md#b%3Dtemplates%3Bv%3D4.17.0%3Bf%3Dtempla%3B) for more information. | -| `buttonText` | String | | | The label of the button. | +| Property | Type | Possible values | Default | Description | +|---------------------------|---------|-------------------------|-------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `heading` | String | | | The heading shown below the image. If this property is set to an empty | +| `infoText` | String | | | The text displayed in the main content area of the window. | +| `infoTextUrl` | String | | | The URL to an external HTML document that should be embedded in an iframe as info text. If this property is left empty, the iframe will not be shown. | +| `showButton` | Boolean | `true` | `false` | `true` | Whether to show the button. If you still require a way to close the windo without using the button, you can remove `noTitleBarAndWindowTools` CSS class from the window's `windowClass` property. The window title bar containing a "close" button will then become visible. See the [templates bundle documentation](https://demos.conterra.de/mapapps/resources/jsregistry/root/templates/latest/README.md#b%3Dtemplates%3Bv%3D4.17.0%3Bf%3Dtempla%3B) for more information. | +| `buttonText` | String | | | The label of the button. | | `buttonDependsOnCheckbox` | Boolean | `true` | `false` | `false` | If `true`, the button is only enabled when the checkbox is checked. If the checkbox is not checked, the button is greyed out and cannot be clicked. Note: `showCheckbox` must be `true` for this property to have an effect. | `showCheckbox` | Boolean | `true` | `false` | `true` | Whether to show the checkbox in the window. Note: The property `buttonDependsOnCheckbox` is ignored, if `showCheckbox` is `false`. | | `checkboxText` | String | | | The label for the checkbox. | | `checkboxChecked` | Boolean | `true` | `false` | `false` | Whether the checkbox is already checked when the welcome window shows up. | | `showImage` | Boolean | `true` | `false` | `true` | Whether to show an image at the top of the welcome window. | -| `imageUrl` | String | | | The URL to the image shown at the top of the welcome window. Besides absolute URLs, you can use a relative URL to address an image inside the app folder: `resource('${app}:images/welcome.jpg')` | +| `imageUrl` | String | | | The URL to the image shown at the top of the welcome window. Besides absolute URLs, you can use a relative URL to address an image inside the app folder: `resource('${app}:images/welcome.jpg')` | | `imageHeight` | String | | ```300px``` | The height of the image defined as a valid CSS dimension string. | diff --git a/src/main/js/bundles/dn_welcome/WelcomeWidget.ts.vue b/src/main/js/bundles/dn_welcome/WelcomeWidget.ts.vue index f2b5d24..381f1ea 100644 --- a/src/main/js/bundles/dn_welcome/WelcomeWidget.ts.vue +++ b/src/main/js/bundles/dn_welcome/WelcomeWidget.ts.vue @@ -16,27 +16,41 @@ -->