mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-08-03 20:07:35 +02:00
Code Issues Releases Wiki Activity

make settings work

Browse Source
This commit is contained in:
Kushagra Gour
2018-06-01 09:23:06 +05:30
parent 0b6d46193b
commit 2c1098d11c
2 changed files with 106 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
webmaker/src/components/Settings.jsx
View File

@@ -1,10 +1,37 @@
import { h, Component } from 'preact'; import { h, Component } from 'preact';
import { editorThemes } from '../editorThemes'; import { editorThemes } from '../editorThemes';
function CheckboxSetting({
title,
label,
onChange,
pref,
name,
showWhenExtension
}) {
return (
<label
class={`line ${showWhenExtension ? 'show-when-extension' : ''} `}
title={title}
>
<input
type="checkbox"
checked={pref}
onChange={onChange}
data-setting={name}
/>
{label}
</label>
);
}
export default class Settings extends Component { export default class Settings extends Component {
updateSetting(e) { updateSetting(e) {
this.props.onChange(e); this.props.onChange(e);
} }
shouldComponentUpdate() {
// TODO: add check on prefs
return true;
}
render() { render() {
return ( return (
<div> <div>
@@ -18,9 +45,9 @@ export default class Settings extends Component {
<label> <label>
<input <input
type="radio" type="radio"
checked="true"
name="indentation" name="indentation"
value="spaces" value="spaces"
checked={this.props.prefs.indentation === 'spaces'}
onChange={this.updateSetting.bind(this)} onChange={this.updateSetting.bind(this)}
data-setting="indentWith" data-setting="indentWith"
/>{' '} />{' '}
@@ -31,6 +58,7 @@ export default class Settings extends Component {
type="radio" type="radio"
name="indentation" name="indentation"
value="tabs" value="tabs"
checked={this.props.prefs.indentation === 'tabs'}
onChange={this.updateSetting.bind(this)} onChange={this.updateSetting.bind(this)}
data-setting="indentWith" data-setting="indentWith"
/>{' '} />{' '}
@@ -42,14 +70,14 @@ export default class Settings extends Component {
<input <input
type="range" type="range"
class="va-m ml-1" class="va-m ml-1"
value="2" value={this.props.prefs.indentSize}
min="1" min="1"
max="7" max="7"
list="indentationSizeList" list="indentationSizeList"
data-setting="indentSize" data-setting="indentSize"
onChange={this.updateSetting.bind(this)} onChange={this.updateSetting.bind(this)}
/> />
<span id="indentationSizeValueEl" /> <span id="indentationSizeValueEl">{this.props.prefs.indentSize}</span>
<datalist id="indentationSizeList"> <datalist id="indentationSizeList">
<option>1</option> <option>1</option>
<option>2</option> <option>2</option>
@@ -71,6 +99,7 @@ export default class Settings extends Component {
<select <select
style="flex:1;margin-left:20px" style="flex:1;margin-left:20px"
data-setting="htmlMode" data-setting="htmlMode"
value={this.props.prefs.htmlMode}
onChange={this.updateSetting.bind(this)} onChange={this.updateSetting.bind(this)}
> >
<option value="html">HTML</option> <option value="html">HTML</option>
@@ -80,6 +109,7 @@ export default class Settings extends Component {
<select <select
style="flex:1;margin-left:20px" style="flex:1;margin-left:20px"
data-setting="cssMode" data-setting="cssMode"
value={this.props.prefs.cssMode}
onChange={this.updateSetting.bind(this)} onChange={this.updateSetting.bind(this)}
> >
<option value="css">CSS</option> <option value="css">CSS</option>
@@ -92,6 +122,7 @@ export default class Settings extends Component {
<select <select
style="flex:1;margin-left:20px" style="flex:1;margin-left:20px"
data-setting="jsMode" data-setting="jsMode"
value={this.props.prefs.jsMode}
onChange={this.updateSetting.bind(this)} onChange={this.updateSetting.bind(this)}
> >
<option value="js">JS</option> <option value="js">JS</option>
@@ -105,6 +136,7 @@ export default class Settings extends Component {
<select <select
style="flex:1;margin:0 20px" style="flex:1;margin:0 20px"
data-setting="editorTheme" data-setting="editorTheme"
value={this.props.prefs.editorTheme}
onChange={this.updateSetting.bind(this)} onChange={this.updateSetting.bind(this)}
> >
{editorThemes.map(theme => ( {editorThemes.map(theme => (
@@ -117,6 +149,7 @@ export default class Settings extends Component {
<select <select
style="flex:1;margin:0 20px" style="flex:1;margin:0 20px"
data-setting="editorFont" data-setting="editorFont"
value={this.props.prefs.editorFont}
onChange={this.updateSetting.bind(this)} onChange={this.updateSetting.bind(this)}
> >
<option value="FiraCode">Fira Code</option> <option value="FiraCode">Fira Code</option>
@@ -129,7 +162,7 @@ export default class Settings extends Component {
<input <input
id="customEditorFontInput" id="customEditorFontInput"
type="text" type="text"
value="" value={this.props.prefs.editorCustomFont}
placeholder="Custom font name here" placeholder="Custom font name here"
data-setting="editorCustomFont" data-setting="editorCustomFont"
onChange={this.updateSetting.bind(this)} onChange={this.updateSetting.bind(this)}
@@ -151,9 +184,9 @@ export default class Settings extends Component {
<label class="ml-1"> <label class="ml-1">
<input <input
type="radio" type="radio"
checked="true"
name="keymap" name="keymap"
value="sublime" value="sublime"
checked={this.props.prefs.keymap === 'sublime'}
data-setting="keymap" data-setting="keymap"
onChange={this.updateSetting.bind(this)} onChange={this.updateSetting.bind(this)}
/>{' '} />{' '}
@@ -164,113 +197,79 @@ export default class Settings extends Component {
type="radio" type="radio"
name="keymap" name="keymap"
value="vim" value="vim"
onChange={this.updateSetting.bind(this)} checked={this.props.prefs.keymap === 'vim'}
data-setting="keymap" data-setting="keymap"
onChange={this.updateSetting.bind(this)}
/>{' '} />{' '}
Vim Vim
</label> </label>
</div> </div>
</div> </div>
<div class="ml-2 ml-0--mobile"> <div class="ml-2 ml-0--mobile">
<label <CheckboxSetting
class="line" name="lineWrap"
title="Toggle wrapping of long sentences onto new line" title="Toggle wrapping of long sentences onto new line"
> label="Line wrap"
<input pref={this.props.prefs.lineWrap}
type="checkbox"
onChange={this.updateSetting.bind(this)} onChange={this.updateSetting.bind(this)}
data-setting="lineWrap" />
/>{' '} <CheckboxSetting
Line wrap name="refreshOnResize"
</label>
<label
class="line"
title="Your Preview will refresh when you resize the preview split" title="Your Preview will refresh when you resize the preview split"
> label="Refresh preview on resize"
<input pref={this.props.prefs.refreshOnResize}
type="checkbox"
onChange={this.updateSetting.bind(this)} onChange={this.updateSetting.bind(this)}
data-setting="refreshOnResize" />
/>{' '} <CheckboxSetting
Refresh preview on resize name="autoComplete"
</label>
<label
class="line"
title="Turns on the auto-completion suggestions as you type" title="Turns on the auto-completion suggestions as you type"
> label="Auto-complete suggestions"
<input pref={this.props.prefs.autoComplete}
type="checkbox"
onChange={this.updateSetting.bind(this)} onChange={this.updateSetting.bind(this)}
data-setting="autoComplete" />
/>{' '} <CheckboxSetting
Auto-complete suggestions name="autoPreview"
</label>
<label
class="line"
title="Refreshes the preview as you code. Otherwise use the Run button" title="Refreshes the preview as you code. Otherwise use the Run button"
> label="Auto-preview"
<input pref={this.props.prefs.autoPreview}
type="checkbox"
onChange={this.updateSetting.bind(this)} onChange={this.updateSetting.bind(this)}
data-setting="autoPreview" />
/>{' '} <CheckboxSetting
Auto-preview name="autoSave"
</label>
<label
class="line"
title="Auto-save keeps saving your code at regular intervals after you hit the first save manually" title="Auto-save keeps saving your code at regular intervals after you hit the first save manually"
> label="Auto-save"
<input pref={this.props.prefs.autoSave}
type="checkbox"
onChange={this.updateSetting.bind(this)} onChange={this.updateSetting.bind(this)}
data-setting="autoSave" />
/>{' '} <CheckboxSetting
Auto-save name="preserveLastCode"
</label>
<label
class="line"
title="Loads the last open creation when app starts" title="Loads the last open creation when app starts"
> label="Preserve last written code"
<input pref={this.props.prefs.preserveLastCode}
type="checkbox"
onChange={this.updateSetting.bind(this)} onChange={this.updateSetting.bind(this)}
data-setting="preserveLastCode" />
/>{' '} <CheckboxSetting
Preserve last written code name="replaceNewTab"
</label>
<label
class="line show-when-extension"
title="Turning this on will start showing Web Maker in every new tab you open" title="Turning this on will start showing Web Maker in every new tab you open"
> label="Replace new tab page"
<input pref={this.props.prefs.replaceNewTab}
type="checkbox"
onChange={this.updateSetting.bind(this)} onChange={this.updateSetting.bind(this)}
data-setting="replaceNewTab" showWhenExtension
/>{' '} />
Replace new tab page <CheckboxSetting
</label> name="preserveConsoleLogs"
<label
class="line"
title="Preserves the console logs across your preview refreshes" title="Preserves the console logs across your preview refreshes"
> label="Preserve console logs"
<input pref={this.props.prefs.preserveConsoleLogs}
type="checkbox"
onChange={this.updateSetting.bind(this)} onChange={this.updateSetting.bind(this)}
data-setting="preserveConsoleLogs" />
/>{' '} <CheckboxSetting
Preserve console logs name="lightVersion"
</label>
<label
class="line"
title="Switch to lighter version for better performance. Removes things like blur etc." title="Switch to lighter version for better performance. Removes things like blur etc."
> label="Fast/light version"
<input pref={this.props.prefs.lightVersion}
type="checkbox"
onChange={this.updateSetting.bind(this)} onChange={this.updateSetting.bind(this)}
data-setting="lightVersion" />
/>{' '}
Fast/light version
</label>
</div> </div>
</div> </div>
@@ -278,17 +277,13 @@ export default class Settings extends Component {
<h3>Fun</h3> <h3>Fun</h3>
<p> <p>
<label <CheckboxSetting
class="line"
title="Enjoy wonderful particle blasts while you type" title="Enjoy wonderful particle blasts while you type"
> label="Code blast!"
<input name="isCodeBlastOn"
type="checkbox" pref={this.props.prefs.isCodeBlastOn}
onChange={this.updateSetting.bind(this)} onChange={this.updateSetting.bind(this)}
data-setting="isCodeBlastOn" />
/>{' '}
Code blast!
</label>
</p> </p>
<hr /> <hr />
@@ -302,6 +297,7 @@ export default class Settings extends Component {
Maximum time allowed in a loop iteration Maximum time allowed in a loop iteration
<input <input
type="number" type="number"
value={this.props.prefs.infiniteLoopTimeout}
data-setting="infiniteLoopTimeout" data-setting="infiniteLoopTimeout"
onChange={this.updateSetting.bind(this)} onChange={this.updateSetting.bind(this)}
/>{' '} />{' '}

10
webmaker/src/components/app.jsx
View File

@@ -394,9 +394,10 @@ export default class App extends Component {
var obj = {}; var obj = {};
var el = e.target; var el = e.target;
log(settingName, el.type === 'checkbox' ? el.checked : el.value); log(settingName, el.type === 'checkbox' ? el.checked : el.value);
this.state.prefs[settingName] = const prefs = { ...this.state.prefs };
el.type === 'checkbox' ? el.checked : el.value; prefs[settingName] = el.type === 'checkbox' ? el.checked : el.value;
obj[settingName] = this.state.prefs[settingName]; obj[settingName] = prefs[settingName];
this.setState({ prefs });
// We always save locally so that it gets fetched // We always save locally so that it gets fetched
// faster on future loads. // faster on future loads.
@@ -426,9 +427,6 @@ export default class App extends Component {
this.contentWrap.applyCodemirrorSettings(this.state.prefs); this.contentWrap.applyCodemirrorSettings(this.state.prefs);
// Update indentation count when slider is updated
// indentationSizeValueEl.textContent = $('[data-setting=indentSize]').value;
/* /*
scope.consoleCm.setOption('theme', $('[data-setting=editorTheme]').value); scope.consoleCm.setOption('theme', $('[data-setting=editorTheme]').value);
scope.acssSettingsCm.setOption( scope.acssSettingsCm.setOption(