mirror of https://github.com/mue/mue.git
fix: hot reload bugs
This commit is contained in:
parent
54e7a3a33f
commit
6ec57c75d4
|
@ -1,5 +1,7 @@
|
|||
import { PureComponent } from 'react';
|
||||
|
||||
import EventBus from '../../../modules/helpers/eventbus';
|
||||
|
||||
import './autocomplete.scss';
|
||||
|
||||
export default class Autocomplete extends PureComponent {
|
||||
|
@ -7,12 +9,13 @@ export default class Autocomplete extends PureComponent {
|
|||
super(props);
|
||||
this.state = {
|
||||
filtered: [],
|
||||
input: ''
|
||||
input: '',
|
||||
autocompleteDisabled: (localStorage.getItem('autocomplete') !== 'true')
|
||||
};
|
||||
}
|
||||
|
||||
onChange = (e) => {
|
||||
if (localStorage.getItem('autocomplete') !== 'true') {
|
||||
if (this.state.autocompleteDisabled) {
|
||||
return this.setState({
|
||||
input: e.target.value
|
||||
});
|
||||
|
@ -35,6 +38,16 @@ export default class Autocomplete extends PureComponent {
|
|||
this.props.onClick(e);
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
EventBus.on('refresh', (data) => {
|
||||
if (data === 'search') {
|
||||
this.setState({
|
||||
autocompleteDisabled: (localStorage.getItem('autocomplete') !== 'true')
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
let autocomplete = null;
|
||||
|
||||
|
|
|
@ -55,6 +55,7 @@ export default function AppearanceSettings() {
|
|||
</Dropdown>
|
||||
|
||||
<h3>{appearance.accessibility.title}</h3>
|
||||
{/* not supported on firefox */}
|
||||
{(navigator.userAgent.includes('Chrome') && typeof InstallTrigger === 'undefined') ?
|
||||
<Slider title={appearance.accessibility.widget_zoom} name='widgetzoom' default='100' step='10' min='50' max='200' display='%' category='other'/>
|
||||
: null}
|
||||
|
|
|
@ -29,14 +29,14 @@ export default class GreetingSettings extends PureComponent {
|
|||
<>
|
||||
<h2>{greeting.title}</h2>
|
||||
<Switch name='greeting' text={this.language.enabled} category='greeting' element='.greeting'/>
|
||||
<Checkbox name='events' text={greeting.events} category='greeting' element='.greeting'/>
|
||||
<Checkbox name='defaultGreetingMessage' text={greeting.default} category='greeting' element='.greeting'/>
|
||||
<Text title={greeting.name} name='greetingName' category='greeting' element='.greeting'/>
|
||||
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomGreeting' min='10' max='400' default='100' display='%' category='greeting' element='.greeting' />
|
||||
<Checkbox name='events' text={greeting.events} category='greeting'/>
|
||||
<Checkbox name='defaultGreetingMessage' text={greeting.default} category='greeting'/>
|
||||
<Text title={greeting.name} name='greetingName' category='greeting'/>
|
||||
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomGreeting' min='10' max='400' default='100' display='%' category='greeting' />
|
||||
|
||||
<h3>{greeting.birthday}</h3>
|
||||
<Switch name='birthdayenabled' text={this.language.enabled} category='greeting' element='.greeting'/>
|
||||
<Checkbox name='birthdayage' text={greeting.birthday_age} category='greeting' element='.greeting'/>
|
||||
<Switch name='birthdayenabled' text={this.language.enabled} category='greeting'/>
|
||||
<Checkbox name='birthdayage' text={greeting.birthday_age} category='greeting'/>
|
||||
<p>{greeting.birthday_date}</p>
|
||||
<input type='date' onChange={this.changeDate} value={this.state.birthday.toISOString().substr(0, 10)}/>
|
||||
</>
|
||||
|
|
|
@ -60,7 +60,7 @@ export default class BackgroundSettings extends PureComponent {
|
|||
return (
|
||||
<>
|
||||
<h2>{language.title}</h2>
|
||||
<Radio name='language' options={languages} element='.language' />
|
||||
<Radio name='language' options={languages} element='.other' />
|
||||
<h3>{language.quote}</h3>
|
||||
<Radio name='quotelanguage' options={this.state.quoteLanguages} category='quote' />
|
||||
</>
|
||||
|
|
|
@ -8,11 +8,11 @@ export default function QuickLinks() {
|
|||
return (
|
||||
<>
|
||||
<h2>{language.title}</h2>
|
||||
<Switch name='quicklinksenabled' text={window.language.modals.main.settings.enabled} category='quicklinks' element='.quicklinks-container' />
|
||||
<Checkbox name='quicklinksddgProxy' text={window.language.modals.main.settings.sections.background.ddg_image_proxy} element='.other' />
|
||||
<Checkbox name='quicklinksnewtab' text={language.open_new} category='quicklinks' />
|
||||
<Checkbox name='quicklinkstooltip' text={language.tooltip} category='quicklinks' />
|
||||
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomQuicklinks' min='10' max='400' default='100' display='%' category='quicklinks' element='.quicklinks-container' />
|
||||
<Switch name='quicklinksenabled' text={window.language.modals.main.settings.enabled} category='quicklinks' element='.quicklinks-container'/>
|
||||
<Checkbox name='quicklinksddgProxy' text={window.language.modals.main.settings.sections.background.ddg_image_proxy} category='quicklinks'/>
|
||||
<Checkbox name='quicklinksnewtab' text={language.open_new} category='quicklinks'/>
|
||||
<Checkbox name='quicklinkstooltip' text={language.tooltip} category='quicklinks'/>
|
||||
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomQuicklinks' min='10' max='400' default='100' display='%' category='quicklinks'/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -27,8 +27,8 @@ export default class QuoteSettings extends PureComponent {
|
|||
if (this.state.quoteType === 'custom') {
|
||||
customSettings = (
|
||||
<>
|
||||
<Text title={quote.custom} name='customQuote' category='quote' element='.quotediv' />
|
||||
<Text title={quote.custom_author} name='customQuoteAuthor' category='quote' element='.quotediv'/>
|
||||
<Text title={quote.custom} name='customQuote' category='quote' />
|
||||
<Text title={quote.custom_author} name='customQuoteAuthor' category='quote'/>
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
|
@ -60,7 +60,7 @@ export default class QuoteSettings extends PureComponent {
|
|||
<option value='custom'>{quote.custom}</option>
|
||||
</Dropdown>
|
||||
{customSettings}
|
||||
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomQuote' min='10' max='400' default='100' display='%' category='quote' element='.quotediv' />
|
||||
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomQuote' min='10' max='400' default='100' display='%' category='quote' />
|
||||
|
||||
<h3>{quote.buttons.title}</h3>
|
||||
<Checkbox name='copyButton' text={quote.buttons.copy} category='quote'/>
|
||||
|
|
|
@ -89,7 +89,7 @@ export default class SearchSettings extends PureComponent {
|
|||
<input type='text' value={this.state.customValue} onInput={(e) => this.setState({ customValue: e.target.value })}></input>
|
||||
</ul>
|
||||
<br/>
|
||||
<Checkbox name='autocomplete' text={search.autocomplete} category='search' element='.other'/>
|
||||
<Checkbox name='autocomplete' text={search.autocomplete} category='search' />
|
||||
<Radio title={search.autocomplete_provider} options={autocompleteProviders} name='autocompleteProvider' category='search'/>
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -35,21 +35,21 @@ export default class TimeSettings extends PureComponent {
|
|||
const digitalSettings = (
|
||||
<>
|
||||
<h3>{time.digital.title}</h3>
|
||||
<Radio title={time.format} name='timeformat' options={digitalOptions} smallTitle={true} category='clock' element='.clock-container' />
|
||||
<Radio title={time.format} name='timeformat' options={digitalOptions} smallTitle={true} category='clock' />
|
||||
<br/>
|
||||
<Checkbox name='seconds' text={time.digital.seconds} category='clock' element='.clock-container' />
|
||||
<Checkbox name='zero' text={time.digital.zero} category='clock' element='.clock-container' />
|
||||
<Checkbox name='seconds' text={time.digital.seconds} category='clock' />
|
||||
<Checkbox name='zero' text={time.digital.zero} category='clock' />
|
||||
</>
|
||||
);
|
||||
|
||||
const analogSettings = (
|
||||
<>
|
||||
<h3>{time.analogue.title}</h3>
|
||||
<Checkbox name='secondHand' text={time.analogue.second_hand} category='clock' element='.clock-container' />
|
||||
<Checkbox name='minuteHand' text={time.analogue.minute_hand} category='clock' element='.clock-container' />
|
||||
<Checkbox name='hourHand' text={time.analogue.hour_hand} category='clock' element='.clock-container' />
|
||||
<Checkbox name='hourMarks' text={time.analogue.hour_marks} category='clock' element='.clock-container' />
|
||||
<Checkbox name='minuteMarks' text={time.analogue.minute_marks} category='clock' element='.clock-container' />
|
||||
<Checkbox name='secondHand' text={time.analogue.second_hand} category='clock' />
|
||||
<Checkbox name='minuteHand' text={time.analogue.minute_hand} category='clock' />
|
||||
<Checkbox name='hourHand' text={time.analogue.hour_hand} category='clock' />
|
||||
<Checkbox name='hourMarks' text={time.analogue.hour_marks} category='clock' />
|
||||
<Checkbox name='minuteMarks' text={time.analogue.minute_marks} category='clock' />
|
||||
</>
|
||||
);
|
||||
|
||||
|
@ -63,21 +63,21 @@ export default class TimeSettings extends PureComponent {
|
|||
|
||||
const longSettings = (
|
||||
<>
|
||||
<Checkbox name='dayofweek' text={time.date.day_of_week} category='date' element='.date' />
|
||||
<Checkbox name='datenth' text={time.date.datenth} category='date' element='.date' />
|
||||
<Checkbox name='dayofweek' text={time.date.day_of_week} category='date' />
|
||||
<Checkbox name='datenth' text={time.date.datenth} category='date' />
|
||||
</>
|
||||
);
|
||||
|
||||
const shortSettings = (
|
||||
<>
|
||||
<br/>
|
||||
<Dropdown label={time.date.short_format} name='dateFormat' category='date' element='.date'>
|
||||
<Dropdown label={time.date.short_format} name='dateFormat' category='date'>
|
||||
<option value='DMY'>DMY</option>
|
||||
<option value='MDY'>MDY</option>
|
||||
<option value='YMD'>YMD</option>
|
||||
</Dropdown>
|
||||
<br/><br/>
|
||||
<Dropdown label={time.date.short_separator.title} name='shortFormat' category='date' element='.date'>
|
||||
<Dropdown label={time.date.short_separator.title} name='shortFormat' category='date'>
|
||||
<option value='dots'>{time.date.short_separator.dots}</option>
|
||||
<option value='dash'>{time.date.short_separator.dash}</option>
|
||||
<option value='gaps'>{time.date.short_separator.gaps}</option>
|
||||
|
@ -96,27 +96,27 @@ export default class TimeSettings extends PureComponent {
|
|||
<>
|
||||
<h2>{time.title}</h2>
|
||||
<Switch name='time' text={this.language.enabled} category='clock' element='.clock-container' />
|
||||
<Dropdown label={time.type} name='timeType' onChange={(value) => this.setState({ timeType: value })} category='clock' element='.clock-container'>
|
||||
<Dropdown label={time.type} name='timeType' onChange={(value) => this.setState({ timeType: value })} category='clock'>
|
||||
<option value='digital'>{time.digital.title}</option>
|
||||
<option value='analogue'>{time.analogue.title}</option>
|
||||
<option value='percentageComplete'>{time.percentage_complete}</option>
|
||||
</Dropdown>
|
||||
{timeSettings}
|
||||
{this.state.timeType !== 'analogue' ?
|
||||
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomClock' min='10' max='400' default='100' display='%' category='clock' element='.clock-container' />
|
||||
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomClock' min='10' max='400' default='100' display='%' category='clock'/>
|
||||
: null}
|
||||
|
||||
<h3>{time.date.title}</h3>
|
||||
<Switch name='date' text={this.language.enabled} category='date' element='.date'/>
|
||||
<Dropdown label={time.type} name='dateType' onChange={(value) => this.setState({ dateType: value })} category='date' element='.date'>
|
||||
<Dropdown label={time.type} name='dateType' onChange={(value) => this.setState({ dateType: value })} category='date'>
|
||||
<option value='long'>{time.date.type.long}</option>
|
||||
<option value='short'>{time.date.type.short}</option>
|
||||
</Dropdown>
|
||||
<br/>
|
||||
<Checkbox name='datezero' text={time.digital.zero} category='date' element='.date' />
|
||||
<Checkbox name='weeknumber' text={time.date.week_number} category='date' element='.date'/>
|
||||
<Checkbox name='datezero' text={time.digital.zero} category='date'/>
|
||||
<Checkbox name='weeknumber' text={time.date.week_number} category='date'/>
|
||||
{dateSettings}
|
||||
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomDate' min='10' max='400' default='100' display='%' category='date' element='.date' />
|
||||
<Slider title={window.language.modals.main.settings.sections.appearance.accessibility.widget_zoom} name='zoomDate' min='10' max='400' default='100' display='%' category='date'/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -121,7 +121,7 @@ export default class BackgroundSettings extends PureComponent {
|
|||
))}
|
||||
</Dropdown>
|
||||
<br/><br/>
|
||||
<Dropdown label={background.source.quality.title} name='apiQuality' category='background' element='.other'>
|
||||
<Dropdown label={background.source.quality.title} name='apiQuality' element='.other'>
|
||||
<option value='original'>{background.source.quality.original}</option>
|
||||
<option value='high'>{background.source.quality.high}</option>
|
||||
<option value='normal'>{background.source.quality.normal}</option>
|
||||
|
@ -166,9 +166,9 @@ export default class BackgroundSettings extends PureComponent {
|
|||
<>
|
||||
<h2>{background.title}</h2>
|
||||
<Switch name='background' text={this.language.enabled} category='background' element='#backgroundImage' />
|
||||
<Checkbox name='ddgProxy' text={background.ddg_image_proxy} />
|
||||
<Checkbox name='bgtransition' text={background.transition} />
|
||||
<Checkbox name='photoInformation' text={background.photo_information} category='background' element='.other' />
|
||||
<Checkbox name='ddgProxy' text={background.ddg_image_proxy} element='.other' />
|
||||
<Checkbox name='bgtransition' text={background.transition} element='.other' />
|
||||
<Checkbox name='photoInformation' text={background.photo_information} element='.other' />
|
||||
|
||||
<h3>{background.source.title}</h3>
|
||||
<Dropdown label={background.type.title} name='backgroundType' onChange={(value) => this.setState({ backgroundType: value })} category='background'>
|
||||
|
|
|
@ -211,6 +211,13 @@ export default class Quote extends PureComponent {
|
|||
|
||||
element.style.display = 'block';
|
||||
this.init();
|
||||
|
||||
// buttons hot reload
|
||||
this.setState({
|
||||
favourited: this.useFavourite(),
|
||||
tweet: (localStorage.getItem('tweetButton') === 'false') ? null : this.buttons.tweet,
|
||||
copy: (localStorage.getItem('copyButton') === 'false') ? null : this.buttons.copy
|
||||
});
|
||||
}
|
||||
|
||||
// uninstall quote pack reverts the quote to what you had previously
|
||||
|
|
Loading…
Reference in New Issue