Skip to content

Commit f148adb

Browse files
64json64json
committed
now can share code!
1 parent ad33227 commit f148adb

4 files changed

Lines changed: 85 additions & 24 deletions

File tree

‎css/stylesheet.css‎

Lines changed: 42 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,18 @@ a {
3232
user-select: none;
3333
}
3434

35+
.btn {
36+
display: inline-table;
37+
}
38+
39+
.btn > .wrapper {
40+
display: table-cell;
41+
vertical-align: middle;
42+
}
43+
44+
.btn,
3545
button {
46+
vertical-align: top;
3647
border: none;
3748
height: 100%;
3849
padding: 0 12px;
@@ -45,14 +56,24 @@ button {
4556
text-overflow: ellipsis;
4657
}
4758

59+
.btn:hover,
4860
button:hover {
4961
background: rgba(0, 0, 0, .15) !important;
5062
}
5163

64+
.btn.active,
5265
button.active {
5366
background: rgb(44, 44, 44);
5467
}
5568

69+
.btn input,
70+
button input {
71+
outline: none;
72+
background: rgba(0, 0, 0, .3);
73+
padding: 4px;
74+
border: none;
75+
}
76+
5677
.divider {
5778
position: absolute !important;
5879
z-index: 3;
@@ -80,16 +101,25 @@ nav h3 {
80101
padding: 0 4px;
81102
}
82103

104+
#category:empty + .nav-arrow {
105+
display: none;
106+
}
107+
83108
.buttons {
84109
float: right;
85110
height: 100%;
86111
}
87112

88-
button input {
89-
outline: none;
90-
background: none;
91-
border: none;
92-
width: 20px;
113+
#shared {
114+
width: 128px;
115+
}
116+
117+
#shared.collapse {
118+
display: none;
119+
}
120+
121+
#interval {
122+
width: 24px;
93123
text-align: right;
94124
}
95125

@@ -122,11 +152,10 @@ button.category {
122152

123153
button.indent {
124154
padding-left: 28px;
125-
display: none;
126155
}
127156

128157
button.collapse {
129-
display: block;
158+
display: none;
130159
}
131160

132161
.workspace {
@@ -199,7 +228,7 @@ section {
199228
background: rgb(44, 44, 44);
200229
}
201230

202-
.module_wrapper .wrapper {
231+
.module_wrapper > .wrapper {
203232
padding: 24px 16px;
204233
box-sizing: border-box;
205234
}
@@ -302,6 +331,11 @@ pre {
302331
background-color: #333;
303332
}
304333

334+
.fa-spin-faster {
335+
-webkit-animation: fa-spin 1s infinite ease-in-out;
336+
animation: fa-spin 1s infinite ease-in-out;
337+
}
338+
305339
.mtbl-wrapper {
306340
width: 100%;
307341
height: 100%;

‎index.html‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,20 @@ <h3>
2626
</h3>
2727
</button>
2828
<div class="buttons">
29+
<div class="btn" id="btn_share">
30+
<div class="wrapper">
31+
<i class="fa fa-share" aria-hidden="true"></i> Share <input type="text" class="collapse" id="shared">
32+
</div>
33+
</div>
2934
<button id="btn_run"><i class="fa fa-play" aria-hidden="true"></i> Run</button>
3035
<button id="btn_prev"><i class="fa fa-chevron-left" aria-hidden="true"></i> Prev</button>
3136
<button id="btn_pause"><i class="fa fa-pause" aria-hidden="true"></i> Pause</button>
3237
<button id="btn_next">Next <i class="fa fa-chevron-right" aria-hidden="true"></i></button>
33-
<button id="btn_interval">Interval: <input type="text" value="0.5"> sec</button>
38+
<div class="btn">
39+
<div class="wrapper">
40+
Interval: <input type="text" value="0.5" id="interval"> sec
41+
</div>
42+
</div>
3443
</div>
3544
</nav>
3645
<section class="sidemenu active">

‎js/module/tracer_manager.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ TracerManager.prototype = {
8383
return this.pause;
8484
},
8585
setInterval: function (interval) {
86-
$('#btn_interval input').val(interval);
86+
$('#interval').val(interval);
8787
},
8888
reset: function () {
8989
this.traces = [];

‎js/script.js‎

Lines changed: 32 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,13 @@ $(document).on('click', 'a', function (e) {
77
alert('Please allow popups for this site');
88
}
99
});
10+
$('.btn input').click(function (e) {
11+
e.stopPropagation();
12+
});
1013

1114
var tm = new TracerManager();
1215

13-
$('#btn_interval input').on('change', function () {
16+
$('#interval').on('change', function () {
1417
tm.interval = Number.parseFloat($(this).val() * 1000);
1518
showInfoToast('Tracing interval has been set to ' + tm.interval / 1000 + ' second(s).');
1619
});
@@ -181,9 +184,9 @@ var loadAlgorithm = function (category, algorithm) {
181184
});
182185
};
183186
var list = {};
187+
var anyOpened = false;
184188
$.getJSON('./algorithm/category.json', function (data) {
185189
list = data;
186-
var init = false;
187190
for (var category in list) {
188191
(function (category) {
189192
var $category = $('<button class="category">').append(list[category].name);
@@ -194,16 +197,16 @@ $.getJSON('./algorithm/category.json', function (data) {
194197
var subList = list[category].list;
195198
for (var algorithm in subList) {
196199
(function (category, subList, algorithm) {
197-
var $algorithm = $('<button class="indent">')
200+
var $algorithm = $('<button class="indent collapse">')
198201
.append(subList[algorithm])
199202
.attr('data-algorithm', algorithm)
200203
.attr('data-category', category)
201204
.click(function () {
202205
loadAlgorithm(category, algorithm);
203206
});
204207
$('#list').append($algorithm);
205-
if (!init) {
206-
init = true;
208+
if (!anyOpened) {
209+
anyOpened = true;
207210
$algorithm.click();
208211
}
209212
})(category, subList, algorithm);
@@ -255,6 +258,15 @@ var showInfoToast = function (info) {
255258
}, 3000);
256259
};
257260

261+
$('#btn_share').click(function () {
262+
var $icon = $(this).find('.fa-share');
263+
$icon.addClass('fa-spin fa-spin-faster');
264+
shareScratchPaper(function (url) {
265+
$icon.removeClass('fa-spin fa-spin-faster');
266+
$('#shared').removeClass('collapse');
267+
$('#shared').val(url);
268+
});
269+
});
258270
$('#btn_run').click(function () {
259271
$('#btn_trace').click();
260272
try {
@@ -393,8 +405,6 @@ $module_container.on('DOMMouseScroll mousewheel', '.module_wrapper', function (e
393405
tm.findOwner(this).mousewheel(e);
394406
});
395407

396-
// Share scratch paper
397-
398408
var getParameterByName = function (name) {
399409
var url = window.location.href;
400410
name = name.replace(/[\[\]]/g, "\\$&");
@@ -405,30 +415,38 @@ var getParameterByName = function (name) {
405415
return decodeURIComponent(results[2].replace(/\+/g, " "));
406416
};
407417

408-
var shareScratchPaper = function () {
418+
var shareScratchPaper = function (callback) {
409419
var gist = {
410420
'description': 'temp',
411421
'public': true,
412422
'files': {
413-
'code.js': {'content': dataEditor.getValue()},
414-
'data.js': {'content': codeEditor.getValue()}
423+
'code.js': {'content': codeEditor.getValue()},
424+
'data.js': {'content': dataEditor.getValue()}
415425
}
416426
};
417427
$.post('https://api.github.com/gists', JSON.stringify(gist), function (res) {
418428
var data = JSON.parse(res);
419-
console.log(location.protocol + '//' + location.host + location.pathname + '?scratch-paper=' + data.id);
429+
if (callback) callback(location.protocol + '//' + location.host + location.pathname + '?scratch-paper=' + data.id);
420430
});
421431
};
422432

423433
var loadScratchPaper = function (gistID) {
434+
anyOpened = true;
424435
$.get('https://api.github.com/gists/' + gistID, function (res) {
425436
var data = JSON.parse(res);
426-
console.log(data);
437+
var category = null;
438+
var algorithm = 'scratch_paper';
439+
var dir = getFileDir(category, algorithm, 'scratch_paper');
440+
cachedFile[dir] = {
441+
data: data.files['data.js'].content,
442+
code: data.files['code.js'].content
443+
};
444+
loadAlgorithm(category, algorithm);
427445
});
428446
};
429447

430-
if (/[?&]scratch-paper=/.test(location.search)) {
431-
var gistID = getParameterByName('scratch-paper');
448+
var gistID = getParameterByName('scratch-paper');
449+
if (gistID) {
432450
console.log(gistID);
433451
loadScratchPaper(gistID);
434452
}

0 commit comments

Comments
 (0)