mirror of
https://github.com/anticensority/runet-censorship-bypass.git
synced 2024-11-24 02:13:43 +03:00
Show error and status in PUP
This commit is contained in:
Ilya Ig. Petrov
parent
94bbb92764
commit
82a2994dcc
|
|
@ -3,28 +3,152 @@ import Component from 'inferno-component';
|
|||
import createElement from 'inferno-create-element';
|
||||
|
||||
import getNotControlledWarning from './NotControlledWarning';
|
||||
import getTabPannel from './TabPannel';
|
||||
import getTabPanel from './TabPanel';
|
||||
import getPacChooser from './PacChooser';
|
||||
|
||||
import getFooter from './Footer';
|
||||
|
||||
export default function getApp(theState) {
|
||||
|
||||
const NotControlledWarning = getNotControlledWarning(theState);
|
||||
const TabPanel = getTabPanel(theState);
|
||||
const PacChooser = getPacChooser(theState);
|
||||
const Footer = getFooter(theState);
|
||||
|
||||
return class App extends Component {
|
||||
|
||||
constructor(props) {
|
||||
|
||||
super(props);
|
||||
this.state = {
|
||||
status: 'Загрузка...',
|
||||
areInputsDisabled: false,
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
||||
this.showErrors({ message: 'PANIC!' });
|
||||
|
||||
}
|
||||
|
||||
setStatusTo(msg) {
|
||||
|
||||
this.setState(
|
||||
{
|
||||
status: msg,
|
||||
}
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
showErrors(err, ...warns) {
|
||||
|
||||
const warningHtml = warns
|
||||
.map(
|
||||
(w) => w && w.messageHtml || ''
|
||||
)
|
||||
.filter( (m) => m )
|
||||
.map( (m) => '✘ ' + m )
|
||||
.join('<br/>');
|
||||
|
||||
let messageHtml = '';
|
||||
if (err) {
|
||||
let wrapped = err.wrapped;
|
||||
messageHtml = err.message || '';
|
||||
|
||||
while( wrapped ) {
|
||||
const deeperMsg = wrapped && wrapped.message;
|
||||
if (deeperMsg) {
|
||||
messageHtml = messageHtml + ' > ' + deeperMsg;
|
||||
}
|
||||
wrapped = wrapped.wrapped;
|
||||
}
|
||||
}
|
||||
messageHtml = messageHtml.trim();
|
||||
if (warningHtml) {
|
||||
messageHtml = messageHtml ? messageHtml + '<br/>' + warningHtml : warningHtml;
|
||||
}
|
||||
this.setStatusTo(
|
||||
(<span>
|
||||
<span style="color:red">
|
||||
{err ? <span><span class="emoji">🔥</span> Ошибка!</span> : 'Некритичная oшибка.'}
|
||||
</span>
|
||||
<br/>
|
||||
<span style="font-size: 0.9em; color: darkred" dangerouslySetInnerHTML={{__html: messageHtml}}></span>
|
||||
{err && <a href="" onClick={(evt) => {
|
||||
|
||||
this.props.apis.errorHandlers.viewError('pup-ext-err', err);
|
||||
evt.preventDefault();
|
||||
|
||||
}}> [Техн.детали]</a>}
|
||||
</span>)
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
switchInputs(val) {
|
||||
|
||||
this.setState({
|
||||
areInputsDisabled: 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';
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
}
|
||||
|
||||
conduct(
|
||||
beforeStatus, operation, afterStatus,
|
||||
onSuccess = () => {}, onError = () => {}
|
||||
) {
|
||||
|
||||
this.setStatusTo(beforeStatus);
|
||||
this.switchInputs('off');
|
||||
operation((err, res, ...warns) => {
|
||||
|
||||
warns = warns.filter( (w) => w );
|
||||
if (err || warns.length) {
|
||||
showErrors(err, ...warns);
|
||||
} else {
|
||||
this.setStatusTo(afterStatus);
|
||||
}
|
||||
this.switchInputs('on');
|
||||
if (!err) {
|
||||
onSuccess(res);
|
||||
} else {
|
||||
onError(err);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
render(props) {
|
||||
|
||||
return createElement('div', {
|
||||
onClick: () => console.log('DDDDDCLICK'),
|
||||
onDick: () => console.log('DICK!'),
|
||||
ondick: () => console.log('dddDICK!'),
|
||||
}, [
|
||||
createElement(getNotControlledWarning(theState), props),
|
||||
createElement(getTabPannel(theState), {
|
||||
props = Object.assign({}, props, {
|
||||
funs: {
|
||||
setStatusTo: this.setStatusTo,
|
||||
conduct: this.conduct,
|
||||
},
|
||||
});
|
||||
|
||||
return createElement('div', null, [
|
||||
createElement(NotControlledWarning, props),
|
||||
createElement(TabPanel, {
|
||||
tabs:[
|
||||
{
|
||||
label: 'PAC-скрипт',
|
||||
content: createElement(getPacChooser(theState), props),
|
||||
content: createElement(PacChooser, props),
|
||||
},
|
||||
{
|
||||
label: 'Исключения',
|
||||
|
|
@ -44,7 +168,7 @@ export default function getApp(theState) {
|
|||
}
|
||||
]
|
||||
}),
|
||||
createElement(getFooter(theState), props),
|
||||
createElement(Footer, Object.assign({ status: this.state.status }, props)),
|
||||
]);
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,24 +6,24 @@ export default function getFooter() {
|
|||
|
||||
const scopedCss = css`
|
||||
|
||||
#statusRow {
|
||||
.statusRow {
|
||||
padding: 0 0.3em 1em;
|
||||
}
|
||||
#status {
|
||||
.status {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.controlRow {
|
||||
margin: 1em 0 1em 0;
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
return function (props) {
|
||||
|
||||
return (
|
||||
<div class="horPadded">
|
||||
<section id="statusRow">
|
||||
<div id="status" style="will-change: contents">{props.status}</div>
|
||||
<section class={scopedCss.statusRow}>
|
||||
<div clss={scopedCss.status} style="will-change: contents">{props.status}</div>
|
||||
</section>
|
||||
|
||||
<footer class={scopedCss.controlRow + ' horFlex nowrap'}>
|
||||
|
|
|
|||
|
|
@ -98,12 +98,11 @@ export default function getInfoRow() {
|
|||
|
||||
render(props) {
|
||||
|
||||
// Object.assign is left-associative, let's make it right.
|
||||
Object.assign(props, Object.assign({
|
||||
props = Object.assign({}, {
|
||||
idPrefix: '',
|
||||
ifDashify: false,
|
||||
htmlAfterLabel: '',
|
||||
}, props));
|
||||
}, props);
|
||||
|
||||
const iddy = props.idPrefix + ( props.ifDashify ? camelToDash(props.conf.key) : props.conf.key );
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import Inferno from 'inferno';
|
||||
import Component from 'inferno-component';
|
||||
import createElement from 'inferno-create-element';
|
||||
import css from 'csjs-inject';
|
||||
|
||||
import getInfoLi from './InfoLi';
|
||||
|
|
@ -103,55 +104,48 @@ export default function getPacChooser(...args) {
|
|||
|
||||
render(props) {
|
||||
|
||||
const date = this.getDate(props.antiCensorRu);
|
||||
const date = this.getDate(props.apis.antiCensorRu);
|
||||
return (<div>Обновлялись: <span class="updateDate" title={date.title}>{ date.text }</span></div>);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const updatePac = function updatePac() {
|
||||
conduct(
|
||||
'Обновляем...', (cb) => antiCensorRu.syncWithPacProviderAsync(cb),
|
||||
'Обновлено.'
|
||||
);
|
||||
return false;
|
||||
};
|
||||
|
||||
const InfoLi = getInfoLi(...args);
|
||||
|
||||
function emit(e) {
|
||||
|
||||
const event = new Event('dick');
|
||||
e.target.dispatchEvent(event);
|
||||
|
||||
}
|
||||
|
||||
return class PacChooser extends Component {
|
||||
|
||||
render(props) {
|
||||
|
||||
const checkedIddy = props.antiCensorRu.getCurrentPacProviderKey() || 'none';
|
||||
const updatePac = function updatePac() {
|
||||
props.funs.conduct(
|
||||
'Обновляем...',
|
||||
(cb) => props.apis.antiCensorRu.syncWithPacProviderAsync(cb),
|
||||
'Обновлено.'
|
||||
);
|
||||
};
|
||||
|
||||
const checkedIddy = props.apis.antiCensorRu.getCurrentPacProviderKey() || 'none';
|
||||
return (
|
||||
<div>
|
||||
{props.flags.ifInsideOptionsPage && (<header>PAC-скрипт:</header>)}
|
||||
<ul>
|
||||
{
|
||||
props.antiCensorRu.getSortedEntriesForProviders().map((provConf) =>
|
||||
props.apis.antiCensorRu.getSortedEntriesForProviders().map((provConf) =>
|
||||
(<InfoLi
|
||||
conf={provConf}
|
||||
type="radio"
|
||||
name="pacProvider"
|
||||
checked={checkedIddy === provConf.key}
|
||||
>
|
||||
<a href="" class={scopedCss.updateButton} onClick={(evt) => { evt.preventDefault(); emit(evt) }}>[обновить]</a>
|
||||
<a href="" class={scopedCss.updateButton} onClick={(evt) => { evt.preventDefault(); updatePac(); }}>[обновить]</a>
|
||||
</InfoLi>)
|
||||
)
|
||||
}
|
||||
<InfoLi type="radio" name="pacProvider" conf={{key: 'none', label: 'Отключить'}} checked={checkedIddy === 'none'}/>
|
||||
</ul>
|
||||
<div id="updateMessage" class="horFlex" style="align-items: center">
|
||||
<LastUpdateDate antiCensorRu={props.antiCensorRu}/>
|
||||
{ createElement(LastUpdateDate, props) }
|
||||
<div class={scopedCss.fullLineHeight}>
|
||||
{
|
||||
props.flags.ifMini
|
||||
|
|
|
|||
|
|
@ -25,6 +25,9 @@ export default function getTabsPannel({ flags }) {
|
|||
.underlined {
|
||||
border-bottom: 1px solid var(--cr-options-headline);
|
||||
}
|
||||
:root.ifInsideOptionsPage .navLabels {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* HIDE starts. */
|
||||
|
||||
|
|
@ -113,7 +116,6 @@ export default function getTabsPannel({ flags }) {
|
|||
constructor(props) {
|
||||
|
||||
super(props);
|
||||
console.log('CONSTRUCTOR');
|
||||
this.state = {
|
||||
chosenTabIndex: 0,
|
||||
};
|
||||
|
|
@ -126,7 +128,6 @@ export default function getTabsPannel({ flags }) {
|
|||
if (/^#tab(\d+)$/.test(window.location.hash)) {
|
||||
const inputIndex = RegExp.$1;
|
||||
if (inputIndex < this.props.tabs.length) {
|
||||
console.log('SET STATE');
|
||||
this.setState({chosenTabIndex: inputIndex});
|
||||
}
|
||||
}
|
||||
|
|
@ -137,6 +138,9 @@ export default function getTabsPannel({ flags }) {
|
|||
|
||||
return (<div ref={(dom) => {
|
||||
|
||||
if (!dom) {
|
||||
return /* Unmounting. */;
|
||||
}
|
||||
const target = dom.querySelector(`.${scopedCss.mainNav} *:target`);
|
||||
if (target) {
|
||||
const tabIndex = parseInt(target.id.replace('tab', ''));
|
||||
|
|
@ -26,14 +26,12 @@ chrome.runtime.getBackgroundPage( (backgroundPage) =>
|
|||
|
||||
theState = {
|
||||
utils: backgroundPage.utils,
|
||||
antiCensorRu: backgroundPage.apis.antiCensorRu,
|
||||
errorHandlers: apis.errorHandlers,
|
||||
apis: backgroundPage.apis,
|
||||
flags: {
|
||||
/* Shortcuts to boolean values. */
|
||||
ifNotControlled: !apis.errorHandlers.ifControllable,
|
||||
ifMini: apis.version.ifMini,
|
||||
},
|
||||
status: 'Хорошего настроения Вам!',
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user