Popup functions except proxyEditor

extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/App.js

@@ -3,27 +3,13 @@ import Component from 'inferno-component';
 import createElement from 'inferno-create-element';
 
 import getNotControlledWarning from './NotControlledWarning';
-
+import getMain from './Main';
-import getTabPanel from './TabPanel';
-import getPacChooser from './PacChooser';
-import getNotifications from './Notifications';
-import getExceptions from './Exceptions';
-import getModList from './ModList';
-import getProxyEditor from './ProxyEditor';
-
 import getFooter from './Footer';
 
 export default function getApp(theState) {
 
   const NotControlledWarning = getNotControlledWarning(theState);
-  const TabPanel = getTabPanel(theState);
+  const Main = getMain(theState);
-
-  const PacChooser = getPacChooser(theState);
-  const Notifications = getNotifications(theState);
-  const Exceptions = getExceptions(theState);
-  const ModList = getModList(theState);
-  const ProxyEditor = getProxyEditor(theState);
-
   const Footer = getFooter(theState);
 
   return class App extends Component {
@@ -140,43 +126,7 @@ export default function getApp(theState) {
 
       return createElement('div', null, [
         ...( props.flags.ifNotControlled ? [createElement(NotControlledWarning, props)] : [] ),
-        // WARNIGN ENDS.
+        createElement(Main, props),
-        createElement(TabPanel, {
-          tabs: [
-            {
-              label: 'PAC-скрипт',
-              content: createElement(PacChooser, props),
-            },
-            {
-              label: 'Исключения',
-              content: createElement(Exceptions, props),
-            },
-            {
-              label: 'Свои прокси',
-              content: createElement(
-                ModList,
-                Object.assign({}, props, {
-                  category: 'ownProxies',
-                  modToChildren: {
-                    customProxyStringRaw: createElement(ProxyEditor),
-                  },
-                })
-              ),
-            },
-            {
-              label: 'Модификаторы',
-              content: createElement(
-                ModList,
-                Object.assign({}, props, {category: 'general'})
-              ),
-            },
-            {
-              label: 'Уведомления',
-              content: createElement(Notifications, props),
-            },
-          ],
-        }),
-        // FOOTER.
         createElement(Footer, Object.assign({ status: this.state.status }, props)),
       ]);
 

extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/InfoLi.js

@@ -123,6 +123,8 @@ export default function getInfoLi() {
           id={iddy}
           onClick={props.onClick}
           disabled={props.disabled}
+          data-category={props['data-category']}
+          data-index={props['data-index']}
         />
         <div class={scopedCss.labelContainer}>
           <label for={iddy} dangerouslySetInnerHTML={{__html: props.conf.label}}></label>

extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/Main.js

@@ -0,0 +1,163 @@
+import Inferno, {linkEvent} from 'inferno';
+import Component from 'inferno-component';
+import createElement from 'inferno-create-element';
+
+import getTabPanel from './TabPanel';
+import getPacChooser from './PacChooser';
+import getExceptions from './Exceptions';
+import getModList from './ModList';
+import getProxyEditor from './ProxyEditor';
+import getApplyMods from './ApplyMods';
+import getNotifications from './Notifications';
+
+export default function getMain(theState) {
+
+  const TabPanel = getTabPanel(theState);
+
+  const PacChooser = getPacChooser(theState);
+  const Exceptions = getExceptions(theState);
+  const ModList = getModList(theState);
+  const ProxyEditor = getProxyEditor(theState);
+  const ApplyMods = getApplyMods(theState);
+  const Notifications = getNotifications(theState);
+
+  return class Main extends Component {
+
+    constructor(props) {
+
+      super(props);
+      this.state = {
+        ifModsChangesStashed: false,
+        catToOrderedMods: {
+          'general': props.apis.pacKitchen.getOrderedConfigs('general'),
+          'ownProxies': props.apis.pacKitchen.getOrderedConfigs('ownProxies'),
+        },
+      };
+
+    }
+
+    getAllMods() {
+
+      return [].concat(...Object.keys(this.state.catToOrderedMods).map((cat) =>
+        this.state.catToOrderedMods[cat]
+      ))
+
+    }
+
+    handleModApply(that) {
+
+      const modsMutated = that.props.apis.pacKitchen.getPacMods();
+      const newMods = that.getAllMods().reduce((_, conf) => {
+
+        modsMutated[conf.key] = conf.value;
+        return modsMutated;
+
+      });
+      that.props.funs.conduct(
+        'Применяем настройки...',
+        (cb) => that.props.apis.pacKitchen.keepCookedNowAsync(newMods, cb),
+        'Настройки применены.',
+        () => that.setState({ifModsChangesStashed: false})
+      );
+
+    }
+
+    handleModCheck(that, event) {
+
+      const checkbox = event.target;
+      const [tCat, tIndex] = [checkbox.dataset.category, parseInt(checkbox.dataset.index)];
+      const oldCats = that.state.catToOrderedMods;
+      const newCats = Object.keys(that.state.catToOrderedMods).reduce((acc, cat) => {
+
+        if (cat !== tCat) {
+          acc[cat] = oldCats[cat];
+        } else {
+          acc[cat] = oldCats[cat].map(
+            (conf, index) => tIndex === index
+              ? Object.assign({}, conf, {value: !conf.value})
+              : conf
+          );
+        }
+        return acc;
+
+      }, {});
+      
+      that.setState({ catToOrderedMods: newCats });
+
+    }
+
+    handleModChange(that) {
+
+      that.setState({ifModsChangesStashed: true});
+
+    }
+
+    render(props) {
+
+      const applyModsEl = createElement(ApplyMods, Object.assign({}, props,
+        {
+          disabled: !this.state.ifModsChangesStashed || props.ifInputsDisabled,
+          onClick: linkEvent(this, this.handleModApply),
+        }
+      ));
+
+      const modsHandlers = {
+        onChange: linkEvent(this, this.handleModChange),
+        onClick: linkEvent(this, this.handleModCheck),
+      };
+
+      return createElement(TabPanel, {
+        tabs: [
+          {
+            label: 'PAC-скрипт',
+            content: createElement(PacChooser, props),
+            key: 'pacScript',
+          },
+          {
+            label: 'Исключения',
+            content: createElement(Exceptions, props),
+            key: 'exceptions',
+          },
+          {
+            label: 'Свои прокси',
+            content: createElement(
+              ModList,
+              Object.assign({}, props, {
+                orderedConfigs: this.state.catToOrderedMods['ownProxies'],
+                childrenOfMod: {
+                  customProxyStringRaw: createElement(ProxyEditor),
+                },
+              }, modsHandlers)
+            ),
+            key: 'ownProxies',
+          },
+          {
+            label: 'Модификаторы',
+            content: createElement(
+              ModList,
+              Object.assign({}, props, {
+                orderedConfigs: this.state.catToOrderedMods['general'],
+              }, modsHandlers)
+            ),
+            key: 'mods',
+          },
+          {
+            content: applyModsEl,
+            key: 'applyMods',
+          },
+          {
+            label: 'Уведомления',
+            content: createElement(Notifications, props),
+            key: 'notifications',
+          },
+        ],
+        alwaysShownWith: {
+          'applyMods': ['ownProxies', 'mods'],
+        },
+      });
+
+    }
+
+  }
+
+};

extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/ModList.js

@@ -1,72 +1,24 @@
 import Inferno from 'inferno';
-import Component from 'inferno-component';
-import createElement from 'inferno-create-element';
-
 import getInfoLi from './InfoLi';
-import getApplyMods from './ApplyMods';
 
 export default function getModList(theState) {
 
   const InfoLi = getInfoLi(theState);
-  const ApplyMods = getApplyMods(theState);
 
-  return class ModList extends Component {
+  return function ModList(props) {
-
-    constructor(props) {
-
-      super(props);
-      this.state = {
-        orderedConfigs: props.apis.pacKitchen.getOrderedConfigs(props.category),
-        ifChangesStashed: false,
-      };
-
-    } 
-
-    render(props) {
 
     return (
-        <section>
+      <ol onChange={props.onChange}>
-          <ul onChange={() => { this.setState({ifChangesStashed: true}); }}>
       {
-            this.state.orderedConfigs.map((conf, index) =>
+        props.orderedConfigs.map((conf, index) => (
-              <InfoLi conf={conf} type='checkbox' checked={conf.value} key={index} onClick={() => {
+          <InfoLi conf={conf} type='checkbox' checked={conf.value} key={index} data-category={conf.category} data-index={index} onClick={props.onClick}>
-
+            {props.childrenOfMod && props.childrenOfMod[conf.key]}
-                const newConfigs = this.state.orderedConfigs.map((c) => Object.assign({}, c)); // Shallow.
+          </InfoLi>)
-                newConfigs[index].value = !newConfigs[index].value;
-                this.setState({orderedConfigs: newConfigs});
-
-              }}>{props.modToChildren && props.modToChildren[conf.key]}</InfoLi>
         )
       }
-          </ul>
+      </ol>
-          {createElement(ApplyMods, Object.assign({}, props,
-            {
-              disabled: !this.state.ifChangesStashed || props.ifInputsDisabled,
-              onClick: () => {
-
-                const oldMods = this.props.apis.pacKitchen.getPacMods();
-                const newMods = this.state.orderedConfigs.reduce((acc, conf) => {
-
-                  acc[conf.key] = conf.value;
-                  return acc;
-
-                }, oldMods);
-
-                this.props.funs.conduct(
-                  'Применяем настройки...',
-                  (cb) => this.props.apis.pacKitchen.keepCookedNowAsync(newMods, cb),
-                  'Настройки применены.',
-                  () => this.setState({ifChangesStashed: false})
     );
 
-              }
-            }
-          ))}
-        </section>
-      );
-
-    }
-
   };
 
 };

extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/TabPanel.js

@@ -6,9 +6,9 @@ export default function getTabPannel({ flags, baseCss }) {
 
   const scopedCss = css`
 
-    .tabContainer {
+    /*.tabContainer {
-      padding: 0.6em 0 1em;
+      padding: 0;
-    }
+    }*/
     .tabContainer li label {
       display: inline-block; /* Needed for ::first-letter below. */
     }
@@ -16,9 +16,9 @@ export default function getTabPannel({ flags, baseCss }) {
       text-transform: uppercase;
     }
     :root.ifInsideOptionsPage .tabContainer {
-      padding-bottom: 0.6em;
+      padding: 0.3em 0 0.4em 0;
     }
-    :root.ifInsideOptionsPage nav.mainNav > div:not(:last-child) {
+    :root.ifInsideOptionsPage nav.mainNav > section:not(:last-child):not([data-key=ownProxies]):not([data-key=mods]) {
       border-bottom: 1px solid var(--cr-options-headline);
     }
 
@@ -98,6 +98,11 @@ export default function getTabPannel({ flags, baseCss }) {
 
     /* LABELS ends. */
 
+    .mainNav {
+      padding-top: 0.6em;
+      padding-bottom: 1em;
+    }
+
   `;
 
   if (flags.ifInsideOptionsPage) {
@@ -117,12 +122,15 @@ export default function getTabPannel({ flags, baseCss }) {
 
     render(props) {
 
+      const indexedTabs = props.tabs.filter((tab) => tab.label);
+      const chosenTabKey = indexedTabs[this.state.chosenTabIndex].key;
+
       return (
         <div>
           <nav class={scopedCss.navLabels}>
             <ul class='horizontalList'>
               {
-                props.tabs.map((tab, index) =>
+                indexedTabs.map((tab, index) =>
                   (<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>
@@ -135,13 +143,14 @@ export default function getTabPannel({ flags, baseCss }) {
 
           <nav class={'horPadded ' + scopedCss.mainNav}>
             {
-              props.tabs.map((tab, index) => (
+              [].concat(...props.tabs.map((tab, index) => [
-                  <div>
+                (<input type="checkbox" name="selectedTab" id={'radioTab' + index} checked={
-                    <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>
+                  chosenTabKey === tab.key || (props.alwaysShownWith[tab.key] || []).includes(chosenTabKey)
-                  </div>
+
-                )
+                } class="off"/>),
-              )
+                (<section id={'tab' + index} class={scopedCss.tabContainer} data-key={tab.key}>{tab.content}</section>),
+              ]))
             }
           </nav>
           <hr/>