Merge pull request #104 from scissorsneedfoodtoo/fix/firefox-pane-resizing

Fix Firefox Pane Resizing

packages/learn/src/templates/Challenges/classic/Show.js

@@ -85,6 +85,27 @@ const propTypes = {
 };
 
 class ShowClassic extends PureComponent {
+  constructor() {
+    super()
+
+    this.resizeProps = {
+      onStopResize: this.onStopResize.bind(this),
+      onResize: this.onResize.bind(this)
+    }
+
+    this.state = {
+      resizing: false
+    }
+  }
+
+  onResize() {
+    this.setState({ resizing: true });
+  }
+
+  onStopResize() {
+    this.setState({ resizing: false });
+  }
+
   componentDidMount() {
     const {
       challengeMounted,
@@ -136,6 +157,7 @@ class ShowClassic extends PureComponent {
   }
 
   render() {
+    // console.log(this.state)
     const {
       data: {
         challengeNode: {
@@ -154,17 +176,18 @@ class ShowClassic extends PureComponent {
       .map(key => files[key])
       .map((file, index) => (
         <ReflexContainer key={file.key + index} orientation='horizontal'>
-          {index !== 0 && <ReflexSplitter />}
+          {index !== 0 && <ReflexSplitter propagate={true} {...this.resizeProps} />}
           <ReflexElement
             flex={1}
             propagateDimensions={true}
             renderOnResize={true}
             renderOnResizeRate={20}
+            {...this.resizeProps}
             >
             <Editor {...file} fileKey={file.key} />
           </ReflexElement>
           {index + 1 === Object.keys(files).length && (
-            <ReflexSplitter propagate={true} />
+            <ReflexSplitter propagate={true} {...this.resizeProps} />
           )}
           {index + 1 === Object.keys(files).length ? (
             <ReflexElement
@@ -172,6 +195,7 @@ class ShowClassic extends PureComponent {
               propagateDimensions={true}
               renderOnResize={true}
               renderOnResizeRate={20}
+              {...this.resizeProps}
               >
               <Output
                 defaultOutput={`
@@ -196,18 +220,18 @@ class ShowClassic extends PureComponent {
         <Helmet title={`${blockNameTitle} | Learn freeCodeCamp`} />
         <ToolPanel guideUrl={guideUrl} />
         <ReflexContainer orientation='vertical'>
-          <ReflexElement flex={1}>
+          <ReflexElement flex={1} {...this.resizeProps}>
             <SidePanel
               className='full-height'
               description={description}
               title={blockNameTitle}
             />
           </ReflexElement>
-          <ReflexSplitter />
-          <ReflexElement flex={1}>{editors}</ReflexElement>
-          <ReflexSplitter />
-          <ReflexElement flex={0.5}>
-            {showPreview ? <Preview className='full-height' /> : null}
+          <ReflexSplitter propagate={true} {...this.resizeProps} />
+          <ReflexElement flex={1} {...this.resizeProps}>{editors}</ReflexElement>
+          <ReflexSplitter propagate={true} {...this.resizeProps} />
+          <ReflexElement flex={0.5} {...this.resizeProps}>
+            {showPreview ? <Preview className='full-height' disableIframe={this.state.resizing} /> : null}
             <Spacer />
             <TestSuite tests={tests} />
           </ReflexElement>

packages/learn/src/templates/Challenges/classic/classic.css

@@ -11,10 +11,9 @@
   height: 100%;
   display: flex;
   align-items: end;
-  overflow: hidden;
 }
 
 .monaco-menu .action-label { 
-  color: #a2bd9b; 
+  color: #a2bd9b;
   letter-spacing: 0.02em;
 }

packages/learn/src/templates/Challenges/components/Output.js

@@ -39,8 +39,6 @@ class Output extends PureComponent {
     }
   }
 
-  resizeOutput = () => this._editor.layout();
-
   render() {
     const { output, defaultOutput, height } = this.props;
     return (

packages/learn/src/templates/Challenges/components/Preview.js

@@ -1,17 +1,41 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
 
 import './preview.css';
 
 const mainId = 'fcc-main-frame';
 
-export function Preview() {
-  return (
-    <div className='challenge-preview'>
-      <iframe className={'challenge-preview-frame'} id={mainId} />
-    </div>
-  );
+const propTypes = {
+  className: PropTypes.string,
+  disableIframe: PropTypes.bool
+};
+
+class Preview extends PureComponent {
+  constructor(...props) {
+    super(...props)
+
+    this.state = {
+      iframeStatus: this.props.disableIframe
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.disableIframe !== nextProps.disableIframe) {
+      this.setState({ iframeStatus: !this.state.iframeStatus })
+    }
+  }
+
+  render() {
+    const iframeToggle = this.state.iframeStatus ? 'disable' : 'enable';
+    return (
+      <div className={`challenge-preview ${iframeToggle}-iframe`}>
+        <iframe className={'challenge-preview-frame'} id={mainId} />
+      </div>
+    );
+  }
 }
 
 Preview.displayName = 'Preview';
+Preview.propTypes = propTypes;
 
 export default Preview;

packages/learn/src/templates/Challenges/components/preview.css

@@ -10,4 +10,12 @@
   width: 100%;
   padding: 0;
   margin: 0;
+}
+
+.enable-iframe {
+  pointer-events: auto;
+}
+
+.disable-iframe {
+  pointer-events: none;
 }