refactor: move popper to layout namespace #190 #189

source/components/navigation/table-of-content.mjs

@@ -196,34 +196,10 @@ function calcAndSetNavigationTopWindowContext() {
  * @private
  */
 function calcAndSetNavigationTopScrollableParentContext() {
-    console.log('calcAndSetNavigationTopScrollableParentContext');
-
-    // const parentTop = this[scrollableParentSymbol].getBoundingClientRect().top;
-    // const parentBottom = this[scrollableParentSymbol].getBoundingClientRect().bottom;
-    //
-
     const thisRect = this.getBoundingClientRect();
     const thisTop = thisRect.top;
     const thisBottom = thisRect.bottom;
-    // const thisHeight = thisBottom - thisTop;
     const scrollTop = this[scrollableParentSymbol].scrollTop;
-    // const scrollHeight = this[scrollableParentSymbol].scrollHeight;
-    // const diff =  thisHeight- parentTop-scrollTop 
-    // console.log(parentTop, parentBottom, thisBottom,diff,scrollTop);
-    //
-    //
-    //
-    //
-    // // if (thisTop > 0) {
-    // //     this[navigationElementSymbol].style.top = "0px";
-    // //     return;
-    // // }
-    //
-    // //const topViewport = this[scrollableParentSymbol].scrollTop;
-    //
-    // //console.log('thisTop', thisTop,topViewport);
-    //
-    // let top =   parentTop;//- topViewport;
     let top = thisTop + scrollTop;
 
     if (thisBottom < top) {
@@ -232,9 +208,6 @@ function calcAndSetNavigationTopScrollableParentContext() {
     } else {
         this[navigationElementSymbol].style.visibility = "visible";
     }
-
-    console.log('top', top, "bottom", thisBottom, "scrolltop", scrollTop);
-
     const offset = this.getOption('offset');
     if (offset > 0) {
         top += offset;
@@ -250,7 +223,6 @@ function initNavigation() {
 
     const headings = getHeadings.call(this);
 
-
     for (const heading of headings) {
         const div = document.createElement('div');
         div.classList.add('heading-strip');
@@ -395,6 +367,7 @@ function getTemplate() {
     return `
         <div data-monster-role="control" part="control">
             <div class="navigation" data-monster-role="navigation"></div>
+            <monster-popper>sdfsdfsdf</monster-popper>
             <slot></slot>
         </div>`;
 }

source/monster.mjs

@@ -21,6 +21,7 @@
 export * from "./components/layout/collapse.mjs";
 export * from "./components/layout/tabs.mjs";
 export * from "./components/layout/split-panel.mjs";
+export * from "./components/layout/popper.mjs";
 export * from "./components/layout/width-toggle.mjs";
 export * from "./components/layout/panel.mjs";
 export * from "./components/layout/details.mjs";
@@ -87,6 +88,7 @@ export * from "./components/datatable/constants.mjs";
 export * from "./components/state/log/entry.mjs";
 export * from "./components/state/state.mjs";
 export * from "./components/state/log.mjs";
+export * from "./components/navigation/table-of-content.mjs";
 export * from "./components/constants.mjs";
 export * from "./components/constants.mjs";
 export * from "./text/formatter.mjs";