forked from hackfoldr/hackfoldr-2.0
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.jade
883 lines (803 loc) · 35.6 KB
/
index.jade
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
extends _template
block title
block body
nav#sidebar.desktop-expanded-layout
nav#nav.desktop.only
.ui.borderless.menu
include white_label-shortcuts-nav
.ui.dropdown.icon.item.history
i.icon.time(data-content="紀錄")
include foldr_history-menu
.ui.dropdown.icon.item.about
i.icon.help(data-content="說明")
include help-menu
a.right.item.expand.button.collapsed.mode.hidden.desktop.only
i.icon.arrow.right(data-content="展開")
a.right.item.collapse.button.expanded.mode.desktop.only
i.icon.arrow.left(data-content="收合")
.right.icon.item.zoom.ui.dropdown
i.icon.zoom.in(data-content="縮放")
include zoom-menu
//- on mobile / tablet / phone, nav bar content is merged into this bar
nav#topbar
.ui.borderless.menu
a.item.foldr.title
//-i.icon.home
span.text
include white_label-shortcuts-topbar
.ui.dropdown.icon.item.history.tablet.only
i.icon.time(data-content="紀錄")
include foldr_history-menu
.ui.dropdown.icon.item.about.tablet.only
i.icon.help(data-content="說明")
include help-menu
a.right.item.show.nav.button.collapsed.mode.mobile.only
i.icon.arrow.down(data-content="展開")
a.right.item.hide.nav.button.expanded.mode.hidden.mobile.only
i.icon.arrow.up(data-content="收合")
.right.ui.dropdown.icon.item.meta.phone.only
i.icon.ellipsis.vertical(data-content="選項")
.menu
a.item.edit.table.tiny.only(target="iframe") 編輯
i.icon.pencil
a.item.refresh.table.tiny.only.hidden 更新
i.icon.repeat
include white_label-shortcuts-dropdown
.item.history 紀錄
i.icon.time
include foldr_history-menu
.item.about 說明
i.icon.help
include help-menu
.right.icon.item.zoom.ui.dropdown.tablet.only
i.icon.zoom.in(data-content="縮放")
include zoom-menu
a.right.icon.item.edit.table(target="iframe")
i.icon.pencil(data-content="編輯")
a.right.icon.item.refresh.table.hidden
i.icon.repeat(data-content="更新")
a.right.icon.item.add.to.list.hidden
i.icon.add(data-content="新增")
.ui.segment.submit.no.margin.hidden.expanded.mode
.ui.form
.inline.field
.ui.radio.checkbox.add.only
input.content.type(id="add-only",type="radio",name="submit",checked)
label(for="add-only") 投稿
.ui.radio.checkbox.add.create
input.content.type(id="create-add",type="radio",name="submit")
label(for="create-add") 開 hackpad 並投稿
form.ui.warning.form.adding.only.mode
.ui.error.message
.field
.ui.left.labeled.icon.input
input.new.link.title(placeholder="想顯示在 foldr 中的連結名稱",type="text",name="new-link-title",value="",required)
i.icon.font
.ui.corner.label
i.icon.asterisk
.field
.ui.left.labeled.icon.input
input.new.link.url(placeholder="連結網址",type="url",name="new-link-url",value="",required)
i.icon.url
.ui.corner.label
i.icon.asterisk
button.ui.submit.button.green.small.add.only add to foldr
form.ui.warning.form.creating.adding.mode.hidden
.ui.error.message
.field
.ui.left.labeled.icon.input
input.new.pad.title(placeholder="想顯示在 foldr 中的文件名稱",type="text",name="new-pad-name",value="",required)
i.icon.font
.ui.corner.label
i.icon.asterisk
button.ui.submit.button.green.small.add.create create and add to foldr
nav#toc
.ui.fluid.vertical.menu.sortable
#wrapper.desktop-expanded-layout
.frame
iframe#iframe(name="iframe")
block script
script.
// prepare to handle url
var paths = location.pathname.split('/') || [];
var ethercalc_name = paths[1] || "welcome-to-hackfoldr";
var current_iframe_url = paths[2] ? unescape(unescape(paths[2])) : null;
var history_state={};
// prepare to handle backend data (from ethercalc or google spreadsheet)
var csv_api_source = "";
var csv_api_source_type = "";
var csv_api_source_id = ethercalc_name;
// prepare to accept foldr options set in ethercalc
var hide_sheet = false;
var sort_sheet = true;
// prepare to handle iframe content
var current_foldr_name = "";
var iframe_src;
// user preferences saved in local storage
var foldr_histories = JSON.parse(localStorage.getItem("hackfoldr")) || [];
var foldr_scale = JSON.parse(localStorage.getItem("hackfoldr-scale")) || "";
// check where the csv will come from, ethercalc or gsheet?
if(ethercalc_name.length < 40){
csv_api_source = 'https://ethercalc.org/_/'+ethercalc_name+'/csv';
csv_api_source_type = "ethercalc";
}else{
csv_api_source = 'docs.google.com/feeds/download/spreadsheets/Export?key='+ethercalc_name+'&exportFormat=csv&gid=0';
csv_api_source_type = "google";
// because posting to gsheet is hard to implement, we don't offer submit feature when using gsheet. since it's easy to moderate editing in gsheet, you can just let users edit or comment on it.
$("#topbar .add.to.list, #topbar .submit.segment").remove();
};
// let user sort #toc menu by drag and drop, a very user friendly feature suggest by @ipa. using jquery ui sortable. (also, ethercalc only)
var sort_ethercalc = function(sort_initial_row, sort_target_row){
$.ajax({
url: "https://ethercalc.org/_/"+ethercalc_name,
contentType: 'text/plain',
data: 'moveinsert A'+sort_initial_row+':F'+sort_initial_row+' A'+sort_target_row,
type: 'POST',
processData: false
// to avoid race condition (ethercalc data is re-compiled before post action is finished), use promise mode on $.ajax and prospond compile action for 1 sec. thanks @audreyt :3 :3
}).then(function(){ setTimeout(function(){
$("#toc .menu").html("");
compile_ethercalc();
}, 1000) });
}
// for jquery ui sortable
var sort_action = {
update: function( event, ui ) {
// previously we have assigned each menu item an id attribute while reading csv data. ha!
var sort_initial_row = ui.item.attr("id");
// get an array with new item order as array index, and old item row number as array value. using a jquery ui built-in function.
var new_order = $(this).sortable("toArray");
// find the old row name of the next sibling of the dragged item.
var sort_target_neighbor = new_order[$.inArray(sort_initial_row, new_order)+1]
// but if item is dragged to bottom, there would be no neighbor. so use the one with largest row number instead.
if($.type(sort_target_neighbor)==="undefined"){
new_order = $.map(new_order, function(value, index){
return parseInt(value);
});
var sort_target_neighbor_row = Math.max.apply(Math, new_order);
var sort_target_row = sort_target_neighbor_row+1;
}else{
var sort_target_row = parseInt(sort_target_neighbor);
}
// convert row numbers from string to number
var sort_initial_row = parseInt(sort_initial_row);
//console.log(sort_initial_row+" to "+(sort_target_row-1));
sort_ethercalc(sort_initial_row, sort_target_row);
}
};
// compile csv data from either ethercalc or google spreadsheet
var compile_json = function(rows){
// jump from ethercalc to google spreadsheet when A1 is filled with a gsheet id
if(csv_api_source_type == "ethercalc" && !rows[0][0].match(/^#/) && rows[0][0].length >= 40){
// reset all related variables and compile again
csv_api_source = 'docs.google.com/feeds/download/spreadsheets/Export?key='+rows[0][0]+'&exportFormat=csv&gid=0';
csv_api_source_type = "google";
csv_api_source_id = rows[0][0].trim();
// remember? we don't support submit forms with gsheet. so need to remove the + button as well as the form segment.
$("#topbar .add.to.list, #topbar .submit.segment").remove();
compile_ethercalc();
return
}
// at the first beginning, we don't have a foldr title. so we are going to get the title before any other thing happens.
var got_title = false
// #toc menu items are at root level by default. if depth == 1, they will be in level 1 submenu, which is wrapped inside an semantic ui accordion
var depth = 0
var link_template_source ='<a href="{{url}}" target="{{target}}" id="{{id}}" class="{{type}} item"><i class="icon {{icon}}" data-content="{{subject}}"></i>{{subject}}</a>';
//var link_template_source ='<a href="{{url}}" target="{{target}}" class="{{type}} item"><i class="icon {{icon}}"></i>{{subject}}</a>';
var link_template = Handlebars.compile(link_template_source);
var link_label_template_source ='<div class="ui label {{color}}">{{label}}</div>';
var link_label_template = Handlebars.compile(link_label_template_source);
// for link items
var add_link = function(row_index, row){
// prepare to handle link items. these variables will be used with link_template.
var link_icon = "";
var link_type = "link";
var link_url = row[0].trim();
// parse link options. version 1
//try{
// var link_options = JSON.parse(row[2]);
//}catch(e){
// var link_options = {};
//}
// apply additional link options set in column c... well, since there seems to be only one possible option (target), i would like to make it easier to setup... how about just writing "blank" keyword?
//for(key in link_options){
// $link_element.attr(key, link_options[key]);
//}
// parse link options. version 2
if(row[2].match(/blank/)){
var link_target = "_blank";
}else{
var link_target = "iframe";
}
// automatically assign various of pretty icons for link items
if(link_url.match(/^.*.hackpad.com\//)){
link_icon = "text file outline";
} else if(link_url.match(/^.*.etherpad.mozilla.org\//)) {
link_icon = "file outline";
} else if(link_url.match(/^.*.groups.google.com\//)) {
link_icon = "users";
} else if(link_url.match(/^.*.plus.google.com\//)) {
link_icon = "google plus";
} else if(link_url.match(/^.*.kktix.cc\//)) {
link_icon = "bullhorn";
} else if(link_url.match(/^.*.kktix.com\//)) {
link_icon = "bullhorn";
} else if(link_url.match(/^.*.registrano.com\//)) {
link_icon = "bullhorn";
} else if(link_url.match(/^.*.docs.google.com\/spreadsheet.*/)) {
link_icon = "table";
} else if(link_url.match(/^.*.docs.google.com\/drawings.*/)) {
link_icon = "photo";
} else if(link_url.match(/^.*.docs.google.com\/document.*/)) {
link_icon = "text file";
} else if(link_url.match(/^.*.docs.google.com\/presentation.*/)) {
link_icon = "laptop";
} else if(link_url.match(/^.*.docs.google.com\/form.*/)) {
link_icon = "unordered list";
} else if(link_url.match(/^.*.drive.google.com\//)) {
link_icon = "cloud";
} else if(link_url.match(/^.*.mapsengine.google.com\//)) {
link_icon = "map marker";
} else if(link_url.match(/^.*.www.google.com\/maps\//)) {
link_icon = "map marker";
} else if(link_url.match(/^.*.umap.fluv.io\//)) {
link_icon = "map marker";
} else if(link_url.match(/^.*.github.com\//)) {
link_icon = "github";
} else if(link_url.match(/^.*.moqups.com\//)) {
link_icon = "photo";
} else if(link_url.match(/^.*.facebook.com\//)) {
link_icon = "facebook";
} else if(link_url.match(/^.*.twitter.com\//)) {
link_icon = "twitter";
} else if(link_url.match(/^.*.tumblr.com\//)) {
link_icon = "tumblr";
} else if(link_url.match(/^.*.trello.com\//)) {
link_icon = "trello";
} else if(link_url.match(/^.*.youtube.com\/embed\//)) {
link_icon = "youtube play";
} else if(link_url.match(/^.*.youtube.com\//)) {
link_icon = "youtube";
} else if(link_url.match(/^.*.ustream.tv\//)) {
link_icon = "facetime video";
} else if(link_url.match(/^.*.www.justin.tv\//)) {
link_icon = "facetime video";
} else if(link_url.match(/^.*.www.ptt.cc\/bbs\//)) {
link_icon = "chat outline";
} else if(link_url.match(/^.*.disp.cc\//)) {
link_icon = "chat outline";
} else if(link_url.match(/^.*.www.google.com\/moderator\//)) {
link_icon = "chat outline";
} else if(link_url.match(/^.*.www.loomio.org\//)) {
link_icon = "chat outline";
} else if(link_url.match(/^.*.hack.g0v.tw\//)) {
link_icon = "exchange";
//link_url = link_url.split("/")[1].toString();
//link_type = "foldr";
//link_target = "";
} else if(link_url.match(/^.*.hack.etblue.tw\//)) {
link_icon = "exchange";
//link_url = link_url.split("/")[1].toString();
//link_type = "foldr";
//link_target = "";
} else if(link_url.match(/^.*.hackfoldr.org\//)) {
link_icon = "exchange";
//link_url = link_url.split("/")[1].toString();
//link_type = "foldr";
//link_target = "";
} else {
link_icon = "globe";
}
// wrap up link item optinos into a hash
var context = {id: row_index+1, url: link_url, subject: row[1], icon: link_icon, type: link_type, target: link_target};
// and send it into the html template (meanwhile, assign it an id for jquery sortable)
var $link_element = $(link_template(context));
// parse link labels
var link_label = row[3].trim();
var link_label_color = "";
if(link_label.length > 0){
// set up label color
if(link_label.match(/^gray/) || link_label.match(/:issue/)){
link_label_color = "gray";
}else if(link_label.match(/^deep-blue/)){
link_label_color = "deep-blue";
}else if(link_label.match(/^deep-green/)){
link_label_color = "deep-green";
}else if(link_label.match(/^deep-purple/)){
link_label_color = "deep-purple";
}else if(link_label.match(/^black/)){
link_label_color = "black";
}else if(link_label.match(/^green/)){
link_label_color = "green";
}else if(link_label.match(/^red/) || link_label.match(/:important/)){
link_label_color = "red";
}else if(link_label.match(/^blue/)){
link_label_color = "blue";
}else if(link_label.match(/^orange/)){
link_label_color = "orange";
}else if(link_label.match(/^purple/)){
link_label_color = "purple";
}else if(link_label.match(/^teal/)){
link_label_color = "teal";
}else if(link_label.match(/^yellow/) || link_label.match(/:warning/)){
link_label_color = "yellow";
}else if(link_label.match(/^pink/)){
link_label_color = "pink";
};
// set up label content
link_label = link_label.replace(link_label_color,"").replace("important","").replace("warning","").replace("issue","").replace(":","").trim();
// append label to link item
var label_context = {label: link_label, color: link_label_color};
var $link_label_element = $(link_label_template(label_context));
$link_element.find("i.icon").after($link_label_element);
}
// append link item to #toc menu
if(depth == 1){
$('#toc .ui.accordion:last').find('.menu').append($link_element);
}else{
$('#toc .ui.vertical.menu').append($link_element);
}
// set iframe src?
if(current_iframe_url == "edit"){
if(csv_api_source_type=="ethercalc"){
iframe_src = 'https://ethercalc.org/'+csv_api_source_id;
}else{
iframe_src = 'https://docs.google.com/spreadsheets/d/'+csv_api_source_id+'/edit';
};
$("title").text("編輯 | "+current_foldr_name+" | hackfoldr");
$("#topbar .edit.table").hide();
$("#topbar .refresh.table").show();
$("#topbar .add.to.list").show();
}else if((new RegExp(context.url+"/?")).test(current_iframe_url)){
iframe_src = current_iframe_url;
}else if(/^https:\/\/.*.hackpad.com\//.test(context.url)){
if( current_iframe_url === context.url.split(/\//).pop()){
iframe_src = context.url;
}
}
// the very first link href would be default iframe_src
if(!iframe_src) {
iframe_src = context.url;
}
}
var accordion_template_source = '<div class="ui accordion"><div id="{{id}}" class="title header item {{mode}}"><i class="icon folder closed"></i><i class="icon folder open hidden" data-content="{{title}} style="display: none;"></i>{{title}}</div><div class="content ui small sortable menu {{mode}}"></div></div>'; var accordion_template = Handlebars.compile(accordion_template_source);
// for foldr items
var add_accordion = function(row_index, row){
// foldr options, version 1
//try{
// var options = JSON.parse(row[2]);
//}catch(e){
// var options = {};
//}
// foldr options, version 2
if(row[2].match(/expand/)){
var foldr_mode = "active";
}else if(row[2].match(/collapse/)){
var foldr_mode = "collapsed-subfoldr";
}else{
var foldr_mode = "";
}
var context = {title: row[1], id: row_index+1, mode: foldr_mode};
var $accordion_el = $(accordion_template(context));
// append foldr item to #toc menu
$accordion_el.appendTo('#toc .ui.vertical.menu').accordion();
// expand foldr item if "expand" is set to its option
//if(foldr_mode){
// $accordion_el.accordion('open',0)
//}
}
// start creating #toc menu
$.each(rows, function(row_index, row){
// prepare column A - D for following actions
if(!row[0]){
row[0] = "";
}
if(!row[1]){
row[1] = "";
}
if(!row[2]){
row[2] = "";
}
if(!row[3]){
row[3] = "";
}
// skip comment rows
if(row[0].match(/^#/) || row[1].match(/^#/) || row[2].match(/^#/) || row[3].match(/^#/)){
return
}
var this_row_url = row[0].trim();
var this_row_title = row[1].trim();
// if column A and B is empty, then skip this row
if(this_row_url.length === 0 && this_row_title.length === 0){
return
}
// if anyone of column A and B is not empty, then parse this row
// if foldr title is not set yet, then the content of first non-empty row would be foldr title
if(!got_title){
if(this_row_title.length > 0){
// make the first non-comment content foldr title
$('#topbar .foldr.title .text').text(this_row_title);
current_foldr_name = this_row_title;
got_title = true;
// detect sheet hide option
if(row[2].match(/hide/)) {
hide_sheet = true;
}
// detect sheet sort option
if(row[2].match(/unsortable/)) {
sort_sheet = false;
}
// detect title row index, not using
//new_pad_row_index = row_index+2;
// save current foldr info
var current_foldr_history = {
foldr_name: this_row_title,
foldr_id: ethercalc_name
};
// Remove all items in foldr_histories that share the same foldr_id
foldr_histories = $.grep(foldr_histories, function(value){
return JSON.parse(value).foldr_id !== current_foldr_history.foldr_id;
});
// new history on top
foldr_histories.unshift(JSON.stringify(current_foldr_history));
// add foldr to history
localStorage.setItem("hackfoldr", JSON.stringify(foldr_histories));
}else{
return
}
// TODO: need opt....
//$.each(row, function(col_index, col){
// col = col.trim();
// // get the MAGIC title
// if(!got_title && col.length > 0) {
// }
//});
} else {
// since foldr title is set, start to get links in #toc
if(this_row_url.length == 0 || this_row_url.match(/^>/)){ // folder
depth = 1
add_accordion(row_index, row);
}else if(this_row_url.match(/^</)){ // end folder
depth = 0
}else { // link
add_link(row_index, row);
// set initial page title
if(this_row_url == iframe_src){
if(iframe_src == "edit"){
$("title").text("編輯 | "+current_foldr_name+" | hackfoldr");
}else{
$("title").text(this_row_title+" | "+current_foldr_name+" | hackfoldr");
}
}
}
}
});
// set initial iframe src attribute
if(!$("#iframe").attr("src")){
$("#iframe").attr("src",iframe_src);
}
// auto new window, and auto new window icon
var new_window_icon = "<i class='icon forward mail'></i>";
var open_link_in_new_window_or_not = function(){
link_url = $(this).attr("href");
if(link_url.match(/^.*.plus.google.com\//)) {
return true;
} else if(link_url.match(/^.*.kktix.cc\//)) {
return true;
} else if(link_url.match(/^.*.kktix.com\//)) {
return true;
} else if(link_url.match(/^.*.registrano.com\//)) {
return true;
} else if(link_url.match(/^.*.github.com\//)) {
return true;
} else if(link_url.match(/^.*.drive.google.com\//)) {
return true;
} else if(link_url.match(/^.*.facebook.com\//)) {
return true;
} else if(link_url.match(/^.*.trello.com\//)) {
return true;
} else if(link_url.match(/^.*.youtube.com\/playlist.*/)) {
return true;
//} else if(link_url.match(/^.*.gov.tw\//)) {
// return true;
} else if(link_url.match(/^.*.www.loomio.org\//)) {
return true;
} else {
return false;
}
};
$("#toc a.link.item").filter(open_link_in_new_window_or_not).attr("target","_blank").find("i.icon").after(new_window_icon);
$("#toc a.link.item[target='_blank']").not(":has(i.icon.forward.mail)").find("i.icon").after(new_window_icon);
// auto highlight active items and expand parent accordion
var link_is_current_url_or_not = function(){
link_url = $(this).attr("href");
if(link_url == iframe_src){
return true;
} else {
return false;
}
};
$("#toc a.link.item").filter(link_is_current_url_or_not).addClass("active").parent(".content").addClass("active").prev(".header").addClass("active");
// auto expand #toc accordion when number < 4
var children_are_less_or_not = function(){
if($(this).children().length<4){
return true;
}else{
return false;
}
};
$("#toc .ui.accordion .content").filter(children_are_less_or_not).not(".collapsed-subfoldr").addClass("active").prev(".header").addClass("active");
// change foldr icons for auto activated subfoldrs
$("#toc .ui.accordion .header.active .icon.folder.closed").hide();
$("#toc .ui.accordion .header.active .icon.folder.open").show();
// make #toc sortable on edit page by default
if(current_iframe_url == "edit"){
if(csv_api_source_type=="ethercalc"){
if(sort_sheet){
$("#toc .sortable").sortable(sort_action);
}
}
}
// enable popup
$('i.icon').popup();
}
// prepare to load or refresh csv data
var compile_ethercalc = function(){
if(csv_api_source_type=="ethercalc"){
// compile ethercalc csv
$.get(csv_api_source).pipe(CSV.parse).done(compile_json);
}else{
// compile gsheet-tabletop json
Tabletop.init({
key: csv_api_source_id,
callback: function(data, tabletop){
data = data.map(function (o) {
result = [];
result[0] = o.url || "";
result[1] = o.title || "";
result[2] = o.foldrexpend || "";
result[3] = o["編輯註解"] || "";
result[4] = o.hints || "";
return result;
});
compile_json(data);
},
simpleSheet: true
});
}
};
// load page~
compile_ethercalc();
// setup history menu
$.each(foldr_histories, function(index, foldr_history){
var item = JSON.parse(foldr_history);
$("#sidebar .history .menu").append(
$('<a />', { href: '/'+item.foldr_id, 'class': 'foldr item' })
.text(item.foldr_name)
.prepend($('<i class="icon exchange"></i>'))
);
});
// activate semantic ui components
$('.ui.dropdown').dropdown();
//$('.ui.checkbox').checkbox();
$('.ui.accordion').accordion();
// for semantic ui css specificity
$(".hidden, .shy").hide();
// sidebar expansion buttons
$("#nav .collapse.button").on("click tap", function(){
$("#sidebar, #wrapper").addClass("desktop-collapsed-layout").removeClass("desktop-expanded-layout");
$(".expanded.mode").hide();
$(".collapsed.mode").not(".tablet.only").show();
});
$("#nav .expand.button").on("click tap", function(){
$("#sidebar, #wrapper").addClass("desktop-expanded-layout").removeClass("desktop-collapsed-layout");
$(".expanded.mode").not(".tablet.only").css("display","");
$(".collapsed.mode").hide();
});
// sidebar show nav buttons
$("#topbar .hide.nav.button").on("click tap", function(){
$(".expanded.mode").hide();
$(".collapsed.mode").not(".desktop.only").show();
$("#toc").slideToggle();
});
$("#topbar .show.nav.button").on("click tap", function(){
$(".expanded.mode").not(".desktop.only").not(".ui.segment.submit").css("display","block");
$(".collapsed.mode").hide();
$("#toc").slideToggle();
});
// firefox fix for iframe initial size
$("#wrapper .frame").addClass("normal size");
// zoom in button
$(".frame, #iframe").addClass(foldr_scale + " size");
var set_scale = function(scale){
$(".frame, #iframe").removeClass("normal large larger").addClass(scale+" size");
localStorage.setItem("hackfoldr-scale", JSON.stringify(scale));
};
$("#nav, #topbar").on("click tap", ".zoom.dropdown .normal", function(){
set_scale("normal");
});
$("#nav, #topbar").on("click tap", ".zoom.dropdown .large", function(){
set_scale("large");
});
$("#nav, #topbar").on("click tap", ".zoom.dropdown .larger", function(){
set_scale("larger");
});
// history button
$("#nav .history, #topbar .history").on("click tap", function(){
if($("#sidebar .history .menu").has("a.foldr.item").length==0){
$("#sidebar .history .menu .no.data").show();
}else{
$("#sidebar .history .menu .no.data").hide();
}
});
// refresh table
// load ethercalc data only instead of loading the whole page
$("#topbar .refresh.table").on("click tap", function(){
$("#toc .menu").html("");
$("#topbar .submit.segment").hide();
//$("#topbar .submit.segment .error.message").hide();
compile_ethercalc();
});
// open submit form
$("#topbar .add.to.list").on("click tap", function(){
$("#topbar .submit.segment").slideToggle();
// add moretext to defalt input value
//$.getJSONP('')
});
// choose submit type, add link only (sunflower monster) by default
$("#topbar .submit.segment .checkbox.add.only").on("click tap", function(){
$("#topbar .form.adding.only.mode").show();
$("#topbar .form.creating.adding.mode").hide();
//$("#topbar .form .error.message").hide();
});
$("#topbar .submit.segment .checkbox.add.create").on("click tap", function(){
$("#topbar .form.adding.only.mode").hide();
$("#topbar .form.creating.adding.mode").show();
//$("#topbar .form .error.message").hide();
});
// prepare to post to ethercalc
var post_ethercalc = function(post_title, post_url){
$.ajax({
url: "https://ethercalc.org/_/"+ethercalc_name,
//url: "https://ethercalc.org/_/"+ethercalc_name+"?row="+new_pad_row_index.toString(),
type: 'POST',
contentType: 'text/csv',
processData: false,
data: post_url + ',' + post_title
});
};
// create new hackpad and add to foldr
$("#topbar .form .submit.add.create").on("click tap", function(){
var new_hackpad_title = $("#topbar .form .new.pad.title").val();
//var new_hackpad_id = encodeURIComponent(new_hackpad_title.slice(0,8));
var new_hackpad_id = Math.random().toString(36);
var new_hackpad_url = "https://g0v.hackpad.com/"+new_hackpad_id;
var new_menu_item = '<a href="'+new_hackpad_url+'" target="iframe" class="link item"><i class="icon text file outline"></i>'+new_hackpad_title+'</a>';
// add new hackpad info to foldr
if(new_hackpad_title.length > 0){
$('#toc .ui.vertical.menu').append(new_menu_item);
// post new hackpad info to ethercalc
post_ethercalc(new_hackpad_title, new_hackpad_url);
}else{
}
});
// add a existing url to foldr
$("#topbar .form .submit.add.only").on("click tap", function(){
var new_link_title = $("#topbar .form .new.link.title").val();
var new_link_url = $("#topbar .form .new.link.url").val();
// validate url
if(/^([a-z]([a-z]|\d|\+|-|\.)*):(\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?((\[(|(v[\da-f]{1,}\.(([a-z]|\d|-|\.|_|~)|[!\$&'\(\)\*\+,;=]|:)+))\])|((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=])*)(:\d*)?)(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*|(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)|((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)){0})(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(new_link_url) && new_link_title.length > 0){
$('#toc .ui.vertical.menu').append(
$('<a />', { href: new_link_url, 'target': 'iframe', 'class': 'link item' })
.text(new_link_title)
.prepend($('<i class="icon url"></i>'))
);
post_ethercalc(new_link_title, new_link_url);
}else{
}
});
// semantic ui validation
$('.ui.form')
.form({
new_pad_title: {
identifier: 'new-pad-name',
rules: [
{
type: 'empty',
prompt: '新文件叫什麼名字？'
}
]
},
new_link_title: {
identifier: 'new-link-title',
rules: [
{
type: 'empty',
prompt: '這個網頁叫什麼名字？'
}
]
},
new_link_url: {
identifier: 'new-link-url',
rules: [
{
type: 'url',
prompt: '網址的格式有問題喔'
}
]
}
}).submit(function(e){
// Prevent real form submissions,
// which is triggered by sementic-ui internally (?)
e.preventDefault();
})
;
// when click on a #nav or #toc link item
$("#sidebar").on("click tap", "a.link.item", function(event){
// dynamic url
var iframe_path = event.target.href;
if(iframe_path.match(/^https:\/\/.*.hackpad.com\//)){
iframe_path = iframe_path.split(/\//).pop();
}
history.pushState(history_state,'', '/'+ethercalc_name+'/'+encodeURIComponent(encodeURIComponent(iframe_path))) ;
// when leaving ethercalc, show edit icon again
if(event.target.target !== "_blank"){
$("#topbar .edit.table").show();
$("#topbar .refresh.table").hide();
$("#topbar .add.to.list").hide();
$("#topbar .submit.segment").hide();
// reset page title
$("title").text(
$(this).contents().filter(function(){
return this.nodeType == 3;
})[0].nodeValue+" | "+current_foldr_name+" | hackfoldr"
);
}
// disable sortable
//if($("#toc .vertical.menu, #toc .vertical.menu .menu").hasClass("sortable")){
// $(this).removeClass("sortable").sortable("destroy");
//}
// for mobile: set toc default display (hidden)
$("#toc").css("display","");
$("#topbar .hide.nav.button").hide();
$("#topbar .show.nav.button").css("display","");
$("#topbar .submit.segment").hide();
});
// activate link on click
$("#toc").on("click tap", "a.link.item", function(){
$("#toc a.link.item").removeClass("active");
$(this).addClass("active");
});
// toggle folder icons on click
$("#toc").on("click tap", ".header.item", function(){
$(this).find('.icon.folder').toggle();
});
// when click on edit table button
$("#topbar .edit.table").on("click tap", function(){
// show sheet
if(!hide_sheet){
if(csv_api_source_type=="ethercalc"){
$("#topbar .edit.table").attr("href",'https://ethercalc.org/'+csv_api_source_id);
// make foldr items sortable
if(sort_sheet){
$("#toc .sortable").sortable(sort_action);
}
}else if(csv_api_source_type=="google"){
$("#topbar .edit.table").attr("href",'https://docs.google.com/spreadsheets/d/'+csv_api_source_id+'/edit');
}
// change url
history.pushState(history_state,'', '/'+ethercalc_name+'/edit');
// change page title
$("title").text("編輯 | "+current_foldr_name+" | hackfoldr");
// inactive #toc items
$("#toc a.link.item").removeClass("active");
}
// switch icon
$("#topbar .edit.table").hide();
$("#topbar .refresh.table").show();
$("#topbar .add.to.list").show();
});
// add href attr to foldr title
$("#topbar .foldr.title").attr("href",'/'+ethercalc_name);
// enable popup
$('i.icon').popup();