Popup functions except proxyEditor

2024-11-27 20:03:45 +03:00 · 2017-05-20 10:20:25 -07:00 · 2017-05-20 10:20:25 -07:00 · adcab0ba97
commit adcab0ba97
parent b3753cb622
5 changed files with 202 additions and 126 deletions
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/App.js
+++ b/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 getTabPanel from './TabPanel';
-import getPacChooser from './PacChooser';
-import getNotifications from './Notifications';
-import getExceptions from './Exceptions';
-import getModList from './ModList';
-import getProxyEditor from './ProxyEditor';
-
+import getMain from './Main';
 import getFooter from './Footer';

 export default function getApp(theState) {

  const NotControlledWarning = getNotControlledWarning(theState);
-  const TabPanel = getTabPanel(theState);
-
-  const PacChooser = getPacChooser(theState);
-  const Notifications = getNotifications(theState);
-  const Exceptions = getExceptions(theState);
-  const ModList = getModList(theState);
-  const ProxyEditor = getProxyEditor(theState);
-
+  const Main = getMain(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(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(Main, props),
        createElement(Footer, Object.assign({ status: this.state.status }, props)),
      ]);

--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/InfoLi.js
+++ b/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>
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/Main.js
+++ b/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'],
+        },
+      });
+
+    }
+
+  }
+
+};
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/ModList.js
+++ b/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 {
-
-    constructor(props) {
-
-      super(props);
-      this.state = {
-        orderedConfigs: props.apis.pacKitchen.getOrderedConfigs(props.category),
-        ifChangesStashed: false,
-      };
-
-    } 
-
-    render(props) {
+  return function ModList(props) {

    return (
-        <section>
-          <ul onChange={() => { this.setState({ifChangesStashed: true}); }}>
+      <ol onChange={props.onChange}>
      {
-            this.state.orderedConfigs.map((conf, index) =>
-              <InfoLi conf={conf} type='checkbox' checked={conf.value} key={index} onClick={() => {
-
-                const newConfigs = this.state.orderedConfigs.map((c) => Object.assign({}, c)); // Shallow.
-                newConfigs[index].value = !newConfigs[index].value;
-                this.setState({orderedConfigs: newConfigs});
-
-              }}>{props.modToChildren && props.modToChildren[conf.key]}</InfoLi>
+        props.orderedConfigs.map((conf, index) => (
+          <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]}
+          </InfoLi>)
        )
      }
-          </ul>
-          {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})
+      </ol>
    );

-              }
-            }
-          ))}
-        </section>
-      );
-
-    }
-
  };

 };
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/TabPanel.js
+++ b/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 {
-      padding: 0.6em 0 1em;
-    }
+    /*.tabContainer {
+      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) => (
-                  <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>
-                )
-              )
+              [].concat(...props.tabs.map((tab, index) => [
+                (<input type="checkbox" name="selectedTab" id={'radioTab' + index} checked={
+
+                  chosenTabKey === tab.key || (props.alwaysShownWith[tab.key] || []).includes(chosenTabKey)
+
+                } class="off"/>),
+                (<section id={'tab' + index} class={scopedCss.tabContainer} data-key={tab.key}>{tab.content}</section>),
+              ]))
            }
          </nav>
          <hr/>