Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DN-26 (Änderungen nach Review) #6

Merged
merged 21 commits into from
Apr 24, 2024
Merged

DN-26 (Änderungen nach Review) #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
c3b679c
Added unit tests for WelcomeWidget
Apr 22, 2024
5c8e59b
DN-31: Improved layout in WelcomeWidget.ts.vue
Apr 22, 2024
6f0fbeb
ADN-31: Added iframe to widget to include text from an external source.
Apr 22, 2024
f9df087
ADN-31: Added sample file with a heading embedded in iframe
Apr 22, 2024
87f1b75
DN-31: Added unit tests for 'infoTextUrl'
Apr 23, 2024
8fd1742
DN-31: Added docs for 'infoTextUrl'
Apr 23, 2024
7d33cbf
Merge branch 'master' of https://github.com/conterra/mapapps-welcome …
sholtkamp Apr 23, 2024
184621a
Removed duplicate license header
Apr 24, 2024
f64b7ba
DN-26: Updated license header
Apr 24, 2024
d1d237b
DN-26: Removed obsolete license header
Apr 24, 2024
b67e672
DN-26: Replaced arcgis-html-sanitizer with DOMPurify
Apr 24, 2024
bf4988f
DN-26: Updated README.md for dompurify-bundle
Apr 24, 2024
7b1280b
DN-26: Moved HTML sanitizing to Vue component for security reasons.
Apr 24, 2024
cdc0274
DN-26: Added unit test for HTML sanitizing
Apr 24, 2024
1d67895
DN-26: Removed drop shadow of main v-card element.
Apr 24, 2024
c3fd1ee
DN-26: Removed comments from app.json
Apr 24, 2024
41adf19
DN-26: Moved configuration from Config to WelcomeWidgetFactory.ts
Apr 24, 2024
b174654
DN-26: Migrated bundle.js files in dn_welcome bundle to TypeScript
Apr 24, 2024
1f740f3
DN-26: Added docs for including external resources.
Apr 24, 2024
db2245b
DN-26: Use "private" keyword for private members
Apr 24, 2024
97676e6
DN-26: Removed app.js file from sample app
Apr 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion gulpfile.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading