mirror of
https://github.com/anticensority/runet-censorship-bypass.git
synced 2024-11-24 02:13:43 +03:00
Add notifications, make warning conditional, refactor
This commit is contained in:
Ilya Ig. Petrov
parent
b01999a737
commit
992b7f024e
|
|
@ -1,4 +1,4 @@
|
|||
node_modules
|
||||
npm-debug.log
|
||||
.swp
|
||||
*.swp
|
||||
dist
|
||||
|
|
|
|||
|
|
@ -3,8 +3,11 @@ import Component from 'inferno-component';
|
|||
import createElement from 'inferno-create-element';
|
||||
|
||||
import getNotControlledWarning from './NotControlledWarning';
|
||||
|
||||
import getTabPanel from './TabPanel';
|
||||
import getPacChooser from './PacChooser';
|
||||
import getNotifications from './Notifications';
|
||||
|
||||
import getFooter from './Footer';
|
||||
|
||||
export default function getApp(theState) {
|
||||
|
|
@ -12,6 +15,7 @@ export default function getApp(theState) {
|
|||
const NotControlledWarning = getNotControlledWarning(theState);
|
||||
const TabPanel = getTabPanel(theState);
|
||||
const PacChooser = getPacChooser(theState);
|
||||
const Notifications = getNotifications(theState);
|
||||
const Footer = getFooter(theState);
|
||||
|
||||
return class App extends Component {
|
||||
|
|
@ -21,7 +25,7 @@ export default function getApp(theState) {
|
|||
super(props);
|
||||
this.state = {
|
||||
status: 'Загрузка...',
|
||||
areInputsDisabled: false,
|
||||
ifInputsDisabled: false,
|
||||
};
|
||||
|
||||
}
|
||||
|
|
@ -84,20 +88,8 @@ export default function getApp(theState) {
|
|||
switchInputs(val) {
|
||||
|
||||
this.setState({
|
||||
areInputsDisabled: val === 'off' ? true : false,
|
||||
ifInputsDisabled: val === 'off' ? true : false,
|
||||
});
|
||||
/*
|
||||
const inputs = document.querySelectorAll('input');
|
||||
for ( let i = 0; i < inputs.length; i++ ) {
|
||||
const input = inputs[i];
|
||||
if (val === 'off') {
|
||||
input.dataset.previousDisabledValue = input.disabled;
|
||||
input.disabled = true;
|
||||
} else {
|
||||
input.disabled = input.dataset.previousDisabledValue === 'true';
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -134,11 +126,11 @@ export default function getApp(theState) {
|
|||
setStatusTo: this.setStatusTo.bind(this),
|
||||
conduct: this.conduct.bind(this),
|
||||
},
|
||||
areInputsDisabled: this.state.areInputsDisabled,
|
||||
ifInputsDisabled: this.state.ifInputsDisabled,
|
||||
});
|
||||
|
||||
return createElement('div', null, [
|
||||
createElement(NotControlledWarning, props),
|
||||
...( props.flags.ifNotControlled ? [createElement(NotControlledWarning, props)] : [] ),
|
||||
createElement(TabPanel, {
|
||||
tabs:[
|
||||
{
|
||||
|
|
@ -159,7 +151,7 @@ export default function getApp(theState) {
|
|||
},
|
||||
{
|
||||
label: 'Уведомления',
|
||||
content: "Notifications().render(this.props)",
|
||||
content: createElement(Notifications, props),
|
||||
}
|
||||
]
|
||||
}),
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export default function getFooter() {
|
|||
</section>
|
||||
|
||||
<footer class={scopedCss.controlRow + ' horFlex nowrap'}>
|
||||
<input type="button" value="Готово" disabled={props.areInputsDisabled} onClick={() => window.close()} />
|
||||
<input type="button" value="Готово" disabled={props.ifInputsDisabled} onClick={() => window.close()} />
|
||||
<a href="../troubleshoot/index.html">
|
||||
Проблемы?
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,54 @@
|
|||
import Inferno from 'inferno';
|
||||
import css from 'csjs-inject';
|
||||
|
||||
export default function getPacChooser(theState) {
|
||||
|
||||
const scopedCss = css`
|
||||
|
||||
.listOfNotifiers {
|
||||
margin-left: 0.4em;
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
return function Notifications(props) {
|
||||
|
||||
return (
|
||||
<section>
|
||||
<header>Я <span style="color: #f93a17">❤</span> yведомления:</header>
|
||||
<ul class={scopedCss.listOfNotifiers}>
|
||||
{
|
||||
Array.from(props.apis.errorHandlers.getEventsMap()).map(([ntfId, ntfName]) => {
|
||||
|
||||
const iddy = `if-on-${ntfId}`;
|
||||
const ifChecked = props.apis.errorHandlers.isOn(ntfId);
|
||||
return (
|
||||
<li>
|
||||
<input
|
||||
type="checkbox"
|
||||
id={iddy}
|
||||
checked={ifChecked}
|
||||
disabled={props.ifInputsDisabled}
|
||||
onClick={() => {
|
||||
|
||||
props.apis.errorHandlers.switch(
|
||||
ifChecked ? 'off' : 'on', // Reverse.
|
||||
ntfId
|
||||
);
|
||||
|
||||
}}
|
||||
/>
|
||||
{' '}
|
||||
<label for={iddy}>{ntfName}</label>
|
||||
</li>
|
||||
);
|
||||
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
|
|
@ -122,7 +122,7 @@ export default function getPacChooser(theState) {
|
|||
type="radio"
|
||||
name="pacProvider"
|
||||
checked={iddyToCheck === provConf.key}
|
||||
disabled={props.areInputsDisabled}
|
||||
disabled={props.ifInputsDisabled}
|
||||
>
|
||||
<a href="" class={scopedCss.updateButton} onClick={(evt) => { evt.preventDefault(); updatePac(); }}>[обновить]</a>
|
||||
</InfoLi>)
|
||||
|
|
@ -134,7 +134,7 @@ export default function getPacChooser(theState) {
|
|||
name="pacProvider"
|
||||
conf={{key: 'none', label: 'Отключить'}}
|
||||
checked={iddyToCheck === 'none'}
|
||||
disabled={props.areInputsDisabled}
|
||||
disabled={props.ifInputsDisabled}
|
||||
/>
|
||||
</ul>
|
||||
<div id="updateMessage" class="horFlex" style="align-items: center">
|
||||
|
|
|
|||
|
|
@ -118,39 +118,19 @@ export default function getTabsPannel({ flags }) {
|
|||
};
|
||||
|
||||
}
|
||||
componentDidMount() {
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
|
||||
if (/^#tab(\d+)$/.test(window.location.hash)) {
|
||||
const inputIndex = RegExp.$1;
|
||||
if (inputIndex < this.props.tabs.length) {
|
||||
this.setState({chosenTabIndex: inputIndex});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
render(props) {
|
||||
|
||||
return (<div ref={(dom) => {
|
||||
|
||||
if (!dom) {
|
||||
return /* Unmounting. */;
|
||||
}
|
||||
const target = dom.querySelector(`.${scopedCss.mainNav} *:target`);
|
||||
if (target) {
|
||||
const tabIndex = parseInt(target.id.replace('tab', ''));
|
||||
dom.querySelector(`#radioLabel${tabIndex}`).checked = true;
|
||||
dom.querySelector(`#radioTab${tabIndex}`).checked = true;
|
||||
}
|
||||
|
||||
}}>
|
||||
return (
|
||||
<div>
|
||||
<nav class={scopedCss.navLabels + ' hiddenForOptionsPage'}>
|
||||
<ul class='horizontalList'>
|
||||
{
|
||||
props.tabs.map((tab, index) =>
|
||||
(<li><input type="radio" name="selectedTabLabel" id={'radioLabel' + index} checked={this.state.chosenTabIndex === index} class="off"/><label onClick={() => (window.location.hash = `tab${index}`)} for={'radioLabel' + index} class={scopedCss.navLabel}>{tab.label}</label></li>)
|
||||
(<li>
|
||||
<input type="radio" name="selectedTabLabel" id={'radioLabel' + index} checked={this.state.chosenTabIndex === index} class="off"/>
|
||||
<label onClick={() => this.setState({chosenTabIndex: index})} for={'radioLabel' + index} class={scopedCss.navLabel}>{tab.label}</label>
|
||||
</li>)
|
||||
)
|
||||
}
|
||||
</ul>
|
||||
|
|
@ -159,7 +139,13 @@ export default function getTabsPannel({ flags }) {
|
|||
|
||||
<nav class={'horPadded ' + scopedCss.mainNav}>
|
||||
{
|
||||
props.tabs.map((tab, index) => (<div><input type="radio" name="selectedTab" id={'radioTab' + index} checked={this.state.chosenTabIndex === index} class="off"/><section id={'tab' + index} class={scopedCss.tabContainer}>{tab.content}</section></div>))
|
||||
props.tabs.map((tab, index) => (
|
||||
<div>
|
||||
<input type="radio" name="selectedTab" id={'radioTab' + index} checked={this.state.chosenTabIndex === index} class="off"/>
|
||||
<section id={'tab' + index} class={scopedCss.tabContainer}>{tab.content}</section>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
</nav>
|
||||
<hr/>
|
||||
|
|
|
|||
|
|
@ -5,12 +5,6 @@ import createElement from 'inferno-create-element';
|
|||
import appendGlobalCss from './globalCss';
|
||||
import getApp from './components/App';
|
||||
|
||||
/*
|
||||
#list-of-notifiers {
|
||||
margin-left: 0.4em;
|
||||
}
|
||||
*/
|
||||
|
||||
chrome.runtime.getBackgroundPage( (backgroundPage) =>
|
||||
backgroundPage.apis.errorHandlers.installListenersOn(
|
||||
window, 'PUP', async() => {
|
||||
|
|
@ -30,10 +24,6 @@ chrome.runtime.getBackgroundPage( (backgroundPage) =>
|
|||
};
|
||||
}
|
||||
|
||||
if (theState.flags.ifMini) {
|
||||
document.documentElement.classList.add('ifVersionMini');
|
||||
}
|
||||
|
||||
// IF INSIDE OPTIONS TAB
|
||||
|
||||
const currentTab = await new Promise(
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user