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

<!-- 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>