Updated cards from tuesch changes. Incorporated InteractionMapper memory leak fix.
This commit is contained in:
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title data-innerhtml="title">Article with 50% Columns</title>
|
||||
<link rel="stylesheet" href="../_theme/css/bulma.css">
|
||||
<link rel="stylesheet" href="../_theme/css/card.css">
|
||||
<link rel="stylesheet" href="../_theme/css/article.css">
|
||||
<link rel="stylesheet" href="../_theme/css/highlight.css">
|
||||
<link rel="stylesheet" href="../_theme/css/popup.css">
|
||||
<!-- disable zooming -->
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
<script src="../_theme/js/all.js"></script>
|
||||
<script src="../_theme/js/3rdparty/all.js"></script>
|
||||
<script src="../_theme/js/card.js"></script>
|
||||
<script src="../_theme/js/highlight.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<article>
|
||||
<div class="columns">
|
||||
<div class="column content" data-innerhtml="col1" data-link="Popup" tabindex="0">
|
||||
<p>Vom Kriegsgott Mars existieren 2 unterschiedlich hochwertige Abgüsse, die nach dem Modell Giambolognas angefertigt
|
||||
wurden. Die unterschiedliche Qualität von Abgüssen ergibt sich aus dem Aufwand der Oberflächenbearbeitung
|
||||
nach dem Guss.</p>
|
||||
</div>
|
||||
<div class="column content" data-innerhtml="col2" data-link="Popup" tabindex="0">
|
||||
<p>Der früheste nachgewiesene Abguss gelangte 1587 als persönliches Geschenk des Künstlers an den sächsischen
|
||||
Kurfürsten Christian I., der dem Bildhauer als Dank eine goldene Kette zukommen ließ. Dieses Dresdner
|
||||
Exemplar ist noch qualitätsvoller als die Braunschweiger Version. Aus dem mit ihm verknüpften Datum wird
|
||||
übrigens auf eine Entstehungszeit des Modells vor 1587 geschlossen.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title data-innerhtml="title">Article with 2/3 & 1/3 Columns</title>
|
||||
<link rel="stylesheet" href="../_theme/css/bulma.css">
|
||||
<link rel="stylesheet" href="../_theme/css/card.css">
|
||||
<link rel="stylesheet" href="../_theme/css/article.css">
|
||||
<link rel="stylesheet" href="../_theme/css/highlight.css">
|
||||
<link rel="stylesheet" href="../_theme/css/popup.css">
|
||||
<!-- disable zooming -->
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
<script src="../_theme/js/all.js"></script>
|
||||
<script src="../_theme/js/3rdparty/all.js"></script>
|
||||
<script src="../_theme/js/card.js"></script>
|
||||
<script src="../_theme/js/highlight.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<article>
|
||||
<div class="columns">
|
||||
<div class="column content wide" data-innerhtml="col1" data-link="Popup" tabindex="0">
|
||||
<p>Vom Kriegsgott Mars existieren 2 unterschiedlich hochwertige Abgüsse, die nach dem Modell Giambolognas angefertigt
|
||||
wurden. Die unterschiedliche Qualität von Abgüssen ergibt sich aus dem Aufwand der Oberflächenbearbeitung
|
||||
nach dem Guss.</p>
|
||||
</div>
|
||||
<div class="column content narrow" data-innerhtml="col2" data-link="Popup" tabindex="0">
|
||||
<p>Der früheste nachgewiesene Abguss gelangte 1587 als persönliches Geschenk des Künstlers an den sächsischen
|
||||
Kurfürsten Christian I., der dem Bildhauer als Dank eine goldene Kette zukommen ließ. Dieses Dresdner
|
||||
Exemplar ist noch qualitätsvoller als die Braunschweiger Version. Aus dem mit ihm verknüpften Datum wird
|
||||
übrigens auf eine Entstehungszeit des Modells vor 1587 geschlossen.</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title data-innerhtml="title">Article with 50% Columns and Imagegroup</title>
|
||||
<link rel="stylesheet" href="../_theme/css/bulma.css">
|
||||
<link rel="stylesheet" href="../_theme/css/card.css">
|
||||
<link rel="stylesheet" href="../_theme/css/article.css">
|
||||
<link rel="stylesheet" href="../_theme/css/highlight.css">
|
||||
<link rel="stylesheet" href="../_theme/css/popup.css">
|
||||
<!-- disable zooming -->
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
<script src="../_theme/js/all.js"></script>
|
||||
<script src="../_theme/js/3rdparty/all.js"></script>
|
||||
<script src="../_theme/js/card.js"></script>
|
||||
<script src="../_theme/js/highlight.js"></script>
|
||||
<link rel="import" href="../_theme/templates/templates.html">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<article>
|
||||
<div class="columns">
|
||||
<div class="column content" data-innerhtml="col1" data-link="Popup" tabindex="0">
|
||||
<p>Vom Kriegsgott Mars existieren 2 unterschiedlich hochwertige Abgüsse, die nach dem Modell Giambolognas angefertigt
|
||||
wurden. Die unterschiedliche Qualität von Abgüssen ergibt sich aus dem Aufwand der Oberflächenbearbeitung
|
||||
nach dem Guss.</p>
|
||||
</div>
|
||||
<div class="column content" data-innerhtml="col2" data-link="Popup" tabindex="0">
|
||||
<p>Der früheste nachgewiesene Abguss gelangte 1587 als persönliches Geschenk des Künstlers an den sächsischen
|
||||
Kurfürsten Christian I., der dem Bildhauer als Dank eine goldene Kette zukommen ließ. Dieses Dresdner
|
||||
Exemplar ist noch qualitätsvoller als die Braunschweiger Version. Aus dem mit ihm verknüpften Datum wird
|
||||
übrigens auf eine Entstehungszeit des Modells vor 1587 geschlossen.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns is-multiline is-centered" data-innerhtml="bottom" tabindex="0" data-blocks="Zoomable Figure" placeholder="Add zoomable figures here...">
|
||||
<div class="column" data-blocks="Zoomable Figure">
|
||||
<figure>
|
||||
<img src="../assets/women.jpeg">
|
||||
<figcaption>A Lady</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="column" data-blocks="Zoomable Figure">
|
||||
<figure>
|
||||
<img src="../assets/women.jpeg">
|
||||
<figcaption>A Lady</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title data-innerhtml="title">Card</title>
|
||||
<link rel="stylesheet" href="../_theme/css/editor.css">
|
||||
<link rel="stylesheet" href="../_theme/css/bulma.css">
|
||||
<link rel="stylesheet" href="../_theme/css/popup.css">
|
||||
<link rel="stylesheet" href="../_theme/css/card.css">
|
||||
<link rel="stylesheet" href="../_theme/css/subcard.css">
|
||||
<link rel="stylesheet" href="../_theme/css/highlight.css">
|
||||
<!-- disable zooming -->
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
<script src="../_theme/js/all.js"></script>
|
||||
<script src="../_theme/js/3rdparty/all.js"></script>
|
||||
<script src="../_theme/js/card.js"></script>
|
||||
<script src="../_theme/js/highlight.js"></script>
|
||||
|
||||
<script src="../../../../../node_modules/jquery/dist/jquery.min.js"></script>
|
||||
<script src="../../../../../lib/3rdparty/jquery.hypher.js"></script>
|
||||
<script src="../../../../../lib/3rdparty/hyphenation/de.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="info-card" style="width: 1400px; height: 1200px;">
|
||||
<div class="mainview">
|
||||
<header class="columns">
|
||||
<figure class="thumbnail-wrapper">
|
||||
<img draggable="false" contenteditable="true" data-replace="src" class="thumbnail" src="../assets/women.jpeg">
|
||||
</figure>
|
||||
<div class="overview column content">
|
||||
<h1 data-innerhtml="title" contenteditable="true">Titel</h1>
|
||||
<p data-innerhtml="misc" class="misc" contenteditable="true">Misc</p>
|
||||
<p data-innerhtml="description" contenteditable="true">Verschiedenes</p>
|
||||
</div>
|
||||
</header>
|
||||
<main data-innerhtml="cards" class="subcards-container columns is-multiline is-centered" tabindex="0" data-blocks="Card,Card with Image,Card with Figure"></main>
|
||||
<div class="button icon close view-button inverted transparent-background" onclick="Card.close(event)"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title data-innerhtml="title">Popup</title>
|
||||
<link rel="stylesheet" href="../_theme/css/bulma.css">
|
||||
<link rel="stylesheet" href="../_theme/css/card.css">
|
||||
<link rel="stylesheet" href="../_theme/css/article.css">
|
||||
<link rel="stylesheet" href="../_theme/css/highlight.css">
|
||||
<link rel="stylesheet" href="../_theme/css/popup.css">
|
||||
<!-- disable zooming -->
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
|
||||
<script src="../_theme/js/all.js"></script>
|
||||
<script src="../_theme/js/3rdparty/all.js"></script>
|
||||
<script src="../_theme/js/card.js"></script>
|
||||
<script src="../_theme/js/highlight.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- IMPORTANT: Deleted style overwrite here which set a rigid width. -->
|
||||
<div class="popupHtml" tabindex="0" data-innerhtml="content">
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,94 @@
|
||||
<!-- 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>
|
||||
Reference in New Issue
Block a user