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

94 lines
5.3 KiB
HTML
Raw Permalink Normal View History

<!-- To be consistent overall, with css-naming and bulma.
Classes should be named lower-case using hyphens to seperate words: e.g. subcard-wrapper -->
<template class="card" data-allowed-within=".columns" id="Card">
<div class="subcard-wrapper column is-one-third" ondragstart="Card.dragStart(event)">
<div class="subcard" data-append="class" data-onclick="Card.openIndexCard(event, 'articlePath')" onclick="Card.openIndexCard(event, './article1.html')">
<div class="subcard-content content">
<div class="titlebar">
<h2 data-innerhtml="h1" contenteditable="true">Eine Überschrift</h2>
</div>
<div class="wrapper">
<div data-innerhtml="preview" class="preview content">
<p data-innerhtml="text" contenteditable="true">Ein kurzer Teaser</p>
</div>
</div>
</div>
<!-- This is outside the content, that the content can have an overflow:hidden without effecting the scalability of the close button. -->
<div class="icon card-icon info button"></div>
</div>
</div>
</template>
<!-- When is this used? The id seems to be invalid. -->
<template class="cardImage" data-allowed-within=".columns" id="Card with Image">
<div class="column is-one-third" ondragstart="Card.dragStart(event)">
<div class="card">
<div class="card-content content">
<h1 contenteditable="true">Eine Überschrift</h1>
<div class="wrapper">
<div data-innerhtml="preview" class="preview">
<figure>
<!-- Here it's important to disable the image's dragable property. -->
<img draggable="false" data-replace="src" contenteditable="true" src="../assets/king.jpeg">
</figure>
</div>
</div>
</div>
</div>
</div>
</template>
<!-- The id seems to be invalid! -->
<template class="zoomableImage" data-allowed-within=".columns" id="Zoomable Image">
<!-- This wrapper was not identifiable. So I made it a zoomable-wrapper. -->
<div class="zoomable-wrapper column" ondragstart="Card.dragStart(event)">
<figure style="display: block;" class="zoomable singlefig" id="zoomable1">
<div style="position:relative;" class="svg-wrapper">
<svg draggable="false" class="mainimg" onclick="Card.openPopupOrZoomable(event)" data-replace="viewBox width height" viewBox="0 6.6 100 86.8"
width="128" height="128" contenteditable="true">
<!-- The defs section must be defined and cannot be generated in JavaScript-->
<defs></defs>
<image data-replace="width height xlink:href" width="100" height="100" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../assets/gelehrter.jp"></image>
<g stroke-width="3" data-innerhtml="circles"></g>
</svg>
<div class="icon button corner-button bottom-right zoom zoomable-icon" onclick="Card.openZoomable(event)"></div>
</div>
<figcaption contenteditable="true" data-innerhtml="caption" class="cap">Gelehrter in seiner Studierstube</figcaption>
<figcaption contenteditable="true" data-innerhtml="zoomCaption" class="zoomcap">Rembrandt:
<i>Gelehrter in seiner Studierstube</i>, Radierung, um 1652, Braunschweig, Herzog Anton Ulrich-Museum, Kupferstichkabinett.</figcaption>
</figure>
</div>
</template>
<template class="zoomableVideo" data-allowed-within=".columns" id="Zoomable Video">
<div class="zoomable-wrapper column" ondragstart="Card.dragStart(event)">
<figure class="zoomable singlefig" data-style="maxHeight" id="zoomable1">
<div style="position:relative;">
<video class="mainimg" onclick="Card.openZoomable(event)" data-replace="width src" width="100" src="../assets/small.mp4"></video>
<div class="icon button corner-button bottom-right zoom zoomable-icon" onclick="Card.openZoomable(event)"></div>
</div>
<figcaption contenteditable="true" data-innerhtml="caption" class="cap">Gelehrter in seiner Studierstube</figcaption>
<figcaption contenteditable="true" data-innerhtml="zoomCaption" class="zoomcap">Rembrandt:
<i>Gelehrter in seiner Studierstube</i>, Radierung, um 1652, Braunschweig, Herzog Anton Ulrich-Museum, Kupferstichkabinett.</figcaption>
</figure>
</div>
</template>
<template class="link" data-allowed-within="p" id="Link">
<a ondragstart="Card.dragStart(event)" href="URL">SELECTED</a>
</template>
<!--
<template class="link" data-allowed-within="p" id="Popup">
<a ondragstart="Card.dragStart(event)" onclick="Card.loadPopup(event)" href="FILE">SELECTED</a>
</template>
-->
<template class="paragraph" data-allowed-within=".column,.popup" id="Paragraph">
<p contenteditable="true" data-append="class" data-link="Popup" data-innerhtml="text">Ein Beispiel für einen Absatz</p>
</template>
<template class="header" data-allowed-within=".column,.popup" id="Header">
<h2 contenteditable="true" data-innerhtml="text">Eine Überschrift</h2>
</template>