105 lines
3.5 KiB
JavaScript
105 lines
3.5 KiB
JavaScript
// components/contentstream/contentstream.js
|
|
Component({
|
|
|
|
/**
|
|
* Component properties
|
|
*/
|
|
properties: {
|
|
content: {
|
|
type: Array,
|
|
value: []
|
|
},
|
|
is_prompt: {
|
|
type: Boolean,
|
|
},
|
|
},
|
|
|
|
/**
|
|
* Component initial data
|
|
*/
|
|
data: {
|
|
visible_content: [],
|
|
next_index: 0,
|
|
next_offset: 0,
|
|
},
|
|
|
|
/**
|
|
* Component methods
|
|
*/
|
|
methods: {
|
|
restart_content_output() {
|
|
console.log('restart_content_output');
|
|
if (this.properties.is_prompt) {
|
|
this.setData({
|
|
visible_content: this.properties.content
|
|
});
|
|
return;
|
|
}
|
|
this.setData({
|
|
visible_content: [],
|
|
next_index: 0,
|
|
next_offset: 0,
|
|
});
|
|
setTimeout(() => {
|
|
this.update_interval = setInterval(() => {
|
|
this.update_visible_content();
|
|
}, 50);
|
|
}, 500);
|
|
},
|
|
handle_onclick(event) {
|
|
var index = event.currentTarget.dataset.index;
|
|
if (this.properties.content[index].onclick) {
|
|
console.log('call onclick');
|
|
this.properties.content[index].onclick();
|
|
}
|
|
},
|
|
update_visible_content() {
|
|
console.log('update_visible_content', this.data.next_index, this.properties.content.length);
|
|
if (this.data.next_index >= this.properties.content.length) {
|
|
clearInterval(this.update_interval);
|
|
return;
|
|
}
|
|
var next_entry = this.properties.content[this.data.next_index];
|
|
if (next_entry.type != 'text') {
|
|
// just add the next entry to the visible content
|
|
this.setData({
|
|
visible_content: this.data.visible_content.concat(next_entry),
|
|
next_index: this.data.next_index + 1,
|
|
next_offset: 0
|
|
});
|
|
return;
|
|
}
|
|
if (this.data.next_offset >= next_entry.content.length) {
|
|
// end of current entry, move to the next entry
|
|
this.setData({
|
|
next_index: this.data.next_index + 1,
|
|
next_offset: 0,
|
|
})
|
|
return;
|
|
}
|
|
// here we have some remaining text to add to the last visible content
|
|
if (this.data.next_offset == 0) {
|
|
var next_entry = this.properties.content[this.data.next_index];
|
|
var new_entry = JSON.parse(JSON.stringify(next_entry));
|
|
new_entry.content = "";
|
|
this.setData({
|
|
visible_content: this.data.visible_content.concat(new_entry)
|
|
});
|
|
}
|
|
var last_visible_entry = this.data.visible_content[this.data.visible_content.length - 1];
|
|
var new_text = next_entry.content.slice(this.data.next_offset, this.data.next_offset + 1);
|
|
last_visible_entry.content = last_visible_entry.content + new_text;
|
|
this.setData({
|
|
visible_content: this.data.visible_content.slice(0, this.data.visible_content.length - 1).concat(last_visible_entry),
|
|
next_offset: this.data.next_offset + 1,
|
|
});
|
|
}
|
|
|
|
},
|
|
ready() {
|
|
this.restart_content_output();
|
|
},
|
|
detached() {
|
|
clearInterval(this.update_interval);
|
|
},
|
|
}) |