mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-08-01 19:10:22 +02:00
Code Issues Releases Wiki Activity

Fix settings updation for switches

Browse Source
This commit is contained in:
Kushagra Gour
2018-11-12 18:22:31 +05:30
parent 6776855cad
commit 29725026ee
5 changed files with 261 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

474
src/components/Settings.jsx
View File

@@ -4,33 +4,22 @@ import Switch from './Switch';
import Tabs, { TabPanel } from './Tabs'; import Tabs, { TabPanel } from './Tabs';
import { Divider } from './common'; import { Divider } from './common';
function CheckboxSetting({ function CheckboxSetting({ label, onChange, pref }) {
title,
label,
onChange,
pref,
name,
showWhenExtension
}) {
return ( return (
// <label <Switch
// class={`line ${showWhenExtension ? 'show-when-extension' : ''} `} checked={pref}
// title={title} onChange={onChange}
// > class={`line ${showWhenExtension ? 'show-when-extension' : ''} `}
// <input >
// type="checkbox" {label}
// checked={pref} </Switch>
// onChange={onChange}
// data-setting={name}
// />{' '}
// {label}
// </label>
<Switch checked={pref}>{label}</Switch>
); );
} }
export default class Settings extends Component { export default class Settings extends Component {
updateSetting(e) { updateSetting(e, settingName) {
this.props.onChange(e); const value =
e.target.type === 'checkbox' ? e.target.checked : e.target.value;
this.props.onChange(settingName, value);
} }
shouldComponentUpdate() { shouldComponentUpdate() {
// TODO: add check on prefs // TODO: add check on prefs
@@ -45,295 +34,322 @@ export default class Settings extends Component {
<Tabs> <Tabs>
<TabPanel label="General"> <TabPanel label="General">
<CheckboxSetting <CheckboxSetting
name="preserveLastCode"
title="Loads the last open creation when app starts"
label="Preserve last written code" label="Preserve last written code"
pref={prefs.preserveLastCode} pref={prefs.preserveLastCode}
onChange={this.updateSetting.bind(this)} onChange={e => this.updateSetting(e, 'preserveLastCode')}
/> />
<p class="help-text">
Loads the last open creation when app starts
</p>
<Divider /> <Divider />
<CheckboxSetting <CheckboxSetting
name="lightVersion"
title="Switch to lighter version for better performance. Removes things like blur etc."
label="Fast/light version" label="Fast/light version"
pref={prefs.lightVersion} pref={prefs.lightVersion}
onChange={this.updateSetting.bind(this)} onChange={e => this.updateSetting(e, 'lightVersion')}
/> />
<p class="help-text">
Switch to lighter version for better performance. Removes things
like blur etc.
</p>
<Divider /> <Divider />
<CheckboxSetting <CheckboxSetting
name="autoPreview"
title="Refreshes the preview as you code. Otherwise use the Run button"
label="Auto-preview" label="Auto-preview"
pref={prefs.autoPreview} pref={prefs.autoPreview}
onChange={this.updateSetting.bind(this)} onChange={e => this.updateSetting(e, 'autoPreview')}
/> />
<p class="help-text">
Refreshes the preview as you code. Otherwise use the Run button
</p>
<Divider /> <Divider />
<CheckboxSetting <CheckboxSetting
name="autoSave"
title="Auto-save keeps saving your code at regular intervals after you hit the first save manually"
label="Auto-save" label="Auto-save"
pref={prefs.autoSave} pref={prefs.autoSave}
onChange={this.updateSetting.bind(this)} onChange={e => this.updateSetting(e, 'autoSave')}
/> />
<p class="help-text">
Auto-save keeps saving your code at regular intervals after you
hit the first save manually
</p>
<Divider /> <Divider />
<CheckboxSetting <CheckboxSetting
name="replaceNewTab" label="Refresh preview on resize"
title="Turning this on will start showing Web Maker in every new tab you open" pref={prefs.refreshOnResize}
label="Replace new tab page" onChange={e => this.updateSetting(e, 'refreshOnResize')}
pref={prefs.replaceNewTab}
onChange={this.updateSetting.bind(this)}
showWhenExtension
/> />
<p class="help-text">
Preview will refresh when you resize the preview pane
</p>
<Divider />
<div class="show-when-extension">
<CheckboxSetting
label="Replace new tab page"
pref={prefs.replaceNewTab}
onChange={e => this.updateSetting(e, 'replaceNewTab')}
showWhenExtension
/>
<p class="help-text">
Turning this on will start showing Web Maker in every new tab
you open
</p>
</div>
<Divider /> <Divider />
<CheckboxSetting <CheckboxSetting
name="preserveConsoleLogs"
title="Preserves the console logs across your preview refreshes"
label="Preserve console logs" label="Preserve console logs"
pref={prefs.preserveConsoleLogs} pref={prefs.preserveConsoleLogs}
onChange={this.updateSetting.bind(this)} onChange={e => this.updateSetting(e, 'preserveConsoleLogs')}
/> />
<p class="help-text">
Preserves the console logs across your preview refreshes
</p>
</TabPanel> </TabPanel>
<TabPanel label="Indentation"> <TabPanel label="Indentation">
<div <div class="line">
class="line" <div>
title="I know this is tough, but you have to decide one!" <label>
> <input
<label> type="radio"
<input name="indentation"
type="radio" value="spaces"
name="indentation" checked={prefs.indentWith === 'spaces'}
value="spaces" onChange={e => this.updateSetting(e, 'indentWith')}
checked={prefs.indentWith === 'spaces'} />{' '}
onChange={this.updateSetting.bind(this)} Spaces
data-setting="indentWith" </label>
/>{' '} <label class="ml-1">
Spaces <input
</label> type="radio"
<label class="ml-1"> name="indentation"
<input value="tabs"
type="radio" checked={prefs.indentWith === 'tabs'}
name="indentation" onChange={e => this.updateSetting(e, 'indentWith')}
value="tabs" />{' '}
checked={prefs.indentWith === 'tabs'} Tabs
onChange={this.updateSetting.bind(this)} </label>
data-setting="indentWith" </div>
/>{' '}
Tabs
</label>
</div> </div>
<label class="line" title=""> <label class="line" title="">
Indentation Size{' '} Indentation Size
<input <div>
type="range" <input
class="va-m ml-1" type="range"
value={prefs.indentSize} class="va-m ml-1"
min="1" value={prefs.indentSize}
max="7" min="1"
list="indentationSizeList" max="7"
data-setting="indentSize" list="indentationSizeList"
onChange={this.updateSetting.bind(this)} onChange={e => this.updateSetting(e, 'indentSize')}
/> />
<span id="indentationSizeValueEl">{prefs.indentSize}</span> <span id="indentationSizeValueEl">{prefs.indentSize}</span>
<datalist id="indentationSizeList"> <datalist id="indentationSizeList">
<option>1</option> <option>1</option>
<option>2</option> <option>2</option>
<option>3</option> <option>3</option>
<option>4</option> <option>4</option>
<option>5</option> <option>5</option>
<option>6</option> <option>6</option>
<option>7</option> <option>7</option>
</datalist> </datalist>
</div>
</label> </label>
</TabPanel> </TabPanel>
<TabPanel label="Editor"> <TabPanel label="Editor">
<div class="fle block--mobile"> <div class="fle block--mobile">
<div> <div>
<label class="line">Default Preprocessors</label> <div class="line">
<div class="flex line"> <span>Default Preprocessors</span>
<select <div class="flex">
style="flex:1;margin-left:20px" <select
data-setting="htmlMode" aria-label="Default HTML preprocessor"
value={prefs.htmlMode} style="flex:1;margin-left:20px"
onChange={this.updateSetting.bind(this)} value={prefs.htmlMode}
> onChange={e => this.updateSetting(e, 'htmlMode')}
<option value="html">HTML</option> >
<option value="markdown">Markdown</option> <option value="html">HTML</option>
<option value="jade">Pug</option> <option value="markdown">Markdown</option>
</select> <option value="jade">Pug</option>
<select </select>
style="flex:1;margin-left:20px" <select
data-setting="cssMode" aria-label="Default CSS preprocessor"
value={prefs.cssMode} style="flex:1;margin-left:20px"
onChange={this.updateSetting.bind(this)} value={prefs.cssMode}
> onChange={e => this.updateSetting(e, 'cssMode')}
<option value="css">CSS</option> >
<option value="scss">SCSS</option> <option value="css">CSS</option>
<option value="sass">SASS</option> <option value="scss">SCSS</option>
<option value="less">LESS</option> <option value="sass">SASS</option>
<option value="stylus">Stylus</option> <option value="less">LESS</option>
<option value="acss">Atomic CSS</option> <option value="stylus">Stylus</option>
</select> <option value="acss">Atomic CSS</option>
<select </select>
style="flex:1;margin-left:20px" <select
data-setting="jsMode" aria-label="Default JavaScript preprocessor"
value={prefs.jsMode} style="flex:1;margin-left:20px"
onChange={this.updateSetting.bind(this)} value={prefs.jsMode}
> onChange={e => this.updateSetting(e, 'jsMode')}
<option value="js">JS</option> >
<option value="coffee">CoffeeScript</option> <option value="js">JS</option>
<option value="es6">ES6 (Babel)</option> <option value="coffee">CoffeeScript</option>
<option value="typescript">TypeScript</option> <option value="es6">ES6 (Babel)</option>
</select> <option value="typescript">TypeScript</option>
</select>
</div>
</div> </div>
<Divider />
<label class="line"> <label class="line">
Theme Theme
<select <div>
style="flex:1;margin:0 20px" <select
data-setting="editorTheme" value={prefs.editorTheme}
value={prefs.editorTheme} onChange={e => this.updateSetting(e, 'editorTheme')}
onChange={this.updateSetting.bind(this)} >
> {editorThemes.map(theme => (
{editorThemes.map(theme => ( <option value={theme}>{theme}</option>
<option value={theme}>{theme}</option> ))}
))} </select>
</select> </div>
</label> </label>
<Divider />
<label class="line"> <label class="line">
Font Font
<select <div>
style="flex:1;margin:0 20px" <select
data-setting="editorFont" value={prefs.editorFont}
value={prefs.editorFont} onChange={e => this.updateSetting(e, 'editorFont')}
onChange={this.updateSetting.bind(this)} >
> <option value="FiraCode">Fira Code</option>
<option value="FiraCode">Fira Code</option> <option value="Inconsolata">Inconsolata</option>
<option value="Inconsolata">Inconsolata</option> <option value="Monoid">Monoid</option>
<option value="Monoid">Monoid</option> <option value="FixedSys">FixedSys</option>
<option value="FixedSys">FixedSys</option> <option disabled="disabled">----</option>
<option disabled="disabled">----</option> <option value="other">Other font from system</option>
<option value="other">Other font from system</option> </select>
</select> {prefs.editorFont === 'other' && (
{prefs.editorFont === 'other' && ( <input
<input style="margin-left:20px"
id="customEditorFontInput" id="customEditorFontInput"
type="text" type="text"
value={prefs.editorCustomFont} value={prefs.editorCustomFont}
placeholder="Custom font name here" placeholder="Custom font name here"
data-setting="editorCustomFont" onChange={e =>
onChange={this.updateSetting.bind(this)} this.updateSetting(e, 'editorCustomFont')
/> }
)} />
)}
</div>
</label> </label>
<Divider />
<label class="line"> <label class="line">
Font Size{' '} Font Size
<input <div>
style="width:70px" <input
type="number" style="width:70px"
value={prefs.fontSize} type="number"
data-setting="fontSize" value={prefs.fontSize}
onChange={this.updateSetting.bind(this)} onChange={e => this.updateSetting(e, 'fontSize')}
/>{' '} />{' '}
px px
</div>
</label> </label>
<Divider />
<div class="line"> <div class="line">
Key bindings Key bindings
<label class="ml-1"> <div>
<input <label class="ml-1">
type="radio" <input
name="keymap" type="radio"
value="sublime" name="keymap"
checked={prefs.keymap === 'sublime'} value="sublime"
data-setting="keymap" checked={prefs.keymap === 'sublime'}
onChange={this.updateSetting.bind(this)} onChange={e => this.updateSetting(e, 'keymap')}
/>{' '} />{' '}
Sublime Sublime
</label> </label>
<label class="ml-1"> <label class="ml-1">
<input <input
type="radio" type="radio"
name="keymap" name="keymap"
value="vim" value="vim"
checked={prefs.keymap === 'vim'} checked={prefs.keymap === 'vim'}
data-setting="keymap" onChange={e => this.updateSetting(e, 'keymap')}
onChange={this.updateSetting.bind(this)} />{' '}
/>{' '} Vim
Vim </label>
</label> </div>
</div> </div>
</div> </div>
<Divider />
<div class="flex-grow"> <div class="flex-grow">
<CheckboxSetting <CheckboxSetting
name="lineWrap"
title="Toggle wrapping of long sentences onto new line" title="Toggle wrapping of long sentences onto new line"
label="Line wrap" label="Line wrap"
pref={prefs.lineWrap} pref={prefs.lineWrap}
onChange={this.updateSetting.bind(this)} onChange={e => this.updateSetting(e, 'lineWrap')}
/> />
<Divider /> <Divider />
<CheckboxSetting <CheckboxSetting
name="refreshOnResize"
title="Your Preview will refresh when you resize the preview split"
label="Refresh preview on resize"
pref={prefs.refreshOnResize}
onChange={this.updateSetting.bind(this)}
/>
<Divider />
<CheckboxSetting
name="autoComplete"
title="Turns on the auto-completion suggestions as you type" title="Turns on the auto-completion suggestions as you type"
label="Auto-complete suggestions" label="Auto-complete suggestions"
pref={prefs.autoComplete} pref={prefs.autoComplete}
onChange={this.updateSetting.bind(this)} onChange={e => this.updateSetting(e, 'autoComplete')}
/> />
</div> </div>
</div> </div>
</TabPanel> </TabPanel>
<TabPanel label="Fun"> <TabPanel label="Fun">
<CheckboxSetting <CheckboxSetting
title="Enjoy wonderful particle blasts while you type"
label="Code blast!" label="Code blast!"
name="isCodeBlastOn"
pref={prefs.isCodeBlastOn} pref={prefs.isCodeBlastOn}
onChange={this.updateSetting.bind(this)} onChange={e => this.updateSetting(e, 'isCodeBlastOn')}
/> />
<p class="help-text">
Enjoy wonderful particle blasts while you type
</p>
<Divider /> <Divider />
<CheckboxSetting <CheckboxSetting
title="Get ready to build some games at JS13KGames"
label="Js13kGames Mode" label="Js13kGames Mode"
name="isJs13kModeOn"
pref={prefs.isJs13kModeOn} pref={prefs.isJs13kModeOn}
onChange={this.updateSetting.bind(this)} onChange={e => this.updateSetting(e, 'isJs13kModeOn')}
/> />
<p class="help-text">
Make the app ready to build some games for{' '}
<a href="https://js13kgames.com/" target="_blank" rel="noopener">
Js13kGames
</a>.
</p>
</TabPanel> </TabPanel>
<TabPanel label="Advanced"> <TabPanel label="Advanced">
<p> <div>
<label <label class="line">
class="line" Maximum time allowed in a loop iteration
title="This timeout is used to indentify a possible infinite loop and prevent it." <div>
> <input
Maximum time allowed in a loop iteration{' '} type="number"
<input style="width:120px"
type="number" value={prefs.infiniteLoopTimeout}
value={prefs.infiniteLoopTimeout} onChange={e => this.updateSetting(e, 'infiniteLoopTimeout')}
data-setting="infiniteLoopTimeout" />{' '}
onChange={this.updateSetting.bind(this)} ms
/>{' '} </div>
ms
</label> </label>
<div class="help-text"> <p class="help-text">
If any loop iteration takes more than the defined time, it is If any loop iteration takes more than the defined time, it is
detected as a potential infinite loop and further iterations are detected as a potential infinite loop and further iterations are
stopped. stopped.
</div> </p>
</p> </div>
<Divider />
<p> <div>
<label class="line"> <label class="line">
Language Language
<select <select
data-setting="lang"
value={prefs.lang} value={prefs.lang}
onChange={this.updateSetting.bind(this)} onChange={e => this.updateSetting(e, 'lang')}
> >
<option value="en">English</option> <option value="en">English</option>
<option value="hi">Hindi</option> <option value="hi">Hindi</option>
@@ -341,7 +357,7 @@ export default class Settings extends Component {
<option value="sa">Sanskrit</option> <option value="sa">Sanskrit</option>
</select> </select>
</label> </label>
</p> </div>
</TabPanel> </TabPanel>
</Tabs> </Tabs>
</div> </div>

7
src/components/Switch.jsx
View File

@@ -4,7 +4,12 @@ export default class Switch extends Component {
render() { render() {
return ( return (
<label class="check-switch"> <label class="check-switch">
<input role="switch" type="checkbox" checked={this.props.checked} /> <input
role="switch"
type="checkbox"
checked={this.props.checked}
onChange={this.props.onChange}
/>
<div class="check-switch__toggle-wrap"> <div class="check-switch__toggle-wrap">
<span <span
aria-hidden="true" aria-hidden="true"

1
src/components/Tabs.jsx
View File

@@ -4,6 +4,7 @@ function hyphenate(text) {
return text.replace(/\s/g, '-'); return text.replace(/\s/g, '-');
} }
const ID_PREFIX = 'tab-panel-'; const ID_PREFIX = 'tab-panel-';
export function TabPanel({ label }) { export function TabPanel({ label }) {
return ( return (
<div <div

11
src/components/app.jsx
View File

@@ -887,15 +887,14 @@ export default class App extends Component {
/** /**
* Handles all user triggered preference changes in the UI. * Handles all user triggered preference changes in the UI.
*/ */
updateSetting(e) { updateSetting(settingName, value) {
// If this was triggered from user interaction, save the setting // If this was triggered from user interaction, save the setting
if (e) { if (settingName) {
var settingName = e.target.dataset.setting; // var settingName = e.target.dataset.setting;
var obj = {}; var obj = {};
var el = e.target; log(settingName, value);
log(settingName, el.type === 'checkbox' ? el.checked : el.value);
const prefs = { ...this.state.prefs }; const prefs = { ...this.state.prefs };
prefs[settingName] = el.type === 'checkbox' ? el.checked : el.value; prefs[settingName] = value;
obj[settingName] = prefs[settingName]; obj[settingName] = prefs[settingName];
this.setState({ prefs }); this.setState({ prefs });

6
src/style.css
View File

@@ -226,8 +226,10 @@ label {
} }
.line { .line {
display: block; /* display: block; */
margin-bottom: 1em; margin-bottom: 1em;
display: flex;
justify-content: space-between;
} }
.caret { .caret {
@@ -257,7 +259,6 @@ a > svg {
.check-switch { .check-switch {
display: block; display: block;
overflow: hidden; overflow: hidden;
padding: 0.5em;
position: relative; position: relative;
} }
@@ -1661,6 +1662,7 @@ body:not(.is-app) .show-when-app {
.help-text { .help-text {
font-size: 0.9em; font-size: 0.9em;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
margin: 5px 0;
} }
.social-login-btn:after, .social-login-btn:after,