-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
111 lines (100 loc) · 4.88 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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Extraordinary Rhymes</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body style="background-color:#FAF2AD;background-image:url(https://sketchoholic.com/uploads/userfiles/18000/fd39c51852_WuTangClan.jpg);background-size:cover;background-blend-mode:color-dodge">
<div class="container-fluid">
<div class="row"><center><h2>Extraordinary Rhymes</h2></center></div>
<div class="row">
<div class="col-xs-3 col-md-2">
<p>Instructions.</p>
<p>Drag and drop song parts from the right onto the left column. Parts placed at the top will appear at the top of the chain, and parts placed at the bottom will appear at the bottom of the chain. To remove a song part, drag it from the left and place it in the bin.</p>
<p>Legend.</p>
<p>Bar lines are in bold on the right, syllable counts for each bar line are within the parantheses.</p>
</div>
<div class="col-xs-6 col-md-4">
<center>
<h4 id="top" ondrop="dropIn(event, false)" ondragover="allowDrop(event)">Start.</h4>
<h4 id="bottom" ondrop="dropIn(event, true)" ondragover="allowDrop(event)">End.</h4>
</center>
</div>
<div class="col-xs-6 col-md-4">
<center>
<h4 id="intro" draggable="true" ondragstart="dragStart(event)">Intro</h4>
<h4 id="verse" draggable="true" ondragstart="dragStart(event)">Verse</h4>
<h4 id="chorus" draggable="true" ondragstart="dragStart(event)">Chorus</h4>
<h4 id="bridge" draggable="true" ondragstart="dragStart(event)">Bridge</h4>
<h4 id="outro" draggable="true" ondragstart="dragStart(event)">Outro</h4>
<h4 id="bin" ondragover="allowDrop(event)" ondrop="trash(event)" class="label label-danger">Bin</h4>
</center>
<div id="markup"></div>
</div>
<div clas="col-xs-3 col-md-2">
<button type="button" id="save" class="btn btn-default">Save!</button>
</div>
</div>
</div>
<script type="text/javascript" src="js/lib/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/lib/bootstrap.min.js"></script>
<script type="text/javascript" src="js/rip.js"></script>
<script type="text/javascript" src="js/classes.js"></script>
<script type="text/javascript" src="js/process.js"></script>
<script type="text/javascript" src="js/markup.js"></script>
<script type="text/javascript" src="js/save.js"></script>
<script type="text/javascript">
var idToTransfer = "";
var idTextAreaToKill = "";
function replaceId(html) {
var decompHTML = /(.*id=")(.*?)(".*)/;
var decompedHTML = decompHTML.exec(html);
var decompId = /([a-zA-Z]*)([0-9]*)/;
var decompedId = decompId.exec(decompedHTML[2]);
decompedId[2] = "1";
while ($("#" + decompedId[1] + decompedId[2]).length > 0) {
var number = parseInt(decompedId[2]);
number += 1;
decompedId[2] = number.toString();
}
var newHTML = decompedHTML[1] + decompedId[1] + decompedId[2] + decompedHTML[3];
return [newHTML, decompedId[1], decompedId[2]];
}
function dropIn(event, aboveOrBelow) {
event.preventDefault();
var htmlAndId = replaceId(document.getElementById(idToTransfer.substring(1)).outerHTML);
var newId = htmlAndId[1] + htmlAndId[2];
if (aboveOrBelow) {
$("#bottom").before(htmlAndId[0]);
$("#" + newId).addClass(newId);
$("#" + newId).html(htmlAndId[1].charAt(0).toUpperCase() + htmlAndId[1].slice(1) + " " + htmlAndId[2]);
$("#" + newId).after("<textarea id=\"" + newId + "-textarea\" class=\"form-control " + newId + "\"></textarea>");
document.getElementById(newId + "-textarea").addEventListener('keypress', function(event) {
markup(newId + "-textarea", htmlAndId[1], $("#" + newId).prev().prev("h4").attr("id"));
}, false);
} else {
$("#top").after(htmlAndId[0]);
$("#" + newId).addClass(newId);
$("#" + newId).html(htmlAndId[1].charAt(0).toUpperCase() + htmlAndId[1].slice(1) + " " + htmlAndId[2]);
$("#" + newId).after("<textarea id=\"" + newId + "-textarea\" class=\"form-control " + newId + "\"></textarea>");
document.getElementById(newId + "-textarea").addEventListener('keypress', function(event) {
markup(newId + "-textarea", htmlAndId[1], $("#" + newId).prev("h4").attr("id"));
}, false);
}
}
function allowDrop(event) {
event.preventDefault();
}
function dragStart(event) {
idToTransfer = "#" + event.target.id;
}
function trash(event) {
event.preventDefault();
$("." + idToTransfer.substring(1)).remove();
}
</script>
</body>
</html>