From e65f349637955df236f5a054d888cc421de4579e Mon Sep 17 00:00:00 2001
From: Tony Air <tony@thewebdevelopmentagency.com>
Date: Thu, 30 Jul 2020 17:57:28 +0700
Subject: [PATCH] IMPR: Sidebar

---
 src/js/_components/_ui.sidebar.js  | 44 ++++++++++++++++++++++++++----
 src/scss/_components/_ui.main.scss | 11 ++++++++
 src/scss/types/editor.scss         | 10 +++++--
 3 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/src/js/_components/_ui.sidebar.js b/src/js/_components/_ui.sidebar.js
index 39e65aa..6bbaa3b 100755
--- a/src/js/_components/_ui.sidebar.js
+++ b/src/js/_components/_ui.sidebar.js
@@ -1,14 +1,16 @@
 'use strict';
 
-import StickySidebar from 'sticky-sidebar/src/sticky-sidebar';
+//import StickySidebar from 'sticky-sidebar/src/sticky-sidebar';
 import Events from '../_events';
 
 const SidebarUI = (($) => {
   const D = document;
   const W = window;
-  const $Body = $('html,body');
+  const $Body = $('body');
   const NAME = 'SidebarUI';
   const CLASSNAME = `js${NAME}`;
+  const CONTENTHOLDER = 'content-holder';
+  const INNERWRAPPER = `${CLASSNAME}__inner`;
 
   class SidebarUI {
     static init() {
@@ -20,13 +22,43 @@ const SidebarUI = (($) => {
       }
 
       console.log(`Initializing: ${NAME}`);
+      //const fontSize = parseInt($Body.css('font-size'));
+      const fontSize = 0;
+      const contentElement = $(`.${CONTENTHOLDER}`)[0];
+      console.log(contentElement);
 
-      const sticky = new StickySidebar(`.${CLASSNAME}`, {
-        innerWrapperSelector: `.${CLASSNAME}__inner`,
-      });
+      //$(`.${CLASSNAME}`).wrapInner(`<div class="${INNERWRAPPER}"></div>`);
+      const $el = $(`.${CLASSNAME}`);
+      const $innerWrapper = $(`.${INNERWRAPPER}`);
+
+      /*const sticky = new StickySidebar(`.${CLASSNAME}`, {
+        topSpacing: fontSize,
+        bottomSpacing: fontSize,
+        containerSelector: CONTENTHOLDER,
+        innerWrapperSelector: INNERWRAPPER,
+      });*/
+
+      $el.addClass(`${CLASSNAME}-active`);
 
       $Body.on(`${Events.SCROLL} ${Events.RESIZE}`, (e) => {
-        sticky.updateSticky(e);
+        const contentOffset = parseInt(contentElement.offsetTop) + fontSize;
+        const contentOffsetHeight = parseInt(contentElement.offsetHeight) - fontSize;
+        const sidebarWidth = $el[0].offsetWidth;
+
+
+        const scrollPos = parseInt($Body.scrollTop());
+
+        // normal pos
+        if(contentOffset >= scrollPos){
+          $innerWrapper.attr('style', '');
+        }else if(scrollPos >= (contentOffset + contentOffsetHeight - $innerWrapper[0].offsetHeight)){
+          // bottom pos
+            $innerWrapper.attr('style', `position:absolute;bottom:${fontSize}px`);
+        }else {
+           // scrolled pos
+          $innerWrapper.attr('style', `position:fixed;top:${fontSize}px;width:${sidebarWidth}px`);
+        }
+
       });
     }
 
diff --git a/src/scss/_components/_ui.main.scss b/src/scss/_components/_ui.main.scss
index 6326968..9e171f0 100755
--- a/src/scss/_components/_ui.main.scss
+++ b/src/scss/_components/_ui.main.scss
@@ -27,6 +27,7 @@ img {
     max-width: 100%;
 }
 
+table,
 p {
     &:first-child {
         margin-top: 0;
@@ -412,3 +413,13 @@ body.is-offline {
         }
     }
 }
+
+.jsSidebarUI {
+    position: relative;
+    min-height: 100%;
+}
+
+.jsSidebarUI__inner {
+    position: relative;
+    will-change: position, top;
+}
diff --git a/src/scss/types/editor.scss b/src/scss/types/editor.scss
index 625799d..04a99a4 100755
--- a/src/scss/types/editor.scss
+++ b/src/scss/types/editor.scss
@@ -85,9 +85,7 @@ table {
     @extend .table;
 
     @extend .table-bordered;
-}
 
-table {
     &.table-none {
         border: 0;
 
@@ -98,6 +96,14 @@ table {
             background: none !important;
         }
     }
+
+    &:first-child {
+        margin-top: 0;
+    }
+
+    &:last-child {
+        margin-bottom: 0;
+    }
 }
 
 ul,