Skip to content

Commit 8ca6c3c

Browse files
pwjablonskipwjablonski
committed
update to js channel
1 parent 53e4df4 commit 8ca6c3c

File tree

4 files changed

+49
-123
lines changed

4 files changed

+49
-123
lines changed

‎src/components/PreviewFrame.jsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,10 @@ class PreviewFrame extends React.Component {
2424
constructor() {
2525
super();
2626
this._frameName = `preview-frame-${nextId++}`;
27-
bindAll(this, '_attachToFrame', '_handleInfiniteLoop', '_onMessage');
27+
bindAll(this, '_attachToFrame', '_handleInfiniteLoop');
2828
}
2929

3030
componentDidMount() {
31-
window.addEventListener('message', this._onMessage);
3231
this._postFocusedSelectorToFrame(this.props.focusedSelector);
3332
}
3433

@@ -41,7 +40,6 @@ class PreviewFrame extends React.Component {
4140
includes(newProps.focusedEditors, 'css')) {
4241
this._postFocusedSelectorToFrame(newProps.focusedSelector);
4342
}
44-
4543
const {consoleEntries: previousConsoleEntries, isActive} = this.props;
4644

4745
if (this._channel && isActive) {
@@ -133,16 +131,17 @@ class PreviewFrame extends React.Component {
133131
}
134132

135133
_postFocusedSelectorToFrame(selector) {
136-
this._frame.contentWindow.postMessage(JSON.stringify({
137-
type: 'org.popcode.highlightElement',
138-
selector,
139-
}), '*');
134+
this._channel.notify({
135+
method: 'highlightElement',
136+
params: selector,
137+
});
140138
}
141139

142140
_postRemoveHighlightToFrame() {
143-
this._frame.contentWindow.postMessage(JSON.stringify({
144-
type: 'org.popcode.removeHighlight',
145-
}), '*');
141+
this._channel.notify({
142+
method: 'removeHighlight',
143+
});
144+
}
146145

147146
_handleConsoleLog(printedValue) {
148147
const {compiledProjectKey} = this.props.compiledProject;

‎src/previewSupport/handleElementHighlights.js‎

Lines changed: 39 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,48 @@
1-
export default function handleElementHighlights() {
2-
window.addEventListener('message', (message) => {
3-
try {
4-
const data = JSON.parse(message.data);
5-
if (data.type === 'org.popcode.highlightElement') {
6-
const {
7-
selector: selector,
8-
} = data;
9-
updateCovers(selector);
10-
}
11-
12-
if (data.type === 'org.popcode.removeHighlight') {
13-
removeCovers();
14-
}
15-
} catch (e) {
16-
return e;
17-
}
18-
return message;
19-
});
1+
import channel from './channel';
202

21-
function getOffsetFromBody(element) {
22-
if (element === document.body) {
23-
return {top: 0, left: 0};
24-
}
25-
const {top, left} = getOffsetFromBody(element.offsetParent);
26-
return {top: top + element.offsetTop, left: left + element.offsetLeft};
3+
function getOffsetFromBody(element) {
4+
if (element === document.body) {
5+
return {top: 0, left: 0};
276
}
7+
const {top, left} = getOffsetFromBody(element.offsetParent);
8+
return {top: top + element.offsetTop, left: left + element.offsetLeft};
9+
}
2810

29-
function removeCovers() {
30-
const highlighterElements =
31-
window.document.querySelectorAll('.__popcode-highlighter');
32-
for (let i = 0; i < highlighterElements.length; i++) {
33-
const highlighterElement = highlighterElements[i];
34-
highlighterElement.remove();
35-
}
11+
function removeCovers() {
12+
const highlighterElements =
13+
window.document.querySelectorAll('.__popcode-highlighter');
14+
for (let i = 0; i < highlighterElements.length; i++) {
15+
const highlighterElement = highlighterElements[i];
16+
highlighterElement.remove();
3617
}
18+
}
3719

38-
function updateCovers(selector) {
39-
removeCovers();
40-
if (selector !== '') {
41-
const elements = document.querySelectorAll(selector);
42-
for (let i = 0; i < elements.length; i++) {
43-
const element = elements[i];
44-
const offset = getOffsetFromBody(element);
45-
const cover =
46-
document.body.appendChild(document.createElement('div'));
47-
cover.className = '__popcode-highlighter';
48-
cover.style.left = `${offset.left}px`;
49-
cover.style.top = `${offset.top}px`;
50-
cover.style.width = `${element.offsetWidth}px`;
51-
cover.style.height = `${element.offsetHeight}px`;
52-
}
20+
function updateCovers(selector) {
21+
removeCovers();
22+
if (selector !== '') {
23+
const elements = document.querySelectorAll(selector);
24+
for (let i = 0; i < elements.length; i++) {
25+
const element = elements[i];
26+
const offset = getOffsetFromBody(element);
27+
const cover = document.createElement('div');
28+
document.body.appendChild(cover);
29+
cover.className = '__popcode-highlighter';
30+
cover.style.left = `${offset.left}px`;
31+
cover.style.top = `${offset.top}px`;
32+
cover.style.width = `${element.offsetWidth}px`;
33+
cover.style.height = `${element.offsetHeight}px`;
5334
}
5435
}
5536
}
5637

57-
// const elementHighlighterScript = `(${function() {
58-
// window.addEventListener('message', (message) => {
59-
// try {
60-
// const data = JSON.parse(message.data);
61-
// if (data.type === 'org.popcode.highlightElement') {
62-
// const {
63-
// selector: selector,
64-
// } = data;
65-
// updateCovers(selector);
66-
// }
67-
68-
// if (data.type === 'org.popcode.removeHighlight') {
69-
// removeCovers();
70-
// }
71-
// } catch (e) {
72-
// return e;
73-
// }
74-
// return message;
75-
// });
76-
77-
// function getOffsetFromBody(element) {
78-
// if (element === document.body) {
79-
// return {top: 0, left: 0};
80-
// }
81-
// const {top, left} = getOffsetFromBody(element.offsetParent);
82-
// return {top: top + element.offsetTop, left: left + element.offsetLeft};
83-
// }
84-
85-
// function removeCovers() {
86-
// const highlighterElements =
87-
// window.document.querySelectorAll('.__popcode-highlighter');
88-
// for (let i = 0; i < highlighterElements.length; i++) {
89-
// const highlighterElement = highlighterElements[i];
90-
// highlighterElement.remove();
91-
// }
92-
// }
93-
94-
// function updateCovers(selector) {
95-
// removeCovers();
96-
// if (selector !== '') {
97-
// const elements = document.querySelectorAll(selector);
98-
// for (let i = 0; i < elements.length; i++) {
99-
// const element = elements[i];
100-
// const offset = getOffsetFromBody(element);
101-
// const cover =
102-
// document.body.appendChild(document.createElement('div'));
103-
// cover.className = '__popcode-highlighter';
104-
// cover.style.left = `${offset.left}px`;
105-
// cover.style.top = `${offset.top}px`;
106-
// cover.style.width = `${element.offsetWidth}px`;
107-
// cover.style.height = `${element.offsetHeight}px`;
108-
// }
109-
// }
110-
// }
111-
// }.toString()}());`;
112-
// export default elementHighlighterScript;
38+
export default function handleElementHighlights() {
39+
channel.bind(
40+
'highlightElement',
41+
(_trans, selector) => updateCovers(selector),
42+
);
43+
44+
channel.bind(
45+
'removeHighlight',
46+
() => removeCovers(),
47+
);
48+
}

‎test/unit/sagas/compiledProjects.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,10 @@ import {
44
validatedSource as validatedSourceSaga,
55
} from '../../../src/sagas/compiledProjects';
66
import {getCurrentProject, getErrors} from '../../../src/selectors';
7-
<<<<<<< HEAD
8-
import {projectCompiled} from '../../../src/actions';
9-
import generatePreview from '../../../src/util/previewFrame';
10-
=======
7+
118
import {projectCompiled, projectCompilationFailed} from '../../../src/actions';
129
import compileProject from '../../../src/util/compileProject';
1310
import Bugsnag from '../../../src/util/Bugsnag';
14-
>>>>>>> 051985e365e2ebea1584f51c54f7208a939d3c4d
1511
import {errors} from '../../helpers/referenceStates';
1612
import {project as projectFactory} from '../../helpers/factory';
1713

‎test/unit/sagas/ui.js‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,8 @@ import {
1414
projectExportNotDisplayed,
1515
} from '../../../src/actions/clients';
1616
import {openWindowWithContent} from '../../../src/util';
17-
<<<<<<< HEAD
18-
import spinnerPageHtml from '../../../templates/github-export.html';
19-
import generatePreview from '../../../src/util/previewFrame';
20-
=======
2117
import spinnerPageHtml from '../../../templates/project-export.html';
2218
import compileProject from '../../../src/util/compileProject';
23-
>>>>>>> 051985e365e2ebea1584f51c54f7208a939d3c4d
2419

2520
test('userDoneTyping', (assert) => {
2621
testSaga(userDoneTypingSaga).

0 commit comments

Comments
 (0)