url-fragment-extender
Version:
This allows for easy manipulation and extension of URL fragments, as well as handling custom events based on the URL hash.
222 lines (196 loc) • 8.8 kB
HTML
<html>
<head>
<title>URL Fragment Extender</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" />
<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" />
<script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
<style>
#list-headers ul {
list-style: none;
padding-left: .5em;
}
#list-headers > ul {
padding: 0;
}
#list-headers h1, h2, h3, h4, h5 {
white-space: nowrap;
}
.markdown-body {
padding-left: 2em;
}
@media (min-width: 992px) {
.vh-lg-100{
height: 100vh ;
}
}
</style>
</head>
<body>
<div class="row w-100">
<div class="col-12 text-center">
<h1 id="url-fragment-extender">URL Fragment Extender</h1>
<p>This allows for easy manipulation and extension of URL fragments,<br>
as well as handling custom events based on the URL hash.<br>
This manual is also available in <a href="https://manuel-lohmus.github.io/url-fragment-extender/README.html">HTML5</a>.</p>
</div>
</div>
<div class="row w-100">
<div class="col-lg-3 d-lg-inline">
<div class="sticky-top overflow-auto vh-lg-100">
<div id="list-headers" class="list-group mt-2 ms-lg-2 ms-4">
<h4 id="table-of-contents">Table of contents</h4>
<ul>
<li><a href="#description"><strong>Description</strong></a></li>
<li><a href="#installation"><strong>Installation</strong></a></li>
<li><a href="#usage"><strong>Usage</strong></a></li>
<li><a href="#license"><strong>License</strong></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-9 mt-2">
<div class="ps-4 markdown-body" data-bs-spy="scroll" data-bs-target="#list-headers" data-bs-offset="0" tabindex="0">
<h2 id="description">Description</h2>
<p>The module <code>url-fragment-extender</code> that provides functionality to read and manipulate URL fragments.
It includes an event emitter to handle custom events and listens for changes in the URL hash.
This module is part of the <a href="https://www.npmjs.com/package/conextra">'conextra'</a> framework,
which is a simple and easy-to-use single-page application (SPA) framework.
You have to try it! A different solution than MVC (model–view–controller).</p>
<h2 id="installation">Installation</h2>
<p>You can install <code>url-fragment-extender</code> using this command:</p>
<p><code>npm install url-fragment-extender</code></p>
<h3 id="browser">browser:</h3>
<p><code><script src="https://cdn.jsdelivr.net/npm/url-fragment-extender" ></script></code></p>
<h3 id="using-tiny-https-server-router">using tiny-https-server router:</h3>
<p>or use <a href="https://www.npmjs.com/package/tiny-https-server">'tiny-https-server'</a> router:
<code><script async src="node_modules/url-fragment-extender@2"></script></code></p>
<h2 id="usage">Usage</h2>
<p>Here is also a <a href="https://manuel-lohmus.github.io/url-fragment-extender/index.html">DEMO</a></p>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>url-fragment-extender</title>
<!-- STEP 1. Import the modules 'url-fragment-extender'.
Import for an HTML page hosted on the server. -->
<script async type="text/javascript" src="./browser.js"></script>
<!-- STEP 1. Import the modules 'url-fragment-extender'.
Import for a standalone HTML page. -->
<!--<script async src="https://cdn.jsdelivr.net/npm/url-fragment-extender"></script>-->
<script>
// STEP 3. Import the module.
importModules(['url-fragment-extender'], function (UFE) {
UFE.on('', function (event) {
$('#content').innerHTML = '';
//I am live. Continue listening.
return true;
});
UFE.on('temp_1', function (event) {
$('#content').innerHTML = $('#temp_1').innerHTML;
//I am live. Continue listening.
return true;
});
UFE.on('temp_2', function (event) {
$('#content').innerHTML = $('#temp_2').innerHTML;
//I am live. Continue listening.
return true;
});
UFE.on('temp_3', function (event) {
$('#content').innerHTML = $('#temp_3').innerHTML;
//I am live. Continue listening.
return true;
});
});
// STEP 2. Add module import function.
/**
* Module import function - step 2.
* @param {string[]} importIdentifierArray Modules to import.
* @param {(...importModules:any[]) => void} callback Callback function.
*/
function importModules(importIdentifierArray, cb) {
var thisScope = "undefined" != typeof globalThis
? globalThis
: "undefined" != typeof window
? window
: "undefined" != typeof global
? global : "undefined" != typeof self
? self
: {};
if (!thisScope.modules) { thisScope.modules = {}; }
waitModules();
function waitModules() {
if (importIdentifierArray.length) {
for (let i = 0; i < importIdentifierArray.length; i++) {
if (!thisScope.modules[importIdentifierArray[i]]) { return setTimeout(waitModules, 10); }
}
}
cb.call(thisScope, ...importIdentifierArray.map(function (id) { return thisScope.modules[id]; }));
}
}
function $(selector, element) { return (element || document).querySelector(selector); }
</script>
<style>
.button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007bff;
text-align: center;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
margin: 5px;
}
.button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div>
<a class="button" href="#temp_1">template 1</a>
<a class="button" href="#temp_2">template 2</a>
<a class="button" href="#temp_3">template 3</a>
</div>
<br />
<div id="content"></div>
<template id="temp_1">
<div style="background-color:darkgreen;color:whitesmoke"><h1>template 1</h1></div>
</template>
<template id="temp_2">
<div style="background-color:burlywood;color:darkslateblue"><h2>template 2</h2></div>
</template>
<template id="temp_3">
<div><h3>template 3</h3></div>
</template>
</body>
</html>
</code></pre>
<h2 id="license">License</h2>
<p>This project is licensed under the MIT License.</p>
<p>Copyright © Manuel Lõhmus</p>
<p><a href="https://www.paypal.com/donate?hosted_button_id=SA5RPUB5GKBB2"><img src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" alt="Donate" /></a></p>
<p>Donations are welcome and will go towards further development of this project.</p>
<br>
<br>
<br>
</div>
</div>
</div>
<script>
(function () {
'use strict';
var isIE = !!document.documentMode; // Detect IE
if (!isIE) {
// list-group style for headers
document.querySelectorAll('#list-headers a')
.forEach(function (a) { a.classList.add('list-group-item', 'list-group-item-action') });
}
})();
</script>
</body>
</html>