-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
89 lines (79 loc) · 2.6 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<link href="screen.css" media="screen" rel="stylesheet" type="text/css">
<script src="weheart.js"></script>
</head>
<body>
<h1>weheart svg</h1>
<svg width="100%" viewBox="0 0 1 1" id="heartSVG">
</svg>
left <input type="text" id="leftTextField" onkeyup="javascript:updateLeftColor()"></input><br/>
center <input type="text" id="centerTextField" onkeyup="javascript:updateCenterColor()"></input><br/>
right <input type="text" id="rightTextField" onkeyup="javascript:updateRightColor()"></input><br/>
</body>
<script>
function heartSVG() {
return document.getElementById("heartSVG");
}
function minimumSVGDimension() {
var result = 0;
var heart = heartSVG();
if (heart)
{
var boundingBox = heart.getBBox();
if (boundingBox.width < boundingBox.height)
{
result = boundingBox.width;
} else
{
result = boundingBox.height;
}
}
return result;
}
function updateLeftColor() {
var textField = document.getElementById("leftTextField");
if (textField)
{
weheartInstance.leftFillColor = textField.value;
}
}
function updateCenterColor() {
var textField = document.getElementById("centerTextField");
if (textField)
{
weheartInstance.centerFillColor = textField.value;
}
}
function updateRightColor() {
var textField = document.getElementById("rightTextField");
if (textField)
{
weheartInstance.rightFillColor = textField.value;
}
}
var weheartInstance = new weheart();
var heartSVGElement = heartSVG();
if (heartSVGElement)
{
heartSVGElement.appendChild(weheartInstance);
} else
{
console.log("Error retrieving heartSVG element, unable to show heart");
}
var translate = "translate(" + 0.333 / 1.5 + "," + -0.075 + ")";
var scale = minimumSVGDimension() / ( Math.sqrt(1 / 2) * 2);
var scaleString = "scale(" + scale + ")";
weheartInstance.setAttribute('transform', translate + " " + scaleString);
weheartInstance.rightFillColor = 'rgb(47,191,224)';
weheartInstance.centerFillColor = 'rgb(45,58,74)';
weheartInstance.leftFillColor = 'rgb(246,78,84)';
var leftTextField = document.getElementById("leftTextField");
leftTextField.value = weheartInstance.leftFillColor;
var centerTextField = document.getElementById("centerTextField");
centerTextField.value = weheartInstance.centerFillColor;
var rightTextField = document.getElementById("rightTextField");
rightTextField.value = weheartInstance.rightFillColor;
</script>
</html>