Compare commits
No commits in common. "main" and "v1.0.0" have entirely different histories.
@ -1 +0,0 @@
|
|||||||
*.html
|
|
@ -1,11 +1,11 @@
|
|||||||
{
|
{
|
||||||
"name": "html-pagination",
|
"name": "html-pagination",
|
||||||
"version": "1.0.2",
|
"version": "1.0.0",
|
||||||
"description": "Package for html document pagination to fit container with fixed width",
|
"description": "Package for html document pagination to fit container with fixed width",
|
||||||
"main": "lib/index.js",
|
"main": "lib/index.js",
|
||||||
"types": "lib/index.d.ts",
|
"types": "lib/index.d.ts",
|
||||||
"files": [
|
"files": [
|
||||||
"lib"
|
"./lib/**/*"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test:browser": "npm run build && cp ./src/__tests__/index.html ./lib/ && serve -s lib",
|
"test:browser": "npm run build && cp ./src/__tests__/index.html ./lib/ && serve -s lib",
|
||||||
|
34
src/index.ts
34
src/index.ts
@ -3,16 +3,17 @@ import { isElementNode, isTextNode } from './types';
|
|||||||
import { binSearch } from './utils';
|
import { binSearch } from './utils';
|
||||||
|
|
||||||
class HTMLPagination {
|
class HTMLPagination {
|
||||||
private content: HTMLElement;
|
content: HTMLElement;
|
||||||
private container: HTMLElement;
|
container: HTMLElement;
|
||||||
private cache: CacheInterface | undefined;
|
cache: CacheInterface | undefined;
|
||||||
private initialJump: number;
|
initialJump: number;
|
||||||
|
|
||||||
private elementPositions: [number, Node][];
|
elementPositions: [number, Node][];
|
||||||
private idPositions: Map<string, number>;
|
idPositions: Map<string, number>;
|
||||||
private pages: number[];
|
pages: number[];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
* /**
|
||||||
* @param content HTML element with html content to display paginationly
|
* @param content HTML element with html content to display paginationly
|
||||||
* @param container HTML element which will store content to display
|
* @param container HTML element which will store content to display
|
||||||
* @param cache Class implementing `g` and `s` methods for getting and
|
* @param cache Class implementing `g` and `s` methods for getting and
|
||||||
@ -42,7 +43,6 @@ class HTMLPagination {
|
|||||||
/**
|
/**
|
||||||
* Method computes book's pages till specified number,
|
* Method computes book's pages till specified number,
|
||||||
* sets container's content to `n`th page and returns it as string
|
* sets container's content to `n`th page and returns it as string
|
||||||
*
|
|
||||||
* `n` starts from 1
|
* `n` starts from 1
|
||||||
*/
|
*/
|
||||||
getPage(n: number): string {
|
getPage(n: number): string {
|
||||||
@ -78,7 +78,7 @@ class HTMLPagination {
|
|||||||
* Computes html elements and text nodes positions.
|
* Computes html elements and text nodes positions.
|
||||||
* Must be run only on first setup
|
* Must be run only on first setup
|
||||||
*/
|
*/
|
||||||
private computeElementsPositions(): void {
|
computeElementsPositions(): void {
|
||||||
const recursive = (currentPosition: number, root: Node): number => {
|
const recursive = (currentPosition: number, root: Node): number => {
|
||||||
if (isTextNode(root)) {
|
if (isTextNode(root)) {
|
||||||
this.elementPositions.push([currentPosition, root]);
|
this.elementPositions.push([currentPosition, root]);
|
||||||
@ -99,7 +99,7 @@ class HTMLPagination {
|
|||||||
/**
|
/**
|
||||||
* Finds position for next page break
|
* Finds position for next page break
|
||||||
*/
|
*/
|
||||||
private getPageBreak(start: number): number {
|
getPageBreak(start: number): number {
|
||||||
let previousEnd = this.getMaxPosition;
|
let previousEnd = this.getMaxPosition;
|
||||||
let end = this.getNextSpaceForPosition(
|
let end = this.getNextSpaceForPosition(
|
||||||
Math.min(start + this.initialJump, this.getMaxPosition)
|
Math.min(start + this.initialJump, this.getMaxPosition)
|
||||||
@ -137,7 +137,7 @@ class HTMLPagination {
|
|||||||
/**
|
/**
|
||||||
* Gets next space or gap between elements for position
|
* Gets next space or gap between elements for position
|
||||||
*/
|
*/
|
||||||
private getNextSpaceForPosition(startPos: number): number {
|
getNextSpaceForPosition(startPos: number): number {
|
||||||
const nodeIndex = this.getElementIndexForPosition(startPos);
|
const nodeIndex = this.getElementIndexForPosition(startPos);
|
||||||
const [nodePosition, node] = this.elementPositions[nodeIndex];
|
const [nodePosition, node] = this.elementPositions[nodeIndex];
|
||||||
|
|
||||||
@ -158,7 +158,7 @@ class HTMLPagination {
|
|||||||
/**
|
/**
|
||||||
* Gets previous space or gap between elements for position
|
* Gets previous space or gap between elements for position
|
||||||
*/
|
*/
|
||||||
private getPreviousSpaceForPosition(startPos: number): number {
|
getPreviousSpaceForPosition(startPos: number): number {
|
||||||
const nodeIndex = this.getElementIndexForPosition(startPos);
|
const nodeIndex = this.getElementIndexForPosition(startPos);
|
||||||
const [nodePosition, node] = this.elementPositions[nodeIndex];
|
const [nodePosition, node] = this.elementPositions[nodeIndex];
|
||||||
|
|
||||||
@ -172,14 +172,14 @@ class HTMLPagination {
|
|||||||
/**
|
/**
|
||||||
* Checks if container is overflowing with content
|
* Checks if container is overflowing with content
|
||||||
*/
|
*/
|
||||||
private get scrollNecessary(): boolean {
|
get scrollNecessary(): boolean {
|
||||||
return this.container.clientHeight < this.container.scrollHeight;
|
return this.container.clientHeight < this.container.scrollHeight;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @returns end position of content
|
* @returns end position of content
|
||||||
*/
|
*/
|
||||||
private get getMaxPosition(): number {
|
get getMaxPosition(): number {
|
||||||
const [offset, element] =
|
const [offset, element] =
|
||||||
this.elementPositions[this.elementPositions.length - 1];
|
this.elementPositions[this.elementPositions.length - 1];
|
||||||
return offset + (element.nodeValue?.length || 0);
|
return offset + (element.nodeValue?.length || 0);
|
||||||
@ -195,7 +195,7 @@ class HTMLPagination {
|
|||||||
/**
|
/**
|
||||||
* Wrapper for `binSearch` util to find index of element for position
|
* Wrapper for `binSearch` util to find index of element for position
|
||||||
*/
|
*/
|
||||||
private getElementIndexForPosition(pos: number): number {
|
getElementIndexForPosition(pos: number): number {
|
||||||
return binSearch(
|
return binSearch(
|
||||||
this.elementPositions,
|
this.elementPositions,
|
||||||
pos,
|
pos,
|
||||||
@ -207,7 +207,7 @@ class HTMLPagination {
|
|||||||
* Finds node inside which `pos` is located.
|
* Finds node inside which `pos` is located.
|
||||||
* @returns node positions and itself
|
* @returns node positions and itself
|
||||||
*/
|
*/
|
||||||
private getElementForPosition(pos: number): [number, Node] {
|
getElementForPosition(pos: number): [number, Node] {
|
||||||
const elementIndex = this.getElementIndexForPosition(pos);
|
const elementIndex = this.getElementIndexForPosition(pos);
|
||||||
|
|
||||||
return this.elementPositions[elementIndex];
|
return this.elementPositions[elementIndex];
|
||||||
@ -217,7 +217,7 @@ class HTMLPagination {
|
|||||||
* Sets `container` element content and
|
* Sets `container` element content and
|
||||||
* return as string html content between `from` and `to`
|
* return as string html content between `from` and `to`
|
||||||
*/
|
*/
|
||||||
private getContentFromRange(from: number, to: number): string {
|
getContentFromRange(from: number, to: number): string {
|
||||||
this.container.innerHTML = '';
|
this.container.innerHTML = '';
|
||||||
const range = new Range();
|
const range = new Range();
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user