vladsdamnmemory-lit
v1.1.3
Published
DOM is compliant. Build user friendly interfaces with "lit".
Downloads
19
Readme
that's Lit!
© vladsdamnmemory
Please stay tuned for updates! Usually I publish new versions of this package frequently
XStickyScrollhas got a smoother scroll behaviour in version 1.1.3
DOM is compliant. Build modern user-friendly interfaces easily with Lit:
- Easy to install and use;
- Available as a standalone script;
- Extendable;
- Less code more functionality.
Contents
Installation
unpkg
Lit is available for direct browser usage. To implement this you should add the following script import in the head
tag of your html document.
<!-- Browser content -->
<head>
<title>that's Lit!</title>
<!-- ... -->
<script src="https://unpkg.com/vladsdamnmemory-lit@latest/lit/browser/index.js"></script>
<!-- ... -->
</head>npm
Run the following in a terminal inside your project root like so:
npm i vladsdamnmemory-lit --save-prodImport the required class:
import {XStickyScroll} from "vladsdamnmemory-lit";Documentation
XStickyScroll (@class)
Eliminates the need for a vertical scroll in a block. Useful for a log or code reading. It adds a scrollbar to a provided element.
constructor(host: HTMLElement, scrollBarClass: String);
- host: HTMLElement (Node to which scrollbar is applied)
- scrollBarClass: String (Style class for the scrollbar)
Quick demo
https://jsfiddle.net/91s8ngru/
Usage
First specify the available width for the block. Sometimes it's optional, depends on your layout.
<!-- html snippet -->
<div id="log" style="width: 500px">lorem ipsum... plus many many lines</div>Next step is to add some code:
import {XStickyScroll} from "vladsdamnmemory-lit";
let scrollManager = new XStickyScroll(document.getElementById("log"), "scrollbar-style-class");
// It's available not to compile source code
// If you want to create an instance of XStickyScroll ASAP,
// check out the browser folder inside
// This library is already compiled to older ES version for more compatibility with all browsers
// Browser usage
let scrollManager = new lit.XStickyScroll(document.getElementById("log"), "scrollbar-style-class");
// Unbinds event listeners and removes extra objects
scrollManager.destroy(); // Call it on framework hooks onDestroy/beforeDestroy etc.ViewportWatcher (@class)
Tracks the current visible section of document and connects it to the navigation item.
constructor(nodes: HTMLCollection | NodeList, menuItems: HTMLCollection | NodeList, topOffset?: number, enableClickListeners?: boolean);
- private readonly nodes;
- private readonly menuItems;
- private readonly setActive;
- private readonly enableClickListeners;
- private readonly topOffset;
- refresh(): void;
- reconstruct(nodes: HTMLCollection | NodeList, menuItems: HTMLCollection | NodeList, topOffset?: number, enableClickListeners?: boolean): ViewportWatcher;
- destroy(): void.
Use .reconstruct() after changing the DOM, when there are new or removed blocks.
Destroy instance by running the method .destroy().
Make ViewportWatcher instance forcibly recalculate everything with .refresh() method.
Quick demo
https://jsfiddle.net/vladsdamnmemory/q7vnaykp/3/
Usage
Sweet-sweet javascript:
<!-- When using right away in the browser -->
<script>
let viewportWatcher;
window.addEventListener("load", function () {
let nodes, menuItems;
nodes = document.querySelectorAll(".block"); // Collect all blocks
menuItems = document.querySelectorAll(".menu-item"); // Collect all menu items
viewportWatcher = new lit.ViewportWatcher(
nodes, // Articles, sections, divs or something (any blocks)
menuItems, // Navigation items
document.getElementById("nav").getBoundingClientRect().height, // Extra offset if you've got header on a page fixed to the top
true // Enable click event listeners to scroll into view
);
}, false);
</script>ES6 approach and frameworks:
import {ViewportWatcher} from "vladsdamnmemory-lit";
/**
* Assume that we already have some data about the HTML Elements
*/
let viewportWatcher = new ViewportWatcher(
nodes, // Articles, sections, divs or something (any blocks)
menuItems, // Navigation items
document.getElementById("nav").getBoundingClientRect().height, // Extra offset if you've got header on a page fixed to the top
true // Enable click event listeners to scrol into view
);Thank you for using my code!
For inquiries, proposals and bug reports email me to [email protected]