-
Notifications
You must be signed in to change notification settings - Fork 1
/
SmartTerminal.ts
109 lines (87 loc) · 2.63 KB
/
SmartTerminal.ts
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
import { IComponent } from 'vanilla-typescript'
import './index.pcss'
const times = { SHORT_TIME: 6000 }
/**
* Shows messages tp user
* @constructor
*/
export default class SmartTerminal implements IComponent {
private hostElement: HTMLElement
private contentElement: HTMLElement
private timeTillCloseAfterAppending: number = times.SHORT_TIME
private pulseTypeNext: boolean = false
static EVENTS = { //use this to communicate with the component via DOM events when you don't have a reference to it. See the readme
APPEND_MESSAGE: "APPEND_MESSAGE",
APPEND_MESSAGES: "APPEND_MESSAGES",
START_PENDING: "START_PENDING"
}
constructor (contentFunction: () => void, onDestroyFunction: () => void) {
this.hostElement = document.createElement('article')
this.hostElement.title = "Hello, I will inform you of anything you need to know during your visit on this site."
this.hostElement.innerHTML =
`<div class="content">
</div>`
this.contentElement = <HTMLElement> this.hostElement.querySelector('.content')
this.hostElement.className = 'smart-terminal'
this.minimise()
}
show (): Promise<void> {
return new Promise((resolve, reject) => {
document.body.appendChild(this.hostElement)
resolve()
})
}
revealForDuration () {
this.hostElement.dataset["minimised"] = "false"
setTimeout(function () {
this.minimise()
}.bind(this), this.timeTillCloseAfterAppending)
}
appendMessages (messages) {
this.clear()
this.stopPending()
messages.forEach(message => {
this.contentElement.innerHTML += `<p>${message}</p>`
})
}
appendMessage (message) {
this.clear()
this.stopPending()
const contentEl = this.hostElement.querySelector('.content')
this.contentElement.innerHTML += `<p>${message}</p>`
this.revealForDuration()
}
setTimeTillCloseAfterAppending (time: number): this {
this.timeTillCloseAfterAppending = time
return this
}
minimise () {
this.hostElement.dataset["minimised"] = "true"
return this
}
clear (): this {
this.contentElement.innerHTML = ''
this.minimise()
return this
}
/**
* Makes the satellite icon spin, tells the user something is happening.
*/
startPending (): this {
this.hostElement.dataset["pending"] = 'true'
return this
}
/**
* Makes the satellite icon stop spinning
*/
stopPending (): this {
this.hostElement.dataset["pending"] = 'false'
return this
}
destroy (): Promise<void> {
return new Promise((resolve, reject) => {
this.hostElement.parentElement.removeChild(this.hostElement)
resolve()
})
}
}