#75: Offload task pane flyout menu to FlyoutRegion

Add a special iframe to the task pane flyout to ensure the flyout will go over any embedded content on IE. Fixes #52
jumpinjackie · Oct 15, 2016 · 626695d · 626695d
1 parent aa3ceec
commit 626695d
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 40 deletions.
diff --git a/src/actions/init.ts b/src/actions/init.ts
@@ -202,23 +202,31 @@ function prepareSubMenus(tbConf: any): any {
         flyouts: {}
     };
     for (const key in tbConf) {
-        prepared.toolbars[key] = {
-            items: []
-        };
-        for (const item of tbConf[key].items) {
-            //Special case: contextmenu is all inline
-            if (item.children && key != 'contextmenu') {
-                const flyoutId = `${item.label}_${uuid.v4()}`;
-                prepared.toolbars[key].items.push({
-                    label: item.label,
-                    tooltip: item.tooltip,
-                    flyoutId: flyoutId
-                });
-                prepared.flyouts[flyoutId] = { 
-                    children: item.children
+        //Special case: Task pane. Transfer all to flyout
+        if (key == "taskpane") {
+            const flyoutId = key;
+            prepared.flyouts[flyoutId] = { 
+                children: tbConf[key].items
+            }
+        } else {
+            prepared.toolbars[key] = {
+                items: []
+            };
+            for (const item of tbConf[key].items) {
+                //Special case: contextmenu is all inline
+                if (item.children && key != 'contextmenu') {
+                    const flyoutId = `${item.label}_${uuid.v4()}`;
+                    prepared.toolbars[key].items.push({
+                        label: item.label,
+                        tooltip: item.tooltip,
+                        flyoutId: flyoutId
+                    });
+                    prepared.flyouts[flyoutId] = { 
+                        children: item.children
+                    }
+                } else {
+                    prepared.toolbars[key].items.push(item);
                 }
-            } else {
-                prepared.toolbars[key].items.push(item);
             }
         }
     }

diff --git a/src/components/flyout-region.tsx b/src/components/flyout-region.tsx
@@ -32,8 +32,8 @@ export class FlyoutRegion extends React.Component<IFlyoutRegionProps, any> {
                         containerStyle.left = met.posX;
                         containerStyle.top = met.posY;
                     }
-                    children.push(<div className="mg-flyout-menu-container" style={containerStyle}>
-                        <FlyoutWrapper key={flyoutId} id={`flyout-${flyoutId}`} open={open} options={{ type: "dropdown", align: align }}>
+                    children.push(<div key={flyoutId} className="mg-flyout-menu-container" style={containerStyle}>
+                        <FlyoutWrapper id={`flyout-${flyoutId}`} open={open} options={{ type: "dropdown", align: align }}>
                             <ul className="mg-flyout-menu-content">
                             {items.map((item, index) => {
                                 if (item.isSeparator) {
@@ -45,6 +45,11 @@ export class FlyoutRegion extends React.Component<IFlyoutRegionProps, any> {
                                     return <FlyoutMenuChildItem key={index} item={item} onInvoked={invoked} />;
                                 }
                             })}
+                            {(() => {
+                                if (flyoutId === "taskpane") {
+                                    return <li><iframe src="about:blank" className="iframe-iehack-zindex" /></li>;
+                                }
+                            })()}
                             </ul>
                         </FlyoutWrapper>
                     </div>);

diff --git a/src/components/task-pane.tsx b/src/components/task-pane.tsx
@@ -1,26 +1,26 @@
 import * as React from "react";
-import { Toolbar, IItem, IInlineMenu, DEFAULT_TOOLBAR_SIZE, TOOLBAR_BACKGROUND_COLOR } from "./toolbar";
+import { Toolbar, IItem, IFlyoutMenu, DEFAULT_TOOLBAR_SIZE, TOOLBAR_BACKGROUND_COLOR } from "./toolbar";
 import queryString = require("query-string");
 const parse = require("url-parse");
 import { ensureParameters } from "../actions/taskpane";
 import { PlaceholderComponent } from "../api/registry/component";
 import { tr } from "../api/i18n";
+import { IDOMElementMetrics } from "../api/common";
 
 export interface ITaskPaneProps {
     currentUrl?: string;
     mapName: string;
     session: string;
     locale: string;
-    taskMenuItems: IItem[];
     homeAction: IItem;
     backAction: IItem;
     forwardAction: IItem;
     onUrlLoaded: (url: string) => void;
     lastUrlPushed?: boolean;
     showTaskBar: boolean;
     maxHeight?: number;
-    onOpenFlyout?: (id: string) => void;
-    onCloseFlyout?: (id: string) => void;
+    onOpenFlyout: (id: string, metrics: IDOMElementMetrics) => void;
+    onCloseFlyout: (id: string) => void;
 }
 
 // HACK:
@@ -50,7 +50,7 @@ export class TaskPane extends React.Component<ITaskPaneProps, any> {
     private fnFrameMounted: (iframe: HTMLIFrameElement) => void;
     private fnFrameLoaded: GenericEventHandler;
     private taskButtons: IItem[];
-    private fnOpenFlyout: (id: string) => void;
+    private fnOpenFlyout: (id: string, metrics: IDOMElementMetrics) => void;
     private fnCloseFlyout: (id: string) => void;
     constructor(props: ITaskPaneProps) {
         super(props);
@@ -73,9 +73,9 @@ export class TaskPane extends React.Component<ITaskPaneProps, any> {
             this.props.onCloseFlyout(id);
         }
     }
-    private onOpenFlyout(id: string): void {
+    private onOpenFlyout(id: string, metrics: IDOMElementMetrics): void {
         if (this.props.onOpenFlyout) {
-            this.props.onOpenFlyout(id);
+            this.props.onOpenFlyout(id, metrics);
         }
     }
     private onFrameMounted(iframe: HTMLIFrameElement) {
@@ -111,10 +111,10 @@ export class TaskPane extends React.Component<ITaskPaneProps, any> {
         }
     }
     render(): JSX.Element {
-        const taskMenu: IInlineMenu = {
+        const taskMenu: IFlyoutMenu = {
             label: tr("MENU_TASKS", this.props.locale),
             flyoutAlign: "bottom left",
-            childItems: this.props.taskMenuItems
+            flyoutId: "taskpane"
         };
 
         const rootStyle: React.CSSProperties = {};

diff --git a/src/containers/task-pane.tsx b/src/containers/task-pane.tsx
@@ -28,7 +28,6 @@ export interface ITaskPaneContainerStyle {
 export interface ITaskPaneContainerState {
     map: RuntimeMap | null;
     taskpane: ITaskPaneReducerState;
-    toolbar: IToolbarReducerState;
     config: IConfigurationReducerState;
     selection: ISelectionReducerState;
 }
@@ -51,8 +50,7 @@ function mapStateToProps(state: IApplicationState): ITaskPaneContainerState {
         map: state.map.state,
         taskpane: state.taskpane,
         config: state.config,
-        selection: state.selection,
-        toolbar: state.toolbar.toolbars["taskpane"]
+        selection: state.selection
     };
 }
 
@@ -157,26 +155,19 @@ export class TaskPaneContainer extends React.Component<TaskPaneProps, any> {
         store: React.PropTypes.object
     };
     render(): JSX.Element {
-        const { taskpane, config, map, toolbar, invokeCommand, maxHeight } = this.props;
+        const { taskpane, config, map, invokeCommand, maxHeight } = this.props;
         if (taskpane && config && map) {
-            let childItems: IItem[];
-            if (toolbar && toolbar.items && invokeCommand) {
-                const store = (this.context as any).store;
-                const items = (toolbar.items as any[]).map(tb => mapToolbarReference(tb, store, invokeCommand));
-                childItems = processMenuItems(items);
-            } else {
-                childItems = [];
-            }
             if (taskpane.navigation[taskpane.navIndex]) {
                 return <TaskPane currentUrl={taskpane.navigation[taskpane.navIndex]}
                                  showTaskBar={config.capabilities.hasTaskBar}
                                  lastUrlPushed={taskpane.lastUrlPushed}
                                  homeAction={this.homeAction}
                                  backAction={this.backAction}
+                                 onOpenFlyout={this.fnOpenFlyout}
+                                 onCloseFlyout={this.fnCloseFlyout}
                                  forwardAction={this.forwardAction}
                                  session={map.SessionId}
                                  mapName={map.Name}
-                                 taskMenuItems={childItems}
                                  onUrlLoaded={this.fnUrlLoaded}
                                  maxHeight={maxHeight}
                                  locale={config.locale} />;

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -2,6 +2,16 @@
 @import '~@aneves/react-flyout/dist/flyout.css';
 @import "../externs/ol3-contextmenu.css";
 
+.iframe-iehack-zindex {
+    position: absolute;
+    border: none;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    z-index: -1;
+}
+
 /* OpenLayers overrides */
 
 .ol-attribution {