Merge branch 'master' of github.com:RyoNkmr/stuck-js

RyoNkmr · Jun 25, 2018 · 49da6a8 · 49da6a8
2 parents 93c291a + 72b3e10
commit 49da6a8
Show file tree

Hide file tree

Showing 16 changed files with 3,521 additions and 124 deletions.
diff --git a/.npmignore b/.npmignore
@@ -10,3 +10,5 @@ node_modules
 specs
 webpack.config.*.js
 .vscode
+coverage
+.nyc_output
diff --git a/docs/fullwidth.html b/docs/fullwidth.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="">
+    <title></title>
+    <style>
+      html, body {
+        margin: 0;
+        padding: 0;
+      }
+      header {
+        width: 100%;
+        height: 40px;
+        background-color: #33a;
+      }
+      main {
+        height: 3000px;
+        background-image: linear-gradient(#28f, #038);
+      }
+    </style>
+  </head>
+  <body>
+    <header>header</header>
+    <main>main</main>
+    <script src="./index.js"></script>
+    <script>
+      const { Sticky } = StuckJs;
+      const element = document.querySelector('header');
+      const sticky = new Sticky(element);
+    </script>
+  </body>
+</html>
diff --git a/docs/index.js b/docs/index.js
diff --git a/docs/initially-hidden.html b/docs/initially-hidden.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="">
+    <title></title>
+    <style>
+      html, body {
+        margin: 0;
+        padding: 0;
+      }
+      #container {
+        height: 3000px;
+      }
+      .box {
+        width: 300px;
+        height: 250px;
+        background-color: #33a;
+      }
+      .box:nth-child(n+2) {
+        margin-top: 30px;
+      }
+      .box.box--large {
+        height: 400px;
+        background-color: #a3a;
+      }
+      .box.box--initially-hidden {
+        display: none;
+        margin-top: 0;
+      }
+      .box.box--initially-hidden[data-stuck='true'] {
+        display: block;
+      }
+      footer {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="js-box00" class="box js-box" style="z-index: 3">box00</div>
+      <div id="js-box01" class="box box--large" style="z-index: 2">box01</div>
+      <div id="js-box02" class="box box--initially-hidden" style="z-index: 1">box02</div>
+      <div id="js-box03" class="box js-box" style="z-index: 0">box03</div>
+    </div>
+    <footer>
+      footer
+    </footer>
+    <script src="./index.js"></script>
+    <script>
+      const { Stuck } = StuckJs;
+      const stuck = new Stuck([
+        { selector: '#js-box00' },
+        { selector: '#js-box02', placehold: false },
+        { selector: '#js-box03' },
+      ]);
+    </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/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,12 +4,13 @@
   "description": "A sticky library handles stack of stickies and supports scrollX without dependencies(like jQuery)",
   "main": "./lib/index.js",
   "scripts": {
-    "dev": "NODE_ENV=development webpack --config ./webpack.config.development.js --progress --colors --watch",
-    "build": "NODE_ENV=production webpack --config ./webpack.config.production.js --progress",
-    "build:watch": "NODE_ENV=production webpack --config ./webpack.config.production.js --progress --watch",
+    "start": "npm run watch",
+    "watch": "NODE_ENV=production webpack --config ./webpack.config.js --progress --colors --watch",
+    "build": "NODE_ENV=production webpack --config ./webpack.config.js --progress",
     "flow": "flow",
     "test": "jest",
-    "test:watch": "jest --watch"
+    "test:watch": "jest --watch",
+    "prepush": "npm test"
   },
   "author": "Ryonkmr",
   "keywords": [
@@ -51,6 +52,7 @@
     "eslint-plugin-import": "^2.11.0",
     "flow-babel-webpack-plugin": "^1.1.1",
     "flow-bin": "^0.70.0",
+    "husky": "^0.14.3",
     "jest": "^22.4.3",
     "jest-puppeteer": "^3.0.1",
     "puppeteer": "^1.3.0",

diff --git a/specs/puppeteerHelper.js b/specs/puppeteerHelper.js
@@ -1,18 +1,22 @@
-export const scrollTo = async (
-  scrollLeft = 0, 
-  scrollTop = 0, 
-  moveLeft = 32,
-  moveTop = moveLeft,
-) => {
+export const scrollTo = async (scrollLeft = 0, scrollTop = 0) => {
   await page.evaluate((left, top) => { window.scroll(left, top); }, scrollLeft, scrollTop);
   await page.waitFor(60);
 };
 
-export const getRect = (...selectors) => (
+export const getRects = (...selectors) => (
   page.evaluate(targetSelectors => (
     targetSelectors
       .reduce((acc, selector) => acc.concat(Array.from(document.querySelectorAll(selector))), [])
       .map(el => el.getBoundingClientRect())
-      .map(({ top, left }) => ({ top, left }))
+      .map(({ top, left, width, height }) => ({ top, left, width, height }))
+  ), selectors)
+);
+
+export const getParentRects = (...selectors) => (
+  page.evaluate(targetSelectors => (
+    targetSelectors
+      .reduce((acc, selector) => acc.concat(Array.from(document.querySelectorAll(selector))), [])
+      .map(el => el.parentNode.getBoundingClientRect())
+      .map(({ top, left, width, height }) => ({ top, left, width, height }))
   ), selectors)
 );
diff --git a/specs/sticky.spec.js b/specs/sticky.spec.js
@@ -1,13 +1,12 @@
-import { scrollTo, getRect } from './puppeteerHelper';
+import { scrollTo, getRects, getParentRects } from './puppeteerHelper';
 
 describe('Sticky', () => {
   const containerWidth = 2000;
   const containerHeight = 3000;
   const target = '#js-box01';
-  let viewport;
+  const viewport = { width: 800, height: 600 };
 
   beforeEach(async () => {
-    viewport = await page.viewport();
     await page.setContent(`
       <div id="container">
         <div id="js-box00" class="box">box00</div>
@@ -32,6 +31,9 @@ describe('Sticky', () => {
         height: 300px;
         background-color: #33a;
       }
+      .fullwidth {
+        width: 100%;
+      }
       .box--large {
         height: 600px;
         background-color: #a3a;
@@ -52,12 +54,13 @@ describe('Sticky', () => {
 
   afterEach(async () => {
     await scrollTo(0, 0);
+    await page.setViewport(viewport);
     await page.reload();
   });
 
   it('preserves left position of sticky', async () => {
     await scrollTo(100, viewport.height);
-    const [{ top, left }] = await getRect(target);
+    const [{ top, left }] = await getRects(target);
     expect(top).toBe(0);
     expect(left).toBe(-100);
   });
@@ -80,10 +83,58 @@ describe('Sticky', () => {
     });
   });
 
+  describe('placeholder', () => {
+    beforeEach(async () => {
+      await page.reload();
+      await page.setContent(`
+        <header>header</header>
+        <main></main>
+      `);
+      await page.addStyleTag({
+        content: `
+          html, body {
+            margin: 0;
+            padding: 0;
+          }
+          main {
+            display: block;
+            height: 3000px;
+          }
+          header {
+            width: 100%;
+            height: 80px;
+            background-color: #a3a;
+          }
+        `,
+      });
+      await page.addScriptTag({ path: 'lib/index.js' });
+    }, 10000);
+
+    it('update sticky and placeholder size on resize', async () => {
+      await page.evaluate(() => {
+        const { Sticky } = StuckJs;
+        const element = document.querySelector('header');
+        const sticky = new Sticky(element);
+      });
+      await scrollTo(0, 1000);
+      const viewportWidth = page.viewport().width;
+      const [stickyRect] = await getRects('header');
+      const [placeholderRect] = await getParentRects('header');
+      expect(viewportWidth).toBe(800);
+      expect(stickyRect.width).toBe(800);
+      expect(placeholderRect.width).toBe(800);
+
+      await page.setViewport({ ...viewport, width: 400 });
+      const [stickyRectAfterResized] = await getRects('header');
+      const [placeholderRectAfterResized] = await getParentRects('header');
+      expect(stickyRectAfterResized.width).toBe(400);
+      expect(placeholderRectAfterResized.width).toBe(400);
+    });
+  });
+
   describe('position sticking inside the wrapper', () => {
     beforeEach(async () => {
       await page.reload();
-      viewport = await page.viewport();
       await page.setContent(`
         <div id="container">
           <div id="sidebar">
@@ -139,7 +190,7 @@ describe('Sticky', () => {
         const sticky = new Sticky(element, { wrapper: '#sidebar' });
       });
       await scrollTo(0, 2400);
-      const [rect] = await getRect('#js-box01');
+      const [rect] = await getRects('#js-box01');
       expect(rect.top).toBe(-400);
     });
 
@@ -155,7 +206,7 @@ describe('Sticky', () => {
         element.style.height = '3600px';
       });
       await scrollTo(0, 3400);
-      const [rect] = await getRect('#js-box01');
+      const [rect] = await getRects('#js-box01');
       expect(rect.top).toBe(-400);
     });
   });

diff --git a/specs/stuck.spec.js b/specs/stuck.spec.js
@@ -1,4 +1,4 @@
-import { scrollTo, getRect } from './puppeteerHelper';
+import { scrollTo, getRects } from './puppeteerHelper';
 
 describe('Stuck', () => {
   const containerHeight = 3000;
@@ -68,7 +68,7 @@ describe('Stuck', () => {
         ]);
       });
       await scrollTo(0, viewport.height);
-      const rects = await getRect('#js-box00', '#js-box01', '#js-box03');
+      const rects = await getRects('#js-box00', '#js-box01', '#js-box03');
       const result = rects.map(el => el.top);
       expect(result).toEqual([0, 250, 650]);
     });
@@ -83,7 +83,7 @@ describe('Stuck', () => {
         ], { marginTop: 10 });
       });
       await scrollTo(0, viewport.height);
-      const rects = await getRect('#js-box00', '#js-box01', '#js-box03');
+      const rects = await getRects('#js-box00', '#js-box01', '#js-box03');
       const result = rects.map(el => el.top);
       expect(result).toEqual([20, 280, 780]);
     });
@@ -97,10 +97,14 @@ describe('Stuck', () => {
           { selector: '#js-box03' },
         ]);
       });
+      const rectsBeforeScroll = await getRects('#js-box00', '#js-box02', '#js-box03')
+        .then(rects => rects.map(el => el.top));
+      expect(rectsBeforeScroll).toEqual([0, 0, 710]);
+
       await scrollTo(0, viewport.height);
-      const rects = await getRect('#js-box00', '#js-box02', '#js-box03');
-      const result = rects.map(el => el.top);
-      expect(result).toEqual([0, 250, 500]);
+      const rectsAfterScroll = await getRects('#js-box00', '#js-box02', '#js-box03')
+        .then(rects => rects.map(el => el.top));
+      expect(rectsAfterScroll).toEqual([0, 250, 500]);
     })
   });