mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-12-22 11:34:21 +00:00
Make available rulesets togglable (closes #51)
This commit is contained in:
parent
86c4d9da16
commit
bae148a0ba
GPG key ID:
6965406171929D01
2 changed files with 137 additions and 14 deletions
|
|
@ -10,13 +10,15 @@
|
|||
<meta property="og:url" content="https://gh.steffo.eu/bluelib/examples/index.html" />
|
||||
<meta property="og:image" content="../media/opengraph.png" />
|
||||
<link rel="icon" type="image/x-icon" href="../favicon.ico">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/base.root.less" id="css:base">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/colors-royalblue.root.less" id="css:colors">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/fonts-fira-ghpages.root.less" id="css:fonts">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/classic.root.less" id="css:classic">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/glass.root.less" id="css:glass">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/fun.root.less" id="css:fun">
|
||||
<link rel="stylesheet" type="text/css" href="./index.css" id="css:thispage">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/base.root.less">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/colors-royalblue.root.less">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/colors-amber.root.less">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/fonts-fira-ghpages.root.less">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/classic.root.less">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/glass.root.less">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/fun.root.less">
|
||||
<link rel="stylesheet" type="text/css" href="./index.css">
|
||||
<script src="index.js"></script>
|
||||
<script>
|
||||
less = {
|
||||
env: "development",
|
||||
|
|
@ -179,35 +181,35 @@
|
|||
The <a href="https://en.wikipedia.org/wiki/Cartesian_product">cartesian product</a> is applied between all <i>rulesets</i> in <code>src/rulesets</code> and all <i>selectorsets</i> in <code>src/selectorsets</code>, compiling a new target for each pair.
|
||||
</p>
|
||||
</section>
|
||||
<section class="panel box" id="panel-rulesets todo">
|
||||
<section class="panel box rainbow" id="panel-rulesets todo">
|
||||
<h3>
|
||||
Available rulesets
|
||||
</h3>
|
||||
<dl>
|
||||
<dt><label class="fade"><input type="checkbox" disabled checked name="ruleset-base"> Base</label></dt>
|
||||
<dt><label class="fade"><input type="checkbox" disabled checked class="ruleset-toggle" name="ruleset-base" onclick="toggleStyle('less:bluelib-dist-base:root')"> Base</label></dt>
|
||||
<dd>
|
||||
The base <i>ruleset</i>, providing the layout and basic high contrast theming.
|
||||
</dd>
|
||||
<dt><label class="fade"><input type="checkbox" disabled checked name="ruleset-classic"> Classic</label></dt>
|
||||
<dt><label class="fade"><input type="checkbox" disabled checked class="ruleset-toggle" name="ruleset-classic" onclick="toggleStyle('less:bluelib-dist-classic:root')"> Classic</label></dt>
|
||||
<dd>
|
||||
Inspired by the older Bluelib versions, with semi-transparent panels and rounded borders.
|
||||
</dd>
|
||||
<dt><label class="fade"><input type="checkbox" disabled checked name="ruleset-glass"> Glass</label></dt>
|
||||
<dt><label class="fade"><input type="checkbox" disabled checked class="ruleset-toggle" name="ruleset-glass" onclick="toggleStyle('less:bluelib-dist-glass:root')"> Glass</label></dt>
|
||||
<dd>
|
||||
Made to celebrate the addition of <code>backdrop-filter</code> to Firefox, makes panels have a <q>stained glass</q> background.
|
||||
</dd>
|
||||
<dt><label class="fade"><input type="checkbox" disabled checked name="ruleset-fun"> Fun</label></dt>
|
||||
<dt><label class="fade"><input type="checkbox" disabled checked class="ruleset-toggle" name="ruleset-fun" onclick="toggleStyle('less:bluelib-dist-fun:root')"> Fun</label></dt>
|
||||
<dd>
|
||||
Experimental <i>ruleset</i> with bizzare or buggy but fun rules. Unsupported, do not use in production!
|
||||
</dd>
|
||||
<dt>Colors</dt>
|
||||
<dd>
|
||||
<dl>
|
||||
<dt><label class="fade"><input type="radio" disabled checked name="ruleset-colors"> Royal Blue</label></dt>
|
||||
<dt><label class="fade"><input type="radio" disabled checked class="ruleset-toggle" name="ruleset-colors" onclick="selectColor('less:bluelib-dist-colors-royalblue:root')"> Royal Blue</label></dt>
|
||||
<dd>
|
||||
<a href="https://github.com/Steffo99">Steffo</a>'s signature color theme, based upon RYG⁵'s logo colors.
|
||||
</dd>
|
||||
<dt><label class="fade"><input type="radio" disabled name="ruleset-colors"> Gestione Amber</label></dt>
|
||||
<dt><label class="fade"><input type="radio" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor('less:bluelib-dist-colors-amber:root')"> Gestione Amber</label></dt>
|
||||
<dd>
|
||||
<a href="https://github.com/Nemesis-FT">Nemesis</a>' own color theme, with a "coffee-like" look.
|
||||
</dd>
|
||||
|
|
|
|||
121
examples/index.js
Normal file
121
examples/index.js
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
/**
|
||||
* Check if the less compiler is done rendering Less stylesheets into CSS.
|
||||
*
|
||||
* @returns {boolean} `true` if the rendering is complete, `false` otherwise.
|
||||
*/
|
||||
function isLessDone() {
|
||||
const lessSheets = document.querySelectorAll('link[rel="stylesheet/less"]')
|
||||
const cssSheets = document.querySelectorAll('style')
|
||||
|
||||
return lessSheets.length === cssSheets.length
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Pause an async function until {@link isLessDone Less is done}.
|
||||
*
|
||||
* @returns {Promise<void>} Awaitable that waits until {@link isLessDone Less is done}.
|
||||
*/
|
||||
async function sleepUntilLessIsDone() {
|
||||
while(!isLessDone()) {
|
||||
await new Promise(resolve => setTimeout(resolve, 100))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const enabledByDefault = [
|
||||
"less:bluelib-dist-base:root",
|
||||
"less:bluelib-dist-classic:root",
|
||||
"less:bluelib-dist-glass:root",
|
||||
"less:bluelib-dist-fun:root",
|
||||
"less:bluelib-dist-colors-royalblue:root",
|
||||
"less:bluelib-dist-fonts-fira-ghpages:root",
|
||||
]
|
||||
|
||||
|
||||
let lessStyles = undefined
|
||||
let lessColors = undefined
|
||||
let lessFonts = undefined
|
||||
|
||||
|
||||
async function enableChanges() {
|
||||
await sleepUntilLessIsDone()
|
||||
|
||||
lessStyles = [...document.styleSheets].filter(
|
||||
(s) => s.ownerNode.id.startsWith("less:bluelib-dist")
|
||||
).map(
|
||||
(s) => ({[s.ownerNode.id]: s})
|
||||
).reduce(
|
||||
(p, c) => ({...p, ...c}),
|
||||
{}
|
||||
)
|
||||
console.debug("Found Less stylesheets:", lessStyles)
|
||||
|
||||
lessColors = [...document.styleSheets].filter(
|
||||
(s) => s.ownerNode.id.startsWith("less:bluelib-dist-colors")
|
||||
).map(
|
||||
(s) => ({[s.ownerNode.id]: s})
|
||||
).reduce(
|
||||
(p, c) => ({...p, ...c}),
|
||||
{}
|
||||
)
|
||||
console.debug("Found Less colors:", lessColors)
|
||||
|
||||
lessFonts = [...document.styleSheets].filter(
|
||||
(s) => s.ownerNode.id.startsWith("less:bluelib-dist-fonts")
|
||||
).map(
|
||||
(s) => ({[s.ownerNode.id]: s})
|
||||
).reduce(
|
||||
(p, c) => ({...p, ...c}),
|
||||
{}
|
||||
)
|
||||
console.debug("Found Less fonts:", lessFonts)
|
||||
|
||||
for(const [k, v] of Object.entries(lessStyles)) {
|
||||
v.disabled = !enabledByDefault.includes(k)
|
||||
}
|
||||
|
||||
for(const input of document.querySelectorAll(".ruleset-toggle")) {
|
||||
input.disabled = false
|
||||
input.parentElement.classList.remove("fade")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function toggleStyle(name) {
|
||||
if(lessStyles === undefined) {
|
||||
console.error("Less stylesheets are not yet available.")
|
||||
return
|
||||
}
|
||||
|
||||
const style = lessStyles[name]
|
||||
if(style === undefined) {
|
||||
console.error("No such Less stylesheet.")
|
||||
return
|
||||
}
|
||||
|
||||
style.disabled = !style.disabled
|
||||
}
|
||||
|
||||
|
||||
function selectColor(name) {
|
||||
if(lessColors === undefined) {
|
||||
console.error("Less stylesheets are not yet available.")
|
||||
return
|
||||
}
|
||||
|
||||
const style = lessStyles[name]
|
||||
if(style === undefined) {
|
||||
console.error("No such Less stylesheet.")
|
||||
return
|
||||
}
|
||||
|
||||
for(const c of Object.values(lessColors)) {
|
||||
c.disabled = true
|
||||
}
|
||||
|
||||
style.disabled = false
|
||||
}
|
||||
|
||||
|
||||
enableChanges()
|
||||
Loading…
Reference in a new issue