|
@@ -16,24 +16,33 @@ title: Tyler Hallada
|
16
|
16
|
magicObj[key] = value;
|
17
|
17
|
}
|
18
|
18
|
|
|
19
|
+ function findParentWithId(el, id) {
|
|
20
|
+ while (el.getAttribute('id') !== id) {
|
|
21
|
+ el = el.parentElement;
|
|
22
|
+ }
|
|
23
|
+ return el;
|
|
24
|
+ }
|
|
25
|
+
|
19
|
26
|
function togglePanel(event) {
|
20
|
27
|
var options = document.getElementById("options");
|
|
28
|
+ var button = findParentWithId(event.target, "hide-show");
|
21
|
29
|
if (options.style.display === "none") { // hidden
|
22
|
30
|
options.style.display = "block";
|
23
|
|
- event.target.innerHTML = "Hide";
|
|
31
|
+ button.innerHTML = "<i class=\"icon ion-chevron-down\"></i>";
|
24
|
32
|
} else { // shown
|
25
|
33
|
options.style.display = "none";
|
26
|
|
- event.target.innerHTML = "Show";
|
|
34
|
+ button.innerHTML = "<i class=\"icon ion-chevron-up\"></i>";
|
27
|
35
|
}
|
28
|
36
|
}
|
29
|
37
|
|
30
|
38
|
function togglePlay(event) {
|
|
39
|
+ var button = findParentWithId(event.target, "play-pause");
|
31
|
40
|
if (magicObj.paused) {
|
32
|
41
|
magicObj.paused = false;
|
33
|
|
- event.target.innerHTML = "Pause";
|
|
42
|
+ button.innerHTML = "<i class=\"icon ion-pause\"></i>";
|
34
|
43
|
} else {
|
35
|
44
|
magicObj.paused = true;
|
36
|
|
- event.target.innerHTML = "Play";
|
|
45
|
+ button.innerHTML = "<i class=\"icon ion-play\"></i>";
|
37
|
46
|
}
|
38
|
47
|
}
|
39
|
48
|
|
|
@@ -44,9 +53,9 @@ title: Tyler Hallada
|
44
|
53
|
<div class="options-panel">
|
45
|
54
|
<div class="controls-tab">
|
46
|
55
|
<div class="controls">
|
47
|
|
- <button id="play-pause">Pause</button>
|
48
|
|
- <button id="clear">Clear</button>
|
49
|
|
- <button id="hide-show">Hide</button>
|
|
56
|
+ <button id="play-pause"><i class="icon ion-pause"></i></button>
|
|
57
|
+ <button id="clear"><i class="icon ion-refresh"></i></button>
|
|
58
|
+ <button id="hide-show"><i class="icon ion-chevron-down"></i></button>
|
50
|
59
|
</div>
|
51
|
60
|
</div>
|
52
|
61
|
<div id="options" class="container-full" style="display:block;">
|