Skip to content

Commit bca42a6

Browse files
risenWrisenW
committed
add code cell creation functions
1 parent 9c620d8 commit bca42a6

7 files changed

Lines changed: 278 additions & 292 deletions

File tree

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

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
const editor = CodeMirror(document.getElementById('div-1'), {
2+
lineNumbers: true,
3+
tabSize: 1,
4+
mode: 'javascript',
5+
theme: 'monokai',
6+
value: ''
7+
});
8+
9+
/////PROTO///////////
10+
11+
let vars_in_scope = {
12+
"div-1": editor
13+
}
14+
15+
function exec_cell(id, count) {
16+
$(`#out_${id}`).html(("global", eval)(vars_in_scope[id].getValue()) || "");
17+
18+
count = parseInt(count) + 1
19+
let div_count = `div-${count}`
20+
21+
if (!(div_count in vars_in_scope)) {
22+
$("#container").append(
23+
`<div id=${div_count} class=""></div><br />
24+
<button style="color: black;" id=run_${div_count} class="run">Run</button>
25+
<div id=out_${div_count}></div><br />`
26+
)
27+
28+
let editor = CodeMirror(document.getElementById(`${div_count}`), {
29+
lineNumbers: true,
30+
tabSize: 2,
31+
mode: 'javascript',
32+
theme: 'monokai',
33+
value: ''
34+
});
35+
36+
37+
vars_in_scope[div_count] = editor;
38+
39+
}
40+
41+
}
42+
43+
function add_new_code_cell(id, last_scope_id, where) {
44+
let new_id = parseInt(last_scope_id) + 1
45+
let parent_cell_id = `cell-${id}`
46+
let html = `
47+
<div class="row" style="margin-top: 50px;" id="cell-${new_id}">
48+
<div class="col-md-1">
49+
<p id="cell-num" class="code_symbol">[${new_id}]</p>
50+
</div>
51+
<div id="div-${new_id}" class="col-md-11">
52+
<div class="btn-group-horizontal">
53+
<button type="button" id="run_div-${new_id}" class="btn btn-sm btn-success run"><i
54+
class="fas fa-play"></i>Run</button>
55+
<div class="btn-group" role="group" aria-label="Basic example">
56+
57+
<button type="button" id="add_code_down_btn-${new_id}" class="btn btn-info add-code">
58+
<i class="fas fa-sort-down" style="margin-top: -10px;"></i> Code
59+
</button>
60+
<button type="button" id="add_code_up_btn-${new_id}" class="btn btn-sm btn-info add-code">
61+
<i class="fas fa-sort-up"></i> Code
62+
</button>
63+
64+
</div>
65+
66+
<div class="btn-group" role="group" aria-label="Basic example">
67+
68+
<button type="button" id="add_text_down_btn-${new_id}" class="btn btn-sm btn-info add-text">
69+
<i class="fas fa-sort-down" style="margin-top: -10px;"></i> Text
70+
</button>
71+
<button type="button" id="add_text_up_btn-${new_id}" class="btn btn-sm btn-info add-text">
72+
<i class="fas fa-sort-up"></i> Text
73+
</button>
74+
</div>
75+
76+
<button type="button" id="del_btn-${new_id}" class="btn btn-sm btn-danger del"><i
77+
class="fas fa-trash-alt"></i>
78+
Delete</button>
79+
</div>
80+
81+
</div>
82+
<div class="col-md-1"></div>
83+
<div id="out_div-${new_id}" class="col-md-10 out-divs">
84+
85+
</div>
86+
</div>
87+
`
88+
let divReference = document.getElementById(parent_cell_id);
89+
90+
if (where == "up") {
91+
divReference.insertAdjacentHTML("beforebegin", html);
92+
} else {
93+
divReference.insertAdjacentHTML("afterend", html);
94+
}
95+
96+
97+
98+
99+
// $(`#${parent_cell_id}`).parentNode.append(html)
100+
101+
let editor = CodeMirror(document.getElementById(`div-${new_id}`), {
102+
lineNumbers: true,
103+
tabSize: 2,
104+
mode: 'javascript',
105+
theme: 'monokai',
106+
value: ''
107+
});
108+
109+
110+
vars_in_scope[`div-${new_id}`] = editor
111+
112+
}
113+
114+
function add_new_text_cell(id, count) {
115+
116+
117+
}
118+
119+
function delete_cell(id) {
120+
row_id = `cell-${Number(id)}`
121+
var div_ele = document.getElementById(row_id);
122+
div_ele.parentNode.removeChild(div_ele);
123+
124+
}
125+
126+
$(document).on("click", "button.run", function () {
127+
let id = this.id.split("_")[1]
128+
let count = this.id.split("-")[1]
129+
// console.log(id);
130+
// console.log(count);
131+
exec_cell(id, count);
132+
})
133+
134+
$(document).on("click", "button.del", function () {
135+
// let id = this.id.split("_")[1]
136+
let id = this.id.split("-")[1]
137+
delete_cell(id)
138+
})
139+
140+
$(document).on("click", "button.add-code", function () {
141+
let last_cell_in_scope = parseInt(Object.keys(vars_in_scope).pop().split("-")[1])
142+
let id = this.id.split("-")[1]
143+
144+
let where;
145+
if (this.id.split("_").includes("down")) {
146+
where = "down"
147+
} else {
148+
where = "up"
149+
}
150+
add_new_code_cell(id, last_cell_in_scope, where)
151+
})

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,20 @@
11
body {
2-
padding: 50px;
32
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
43
}
54

65
a {
76
color: #00B7FF;
87
}
8+
9+
.container{
10+
margin-left: 10px;
11+
margin-right: 10px;
12+
}
13+
14+
.out-divs{
15+
padding: 20px;
16+
}
17+
18+
.code_symbol{
19+
margin-left: 40px;
20+
}

‎notebookjs/src/routes/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ var router = express.Router();
33

44
/* GET home page. */
55
router.get('/', function(req, res, next) {
6-
res.render('index2', { title: 'Express' });
6+
res.render('index', { title: 'Express' });
77
});
88

99
module.exports = router;

‎notebookjs/src/views/index.hbs‎

Lines changed: 41 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -4,104 +4,58 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.css">
8-
</link>
9-
<script type="text/javascript"
10-
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js"></script>
11-
<script type="text/javascript"
12-
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/javascript/javascript.min.js"></script>
13-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/theme/monokai.min.css">
14-
<script src="https://cdn.jsdelivr.net/npm/danfojs@0.1.1/dist/index.min.js"></script>
15-
167
<title>Document</title>
178
</head>
189

1910
<body>
20-
<div>
21-
22-
<div id="my-div" style="height: 500px; width: 1000px;">
23-
24-
</div>
25-
<button style="color: black;" id="run" onclick="run_cell(1)">Run</button>
26-
<div id="out" style="height: 500px; width: 1000px;">
27-
28-
</div>
29-
30-
<hr>
31-
<div id="my-div2" style="height: 500px; width: 1000px;">
3211

12+
<div class="container">
13+
<div class="row" style="margin-top: 50px;" id="cell-1">
14+
<div class="col-md-1">
15+
<p id="cell-num" class="code_symbol">[1]</p>
16+
</div>
17+
<div id="div-1" class="col-md-11">
18+
<div class="btn-group-horizontal">
19+
<button type="button" id="run_div-1" class="btn btn-sm btn-success run"><i
20+
class="fas fa-play"></i>Run</button>
21+
22+
<div class="btn-group" role="group" aria-label="Basic example">
23+
<button type="button" id="add_code_down_btn-1" class="btn btn-info add-code">
24+
<i class="fas fa-sort-down" style="margin-top: -10px;"></i> Code
25+
</button>
26+
<button type="button" id="add_code_up_btn-1" class="btn btn-sm btn-info add-code">
27+
<i class="fas fa-sort-up"></i> Code
28+
</button>
29+
30+
</div>
31+
32+
<div class="btn-group" role="group" aria-label="Basic example">
33+
34+
<button type="button" id="add_text_down_btn-1" class="btn btn-sm btn-info add-text">
35+
<i class="fas fa-sort-down" style="margin-top: -10px;"></i> Text
36+
</button>
37+
<button type="button" id="add_text_up_btn-1" class="btn btn-sm btn-info add-text">
38+
<i class="fas fa-sort-up"></i> Text
39+
</button>
40+
</div>
41+
42+
<button type="button" id="del_btn-1" class="btn btn-sm btn-danger del"><i
43+
class="fas fa-trash-alt"></i>
44+
Delete</button>
45+
</div>
46+
47+
</div>
48+
<div class="col-md-1"></div>
49+
<div id="out_div-1" class="col-md-10 out-divs">
50+
51+
</div>
3352
</div>
34-
<button style="color: black;" id="run" onclick="run_cell(2)">Run</button>
35-
<div id="out2" style="height: 500px; width: 1000px;">
3653

37-
</div>
3854
</div>
39-
40-
41-
42-
<script>
43-
var code_out, code_out2;
44-
var variable_space = {}
45-
46-
const editor = CodeMirror(document.getElementById('my-div'), {
47-
lineNumbers: true,
48-
tabSize: 2,
49-
mode: 'javascript',
50-
theme: 'monokai',
51-
value: ''
52-
});
53-
54-
const editor2 = CodeMirror(document.getElementById('my-div2'), {
55-
lineNumbers: true,
56-
tabSize: 2,
57-
mode: 'javascript',
58-
theme: 'monokai',
59-
value: ''
60-
});
61-
62-
editor.on('changes', () => {
63-
code_out = editor.getValue();
64-
});
65-
66-
editor2.on('changes', () => {
67-
code_out2 = editor2.getValue();
68-
});
69-
70-
71-
function run_cell(id) {
72-
if (id == 1) {
73-
console.log(code_out);
74-
let a = ("global", eval)(code_out)
75-
// a = eval(code_out) + "<br>"
76-
document.getElementById("out").innerHTML = a
77-
78-
} else {
79-
// console.log(variable_space[code_out2]);
80-
// a = eval(code_out2) + "<br>"
81-
console.log(code_out);
82-
document.getElementById("out2").innerHTML = ("global", eval)(code_out2)
83-
84-
}
85-
// var a = eval(code_out) + "<br>"
86-
// document.getElementById("out").innerHTML = a
87-
}
88-
</script>
89-
90-
55+
9156

9257

9358

9459
</body>
9560

9661
</html>
97-
98-
99-
100-
101-
<!-- async function load(){
102-
df = await dfd.read_csv("https://raw.githubusercontent.com/pandas-dev/pandas/master/doc/data/titanic.csv")
103-
return df
104-
105-
}
106-
107-
df = load().then((df)=>{return df}) -->

0 commit comments

Comments
 (0)