Skip to content

Commit efb5b4a

Browse files
64json64json
committed
add documentation tab
1 parent fbf15a5 commit efb5b4a

File tree

6 files changed

+140
-150
lines changed

6 files changed

+140
-150
lines changed

‎index.html‎

Lines changed: 123 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,25 @@
33

44
<head>
55
<meta charset="UTF-8">
6-
<meta name="description" content="Tool for visualizing algorithms." />
7-
<meta property="og:title" content="Algorithm Visualizer" />
8-
<meta property="og:description" content="Tool for visualizing algorithms." />
9-
<meta property="og:image" content="img/image.png" />
10-
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
6+
<meta name="description" content="Tool for visualizing algorithms."/>
7+
<meta property="og:title" content="Algorithm Visualizer"/>
8+
<meta property="og:description" content="Tool for visualizing algorithms."/>
9+
<meta property="og:image" content="img/image.png"/>
10+
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"/>
1111
<title>Algorithm Visualizer</title>
1212
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
1313
<link rel="stylesheet" href="public/algorithm_visualizer.min.css">
1414
</head>
1515

1616
<body>
17-
<div id="loading-slider">
18-
<div class="line"></div>
19-
<div class="break dot1"></div>
20-
<div class="break dot2"></div>
21-
<div class="break dot3"></div>
22-
</div>
23-
<nav>
24-
<button id="navigation">
17+
<div id="loading-slider">
18+
<div class="line"></div>
19+
<div class="break dot1"></div>
20+
<div class="break dot2"></div>
21+
<div class="break dot3"></div>
22+
</div>
23+
<nav>
24+
<button id="navigation">
2525
<h3>
2626
Algorithm Visualizer
2727
<i class="fa fa-angle-right nav-arrow" aria-hidden="true"></i>
@@ -31,120 +31,126 @@ <h3>
3131
<i class="fa fa-caret-up nav-dropdown" aria-hidden="true"></i>
3232
</h3>
3333
</button>
34-
<div class="top-menu-buttons">
35-
<div class="btn" id="btn_share">
36-
<div class="wrapper">
37-
<i class="fa fa-share" aria-hidden="true"></i> Share <input type="text" class="collapse" id="shared">
38-
</div>
39-
</div>
40-
<button id="btn_run">
41-
<i class="fa fa-play" aria-hidden="true"></i>
42-
<span class="btn-text">Run</span>
43-
</button>
44-
<button id="btn_prev">
45-
<i class="fa fa-chevron-left" aria-hidden="true"></i>
46-
<span class="btn-text">Prev</span>
47-
</button>
48-
<button id="btn_pause">
49-
<i class="fa fa-pause" aria-hidden="true"></i>
50-
<span class="btn-text"></span>
51-
</button>
52-
<button id="btn_next">
53-
<span class="btn-text">Next</span>
54-
<i class="fa fa-chevron-right" aria-hidden="true"></i>
55-
</button>
56-
<div class="btn">
57-
<div class="wrapper">
58-
Interval: <input type="number" value="" id="interval"> sec
59-
</div>
34+
<div class="top-menu-buttons">
35+
<div class="btn" id="btn_share">
36+
<div class="wrapper">
37+
<i class="fa fa-share" aria-hidden="true"></i> Share <input type="text" class="collapse" id="shared">
6038
</div>
6139
</div>
62-
</nav>
63-
<section class="sidemenu active">
64-
<div id="list">
40+
<button id="btn_run">
41+
<i class="fa fa-play" aria-hidden="true"></i>
42+
<span class="btn-text">Run</span>
43+
</button>
44+
<button id="btn_prev">
45+
<i class="fa fa-chevron-left" aria-hidden="true"></i>
46+
<span class="btn-text">Prev</span>
47+
</button>
48+
<button id="btn_pause">
49+
<i class="fa fa-pause" aria-hidden="true"></i>
50+
<span class="btn-text"></span>
51+
</button>
52+
<button id="btn_next">
53+
<span class="btn-text">Next</span>
54+
<i class="fa fa-chevron-right" aria-hidden="true"></i>
55+
</button>
56+
<div class="btn">
57+
<div class="wrapper">
58+
Interval: <input type="number" value="" id="interval"> sec
59+
</div>
6560
</div>
66-
<div id="footer">
67-
<button id="scratch-paper"><i class="fa fa-code"></i> Scratch Paper</button>
68-
<a href="https://github.com/parkjs814/AlgorithmVisualizer/wiki">
69-
<button><i class="fa fa-book"></i> Documentation</button>
61+
</div>
62+
</nav>
63+
<section class="sidemenu active">
64+
<div id="list">
65+
</div>
66+
<div id="footer">
67+
<button id="scratch-paper"><i class="fa fa-code"></i> Scratch Paper</button>
68+
<a href="https://github.com/parkjs814/AlgorithmVisualizer/wiki">
69+
<button><i class="fa fa-book"></i> Documentation</button>
70+
</a>
71+
<button class="category" id="powered-by"><i class="fa fa-github"></i> Powered by ...</button>
72+
<div id="powered-by-list">
73+
<a href="https://github.com/jquery/jquery">
74+
<button class="indent collapse">jquery/jquery</button>
75+
</a>
76+
<a href="https://github.com/ajaxorg/ace">
77+
<button class="indent collapse">ajaxorg/ace</button>
78+
</a>
79+
<a href="https://github.com/jacomyal/sigma.js">
80+
<button class="indent collapse">jacomyal/sigma.js</button>
81+
</a>
82+
<a href="https://github.com/FortAwesome/Font-Awesome">
83+
<button class="indent collapse">FortAwesome/Font-Awesome</button>
84+
</a>
85+
<a href="https://github.com/simonwhitaker/github-fork-ribbon-css">
86+
<button class="indent collapse">simonwhitaker/github-fork-ribbon-css</button>
7087
</a>
71-
<button class="category" id="powered-by"><i class="fa fa-github"></i> Powered by ...</button>
72-
<div id="powered-by-list">
73-
<a href="https://github.com/jquery/jquery">
74-
<button class="indent collapse">jquery/jquery</button>
75-
</a>
76-
<a href="https://github.com/ajaxorg/ace">
77-
<button class="indent collapse">ajaxorg/ace</button>
78-
</a>
79-
<a href="https://github.com/jacomyal/sigma.js">
80-
<button class="indent collapse">jacomyal/sigma.js</button>
81-
</a>
82-
<a href="https://github.com/FortAwesome/Font-Awesome">
83-
<button class="indent collapse">FortAwesome/Font-Awesome</button>
84-
</a>
85-
<a href="https://github.com/simonwhitaker/github-fork-ribbon-css">
86-
<button class="indent collapse">simonwhitaker/github-fork-ribbon-css</button>
87-
</a>
88-
</div>
8988
</div>
90-
<a class="github-fork-ribbon left-bottom" href="http://github.com/parkjs814/AlgorithmVisualizer" title="Fork me on GitHub">Fork me on GitHub</a>
91-
</section>
92-
<div class="workspace">
93-
<div class="viewer_container">
94-
<section class="tab_bar">
95-
<button class="active" id="btn_desc">Description</button>
96-
<button id="btn_trace">Trace</button>
97-
</section>
98-
<section class="tab_container">
99-
<div class="tab active" id="tab_desc">
100-
<div class="wrapper">
101-
</div>
89+
</div>
90+
<a class="github-fork-ribbon left-bottom" href="http://github.com/parkjs814/AlgorithmVisualizer"
91+
title="Fork me on GitHub">Fork me on GitHub</a>
92+
</section>
93+
<div class="workspace">
94+
<div class="viewer_container">
95+
<section class="tab_bar">
96+
<button id="btn_doc" data-target="#tab_doc">Documentation</button>
97+
<button class="active" id="btn_desc" data-target="#tab_desc">Description</button>
98+
<button id="btn_trace" data-target="#tab_module">Trace</button>
99+
</section>
100+
<section class="tab_container">
101+
<div class="tab" id="tab_doc">
102+
<div class="wrapper">
102103
</div>
103-
<div class="tab module_container" id="tab_module">
104+
</div>
105+
<div class="tab active" id="tab_desc">
106+
<div class="wrapper">
104107
</div>
105-
</section>
106-
</div>
107-
<div class="editor_container">
108-
<section class="files_bar">
109-
<button class="btn-left"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
110-
<div class="wrapper"></div>
111-
<button class="btn-right"><i class="fa fa-angle-right" aria-hidden="true"></i></button>
112-
</section>
113-
<section class="explanation_container">
114-
<span id="explanation"></span>
115-
</section>
116-
<section class="data_container">
117-
<pre id="data"></pre>
118-
</section>
119-
<section class="code_container">
120-
<pre id="code"></pre>
121-
</section>
122-
</div>
108+
</div>
109+
<div class="tab module_container" id="tab_module">
110+
</div>
111+
</section>
123112
</div>
124-
<div class="toast_container">
113+
<div class="editor_container">
114+
<section class="files_bar">
115+
<button class="btn-left"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
116+
<div class="wrapper"></div>
117+
<button class="btn-right"><i class="fa fa-angle-right" aria-hidden="true"></i></button>
118+
</section>
119+
<section class="explanation_container">
120+
<span id="explanation"></span>
121+
</section>
122+
<section class="data_container">
123+
<pre id="data"></pre>
124+
</section>
125+
<section class="code_container">
126+
<pre id="code"></pre>
127+
</section>
125128
</div>
126-
<script src="public/lib/jquery-2.2.3.min.js"></script>
127-
<script src="public/lib/sigma/sigma.min.js"></script>
128-
<script src="public/lib/sigma/plugins/sigma.plugins.dragNodes.min.js"></script>
129-
<script src="public/lib/ace/ace.js"></script>
130-
<script src="public/lib/ace/ext-language_tools.js"></script>
131-
<script src="public/lib/Chart-2.1.3.min.js"></script>
132-
<script src="public/algorithm_visualizer.min.js"></script>
133-
<script>
134-
(function(i, s, o, g, r, a, m) {
135-
i['GoogleAnalyticsObject'] = r;
136-
i[r] = i[r] || function() {
137-
(i[r].q = i[r].q || []).push(arguments)
138-
}, i[r].l = 1 * new Date();
139-
a = s.createElement(o),
129+
</div>
130+
<div class="toast_container">
131+
</div>
132+
<script src="public/lib/jquery-2.2.3.min.js"></script>
133+
<script src="public/lib/sigma/sigma.min.js"></script>
134+
<script src="public/lib/sigma/plugins/sigma.plugins.dragNodes.min.js"></script>
135+
<script src="public/lib/ace/ace.js"></script>
136+
<script src="public/lib/ace/ext-language_tools.js"></script>
137+
<script src="public/lib/Chart-2.1.3.min.js"></script>
138+
<script src="public/algorithm_visualizer.min.js"></script>
139+
<script>
140+
(function (i, s, o, g, r, a, m) {
141+
i['GoogleAnalyticsObject'] = r;
142+
i[r] = i[r] || function () {
143+
(i[r].q = i[r].q || []).push(arguments)
144+
}, i[r].l = 1 * new Date();
145+
a = s.createElement(o),
140146
m = s.getElementsByTagName(o)[0];
141-
a.async = 1;
142-
a.src = g;
143-
m.parentNode.insertBefore(a, m)
144-
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
145-
ga('create', 'UA-78128848-1', 'auto');
146-
ga('send', 'pageview');
147-
</script>
147+
a.async = 1;
148+
a.src = g;
149+
m.parentNode.insertBefore(a, m)
150+
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
151+
ga('create', 'UA-78128848-1', 'auto');
152+
ga('send', 'pageview');
153+
</script>
148154
</body>
149155

150156
</html>

‎js/dom/setup/setup_top_menu.js‎

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ const TopMenu = require('../top_menu');
88
module.exports = () => {
99

1010
// shared
11-
$('#shared').mouseup(function() {
11+
$('#shared').mouseup(function () {
1212
$(this).select();
1313
});
1414

15-
$('#btn_share').click(function() {
15+
$('#btn_share').click(function () {
1616

1717
const $icon = $(this).find('.fa-share');
1818
$icon.addClass('fa-spin fa-spin-faster');
@@ -27,12 +27,11 @@ module.exports = () => {
2727

2828
// control
2929

30-
const $btnRun = $('#btn_run');
30+
const $btnRun = $('#btn_run');
3131
const $btnTrace = $('#btn_trace');
3232
const $btnPause = $('#btn_pause');
33-
const $btnPrev = $('#btn_prev');
34-
const $btnNext = $('#btn_next');
35-
const $btnDesc = $('#btn_desc');
33+
const $btnPrev = $('#btn_prev');
34+
const $btnNext = $('#btn_next');
3635

3736
// initially, control buttons are disabled
3837
TopMenu.disableFlowControl();
@@ -75,18 +74,11 @@ module.exports = () => {
7574

7675
// description & trace
7776

78-
$btnDesc.click(() => {
79-
$('.tab_container > .tab').removeClass('active');
80-
$('#tab_desc').addClass('active');
77+
$('.tab_bar > button').click(function () {
8178
$('.tab_bar > button').removeClass('active');
82-
$btnDesc.addClass('active');
83-
});
84-
85-
$btnTrace.click(() => {
8679
$('.tab_container > .tab').removeClass('active');
87-
$('#tab_module').addClass('active');
88-
$('.tab_bar > button').removeClass('active');
89-
$btnTrace.addClass('active');
80+
$(this).addClass('active');
81+
$($(this).attr('data-target')).addClass('active');
9082
});
9183

9284
};

‎public/algorithm_visualizer.js‎

Lines changed: 4 additions & 12 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/algorithm_visualizer.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/algorithm_visualizer.min.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/algorithm_visualizer.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)