IMPR: Sidebar

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`);
+        }
+
       });
     }
 

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;
+}

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,