Fix #1879 Include fullscreen button in embed pages (#1880) (#1883)

GeoNode · Oct 16, 2024 · 936c1be · 936c1be
1 parent 3a1128d
commit 936c1be
Show file tree

Hide file tree

Showing 27 changed files with 208 additions and 37 deletions.
diff --git a/geonode_mapstore_client/client/js/apps/gn-dashboard.js b/geonode_mapstore_client/client/js/apps/gn-dashboard.js
@@ -11,6 +11,7 @@ import main from '@mapstore/framework/components/app/main';
 import MainLoader from '@js/components/MainLoader';
 import ViewerRoute from '@js/routes/Viewer';
 import Router, { withRoutes } from '@js/components/Router';
+import controls from '@mapstore/framework/reducers/controls';
 import security from '@mapstore/framework/reducers/security';
 import maptype from '@mapstore/framework/reducers/maptype';
 import dashboard from '@mapstore/framework/reducers/dashboard';
@@ -27,7 +28,8 @@ import {
     setupConfiguration,
     initializeApp,
     getPluginsConfiguration,
-    getPluginsConfigOverride
+    getPluginsConfigOverride,
+    addQueryPlugins
 } from '@js/utils/AppUtils';
 import { ResourceTypes } from '@js/utils/ResourceUtils';
 import pluginsDefinition, { storeEpicsNamesToExclude, cleanEpics } from '@js/plugins/index';
@@ -73,7 +75,8 @@ document.addEventListener('DOMContentLoaded', function() {
                         onStoreInit,
                         geoNodePageConfig,
                         targetId = 'ms-container',
-                        settings
+                        settings,
+                        query
                     }) => {
 
                         const appEpics = cleanEpics({
@@ -86,7 +89,10 @@ document.addEventListener('DOMContentLoaded', function() {
                         main({
                             targetId,
                             appComponent: withRoutes(routes)(ConnectedRouter),
-                            pluginsConfig: getPluginsConfigOverride(getPluginsConfiguration(localConfig.plugins, pluginsConfigKey)),
+                            pluginsConfig: addQueryPlugins(
+                                getPluginsConfigOverride(getPluginsConfiguration(localConfig.plugins, pluginsConfigKey)),
+                                query
+                            ),
                             loaderComponent: MainLoader,
                             pluginsDef: {
                                 plugins: {
@@ -107,6 +113,7 @@ document.addEventListener('DOMContentLoaded', function() {
                             },
                             themeCfg: null,
                             appReducers: {
+                                controls,
                                 dashboard,
                                 gnresource,
                                 gnsettings,

diff --git a/geonode_mapstore_client/client/js/apps/gn-document.js b/geonode_mapstore_client/client/js/apps/gn-document.js
@@ -10,6 +10,7 @@ import main from '@mapstore/framework/components/app/main';
 import ViewerRoute from '@js/routes/Viewer';
 import MainLoader from '@js/components/MainLoader';
 import Router, { withRoutes } from '@js/components/Router';
+import controls from '@mapstore/framework/reducers/controls';
 import security from '@mapstore/framework/reducers/security';
 import gnresource from '@js/reducers/gnresource';
 import gnsettings from '@js/reducers/gnsettings';
@@ -23,7 +24,8 @@ import {
     setupConfiguration,
     initializeApp,
     getPluginsConfiguration,
-    getPluginsConfigOverride
+    getPluginsConfigOverride,
+    addQueryPlugins
 } from '@js/utils/AppUtils';
 import { ResourceTypes } from '@js/utils/ResourceUtils';
 import pluginsDefinition, { storeEpicsNamesToExclude, cleanEpics } from '@js/plugins/index';
@@ -68,7 +70,8 @@ document.addEventListener('DOMContentLoaded', function() {
                         onStoreInit,
                         geoNodePageConfig,
                         targetId = 'ms-container',
-                        settings
+                        settings,
+                        query
                     }) => {
 
                         const appEpics = cleanEpics({
@@ -81,7 +84,10 @@ document.addEventListener('DOMContentLoaded', function() {
                         main({
                             targetId,
                             appComponent: withRoutes(routes)(ConnectedRouter),
-                            pluginsConfig: getPluginsConfigOverride(getPluginsConfiguration(localConfig.plugins, pluginsConfigKey)),
+                            pluginsConfig: addQueryPlugins(
+                                getPluginsConfigOverride(getPluginsConfiguration(localConfig.plugins, pluginsConfigKey)),
+                                query
+                            ),
                             loaderComponent: MainLoader,
                             pluginsDef: {
                                 plugins: {
@@ -99,6 +105,7 @@ document.addEventListener('DOMContentLoaded', function() {
                             },
                             themeCfg: null,
                             appReducers: {
+                                controls,
                                 gnresource,
                                 gnsettings,
                                 security

diff --git a/geonode_mapstore_client/client/js/apps/gn-geostory.js b/geonode_mapstore_client/client/js/apps/gn-geostory.js
@@ -11,6 +11,7 @@ import main from '@mapstore/framework/components/app/main';
 import MainLoader from '@js/components/MainLoader';
 import ViewerRoute from '@js/routes/Viewer';
 import Router, { withRoutes } from '@js/components/Router';
+import controls from '@mapstore/framework/reducers/controls';
 import security from '@mapstore/framework/reducers/security';
 import maptype from '@mapstore/framework/reducers/maptype';
 import geostory from '@mapstore/framework/reducers/geostory';
@@ -29,7 +30,8 @@ import {
     setupConfiguration,
     initializeApp,
     getPluginsConfiguration,
-    getPluginsConfigOverride
+    getPluginsConfigOverride,
+    addQueryPlugins
 } from '@js/utils/AppUtils';
 import { ResourceTypes } from '@js/utils/ResourceUtils';
 import pluginsDefinition, { storeEpicsNamesToExclude, cleanEpics } from '@js/plugins/index';
@@ -76,7 +78,8 @@ document.addEventListener('DOMContentLoaded', function() {
                         configEpics,
                         onStoreInit,
                         targetId = 'ms-container',
-                        settings
+                        settings,
+                        query
                     }) => {
 
                         const appEpics = cleanEpics({
@@ -89,7 +92,10 @@ document.addEventListener('DOMContentLoaded', function() {
                         main({
                             targetId,
                             appComponent: withRoutes(routes)(ConnectedRouter),
-                            pluginsConfig: getPluginsConfigOverride(getPluginsConfiguration(localConfig.plugins, pluginsConfigKey)),
+                            pluginsConfig: addQueryPlugins(
+                                getPluginsConfigOverride(getPluginsConfiguration(localConfig.plugins, pluginsConfigKey)),
+                                query
+                            ),
                             loaderComponent: MainLoader,
                             pluginsDef: {
                                 plugins: {
@@ -114,6 +120,7 @@ document.addEventListener('DOMContentLoaded', function() {
                                 gnresource,
                                 gnsettings,
                                 security,
+                                controls,
                                 maptype
                             },
                             appEpics,

diff --git a/geonode_mapstore_client/client/js/apps/gn-map.js b/geonode_mapstore_client/client/js/apps/gn-map.js
@@ -49,7 +49,8 @@ import {
     setupConfiguration,
     initializeApp,
     getPluginsConfiguration,
-    getPluginsConfigOverride
+    getPluginsConfigOverride,
+    addQueryPlugins
 } from '@js/utils/AppUtils';
 import { ResourceTypes } from '@js/utils/ResourceUtils';
 import { requestResourceConfig } from '@js/actions/gnresource';
@@ -145,7 +146,10 @@ document.addEventListener('DOMContentLoaded', function() {
                                 }
                             },
                             themeCfg: null,
-                            pluginsConfig: getPluginsConfigOverride(getPluginsConfiguration(localConfig.plugins, pluginsConfigKey)),
+                            pluginsConfig: addQueryPlugins(
+                                getPluginsConfigOverride(getPluginsConfiguration(localConfig.plugins, pluginsConfigKey)),
+                                query
+                            ),
                             pluginsDef: {
                                 plugins: {
                                     ...pluginsDefinition.plugins

diff --git a/geonode_mapstore_client/client/js/components/Menu/MenuItem.js b/geonode_mapstore_client/client/js/components/Menu/MenuItem.js
@@ -81,6 +81,10 @@ const MenuItem = ({ item, menuItemsProps, containerNode, tabIndex, classItem = '
         return <div className="gn-menu-divider" style={style}></div>;
     }
 
+    if (type === 'placeholder') {
+        return <span />;
+    }
+
     if (type === 'filter') {
         const active = castArray(query.f || []).find(value => value === item.id);
         return (

diff --git a/geonode_mapstore_client/client/js/plugins/ActionNavbar.jsx b/geonode_mapstore_client/client/js/plugins/ActionNavbar.jsx
@@ -12,7 +12,7 @@ import { connect, createPlugin } from '@mapstore/framework/utils/PluginsUtils';
 import { createSelector } from 'reselect';
 import ActionNavbar from '@js/components/ActionNavbar';
 
-import usePluginItems from '@js/hooks/usePluginItems';
+import usePluginItems from '@mapstore/framework/hooks/usePluginItems';
 import {
     getResourcePerms,
     canAddResource,
@@ -41,7 +41,8 @@ function ActionNavbarPlugin(
         resourcePerms,
         resource,
         isDirtyState,
-        selectedLayerPermissions
+        selectedLayerPermissions,
+        variant = 'primary'
     },
     context
 ) {
@@ -113,7 +114,7 @@ function ActionNavbarPlugin(
         <ActionNavbar
             leftItems={leftItems}
             rightItems={rightItems}
-            variant="primary"
+            variant={variant}
             size="sm"
             resource={resource}
         />

diff --git a/geonode_mapstore_client/client/js/plugins/Share.jsx b/geonode_mapstore_client/client/js/plugins/Share.jsx
@@ -40,6 +40,7 @@ import {
     getResourceTypesInfo
 } from '@js/utils/ResourceUtils';
 import SharePageLink from '@js/plugins/share/SharePageLink';
+import ShareEmbedLink from '@js/plugins/share/ShareEmbedLink';
 import { getCurrentResourcePermissionsLoading } from '@js/selectors/resourceservice';
 
 const getEmbedUrl = (resource) => {
@@ -152,9 +153,9 @@ function Share({
                     </Button>
                 </div>
                 <div className="gn-share-panel-body">
-                    <SharePageLink url={pageUrl} label={<Message msgId="gnviewer.thisPage" />} />
-                    {embedUrl && <SharePageLink url={embedUrl} label={<Message msgId={`gnviewer.embed${resourceType}`} />} />}
-                    {(resourceType === 'document' && !!downloadUrl) && <SharePageLink url={downloadUrl} label={<Message msgId={`gnviewer.directLink`} />} />}
+                    <SharePageLink value={pageUrl} label={<Message msgId="gnviewer.thisPage" />} />
+                    {embedUrl && <ShareEmbedLink embedUrl={embedUrl} label={<Message msgId={`gnviewer.embed${resourceType}`} />} />}
+                    {(resourceType === 'document' && !!downloadUrl) && <SharePageLink value={downloadUrl} label={<Message msgId={`gnviewer.directLink`} />} />}
                     {canEdit && <>
                         <Permissions
                             compactPermissions={compactPermissions}

diff --git a/geonode_mapstore_client/client/js/plugins/actionnavbar/buttons.jsx b/geonode_mapstore_client/client/js/plugins/actionnavbar/buttons.jsx
@@ -39,18 +39,20 @@ export const FullScreenActionButton = connect(createSelector([
     onClick,
     variant,
     size,
-    enabled
+    enabled,
+    showText
 }) => {
     const FullScreenButton = tooltip(Button);
+    const label = enabled ?  <Message msgId="gnviewer.nativescreen"/> : <Message msgId="gnviewer.fullscreen"/>;
     return (
         <FullScreenButton
             tooltipPosition={enabled ? "left" : "top"}
-            tooltip={ enabled ?  <Message msgId="gnviewer.nativescreen"/> : <Message msgId="gnviewer.fullscreen"/>  }
+            tooltip={ showText ? undefined : label }
             variant={variant}
             size={size}
             onClick={() => onClick(!enabled)}
         >
-            <FaIcon name={enabled ? "expand" : "expand"} />
+            {showText ? label : <FaIcon name={enabled ? "expand" : "expand"} />}
         </FullScreenButton>
     );
 });

diff --git a/geonode_mapstore_client/client/js/plugins/share/ShareEmbedLink.jsx b/geonode_mapstore_client/client/js/plugins/share/ShareEmbedLink.jsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright 2024, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { useState } from 'react';
+import { Checkbox } from 'react-bootstrap';
+import SharePageLink from './SharePageLink';
+import Message from '@mapstore/framework/components/I18N/Message';
+
+function ShareEmbedLink({
+    embedUrl,
+    label
+}) {
+    const [includeFullscreen, setIncludeFullscreen] = useState(false);
+    const getEmbedSnippet = () => {
+        return [
+            '<iframe',
+            includeFullscreen ? 'allow="fullscreen"' : '',
+            'width="560"',
+            'height="315"',
+            `src="${embedUrl}${includeFullscreen ? '?allowFullscreen=true' : ''}"`,
+            'frameborder="0"',
+            '></iframe>'
+        ].filter(value => value).join(' ');
+    };
+    return (
+        <SharePageLink value={getEmbedSnippet()} label={label} >
+            <Checkbox checked={includeFullscreen} onChange={(event) => setIncludeFullscreen(!!event.target.checked )}>
+                <Message msgId="gnviewer.includeFullscreen" />
+            </Checkbox>
+        </SharePageLink>
+    );
+}
+
+export default ShareEmbedLink;
diff --git a/geonode_mapstore_client/client/js/plugins/share/SharePageLink.jsx b/geonode_mapstore_client/client/js/plugins/share/SharePageLink.jsx
@@ -12,7 +12,7 @@ import FaIcon from '@js/components/FaIcon/FaIcon';
 import CopyToClipboard from 'react-copy-to-clipboard';
 
 
-function SharePageLink({label, url}) {
+function SharePageLink({label, value, children}) {
     const [copied, setCopied] = useState(false);
     useEffect(() => {
         if (copied) {
@@ -31,10 +31,10 @@ function SharePageLink({label, url}) {
                             readOnly
                             rel="noopener noreferrer"
                             target="_blank"
-                            value={url}
+                            value={value}
                         />
                         {!copied && <CopyToClipboard
-                            text={url}
+                            text={value}
                         >
                             <Button
                                 size="sm"
@@ -44,6 +44,7 @@ function SharePageLink({label, url}) {
                             </Button>
                         </CopyToClipboard>}
                         {copied && <Button size="sm"><FaIcon name="check" /></Button>}</div>
+                    {children}
                 </div>
             </div>
         </div>

diff --git a/geonode_mapstore_client/client/js/routes/MapViewer.jsx b/geonode_mapstore_client/client/js/routes/MapViewer.jsx
@@ -54,7 +54,11 @@ function MapViewerRoute({
 
     const selectPluginsConfig = () => {
         if (hasViewer === true && embed) {
-            return getPluginsConfiguration('desktop', viewerPluginsConfig);
+            return [
+                ...getPluginsConfiguration(name, propPluginsConfig)
+                    .filter((plugin) => !!plugin.mandatory),
+                ...getPluginsConfiguration('desktop', viewerPluginsConfig)
+            ];
         }
         if (hasViewer === true && (resource?.pk === pk || pk === 'new')) {
             return uniqBy([

diff --git a/geonode_mapstore_client/client/js/utils/AppUtils.js b/geonode_mapstore_client/client/js/utils/AppUtils.js
@@ -350,3 +350,39 @@ export const getPluginsConfigOverride = (pluginsConfig) => isFunction(apiPlugins
     : isObject(apiPluginsConfig)
         ? apiPluginsConfig
         : pluginsConfig;
+
+/* this function adds plugin based on the current query, used mainly for embed pages*/
+export const addQueryPlugins = (pluginsConfig, query) => {
+    if (isArray(pluginsConfig)) {
+        return [
+            ...(query?.allowFullscreen === 'true'
+                ? [{
+                    mandatory: true, // needed for custom viewers
+                    name: 'FullScreen',
+                    cfg: {
+                        showText: true
+                    }
+                },
+                {
+                    mandatory: true, // needed for custom viewers
+                    name: 'ActionNavbar',
+                    cfg: {
+                        containerPosition: 'footer',
+                        variant: 'default',
+                        leftMenuItems: [{
+                            type: 'placeholder'
+                        }],
+                        rightMenuItems: [
+                            {
+                                type: 'plugin',
+                                name: 'FullScreen',
+                                size: 'xs'
+                            }
+                        ]
+                    }
+                }] : []),
+            ...pluginsConfig
+        ];
+    }
+    return pluginsConfig;
+};