IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Merge branch 'main' of gitea.iwm-tuebingen.de:IWMBrowser/iwmlib into main

Browse Source 
* 'main' of gitea.iwm-tuebingen.de:IWMBrowser/iwmlib:
  Removed console.logs
  Fixed timestamp name mismatch.
  Updated iwmlib and removed log statement.
  Added pluggable throw behavior.
  Replaced requestAnimationFrame with setInterval
  Moved throws to a single loop.
  Added cancelAnimationFrame
  update code block to reflect current state
  Fixed html double code
  Fixed problem with scrolling text in card drawers.
  added fix for viewBox rotation bug
  fixed rollup
  documented/ solved svg rotation bug

# Conflicts:
#	package.json
This commit is contained in:
Uwe Oestermeier
2024-02-12 14:15:58 +01:00
parent 8d8090cdde 80355ea636
commit 57d6e8b461
10 changed files with 1049 additions and 845 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/flippable.html
+39 -23
View File
@@ -17,44 +17,60 @@
<div class="flipFace back" style="visibility: hidden"></div>
</div>
<!-- Very tricky problem to scale svgs: see https://css-tricks.com/scale-svg/ -->
<svg
class="flipButton backBtn"
style="visibility: hidden"
viewBox="0 0 100 100"
preserveAspectRatio="xMidYMid meet"
>
<!-- SVG viewPort interferes with DOMMatrix calculations: see
https://stackoverflow.com/questions/70696387/how-to-get-transform-matrix-of-a-dom-element-->
<div class="flipButton backBtn" style="visibility:hidden;">
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style="width:inherit; height:inherit;">
<g stroke-width="8" stroke="white">
<circle cx="50" cy="50" r="44" fill="gray" />
<line x1="30" y1="30" x2="70" y2="70" />
<line x1="30" y1="70" x2="70" y2="30" />
<circle cx="50" cy="50" r="44" fill="gray" />
<line x1="30" y1="30" x2="70" y2="70" />
<line x1="30" y1="70" x2="70" y2="30" />
</g>
</svg>
</div>
<svg class="flipButton infoBtn" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<div class="flipButton infoBtn">
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style="width:inherit; height:inherit;">
<circle cx="50" cy="50" r="44" stroke="white" stroke-width="8" fill="gray" />
<circle cx="50" cy="32" r="7" fill="white" />
<line x1="50" y1="46" x2="50" y2="78" stroke="white" stroke-width="12" />
</svg>
</div>
</template>
</head>
<body onload="Doctest.run()">
<h1><a href="index.html">lib.</a>Flippable</h1>
<p>
The flip effect simulates a flip between a front and back view of an object by means of a 3D rotation. The
DOMFlippable class implements this effect for two DOM nodes, one as the front view, the other as the back
view. Both views are connected via a HTML template that defines the placeholders for front and back views.
The style file "css/flipeffect.css" holds reasonable default styles for this kind of templates.
</p>
<pre><code>
</div>
</template>
</head>
<body onload="Doctest.run()">
<h1>
Flippable
</h1>
<p>
The flip effect simulates a flip between a front and back view of an object
by means of a 3D rotation. The DOMFlippable class implements this effect for two
DOM nodes, one as the front view, the other as the back view. Both views are connected
via a HTML template that defines the placeholders for front and back views. The
style file "css/flipeffect.css" holds reasonable default styles for this kind of
templates.
</p>
<p>
The SVG buttons have to be wrapped in an HTML DOM element which handles events. Otherwise,
the viewbox of the SVG will interfere with the coordinate transformation.
</p>
<pre><code>
&lt;template id="flipTemplate"&gt;
&lt;div class="flipWrapper"&gt;
&lt;div class="flipCard"&gt;
&lt;div class="flipFace front"&gt;&lt;/div&gt;
&lt;div class="flipFace back" style="visibility:hidden;"&gt;&lt;/div&gt;
&lt;/div>
&lt;svg class="flipButton backBtn" .../&gt;
&lt;svg class="flipButton infoBtn" .../&gt;
&lt;div class="flipButton backBtn" .../&gt;
&lt;svg .../&gt;
&lt;/div>
&lt;div class="flipButton infoBtn" .../&gt;
&lt;svg .../&gt;
&lt;/div>
&lt;/div&gt;
&lt;/template&gt;
</code>