Skip to content

Commit cbfa89e

Browse files
author
Ives van Hoorne
committed
Embed options, hideNavigation and autoResize
1 parent 9a0c5c9 commit cbfa89e

File tree

12 files changed

+394
-36
lines changed

12 files changed

+394
-36
lines changed

src/app/pages/Sandbox/Editor/Workspace/Preferences/PreferenceNumber.js renamed to src/app/components/Preference/PreferenceNumber.js

File renamed without changes.

src/app/pages/Sandbox/Editor/Workspace/Preferences/PreferenceSwitch.js renamed to src/app/components/Preference/PreferenceSwitch.js

File renamed without changes.

src/app/pages/Sandbox/Editor/Workspace/Preferences/Preference.js renamed to src/app/components/Preference/index.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
11
import React from 'react';
22
import styled from 'styled-components';
3-
43
import Tooltip from 'app/components/Tooltip';
4+
55
import PreferenceSwitch from './PreferenceSwitch';
66
import PreferenceNumber from './PreferenceNumber';
77

88
const Container = styled.div`
99
display: flex;
10-
padding: 1rem;
11-
padding-top: 0;
1210
justify-content: space-between;
1311
align-items: center;
1412
`;
1513

1614
type Props = {
15+
className: ?string,
1716
title: string,
1817
value: any,
1918
setValue: (value: any) => any,
@@ -32,14 +31,14 @@ export default class Preference extends React.Component {
3231
};
3332

3433
render() {
35-
const { title, value, tooltip } = this.props;
34+
const { title, className, value, tooltip } = this.props;
3635

3736
const Title = tooltip
3837
? <Tooltip position="right" title={tooltip}>{title}</Tooltip>
3938
: <span>{title}</span>;
4039

4140
return (
42-
<Container>
41+
<Container className={className}>
4342
{Title}
4443
<div style={{ width: 48 }}>
4544
{this.getOptionComponent(value)}

‎src/app/components/sandbox/Preview/index.js‎

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const Container = styled.div`
2424

2525
const StyledFrame = styled.iframe`
2626
border-width: 0px;
27-
height: calc(100% - 6rem);
27+
height: calc(100% - ${props => (props.hideNavigation ? 3 : 6)}rem);
2828
width: 100%;
2929
`;
3030

@@ -47,6 +47,8 @@ type Props = {
4747
sandboxActions: typeof sandboxActionCreators,
4848
noDelay: ?boolean,
4949
errors: ?Array<ModuleError>,
50+
hideNavigation?: boolean,
51+
setFrameHeight: ?(height: number) => any,
5052
};
5153

5254
type State = {
@@ -74,6 +76,10 @@ export default class Preview extends React.PureComponent {
7476
}
7577
}
7678

79+
static defaultProps = {
80+
hideNavigation: false,
81+
};
82+
7783
fetchBundle = () => {
7884
const { sandboxId, fetchBundle } = this.props;
7985
fetchBundle(sandboxId);
@@ -160,7 +166,7 @@ export default class Preview extends React.PureComponent {
160166
};
161167

162168
handleMessage = (e: Object) => {
163-
if (e.data === 'Ready!') {
169+
if (e.data.type === 'Ready!') {
164170
this.setState({
165171
frameInitialized: true,
166172
});
@@ -173,6 +179,10 @@ export default class Preview extends React.PureComponent {
173179
} else if (type === 'urlchange') {
174180
const url = e.data.url.replace('/', '');
175181
this.commitUrl(url);
182+
} else if (type === 'resize') {
183+
if (this.props.setFrameHeight) {
184+
this.props.setFrameHeight(e.data.height);
185+
}
176186
}
177187
}
178188
};
@@ -305,23 +315,27 @@ export default class Preview extends React.PureComponent {
305315
isInProjectView,
306316
setProjectView,
307317
errors,
318+
hideNavigation,
308319
} = this.props;
309320
const { historyPosition, history, urlInAddressBar } = this.state;
310321

311322
const url = urlInAddressBar || '';
312323

313324
return (
314325
<Container>
315-
<Navigator
316-
url={decodeURIComponent(url)}
317-
onChange={this.updateUrl}
318-
onConfirm={this.sendUrl}
319-
onBack={historyPosition > 0 && this.handleBack}
320-
onForward={historyPosition < history.length - 1 && this.handleForward}
321-
onRefresh={this.handleRefresh}
322-
isProjectView={isInProjectView}
323-
toggleProjectView={setProjectView && this.toggleProjectView}
324-
/>
326+
{!hideNavigation &&
327+
<Navigator
328+
url={decodeURIComponent(url)}
329+
onChange={this.updateUrl}
330+
onConfirm={this.sendUrl}
331+
onBack={historyPosition > 0 && this.handleBack}
332+
onForward={
333+
historyPosition < history.length - 1 && this.handleForward
334+
}
335+
onRefresh={this.handleRefresh}
336+
isProjectView={isInProjectView}
337+
toggleProjectView={setProjectView && this.toggleProjectView}
338+
/>}
325339

326340
{!bundle.processing &&
327341
errors &&
@@ -342,6 +356,7 @@ export default class Preview extends React.PureComponent {
342356
sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups"
343357
src={frameUrl()}
344358
id="sandbox"
359+
hideNavigation={hideNavigation}
345360
/>
346361
</Container>
347362
);

‎src/app/pages/Sandbox/Editor/Content/Header/ShareView.js‎

Lines changed: 51 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121

2222
import type { Sandbox, Directory, Module } from 'common/types';
2323

24+
import Preference from 'app/components/Preference';
2425
import HoverMenu from './HoverMenu';
2526
import Action from './Action';
2627

@@ -30,6 +31,15 @@ const Container = styled.div`
3031
height: 100%;
3132
`;
3233

34+
const PaddedPreference = styled(Preference)`
35+
color: rgba(255, 255, 255, 0.6);
36+
padding-bottom: 1rem;
37+
38+
&:last-child {
39+
padding-bottom: 0;
40+
}
41+
`;
42+
3343
const ShareOptions = styled.div`
3444
position: absolute;
3545
top: calc(100% + 0.25rem);
@@ -47,7 +57,6 @@ const ShareOptions = styled.div`
4757
4858
width: 900px;
4959
50-
5160
h3 {
5261
text-align: center;
5362
margin: 0;
@@ -138,6 +147,8 @@ class ShareView extends React.PureComponent {
138147
showEditor: true,
139148
showPreview: true,
140149
defaultModule: null,
150+
autoResize: false,
151+
hideNavigation: false,
141152
};
142153

143154
handleChange = e => this.setState({ message: e.target.value });
@@ -158,7 +169,13 @@ class ShareView extends React.PureComponent {
158169
setDefaultModule = id => this.setState({ defaultModule: id });
159170

160171
getOptionsUrl = () => {
161-
const { defaultModule, showEditor, showPreview } = this.state;
172+
const {
173+
defaultModule,
174+
showEditor,
175+
showPreview,
176+
autoResize,
177+
hideNavigation,
178+
} = this.state;
162179

163180
const options = {};
164181

@@ -172,6 +189,15 @@ class ShareView extends React.PureComponent {
172189
if (!showEditor && showPreview) {
173190
options.view = 'preview';
174191
}
192+
193+
if (autoResize) {
194+
options.autoresize = 1;
195+
}
196+
197+
if (hideNavigation) {
198+
options.hidenavigation = 1;
199+
}
200+
175201
return optionsToParameterizedUrl(options);
176202
};
177203

@@ -209,9 +235,17 @@ class ShareView extends React.PureComponent {
209235
`;
210236
};
211237

238+
setAutoResize = (autoResize: boolean) => {
239+
this.setState({ autoResize });
240+
};
241+
242+
setHideNavigation = (hideNavigation: boolean) => {
243+
this.setState({ hideNavigation });
244+
};
245+
212246
render() {
213247
const { sandbox, modules, directories } = this.props;
214-
const { showEditor, showPreview } = this.state;
248+
const { showEditor, showPreview, autoResize, hideNavigation } = this.state;
215249

216250
const defaultModule =
217251
this.state.defaultModule || modules.find(isMainModule).id;
@@ -232,6 +266,20 @@ class ShareView extends React.PureComponent {
232266
<Divider>
233267
<Column>
234268
<ButtonName>URL Options</ButtonName>
269+
<div>
270+
<h4>Embed specific options</h4>
271+
<PaddedPreference
272+
title="Auto resize"
273+
tooltip="Works only on Medium"
274+
value={autoResize}
275+
setValue={this.setAutoResize}
276+
/>
277+
<PaddedPreference
278+
title="Hide navigation bar"
279+
value={hideNavigation}
280+
setValue={this.setHideNavigation}
281+
/>
282+
</div>
235283
<div>
236284
<h4>Default view</h4>
237285
<div

‎src/app/pages/Sandbox/Editor/Workspace/Preferences/index.js‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,29 @@ import { connect } from 'react-redux';
44
import { bindActionCreators } from 'redux';
55
import { preferencesSelector } from 'app/store/preferences/selectors';
66
import preferencesActionCreators from 'app/store/preferences/actions';
7+
import Preference from 'app/components/Preference';
78

89
import WorkspaceSubtitle from '../WorkspaceSubtitle';
910

10-
import Preference from './Preference';
11-
1211
const Container = styled.div`
1312
color: ${props => props.theme.white};
1413
font-size: .875rem;
14+
15+
div {
16+
&:first-child {
17+
padding-top: 0;
18+
}
19+
}
1520
`;
1621

1722
const PreferenceContainer = styled.div`
1823
padding-top: 0.5rem;
1924
`;
2025

26+
const PaddedPreference = styled(Preference)`
27+
padding: 0.5rem 1rem;
28+
`;
29+
2130
type Props = {
2231
preferencesActions: typeof preferencesActionCreators,
2332
preferences: Object,
@@ -34,49 +43,49 @@ const Preferences = ({ preferences, preferencesActions }: Props) => (
3443
<Container>
3544
<WorkspaceSubtitle>Code Editor</WorkspaceSubtitle>
3645
<PreferenceContainer>
37-
<Preference
46+
<PaddedPreference
3847
title="Autocomplete"
3948
value={preferences.autoCompleteEnabled}
4049
setValue={preferencesActions.setAutoCompletePreference}
4150
/>
42-
<Preference
51+
<PaddedPreference
4352
title="Linter"
4453
tooltip="Made possible by eslint"
4554
value={preferences.lintEnabled}
4655
setValue={preferencesActions.setLintPreference}
4756
/>
48-
<Preference
57+
<PaddedPreference
4958
title="Prettify on save"
5059
tooltip="Made possible by Prettier"
5160
value={preferences.prettifyOnSaveEnabled}
5261
setValue={preferencesActions.setPrettifyOnSavePreference}
5362
/>
54-
<Preference
63+
<PaddedPreference
5564
title="VIM Mode"
5665
value={preferences.vimMode}
5766
setValue={preferencesActions.setVimPreference}
5867
/>
59-
<Preference
68+
<PaddedPreference
6069
title="Font size"
6170
value={preferences.fontSize}
6271
setValue={preferencesActions.setFontSizePreference}
6372
/>
6473
</PreferenceContainer>
6574
<WorkspaceSubtitle>Preview</WorkspaceSubtitle>
6675
<PreferenceContainer>
67-
<Preference
76+
<PaddedPreference
6877
title="Live Preview"
6978
value={preferences.livePreviewEnabled}
7079
setValue={preferencesActions.setLivePreview}
7180
tooltip="Only update on save"
7281
/>
73-
<Preference
82+
<PaddedPreference
7483
title="Clear console"
7584
value={preferences.clearConsoleEnabled}
7685
setValue={preferencesActions.setClearConsolePreference}
7786
tooltip="Clear console when executing"
7887
/>
79-
<Preference
88+
<PaddedPreference
8089
title="Instant preview"
8190
value={preferences.instantPreviewEnabled}
8291
setValue={preferencesActions.setInstantPreview}

‎src/common/url.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,8 @@ export const getSandboxOptions = () => {
1717
result.isPreviewScreen = windowWidth < 800;
1818
}
1919

20+
result.hideNavigation = location.search.includes('hidenavigation=1');
21+
result.autoResize = location.search.includes('autoresize=1');
22+
2023
return result;
2124
};

‎src/embed/App.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const Container = styled.div`
2020
height: 100%;
2121
width: 100%;
2222
color: white;
23+
overflow-y: hidden;
2324
`;
2425

2526
const Fullscreen = styled.div`
@@ -50,6 +51,8 @@ type State = {
5051
isInProjectView: boolean,
5152
currentModule: ?string,
5253
sidebarOpen: boolean,
54+
autoResize: boolean,
55+
hideNavigation: boolean,
5356
};
5457

5558
export default class App extends React.PureComponent {
@@ -62,6 +65,8 @@ export default class App extends React.PureComponent {
6265
currentModule,
6366
isPreviewScreen,
6467
isEditorScreen,
68+
autoResize,
69+
hideNavigation,
6570
} = getSandboxOptions();
6671

6772
this.state = {
@@ -72,6 +77,8 @@ export default class App extends React.PureComponent {
7277
isInProjectView: !currentModule,
7378
currentModule,
7479
sidebarOpen: false,
80+
autoResize,
81+
hideNavigation,
7582
};
7683
}
7784

@@ -84,9 +91,7 @@ export default class App extends React.PureComponent {
8491
return null;
8592
};
8693

87-
getAppOrigin = () => {
88-
return location.origin.replace('embed.', '');
89-
};
94+
getAppOrigin = () => location.origin.replace('embed.', '');
9095

9196
fetchSandbox = async (id: string) => {
9297
try {
@@ -171,6 +176,8 @@ export default class App extends React.PureComponent {
171176
setProjectView={this.setProjectView}
172177
sandbox={this.state.sandbox}
173178
currentModule={this.state.currentModule}
179+
hideNavigation={this.state.hideNavigation}
180+
autoResize={this.state.autoResize}
174181
/>
175182
</Container>
176183
);

0 commit comments

Comments
 (0)