From ec29a040897e55337eb1c30dee32e612c06cf675 Mon Sep 17 00:00:00 2001
From: Shawn Erquhart <shawn@shawn.works>
Date: Tue, 21 Mar 2017 14:52:33 -0400
Subject: [PATCH] implement initial working sticky rte toolbar

---
 src/components/EntryEditor/EntryEditor.css    |  2 +-
 src/components/EntryEditor/EntryEditor.js     | 32 ++++++++++++++++++-
 src/components/UI/Sticky/Sticky.css           | 10 ++++++
 src/components/Widgets/MarkdownControl.js     |  4 +--
 .../VisualEditor/index.css                    |  2 +-
 5 files changed, 45 insertions(+), 5 deletions(-)
 create mode 100644 src/components/UI/Sticky/Sticky.css

diff --git a/src/components/EntryEditor/EntryEditor.css b/src/components/EntryEditor/EntryEditor.css
index 918c20ba..ae5c4c72 100644
--- a/src/components/EntryEditor/EntryEditor.css
+++ b/src/components/EntryEditor/EntryEditor.css
@@ -17,7 +17,7 @@
   overflow: auto;
   padding: 20px 20px 0;
   border-right: 1px solid var(--defaultColorLight);
-  background-color: color(#f2f5f4 lightness(90%));
+  background-color: var(--backgroundTertiaryColorDark);
 }
 
 .previewPane {
diff --git a/src/components/EntryEditor/EntryEditor.js b/src/components/EntryEditor/EntryEditor.js
index f911698a..01fc0198 100644
--- a/src/components/EntryEditor/EntryEditor.js
+++ b/src/components/EntryEditor/EntryEditor.js
@@ -7,6 +7,7 @@ import ControlPane from '../ControlPanel/ControlPane';
 import PreviewPane from '../PreviewPane/PreviewPane';
 import Toolbar from './EntryEditorToolbar';
 import styles from './EntryEditor.css';
+import stickyStyles from '../UI/Sticky/Sticky.css';
 
 const PREVIEW_VISIBLE = 'cms.preview-visible';
 
@@ -35,6 +36,35 @@ class EntryEditor extends Component {
     localStorage.setItem(PREVIEW_VISIBLE, newPreviewVisible);
   };
 
+  setSticky = (contextTop, containerRect, sticky) => {
+    if (contextTop >= containerRect.top) {
+      if (contextTop < containerRect.bottom - 60) {
+        sticky.classList.add(stickyStyles.top);
+        sticky.classList.remove(stickyStyles.bottom);
+      } else if (contextTop >= containerRect.bottom - 60) {
+        sticky.classList.remove(stickyStyles.top);
+        sticky.classList.add(stickyStyles.bottom);
+      }
+    } else {
+      sticky.classList.remove(stickyStyles.top);
+      sticky.classList.remove(stickyStyles.bottom);
+    }
+  };
+
+  handleControlPaneRef = (ref) => {
+    const sticky = ref.querySelector('.cms__index__editorControlBar');
+    const stickyContainer = ref.querySelector('.stickyContainer');
+    stickyContainer.style.paddingTop = `${ sticky.offsetHeight }px`;
+    sticky.style.position = 'absolute';
+    sticky.style.top = `${ -sticky.offsetHeight }px`;
+    sticky.style.width = `${ stickyContainer.getBoundingClientRect().width }px`;
+
+    ref && ref.addEventListener('scroll', (e) => {
+      const contextTop = e.target.getBoundingClientRect().top;
+      this.setSticky(contextTop, stickyContainer.getBoundingClientRect(), sticky);
+    });
+  };
+
   render() {
     const {
         collection,
@@ -60,7 +90,7 @@ class EntryEditor extends Component {
     );
 
     const editor = (
-      <div className={controlClassName}>
+      <div className={controlClassName} ref={this.handleControlPaneRef}>
         { collectionPreviewEnabled ? togglePreviewButton : null }
         <ControlPane
           collection={collection}
diff --git a/src/components/UI/Sticky/Sticky.css b/src/components/UI/Sticky/Sticky.css
new file mode 100644
index 00000000..7f6b8378
--- /dev/null
+++ b/src/components/UI/Sticky/Sticky.css
@@ -0,0 +1,10 @@
+.top {
+  position: fixed !important;
+  top: 64px !important;
+}
+
+.bottom {
+  top: auto !important;
+  bottom: 30px !important;
+}
+
diff --git a/src/components/Widgets/MarkdownControl.js b/src/components/Widgets/MarkdownControl.js
index 820c4c5d..4f829e0d 100644
--- a/src/components/Widgets/MarkdownControl.js
+++ b/src/components/Widgets/MarkdownControl.js
@@ -34,7 +34,7 @@ export default class MarkdownControl extends React.Component {
     const { mode } = this.state;
     if (mode === 'visual') {
       return (
-        <div className="cms-editor-visual">
+        <div className="cms-editor-visual stickyContainer">
           <VisualEditor
             onChange={onChange}
             onAddAsset={onAddAsset}
@@ -48,7 +48,7 @@ export default class MarkdownControl extends React.Component {
     }
 
     return (
-      <div className="cms-editor-raw">
+      <div className="cms-editor-raw stickyContainer">
         <RawEditor
           onChange={onChange}
           onAddAsset={onAddAsset}
diff --git a/src/components/Widgets/MarkdownControlElements/VisualEditor/index.css b/src/components/Widgets/MarkdownControlElements/VisualEditor/index.css
index c4e5636a..42f610b6 100644
--- a/src/components/Widgets/MarkdownControlElements/VisualEditor/index.css
+++ b/src/components/Widgets/MarkdownControlElements/VisualEditor/index.css
@@ -2,7 +2,7 @@
 
 .editorControlBar {
   background-color: var(--controlBGColor);
-  margin-bottom: 1px;
+  border-bottom: 1px solid var(--backgroundTertiaryColorDark);
   border-radius: var(--borderRadius) var(--borderRadius) 0 0;
 }