set up auto show/hide setting entry

Author: lxieyang

src/pages/Background/index.js

@@ -92,6 +92,25 @@ const persistdisplayTabInFullStatus = (status) => {
   });
 };
 
+/**
+ * Auto Show Hide
+ */
+let autoShowHide = false;
+
+chrome.storage.sync.get(['autoShowHide'], (result) => {
+  if (result.autoShowHide !== undefined) {
+    autoShowHide = result.autoShowHide === true;
+  } else {
+    persistAutoShowHideStatus(false); // default to not auto show hide
+  }
+});
+
+const persistAutoShowHideStatus = (status) => {
+  chrome.storage.sync.set({
+    autoShowHide: status,
+  });
+};
+
 /**
  * Dark Mode
  */
@@ -222,6 +241,23 @@ const updateDisplayTabInFullStatus = (toStatus) => {
   );
 };
 
+const updateAutoShowHideStatus = (toStatus) => {
+  chrome.tabs.query(
+    {
+      currentWindow: true,
+    },
+    function(tabs) {
+      tabs.forEach((tab) => {
+        chrome.tabs.sendMessage(tab.id, {
+          from: 'background',
+          msg: 'UPDATE_AUTO_SHOW_HIDE_STATUS',
+          toStatus,
+        });
+      });
+    }
+  );
+};
+
 const updateDarkModeStatus = (toStatus) => {
   chrome.tabs.query(
     {
@@ -317,6 +353,14 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     displayTabInFull = toStatus;
     persistdisplayTabInFullStatus(displayTabInFull);
     updateDisplayTabInFullStatus(displayTabInFull);
+  } else if (
+    request.from === 'settings' &&
+    request.msg === 'USER_CHANGE_AUTO_SHOW_HIDE'
+  ) {
+    const { toStatus } = request;
+    autoShowHide = toStatus;
+    persistAutoShowHideStatus(autoShowHide);
+    updateAutoShowHideStatus(autoShowHide);
   } else if (
     request.from === 'settings' &&
     request.msg === 'USER_CHANGE_DARK_MODE'

src/pages/Content/index.jsx

@@ -1,10 +1,12 @@
+import $ from 'jquery';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Frame from './modules/frame/frame';
 import UpdateNotice from './modules/UpdateNotice/UpdateNotice';
 
 let shouldShrinkBody = true;
 let sidebarLocation = 'left';
+let autoShowHide = false;
 const toggleButtonLocation = 'bottom';
 let sidebarWidth = 280;
 
@@ -126,6 +128,12 @@ chrome.storage.sync.get(['sidebarOnLeft'], (result) => {
   mountSidebar();
 });
 
+chrome.storage.sync.get(['autoShowHide'], (result) => {
+  if (result.autoShowHide !== undefined) {
+    autoShowHide = result.autoShowHide === true;
+  }
+});
+
 const checkSidebarStatus = () => {
   chrome.runtime.sendMessage(
     {
@@ -164,6 +172,12 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     const { toStatus } = request;
     shouldShrinkBody = toStatus;
     Frame.shrinkBody();
+  } else if (
+    request.from === 'background' &&
+    request.msg === 'UPDATE_AUTO_SHOW_HIDE_STATUS'
+  ) {
+    const { toStatus } = request;
+    autoShowHide = toStatus;
   }
 });
 
@@ -181,3 +195,25 @@ window.addEventListener('keydown', (event) => {
     });
   }
 });
+
+const openSidebarUponMouseOverWindowEdge = () => {
+  chrome.runtime.sendMessage({
+    from: 'content',
+    msg: 'REQUEST_OPEN_SIDEBAR_UPON_MOUSE_OVER_WINDOW_EDGE',
+  });
+};
+
+$(document).on('mousemove', (event) => {
+  // console.log(event.clientX);
+  const delta = 5;
+  if (sidebarLocation === 'left' && event.clientX < delta) {
+    // console.log('reached left side');
+    openSidebarUponMouseOverWindowEdge();
+  } else if (
+    sidebarLocation === 'right' &&
+    event.clientX > $(document).width() - delta
+  ) {
+    // console.log('reached right side');
+    openSidebarUponMouseOverWindowEdge();
+  }
+});

src/pages/Content/modules/frame/frame.jsx

@@ -355,6 +355,14 @@ export class Frame extends Component {
                   src={url}
                   ref={(frame) => (this.frame = frame)}
                   onLoad={this.onLoad}
+                  onMouseEnter={() => {
+                    // TODO: implement auto show/hide here
+                    console.log('mouse entered');
+                  }}
+                  onMouseLeave={() => {
+                    // TODO: implement auto show/hide here
+                    console.log('mouse left');
+                  }}
                 ></iframe>
               </div>
             </div>

src/pages/Sidebar/containers/Title/SettingsBox/SettingsBox.jsx

@@ -12,6 +12,7 @@ import {
 } from 'react-icons/fa';
 import { IoIosBarcode, IoIosMoon, IoIosSunny } from 'react-icons/io';
 import { WiMoonAltNew, WiMoonAltWaxingCrescent3 } from 'react-icons/wi';
+import { MdFontDownload } from 'react-icons/md';
 
 import './SettingsBox.css';
 
@@ -22,6 +23,8 @@ const SettingsBox = ({
   setSettingSidebarShouldShrinkBody,
   settingDisplayTabTitleInFull,
   setSettingDisplayTabTitleInFull,
+  settingAutoShowHide,
+  setSettingAutoShowHide,
   settingDarkMode,
   setSettingDarkMode,
 }) => {
@@ -184,6 +187,49 @@ const SettingsBox = ({
           </form>
         </div>
 
+        {divider}
+        {/* AUTO SHOW HIDE SIDEBAR */}
+        <div className="SettingEntryContainer">
+          <div className="SettingEntryTitle">
+            <MdFontDownload className="SettingEntryTitleIcon" />
+            Auto show/hide sidebar:
+          </div>
+          <form className="SettingEntryContent">
+            <div style={{ display: 'flex', alignItems: 'center' }}>
+              <label
+                className={classNames({
+                  Active: settingAutoShowHide,
+                  Dark: isDark,
+                })}
+              >
+                <input
+                  type="radio"
+                  checked={settingAutoShowHide}
+                  onChange={() => setSettingAutoShowHide(true)}
+                  name="radio"
+                />
+                <FaCheck className="SettingEntryOptionIcon" />
+                Yes
+              </label>
+              <label
+                className={classNames({
+                  Active: !settingAutoShowHide,
+                  Dark: isDark,
+                })}
+              >
+                <input
+                  type="radio"
+                  checked={!settingAutoShowHide}
+                  onChange={() => setSettingAutoShowHide(false)}
+                  name="radio"
+                />
+                <FaTimes className="SettingEntryOptionIcon" />
+                No
+              </label>
+            </div>
+          </form>
+        </div>
+
         {divider}
         {/* DARK THEME */}
         <div className="SettingEntryContainer">

src/pages/Sidebar/containers/Title/Title.jsx

@@ -23,6 +23,7 @@ class Title extends Component {
     settingSidebarLocation: 'left',
     settingSidebarShouldShrinkBody: true,
     settingDisplayTabTitleInFull: true,
+    settingAutoShowHide: false,
     settingDarkMode: 'auto',
   };
 
@@ -54,6 +55,14 @@ class Title extends Component {
       }
     });
 
+    chrome.storage.sync.get(['autoShowHide'], (result) => {
+      if (result.autoShowHide !== undefined) {
+        this.setState({
+          settingAutoShowHide: result.autoShowHide === true,
+        });
+      }
+    });
+
     chrome.storage.sync.get(['darkMode'], (result) => {
       if (result.darkMode !== undefined) {
         this.setState({
@@ -89,6 +98,12 @@ class Title extends Component {
       ) {
         const { toStatus } = request;
         this.setState({ settingSidebarShouldShrinkBody: toStatus === true });
+      } else if (
+        request.from === 'background' &&
+        request.msg === 'UPDATE_AUTO_SHOW_HIDE_STATUS'
+      ) {
+        const { toStatus } = request;
+        this.setState({ settingAutoShowHide: toStatus === true });
       } else if (
         request.from === 'background' &&
         request.msg === 'UPDATE_DARK_MODE_STATUS'
@@ -146,6 +161,19 @@ class Title extends Component {
     });
   };
 
+  setSettingAutoHideShow = (toStatus) => {
+    if (toStatus === this.state.settingAutoShowHide) {
+      return;
+    }
+
+    this.setState({ settingAutoShowHide: toStatus });
+    chrome.runtime.sendMessage({
+      from: 'settings',
+      msg: 'USER_CHANGE_AUTO_SHOW_HIDE',
+      toStatus,
+    });
+  };
+
   static contextType = DarkModeContext;
 
   setSettingDarkMode = (toStatus) => {
@@ -174,6 +202,7 @@ class Title extends Component {
       settingSidebarLocation,
       settingSidebarShouldShrinkBody,
       settingDisplayTabTitleInFull,
+      settingAutoShowHide,
       settingDarkMode,
     } = this.state;
 
@@ -231,6 +260,8 @@ class Title extends Component {
                       setSettingDisplayTabTitleInFull={
                         this.setSettingDisplayTabTitleInFull
                       }
+                      settingAutoShowHide={settingAutoShowHide}
+                      setSettingAutoShowHide={this.setSettingAutoHideShow}
                       settingDarkMode={settingDarkMode}
                       setSettingDarkMode={this.setSettingDarkMode}
                     />