Skip to content

Commit 03fc7dd

Browse files
risenWrisenW
committed
add markdown cell and parsing
1 parent ce4e838 commit 03fc7dd

5 files changed

Lines changed: 260 additions & 64 deletions

File tree

‎notebookjs/src/public/javascripts/index.js‎

Lines changed: 161 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,21 @@ const editor = CodeMirror(document.getElementById('div-1'), {
66
value: ''
77
});
88

9+
10+
var md = new Remarkable()
11+
// console.log(md.render('# Remarkable rulezz!'));
12+
13+
//Global Params
14+
let vars_in_scope = {
15+
"div-1": editor
16+
}
17+
18+
let md_texts = {} //stores markdown text and corresponding div name
19+
20+
let __code_cell_count = 1
21+
// let __all_cells_count =
22+
23+
924
$("#div-1")
1025
.mouseover(function () {
1126
$("#btn-actions-1").show()
@@ -15,12 +30,6 @@ $("#div-1")
1530
});
1631

1732

18-
//Global Params
19-
let vars_in_scope = {
20-
"div-1": editor
21-
}
22-
23-
let __cells_count = 1
2433

2534
function exec_cell(c_id) {
2635
let id = c_id.split("_")[1]
@@ -45,7 +54,7 @@ function exec_cell(c_id) {
4554

4655

4756
function add_new_code_cell(c_id, where) {
48-
__cells_count += 1
57+
__code_cell_count += 1
4958
let last_scope_id = parseInt(Object.keys(vars_in_scope).pop().split("-")[1])
5059
let id = c_id.split("-")[1]
5160

@@ -127,25 +136,113 @@ function add_new_code_cell(c_id, where) {
127136

128137
}
129138

130-
function add_new_text_cell(id, count) {
139+
function add_new_text_cell(c_id, where) {
140+
__code_cell_count += 1
141+
let last_scope_id = parseInt(Object.keys(vars_in_scope).pop().split("-")[1])
142+
let id = c_id.split("-")[1]
143+
144+
if (where == "down") {
145+
where = "down"
146+
} else {
147+
where = "up"
148+
}
149+
150+
let new_id = parseInt(last_scope_id) + 1
151+
let parent_cell_id = `cell-${id}`
152+
153+
let html = `
154+
<div class="row" style="margin-top: 10px;" id="cell-${new_id}">
155+
<div class="col-md-1">
156+
<p id="cell-num" class="code_symbol">[${new_id}]</p>
157+
</div>
158+
159+
<div id="text-div_${new_id}" class="col-md-11">
160+
<div id="btn-actions-${new_id}" class="btn-group-horizontal" style="margin-bottom: 2px;">
161+
<button type="button" id="run_div-1" class="btn btn-sm btn-success run"><i class="fas fa-play"></i>
162+
Run</button>
163+
<div class="btn-group" role="group" aria-label="Basic example">
164+
<button type="button" id="add_code_down_btn-${new_id}" class="btn btn-sm btn-info add-code">
165+
<i class="fas fa-sort-down" style="margin-top: -10px;"></i> Code
166+
</button>
167+
<button type="button" id="add_code_up_btn-${new_id}" class="btn btn-sm btn-info add-code">
168+
<i class="fas fa-sort-up"></i> Code
169+
</button>
170+
</div>
171+
172+
<div class="btn-group" role="group" aria-label="Basic example">
173+
<button type="button" id="add_text_down_btn-${new_id}" class="btn btn-sm btn-info add-text">
174+
<i class="fas fa-sort-down" style="margin-top: -10px;"></i> Text
175+
</button>
176+
<button type="button" id="add_text_up_btn-${new_id}" class="btn btn-sm btn-info add-text">
177+
<i class="fas fa-sort-up"></i> Text
178+
</button>
179+
</div>
180+
181+
<button type="button" id="del-text_${new_id}" class="btn btn-sm btn-danger del"><i
182+
class="fas fa-trash-alt"></i>
183+
</button>
184+
</div>
185+
186+
<textarea id="text-box_${new_id}" class="text-box"></textarea>
187+
</div>
188+
189+
<div class="col-md-1"></div>
190+
<div id="out-text-div_${new_id}" style="display:block;" class="col-md-11 text-out-box">
191+
</div>
192+
</div>
193+
194+
`
195+
196+
197+
let divReference = document.getElementById(parent_cell_id);
198+
199+
if (where == "up") {
200+
divReference.insertAdjacentHTML("beforebegin", html);
201+
} else {
202+
divReference.insertAdjacentHTML("afterend", html);
203+
}
204+
205+
vars_in_scope[`div-${new_id}`] = ""
206+
207+
update_text_box_size()
208+
209+
$(`#text-div_${new_id}`)
210+
.mouseover(function () {
211+
document.getElementById(`btn-actions-${new_id}`).style.display = "block"
212+
})
213+
.mouseout(function () {
214+
document.getElementById(`btn-actions-${new_id}`).style.display = "none"
215+
});
131216

132217

133218
}
134219

135220
function delete_cell(id) {
136-
if (__cells_count == 1) {
221+
if (__code_cell_count == 1) {
137222
document.getElementsByClassName("del").disable = true
138223
} else {
139224
row_id = `cell-${Number(id)}`
140225
var div_ele = document.getElementById(row_id);
141226
div_ele.parentNode.removeChild(div_ele);
142-
__cells_count -= 1
227+
__code_cell_count -= 1
143228
}
144229

230+
}
145231

232+
function delete_text_cell(id) {
233+
// __all_cell_count
234+
md_textarea_id = `text-div_${Number(id)}`
235+
md_out_id = `out-text-div_${Number(id)}`
146236

147-
}
237+
var md_div_ele = document.getElementById(md_textarea_id);
238+
var out_div_ele = document.getElementById(md_out_id);
239+
240+
md_div_ele.parentNode.removeChild(md_div_ele);
241+
out_div_ele.parentNode.removeChild(out_div_ele);
148242

243+
delete md_texts[md_textarea_id]
244+
245+
}
149246

150247

151248
$(document).on("click", "button.run", function () {
@@ -157,6 +254,11 @@ $(document).on("click", "button.del", function () {
157254
delete_cell(id)
158255
})
159256

257+
$(document).on("click", "button.del-text", function () {
258+
let id = this.id.split("-")[1]
259+
delete_text_cell(id)
260+
})
261+
160262
$(document).on("click", "button.add-code", function () {
161263
let where;
162264
if (this.id.split("_").includes("down")) {
@@ -165,4 +267,51 @@ $(document).on("click", "button.add-code", function () {
165267
where = "up"
166268
}
167269
add_new_code_cell(this.id, where)
168-
})
270+
})
271+
272+
$(document).on("click", "button.add-text", function () {
273+
let where;
274+
if (this.id.split("_").includes("down")) {
275+
where = "down"
276+
} else {
277+
where = "up"
278+
}
279+
console.log(this.id);
280+
add_new_text_cell(this.id, where)
281+
})
282+
283+
$(document).on("dblclick", "textarea.text-box", function () {
284+
let id = this.id.split("_")[1]
285+
div_id = `text-div_${id}`
286+
md_texts[div_id] = this.value //stores the markdown text for the corresponding div
287+
render_md = md.render(this.value)
288+
$(`#out-text-div_${id}`).html(render_md).show()
289+
document.getElementById(div_id).style.display = "none"
290+
291+
})
292+
293+
$(document).on("dblclick", "div.text-out-box", function () {
294+
let id = this.id.split("_")[1]
295+
md_id = `text-div_${id}`
296+
out_id = `out-text-div_${id}`
297+
md_txt = md_texts[md_id]
298+
299+
document.getElementById(md_id).style.display = "block"
300+
document.getElementById(md_id).value = md_txt
301+
document.getElementById(out_id).style.display = "none"
302+
303+
})
304+
305+
306+
function update_text_box_size() {
307+
$('textarea').each(function () {
308+
this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
309+
}).on('input', function () {
310+
this.style.height = 'auto';
311+
this.style.height = (this.scrollHeight) + 'px';
312+
});
313+
}
314+
315+
316+
317+

‎notebookjs/src/public/javascripts/utils.js‎

Lines changed: 29 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,90 @@
1-
function print_val(val){
21

3-
if(Array.isArray(val[0])){
2+
function print_val(val) {
3+
4+
if (Array.isArray(val[0])) {
45

56
let col_length = val[0].length;
67
let row_length = val.length;
78

89
let data_string = "[";
9-
if(row_length > 10){
10+
if (row_length > 10) {
1011

11-
for(let i=0; i < 10; i++){
12+
for (let i = 0; i < 10; i++) {
1213

1314
let row_val = val[i]
1415

15-
data_string +="[";
16-
if(col_length > 10){
16+
data_string += "[";
17+
if (col_length > 10) {
1718

18-
for(let j=0; j< 10; j++){
19+
for (let j = 0; j < 10; j++) {
1920
data_string += `${row_val[j]},`
2021
}
2122

22-
data_string += `.......${col_length-10} more],`
23-
}else{
23+
data_string += `.......${col_length - 10} more],`
24+
} else {
2425

25-
for(let j=0; j < col_length;j++){
26+
for (let j = 0; j < col_length; j++) {
2627
data_string += `${row_val[j]},`
2728
}
28-
data_string +="],"
29+
data_string += "],"
2930
}
3031
}
3132
data_string += `...${row_length - 10} more]`
3233
}
33-
else{
34-
for(let i=0; i < row_length; i++){
34+
else {
35+
for (let i = 0; i < row_length; i++) {
3536

3637
let row_val = val[i]
3738

38-
data_string +="[";
39-
if(col_length > 10){
39+
data_string += "[";
40+
if (col_length > 10) {
4041

41-
for(let j=0; j< 10; j++){
42+
for (let j = 0; j < 10; j++) {
4243
data_string += `${row_val[j]},`
4344
}
4445

45-
data_string += `.......${col_length-10} more],`
46-
}else{
46+
data_string += `.......${col_length - 10} more],`
47+
} else {
4748

48-
for(let j=0; j < col_length;j++){
49+
for (let j = 0; j < col_length; j++) {
4950
data_string += `${row_val[j]},`
5051
}
51-
data_string +="],"
52+
data_string += "],"
5253
}
5354
}
54-
data_string +="]"
55+
data_string += "]"
5556
}
5657
return data_string
57-
}else{
58+
} else {
5859

5960
let row_length = val.length;
6061

6162
let data_string = "["
6263

6364
let count = row_length > 10 ? 10 : row_length
6465

65-
for(let i=0; i< count; i++){
66+
for (let i = 0; i < count; i++) {
6667

6768
data_string += `${val[i]},`
6869
}
6970

7071
let diff = row_length - count;
71-
if( diff > 0){
72+
if (diff > 0) {
7273
data_string += `....${diff} more]`
73-
}else{
74+
} else {
7475
data_string += "]";
7576
}
7677
return data_string;
77-
78+
7879
}
7980
}
8081

81-
function viz(name,callback){
82+
function viz(name, callback) {
8283

8384
let id = `#out_${window.current_cell}`
8485
$(`${id}`).append(`<div id=${name}></div>`)
8586

86-
let cb = callback(name);
87+
let cb = callback(name);
8788
// $("#ploty").remove(`${name}`)
8889

8990
return cb

‎notebookjs/src/public/stylesheets/style.css‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,21 @@ a {
2424
height: auto;
2525
}
2626

27+
.mdCell {
28+
height: auto;
29+
}
30+
2731
.out-divs{
2832
height: auto;
29-
}
33+
}
34+
35+
.text-box{
36+
width: 100%;
37+
padding: 5px;
38+
}
39+
.text-out-box{
40+
width: 100%;
41+
padding: 5px;
42+
margin-left: 90px;
43+
44+
}

0 commit comments

Comments
 (0)