I\\'m The Title
\n * ``` \n * \n * @param {string} template template string (*not any selector*)\n * @param {object} data \n * \n * @returns string\n */\nexport default function microTemplate(template, data = {}) {\n if (cache.has(template)) {\n return cache.get(template)(data);\n }\n\n const parsed = template\n .replace(/[\\r\\t\\n]/g, ' ')\n .split('<%').join('\\t')\n .replace(/((^|%>)[^\\t]*)'/g, '$1\\r')\n .replace(/\\t=(.*?)%>/g, \"',$1,'\")\n .split('\\t').join(\"');\")\n .split('%>').join(\"p.push('\")\n .split('\\r').join(\"\\\\'\");\n\n const fn = new Function('obj',\n `let p=[];with(obj){p.push('${parsed}')};return p.join('');`,\n );\n \n cache.set(template, fn);\n return fn(data);\n}","export default {\n largeTablet: 1100,\n tablet: 800,\n largeMobile: 620,\n horMobile: 480,\n verMobile: 320,\n};","/**\n * Create pagination config\n * \n * @param {{\n * pages: number,\n * cur: number,\n * delta: number,\n * }} options\n * \n * @param {number} options.delta the number of visible page number\n * buttons at both sides of current page\n * \n * @returns {number[]} array of page numbers or -1 if there's a delimiter\n */\nexport default function paginate({ cur, pages, delta }) {\n if (pages === 1) return [1];\n delta = Math.min(delta, pages - 1);\n\n const center = Math.min(Math.max(cur, delta + 1), pages - delta);\n const buttons = [1];\n\n const left = center - delta;\n const right = center + delta;\n\n if (left > 2) {\n buttons.push((left === 3) ? 2 : -1);\n }\n\n for (let i = Math.max(left, 2); i < center; i++) {\n buttons.push(i);\n }\n\n if (center !== 1 && center !== pages) {\n buttons.push(center);\n }\n\n for (let i = center + 1; i <= Math.min(right, pages - 1); i++) {\n buttons.push(i);\n }\n\n if (right < pages - 1) {\n buttons.push((right === pages - 2) ? pages - 1 : -1);\n }\n\n buttons.push(pages);\n return buttons;\n}","import './pagination.scss';\n\nimport template from './pagination.html';\n\nimport Events from '@/scripts/lib/Events';\nimport microTemplate from '@/scripts/lib/microTmpl';\n\nimport breakpoints from '@/scripts/common/breakpoints';\nimport paginate from './algorithms/paginate';\n\n/**\n * @typedef {{\n * delta?: number,\n * linkGenerator?: (page: number) => string,\n * manualRouting: boolean,\n * }} PaginationOptions\n */\n\n/** @type {PaginationOptions} */\nconst DEF_OPTIONS = {\n // The number of visible page buttons at both sides of cur page\n delta: 2,\n manualRouting: true,\n linkGenerator: defaultLinkGenerator,\n};\n\nexport default class Pagination {\n /**\n * @param {HTMLElement} root \n * @param {PaginationOptions} options\n */\n constructor(root, options) {\n this.events = new Events();\n this._paginate = paginate;\n\n this._options = { ...DEF_OPTIONS, ...options };\n this._root = root;\n\n this._pages = 10;\n this._cur = 1;\n\n this._pageNumberButtons = [];\n\n this._disabled = false;\n\n this._mobileMedia = matchMedia(`\n screen and (max-width: ${breakpoints.largeMobile}px)\n `);\n\n this._initEvents();\n }\n\n render() {\n this._updateConfig();\n this._root.innerHTML = microTemplate(template, this);\n }\n\n _initEvents() {\n if (!this._options.manualRouting) return;\n \n this._root.addEventListener('click', (event) => {\n const selector = '.pagination--link:not(.pagination--disabled)';\n const pageBtn = event.target.closest(selector);\n\n if (pageBtn) {\n event.preventDefault();\n\n if (this._disabled) return;\n\n this._setPage(+pageBtn.dataset.page);\n return;\n }\n });\n\n this._mobileMedia.addListener(() => {\n this.render();\n });\n }\n\n _setPage(newPage) {\n newPage = parseInt(newPage + '');\n\n if (isNaN(newPage) || newPage === this._cur) return;\n const oldPage = this._cur;\n this._cur = newPage;\n\n this.render();\n this.events.emit('change', newPage, oldPage);\n }\n\n _updateConfig() {\n this._pageNumberButtons = this._paginate({\n cur: this._cur,\n pages: this._pages,\n delta: this._delta,\n });\n }\n\n get _delta() {\n if (this._mobileMedia.matches) return 1;\n return this._options.delta;\n }\n\n get cur() { return this._cur; }\n set cur(val) { this._cur = val; }\n\n get pages() { return this._pages; }\n set pages(val) { this._pages = val; }\n\n get disabled() { return this._disabled; }\n set disabled(val) { this._disabled = val; }\n}\n\n/**\n * @param {number} page \n * @returns {string}\n */\nfunction defaultLinkGenerator(page) {\n const url = new URL(location);\n url.searchParams.set('page', page);\n if (page <= 1) url.searchParams.delete('page');\n\n return url;\n}","module.exports = \"<%\\nconst prevDisabled = (_cur === 1) ? 'pagination--disabled' : '';\\nconst nextDisabled = (_cur === _pages) ? 'pagination--disabled' : '';\\n\\nconst prevPage = Math.max(_cur - 1, 1);\\nconst nextPage = Math.min(_cur + 1, _pages);\\n\\nconst prevHref = (_cur > 1) ? `href=\\\"${_options.linkGenerator(prevPage)}\\\"` : '';\\nconst nextHref = (_cur < _pages) ? `href=\\\"${_options.linkGenerator(nextPage)}\\\"` : '';\\n%>\\n\\n\";","import './tag.styles';\n\nimport { getTemplateData } from '@/scripts/utils/cms';\n\nimport initPage from '@/scripts/init/init';\nimport initBlogLayout from '@/layouts/blog/blog-layout';\nimport ImgLazyLoad from '@/scripts/lib/ImgLazyLoad';\nimport Pagination from '@/components/Pagination/Pagination';\n\n\nconst $page = document.querySelector('.tag-js');\nconst $pagination = $page.querySelector('.pagination-js');\n\nconst page = getTemplateData('page');\nconst maxPage = getTemplateData('maxPage');\n\ninitPage();\ninitBlogLayout();\nnew ImgLazyLoad(document.querySelectorAll('img.lazy'));\n\nconst pagination = new Pagination($pagination, { manualRouting: false });\npagination.cur = page;\npagination.pages = maxPage;\npagination.render();\n\n\n(function setHumEvents(){\n if (!window.humTracker) return;\n \n humTracker.trackScroll($page, 'tag scroll');\n humTracker.trackClick($pagination, 'tag pagination click');\n \n}());\n"],"sourceRoot":""}