iwmlib/lib/card/test/example/_theme/index.html

138 lines
4.9 KiB
HTML
Raw Permalink Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML Cards</title>
<link rel="stylesheet" href="css/bulma.css">
<link rel="stylesheet" href="css/card.css">
<link rel="stylesheet" href="css/subcard.css">
<link rel="stylesheet" href="css/highlight.css">
<link rel="stylesheet" href="css/popup.css">
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
position: fixed;
background-color: white;
}
.box {
width: 200px;
height: 200px;
background-color: blueviolet;
}
</style>
</head>
<body>
<!--
<h1>HTML Cards</h1>
<p>Some Text on the page. Eiusmod nostrud laborum non nulla in sunt ex cillum quis. Nulla mollit minim Lorem in. Deserunt
aliquip cillum dolor adipisicing.
</p>
<p>
Ea velit consectetur est cillum consectetur adipisicing dolor sunt nostrud. Qui eu ut anim incididunt aute irure do occaecat
reprehenderit ea irure ex. Ullamco cupidatat ut duis incididunt consectetur in cillum et Lorem. Ullamco voluptate
laborum non consectetur non laborum voluptate minim. Non cillum do eiusmod magna consequat anim exercitation occaecat
proident velit.
</p>
<p>
Qui adipisicing dolor occaecat cupidatat dolore ipsum velit excepteur magna Lorem aliqua consectetur consectetur ipsum. Sunt
tempor excepteur amet laborum id enim sunt aute dolor culpa dolor non. Eu anim veniam minim eu cupidatat enim culpa
quis dolore. Amet consectetur anim et culpa aliquip consequat reprehenderit fugiat. Aute labore ullamco minim deserunt
dolore quis ipsum magna consequat culpa do. Velit proident aliqua ipsum qui dolor veniam amet proident est veniam
cillum.
</p>
<p>
Cupidatat esse ut proident consectetur irure velit esse sint consectetur id est consectetur mollit. Nisi ullamco sunt deserunt
consequat tempor adipisicing. Labore reprehenderit tempor aliquip veniam amet culpa excepteur dolore. Tempor aute
dolor est sit. Duis laboris mollit est irure dolore pariatur deserunt velit velit elit sit. Labore laborum officia
officia anim ipsum officia anim nostrud cillum est anim qui. Dolore non minim eu eiusmod amet in deserunt exercitation
anim consectetur commodo occaecat.</p> -->
<script src="../../../../../lib/3rdparty/all.js"></script>
<script src="../../../../../lib/bootstrap.js"></script>
<script src="../../../../../lib/3rdparty/inobounce.js"></script>
<script src="../../../../../lib/3rdparty/hammer.propagating.js"></script>
<script src="./js/all.js"></script>
<script src="./js/card.js"></script>
<script src="./js/highlight.js"></script>
<script src="../../../js/theme.js"></script>
<script>
setup()
async function setup() {
console.log("Setting up card ...")
let config = await Theme.loadConfig()
console.log("Config loaded ...")
let scatterContainer = new DOMScatterContainer(document.body, {
stopEvents: false,
useCapture: false
})
Card.dynamicHeight = true
function createScatterCard(id) {
return ScatterCard.loadAndCreateScatterCard(scatterContainer, id, {
basePath: config.tueschDirectory,
modules: [
// new CardPlugin.LightBox("img-overlay"),
// new CardPlugin.EnlargeableThumbnail(".thumbnail-wrapper", ".img-overlay"),
// new CardPlugin.Ui("ui"),
// new CardPlugin.Speech(".ui", "speech")
],
onCreated: () => {
console.log("Hello")
},
onClose: () => {
console.log("Tried to close the card. This is forbidden here! ;)")
}
}).catch(e => console.error(e))
}
function enableDebug(element) {
element.classList.add("debug")
}
const debug = true
if (config.cards) {
let promises = []
config.cards.forEach(card => {
let promise = createScatterCard(card)
promise.then(el => {
if (debug)
enableDebug(el)
})
});
await Promise.all(promises)
} else {
element = await createScatterCard(config.card)
if (debug) enableDebug(element)
}
console.log("Card loaded!")
}
</script>
</body>
</html>