-
Notifications
You must be signed in to change notification settings - Fork 33
/
filter-banner.html
100 lines (89 loc) · 2.55 KB
/
filter-banner.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<html>
<head>
<style type="text/css">
body, html {
margin: 0;
width: 100%;
height: 100%;
}
#image {
position: absolute;
}
#banner {
position: fixed;
bottom: 0;
background-color: rgba(90%,90%,90%,0.8);
color: #000;
text-align: left;
font-smooth: always;
height: 3em;
width: 100%;
}
#title {
font-size: 1.2em;
margin-top: 0.2em;
margin-right: 0.6em;
margin-left: 0.6em;
}
/* No wordwrap - we will measure and shrink to fit */
.shrinkfit {
white-space: nowrap;
-webkit-transform-origin: top left;
}
</style>
<script type="text/javascript" src="qrc:/webvfx/scripts/easing.js"></script>
<script type="text/javascript">
function Banner() {
this.image = document.getElementById("image");
this.banner = document.getElementById("banner");
var fadeIn = webvfx.getNumberParameter("FadeIn");
if (fadeIn > 0) {
this.easeFadeIn = new WebVfx.Easing.Linear(0, 1, fadeIn);
this.fadeIn = fadeIn;
}
var fadeOut = webvfx.getNumberParameter("FadeOut");
if (fadeOut > 0) {
this.easeFadeOut = new WebVfx.Easing.Linear(0, 1, fadeOut);
this.fadeOut = fadeOut;
}
}
Banner.prototype.render = function (time) {
webvfx.getImage("sourceImage").assignToHTMLImageElement(this.image);
if (time <= this.fadeIn)
this.banner.style.opacity = this.easeFadeIn.ease(time);
else if (time >= 1 - this.fadeOut)
this.banner.style.opacity = this.easeFadeOut.ease(1 - time);
else
this.banner.style.opacity = 1;
}
function init() {
// Set these before we resize
document.getElementById("title").innerText = webvfx.getStringParameter("Title");
resize();
var banner = new Banner();
webvfx.renderRequested.connect(banner, Banner.prototype.render);
webvfx.imageTypeMap = { "sourceImage" : webvfx.SourceImageType };
webvfx.readyRender(true);
}
function shrinkToFit(element) {
element.style.webkitTransform = null;
if (element.scrollWidth > element.clientWidth)
element.style.webkitTransform = "scale(" + (element.clientWidth / element.scrollWidth) + ")";
}
function resize() {
// Set base font-size to 10% of window height
document.body.style.fontSize = (window.innerHeight * 0.1) + "px";
// Scale text - shrink to fit - if needed
shrinkToFit(document.getElementById("title"));
}
window.addEventListener("resize", resize, false);
window.addEventListener("load", init, false);
</script>
</head>
<body>
<img id="image"/>
<div id="banner">
<div id="title" class="shrinkfit"></div>
</div>
</body>
</html>