diff --git a/package-lock.json b/package-lock.json index 814a2aa99..a52acd3ae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3149,9 +3149,9 @@ } }, "node_modules/@linzjs/lui": { - "version": "21.15.1", - "resolved": "https://registry.npmjs.org/@linzjs/lui/-/lui-21.15.1.tgz", - "integrity": "sha512-O4d7NtP6QU6UkYCjDiGS3aGbyPiUCtmZmrYtBaF5HfcC3z+ndZEyHPDW7f0QbT93NTeQ7s58OSulZbFBspr3rA==", + "version": "21.46.0", + "resolved": "https://registry.npmjs.org/@linzjs/lui/-/lui-21.46.0.tgz", + "integrity": "sha512-8ZuXx556OInxJIvOyYiE9/Bn/o1kN/7L4bCfeiV17MZRjA3nkdsPWGBISWCppSPUJsnkBnRrVxohIqCwdH8/2Q==", "dev": true, "dependencies": { "@fontsource/open-sans": "^4.5.1", @@ -5316,6 +5316,15 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/react-modal": { + "version": "3.16.3", + "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.16.3.tgz", + "integrity": "sha512-xXuGavyEGaFQDgBv4UVm8/ZsG+qxeQ7f77yNrW3n+1J6XAstUy5rYHeIHPh1KzsGc6IkCIdu6lQ2xWzu1jBTLg==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/react-transition-group": { "version": "4.4.10", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz", @@ -19571,15 +19580,17 @@ "@basemaps/geo": "^7.11.0", "@basemaps/infra": "^7.11.0", "@basemaps/shared": "^7.11.0", - "@linzjs/lui": "^21.12.1", + "@linzjs/lui": "^21.46.0", "@servie/events": "^3.0.0", "@types/proj4": "^2.5.2", "@types/react-dom": "^18.0.6", + "@types/react-modal": "^3.16.3", "maplibre-gl": "^4.5.0", "mime-types": "^2.1.35", "proj4": "^2.8.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-modal": "^3.16.1", "ulid": "^2.3.0" }, "engines": { diff --git a/packages/landing/package.json b/packages/landing/package.json index 05f21dcf5..96933684e 100644 --- a/packages/landing/package.json +++ b/packages/landing/package.json @@ -33,15 +33,17 @@ "@basemaps/geo": "^7.11.0", "@basemaps/infra": "^7.11.0", "@basemaps/shared": "^7.11.0", - "@linzjs/lui": "^21.12.1", + "@linzjs/lui": "^21.46.0", "@servie/events": "^3.0.0", "@types/proj4": "^2.5.2", "@types/react-dom": "^18.0.6", + "@types/react-modal": "^3.16.3", "maplibre-gl": "^4.5.0", "mime-types": "^2.1.35", "proj4": "^2.8.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-modal": "^3.16.1", "ulid": "^2.3.0" }, "publishConfig": { @@ -60,6 +62,14 @@ "entry": "../../node_modules/@linzjs/lui/dist/assets/images/linz-motif.svg", "outfile": "dist/assets/logo-linz.svg" }, + { + "entry": "../../node_modules/@linzjs/lui/dist/assets/icons/whats_new_updates.svg", + "outfile": "dist/assets/whats_new_updates.svg" + }, + { + "entry": "../../node_modules/@linzjs/lui/dist/assets/icons/clear.svg", + "outfile": "dist/assets/clear.svg" + }, { "entry": "../../node_modules/@linzjs/lui/dist/assets/fonts", "outfile": "dist/assets/fonts" diff --git a/packages/landing/src/components/feature.updates.tsx b/packages/landing/src/components/feature.updates.tsx new file mode 100644 index 000000000..a6c61e807 --- /dev/null +++ b/packages/landing/src/components/feature.updates.tsx @@ -0,0 +1,107 @@ +import { clsx } from 'clsx'; +import { Component, ReactNode } from 'react'; +import ReactModal from 'react-modal'; + +import { Config } from '../config.js'; + +type FeatureUpdatesProps = { + header: string; + wrapperClass?: string; + id: string; + dismissedKey: string; + closingDate: Date; + enabled: boolean; + children?: ReactNode; +} & { bigImage: string; smallImage: string; iframe?: never }; + +type FeatureUpdatesState = { + showModal: boolean; +}; + +/** + * FeatureUpdates is a re-implementation of @linzjs/lui -> LuiUpdatesSplashModal module, + * This use to enable a one off pop up screen for introduce new feature of the recent release. + * + */ +export class FeatureUpdates extends Component { + constructor(props: FeatureUpdatesProps) { + super(props); + + const id = window.localStorage.getItem(this.props.id); + + this.state = { + showModal: this.props.enabled && this.props.dismissedKey !== id && this.props.closingDate >= new Date(), + }; + } + + handleClose = (): void => { + this.setState({ showModal: false }); + window.localStorage.setItem(this.props.id, this.props.dismissedKey); + }; + + override render(): ReactNode { + const { header, wrapperClass, children, bigImage, smallImage } = this.props; + const { showModal } = this.state; + + if (!showModal) return null; + if (Config.map.isDebug) return; + + return ( + +
+
+
+ {this.WhatsNewIcon()} +

{header}

+
+ +
+ {this.FeatureImages(bigImage, smallImage)} +
{children}
+
+ + ); + } + + FeatureImages(bigImage: string, smallImage: string): ReactNode { + return ( +
+ {"What's + {"What's +
+ ); + } + + // @linzjs/lui whats_new_icon re-implementation + WhatsNewIcon(): ReactNode { + return ( + + whats_new_icon + + ); + } + + // @linzjs/lui cross_icon re-implementation + ClearIcon(): ReactNode { + return ( + + cross_icon + + ); + } +} diff --git a/packages/landing/src/components/new-features/3d.map.tsx b/packages/landing/src/components/new-features/3d.map.tsx new file mode 100644 index 000000000..562bc2091 --- /dev/null +++ b/packages/landing/src/components/new-features/3d.map.tsx @@ -0,0 +1,49 @@ +import { Component, ReactNode } from 'react'; + +import { WindowUrl } from '../../url.js'; +import { FeatureUpdates } from '../feature.updates.js'; + +const baseUrl = WindowUrl.baseUrl(); + +/** + * Please updated the following settings and descriptions for new features pop up + */ +const bigImage = new URL('assets/Lg+3D+Maps+splash.gif', baseUrl).href; // Large gif file location +const smallImage = new URL('assets/Sml+3D+map+splash.gif', baseUrl).href; // Small gif file location +const closingDate = new Date('2024-10-30'); // End date for pop up screen +const id = `LINZ_Basemaps_3D_Map`; // Optional to set as Config.Version to disable Modal as default +const dismissedKey = 'DISMISSED_MODALS_2024_10_3d_map'; // Feature released version can both been major version or minor version +const recentUpdates = { + children: ( + <> +

Basemaps are now viewable in 3D!

+

+ To activate this function, click the mountains icon on the left-hand side then hold right-click to change your + viewpoint. +

+

The new Labels button can also be toggled to show places names.

+ + ), + bigImage, + smallImage, +}; + +export class NewFeature extends Component { + enabled = true; + + override render(): ReactNode { + return ( + + {recentUpdates.children} + + ); + } +} diff --git a/packages/landing/src/index.tsx b/packages/landing/src/index.tsx index f9fbf5883..5bd4c303e 100644 --- a/packages/landing/src/index.tsx +++ b/packages/landing/src/index.tsx @@ -4,6 +4,7 @@ import { createRoot } from 'react-dom/client'; import { Footer } from './components/layout.footer.js'; import { Header } from './components/layout.header.js'; import { Basemaps } from './components/map.js'; +import { NewFeature } from './components/new-features/3d.map.js'; import { Config } from './config.js'; import { WindowUrl } from './url.js'; import { isWebpSupported } from './webp.js'; @@ -13,6 +14,7 @@ class Page extends Component { return (
+