{"id":20983551,"url":"https://github.com/oom-components/page-loader","last_synced_at":"2025-05-14T16:32:44.081Z","repository":{"id":57133327,"uuid":"94686335","full_name":"oom-components/page-loader","owner":"oom-components","description":"Javascript library to load html pages using ajax","archived":false,"fork":false,"pushed_at":"2021-08-26T16:11:05.000Z","size":131,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-13T22:03:00.404Z","etag":null,"topics":["ajax","es6","pagination","progressive-enhancement","vanilla-javascript"],"latest_commit_sha":null,"homepage":"https://oom-components.github.io/page-loader/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oom-components.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-18T12:39:27.000Z","updated_at":"2023-12-16T22:51:54.000Z","dependencies_parsed_at":"2022-09-03T15:03:02.624Z","dependency_job_id":null,"html_url":"https://github.com/oom-components/page-loader","commit_stats":null,"previous_names":["progressive-web-components/page-loader"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oom-components%2Fpage-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oom-components%2Fpage-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oom-components%2Fpage-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oom-components%2Fpage-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oom-components","download_url":"https://codeload.github.com/oom-components/page-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225303175,"owners_count":17453029,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ajax","es6","pagination","progressive-enhancement","vanilla-javascript"],"created_at":"2024-11-19T05:49:14.242Z","updated_at":"2024-11-19T05:49:14.914Z","avatar_url":"https://github.com/oom-components.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @oom/page-loader\n\nJavascript library to load pages using ajax and replace the content in the\ncurrent page. It changes the title, the url, css and javascript. You can use\nthis library to improve the page load speed and create beautiful page\ntransitions. It has the following features:\n\n- No dependencies\n- Superlight\n- It can be used with regular links and forms\n- Follows the progressive enhancement strategy: **if javascript fails, the web\n  page keeps working**\n- Built with ES6, so you may need a transpiler for old browser support\n\nOther libraries with a similar purpose are\n[barba.js](https://github.com/luruke/barba.js/),\n[turbolinks](https://github.com/turbolinks/turbolinks) or\n[highway](https://github.com/Dogstudio/highway). The main aim of page-loader is\nto be lighter and less magical, in order to be more flexible and customizable.\n\n## Install\n\nRequirements:\n\n- NPM or Yarn to install\n  [the package and the dependencies](https://www.npmjs.com/@oom/page-loader)\n- It uses\n  [the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)\n  for the http requests, so you can use a\n  [fetch polyfill](https://github.com/github/fetch) and a\n  [Promise polyfill](https://github.com/taylorhakes/promise-polyfill) to have\n  [support for old browsers](https://caniuse.com/#feat=fetch)\n\n```sh\nnpm install @oom/page-loader\n```\n\n## Usage\n\n### HTML\n\nLet's start with the following html code:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003ctitle\u003ePage title\u003c/title\u003e\n    \u003clink rel=\"stylesheet\" href=\"styles.css\"\u003e\n    \u003cscript src=\"scripts.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cnav class=\"menu\"\u003e\n        \u003ca href=\"section1.html\"\u003eSection 1\u003c/a\u003e\n        \u003ca href=\"section2.html\"\u003eSection 2\u003c/a\u003e\n        \u003ca href=\"section3.html\"\u003eSection 3\u003c/a\u003e\n    \u003c/nav\u003e\n    \u003cmain class=\"content\"\u003e\n        \u003ch1\u003eThis is the first section\u003c/h1\u003e\n\n        \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\u003c/p\u003e\n    \u003c/main\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Javascript\n\nUse javascript for a complete experience:\n\n```js\nimport Navigator from \"./vendors/@oom/page-loader/src/navigator.js\";\n\nconst nav = new Navigator(async (load, event) =\u003e {\n  //Load the page\n  const page = await load();\n\n  await page.replaceStyles(); //Load the new css styles defined in \u003chead\u003e not present currently\n  await page.replaceScripts(); //Load the new js files defined in \u003chead\u003e not present currently\n  await page.replaceContent(\"main\"); //Replace the \u003cmain\u003e element\n  await page.updateState(); //Update the page status (change url, title etc)\n  await page.resetScroll(); //Reset the scroll position\n});\n\n//Init the navigation, capturing all clicks in links and form submits\nnav.init();\n\n//Optionally, you can filter links and forms to disable this behaviour\nnav.addFilter((el) =\u003e !el.classList.contains(\"no-loader\"));\n\n//For example, to disable forms:\nnav.addFilter((el) =\u003e el.tagName !== \"FORM\");\n\n//Subscribe to events\nnav.on(\"error\", (err) =\u003e console.error(err));\n\n//You can go manually to other url when you want\nnav.go(\"https//example.com/page2.html\");\n\n//Or submit a form via ajax\nconst form = document.getElementById(\"my-form\");\nnav.submit(form);\n\n//And handle downloads (links with download attribute)\nnav.download(async (download, event, link) =\u003e {\n  link.classList.add(\"downloading\");\n  await download();\n  link.classList.remove(\"downloading\");\n});\n```\n\n### Page\n\nA page instance contains the info about the loaded page. It has the following\nmethods and properties:\n\n```js\nconst nav = new Navigator(async (load, event, target, submitter) =\u003e {\n  //By clicking a link, the target is the A element\n  //By submitting a form, the target is the form but you can get the submitter element (the button being pressed)\n  const trigger = submitter || target;\n\n  trigger.classList.add(\"loading\");\n\n  const page = await load();\n\n  //Replace an element in the document with the same element in the page\n  await page.replaceContent(\"#content\");\n\n  //Append the children of the loaded page to the same element in the document\n  await page.appendContent(\"#content\");\n\n  //Remove content from the document\n  await page.removeContent(\"#content \u003e .unwanted\");\n\n  //Change the css styles used in the new page (\u003clink rel=\"stylesheet\"\u003e in \u003chead\u003e).\n  await page.replaceStyles();\n\n  //Change the js styles used in the new page (\u003cscript src=\"...\"\u003e in \u003chead\u003e).\n  await page.replaceScripts();\n\n  //Performs a document.querySelector in the page. Throws an exception on empty result\n  await page.querySelector(\"p\");\n\n  //Performs a document.querySelectorAll in the page. Throws an exception on empty result\n  await page.querySelectorAll(\"p\");\n\n  //Runs a history.pushState changing the url and title.\n  await page.updateState();\n\n  //Reset the page scroll to top (or to the #target element)\n  await page.resetScroll();\n\n  page.dom; //HTMLDocument with the content of the page\n  page.url; //The url of the loaded page\n  page.status; //The http status code of the ajax response\n\n  trigger.classList.remove(\"loading\");\n});\n```\n\n### Events\n\n- beforeFilter (element, url, [submitter])\n- beforeLoad (element, url, [submitter])\n- load (element, loader, event, [submitter])\n- error (error, element, loader, event, [submitter])\n\n## Demo\n\nThere's an online demo here: https://oom-components.github.io/page-loader/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foom-components%2Fpage-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foom-components%2Fpage-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foom-components%2Fpage-loader/lists"}