Skip to content

Commit 66eba11

Browse files
pwjablonskipwjablonski
committed
changes
1 parent f175f2b commit 66eba11

File tree

14 files changed

+79
-66
lines changed

14 files changed

+79
-66
lines changed

‎src/actions/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {
2323
editorBlurred,
2424
editorFocused,
2525
editorFocusedRequestedLine,
26+
editorResized,
2627
dragRowDivider,
2728
dragColumnDivider,
2829
startDragColumnDivider,
@@ -81,6 +82,7 @@ export {
8182
editorBlurred,
8283
editorFocused,
8384
editorFocusedRequestedLine,
85+
editorResized,
8486
dragRowDivider,
8587
dragColumnDivider,
8688
startDragColumnDivider,

‎src/actions/ui.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,10 @@ export const editorFocused = createAction(
1919

2020
export const editorBlurred = createAction(
2121
'EDITOR_BLURRED',
22-
language => ({language}),
22+
);
23+
24+
export const editorResized = createAction(
25+
'EDITOR_RESIZED',
2326
);
2427

2528
export const dragRowDivider = createAction(

‎src/components/Editor.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ class Editor extends React.Component {
2323
this._handleWindowResize = throttle(() => {
2424
if (this._editor) {
2525
this._resizeEditor();
26+
this.props.onEditorResized();
2627
}
2728
}, RESIZE_THROTTLE);
2829

@@ -100,7 +101,7 @@ class Editor extends React.Component {
100101
this._resizeEditor();
101102
this._editor.on('focus', this._resizeEditor);
102103
this._editor.on('blur', () => {
103-
this.props.onEditorBlurred(this.props.language);
104+
this.props.onEditorBlurred();
104105
});
105106
this._editor.on('focus', () => {
106107
this.props.onEditorFocused(this.props.language);
@@ -162,6 +163,7 @@ Editor.propTypes = {
162163
onCursorChange: PropTypes.func.isRequired,
163164
onEditorBlurred: PropTypes.func.isRequired,
164165
onEditorFocused: PropTypes.func.isRequired,
166+
onEditorResized: PropTypes.func.isRequired,
165167
onInput: PropTypes.func.isRequired,
166168
onRequestedLineFocused: PropTypes.func.isRequired,
167169
};

‎src/components/EditorsColumn.jsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ export default class EditorsColumn extends React.Component {
5555
onEditorCursorChange,
5656
onEditorFocused,
5757
onEditorInput,
58+
onEditorResized,
5859
onRef,
5960
onRequestedLineFocused,
6061
style,
@@ -90,6 +91,7 @@ export default class EditorsColumn extends React.Component {
9091
onCursorChange={onEditorCursorChange}
9192
onEditorBlurred={onEditorBlurred}
9293
onEditorFocused={onEditorFocused}
94+
onEditorResized={onEditorResized}
9395
onInput={partial(onEditorInput, language)}
9496
onRequestedLineFocused={onRequestedLineFocused}
9597
/>
@@ -160,6 +162,7 @@ EditorsColumn.propTypes = {
160162
onEditorCursorChange: PropTypes.func.isRequired,
161163
onEditorFocused: PropTypes.func.isRequired,
162164
onEditorInput: PropTypes.func.isRequired,
165+
onEditorResized: PropTypes.func.isRequired,
163166
onRef: PropTypes.func.isRequired,
164167
onRequestedLineFocused: PropTypes.func.isRequired,
165168
};

‎src/components/Preview.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import React from 'react';
55
import PreviewFrame from './PreviewFrame';
66

77
export default function Preview({
8-
focusedEditors,
8+
focusedEditor,
99
focusedSelector,
1010
compiledProjects,
1111
consoleEntries,
@@ -25,7 +25,7 @@ export default function Preview({
2525
<PreviewFrame
2626
compiledProject={compiledProject}
2727
consoleEntries={consoleEntries}
28-
focusedEditors={focusedEditors}
28+
focusedEditor={focusedEditor}
2929
focusedSelector={focusedSelector}
3030
isActive={key === compiledProjects.keySeq().last()}
3131
key={compiledProject.compiledProjectKey}
@@ -60,7 +60,7 @@ export default function Preview({
6060
Preview.propTypes = {
6161
compiledProjects: ImmutablePropTypes.iterable.isRequired,
6262
consoleEntries: ImmutablePropTypes.iterable.isRequired,
63-
focusedEditors: PropTypes.array.isRequired,
63+
focusedEditor: PropTypes.string,
6464
focusedSelector: PropTypes.string,
6565
showingErrors: PropTypes.bool.isRequired,
6666
onConsoleError: PropTypes.func.isRequired,
@@ -72,5 +72,6 @@ Preview.propTypes = {
7272
};
7373

7474
Preview.defaultProps = {
75+
focusedEditor: null,
7576
focusedSelector: null,
7677
};

‎src/components/PreviewFrame.jsx‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
44
import ImmutablePropTypes from 'react-immutable-proptypes';
55
import Bowser from 'bowser';
66
import bindAll from 'lodash/bindAll';
7-
import includes from 'lodash/includes';
87
import {t} from 'i18next';
98
import normalizeError from '../util/normalizeError';
109
import retryingFailedImports from '../util/retryingFailedImports';
@@ -32,13 +31,10 @@ class PreviewFrame extends React.Component {
3231
}
3332

3433
componentWillReceiveProps(newProps) {
35-
if (includes(this.props.focusedEditors, 'css') &&
36-
!includes(newProps.focusedEditors, 'css')) {
37-
this._postRemoveHighlightToFrame();
38-
}
39-
if (newProps.focusedSelector !== this.props.focusedSelector ||
40-
includes(newProps.focusedEditors, 'css')) {
34+
if (newProps.focusedSelector && newProps.focusedEditor === 'css') {
4135
this._postFocusedSelectorToFrame(newProps.focusedSelector);
36+
} else {
37+
this._postFocusedSelectorToFrame(null);
4238
}
4339
const {consoleEntries: previousConsoleEntries, isActive} = this.props;
4440

@@ -137,12 +133,6 @@ class PreviewFrame extends React.Component {
137133
});
138134
}
139135

140-
_postRemoveHighlightToFrame() {
141-
this._channel.notify({
142-
method: 'removeHighlight',
143-
});
144-
}
145-
146136
_handleConsoleLog(printedValue) {
147137
const {compiledProjectKey} = this.props.compiledProject;
148138
this.props.onConsoleLog(printedValue, compiledProjectKey);
@@ -198,7 +188,6 @@ class PreviewFrame extends React.Component {
198188
PreviewFrame.propTypes = {
199189
compiledProject: PropTypes.instanceOf(CompiledProjectRecord).isRequired,
200190
consoleEntries: ImmutablePropTypes.iterable.isRequired,
201-
focusedEditors: PropTypes.array,
202191
focusedSelector: PropTypes.string,
203192
isActive: PropTypes.bool.isRequired,
204193
onConsoleError: PropTypes.func.isRequired,
@@ -208,7 +197,6 @@ PreviewFrame.propTypes = {
208197
};
209198

210199
PreviewFrame.defaultProps = {
211-
focusedEditors: null,
212200
focusedSelector: null,
213201
};
214202

‎src/components/Workspace.jsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import {
2323
editorBlurred,
2424
editorFocused,
2525
editorFocusedRequestedLine,
26+
editorResized,
2627
dragRowDivider,
2728
dragColumnDivider,
2829
startDragColumnDivider,
@@ -72,6 +73,7 @@ class Workspace extends React.Component {
7273
'_handleEditorFocused',
7374
'_handleEditorInput',
7475
'_handleEditorsDividerDrag',
76+
'_handleEditorResize',
7577
'_handleRequestedLineFocused',
7678
'_storeDividerRef',
7779
'_storeColumnRef',
@@ -144,8 +146,8 @@ class Workspace extends React.Component {
144146
this.props.dispatch(editorFocused(language));
145147
}
146148

147-
_handleEditorBlurred(language) {
148-
this.props.dispatch(editorBlurred(language));
149+
_handleEditorBlurred() {
150+
this.props.dispatch(editorBlurred());
149151
}
150152

151153
_handleEditorCursorChange(source, cursor, language) {
@@ -211,6 +213,10 @@ class Workspace extends React.Component {
211213
this.props.dispatch(editorFocusedRequestedLine());
212214
}
213215

216+
_handleEditorResize() {
217+
this.props.dispatch(editorResized());
218+
}
219+
214220
_handleClickInstructionsBar() {
215221
this.props.dispatch(toggleComponent(
216222
get(this.props, ['currentProject', 'projectKey']),
@@ -286,6 +292,7 @@ class Workspace extends React.Component {
286292
onEditorCursorChange={this._handleEditorCursorChange}
287293
onEditorFocused={this._handleEditorFocused}
288294
onEditorInput={this._handleEditorInput}
295+
onEditorResized={this._handleEditorResize}
289296
onRef={partial(this._storeColumnRef, 0)}
290297
onRequestedLineFocused={this._handleRequestedLineFocused}
291298
/>

‎src/containers/Preview.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
refreshPreview,
1010
} from '../actions';
1111
import {
12-
getFocusedEditors,
12+
getFocusedEditor,
1313
getFocusedSelector,
1414
getCompiledProjects,
1515
getConsoleHistory,
@@ -19,7 +19,7 @@ import {
1919

2020
function mapStateToProps(state) {
2121
return {
22-
focusedEditors: getFocusedEditors(state),
22+
focusedEditor: getFocusedEditor(state),
2323
focusedSelector: getFocusedSelector(state),
2424
compiledProjects: getCompiledProjects(state),
2525
consoleEntries: getConsoleHistory(state),

‎src/previewSupport/handleElementHighlights.js‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -17,25 +17,32 @@ function removeCovers() {
1717
}
1818
}
1919

20+
function addCovers(selector) {
21+
const elements = document.querySelectorAll(selector);
22+
for (let i = 0; i < elements.length; i++) {
23+
const element = elements[i];
24+
const cover = document.createElement('div');
25+
document.body.appendChild(cover);
26+
const rect = element.getBoundingClientRect();
27+
let offset = {top: rect.top, left: rect.left};
28+
if (element.offsetParent === null) {
29+
cover.style.position = 'fixed';
30+
} else if (element !== document.body ||
31+
element !== document.documentElement) {
32+
offset = getOffsetFromBody(element);
33+
}
34+
cover.className = '__popcode-highlighter';
35+
cover.style.left = `${offset.left}px`;
36+
cover.style.top = `${offset.top}px`;
37+
cover.style.width = `${element.offsetWidth}px`;
38+
cover.style.height = `${element.offsetHeight}px`;
39+
}
40+
}
41+
2042
function updateCovers(selector) {
21-
console.log(selector);
2243
removeCovers();
2344
if (selector !== '') {
24-
const elements = document.querySelectorAll(selector);
25-
for (let i = 0; i < elements.length; i++) {
26-
const element = elements[i];
27-
const offset = getOffsetFromBody(element);
28-
const cover = document.createElement('div');
29-
console.log(cover);
30-
console.log(document.body);
31-
document.body.appendChild(cover);
32-
console.log(document.body);
33-
cover.className = '__popcode-highlighter';
34-
cover.style.left = `${offset.left}px`;
35-
cover.style.top = `${offset.top}px`;
36-
cover.style.width = `${element.offsetWidth}px`;
37-
cover.style.height = `${element.offsetHeight}px`;
38-
}
45+
addCovers(selector);
3946
}
4047
}
4148

@@ -44,9 +51,4 @@ export default function handleElementHighlights() {
4451
'highlightElement',
4552
(_trans, selector) => updateCovers(selector),
4653
);
47-
48-
channel.bind(
49-
'removeHighlight',
50-
() => removeCovers(),
51-
);
5254
}

‎src/reducers/ui.js‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const defaultState = new Immutable.Map().
1919
requestedFocusedLine: null,
2020
textSizeIsLarge: false,
2121
focusedSelector: null,
22-
focusedEditors: new Immutable.Set(),
22+
focusedEditor: null,
2323
})).
2424
set('workspace', DEFAULT_WORKSPACE).
2525
set('notifications', new Immutable.Map()).
@@ -98,24 +98,21 @@ export default function ui(stateIn, action) {
9898
return state.setIn(['editors', 'requestedFocusedLine'], null);
9999

100100
case 'EDITOR_FOCUSED':
101-
return state.updateIn(
102-
['editors', 'focusedEditors'],
103-
(focusedEditors) => {
104-
const componentName = action.payload.language;
105-
return focusedEditors.add(componentName);
106-
},
101+
return state.setIn(
102+
['editors', 'focusedEditor'],
103+
action.payload.language,
107104
);
108105

109106
case 'EDITOR_BLURRED':
110-
return state.updateIn(
111-
['editors', 'focusedEditors'],
112-
(focusedEditors) => {
113-
const componentName = action.payload.language;
114-
if (focusedEditors.has(componentName)) {
115-
return focusedEditors.delete(componentName);
116-
}
117-
return focusedEditors;
118-
},
107+
return state.setIn(
108+
['editors', 'focusedEditor'],
109+
null,
110+
);
111+
112+
case 'EDITOR_RESIZED':
113+
return state.setIn(
114+
['editors', 'focusedSelector'],
115+
null,
119116
);
120117

121118
case 'DRAG_ROW_DIVIDER':

0 commit comments

Comments
 (0)