ONEUP-7762: Fix resize behavior (#38)

* ONEUP-7762: Add IntelliJ files to .gitignore * ONEUP-7762: Add development server * ONEUP-7762: Clean up playground page * ONEUP-7762: Only re-calculate on resize event when page size was changed * ONEUP-7762: Fix resizing behavior and simplify code * ONEUP-7762: Use better variable name * ONEUP-7762: Migrate from CircleCI to GitHub Actions * ONEUP-7762: Fix linting issues * ONEUP-7762: Change organization name * Release 1.1.1
spring-media · Jan 2, 2024 · bfb68e9 · bfb68e9
1 parent 51cc774
commit bfb68e9
Show file tree

Hide file tree

Showing 10 changed files with 400 additions and 119 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -0,0 +1,27 @@
+name: Sticky Observer
+
+on: [push, pull_request]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 10.x
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Test
+        run: yarn test
+
+      - name: Build
+        run: yarn build
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,9 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 
+# IntelliJ
+*.iml
+/.idea
+
 # dependencies
 /node_modules
 

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # sticky-observer [![CircleCI](https://circleci.com/gh/spring-media/sticky-observer.svg?style=svg)](https://circleci.com/gh/spring-media/sticky-observer)
 
-[![npm](https://img.shields.io/npm/v/@welt/sticky-observer.svg)](https://www.npmjs.com/package/@welt/sticky-observer)
+[![npm](https://img.shields.io/npm/v/@weltn24/sticky-observer.svg)](https://www.npmjs.com/package/@weltn24/sticky-observer)
 [![codecov](https://codecov.io/gh/spring-media/sticky-observer/branch/master/graph/badge.svg)](https://codecov.io/gh/spring-media/sticky-observer)
 [![dep](https://david-dm.org/spring-media/sticky-observer/dev-status.svg)](https://david-dm.org/spring-media/sticky-observer?type=dev)
 [![GitHub license](https://img.shields.io/github/license/spring-media/sticky-observer.svg)](https://github.com/spring-media/sticky-observer/blob/master/LICENSE)
@@ -32,9 +32,9 @@ This library is in production on [welt.de](https://www.welt.de) for a few main f
 
 ```bash
 # via NPM
-npm install @welt/sticky-observer
+npm install @weltn24/sticky-observer
 # via yarn
-yarn add @welt/sticky-observer
+yarn add @weltn24/sticky-observer
 ```
 
 ## Usage example
@@ -44,7 +44,7 @@ yarn add @welt/sticky-observer
 ```
 
 ```js
-import { StickyObserver } from '@welt/sticky-observer';
+import { StickyObserver } from '@weltn24/sticky-observer';
 
 const stickyContainer = document.querySelector('.container');
 const stickyElement = document.querySelector('.sticky-element');

diff --git a/demo/index.html b/demo/index.html
@@ -1,60 +1,78 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sticky-Observer Playground</title>
+    <script src="../dist/sticky-observer.js"></script>
 
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Document</title>
-  <script src="../dist/sticky-observer.js"></script>
-
-  <style>
-    .sticky-element {
-      color: red;
-    }
-
-    .sticky-element--is-sticky {
-      position: fixed;
-      color: green;
-    }
-
-  </style>
-</head>
-
-<body>
-
-  <div class="container" style="height: 5000px;">
-    <div class="sticky-element" data-sticky-class="sticky-element--is-sticky">example</div>
-  </div>
-
-
-  <script>
-    var stickyContainer = document.querySelector('.container');
-    var stickyElement = document.querySelector('.sticky-element');
-    var stickyObserver = new sticky.StickyObserver([stickyElement], stickyContainer);
-
-    stickyObserver.init();
-
-    stickyObserver.onStateChange(function (event) {
-      switch (event.nextState) {
-        case sticky.StickyState.STICKY:
-          console.log('STICKY');
-          event.element.sticky.addStickyClass();
-          break;
-        case sticky.StickyState.NORMAL:
-          console.log('NORMAL');
-          event.element.sticky.removeStickyClass();
-          break;
-        default:
-          // ignore
-          break;
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font-family: sans-serif;
+        font-size: 5rem;
       }
-    });
 
-    stickyObserver.observe();
+      .sticky-element {
+        color: red;
+      }
+
+      .sticky-element--is-sticky {
+        position: fixed;
+        top: 0;
+        color: white;
+      }
+
+      .sticky-element__placeholder {
+        height: 500px !important;
+        background: red;
+      }
+    </style>
+  </head>
+
+  <body>
+    <header style="height: 100px; background: lightblue">Header</header>
+    <div class="container" style="height: 500px;">
+      <div
+        class="sticky-element"
+        data-sticky-class="sticky-element--is-sticky"
+        data-sticky-placeholder-class="sticky-element__placeholder"
+      >
+        Element
+      </div>
+    </div>
+    <footer style="height: 1000px;background: lightblue">Footer</footer>
+
+    <script>
+      var stickyContainer = document.querySelector('.container');
+      var stickyElement = document.querySelector('.sticky-element');
+      var stickyObserver = new sticky.StickyObserver([stickyElement], stickyContainer);
 
-  </script>
+      stickyObserver.init();
 
-</body>
+      stickyObserver.onStateChange(function(event) {
+        switch (event.nextState) {
+          case sticky.StickyState.STICKY:
+            event.element.sticky.addPlaceholder();
+            event.element.sticky.addStickyClass();
+            break;
+          case sticky.StickyState.NORMAL:
+            event.element.sticky.removePlaceholder();
+            event.element.sticky.removeStickyClass();
+            break;
+          case sticky.StickyState.STICKY_END_OF_CONTAINER:
+            event.element.sticky.removePlaceholder();
+            event.element.sticky.removeStickyClass();
+            break;
+          default:
+            // ignore
+            break;
+        }
+      });
 
+      stickyObserver.observe();
+    </script>
+  </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "@welt/sticky-observer",
+  "name": "@weltn24/videoplayer",
   "description": "A simple and basic sticky observer (or watcher) on HTMLElement's in a given container",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "main": "dist/sticky-observer.cjs.js",
   "module": "dist/sticky-observer.esm.js",
   "browser": "dist/sticky-observer.js",
@@ -26,7 +26,8 @@
   "license": "MIT",
   "scripts": {
     "build": "rollup -c",
-    "dev": "rollup -c -w",
+    "dev": "rollup -c -w & yarn dev:server",
+    "dev:server": "http-server -o ./demo/index.html",
     "lint": "tslint --project tsconfig.json",
     "test": "karma start karma.conf.js",
     "beforestart": "yarn lint && yarn test && yarn build",
@@ -40,6 +41,7 @@
     "@types/sinon": "7.0.13",
     "@types/sinon-chai": "3.2.3",
     "chai": "4.2.0",
+    "http-server": "13.1.0",
     "husky": "3.0.4",
     "karma": "4.3.0",
     "karma-chrome-launcher": "3.1.0",

diff --git a/src/StickyObserver.test.ts b/src/StickyObserver.test.ts
@@ -1,5 +1,6 @@
 import { expect } from 'chai';
 import sinon from 'sinon';
+import * as Helper from './helper';
 import { Sticky, StickyObserver } from './StickyObserver';
 import {
   scrollTo,
@@ -33,9 +34,16 @@ describe('Sticky Observer', (): void => {
   let stickyTestContext: StickyTestContext;
   let updateScrollPositionSpy: sinon.SinonSpy;
   let windowAddEventListenerSpy: sinon.SinonSpy;
+  let getPageSizeStub: sinon.SinonStub;
 
   beforeEach((): void => {
     stickyTestContext = new StickyTestContext(fixture);
+    getPageSizeStub = sinon.stub(Helper, 'getPageSize');
+    getPageSizeStub.returns({
+      width: 100,
+      height: 100,
+      equals: (): boolean => false
+    });
   });
 
   afterEach((): void => {
@@ -140,6 +148,12 @@ describe('Sticky Observer', (): void => {
       sticky.onResizeChange(resizeSpy);
       sticky.observe();
 
+      getPageSizeStub.returns({
+        width: 200,
+        height: 200,
+        equals: (): boolean => false
+      });
+
       return triggerResizeEvent().then((): void => {
         expect(resizeSpy).to.have.been.called;
       });