@gnireeg/float-bar 0.1.0

package/README.md

@@ -0,0 +1,124 @@
+# @gnireeg/float-bar
+
+Floating bar web component that automatically hides when scrolling down and reveals when scrolling up.
+
+## Features
+
+- ✨ Smooth animations using requestAnimationFrame
+- 📍 Auto-hide on scroll down, auto-show on scroll up
+- 🎯 Works with both window scroll and container scroll
+- ⚙️ Configurable offset to account for sticky elements
+- 📦 Zero dependencies
+- 🎯 TypeScript support
+- 💨 Lightweight and performant
+
+## Installation
+
+```bash
+npm install @gnireeg/float-bar
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<script type="module">
+  import '@gnireeg/float-bar';
+</script>
+
+<float-bar class="bg-slate-800 text-white px-6 py-4">
+  <nav>Your navigation content</nav>
+</float-bar>
+```
+
+### With Offset
+
+Use the `offset` attribute to account for sticky elements above the float bar:
+
+```html
+<float-bar offset="80" class="bg-white shadow-md">
+  <nav>Your navigation content</nav>
+</float-bar>
+```
+
+### With Offset Element
+
+Automatically use another element's height as offset:
+
+```html
+<header id="top-header" style="height: 60px;">Fixed header</header>
+
+<float-bar offset-element="#top-header" class="bg-white shadow-md">
+  <nav>Your navigation content</nav>
+</float-bar>
+```
+
+### In Scrollable Container
+
+The float bar automatically detects its scroll container:
+
+```html
+<div style="position: relative; overflow: auto; height: 500px;">
+  <float-bar class="bg-white shadow-md">
+    <nav>Your navigation content</nav>
+  </float-bar>
+  <div>Scrollable content...</div>
+</div>
+```
+
+### Disabled (Static)
+
+Disable the auto-hide behavior:
+
+```html
+<float-bar disabled class="bg-white shadow-md">
+  <nav>Static navigation</nav>
+</float-bar>
+```
+
+## API
+
+### Attributes
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `offset` | number | `0` | Offset in pixels from the top |
+| `offset-element` | string | - | CSS selector for an element whose height will be used as offset |
+| `disabled` | boolean | `false` | Disables auto-hide behavior |
+
+## Styling
+
+The float bar uses CSS transforms for smooth animations. You can style it like any other element:
+
+```css
+float-bar {
+  background: white;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  padding: 1rem;
+}
+```
+
+## How it Works
+
+The float bar:
+1. Automatically detects its scroll container (window or parent element)
+2. Monitors scroll direction
+3. Hides when scrolling down (using translateY transform)
+4. Shows when scrolling up
+5. Uses requestAnimationFrame for smooth 60fps animations
+
+## Browser Support
+
+Works in all modern browsers that support:
+- Custom Elements v1
+- Shadow DOM v1
+- ES Modules
+
+## License
+
+MIT
+
+## Author
+
+Joel Geering

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export type { FloatBarElement, FloatBarAttributes, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,YAAY,EACV,eAAe,EACf,kBAAkB,GACnB,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,225 @@
+// SSR-safe: Only define and register components in browser environment
+if (typeof window !== 'undefined' && typeof HTMLElement !== 'undefined') {
+    /**
+     * A floating bar component with scroll spy, automatic positioning, and sticky behavior.
+     *
+     * Works with both window scroll and container scroll. The scroll container is automatically
+     * detected based on the element's offsetParent. If offsetParent is null or document.body,
+     * it will listen to window/document scroll events. Otherwise, it listens to the scroll
+     * events of the offsetParent element.
+     *
+     * @example
+     * <!-- Window scroll -->
+     * <float-bar>
+     *   <nav>Your navigation content</nav>
+     * </float-bar>
+     *
+     * @example
+     * <!-- Container scroll -->
+     * <div style="position: relative; overflow: auto; height: 500px;">
+     *   <float-bar>
+     *     <nav>Your navigation content</nav>
+     *   </float-bar>
+     *   <div>Scrollable content...</div>
+     * </div>
+     *
+     * @example
+     * <!-- With offset (e.g., when a fixed header is above) -->
+     * <float-bar offset="80">
+     *   <nav>Your navigation content</nav>
+     * </float-bar>
+     *
+     * @example
+     * <!-- With offset-element (automatically uses another element's height as offset) -->
+     * <header id="top-header">Fixed header</header>
+     * <float-bar offset-element="#top-header">
+     *   <nav>Your navigation content</nav>
+     * </float-bar>
+     *
+     * @example
+     * <!-- Disabled (bar scrolls normally without hiding) -->
+     * <float-bar disabled>
+     *   <nav>Your navigation content</nav>
+     * </float-bar>
+     */
+    class FloatBar extends HTMLElement {
+        static get observedAttributes() {
+            return ['offset', 'disabled'];
+        }
+        constructor() {
+            super();
+            this.lastScroll = 0;
+            this.translateAmount = 0;
+            this.navbarHeight = 0;
+            this.ticking = false;
+            this.resizeTimeout = null;
+            this.scrollParent = document;
+            this.disabled = false;
+            this.offset = 0;
+            this.offsetElement = null;
+            this.totalOffset = 0;
+            this.offsetElementObserver = null;
+            this.isResizing = false;
+            this.handleScroll = () => {
+                if (this.isResizing) {
+                    return;
+                }
+                if (!this.ticking) {
+                    requestAnimationFrame(() => {
+                        this.calculateTranslateAmount();
+                        this.applyTransform();
+                        this.ticking = false;
+                    });
+                    this.ticking = true;
+                }
+            };
+            this.handleResize = () => {
+                if (this.resizeTimeout)
+                    clearTimeout(this.resizeTimeout);
+                this.resizeTimeout = setTimeout(() => {
+                    this.handleResizeUpdate();
+                }, 150);
+            };
+            this.disabled = this.hasAttribute('disabled');
+            const offsetAttr = this.getAttribute('offset');
+            //this.offset = offsetAttr ? parseInt(offsetAttr, 10) : 0;
+            this.shadow = this.attachShadow({ mode: 'open' });
+            this.shadow.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          position: sticky;
+          top: var(--sticky-top, 0px);
+          left: 0;
+          width: 100%;
+        }
+      </style>
+      <slot></slot>
+    `;
+            this.updateStickyTop();
+        }
+        updateStickyTop() {
+            this.style.setProperty('--sticky-top', `${this.totalOffset}px`);
+        }
+        calculateTotalOffset() {
+            this.totalOffset = this.offset + (this.offsetElement ? this.offsetElement.clientHeight : 0);
+        }
+        attributeChangedCallback(name, oldValue, newValue) {
+            if (oldValue === newValue)
+                return;
+            if (name === 'offset') {
+                this.offset = newValue ? parseInt(newValue, 10) : 0;
+                this.calculateTotalOffset();
+                this.updateStickyTop();
+            }
+            if (name === 'disabled') {
+                const wasDisabled = this.disabled;
+                this.disabled = newValue !== null;
+                // Reset navbar position when disabled state changes
+                this.translateAmount = 0;
+                this.applyTransform();
+                // If re-enabled, reset scroll tracking
+                if (wasDisabled && !this.disabled) {
+                    this.lastScroll = this.getScrollPosition();
+                }
+            }
+        }
+        connectedCallback() {
+            this.scrollParent = this.offsetParent ?? document;
+            if (this.scrollParent === document.body) {
+                this.scrollParent = document;
+            }
+            const offsetElementSelector = this.getAttribute('offset-element');
+            if (offsetElementSelector) {
+                const el = document.querySelector(offsetElementSelector);
+                if (el) {
+                    this.offsetElement = el;
+                    this.addObserverToOffsetElement();
+                }
+            }
+            requestAnimationFrame(() => {
+                this.measureNavbarHeight();
+                this.calculateTotalOffset();
+                this.updateStickyTop();
+                this.lastScroll = this.getScrollPosition();
+            });
+            this.scrollParent.addEventListener('scroll', this.handleScroll, { passive: true });
+            window.addEventListener('resize', this.handleResize);
+        }
+        disconnectedCallback() {
+            this.scrollParent.removeEventListener('scroll', this.handleScroll);
+            window.removeEventListener('resize', this.handleResize);
+            if (this.resizeTimeout) {
+                clearTimeout(this.resizeTimeout);
+            }
+        }
+        addObserverToOffsetElement() {
+            if (this.offsetElement) {
+                this.offsetElementObserver = new ResizeObserver(() => {
+                    this.handleResizeUpdate();
+                });
+                this.offsetElementObserver.observe(this.offsetElement);
+            }
+        }
+        handleResizeUpdate() {
+            this.isResizing = true;
+            this.measureNavbarHeight();
+            this.calculateTotalOffset();
+            this.updateStickyTop();
+            // Update lastScroll after a short delay to ensure layout has settled
+            // and any scroll events triggered by the resize have fired
+            setTimeout(() => {
+                this.lastScroll = this.getScrollPosition();
+                this.isResizing = false;
+            }, 0);
+        }
+        measureNavbarHeight() {
+            this.navbarHeight = this.offsetHeight;
+        }
+        getScrollPosition() {
+            if (this.scrollParent === document) {
+                return window.scrollY || document.documentElement.scrollTop;
+            }
+            return this.scrollParent.scrollTop;
+        }
+        isSticky() {
+            if (this.scrollParent === document) {
+                return this.getBoundingClientRect().top <= this.totalOffset;
+            }
+            const parent = this.scrollParent;
+            const parentRect = parent.getBoundingClientRect();
+            const navbarRect = this.getBoundingClientRect();
+            // Account for parent's border
+            const computedStyle = window.getComputedStyle(parent);
+            const borderTop = parseFloat(computedStyle.borderTopWidth) || 0;
+            const threshold = parentRect.top + borderTop + this.totalOffset;
+            // Use small tolerance (1px) to account for floating point precision
+            return navbarRect.top <= threshold + 1;
+        }
+        calculateTranslateAmount() {
+            if (this.disabled) {
+                return;
+            }
+            const currentScroll = this.getScrollPosition();
+            const scrollDiff = currentScroll - this.lastScroll;
+            const isSticky = this.isSticky();
+            if (currentScroll <= 0 || !isSticky) {
+                this.translateAmount = 0;
+            }
+            else if (scrollDiff > 0) {
+                this.translateAmount = Math.min(this.translateAmount + scrollDiff, this.navbarHeight);
+            }
+            else {
+                this.translateAmount = Math.max(this.translateAmount + scrollDiff, 0);
+            }
+            this.lastScroll = currentScroll;
+        }
+        applyTransform() {
+            this.style.transform = `translateY(-${this.translateAmount}px)`;
+        }
+    }
+    // Register custom element
+    customElements.define('float-bar', FloatBar);
+}
+export {};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/jsx.d.ts

@@ -0,0 +1,26 @@
+/**
+ * JSX type definitions for float-bar web component
+ *
+ * This file augments the JSX namespace to add type definitions for custom elements.
+ * Works with both React and Preact without requiring React-specific types.
+ */
+
+import type {
+  FloatBarAttributes,
+} from './types';
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'float-bar': FloatBarAttributes;
+    }
+  }
+  namespace React.JSX {
+    interface IntrinsicElements {
+      'float-bar': FloatBarAttributes;
+    }
+  }
+}
+
+// This export is required to make this file a module
+export {};

package/dist/types-entry.d.ts

@@ -0,0 +1,3 @@
+/// <reference path="./jsx.d.ts" />
+
+export * from './types';

package/dist/types.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Custom element interfaces for float-bar components
+ */
+/**
+ * FloatBar custom element interface
+ */
+export interface FloatBarElement extends HTMLElement {
+}
+/**
+ * HTML attributes for float-bar element
+ */
+export interface FloatBarAttributes {
+    /**
+     * Offset in pixels from the top
+     */
+    offset?: string | number;
+    /**
+     * CSS selector for an element whose height will be used as offset
+     */
+    'offset-element'?: string;
+    /**
+     * Disables auto-hide behavior
+     */
+    disabled?: boolean;
+    /**
+     * Children and standard HTML attributes
+     */
+    children?: any;
+    slot?: string;
+    className?: string;
+    class?: string;
+    style?: string | Record<string, any>;
+    id?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,WAAW;CAAG;AAEvD;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;CACb"}

package/dist/types.js

@@ -0,0 +1,5 @@
+/**
+ * Custom element interfaces for float-bar components
+ */
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG"}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@gnireeg/float-bar",
+  "version": "0.1.0",
+  "description": "Floating bar web component with automatic positioning and sticky behavior",
+  "type": "module",
+
+  "main": "./dist/index.js",
+  "types": "./dist/types-entry.d.ts",
+
+  "exports": {
+    ".": {
+      "types": "./dist/types-entry.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+
+  "files": [
+    "dist",
+    "README.md"
+  ],
+
+  "keywords": [
+    "float-bar",
+    "floating-bar",
+    "navigation",
+    "tabs",
+    "sticky",
+    "web-components",
+    "custom-elements",
+    "accessible",
+    "a11y",
+    "typescript",
+    "ui-components"
+  ],
+
+  "author": "Joel Geering <joel@geering.dev> (https://geering.dev)",
+  "license": "MIT",
+
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gnireeG/web-components.git",
+    "directory": "packages/float-bar"
+  },
+
+  "scripts": {
+    "build": "tsc && node -e \"const fs = require('fs'); fs.copyFileSync('src/jsx.d.ts', 'dist/jsx.d.ts'); fs.copyFileSync('src/types-entry.d.ts', 'dist/types-entry.d.ts');\"",
+    "dev": "tsc --watch",
+    "prepublishOnly": "npm run build"
+  },
+
+  "devDependencies": {
+    "typescript": "^5.4.0"
+  }
+}