diff --git a/src/main/js/apps/sample/app.json b/src/main/js/apps/sample/app.json index bf1e426..4a0bb9d 100644 --- a/src/main/js/apps/sample/app.json +++ b/src/main/js/apps/sample/app.json @@ -36,6 +36,7 @@ "showButton": true, "buttonText": "${welcome.buttonText}", "buttonDependsOnCheckbox": false, + "startTourOnButtonClick": true, "showCheckbox": true, "checkboxChecked": false, "checkboxText": "${welcome.checkboxText}", diff --git a/src/main/js/bundles/dn_welcome/README.md b/src/main/js/bundles/dn_welcome/README.md index 56efce9..3835915 100644 --- a/src/main/js/bundles/dn_welcome/README.md +++ b/src/main/js/bundles/dn_welcome/README.md @@ -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, @@ -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 diff --git a/src/main/js/bundles/dn_welcome/WelcomeWidget.ts.vue b/src/main/js/bundles/dn_welcome/WelcomeWidget.ts.vue index 381f1ea..9bc123d 100644 --- a/src/main/js/bundles/dn_welcome/WelcomeWidget.ts.vue +++ b/src/main/js/bundles/dn_welcome/WelcomeWidget.ts.vue @@ -74,7 +74,7 @@ :disabled="showCheckbox && buttonDependsOnCheckbox && !checkboxChecked" ripple color="primary" - @click="$emit('close')" + @click="$emit('click-button')" > {{ buttonText }} diff --git a/src/main/js/bundles/dn_welcome/WelcomeWidgetFactory.ts b/src/main/js/bundles/dn_welcome/WelcomeWidgetFactory.ts index b060029..1b35b52 100644 --- a/src/main/js/bundles/dn_welcome/WelcomeWidgetFactory.ts +++ b/src/main/js/bundles/dn_welcome/WelcomeWidgetFactory.ts @@ -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; private doNotShowStorageKey = "dn_welcome.doNotShow"; private widget: any; @@ -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; @@ -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 { @@ -83,6 +101,7 @@ interface Config { showButton: boolean; buttonText: string; buttonDependsOnCheckbox: boolean; + startTourOnButtonClick: boolean; showCheckbox: boolean; checkboxText: string; checkboxChecked: boolean; @@ -95,3 +114,7 @@ interface Config { interface WindowToggleTool { set(propName: "active", value: boolean): void; } + +interface Tour { + startTour(): void; +} diff --git a/src/main/js/bundles/dn_welcome/manifest.json b/src/main/js/bundles/dn_welcome/manifest.json index 1aa5160..24cdae7 100644 --- a/src/main/js/bundles/dn_welcome/manifest.json +++ b/src/main/js/bundles/dn_welcome/manifest.json @@ -12,6 +12,9 @@ "apprt-vuetify": "^4.12.0", "dompurify-bundle": "2.0.1-SNAPSHOT" }, + "optionalDependencies": { + "dn_intro": "^2.0.5" + }, "CSS-Themes-Extension": [ { "name": "*", @@ -68,6 +71,7 @@ "showButton": true, "buttonText": "", "buttonDependsOnCheckbox": false, + "startTourOnButtonClick": false, "showCheckbox": true, "checkboxChecked": false, "checkboxText": "I agree", @@ -80,6 +84,11 @@ "name": "windowToggleTool", "providing": "ct.tools.Tool", "filter": "(id=welcomeToggleTool)" + }, + { + "name": "tour", + "providing": "dn_intro.Tour", + "cardinality": "0..1" } ] },