url-fragment-extender
v2.0.0-rc.3
Published
This allows for easy manipulation and extension of URL fragments, as well as handling custom events based on the URL hash.
Downloads
11
Readme
URL Fragment Extender
This allows for easy manipulation and extension of URL fragments, as well as handling custom events based on the URL hash. This manual is also available in HTML5.
Table of contents
Description
The module url-fragment-extender 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 'conextra' 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).
Installation
You can install url-fragment-extender using this command:
npm install url-fragment-extender
browser:
<script src="https://cdn.jsdelivr.net/npm/url-fragment-extender" ></script>
using tiny-https-server router:
or use 'tiny-https-server' router:
<script async src="node_modules/url-fragment-extender@2"></script>
Usage
Here is also a DEMO
<!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>License
This project is licensed under the MIT License.
Copyright © Manuel Lõhmus
Donations are welcome and will go towards further development of this project.