moved navbar to js for easier editing

This commit is contained in:
Mystikfluu 2022-06-04 17:00:26 +02:00
parent 3d36086134
commit 2632d8c133
8 changed files with 95 additions and 28 deletions

87
js/addnavbar.js Normal file
View File

@ -0,0 +1,87 @@
(function(funcName, baseObj) {
"use strict";
// The public function name defaults to window.docReady
// but you can modify the last line of this function to pass in a different object or method name
// if you want to put them in a different namespace and those will be used instead of
// window.docReady(...)
funcName = funcName || "docReady";
baseObj = baseObj || window;
var readyList = [];
var readyFired = false;
var readyEventHandlersInstalled = false;
// call this when the document is ready
// this function protects itself against being called more than once
function ready() {
if (!readyFired) {
// this must be set to true before we start calling callbacks
readyFired = true;
for (var i = 0; i < readyList.length; i++) {
// if a callback here happens to add new ready handlers,
// the docReady() function will see that it already fired
// and will schedule the callback to run right after
// this event loop finishes so all handlers will still execute
// in order and no new ones will be added to the readyList
// while we are processing the list
readyList[i].fn.call(window, readyList[i].ctx);
}
// allow any closures held by these functions to free
readyList = [];
}
}
function readyStateChange() {
if ( document.readyState === "complete" ) {
ready();
}
}
// This is the one public interface
// docReady(fn, context);
// the context argument is optional - if present, it will be passed
// as an argument to the callback
baseObj[funcName] = function(callback, context) {
if (typeof callback !== "function") {
throw new TypeError("callback for docReady(fn) must be a function");
}
// if ready has already fired, then just schedule the callback
// to fire asynchronously, but right away
if (readyFired) {
setTimeout(function() {callback(context);}, 1);
return;
} else {
// add the function and context to the list
readyList.push({fn: callback, ctx: context});
}
// if document already ready to go, schedule the ready function to run
// IE only safe when readyState is "complete", others safe when readyState is "interactive"
if (document.readyState === "complete" || (!document.attachEvent && document.readyState === "interactive")) {
setTimeout(ready, 1);
} else if (!readyEventHandlersInstalled) {
// otherwise if we don't have event handlers installed, install them
if (document.addEventListener) {
// first choice is DOMContentLoaded event
document.addEventListener("DOMContentLoaded", ready, false);
// backup is window load event
window.addEventListener("load", ready, false);
} else {
// must be IE
document.attachEvent("onreadystatechange", readyStateChange);
window.attachEvent("onload", ready);
}
readyEventHandlersInstalled = true;
}
}
})("docReady", window);
const navbar = `<ul class="navbar">
<li><a href="/">Home</a></li>
<li><a href="/user">Profile</a></li>
<li><a href="/posts">Posts</a></li>
</ul>`
function addnavbar() {
document.body.innerHTML = navbar + document.body.innerHTML
}
window.docReady(addnavbar)

View File

@ -7,14 +7,10 @@
<title>Change Password</title>
<link rel="stylesheet" href="/css/changePW.css">
<link rel="stylesheet" href="/css/global.css">
<script src="/js/addnavbar.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/httppost.js"></script>
</head>
<body>
<ul class="navbar">
<li><a href="/">Home</a></li>
<li><a href="/user">Profile</a></li>
<li><a href="/posts">Posts</a></li>
</ul>
<div>
<h1 id="username">Current User: USER</h1>
<label for="currentPW">Current Password:</label>

View File

@ -4,14 +4,10 @@
<link rel="stylesheet" href="/css/logon.css">
<link rel="stylesheet" href="/css/global.css">
<script src="/js/index.js" charset="utf-8"></script>
<script src="/js/addnavbar.js" charset="utf-8"></script>
</head>
<body>
<ul class="navbar">
<li><a href="/">Home</a></li>
<li><a href="/user" id="hide_user">Profile</a></li>
<li><a href="/posts" id="hide_posts">Posts</a></li>
</ul>
<header>
<h1>IPost</h1>
</header>

View File

@ -1,13 +1,14 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="/css/logon.css">
<link rel="stylesheet" href="/css/logon.css">
<script type="text/javascript">
function login() {
const user = document.getElementById("user").value
const pw = document.getElementById("pass").value
}
</script>
<script src="/js/addnavbar.js" charset="utf-8"></script>
</head>
<body>

View File

@ -7,14 +7,9 @@
<title>USERS Page</title>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/global.css">
<script src="/js/addnavbar.js" charset="utf-8"></script>
</head>
<body>
<ul class="navbar">
<li><a href="/">Home</a></li>
<li><a href="/user">Profile</a></li>
<li><a href="/posts">Posts</a></li>
</ul>
<header>
<h1 id="userName">USER</h1>
</header>

View File

@ -7,14 +7,9 @@
<link rel="stylesheet" href="/css/global.css">
<script type="text/javascript" src="/js/httppost.js"></script>
<script type="text/javascript" src="/js/htmlescape.js"></script>
<script src="/js/addnavbar.js" charset="utf-8"></script>
</head>
<body>
<ul class="navbar">
<li><a href="/">Home</a></li>
<li><a href="/user">Profile</a></li>
<li><a href="/posts">Posts</a></li>
</ul>
<div class="self">
Username: <span class="Username" id="username-self"></span> <br>
<textarea name="name" id="post-text" rows="8" cols="80"></textarea>

View File

@ -8,6 +8,7 @@
const pw = document.getElementById("pass").value
}
</script>
<script src="/js/addnavbar.js" charset="utf-8"></script>
</head>
<body>

View File

@ -7,15 +7,11 @@
<title>Logged In</title>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/global.css">
<script src="/js/addnavbar.js" charset="utf-8"></script>
<script src="/js/httppost.js" charset="utf-8"></script>
<script src="/js/user.js" charset="utf-8"></script>
</head>
<body onload="setuser()">
<ul class="navbar">
<li><a href="/">Home</a></li>
<li><a href="/user">Profile</a></li>
<li><a href="/posts">Posts</a></li>
</ul>
<header>
<h1>Welcome Back!</h1>
</header>