-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
92 lines (81 loc) · 3.3 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
90
91
92
<html>
<head>
<title>SVG Pattern Editor</title>
<link rel="shortcut icon" href="imgs/ico.ico" />
<script src="js/saveSvgAsPng.js"></script>
<script src="js/jquery.js"></script>
<script src="js/examples.js"></script>
<link rel="stylesheet" href="css/site.css">
</head>
<body>
<div id="toggleText" style="display: none"><textarea id="code"></textarea></div>
<fieldset>
<input type='button' id='btnShow' value='Show editor' onclick='Toggle();'>
<input type='button' id='btnd' value='Run code' onclick='MakeFile();'>
<input type='button' id='btnSave' value='Save SVG' onclick='SaveTextAsFile();'>
<input type='button' id='btndownload' value='Download image' onclick='DownloadImage();'>
<input type='button' id='btnE1' value='Fill example 1' onclick='MakeExamples(1);'>
<input type='button' id='btnE2' value='Fill example 2' onclick='MakeExamples(2);'>
</fieldset>
<div id="parentID"></div>
<canvas id="canvas"></canvas>
</body>
<script type="text/javascript">
function DestroyClickedElement(event) { document.body.removeChild(event.target); }
function SaveTextAsFile() {
var textToSave = document.getElementById("code").value;
var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
var fileNameToSaveAs = "image" + Date.now() + ".svg";
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
downloadLink.href = textToSaveAsURL;
downloadLink.onclick = DestroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();
}
$(document).delegate('#code', 'keydown', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
var start = $(this).get(0).selectionStart;
var end = $(this).get(0).selectionEnd;
$(this).val($(this).val().substring(0, start) + "\t" + $(this).val().substring(end));
$(this).get(0).selectionStart =
$(this).get(0).selectionEnd = start + 1;
}
});
function DownloadImage() {
if (document.querySelector("svg")) { saveSvgAsPng(document.querySelector("svg"), "image" + Date.now() + ".png", {encoderOptions : 1}); }
}
function MakeExamples(i) { document.getElementById('code').value = (i == 1) ? example1 : example2; }
function Toggle() {
var ele = document.getElementById("toggleText");
if (ele.style.display == "block") {
ele.style.display = "none";
document.getElementById("btnShow").value = "Show editor";
} else {
ele.style.display = "block";
document.getElementById("btnShow").value = "Hide editor";
}
}
function RemoveElementsByClass(className){
var elements = document.getElementsByClassName(className);
while(elements.length > 0){ elements[0].parentNode.removeChild(elements[0]); }
}
function MakeFile() {
RemoveElementsByClass("box");
document.getElementById("parentID").innerHTML = GenerateSVG();
}
function GenerateSVG() {
var svg = '<div id="dbox" class="box">';
svg += document.getElementById("code").value;
svg += "</div>";
return svg;
}
var div = document.getElementById('code');
div.style.bottom = div.style.bottom + 40;
</script>
</html>