template/src/main/js/Template.js

93 lines
2.8 KiB
JavaScript

import h from "hyperscript";
import "milligram/dist/milligram.css";
import "normalize.css/normalize.css";
import "../css/common.css";
/**
* Alias for `document.querySelector`.
*
* @param q {string} the query string
* @returns {HTMLElement} the element identified by the query string
*/
export const $ = q => document.querySelector(q);
/**
* Runs the given function once the page is loaded.
*
* This function can be used multiple times. It does not overwrite existing callbacks for the page load event.
*
* @param fun {function(...*): *} the function to run
*/
export const doAfterLoad = function (fun) {
const oldOnLoad = window.onload || (() => {
});
window.onload = (() => {
oldOnLoad();
fun();
});
};
/**
* Creates a header element with the given title and description.
*
* @param title {string} the title to display
* @param description {string} the description to display
* @returns {HTMLElement} a header element
*/
export const header = function ({title, description}) {
return h("header.header",
h("section.container",
h("h1", title),
h("p", h("em", description))
)
);
};
/**
* Creates a footer element with the given data.
*
* @param [author] {string} the author
* @param [authorURL] {string} the URL to link the author's name to
* @param [license] {string} the type of license
* @param [licenseURL] {string} the URL to the license file
* @param [vcs] {string} the type of version control
* @param [vcsURL] {string} the URL to the repository
* @param [version] {string} the page version
* @returns {HTMLElement} a footer element
*/
export const footer = function ({author, authorURL, license, licenseURL, vcs, vcsURL, version}) {
return h("footer.footer",
h("section.container",
footerLink("Made by ", author, authorURL, ". "),
footerLink("Licensed under the ", license, licenseURL, ". "),
footerLink("Source code available on ", vcs, vcsURL, ". "),
h("div", version || "", {style: {"float": "right"}})
)
);
};
/**
* Constructs a link that is used in footers.
*
* @param prefix {string} the text to display before the text if the text is not undefined
* @param text {string|undefined} the text to display, or `undefined` if the returned element should be empty
* @param url {string|undefined} the URL to link the text to, or `undefined` if the text should not be a link
* @param suffix {string} the text to display after the text if the text is not undefined
* @returns {HTMLElement} a footer link element
*/
const footerLink = function (prefix, text, url, suffix) {
if (text === undefined) return h("span");
return h("span",
h("span", prefix),
url !== undefined
? h("a", text, {href: url})
: h("span", text),
h("span", suffix)
);
};