Added ./libs/ direcroty (and the pages).
This commit is contained in:
@@ -0,0 +1,168 @@
|
||||
//const libCCss = `//#file { ./lib_style.css }`
|
||||
const libCss = `
|
||||
:root {
|
||||
--c-a-cell-width: 0px; /* automatically set */
|
||||
--c-a-cell-height: 0px; /* automatically set */
|
||||
|
||||
--c-width: 700px;
|
||||
--c-height: 400px;
|
||||
--c-cell-x-count: 7;
|
||||
--c-cell-y-count: 7;
|
||||
--c-time-width: 50px;
|
||||
--c-date-height: 1.5em;
|
||||
|
||||
--c-s-grid-line-width: 2px;
|
||||
--c-s-grid-line-color: #000000;
|
||||
}
|
||||
|
||||
div.c-base {
|
||||
background-color: darkgray;
|
||||
display: grid;
|
||||
grid-template-columns: var(--c-time-width) 1fr;
|
||||
grid-template-rows: var(--c-date-height) 1fr;
|
||||
width: var(--c-width);
|
||||
height: var(--c-height);
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
ul.c-ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul.c-times {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(var(--c-cell-y-count), 1fr);
|
||||
grid-template-columns: 1fr;
|
||||
margin: -0.5em 0;
|
||||
}
|
||||
|
||||
ul.c-dates {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--c-cell-x-count), 1fr);
|
||||
grid-template-rows: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.c-grid {
|
||||
background: /* Grid lines */
|
||||
repeating-linear-gradient(
|
||||
0deg,
|
||||
var(--c-s-grid-line-color),
|
||||
var(--c-s-grid-line-color) var(--c-s-grid-line-width),
|
||||
transparent var(--c-s-grid-line-width),
|
||||
transparent calc((var(--c-height) / var(--c-cell-y-count)))
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--c-s-grid-line-color),
|
||||
var(--c-s-grid-line-color) var(--c-s-grid-line-width),
|
||||
transparent var(--c-s-grid-line-width),
|
||||
transparent calc((var(--c-width) / var(--c-cell-x-count)))
|
||||
);
|
||||
|
||||
background-size: calc(100% / var(--c-cell-x-count))
|
||||
calc(100% / var(--c-cell-y-count));
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--c-cell-x-count), 1fr);
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
class CalendarSettings {
|
||||
// Not implemented
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* A calendar-style element.
|
||||
*/
|
||||
class Calendar {
|
||||
debug = false;
|
||||
|
||||
/**
|
||||
* Creates a calendar object.
|
||||
*
|
||||
* @param {number} cellCountX How many cells on the X axis
|
||||
* @param {number} cellCountY How many cells on the Y axis
|
||||
* @param {[string]} timeItems A list of strings that is rendered to the left of the grid (usually timestamps)
|
||||
* @param {[string]} dateItems A list of strings that is rendered above the grid (usually dates)
|
||||
*/
|
||||
constructor(cellCountX, cellCountY, timeItems, dateItems) {
|
||||
this.cellCount = { x: cellCountX, y: cellCountY };
|
||||
this.timeItems = timeItems;
|
||||
this.dateItems = dateItems;
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds the calendar element to the document. This method also generates the calendar element.
|
||||
*
|
||||
* @param {HTMLElement} child An optional HTML element where the calendar resides in. No value makes it use the <body>.
|
||||
*/
|
||||
attachElement(child = null) {
|
||||
console.log("Attached calendar to HTML page.");
|
||||
child.appendChild(this.#generateElement());
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds pre-made CSS to the document. This CSS can be partially overridden or can be skipped completely.
|
||||
*/
|
||||
attachCss() {
|
||||
let s = document.createElement("style");
|
||||
s.textContent = libCss;
|
||||
document.head.insertBefore(s, document.head.firstChild);
|
||||
}
|
||||
|
||||
|
||||
#generateElement() {
|
||||
let c = document.createElement("div");
|
||||
c.className = "c-base";
|
||||
|
||||
let cEmpty = document.createElement("div");
|
||||
cEmpty.style.display = "inline-block";
|
||||
|
||||
let cDates = document.createElement("ul");
|
||||
cDates.className = "c-dates c-ul";
|
||||
|
||||
let cTimes = document.createElement("ul");
|
||||
cTimes.className = "c-times c-ul";
|
||||
|
||||
let cGrid = document.createElement("div");
|
||||
cGrid.className = "c-grid";
|
||||
|
||||
if (this.debug) {
|
||||
let s = "red solid 1px";
|
||||
cDates.style.outline = s;
|
||||
cTimes.style.outline = s;
|
||||
cGrid.style.outline = "blue solid 1px";
|
||||
}
|
||||
|
||||
let all = [cEmpty, cDates, cTimes, cGrid];
|
||||
for (let el of all) { c.appendChild(el); }
|
||||
|
||||
this.#generateDates(cDates);
|
||||
this.#generateTimes(cTimes);
|
||||
|
||||
return c;
|
||||
}
|
||||
|
||||
#generateDates(el) {
|
||||
for (let i of this.dateItems) {
|
||||
let li = document.createElement("li");
|
||||
li.innerText = i;
|
||||
el.appendChild(li);
|
||||
}
|
||||
}
|
||||
|
||||
#generateTimes(el) {
|
||||
for (let i of this.timeItems) {
|
||||
let li = document.createElement("li");
|
||||
li.className = "c-time";
|
||||
li.innerText = i;
|
||||
el.appendChild(li);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
|
||||
|
||||
<link rel="stylesheet" href="/global/navBar.css">
|
||||
<link rel="stylesheet" href="/global/globalStyle.css">
|
||||
<link rel="stylesheet" href="/global/loadingScreen.css">
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
|
||||
<link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
|
||||
<title>Byte Dice - Libs [EXPERIMENTAL]</title>
|
||||
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="https://bytedice.net/libs/test">
|
||||
|
||||
<meta name="description" content="A list of JS libraries made by Byte Dice. [EXPERIMENTAL]">
|
||||
<meta name="keywords" content="Byte Dice, pixel art, procedural generation, game art, digital art, ByteDice showcase, library">
|
||||
<meta name="author" content="Byte Dice">
|
||||
|
||||
<meta property="og:title" content="Byte Dice">
|
||||
<meta property="og:description" content="A list of JS libraries made by Byte Dice. [EXPERIMENTAL]">
|
||||
<meta property="og:url" content="https://bytedice.net/libs/test">
|
||||
<meta property="og:type" content="website">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="mainDiv">
|
||||
<div id="navBarContainer" data-alt="byte, noAnim, return"></div>
|
||||
|
||||
<div class="encased" style="margin: calc(3px * var(--pxDensity)); max-width: 30em">
|
||||
<h1 style="margin-bottom: calc(1px * var(--pxDensity)); font-size: 2em; color: red; text-decoration: underline;">
|
||||
WARNING
|
||||
</h1>
|
||||
These are experimental/testing libraries. Do not expect them to function. Do not expect them to stay functioning. Do not expect them stay as a whole. Do not expect their advertising to be correct. Do not expect anything from them.
|
||||
</div>
|
||||
|
||||
<div style="height: calc(1px * var(--pxDensity)); margin: 0 calc(3px * var(--pxDensity)); background-color: var(--navBarBtn_Border);"></div>
|
||||
|
||||
<ul class="libUl">
|
||||
<li class="libLi">
|
||||
<div class="libContainer borderedRect">
|
||||
<img class="libImg" src="/assets/js.png" style="border-radius: 16px;">
|
||||
<div class="libTextContainer">
|
||||
<h1>Calendar Library</h1>
|
||||
<p class="desc">A fully customizable calendar library. So customizable that you can barely call it a calendar library.</p>
|
||||
</div>
|
||||
<div class="libSrcContainer">
|
||||
<script src="https://www.bytedice.net/libs/test/calendar_test.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="loadingScreen"></div>
|
||||
|
||||
<!-- global -->
|
||||
<script src="/global/globalScript.js"></script>
|
||||
<script src="/global/pxDensity.js"></script>
|
||||
<script src="/global/loadingScreen.js"></script>
|
||||
<script src="/global/navBar.js"></script>
|
||||
<script src="/global/screenTransition.js"></script>
|
||||
|
||||
<!-- local -->
|
||||
<script src="../script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user