Skip to content

Commit

Permalink
Merge pull request #5 from conterra/DN-31
Browse files Browse the repository at this point in the history 
DN-31
  • Loading branch information
@sholtkamp
sholtkamp authored Apr 24, 2024
2 parents b4771d3 + 97676e6 commit 90fecda
Show file tree
Hide file tree
Showing 25 changed files with 694 additions and 144 deletions.
11 changes: 10 additions & 1 deletion gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
4 changes: 3 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
}
}
7 changes: 2 additions & 5 deletions src/main/js/apps/sample/app.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,6 @@
"toolset",
"dn_welcome"
],
"require": [
"${app}/app"
],
"i18n": [
"bundle"
]
Expand All @@ -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",
Expand Down
6 changes: 6 additions & 0 deletions src/main/js/apps/sample/external-test-resources/infotext-with-heading.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<html>
<body style="margin: 0;">
<h3>Welcome IFrame</h3>
<p>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.</p>
</body>
</html>
5 changes: 5 additions & 0 deletions src/main/js/apps/sample/external-test-resources/infotext.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<html>
<body style="margin: 0;">
<p>Welcome IFrame</p>
</body>
</html>
1 change: 1 addition & 0 deletions src/main/js/apps/sample/external-test-resources/infotext.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
This is an external resource that is embedded into an iframe.
54 changes: 46 additions & 8 deletions src/main/js/bundles/dn_welcome/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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
<html>
<body style="margin: 0;">
<h3>Welcome IFrame</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</body>
</html>
````

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` &#124; `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` &#124; `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` &#124; `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` &#124; `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` &#124; `false` | `false` | Whether the checkbox is already checked when the welcome window shows up. |
| `showImage` | Boolean | `true` &#124; `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. |


Expand Down
47 changes: 35 additions & 12 deletions src/main/js/bundles/dn_welcome/WelcomeWidget.ts.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,27 +16,41 @@

-->
<template>
<v-layout>
<v-card>
<v-container
class="dn-welcome-widget"
pa-0
>
<v-card
class="dn_welcome-widget__card-main"
>
<v-img
v-if="showImage"
:height="imageHeight"
:src="imageUrl"
/>

<v-card-title primary-title>
<div>
<v-container
column
pa-0
>
<h3
v-if="heading"
class="headline mb-2"
>
{{ heading }}
</h3>
<iframe
v-if="infoTextUrl"
class="dn-welcome-widget__info-text--iframe"
title="Info Text"
:src="infoTextUrl"
/>
<div
v-if="infoText"
v-html="infoText"
v-if="sanitizedInfoText"
class="dn-welcome-widget__info-text"
v-html="sanitizedInfoText"
/>
</div>
</v-container>
</v-card-title>
<v-card-actions>
<v-container
Expand Down Expand Up @@ -68,25 +82,34 @@
</v-container>
</v-card-actions>
</v-card>
</v-layout>
</v-container>
</template>

<script lang="ts">
export default {
import Vue from "apprt-vue/Vue";
import {DOMPurify} from "dompurify-bundle";

export default Vue.extend({
data: function (): any {
return {
checkboxChecked: false,
buttonDependsOnCheckbox: false,
heading: "",
infoText: "",
infoTextUrl: "",
showButton: true,
buttonText: "",
buttonDependsOnCheckbox: false,
showCheckbox: true,
checkboxChecked: false,
checkboxText: "",
showImage: true,
imageUrl: "",
imageHeight: "200px"
};
},
computed: {
sanitizedInfoText() {
return DOMPurify.sanitize(this.infoText, {USE_PROFILES: {html: true}});
}
}
};
});
</script>
Loading

0 comments on commit 90fecda

Please sign in to comment.