Merge pull request #15 from RyoNkmr/i14-ryonkmr-fix_plaeholder

#14 Fix placeholder
RyoNkmr · Jun 26, 2018 · 760fe23 · 760fe23
2 parents 98032d3 + 31e6121
commit 760fe23
Show file tree

Hide file tree

Showing 9 changed files with 143 additions and 67 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -115,7 +115,7 @@ <h3 id="Options-marginTop" class="option">
             <h3 id="Options-wrapper" class="option">
               wrapper
               <span class="option__type">HTMLElement</span>
-              <span class="option__default">document.body</span>
+              <span class="option__default">parentElement|document.body</span>
             </h3>
             <p>Ipsum laboriosam odio minus sunt officiis. Veniam sed saepe inventore labore ratione adipisci Sed unde sapiente porro accusamus quo Dolorem deserunt veniam ducimus neque velit. Esse saepe deserunt ipsam similique</p>
             <p>Ipsum laboriosam odio minus sunt officiis. Veniam sed saepe inventore labore ratione adipisci Sed unde sapiente porro accusamus quo Dolorem deserunt veniam ducimus neque velit. Esse saepe deserunt ipsam similique</p>

diff --git a/docs/index.js b/docs/index.js
diff --git a/docs/initially-hidden.html b/docs/initially-hidden.html
@@ -31,9 +31,11 @@
         display: block;
       }
       footer {
+        width: 100%;
+        height: 100px;
         margin: 0;
         padding: 0;
-        width: 100%;
+        background-color: #aaf;
       }
     </style>
   </head>

diff --git a/docs/placeholding.html b/docs/placeholding.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="">
+    <title></title>
+    <style>
+      html, body {
+        margin: 0;
+        padding: 0;
+      }
+      #container {
+        display: flex;
+      }
+      .box {
+        width: 300px;
+        height: 250px;
+        background-color: #33a;
+      }
+      .box:nth-child(n+2) {
+        margin-top: 30px;
+      }
+      .box.box--large {
+        height: 400px;
+        background-color: #a3a;
+      }
+      main {
+        flex: 1;
+        background-color: #bbf;
+      }
+      footer {
+        width: 100%;
+        height: 100px;
+        margin: 0;
+        padding: 0;
+        background-color: #aaf;
+      }
+    </style>
+  </head>
+  <body>
+    <section id="container">
+      <main>
+        <p>main contents</p>
+      </main>
+      <aside>
+        <div id="js-box00" class="box js-box" style="z-index: 3">BOX0</div>
+        <div id="js-box01" class="box js-box" style="z-index: 2">BOX1</div>
+        <div id="js-box02" class="box box--large" style="z-index: 1">BOX02</div>
+      </aside>
+    </section>
+    <footer>
+      footer
+    </footer>
+    <script src="./index.js"></script>
+    <script>
+      const { Stuck } = StuckJs;
+      const stuck = new Stuck([
+        { selector: '#js-box00' },
+        { selector: '#js-box01', placehold: false },
+        { selector: '#js-box02' },
+      ], { wrapper: '#container'});
+    </script>
+  </body>
+</html>
diff --git a/lib/index.js b/lib/index.js
diff --git a/lib/index.js.gz b/lib/index.js.gz
diff --git a/src/placeholder.js b/src/placeholder.js
@@ -33,7 +33,7 @@ export default class Placeholder {
     this.original = element;
     this.storeInitialComputedStyles();
     this.element = Placeholder.createPlaceholder();
-    this.applySpacingInitialStyles();
+    this.applyInitialStyles();
     this.cachedRect = this.element && this.updateRect();
     this.shouldPlacehold = placehold;
 
@@ -59,13 +59,15 @@ export default class Placeholder {
     }
   }
 
-  applySpacingInitialStyles(): void {
+  applyInitialStyles(): void {
     if (!this.initialComputedStyles) {
       return;
     }
     this.element.style.margin = this.initialComputedStyles.margin;
     this.element.style.minWidth = this.initialComputedStyles.minWidth;
     this.element.style.minHeight = this.initialComputedStyles.minHeight;
+    this.element.style.width = this.initialComputedStyles.width;
+    this.element.style.height = this.initialComputedStyles.height;
   }
 
   destroy(): void {
@@ -114,20 +116,8 @@ export default class Placeholder {
     this.updateRect();
   }
 
-  removeStyles(): void {
-    if (!this.original || !this.element) {
-      return;
-    }
-    this.element.style.width = '';
-    this.element.style.height = '';
-  }
-
   update(forceUpdate: boolean = false): void {
-    if (this.shouldPlacehold) {
-      this.applyStyles(forceUpdate);
-    } else {
-      this.removeStyles();
-    }
+    this.applyStyles(forceUpdate);
     this.onUpdate();
   }
 

diff --git a/src/sticky.js b/src/sticky.js
@@ -1,11 +1,14 @@
 /* @flow */
 import Placeholder from './placeholder';
 
+type MaybeHTMLElement = HTMLElement|Element|null|void;
+type SelectorOrElement = string|HTMLElement;
+
 export type StickyOptions = {
   marginTop?: number,
-  wrapper?: HTMLElement|string,
-  placehold?: boolean,
-  observe?: boolean,
+  wrapper?: SelectorOrElement,
+  placehold: boolean,
+  observe: boolean,
 };
 
 export default class Sticky {
@@ -56,18 +59,19 @@ export default class Sticky {
     return this.$$wrapper;
   }
 
-  set wrapper(value: HTMLElement|string): void {
-    if (document.body === null) {
-      throw new Error('[Stuck.js] document.body is not HTMLElement in this environment');
+  set wrapper(value: SelectorOrElement): void {
+    if (!(document.body instanceof HTMLElement)) {
+      throw new TypeError('[Stuck.js] document.body is not HTMLElement in this environment');
     }
-    this.$$wrapper = Sticky.normalizeElement(value, document.body);
+    const parent = ((this.placeholder && this.placeholder.element) || this.element).parentElement;
+    this.$$wrapper = Sticky.normalizeElement(value, parent, document.body);
     this.floor = Sticky.computeAbsoluteFloor(this.$$wrapper);
     this.options.wrapper = this.$$wrapper;
   }
 
   constructor(
     element: HTMLElement,
-    options: StickyOptions = {},
+    options: StickyOptions = { placehold: true, observe: true },
     activate: boolean = true,
     onUpdate: () => mixed = () => {},
   ) {
@@ -97,7 +101,7 @@ export default class Sticky {
       Sticky.activate();
     }
 
-    this.placeholder.shouldPlacehold = this.isSticky;
+    this.placeholder.shouldPlacehold = this.options.placehold && this.isSticky;
   }
 
   static computeAbsoluteFloor(target: HTMLElement): number {
@@ -107,11 +111,19 @@ export default class Sticky {
     return absoluteBottom - paddingBottomPixels;
   }
 
-  static normalizeElement(value: string|HTMLElement, fallback: HTMLElement): HTMLElement {
+  static normalizeElement(value: SelectorOrElement, ...fallbacks: MaybeHTMLElement[]): HTMLElement {
     if (value instanceof HTMLElement) {
       return value;
     }
-    return document.querySelector(value) || fallback;
+
+    const element: ?HTMLElement = ([document.querySelector(value), ...fallbacks]
+      .find(item => !!item && item instanceof HTMLElement): any);
+
+    if (element instanceof HTMLElement) {
+      return element;
+    }
+
+    throw new TypeError('[Stuck-js] Could not find HTMLElement');
   }
 
   static register(instance: Sticky): void {

diff --git a/src/stuck.js b/src/stuck.js
@@ -15,7 +15,7 @@ export default class Stuck {
 
   constructor(
     settings: StickySetting[] | StickySetting = [],
-    defaultOptions: StickyOptions = {},
+    defaultOptions: StickyOptions = { placehold: true, observe: true },
     sharedStacking: boolean = true,
   ) {
     this.defaultOptions = defaultOptions;