Skip to content

Commit 5d83575

Browse files
svr8svr8
authored
Merge pull request #5 from svr8/master
Adds Mouse Event Handlers
2 parents 5690796 + 13e58b8 commit 5d83575

File tree

10 files changed

+244
-78
lines changed

10 files changed

+244
-78
lines changed

‎css/custom.css

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
#code_editor {
22
background-color: rgb(39, 39, 39);
3-
width: 800px;
4-
height: 400px;
5-
overflow: auto;
3+
overflow-y: auto;
4+
/* overflow-x: hidden; */
5+
}
6+
.caret {
7+
transition: 0.06s;
68
}
79
.linenum {
810
color: whitesmoke;
11+
width: 40px;
912
}
1013
.code {
1114
color: white;
@@ -19,10 +22,10 @@
1922
display: inline-block;
2023
}
2124
.value {
22-
color: rgb(253, 2, 136);
25+
color: rgb(253, 136, 2);
2326
display: inline-block;
2427
}
2528
.comment {
26-
color: green;
29+
color: rgb(7, 212, 7);
2730
display: inline-block;
2831
}

‎css/index.css

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,39 @@ body {
33
padding: 0;
44
width: 100%;
55
height: 100%;
6-
overflow: auto;
6+
overflow: hidden;
77
}
88

99
.line {
1010
position: relative;
1111
top: 0px;
1212
left: 0px;
1313
width: calc(100% - 10px);
14-
height: 2vh;
14+
height: auto;
1515

1616
font-size: 2vh;
1717
padding: 2px 5px;
1818
z-index: 1;
1919
}
2020
.line .linenum {
21+
position: relative;
2122
display: inline-block;
2223
min-height: 2vh;
2324
text-align: center;
2425
vertical-align: middle;
26+
z-index: 1;
2527
}
2628
.line .code {
29+
position: relative;
2730
position: absolute;
2831
top: 0px;
2932
display: inline-block;
3033
margin: 1px 5px;
31-
min-height: 2vh;
32-
z-index: 0;
34+
height: auto;
35+
z-index: 1;
36+
37+
word-wrap: break-all;
38+
white-space:normal;
3339
}
3440

3541
.character {

‎index.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@
88
</head>
99

1010
<body>
11-
<div id="code_editor"></div>
11+
<div id="code_editor" tabindex="0"></div>
12+
13+
<!-- Dependencies -->
1214
<script src="js/jquery.min.js"></script>
1315
<script src="js/colorize.js"></script>
1416
<script src="js/caret.js"></script>

‎js/caret.js

Lines changed: 52 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,34 +21,57 @@ Caret.prototype = {
2121

2222
let el = this.getCharacterElementBefore();
2323
let caretElement = $(`#caret_${this.page.getId()}_${this.id}`);
24+
let lineEl, linenumEl, linecodeEl;
2425

2526
let top, left;
26-
if(this.row == 1) top = 0;
27-
else top = $(`#${this.page.getId()} .line:nth-child(${this.row})`).position().top;
27+
if(this.row == 1) top = 1.5;
28+
else top = $(`#${this.page.getId()} .line:nth-child(${this.row})`).position().top + 1.5;
2829

30+
linenumEl = $(`#${this.page.getId()} .line:nth-child(${this.row}) .linenum`);
2931
if(this.col == 1 || el == undefined) left = $(`#${this.page.getId()} .line:nth-child(${this.row}) .linenum`).width() + 10;
30-
else left = $(el).position().left + $(el).width() + 16;
31-
if(this.col !==1 && el !== undefined)
32-
console.log(top, left)
32+
else left = $(el).position().left + $(el).width() + $(linenumEl).width() + 10;
33+
// if(this.col !==1 && el !== undefined)
34+
// console.log(top, left)
3335

3436
$(caretElement).css('top', `${top}px`);
3537
$(caretElement).css('left', `${left}px`);
3638

3739
// toggle current line background color
38-
let lineEl = $(".curLine");
40+
lineEl = $(".curLine");
3941
$(lineEl).removeClass("curLine");
4042
lineEl = $(`.line:nth-child(${this.row})`);
4143
$(lineEl).addClass("curLine");
4244

4345
// TODO Enable word-wrap
4446
// detect text overflow
45-
// lineEl = $(`#${this.page.getId()} .line:nth-child(${this.row})`)
46-
// let linenumEl = $(`#${this.page.getId()} .line:nth-child(${this.row}) .linenum`);
47-
// let linecodeEl = $(`#${this.page.getId()} .line:nth-child(${this.row}) .code`);
47+
lineEl = $(`#${this.page.getId()} .line:nth-child(${this.row})`)
48+
linenumEl = $(`#${this.page.getId()} .line:nth-child(${this.row}) .linenum`);
49+
linecodeEl = $(`#${this.page.getId()} .line:nth-child(${this.row}) .code`);
50+
let charEl = $(`#${this.page.getId()} .line:nth-child(${this.row}) .code .character:nth-child(1)`);
51+
if(charEl !== undefined) {
52+
let linecodeWidth = $(linecodeEl).width();
53+
let line = this.page.getLineRef(this.row);
54+
let charCount = line.getCode().length;
55+
let charWidth = $(charEl).width();
56+
let isOverflow = charCount*charWidth > linecodeWidth;
57+
58+
if(isOverflow) {
59+
// console.log('OVERFLOW');
60+
// let linecodeHeight = config.linecodeHeight;
61+
// let increase
62+
// $(linecodeEl).height(linecodeHeight*2);
63+
} else {
64+
// console.log('NO OVERFLOW');
65+
}
66+
}
4867

4968
// if($(lineEl).width() < $(linenumEl).width() + $(linecodeEl).width()) {
50-
// console.log('OVERFLOW')
51-
69+
// console.log('OVERFLOW');
70+
// // let lineHeight = $(lineEl).height();
71+
// // $(lineEl).height(lineHeight*2);
72+
// // let linecodeHeight = $(linecodeEl).height();
73+
// // $(linecodeEl).height(linecodeHeight*2);
74+
// // console.log(linecodeHeight);
5275

5376
// } else {
5477
// console.log('NO OVERFLOW');
@@ -224,5 +247,23 @@ Caret.prototype = {
224247
newCol = this.col + 1;
225248
}
226249
this.setPos(newRow, newCol);
250+
},
251+
252+
moveToCharacterElement: function(charEl) {
253+
let charPos = this.page.getCharacterPosition(charEl);
254+
this.setPos(charPos.line, charPos.index);
255+
},
256+
257+
moveToEndOfLine: function(lineEl) {
258+
let _this = this;
259+
260+
let line_num = lineEl.index() + 1;
261+
let codeEl = $(`#${_this.page.id} .line:nth-child(${line_num}) > .code`);
262+
let codePos = codeEl.offset();
263+
let codeEnd = codePos.left + codeEl.width();
264+
if(event.pageX > codeEnd) {
265+
let line_ref = _this.page.getLineRef(line_num);
266+
_this.setPos(line_num, line_ref.getCharCount()+1);
267+
}
227268
}
228269
}

‎js/index.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
21
$(document).ready(function() {
32
console.log('READY');
4-
5-
var page0 = initNewPage('code_editor', window.innerWidth, window.innerHeight);
3+
4+
var page0 = new Page('code_editor', window.innerWidth, window.innerHeight);
65

76
window.onresize = function() {
87
page0.setWidth(window.innerWidth);

‎js/keyboard.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ const keyToChar = function(keyCode) {
9292
// --------------------------------------------------------------------------
9393
// KEYDOWN
9494
const handleKeyDown = function(page, keyCode) {
95-
var tmpkey = String.fromCharCode(keyCode);
95+
// var tmpkey = String.fromCharCode(keyCode);
9696
// console.log(tmpkey + ' ' + keyCode);
9797

9898
// Ignore Keys --------------------------------------------------------------------

‎js/line.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ Line.prototype = {
2525
return linenumHTML + textHTML;
2626
},
2727

28+
getCharCount: function() {
29+
return this.getCode().length;
30+
},
31+
2832
setLineNum: function(num) {
2933
this.lineNum = num;
3034
let el = $(`#${this.page.getId()} .line:nth-child(${this.lineNum}) .linenum`);

‎js/mouse.js

Whitespace-only changes.

0 commit comments

Comments
 (0)