├── LICENSE ├── README.md ├── CHANGELOG.md └── src └── page-loader.js /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 Oscar Otero 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # @oom/page-loader 2 | 3 | Javascript library to load pages using ajax and replace the content in the 4 | current page. It changes the title, the url, css and javascript. You can use 5 | this library to improve the page load speed and create beautiful page 6 | transitions. It has the following features: 7 | 8 | - No dependencies 9 | - Superlight 10 | - It can be used with regular links and forms 11 | - Follows the progressive enhancement strategy: **if javascript fails, the web 12 | page keeps working** 13 | - Built with ES6, so you may need a transpiler for old browser support 14 | 15 | Other libraries with a similar purpose are 16 | [barba.js](https://github.com/luruke/barba.js/), 17 | [turbolinks](https://github.com/turbolinks/turbolinks) or 18 | [highway](https://github.com/Dogstudio/highway). The main aim of page-loader is 19 | to be lighter and less magical, in order to be more flexible and customizable. 20 | 21 | ## Install 22 | 23 | Requirements: 24 | 25 | - NPM or Yarn to install 26 | [the package and the dependencies](https://www.npmjs.com/@oom/page-loader) 27 | - It uses 28 | [the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 29 | for the http requests, so you can use a 30 | [fetch polyfill](https://github.com/github/fetch) and a 31 | [Promise polyfill](https://github.com/taylorhakes/promise-polyfill) to have 32 | [support for old browsers](https://caniuse.com/#feat=fetch) 33 | 34 | ```sh 35 | npm install @oom/page-loader 36 | ``` 37 | 38 | ## Usage 39 | 40 | ### HTML 41 | 42 | Let's start with the following html code: 43 | 44 | ```html 45 | 46 | 47 | 48 | 49 | Page title 50 | 51 | 52 | 53 | 54 | 59 |
60 |

This is the first section

61 | 62 |

63 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 64 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 65 | veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 66 | commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 67 | velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 68 | occaecat cupidatat non proident, sunt in culpa qui officia deserunt 69 | mollit anim id est laborum. 70 |

71 |
72 | 73 | 74 | ``` 75 | 76 | ### Javascript 77 | 78 | Use javascript for a complete experience: 79 | 80 | ```js 81 | import Loader from "./vendors/@oom/page-loader/src/page-loader.js"; 82 | 83 | const loader = new Loader(); 84 | 85 | // Function to load links 86 | loader.links(async ({ event, url, submitter, load }) => { 87 | console.log(event); // The click event 88 | console.log(url); // The URL to the new address 89 | console.log(submitter); // The object 90 | console.log(load); // Function to load the new page and return a Page instance 91 | 92 | //Load the page 93 | const page = await load(); 94 | 95 | await page.replaceStyles(); //Load the new css styles defined in not present currently 96 | await page.replaceScripts(); //Load the new js files defined in not present currently 97 | await page.replaceContent("main"); //Replace the
element 98 | await page.updateState(); //Update the page status (change url, title etc) 99 | await page.resetScroll(); //Reset the scroll position 100 | }); 101 | 102 | // Ignore links containing the .no-loader class 103 | nav.ignore((el) => el.classList.contains("no-loader")); 104 | ``` 105 | 106 | ### Forms 107 | 108 | You can also handle form submits: 109 | 110 | ```js 111 | // Function to load forms 112 | loader.forms(async ({ event, url, submitter, load }) => { 113 | console.log(event); // The submit event 114 | console.log(url); // The URL to the new address 115 | console.log(submitter); // The pressed