Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<input type="text" placeholder="zadaj názov súboru"> <button>Generuj</button> <div id="view"></div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
div { margin-top: 1rem; }
CSS
Autoformát
CSS reset
Až na konci
(() => { /** * Configuration object for StaticPaging class. * * @typedef {Object} StaticPagingConfig * @property {number[]} exclude - An array of numbers representing excluded page numbers. * @property {number} first - The number of the first page. * @property {number|null} last - The number of the last page, or null if there is no last page. */ /** * Represents paging information. * * @typedef {Object} PageInfo * @property {number} current - The current page number. * @property {number|null} prev - The number of the previous page, or null if there is no previous page. * @property {number|null} next - The number of the next page, or null if there is no next page. * @property {string} currentStr - The current page number as string with original zero padding. * @property {string|null} prevStr - The number of the previous page as string with original zero padding, or null if there is no previous page. * @property {string|null} nextStr - The number of the next page as string with original zero padding, or null if there is no next page. * @property {string} ext - The file extension, or empty string if not applicable. */ /** * */ class StaticPaging { /** * Configuration object for static paging. * * @type {StaticPagingConfig} * @private * @readonly */ #_config = { exclude: [], first: 1, last: null }; /** * Creates an instance of StaticPaging. * @param {StaticPagingConfig} [config] - Optional configuration object. * @public */ constructor(config) { if (config !== null && typeof config === 'object' && !Array.isArray(config) && Object.keys(config).length > 0) { this.#_config = {...this.#_config, ...config}; } } /** * Gets paging information based on the provided filename or current URL. * * @param {string} [filename] - The filename or URL from which to extract page information. * @returns {PageInfo | null} An object containing current, previous, and next page numbers, along with file extension. * @public * @example * const staticPaging = new StaticPaging({ first: 1, last: 10, exclude: [3, 6, 9] }); * const pageInfo = staticPaging.getPages('/5.html'); * console.log(pageInfo); */ getPages(filename) { /** @type {RegExpMatchArray} */ const filenameSegments = ( filename || globalThis.location?.pathname.replace(/\/$/, '').replace(/.*\//, '') ).match(/^\/?(\d+)(\.[^.]+)?$/); /** @type {string|number} */ let current = filenameSegments?.[1]; const currentLength = current?.length || 0; /** @type {string} */ const ext = filenameSegments?.[2] || ''; if (isNaN((current = +current))) { return null; } const prev = this._getStep(current, false); const next = this._getStep(current, true); return { current, currentStr: current.toString().padStart(currentLength, '0'), prev, prevStr: prev?.toString().padStart(currentLength, '0') || null, next, nextStr: next?.toString().padStart(currentLength, '0') || null, ext }; } /** * Gets the next or previous page number based on the current page number and direction. * * @param {number} current - The current page number. * @param {boolean} dir - The direction (true for next, false for previous). * @returns {number | null} The next or previous page number, or null if it's out of range or excluded. * @private */ _getStep(current, dir) { const step = dir ? 1 : -1; let value = current + step; while (this.#_config.exclude.includes(value)) { value += step; } if ((!dir && value < this.#_config.first) || (dir && (this.#_config.last !== null && value > this.#_config.last))) { return null; } return value; } } class Renderer { /** * Templates mapping object. * * @type {{[key: string]: (data: unknown) => string}} * @private * @readonly */ _templates; /** * Creates an instance of Renderer. * * @param {{[key: string]: (data: unknown) => string}} templates - An object containing template functions. * @throws {Error} Throws an error if no templates are provided or if templates is not a non-empty object. * @public */ constructor(templates) { if (!templates || typeof templates !== 'object' || Array.isArray(templates) || !Object.keys(templates).length) { throw new Error('No templates provided'); } this._templates = templates; } /** * Renders the specified template into the given container with the provided data. * * @param {HTMLElement} container - The container element where the template will be rendered. * @param {string} templateId - The identifier of the template to render. * @param {{[key: string]: unknown}} [data] - Optional data object to be passed to the template function. * @returns {void} * @public */ render(container, templateId, data) { /** @type {string|undefined} */ const html = this._templates[templateId]?.(data); if (!html) { return; } let containerLastChild; /** @type {HTMLTemplateElement} */ const template = document.createElement('template'); container ||= document.body; template.innerHTML = html; while ((containerLastChild = container.lastChild)) { container.removeChild(containerLastChild); } container.append(template.content); } } const TEMPLATES = { /** * @param {import("./mods/static-paging.js").PageInfo} data * @returns {string} */ 'paging-component': (data) => { if (!data) { return `<h3>No pages available</h3>`; } const {currentStr, nextStr, prevStr, ext} = data; return ` <style> .paging { display: flex; gap: .25rem; a, span { padding: 1em; border: .1em solid #3e7ba1; border-radius: 5px; text-decoration: none; user-select: none; -moz-user-select: none; -webkit-user-select: none } a { color: #fff; background: #215575; &:hover { background: #3e7ba1 } } } </style> <div class="paging"> ${prevStr !== null ? `<a href="${prevStr}${ext}" title="Previous page">← ${prevStr}${ext}</a>` : ''} <span title="Current page">${currentStr}${ext}</span> ${nextStr !== null ? `<a href="${nextStr}${ext}" title="Next page">${nextStr}${ext} →</a>` : ''} </div> `; }, } const staticPaging = new StaticPaging(); const renderer = new Renderer(TEMPLATES); document.addEventListener('DOMContentLoaded', () => { const container = document.querySelector('#view'); document.querySelector('button').addEventListener('click', (e) => { e.preventDefault(); const value = document.querySelector('input').value; const pagingData = staticPaging.getPages(value); renderer.render(container, 'paging-component', pagingData); }); const pagingData = staticPaging.getPages("235.html"); renderer.render(container, 'paging-component', pagingData); }); })();
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>