138 lines
4.9 KiB
HTML
138 lines
4.9 KiB
HTML
|
<!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>
|