94 lines
5.3 KiB
HTML
94 lines
5.3 KiB
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> |