changes

Author: pwjablonski

src/actions/index.js

@@ -27,6 +27,12 @@ import {
   editorBlurred,
   editorFocused,
   editorFocusedRequestedLine,
+<<<<<<< HEAD
+=======
+  editorResized,
+  dragRowDivider,
+  dragColumnDivider,
+>>>>>>> 66eba11... changes
   startDragColumnDivider,
   stopDragColumnDivider,
   notificationTriggered,
@@ -105,8 +111,14 @@ export {
   editorBlurred,
   editorFocused,
   editorFocusedRequestedLine,
+<<<<<<< HEAD
   previousConsoleHistory,
   nextConsoleHistory,
+=======
+  editorResized,
+  dragRowDivider,
+  dragColumnDivider,
+>>>>>>> 66eba11... changes
   startDragColumnDivider,
   stopDragColumnDivider,
   notificationTriggered,

src/actions/ui.js

@@ -12,6 +12,19 @@ export const editorFocusedRequestedLine = createAction(
   'EDITOR_FOCUSED_REQUESTED_LINE',
 );
 
+export const editorFocused = createAction(
+  'EDITOR_FOCUSED',
+  language => ({language}),
+);
+
+export const editorBlurred = createAction(
+  'EDITOR_BLURRED',
+);
+
+export const editorResized = createAction(
+  'EDITOR_RESIZED',
+);
+
 export const startDragColumnDivider = createAction(
   'START_DRAG_COLUMN_DIVIDER',
 );

src/components/Editor.jsx

@@ -35,6 +35,7 @@ class Editor extends React.Component {
     this._handleWindowResize = throttle(() => {
       if (this._editor) {
         this._resizeEditor();
+        this.props.onEditorResized();
       }
     }, RESIZE_THROTTLE);
 
@@ -126,7 +127,7 @@ class Editor extends React.Component {
 <<<<<<< HEAD
 =======
       this._editor.on('blur', () => {
-        this.props.onEditorBlurred(this.props.language);
+        this.props.onEditorBlurred();
       });
       this._editor.on('focus', () => {
         this.props.onEditorFocused(this.props.language);
@@ -189,6 +190,7 @@ Editor.propTypes = {
   onCursorChange: PropTypes.func.isRequired,
   onEditorBlurred: PropTypes.func.isRequired,
   onEditorFocused: PropTypes.func.isRequired,
+  onEditorResized: PropTypes.func.isRequired,
   onInput: PropTypes.func.isRequired,
   onRequestedLineFocused: PropTypes.func.isRequired,
 };

src/components/EditorsColumn.jsx

@@ -67,6 +67,9 @@ export default function EditorsColumn({
           source={currentProject.sources[language]}
           textSizeIsLarge={isTextSizeLarge}
           onCursorChange={onEditorCursorChange}
+          onEditorBlurred={onEditorBlurred}
+          onEditorFocused={onEditorFocused}
+          onEditorResized={onEditorResized}
           onInput={partial(
             onEditorInput,
             currentProject.projectKey,
@@ -138,6 +141,7 @@ EditorsColumn.propTypes = {
   onEditorCursorChange: PropTypes.func.isRequired,
   onEditorFocused: PropTypes.func.isRequired,
   onEditorInput: PropTypes.func.isRequired,
+  onEditorResized: PropTypes.func.isRequired,
   onRef: PropTypes.func.isRequired,
   onRequestedLineFocused: PropTypes.func.isRequired,
   onResizableFlexDividerDrag: PropTypes.func.isRequired,

src/components/Preview.jsx

@@ -1,48 +1,18 @@
 import get from 'lodash-es/get';
 import PropTypes from 'prop-types';
-<<<<<<< HEAD
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import React from 'react';
-=======
-import isNil from 'lodash/isNil';
-import partial from 'lodash/partial';
-import classnames from 'classnames';
-import generatePreview, {generateTextPreview} from '../util/previewFrame';
-import PreviewFrame from './PreviewFrame';
-
-function generateFrameSrc(
-  project,
-  isSyntacticallyValid,
-  lastRefreshTimestamp,
-) {
-  if (isNil(project) || !isSyntacticallyValid) {
-    return '';
-  }
->>>>>>> 23eb7f2... Updates to element highlighter
 
 import PreviewFrame from './PreviewFrame';
 
 export default function Preview({
-<<<<<<< HEAD
-<<<<<<< HEAD
-=======
-  focusedEditors,
-  focusedSelector,
->>>>>>> 3cc1d22... Update selector at cursor and handle unfocused editor
   compiledProjects,
   consoleEntries,
   highlighterSelector,
   showingErrors,
   onConsoleError,
   onConsoleLog,
   onConsoleValue,
-=======
-  focusedEditors,
-  focusedSelector,
-  isSyntacticallyValid,
-  lastRefreshTimestamp,
-  project,
->>>>>>> 23eb7f2... Updates to element highlighter
   onPopOutProject,
   onRefreshClick,
   onRuntimeError,
@@ -55,8 +25,6 @@ export default function Preview({
     <PreviewFrame
       compiledProject={compiledProject}
       consoleEntries={consoleEntries}
-      focusedEditors={focusedEditors}
-      focusedSelector={focusedSelector}
       isActive={key === compiledProjects.keySeq().last()}
       key={compiledProject.compiledProjectKey}
       onConsoleError={onConsoleError}
@@ -82,69 +50,25 @@ export default function Preview({
           onClick={onRefreshClick}
         >&#xf021;</span>
       </div>
-<<<<<<< HEAD
       {projectFrames}
       // focusedSelector={focusedSelector}
-=======
-      <PreviewFrame
-        focusedEditors={focusedEditors}
-        focusedSelector={focusedSelector}
-        src={
-          generateFrameSrc(project, isSyntacticallyValid, lastRefreshTimestamp)
-        }
-        onRuntimeError={onRuntimeError}
-      />
->>>>>>> 23eb7f2... Updates to element highlighter
     </div>
   );
 }
 
 Preview.propTypes = {
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
   compiledProjects: ImmutablePropTypes.iterable.isRequired,
   consoleEntries: ImmutablePropTypes.iterable.isRequired,
-=======
-  compiledProjects: ImmutablePropTypes.iterable.isRequired,
-  consoleEntries: ImmutablePropTypes.iterable.isRequired,
-  focusedEditors: PropTypes.array.isRequired,
->>>>>>> 3cc1d22... Update selector at cursor and handle unfocused editor
   focusedSelector: PropTypes.string,
   showingErrors: PropTypes.bool.isRequired,
   onConsoleError: PropTypes.func.isRequired,
   onConsoleLog: PropTypes.func.isRequired,
   onConsoleValue: PropTypes.func.isRequired,
-=======
-=======
-  focusedEditors: PropTypes.array.isRequired,
->>>>>>> 23eb7f2... Updates to element highlighter
-  focusedSelector: PropTypes.string,
-  isSyntacticallyValid: PropTypes.bool.isRequired,
-  lastRefreshTimestamp: PropTypes.number,
-  project: PropTypes.shape({
-    sources: PropTypes.shape({
-      html: PropTypes.string.isRequired,
-      css: PropTypes.string.isRequired,
-      javascript: PropTypes.string.isRequired,
-    }).isRequired,
-    enabledLibraries: PropTypes.arrayOf(PropTypes.string).isRequired,
-  }).isRequired,
->>>>>>> 621d5f6... Add saga, add ref to iframe element
   onPopOutProject: PropTypes.func.isRequired,
   onRefreshClick: PropTypes.func.isRequired,
   onRuntimeError: PropTypes.func.isRequired,
 };
 
 Preview.defaultProps = {
-<<<<<<< HEAD
-<<<<<<< HEAD
-  highlighterSelector: '',
-=======
-  focusedSelector: null,
-  lastRefreshTimestamp: null,
->>>>>>> 621d5f6... Add saga, add ref to iframe element
-=======
   focusedSelector: null,
->>>>>>> 3cc1d22... Update selector at cursor and handle unfocused editor
 };

src/components/PreviewFrame.jsx

@@ -3,13 +3,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Bowser from 'bowser';
-<<<<<<< HEAD
 import bindAll from 'lodash-es/bindAll';
 import constant from 'lodash-es/constant';
-=======
-import bindAll from 'lodash/bindAll';
-import includes from 'lodash/includes';
->>>>>>> 23eb7f2... Updates to element highlighter
 import {t} from 'i18next';
 
 import normalizeError from '../util/normalizeError';
@@ -23,49 +18,18 @@ const sandboxOptions = [
   'allow-popups-to-escape-sandbox',
   'allow-scripts',
   'allow-top-navigation',
+  'allow-same-origin',
 ].join(' ');
 
 let nextId = 1;
 
 class PreviewFrame extends React.Component {
-<<<<<<< HEAD
   constructor(props) {
     super(props);
 
     const {compiledProject: {source}} = props;
-=======
-  constructor() {
-    super();
-    this._frameName = `preview-frame-${nextId++}`;
-    bindAll(this, '_attachToFrame', '_handleInfiniteLoop');
-  }
-
-  componentDidMount() {
-    this._postFocusedSelectorToFrame(this.props.focusedSelector);
-  }
->>>>>>> 8ca6c3c... update to js channel
 
-<<<<<<< HEAD
-<<<<<<< HEAD
     bindAll(this, '_attachToFrame', '_handleInfiniteLoop');
-=======
-  componentWillReceiveProps(nextProps) {
-    if (!includes(nextProps.focusedEditors, 'css')) {
-=======
-  componentWillReceiveProps(newProps) {
-    if (includes(this.props.focusedEditors, 'css') &&
-      !includes(newProps.focusedEditors, 'css')) {
->>>>>>> 3cc1d22... Update selector at cursor and handle unfocused editor
-      this._postRemoveHighlightToFrame();
-    }
-    if (newProps.focusedSelector !== this.props.focusedSelector ||
-      includes(newProps.focusedEditors, 'css')) {
-      this._postFocusedSelectorToFrame(newProps.focusedSelector);
-    }
-<<<<<<< HEAD
-<<<<<<< HEAD
-  }
->>>>>>> 23eb7f2... Updates to element highlighter
 
     this.render = constant(
       <div className="preview__frame-container">
@@ -79,12 +43,6 @@ class PreviewFrame extends React.Component {
       </div>,
     );
   }
-=======
-
-=======
->>>>>>> 8ca6c3c... update to js channel
-    const {consoleEntries: previousConsoleEntries, isActive} = this.props;
->>>>>>> 3cc1d22... Update selector at cursor and handle unfocused editor
 
   // componentWillReceiveProps(nextProps) {
   //   if (nextProps.highlighterSelector !== this.props.highlighterSelector) {
@@ -189,7 +147,6 @@ class PreviewFrame extends React.Component {
     });
   }
 
-<<<<<<< HEAD
   _handleConsoleLog(printedValue) {
     const {compiledProjectKey} = this.props.compiledProject;
     this.props.onConsoleLog(printedValue, compiledProjectKey);
@@ -200,19 +157,6 @@ class PreviewFrame extends React.Component {
       type: 'highlightElement',
       selector: {selector},
     }), '*');
-=======
-  _postFocusedSelectorToFrame(selector) {
-    this._channel.notify({
-      method: 'highlightElement',
-      params: selector,
-    });
-  }
-
-  _postRemoveHighlightToFrame() {
-    this._channel.notify({
-      method: 'removeHighlight',
-    });
->>>>>>> 8ca6c3c... update to js channel
   }
 
   _postFocusedSelectorToFrame(selector) {
@@ -222,33 +166,13 @@ class PreviewFrame extends React.Component {
     }), '*');
   }
 
-<<<<<<< HEAD
   _attachToFrame(frame) {
     if (!frame) {
       if (this._channel) {
         this._channel.destroy();
         Reflect.deleteProperty(this, '_channel');
       }
       return;
-=======
-  _postRemoveHighlightToFrame() {
-    this._frame_element.contentWindow.postMessage(JSON.stringify({
-      type: 'org.popcode.removeHighlight',
-    }), '*');
-  }
-
-  _setFrameElement(frame) {
-    this._frame_element = frame;
-  }
-
-  render() {
-    let srcProps;
-
-    if (this.props.src) {
-      srcProps = {srcDoc: this.props.src};
-    } else {
-      srcProps = {src: 'about:blank'};
->>>>>>> 23eb7f2... Updates to element highlighter
     }
 
     this._channel = Channel.build({
@@ -273,31 +197,17 @@ class PreviewFrame extends React.Component {
 }
 
 PreviewFrame.propTypes = {
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
   compiledProject: PropTypes.instanceOf(CompiledProjectRecord).isRequired,
   consoleEntries: ImmutablePropTypes.iterable.isRequired,
-=======
-  focusedEditors: PropTypes.array,
->>>>>>> 23eb7f2... Updates to element highlighter
-=======
-  consoleEntries: ImmutablePropTypes.iterable.isRequired,
-  focusedEditors: PropTypes.array,
->>>>>>> 3cc1d22... Update selector at cursor and handle unfocused editor
   focusedSelector: PropTypes.string,
   isActive: PropTypes.bool.isRequired,
   onConsoleError: PropTypes.func.isRequired,
   onConsoleLog: PropTypes.func.isRequired,
   onConsoleValue: PropTypes.func.isRequired,
-=======
-  src: PropTypes.string.isRequired,
->>>>>>> 621d5f6... Add saga, add ref to iframe element
   onRuntimeError: PropTypes.func.isRequired,
 };
 
 PreviewFrame.defaultProps = {
-  focusedEditors: null,
   focusedSelector: null,
 };