├── .gitignore ├── CNAME ├── LICENSE ├── README.md ├── demo ├── index.html ├── ldf.js ├── package-lock.json ├── package.json ├── pages │ ├── controls │ │ ├── controls.html │ │ └── controls.js │ ├── helloworld │ │ ├── helloworld.css │ │ └── helloworld.html │ ├── index │ │ └── index.html │ └── login │ │ ├── icon.png │ │ ├── login.css │ │ └── login.html └── test.js └── ldf.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | ldf.js.org -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 2, June 1991 3 | 4 | Copyright (C) 2018-2019, Philipp Hemmelmayr , 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | Preamble 9 | 10 | The licenses for most software are designed to take away your 11 | freedom to share and change it. By contrast, the GNU General Public 12 | License is intended to guarantee your freedom to share and change free 13 | software--to make sure the software is free for all its users. This 14 | General Public License applies to most of the Free Software 15 | Foundation's software and to any other program whose authors commit to 16 | using it. (Some other Free Software Foundation software is covered by 17 | the GNU Lesser General Public License instead.) You can apply it to 18 | your programs, too. 19 | 20 | When we speak of free software, we are referring to freedom, not 21 | price. Our General Public Licenses are designed to make sure that you 22 | have the freedom to distribute copies of free software (and charge for 23 | this service if you wish), that you receive source code or can get it 24 | if you want it, that you can change the software or use pieces of it 25 | in new free programs; and that you know you can do these things. 26 | 27 | To protect your rights, we need to make restrictions that forbid 28 | anyone to deny you these rights or to ask you to surrender the rights. 29 | These restrictions translate to certain responsibilities for you if you 30 | distribute copies of the software, or if you modify it. 31 | 32 | For example, if you distribute copies of such a program, whether 33 | gratis or for a fee, you must give the recipients all the rights that 34 | you have. You must make sure that they, too, receive or can get the 35 | source code. And you must show them these terms so they know their 36 | rights. 37 | 38 | We protect your rights with two steps: (1) copyright the software, and 39 | (2) offer you this license which gives you legal permission to copy, 40 | distribute and/or modify the software. 41 | 42 | Also, for each author's protection and ours, we want to make certain 43 | that everyone understands that there is no warranty for this free 44 | software. If the software is modified by someone else and passed on, we 45 | want its recipients to know that what they have is not the original, so 46 | that any problems introduced by others will not reflect on the original 47 | authors' reputations. 48 | 49 | Finally, any free program is threatened constantly by software 50 | patents. We wish to avoid the danger that redistributors of a free 51 | program will individually obtain patent licenses, in effect making the 52 | program proprietary. To prevent this, we have made it clear that any 53 | patent must be licensed for everyone's free use or not licensed at all. 54 | 55 | The precise terms and conditions for copying, distribution and 56 | modification follow. 57 | 58 | GNU GENERAL PUBLIC LICENSE 59 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 60 | 61 | 0. This License applies to any program or other work which contains 62 | a notice placed by the copyright holder saying it may be distributed 63 | under the terms of this General Public License. The "Program", below, 64 | refers to any such program or work, and a "work based on the Program" 65 | means either the Program or any derivative work under copyright law: 66 | that is to say, a work containing the Program or a portion of it, 67 | either verbatim or with modifications and/or translated into another 68 | language. (Hereinafter, translation is included without limitation in 69 | the term "modification".) Each licensee is addressed as "you". 70 | 71 | Activities other than copying, distribution and modification are not 72 | covered by this License; they are outside its scope. The act of 73 | running the Program is not restricted, and the output from the Program 74 | is covered only if its contents constitute a work based on the 75 | Program (independent of having been made by running the Program). 76 | Whether that is true depends on what the Program does. 77 | 78 | 1. You may copy and distribute verbatim copies of the Program's 79 | source code as you receive it, in any medium, provided that you 80 | conspicuously and appropriately publish on each copy an appropriate 81 | copyright notice and disclaimer of warranty; keep intact all the 82 | notices that refer to this License and to the absence of any warranty; 83 | and give any other recipients of the Program a copy of this License 84 | along with the Program. 85 | 86 | You may charge a fee for the physical act of transferring a copy, and 87 | you may at your option offer warranty protection in exchange for a fee. 88 | 89 | 2. You may modify your copy or copies of the Program or any portion 90 | of it, thus forming a work based on the Program, and copy and 91 | distribute such modifications or work under the terms of Section 1 92 | above, provided that you also meet all of these conditions: 93 | 94 | a) You must cause the modified files to carry prominent notices 95 | stating that you changed the files and the date of any change. 96 | 97 | b) You must cause any work that you distribute or publish, that in 98 | whole or in part contains or is derived from the Program or any 99 | part thereof, to be licensed as a whole at no charge to all third 100 | parties under the terms of this License. 101 | 102 | c) If the modified program normally reads commands interactively 103 | when run, you must cause it, when started running for such 104 | interactive use in the most ordinary way, to print or display an 105 | announcement including an appropriate copyright notice and a 106 | notice that there is no warranty (or else, saying that you provide 107 | a warranty) and that users may redistribute the program under 108 | these conditions, and telling the user how to view a copy of this 109 | License. (Exception: if the Program itself is interactive but 110 | does not normally print such an announcement, your work based on 111 | the Program is not required to print an announcement.) 112 | 113 | These requirements apply to the modified work as a whole. If 114 | identifiable sections of that work are not derived from the Program, 115 | and can be reasonably considered independent and separate works in 116 | themselves, then this License, and its terms, do not apply to those 117 | sections when you distribute them as separate works. But when you 118 | distribute the same sections as part of a whole which is a work based 119 | on the Program, the distribution of the whole must be on the terms of 120 | this License, whose permissions for other licensees extend to the 121 | entire whole, and thus to each and every part regardless of who wrote it. 122 | 123 | Thus, it is not the intent of this section to claim rights or contest 124 | your rights to work written entirely by you; rather, the intent is to 125 | exercise the right to control the distribution of derivative or 126 | collective works based on the Program. 127 | 128 | In addition, mere aggregation of another work not based on the Program 129 | with the Program (or with a work based on the Program) on a volume of 130 | a storage or distribution medium does not bring the other work under 131 | the scope of this License. 132 | 133 | 3. You may copy and distribute the Program (or a work based on it, 134 | under Section 2) in object code or executable form under the terms of 135 | Sections 1 and 2 above provided that you also do one of the following: 136 | 137 | a) Accompany it with the complete corresponding machine-readable 138 | source code, which must be distributed under the terms of Sections 139 | 1 and 2 above on a medium customarily used for software interchange; or, 140 | 141 | b) Accompany it with a written offer, valid for at least three 142 | years, to give any third party, for a charge no more than your 143 | cost of physically performing source distribution, a complete 144 | machine-readable copy of the corresponding source code, to be 145 | distributed under the terms of Sections 1 and 2 above on a medium 146 | customarily used for software interchange; or, 147 | 148 | c) Accompany it with the information you received as to the offer 149 | to distribute corresponding source code. (This alternative is 150 | allowed only for noncommercial distribution and only if you 151 | received the program in object code or executable form with such 152 | an offer, in accord with Subsection b above.) 153 | 154 | The source code for a work means the preferred form of the work for 155 | making modifications to it. For an executable work, complete source 156 | code means all the source code for all modules it contains, plus any 157 | associated interface definition files, plus the scripts used to 158 | control compilation and installation of the executable. However, as a 159 | special exception, the source code distributed need not include 160 | anything that is normally distributed (in either source or binary 161 | form) with the major components (compiler, kernel, and so on) of the 162 | operating system on which the executable runs, unless that component 163 | itself accompanies the executable. 164 | 165 | If distribution of executable or object code is made by offering 166 | access to copy from a designated place, then offering equivalent 167 | access to copy the source code from the same place counts as 168 | distribution of the source code, even though third parties are not 169 | compelled to copy the source along with the object code. 170 | 171 | 4. You may not copy, modify, sublicense, or distribute the Program 172 | except as expressly provided under this License. Any attempt 173 | otherwise to copy, modify, sublicense or distribute the Program is 174 | void, and will automatically terminate your rights under this License. 175 | However, parties who have received copies, or rights, from you under 176 | this License will not have their licenses terminated so long as such 177 | parties remain in full compliance. 178 | 179 | 5. You are not required to accept this License, since you have not 180 | signed it. However, nothing else grants you permission to modify or 181 | distribute the Program or its derivative works. These actions are 182 | prohibited by law if you do not accept this License. Therefore, by 183 | modifying or distributing the Program (or any work based on the 184 | Program), you indicate your acceptance of this License to do so, and 185 | all its terms and conditions for copying, distributing or modifying 186 | the Program or works based on it. 187 | 188 | 6. Each time you redistribute the Program (or any work based on the 189 | Program), the recipient automatically receives a license from the 190 | original licensor to copy, distribute or modify the Program subject to 191 | these terms and conditions. You may not impose any further 192 | restrictions on the recipients' exercise of the rights granted herein. 193 | You are not responsible for enforcing compliance by third parties to 194 | this License. 195 | 196 | 7. If, as a consequence of a court judgment or allegation of patent 197 | infringement or for any other reason (not limited to patent issues), 198 | conditions are imposed on you (whether by court order, agreement or 199 | otherwise) that contradict the conditions of this License, they do not 200 | excuse you from the conditions of this License. If you cannot 201 | distribute so as to satisfy simultaneously your obligations under this 202 | License and any other pertinent obligations, then as a consequence you 203 | may not distribute the Program at all. For example, if a patent 204 | license would not permit royalty-free redistribution of the Program by 205 | all those who receive copies directly or indirectly through you, then 206 | the only way you could satisfy both it and this License would be to 207 | refrain entirely from distribution of the Program. 208 | 209 | If any portion of this section is held invalid or unenforceable under 210 | any particular circumstance, the balance of the section is intended to 211 | apply and the section as a whole is intended to apply in other 212 | circumstances. 213 | 214 | It is not the purpose of this section to induce you to infringe any 215 | patents or other property right claims or to contest validity of any 216 | such claims; this section has the sole purpose of protecting the 217 | integrity of the free software distribution system, which is 218 | implemented by public license practices. Many people have made 219 | generous contributions to the wide range of software distributed 220 | through that system in reliance on consistent application of that 221 | system; it is up to the author/donor to decide if he or she is willing 222 | to distribute software through any other system and a licensee cannot 223 | impose that choice. 224 | 225 | This section is intended to make thoroughly clear what is believed to 226 | be a consequence of the rest of this License. 227 | 228 | 8. If the distribution and/or use of the Program is restricted in 229 | certain countries either by patents or by copyrighted interfaces, the 230 | original copyright holder who places the Program under this License 231 | may add an explicit geographical distribution limitation excluding 232 | those countries, so that distribution is permitted only in or among 233 | countries not thus excluded. In such case, this License incorporates 234 | the limitation as if written in the body of this License. 235 | 236 | 9. The Free Software Foundation may publish revised and/or new versions 237 | of the General Public License from time to time. Such new versions will 238 | be similar in spirit to the present version, but may differ in detail to 239 | address new problems or concerns. 240 | 241 | Each version is given a distinguishing version number. If the Program 242 | specifies a version number of this License which applies to it and "any 243 | later version", you have the option of following the terms and conditions 244 | either of that version or of any later version published by the Free 245 | Software Foundation. If the Program does not specify a version number of 246 | this License, you may choose any version ever published by the Free Software 247 | Foundation. 248 | 249 | 10. If you wish to incorporate parts of the Program into other free 250 | programs whose distribution conditions are different, write to the author 251 | to ask for permission. For software which is copyrighted by the Free 252 | Software Foundation, write to the Free Software Foundation; we sometimes 253 | make exceptions for this. Our decision will be guided by the two goals 254 | of preserving the free status of all derivatives of our free software and 255 | of promoting the sharing and reuse of software generally. 256 | 257 | NO WARRANTY 258 | 259 | 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY 260 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN 261 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES 262 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED 263 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 264 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS 265 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE 266 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, 267 | REPAIR OR CORRECTION. 268 | 269 | 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 270 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR 271 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, 272 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING 273 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED 274 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY 275 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER 276 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE 277 | POSSIBILITY OF SUCH DAMAGES. 278 | 279 | END OF TERMS AND CONDITIONS 280 | 281 | How to Apply These Terms to Your New Programs 282 | 283 | If you develop a new program, and you want it to be of the greatest 284 | possible use to the public, the best way to achieve this is to make it 285 | free software which everyone can redistribute and change under these terms. 286 | 287 | To do so, attach the following notices to the program. It is safest 288 | to attach them to the start of each source file to most effectively 289 | convey the exclusion of warranty; and each file should have at least 290 | the "copyright" line and a pointer to where the full notice is found. 291 | 292 | 293 | Copyright (C) 294 | 295 | This program is free software; you can redistribute it and/or modify 296 | it under the terms of the GNU General Public License as published by 297 | the Free Software Foundation; either version 2 of the License, or 298 | (at your option) any later version. 299 | 300 | This program is distributed in the hope that it will be useful, 301 | but WITHOUT ANY WARRANTY; without even the implied warranty of 302 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 303 | GNU General Public License for more details. 304 | 305 | You should have received a copy of the GNU General Public License along 306 | with this program; if not, write to the Free Software Foundation, Inc., 307 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. 308 | 309 | Also add information on how to contact you by electronic and paper mail. 310 | 311 | If the program is interactive, make it output a short notice like this 312 | when it starts in an interactive mode: 313 | 314 | Gnomovision version 69, Copyright (C) year name of author 315 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 316 | This is free software, and you are welcome to redistribute it 317 | under certain conditions; type `show c' for details. 318 | 319 | The hypothetical commands `show w' and `show c' should show the appropriate 320 | parts of the General Public License. Of course, the commands you use may 321 | be called something other than `show w' and `show c'; they could even be 322 | mouse-clicks or menu items--whatever suits your program. 323 | 324 | You should also get your employer (if you work as a programmer) or your 325 | school, if any, to sign a "copyright disclaimer" for the program, if 326 | necessary. Here is a sample; alter the names: 327 | 328 | Yoyodyne, Inc., hereby disclaims all copyright interest in the program 329 | `Gnomovision' (which makes passes at compilers) written by James Hacker. 330 | 331 | , 1 April 1989 332 | Ty Coon, President of Vice 333 | 334 | This General Public License does not permit incorporating your program into 335 | proprietary programs. If your program is a subroutine library, you may 336 | consider it more useful to permit linking proprietary applications with the 337 | library. If this is what you want to do, use the GNU Lesser General 338 | Public License instead of this License. 339 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # LDF - Little Dynamic Framework for making Single-Page Applications 2 | 3 | Tired of giant frameworks like Angular? 4 | 5 | Trying to avoid complicated stuff like MVC, Typescript or JSX and just want to create a website in good old plain JS HTML CSS? 6 | 7 | Want to make a small website feel 100x better because it's a Single-Page Application? 8 | 9 | Then this is the framework for you! 10 | 11 | ## Table of Contents 12 | 13 | - [Features](#features) 14 | - [Getting started](#getting-started) 15 | - [Configuration](#configuration) 16 | - [Component Swapping](#component-swapping) 17 | - [Non-Hash url](#non-hash-url) 18 | - [Quickstart with java server](#quickstart-with-java-server) 19 | - [Final Notes](#final-notes) 20 | 21 | ## Features 22 | 23 | Navigating your website with `a` tags like this 24 | 25 | ```html 26 | Login 27 | ``` 28 | 29 | will, instead of fully refreshing the page, dynamically load the requested content (in this case`login.html`), and switch out the old content with the new one. 30 | 31 | Additionally, LDF will wait for external resources (like stylesheets or images) to load before displaying the page. Demonstration with a throttled connection and cpu: 32 | 33 | ![demo](https://i.imgur.com/G9FTMYu.gif) 34 | 35 | The script will also change the browser's navigation bar via the History-API, so that the page can be refreshed and browser-features like back and forward will work. 36 | 37 | If you want to navigate your page via Javascript, all you have to do is call the `nav` function of the global `ldf` object like this, with the parameter being the page you want to navigate to: 38 | 39 | ```javascript 40 | ldf.nav("login"); 41 | ``` 42 | 43 | You can include css and js in your html files just like normal, they will also be dynamically loaded. 44 | 45 | For a small demonstration, check out the `demo` directory, [or check it out live.](https://ldf.js.org/demo/) 46 | 47 | **Notes:** 48 | 49 | If you dynamically add `a` tags via Javascript (not by changing the page with `ldf` but with for example `document.createElement`), you'll have to invoke `ldf.updatePageLinks()` in order for `a` tags to not reload the page. 50 | 51 | ## Getting started 52 | 53 | Just include the script in your index page like this: 54 | 55 | ``` 56 | 57 | ``` 58 | 59 | You also have to add a div element with the id "ldf"(configurable) in your `index.html` where you want your content to be like this: 60 | 61 | ``` 62 |
63 | ``` 64 | 65 | LDF expects a folder structure like this (directory name can be configured): 66 | 67 | ``` 68 | index.html required 69 | pages/ required 70 | ├── index/ required 71 | │ ├── index.html required 72 | │ ├── index.css 73 | │ └── index.js 74 | └── examplepage/ 75 | ├── examplepage.html 76 | └── styles.css 77 | ``` 78 | 79 | Each folder in the `pages` directory represents a page (duh) and will be loaded if a user navigates to the route named after the folder. So, for example if a user clicks on an `a` tag with `href="examplepage"`, LDF will attempt to load `pages/examplepage/examplepage.html`. 80 | The page `index` is required, and is the default content you'll see without any navigation. 81 | 82 | ## Configuration 83 | 84 | LDF currently allows for some configuration. 85 | 86 | ```javascript 87 | // The selector for which content should be switched out on page change 88 | ldf.mainselector = "#ldf"; 89 | // The content displayed when LDF receives a 404 from the server while requesting a page 90 | // Set this to undefined if you want LDF to display the error page it received from your server 91 | ldf.notfound = "
Page not Found
"; 92 | // The directory your pages are stored on the server, default is /pages 93 | ldf.pagedir = "/pages"; 94 | // A base url that is prepended for every navigation 95 | // Used in my case for github pages since that has a required base url 96 | ldf.baseurl = ""; 97 | // The css selector string LDF will wait on before displaying the page. 98 | // By default it waits for all stylesheets and all elements with a src attribute (like images), but not scripts. 99 | ldf.waitselector = "link[rel='stylesheet'],:not(script)[src]"; 100 | // Use hash urls, by default it's true. Hash urls look like this: domain.com/#login 101 | // The advantage of these is that you don't need a web server to handle refresh events, but the url doesn't look that good. 102 | ldf.hash = true; 103 | ``` 104 | 105 | ## Component swapping 106 | 107 | You can also use the functions provided by ldf to load pages into other elements like demonstrated here: ![demo](https://i.imgur.com/xessGiQ.gif) 108 | 109 | Methods you can use: 110 | 111 | ```javascript 112 | ldf.load(selector, location, \query); 113 | ldf.load("#header", "/header", "?fancy=true"); 114 | ``` 115 | 116 | ```javascript 117 | // external content will be waited on before the content is changed just like switching pages 118 | ldf.change(selector, htmlContent); 119 | ldf.change("#footer", "
new footer
11 | 21 | 22 | -------------------------------------------------------------------------------- /demo/ldf.js: -------------------------------------------------------------------------------- 1 | ../ldf.js -------------------------------------------------------------------------------- /demo/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ldf", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "accepts": { 8 | "version": "1.3.5", 9 | "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz", 10 | "integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=", 11 | "requires": { 12 | "mime-types": "~2.1.18", 13 | "negotiator": "0.6.1" 14 | } 15 | }, 16 | "array-flatten": { 17 | "version": "1.1.1", 18 | "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", 19 | "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" 20 | }, 21 | "body-parser": { 22 | "version": "1.18.2", 23 | "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.2.tgz", 24 | "integrity": "sha1-h2eKGdhLR9hZuDGZvVm84iKxBFQ=", 25 | "requires": { 26 | "bytes": "3.0.0", 27 | "content-type": "~1.0.4", 28 | "debug": "2.6.9", 29 | "depd": "~1.1.1", 30 | "http-errors": "~1.6.2", 31 | "iconv-lite": "0.4.19", 32 | "on-finished": "~2.3.0", 33 | "qs": "6.5.1", 34 | "raw-body": "2.3.2", 35 | "type-is": "~1.6.15" 36 | } 37 | }, 38 | "bytes": { 39 | "version": "3.0.0", 40 | "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", 41 | "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=" 42 | }, 43 | "content-disposition": { 44 | "version": "0.5.2", 45 | "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz", 46 | "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=" 47 | }, 48 | "content-type": { 49 | "version": "1.0.4", 50 | "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", 51 | "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==" 52 | }, 53 | "cookie": { 54 | "version": "0.3.1", 55 | "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz", 56 | "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=" 57 | }, 58 | "cookie-signature": { 59 | "version": "1.0.6", 60 | "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", 61 | "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" 62 | }, 63 | "debug": { 64 | "version": "2.6.9", 65 | "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", 66 | "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", 67 | "requires": { 68 | "ms": "2.0.0" 69 | } 70 | }, 71 | "depd": { 72 | "version": "1.1.2", 73 | "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", 74 | "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" 75 | }, 76 | "destroy": { 77 | "version": "1.0.4", 78 | "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", 79 | "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" 80 | }, 81 | "ee-first": { 82 | "version": "1.1.1", 83 | "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", 84 | "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" 85 | }, 86 | "encodeurl": { 87 | "version": "1.0.2", 88 | "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", 89 | "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" 90 | }, 91 | "escape-html": { 92 | "version": "1.0.3", 93 | "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", 94 | "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" 95 | }, 96 | "etag": { 97 | "version": "1.8.1", 98 | "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", 99 | "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" 100 | }, 101 | "express": { 102 | "version": "4.16.3", 103 | "resolved": "https://registry.npmjs.org/express/-/express-4.16.3.tgz", 104 | "integrity": "sha1-avilAjUNsyRuzEvs9rWjTSL37VM=", 105 | "requires": { 106 | "accepts": "~1.3.5", 107 | "array-flatten": "1.1.1", 108 | "body-parser": "1.18.2", 109 | "content-disposition": "0.5.2", 110 | "content-type": "~1.0.4", 111 | "cookie": "0.3.1", 112 | "cookie-signature": "1.0.6", 113 | "debug": "2.6.9", 114 | "depd": "~1.1.2", 115 | "encodeurl": "~1.0.2", 116 | "escape-html": "~1.0.3", 117 | "etag": "~1.8.1", 118 | "finalhandler": "1.1.1", 119 | "fresh": "0.5.2", 120 | "merge-descriptors": "1.0.1", 121 | "methods": "~1.1.2", 122 | "on-finished": "~2.3.0", 123 | "parseurl": "~1.3.2", 124 | "path-to-regexp": "0.1.7", 125 | "proxy-addr": "~2.0.3", 126 | "qs": "6.5.1", 127 | "range-parser": "~1.2.0", 128 | "safe-buffer": "5.1.1", 129 | "send": "0.16.2", 130 | "serve-static": "1.13.2", 131 | "setprototypeof": "1.1.0", 132 | "statuses": "~1.4.0", 133 | "type-is": "~1.6.16", 134 | "utils-merge": "1.0.1", 135 | "vary": "~1.1.2" 136 | } 137 | }, 138 | "finalhandler": { 139 | "version": "1.1.1", 140 | "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz", 141 | "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==", 142 | "requires": { 143 | "debug": "2.6.9", 144 | "encodeurl": "~1.0.2", 145 | "escape-html": "~1.0.3", 146 | "on-finished": "~2.3.0", 147 | "parseurl": "~1.3.2", 148 | "statuses": "~1.4.0", 149 | "unpipe": "~1.0.0" 150 | } 151 | }, 152 | "forwarded": { 153 | "version": "0.1.2", 154 | "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", 155 | "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=" 156 | }, 157 | "fresh": { 158 | "version": "0.5.2", 159 | "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", 160 | "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=" 161 | }, 162 | "http-errors": { 163 | "version": "1.6.3", 164 | "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", 165 | "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", 166 | "requires": { 167 | "depd": "~1.1.2", 168 | "inherits": "2.0.3", 169 | "setprototypeof": "1.1.0", 170 | "statuses": ">= 1.4.0 < 2" 171 | } 172 | }, 173 | "iconv-lite": { 174 | "version": "0.4.19", 175 | "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz", 176 | "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==" 177 | }, 178 | "inherits": { 179 | "version": "2.0.3", 180 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", 181 | "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" 182 | }, 183 | "ipaddr.js": { 184 | "version": "1.6.0", 185 | "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.6.0.tgz", 186 | "integrity": "sha1-4/o1e3c9phnybpXwSdBVxyeW+Gs=" 187 | }, 188 | "media-typer": { 189 | "version": "0.3.0", 190 | "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", 191 | "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" 192 | }, 193 | "merge-descriptors": { 194 | "version": "1.0.1", 195 | "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", 196 | "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=" 197 | }, 198 | "methods": { 199 | "version": "1.1.2", 200 | "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", 201 | "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=" 202 | }, 203 | "mime": { 204 | "version": "1.4.1", 205 | "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz", 206 | "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==" 207 | }, 208 | "mime-db": { 209 | "version": "1.33.0", 210 | "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz", 211 | "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==" 212 | }, 213 | "mime-types": { 214 | "version": "2.1.18", 215 | "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz", 216 | "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==", 217 | "requires": { 218 | "mime-db": "~1.33.0" 219 | } 220 | }, 221 | "ms": { 222 | "version": "2.0.0", 223 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", 224 | "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" 225 | }, 226 | "negotiator": { 227 | "version": "0.6.1", 228 | "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz", 229 | "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=" 230 | }, 231 | "on-finished": { 232 | "version": "2.3.0", 233 | "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", 234 | "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", 235 | "requires": { 236 | "ee-first": "1.1.1" 237 | } 238 | }, 239 | "parseurl": { 240 | "version": "1.3.2", 241 | "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz", 242 | "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M=" 243 | }, 244 | "path-to-regexp": { 245 | "version": "0.1.7", 246 | "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", 247 | "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=" 248 | }, 249 | "proxy-addr": { 250 | "version": "2.0.3", 251 | "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.3.tgz", 252 | "integrity": "sha512-jQTChiCJteusULxjBp8+jftSQE5Obdl3k4cnmLA6WXtK6XFuWRnvVL7aCiBqaLPM8c4ph0S4tKna8XvmIwEnXQ==", 253 | "requires": { 254 | "forwarded": "~0.1.2", 255 | "ipaddr.js": "1.6.0" 256 | } 257 | }, 258 | "qs": { 259 | "version": "6.5.1", 260 | "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz", 261 | "integrity": "sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A==" 262 | }, 263 | "range-parser": { 264 | "version": "1.2.0", 265 | "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz", 266 | "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=" 267 | }, 268 | "raw-body": { 269 | "version": "2.3.2", 270 | "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.2.tgz", 271 | "integrity": "sha1-vNYMd9Prk83gBQKVw/N5OJvIj4k=", 272 | "requires": { 273 | "bytes": "3.0.0", 274 | "http-errors": "1.6.2", 275 | "iconv-lite": "0.4.19", 276 | "unpipe": "1.0.0" 277 | }, 278 | "dependencies": { 279 | "depd": { 280 | "version": "1.1.1", 281 | "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz", 282 | "integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k=" 283 | }, 284 | "http-errors": { 285 | "version": "1.6.2", 286 | "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.2.tgz", 287 | "integrity": "sha1-CgAsyFcHGSp+eUbO7cERVfYOxzY=", 288 | "requires": { 289 | "depd": "1.1.1", 290 | "inherits": "2.0.3", 291 | "setprototypeof": "1.0.3", 292 | "statuses": ">= 1.3.1 < 2" 293 | } 294 | }, 295 | "setprototypeof": { 296 | "version": "1.0.3", 297 | "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz", 298 | "integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ=" 299 | } 300 | } 301 | }, 302 | "safe-buffer": { 303 | "version": "5.1.1", 304 | "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", 305 | "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==" 306 | }, 307 | "send": { 308 | "version": "0.16.2", 309 | "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz", 310 | "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==", 311 | "requires": { 312 | "debug": "2.6.9", 313 | "depd": "~1.1.2", 314 | "destroy": "~1.0.4", 315 | "encodeurl": "~1.0.2", 316 | "escape-html": "~1.0.3", 317 | "etag": "~1.8.1", 318 | "fresh": "0.5.2", 319 | "http-errors": "~1.6.2", 320 | "mime": "1.4.1", 321 | "ms": "2.0.0", 322 | "on-finished": "~2.3.0", 323 | "range-parser": "~1.2.0", 324 | "statuses": "~1.4.0" 325 | } 326 | }, 327 | "serve-static": { 328 | "version": "1.13.2", 329 | "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz", 330 | "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==", 331 | "requires": { 332 | "encodeurl": "~1.0.2", 333 | "escape-html": "~1.0.3", 334 | "parseurl": "~1.3.2", 335 | "send": "0.16.2" 336 | } 337 | }, 338 | "setprototypeof": { 339 | "version": "1.1.0", 340 | "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz", 341 | "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==" 342 | }, 343 | "statuses": { 344 | "version": "1.4.0", 345 | "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", 346 | "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==" 347 | }, 348 | "type-is": { 349 | "version": "1.6.16", 350 | "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz", 351 | "integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==", 352 | "requires": { 353 | "media-typer": "0.3.0", 354 | "mime-types": "~2.1.18" 355 | } 356 | }, 357 | "unpipe": { 358 | "version": "1.0.0", 359 | "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", 360 | "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" 361 | }, 362 | "utils-merge": { 363 | "version": "1.0.1", 364 | "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", 365 | "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" 366 | }, 367 | "vary": { 368 | "version": "1.1.2", 369 | "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", 370 | "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" 371 | } 372 | } 373 | } 374 | -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ldf", 3 | "version": "1.0.0", 4 | "description": "LDF - Little Dynamic Framework for making Single Page Applications", 5 | "main": "test.js", 6 | "scripts": { 7 | "test": "node test.js" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "github.com/AUTplayed/ldf" 12 | }, 13 | "author": "", 14 | "license": "", 15 | "dependencies": { 16 | "express": "^4.16.3" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /demo/pages/controls/controls.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /demo/pages/controls/controls.js: -------------------------------------------------------------------------------- 1 | var $ = document.querySelector.bind(document); 2 | $("#btn").addEventListener("click", function () { 3 | alert("clicked"); 4 | ldf.nav("helloworld"); 5 | }); -------------------------------------------------------------------------------- /demo/pages/helloworld/helloworld.css: -------------------------------------------------------------------------------- 1 | #hw { 2 | font-weight: bold 3 | } -------------------------------------------------------------------------------- /demo/pages/helloworld/helloworld.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Hello World!

4 | -------------------------------------------------------------------------------- /demo/pages/index/index.html: -------------------------------------------------------------------------------- 1 |

Main Page

-------------------------------------------------------------------------------- /demo/pages/login/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AUTplayed/ldf/ac5fda26e7bb180f361a72c6fdd468564f7bf7d9/demo/pages/login/icon.png -------------------------------------------------------------------------------- /demo/pages/login/login.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --ldf_dark: #061F30; 3 | --ldf_purple: #383B6B; 4 | --ldf_bright: #1A86D1; 5 | --ldf_light: #F4F8FF; 6 | } 7 | #logincontainer{ 8 | width: 25%; 9 | float:right; 10 | margin-left: 10%; 11 | border: 1px solid #95989A; 12 | background-color: white; 13 | } 14 | 15 | #imagecontainer{ 16 | margin-right: 10%; 17 | } 18 | 19 | #logincentercontainer { 20 | width: 100%; 21 | height: 80vh; 22 | display:flex;justify-content:center;align-items:center; 23 | } 24 | 25 | #logincontainer > hr { 26 | margin-bottom: 10px; 27 | margin-top: 5px; 28 | margin-left: 20px; 29 | margin-right: 20px; 30 | } 31 | 32 | #title{ 33 | font-size: 45px; 34 | text-align: center; 35 | color: var(--ldf_purple); 36 | } 37 | 38 | .inputpair > input{ 39 | display: block; 40 | width:92%; 41 | box-sizing: border-box; 42 | height:35px; 43 | padding-left: 15px; 44 | border: 1.5px solid #7A7B7B; 45 | margin-top:8px; 46 | margin-bottom: 15px; 47 | } 48 | 49 | .inputpair > label { 50 | font-size: 18px; 51 | } 52 | 53 | .inputpair > p{ 54 | font-size: 12px; 55 | } 56 | 57 | .inputpair{ 58 | padding-left: 4%; 59 | padding-right: 4%; 60 | width:100%; 61 | display: block; 62 | } 63 | #btn_login_container{ 64 | margin:auto; 65 | width: 100%; 66 | height: 50px; 67 | margin-bottom:8%; 68 | display:flex; 69 | align-content: center; 70 | } 71 | 72 | #btn_login{ 73 | color: var(--ldf_light); 74 | background-color: var(--ldf_purple); 75 | border: 1px solid var(--ldf_dark); 76 | box-shadow: 6px 9px 0px 0px black; 77 | position:relative; 78 | margin-top: 20px; 79 | margin-left:auto;margin-right:auto; 80 | width: 30%; 81 | height: 90%; 82 | transition:all 0.2s; 83 | } 84 | #btn_login:hover{ 85 | cursor:pointer; 86 | } 87 | #btn_login:active{ 88 | box-shadow: 0px 0px 0px 0px black; 89 | transform: translate(6px, 9px); 90 | outline: none; 91 | } 92 | #btn_login:focus{ 93 | outline: none; 94 | box-shadow: 0px 0px 0px 0px black; 95 | transform: translate(6px, 9px); 96 | } 97 | 98 | #loginregister { 99 | font-size: 12px; 100 | } 101 | 102 | #loginicon{ 103 | margin-left: 10%; 104 | float:left; 105 | } 106 | 107 | @media(max-width: 768px){ 108 | #loginicon{ 109 | display: none; 110 | } 111 | #logincontainer{ 112 | width: 80%; 113 | height: unset; 114 | float: none; 115 | margin-left: 10%; 116 | margin-right: 10%; 117 | border: 1px solid #95989A; 118 | background-color: white; 119 | } 120 | #imagecontainer { 121 | margin-right: 0px; 122 | } 123 | } -------------------------------------------------------------------------------- /demo/pages/login/login.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | icon 5 |
6 |
7 |

Login

8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

No Account yet? 19 | Click here 20 |

21 | 22 |
23 | 24 |
25 |
26 |
27 | -------------------------------------------------------------------------------- /demo/test.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const app = express(); 3 | 4 | // You'll only need a web server if you don't want to use hash urls 5 | app.use(express.static(__dirname)); 6 | app.get("/:page", (req, res) => { 7 | res.sendFile(require("path").join(__dirname, "index.html")); 8 | }); 9 | app.listen(8080, console.log("Server running on localhost:8080")); -------------------------------------------------------------------------------- /ldf.js: -------------------------------------------------------------------------------- 1 | var ldf = { 2 | mainselector: "#ldf", 3 | notfound: "
Page not Found
", 4 | waitselector: "link[rel='stylesheet'],:not(script):not(iframe)[src]", 5 | pagedir: "pages", 6 | baseurl: "", 7 | begin: undefined, 8 | end: undefined, 9 | hash: true, 10 | nav: function (location) { 11 | if (ldf.hash && !location.startsWith("#") && location != "/") { 12 | location = "#" + location; 13 | } 14 | if (ldf.baseurl != "" && location == "/") location = ""; 15 | history.pushState(null, "", ldf.baseurl + location); 16 | ldf.locchange(); 17 | }, 18 | locchange: function () { 19 | if (ldf.begin) ldf.begin(); 20 | var query, loc; 21 | if (ldf.hash) { 22 | query = document.location.hash.split("\?")[1] || ""; 23 | query = query ? "?" + query : ""; 24 | loc = document.location.hash; 25 | } else { 26 | query = document.location.search || ""; 27 | loc = document.location.pathname; 28 | } 29 | var matches = loc.match(/(?<=#|\/)[^?|\/]*/); 30 | if (matches != null && matches.length > 0) loc = matches.pop(); 31 | if (loc == "") loc = "index"; 32 | ldf.load(ldf.mainselector, loc, query); 33 | }, 34 | load: function (selector, loc, query) { 35 | if (!loc.startsWith("/")) { 36 | loc = "/" + loc; 37 | } 38 | loc = ldf.pagedir + loc + loc + ".html"; 39 | loc += query; 40 | ldf.helpers.request(loc, function (succ, content) { 41 | if (succ || ldf.notfound == undefined) { 42 | ldf.change(selector, content); 43 | } else { 44 | ldf.change(selector, ldf.notfound); 45 | } 46 | }); 47 | }, 48 | change: function (selector, content) { 49 | var ldfnode = document.querySelector(selector); 50 | var ldfclone = ldfnode.cloneNode(); 51 | var ended = false; 52 | ldfclone.innerHTML = content; 53 | ldfclone.style.display = "none"; 54 | ldfnode.parentElement.insertBefore(ldfclone, ldfnode); 55 | ldf.helpers.waitForLoad(ldfclone.querySelectorAll(ldf.waitselector), 56 | function () { 57 | if (!ended) { 58 | ended = true; 59 | ldfnode.remove(); 60 | ldfclone.style.display = ""; 61 | if (ldf.end) ldf.end(); 62 | } 63 | } 64 | ); 65 | ldf.updatePageLinks(); 66 | ldf.loadScripts(ldfclone); 67 | }, 68 | updatePageLinks: function () { 69 | document.querySelectorAll("a").forEach(function (a) { 70 | var className = a.className; 71 | var href = a.href; 72 | if (className.includes("ldfignore")) return; 73 | if (href.startsWith("javascript:")) return; 74 | if (className.includes("ldfinclude") || (href && (href.includes(location.href.split("#")[0]) || a.getAttribute("href") == "/") && !href.split("/").pop().match(/\.(?!html)/))) { 75 | a.removeEventListener("click", ldf.helpers.listener); 76 | a.addEventListener("click", ldf.helpers.listener); 77 | } 78 | }); 79 | }, 80 | loadScripts: function (node) { 81 | node.querySelectorAll("script").forEach(function (old) { 82 | var src = old.getAttribute("src"); 83 | var parent = old.parentNode; 84 | parent.removeChild(old); 85 | var script = document.createElement("script"); 86 | script.setAttribute("src", src); 87 | parent.appendChild(script); 88 | }); 89 | }, 90 | helpers: { 91 | waitForLoad: function (loadings, cb) { 92 | if (loadings.length > 0) { 93 | var loadedcounter = 0; 94 | var onloadOrError = function () { 95 | loadedcounter++; 96 | if (loadedcounter == loadings.length) { 97 | cb(); 98 | } 99 | } 100 | loadings.forEach(function (loading) { 101 | loading.onload = onloadOrError; 102 | loading.onerror = onloadOrError; 103 | }); 104 | } else { 105 | cb(); 106 | } 107 | }, 108 | listener: function (e) { 109 | e.preventDefault(); 110 | var loc = ""; 111 | if (e.target.tagName === "A") { 112 | loc = e.target.getAttribute("href"); 113 | } else { 114 | for (var i = 1; i < e.path.length; i++) { 115 | if (e.path[i].tagName === "A") { 116 | loc = e.path[i].getAttribute("href"); 117 | break; 118 | } 119 | } 120 | } 121 | ldf.nav(loc); 122 | }, 123 | request: function (loc, cb) { 124 | var req = new XMLHttpRequest(); 125 | req.open("GET", loc); 126 | req.send(); 127 | req.onreadystatechange = function () { 128 | if (req.readyState === 4) { 129 | cb(req.status.toString().startsWith("2"), req.response); 130 | } 131 | }; 132 | } 133 | } 134 | }; 135 | 136 | onpopstate = ldf.locchange; 137 | onload = ldf.locchange; 138 | --------------------------------------------------------------------------------