Skip to content

Commit 2d39b29

Browse files
riversunriversun
committed
improve example of chatbot ui
1 parent f6c2260 commit 2d39b29

3 files changed

Lines changed: 260 additions & 4 deletions

File tree

‎README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,11 @@ It is an independent and lightweight multi-window library for javascript.
99
- You can create [multi-window](https://riversun.github.io/jsframe/examples/v150/preset_win10.html) apps.
1010

1111
# DEMO
12-
https://riversun.github.io/jsframe/examples/v150/preset_yosemite.html
12+
https://riversun.github.io/jsframe/examples/v150/preset_yosemite_auto.html
13+
https://riversun.github.io/jsframe/examples/v150/preset_material.html
1314
https://riversun.github.io/jsframe/examples/v150/preset_win10.html
15+
https://riversun.github.io/jsframe/examples/v150/chatbot_ui.html
16+
1417

1518
[![ex00](https://riversun.github.io/jsframe/capture/img_01_yosemite.png)](https://riversun.github.io/jsframe/examples/ex00/index.html)
1619

‎public/examples/jaq/chatbot_ui.html‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Example of chatbot UI
4+
-->
5+
<html>
6+
<head>
7+
<title>JsFrame.js ChatBot UI Example</title>
8+
<meta charset="utf-8">
9+
<meta name="description" content="JSFrame chatbot UI example">
10+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
11+
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
12+
<style type="text/css">
13+
body {
14+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
15+
}
16+
17+
.btn-chat {
18+
box-shadow: 2px 3px 16px rgba(0, 0, 0, .6);
19+
border-radius: 50%;
20+
text-align: center;
21+
vertical-align: middle;
22+
position: fixed;
23+
color: #fff;
24+
background-color: #007bff;
25+
border-color: #007bff;
26+
transition: transform 0.2s linear, opacity 0.5s;
27+
transform: scale(0.9);
28+
opacity: 0;
29+
}
30+
31+
.btn-on {
32+
opacity: 1;
33+
}
34+
35+
.btn-chat:hover {
36+
color: #fff;
37+
background-color: #0069d9;
38+
border-color: #0062cc;
39+
transform: scale(1.0);
40+
41+
}
42+
43+
</style>
44+
</head>
45+
<body style="overflow: hidden;background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Tokyo_Tower_Afterglow_3.JPG/1280px-Tokyo_Tower_Afterglow_3.JPG') 50% no-repeat fixed; background-size: cover;">
46+
47+
48+
<div style="color:#f5f5f5;text-shadow: 2px 2px 1px #333333;"><a
49+
href="https://github.com/riversun/JSFrame.js">JSFrame.js</a> ChatBot UI Frame
50+
</div>
51+
52+
<script src="../../jsframe.js"></script>
53+
<script>
54+
55+
class ChatUI {
56+
57+
constructor() {
58+
59+
this.jsFrame = new JSFrame({
60+
horizontalAlign: 'right',
61+
verticalAlign: 'bottom',
62+
});
63+
64+
this.initParam = {
65+
btnRight: 20,
66+
btnBottom: 20,
67+
btnSize: 60,
68+
btnFontSize: 25,
69+
frmWidth: 300,
70+
frmHeight: 500,
71+
frmHeightMin: 300,
72+
frmWidthMin: 200,
73+
frmTitleHeight: 40,
74+
};
75+
76+
this.frameName = 'chat_window';
77+
this.buttonId = 'chat_wakeup';
78+
79+
}
80+
81+
/**
82+
* Build chat start button
83+
*/
84+
buildChatButton() {
85+
86+
const p = this.initParam;
87+
const btnRight = p.btnRight;
88+
const btnBottom = p.btnBottom;
89+
const btnSize = p.btnSize;
90+
const btnFontSize = p.btnFontSize;
91+
92+
const showChatBtn = document.createElement('div')
93+
showChatBtn.id = this.buttonId;
94+
showChatBtn.className = 'btn-chat';
95+
showChatBtn.innerHTML = '<i class="fas fa-comment-alt"></i>';
96+
showChatBtn.onclick = this.showChatWindow.bind(this);
97+
98+
const style = showChatBtn.style;
99+
style.right = btnRight + 'px';
100+
style.bottom = btnBottom + 'px';
101+
style.width = btnSize + 'px';
102+
style.height = style.width;
103+
style.lineHeight = style.width;
104+
style.fontSize = btnFontSize + 'px';
105+
106+
document.body.appendChild(showChatBtn);
107+
}
108+
109+
/**
110+
* Makes the chat button visible or invisible.
111+
* @param isVisible
112+
*/
113+
setChatButtonVisible(isVisible) {
114+
const chatButton = document.querySelector(`#${this.buttonId}`);
115+
if (isVisible) {
116+
//chatButton.style.display = 'inline';
117+
chatButton.classList.add('btn-on');
118+
} else {
119+
//chatButton.style.display = 'none';
120+
chatButton.classList.remove('btn-on');
121+
122+
}
123+
}
124+
125+
/*
126+
* Create chat window
127+
*/
128+
buildChatWindow() {
129+
130+
const p = this.initParam;
131+
const frmWidth = p.frmWidth;
132+
const frmHeight = p.frmHeight;
133+
const frmHeightMin = p.frmHeightMin;
134+
const frmWidthMin = p.frmWidthMin;
135+
const frmTitleHeight = p.frmTitleHeight;
136+
const frmLeft = -(p.btnRight + frmWidth);
137+
const frmTop = -(p.btnBottom + p.btnSize + frmHeight);
138+
139+
/**
140+
* Coordinate(left,top) where the window is minimzied
141+
* @type {{x: number, y: number}}
142+
*/
143+
const vanishingPoint = {
144+
x: frmLeft + frmWidth,
145+
y: frmTop + frmHeight - frmTitleHeight
146+
};
147+
148+
//Create chat window
149+
this.frame = this.jsFrame.create({
150+
name: this.frameName,
151+
title: `JSFrame Chat`,
152+
left: frmLeft,
153+
top: frmTop,
154+
width: frmWidth,
155+
height: frmHeight,
156+
minWidth: frmWidthMin,
157+
minHeight: frmHeightMin,
158+
appearanceName: 'material',
159+
appearanceParam: {
160+
border: {
161+
shadow: '2px 2px 10px rgba(0, 0, 0, 0.5)',
162+
width: 0,
163+
radius: 6,
164+
},
165+
titleBar: {
166+
color: 'white',
167+
background: '#4784d4',
168+
leftMargin: 40,
169+
height: frmTitleHeight,
170+
fontSize: 14,
171+
buttonWidth: 36,
172+
buttonHeight: 16,
173+
buttonColor: 'white',
174+
buttons: [
175+
{
176+
fa: 'fas fa-times',
177+
name: 'hideButton',
178+
visible: true
179+
},
180+
],
181+
buttonsOnLeft: [
182+
{
183+
fa: 'fas fa-comment-alt',
184+
name: 'icon',
185+
visible: true
186+
},
187+
],
188+
},
189+
},
190+
style: {
191+
backgroundColor: 'rgba(255,255,255,0.8)',
192+
overflow: 'auto'
193+
},
194+
html: 'Chat UI Here',
195+
//url: // Chat URL here
196+
});
197+
198+
//Enable helper to act on window's common operations(maximization/minimization and something)
199+
this.frame.setControl({
200+
animation: true,
201+
animationDuration: 200,
202+
});
203+
204+
//Set click event when the close button is clicked
205+
this.frame.on('hideButton', 'click', (_frame, evt) => {
206+
_frame.control.doHide({
207+
offset: vanishingPoint,
208+
align: 'ABSOLUTE',
209+
callback: (frame, info) => {
210+
this.setChatButtonVisible(true);
211+
}
212+
})
213+
});
214+
215+
//Minimize the window first to memory the initial window position and size.
216+
this.frame.control.doHide({
217+
silent: true,//means invisible action
218+
duration: 0,
219+
align: 'ABSOLUTE',//need to set the offset point where window is minimized
220+
offset: vanishingPoint,
221+
});
222+
223+
}
224+
225+
showChatWindow() {
226+
const frame = this.jsFrame.getWindowByName(this.frameName);
227+
228+
//Open minimized window
229+
frame.control.doDehide({
230+
callback: (frame, info) => {
231+
this.setChatButtonVisible(false);
232+
}
233+
});
234+
}
235+
236+
build() {
237+
this.buildChatButton();
238+
this.buildChatWindow();
239+
this.setChatButtonVisible(true);
240+
}
241+
242+
243+
}
244+
245+
new ChatUI().build();
246+
247+
248+
</script>
249+
250+
</body>
251+
</html>

‎public/examples/v150/preset_material.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -151,10 +151,12 @@
151151
},
152152
},
153153
style: {
154-
backgroundColor: 'rgba(255,255,255,0.8)',
155-
overflow: 'auto'
154+
backgroundColor: 'rgba(0,0,0,0.8)',
155+
overflow: 'hidden',
156+
width: '100%',
156157
},
157-
url: 'iframe_content03.html',
158+
159+
html: '<img style="margin: auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;width:100%;height:auto" src="https://upload.wikimedia.org/wikipedia/commons/c/c2/I-40W-Sunflowers.jpg">'
158160
}).show();
159161

160162

0 commit comments

Comments
 (0)