Skip to content

Commit

Permalink
Merge pull request #7 from conterra/DN-25
Browse files Browse the repository at this point in the history 
Dn 25
  • Loading branch information
@sholtkamp
sholtkamp authored Jun 21, 2024
2 parents e004cbb + 5049cc1 commit fdcfe84
Show file tree
Hide file tree
Showing 5 changed files with 68 additions and 17 deletions.
1 change: 1 addition & 0 deletions src/main/js/apps/sample/app.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"showButton": true,
"buttonText": "${welcome.buttonText}",
"buttonDependsOnCheckbox": false,
"startTourOnButtonClick": true,
"showCheckbox": true,
"checkboxChecked": false,
"checkboxText": "${welcome.checkboxText}",
Expand Down
48 changes: 33 additions & 15 deletions src/main/js/bundles/dn_welcome/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ All configuration is performed on the `Config` component as show in the followin
"showButton": true,
"buttonText": "${welcome.buttonText}",
"buttonDependsOnCheckbox": true,
"startTourOnButtonClick": false,
"showCheckbox": true,
"checkboxText": "${welcome.checkboxText}",
"checkboxChecked": true,
Expand Down Expand Up @@ -69,24 +70,41 @@ 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
### Starting an introductory tour with the dn_intro bundle

If you have the `dn_intro` bundle installed and want to start an introductory tour when the user clicks the button in the welcome window, you can set the `startTourOnButtonClick` property to `true`:

```json
{
"dn_welcome": {
"Config": {
"startTourOnButtonClick": true
}
}
}
```

See the documentation of the [dn_intro](https://github.com/conterra/mapapps-intro/blob/master/src/main/js/bundles/dn_intro/README.md) bundle for more information on how to configure the tour.

### Available properties

All of these properties are optional.

| 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')` |
| `imageHeight` | String | | ```300px``` | The height of the image defined as a valid CSS dimension string. |
| 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. |
| `startTourOnButtonClick` | Boolean | `true` | `false` | `false` | If `true` and the `dn_intro` bundle is installed, when clicking the button in the welcome window, the tour configured in the dn_intro bundle will be started. |
| `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')` |
| `imageHeight` | String | | ```300px``` | The height of the image defined as a valid CSS dimension string. |


### Container window configuration
Expand Down
2 changes: 1 addition & 1 deletion src/main/js/bundles/dn_welcome/WelcomeWidget.ts.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
:disabled="showCheckbox && buttonDependsOnCheckbox && !checkboxChecked"
ripple
color="primary"
@click="$emit('close')"
@click="$emit('click-button')"
>
{{ buttonText }}
</v-btn>
Expand Down
25 changes: 24 additions & 1 deletion src/main/js/bundles/dn_welcome/WelcomeWidgetFactory.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,11 @@
import WelcomeWidget from "./WelcomeWidget.ts.vue";
import Vue from "apprt-vue/Vue";
import VueDijit from "apprt-vue/VueDijit";
import {InjectedReference} from "apprt-core/InjectedReference";

export default class WelcomeWidgetFactory {
private _windowToggleTool: WindowToggleTool | undefined;
private _tour: InjectedReference<Tour>;
private doNotShowStorageKey = "dn_welcome.doNotShow";
private widget: any;

Expand Down Expand Up @@ -52,13 +54,16 @@ export default class WelcomeWidgetFactory {
vm.imageUrl = config.imageUrl;
vm.imageHeight = config.imageHeight;

vm.$on('close', () => {
vm.$on('click-button', () => {
if (config.showCheckbox && vm.checkboxChecked) {
localStorage.setItem(this.doNotShowStorageKey, "1");
} else {
localStorage.removeItem(this.doNotShowStorageKey);
}
this._windowToggleTool?.set("active", false);
if (config.startTourOnButtonClick) {
this.startDnIntroTour();
}
});

return vm;
Expand All @@ -71,9 +76,22 @@ export default class WelcomeWidgetFactory {
}
}

private startDnIntroTour(): void {
if (!this._tour) {
console.error("Could not start tour. 'dn_intro.Tour' component not available. " +
"Did you install the latest 'dn_intro' bundle?");
} else {
this._tour.startTour();
}
}

set windowToggleTool(tool: WindowToggleTool) {
this._windowToggleTool = tool;
}

set tour(tour: Tour) {
this._tour = tour;
}
}

interface Config {
Expand All @@ -83,6 +101,7 @@ interface Config {
showButton: boolean;
buttonText: string;
buttonDependsOnCheckbox: boolean;
startTourOnButtonClick: boolean;
showCheckbox: boolean;
checkboxText: string;
checkboxChecked: boolean;
Expand All @@ -95,3 +114,7 @@ interface Config {
interface WindowToggleTool {
set(propName: "active", value: boolean): void;
}

interface Tour {
startTour(): void;
}
Loading

0 comments on commit fdcfe84

Please sign in to comment.