0 | 0 |
var targetInputElem, displayToggle, editorElem;
|
1 | 1 |
var editorVisible = false;
|
|
2 |
|
|
3 |
function swapClasses(elemId, start, end) {
|
|
4 |
if (animEnabled) {
|
|
5 |
d3.select(elemId)
|
|
6 |
.transition()
|
|
7 |
.style('opacity', '0')
|
|
8 |
.each('end', function() {
|
|
9 |
d3.select(elemId)
|
|
10 |
.classed(start, false)
|
|
11 |
.classed(end, true)
|
|
12 |
.transition().style('opacity', '1');
|
|
13 |
});
|
|
14 |
} else {
|
|
15 |
d3.select(elemId).classed(start, false).classed(end, true);
|
|
16 |
}
|
|
17 |
}
|
2 | 18 |
|
3 | 19 |
function initEditor() {
|
4 | 20 |
targetInputElem = document.getElementById("target_input");
|
|
10 | 26 |
if (editorVisible) {
|
11 | 27 |
d3.select('#editor').style('margin-left', '0px')
|
12 | 28 |
.transition().style('margin-left', '-300px').duration(500);
|
13 | |
d3.select('#editor_expand')
|
14 | |
.transition()
|
15 | |
.style('opacity', '0')
|
16 | |
.each('end', function() {
|
17 | |
d3.select('#editor_expand')
|
18 | |
.classed("icon-double-angle-right", true)
|
19 | |
.classed("icon-double-angle-left", false)
|
20 | |
.transition().style('opacity', '1');
|
21 | |
});
|
|
29 |
swapClasses('#editor_expand', 'icon-double-angle-left', 'icon-double-angle-right');
|
22 | 30 |
} else {
|
23 | 31 |
d3.select('#editor').style('margin-left', '-300px')
|
24 | 32 |
.transition().style('margin-left', '0px').duration(500);
|
25 | |
d3.select('#editor_expand')
|
26 | |
.transition()
|
27 | |
.style('opacity', '0')
|
28 | |
.each('end', function() {
|
29 | |
d3.select('#editor_expand')
|
30 | |
.classed("icon-double-angle-left", true)
|
31 | |
.classed("icon-double-angle-right", false)
|
32 | |
.transition().style('opacity', '1');
|
33 | |
});
|
|
33 |
swapClasses('#editor_expand', 'icon-double-angle-right', 'icon-double-angle-left');
|
34 | 34 |
}
|
35 | 35 |
editorVisible = !editorVisible;
|
36 | 36 |
});
|