test
demo1 test3.html
+106
-5
+13
byteindex.js
+13
byteindex.js
···
1
+
function string_to_bytes(string) {
2
+
return unescape(encodeURIComponent(string))
3
+
}
4
+
function bytes_to_string(string) {
5
+
return decodeURIComponent(escape(string))
6
+
}
7
+
// note: we always work with native strings in our code
8
+
export function index_to_byteindex(string, index) {
9
+
return string_to_bytes(string.slice(0, index)).length
10
+
}
11
+
export function byteindex_to_index(string, byteindex) {
12
+
return bytes_to_string(string_to_bytes(string).slice(0, byteindex)).length
13
+
}
+7
-4
facet.js
+7
-4
facet.js
···
1
+
import {index_to_byteindex, byteindex_to_index} from './byteindex.js'
2
+
1
3
// stages:
2
4
// 1: list of "spans" {start:Number, end:Number, strip:[Number,Number], feature:Feature} - can overlap etc.
3
5
// 2: list of "windows" {start:Number, end:Number, spans:Span[]} - do not overlap (like facets)
···
87
89
})
88
90
}
89
91
return spans
90
-
}
91
-
92
-
function index_to_byteindex(string, index) {
93
-
return unescape(encodeURIComponent(string.slice(0,index))).length
94
92
}
95
93
96
94
function has_client_strip(feature) {
···
186
184
// now push the facet
187
185
facets.push({
188
186
index: {
187
+
// todo: make a class for this that has like, start, end, and a pointer to the string, which only calculates byteStart/byteEnd when converted to JSON.
189
188
byteStart: index_to_byteindex(text, start),
190
189
byteEnd: index_to_byteindex(text, end),
191
190
},
···
205
204
return {text, facets}
206
205
}
207
206
}
207
+
208
+
function facets_to_segments() {
209
+
210
+
}
+35
template.js
+35
template.js
···
1
+
export let HTML = ([html])=>{
2
+
let temp = document.createElement('template')
3
+
temp.innerHTML = html.replace(/\s*?\n\s*/g, "")
4
+
let content = temp.content
5
+
let root = content
6
+
if (root.childNodes.length==1)
7
+
root = root.firstChild
8
+
9
+
let get_path = (root, node)=>{
10
+
let path = ""
11
+
while (node!==root) {
12
+
let parent = node.parentNode
13
+
let pos = [].indexOf.call(parent.childNodes, node)
14
+
path = ".firstChild"+".nextSibling".repeat(pos) + path
15
+
node = parent
16
+
}
17
+
return path
18
+
}
19
+
20
+
let init = `const node=document.importNode(this, true)
21
+
holder.$root=node`
22
+
for (let node of content.querySelectorAll("[\\$]")) {
23
+
let path = get_path(root, node)
24
+
let id = node.getAttribute('$')
25
+
node.removeAttribute('$')
26
+
id = id.replace(/,/g, " = holder.$")
27
+
init += `
28
+
holder.$${id} = node${path}`
29
+
}
30
+
init += `
31
+
return holder`
32
+
let c = new Function("holder={}", init).bind(root)
33
+
//c.prototype = {__proto__: null, template: root}
34
+
return c
35
+
}
+51
-1
test3.html
+51
-1
test3.html
···
1
1
<!doctype html>
2
2
3
3
<script type=module>
4
-
import {MarkedText,markup_italic,markup1} from './facet.js'
4
+
import {MarkedText, markup_italic, markup1} from './facet.js'
5
+
import {index_to_byteindex, byteindex_to_index} from './byteindex.js'
6
+
import {HTML} from './template.js'
5
7
6
8
let text = new MarkedText("abc /123 #test/ http://example.com")
7
9
text.spans = [
···
12
14
text.make_windows()
13
15
let f = text.create_facets()
14
16
console.log(f)
17
+
18
+
function *post_to_segments(post) {
19
+
let text = post.text
20
+
let last = 0
21
+
for (let x of post.facets) { // (assumes facets are sorted and valid)
22
+
let start = byteindex_to_index(text, x.index.byteStart)
23
+
let end = byteindex_to_index(text, x.index.byteEnd)
24
+
if (start>last)
25
+
yield {text:text.slice(last, start), features:[]}
26
+
if (end>start)
27
+
yield {text:text.slice(start, end), features:x.features}
28
+
last = end
29
+
}
30
+
if (text.length>last)
31
+
yield {text:text.slice(last, text.length), features:[]}
32
+
}
33
+
34
+
let facetcont = HTML`<facet-display></facet-display>`
35
+
let facetspan = HTML`<div><div $=text></div><div $=data></div></div>`
36
+
function render(f) {
37
+
let elem = facetcont().$root
38
+
for (let seg of post_to_segments(f)) {
39
+
let span = facetspan()
40
+
span.$text.textContent = seg.text
41
+
span.$data.textContent = seg.features.length
42
+
elem.append(span.$root)
43
+
}
44
+
return elem
45
+
}
46
+
document.body.append(render(f))
15
47
</script>
48
+
49
+
<style>
50
+
facet-display {
51
+
display: flex;
52
+
}
53
+
facet-display > *{
54
+
display: flex;
55
+
flex-flow: column;
56
+
flex: 0;
57
+
margin: 1px;
58
+
border: 1px solid;
59
+
}
60
+
facet-display > * > :first-child {
61
+
white-space: pre;
62
+
font-family: monospace;
63
+
padding: 0 1px;
64
+
}
65
+
</style>