-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
128 lines (80 loc) · 2.92 KB
/
test.html
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
<!DOCTYPE html>
<html>
<head>
<title>Hello - Building Lines Demo</title>
<style type="text/css">
#container {
width: 500px;
margin-bottom: 25px;
padding: 10px;
border: 1px solid #999;
}
#example {
width: 500px;
padding: 10px;
border: 1px solid #999;
}
#testContainer {
visibility: hidden
}
</style>
</head>
<body>
<div id="container"></div>
<div id="example"></div>
<span id="testContainer"></span>
<script type="text/javascript">
var text = 'Samen op vakantie, de kinderen willen spetteren in het subtropische zwembad en de hogen golven in het golfslagbad trotseren, de sensationele glijbanen uitproberen of alle andere faciliteiten ontdekken. Voor de kleinere kinderen zijn er vaak aparte rustige kinderbadjes met hogere temperaturen. Daarnaast hebben subtropische zwembaden diverse extra\'s zoals kruidenbaden, bruisbaden en whirlpools. En kunt u er lekker ontspannen in de sauna, het Turks Stoombad of de zonnebanken.';
var exampleContainer = document.querySelector('#example');
var cursorOffset = 0;
var caculateLines = function() {
var textArray = text.split(' ');
var wordCounter = 0;
var testString="";
var container = document.querySelector('#container');
container.innerHTML = '';
var testContainer = document.querySelector('#testContainer');
var linesArray = [];
var lineWordArray = [];
var numberOfChars = 0;
exampleContainer.innerHTML = text;
while(wordCounter < textArray.length) {
lineWordArray.push(textArray[wordCounter]);
testContainer.innerHTML = lineWordArray.join(' ');
if(testContainer.offsetWidth > 500 || wordCounter === (textArray.length-1)) {
//added 1 for space at the start of the line. This space isn't set
numberOfChars += 1;
var lastWord = lineWordArray.splice(lineWordArray.length-1);
var newLine = document.createElement('div');
newLine.setAttribute('numberOfChars', numberOfChars-1);
newLine.innerHTML =lineWordArray.join(' ');
container.appendChild(newLine);
numberOfChars += lineWordArray.join(' ').length;
lineWordArray = [ lastWord ];
}
wordCounter++;
}
}
var insertCharacter = function( event ) {
cursorOffset++;
var parts = [];
parts.push(text.substring(0, cursorOffset));
parts.push(String.fromCharCode(event.which));
parts.push(text.substring(cursorOffset, text.length));
text = parts.join('');
exampleContainer.innerHTML = text;
caculateLines();
}
var getCursor = function() {
var selObj = window.getSelection();
var startOffset = selObj.getRangeAt(0).startOffset;
var startOffsetContainer = selObj.getRangeAt(0).startContainer;
var lineOffset = parseInt(startOffsetContainer.parentNode.getAttribute('numberOfChars'), 10);
cursorOffset = lineOffset+startOffset-1;
}
caculateLines();
container.addEventListener('click', getCursor, true);
document.addEventListener('keypress', insertCharacter, true);
</script>
</body>
</html>