@@ -21,12 +21,15 @@ function IASChat(config) {
21
21
var hashSign = config . hashSign || '?' ;
22
22
var uploadFiles = config . uploadFiles || true ;
23
23
var onlyPictures = config . onlyPictures || true ;
24
+ var onSend = config . onSend || null ;
25
+ var onMessage = config . onMessage || null ;
24
26
25
27
// Prepare interface
26
28
printInterface ( container ) ;
27
29
28
30
// Prepare listeners
29
31
var show = document . getElementById ( 'ias-show' ) ;
32
+ var showNotifications = document . getElementById ( 'ias-show-notifications' ) ;
30
33
var ias = document . getElementById ( 'ias' ) ;
31
34
var topbar = document . getElementById ( 'ias_topbar' ) ;
32
35
var close = document . getElementById ( 'ias_topbar-close' ) ;
@@ -47,6 +50,10 @@ function IASChat(config) {
47
50
var lastHash = '' ;
48
51
var lastPage = '' ;
49
52
53
+ var user = null ;
54
+ var lastMessage = { } ;
55
+
56
+
50
57
// Listen event submit
51
58
if ( show ) {
52
59
show . addEventListener ( 'click' , showIAS . bind ( this ) ) ;
@@ -83,7 +90,19 @@ function IASChat(config) {
83
90
name = config . name || '' ;
84
91
pic = config . pic || '' ;
85
92
86
- setChatData ( ) ;
93
+ // Get chat info
94
+ userRef = firebase . database ( ) . ref ( 'users/' + cid ) ;
95
+ userRef . on ( 'value' , function ( data ) {
96
+
97
+ user = data . val ( ) ;
98
+
99
+ lastMessage = user . lastMessage ;
100
+ // console.log(lastMessage);
101
+
102
+ setChatData ( ) ;
103
+ setNotifications ( ) ;
104
+ } ) ;
105
+
87
106
88
107
clearMessages ( ) ;
89
108
@@ -96,10 +115,7 @@ function IASChat(config) {
96
115
97
116
function setChatData ( ) {
98
117
99
- userRef = firebase . database ( ) . ref ( 'users/' + cid ) ;
100
- userRef . on ( 'value' , function ( data ) {
101
- var key = data . key ;
102
- var user = data . val ( ) ;
118
+ if ( user ) {
103
119
104
120
var printData = {
105
121
name : defaultSupportName ,
@@ -118,8 +134,9 @@ function IASChat(config) {
118
134
119
135
document . getElementById ( 'ias_topbar-text' ) . innerHTML = printData . name ;
120
136
document . getElementById ( 'ias_topbar-pic' ) . firstChild . setAttribute ( 'src' , printData . pic ) ;
121
- } ) ;
122
-
137
+ } else {
138
+ setTimeout ( setChatData , 100 ) ;
139
+ }
123
140
}
124
141
125
142
@@ -131,11 +148,11 @@ function IASChat(config) {
131
148
132
149
// If shall show button, add it to interface (from html/show-button.html)
133
150
if ( button ) {
134
- ias += '<div id=\"ias-show\"><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\" /><path d=\"M19 2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h4l3 3 3-3h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-6 16h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 11.9 13 12.5 13 14h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z\" /></svg></div>'
151
+ ias += '<div id=\"ias-show\"><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\"><path d=\"M0 0h24v24H0z\" fill=\"none\" /><path d=\"M19 2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h4l3 3 3-3h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-6 16h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 11.9 13 12.5 13 14h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z\" /></svg><span id=\"ias-show-notifications\" class=\"hidden\"></span>< /div>'
135
152
}
136
153
137
154
// Also add the styles from css/style.css
138
- ias += '<style>#ias {font-family: \'Roboto\',\'Helvetica\',\'Arial\',sans-serif!important;position: fixed;top: 0;left: 0;height: 100%;width: 100%;z-index: 999;}#ias.hidden {display: none;}#ias_topbar {background-color: #ff9800;color: #fff;fill: #fff;height: 56px;width: 100%;}#ias_topbar #ias_topbar-pic {padding: 8px 16px;width: 40px;height: 40px;float: left;}#ias_topbar #ias_topbar-pic img {height: 100%;border-radius: 50%;}#ias_topbar #ias_topbar-text {float: left;margin-left: 6px;margin-top: 14px;font-size: 24px;}#ias_topbar #ias_topbar-close {color: #fff;float: right;font-size: 24px;margin: 16px 16px 0 0;}#ias_messages {background: #f7f8fb;height: calc(100% - 117px);overflow: auto;padding-top: 12px;}.ias_message {margin: 4px 8px;padding: 4px 12px;}.ias_message-sent {text-align: right;}.ias_message span {background-color: #fff;padding: 4px 12px;border-radius: 5px 5px 0 5px;box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);color: #333;display: inline-block;}.ias_message span img {margin: 8px 0 4px;max-width: 300px;max-height: 264px;}#ias_attachment {position: fixed;bottom: 48px;background: #fff;width: 100%;height: 220px;text-align: center;padding: 8px;box-sizing: border-box;border-top: 1px solid #efefef;}#ias_attachment.hidden {display: none;}#ias_attachment-close {position: absolute;top: 8px;right: 8px;}#ias_attachment #ias_attachment-preview img {max-height: 100%;max-width: 100%;}#ias_write {background-color: #fff;border-top: 1px solid #efefef;height: 48px;position: fixed;bottom: 0;left: 0;width: 100%;}#ias_write input {border: 0;border-bottom: 1px solid #ff9800;height: 31px;left: 0;margin: 0 48px;outline: none;padding: 8px 8px 0px 8px;position: absolute;top: 0;width: 70%;width: calc(100% - 122px);}#ias_write #ias_write-attachment svg {position: absolute;left: 12px;top: 13px;}#ias_write #ias_write-attachment input#ias_write-attachment-uploadFile {width: 24px;margin: 0px 4px;opacity: 0;position: absolute;top: 4px;left: 0px;}#ias_write button {background-color: #fff;border: none;position: fixed;right: 12px;bottom: 5px;border-radius: 50%;font-size: 24px;width: 34px;padding: 0;overflow: hidden;line-height: normal;}#ias-show {background-color: #ff9800;border-radius: 50%;bottom: 16px;box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);box-sizing: border-box;color: #fff;fill: #fff;height: 56px;padding: 16px;position: fixed;right: 16px;width: 56px;}@media screen and (min-width: 842px) {#ias{height: 600px;width: 368px;position: fixed;right: 0;bottom: 0;top: auto;overflow: hidden;left: auto;}#ias_message {height: 483px;}#ias_attachment, #ias_write {position: absolute;}}</style>' ;
155
+ ias += '<style>#ias {font-family: \'Roboto\',\'Helvetica\',\'Arial\',sans-serif!important;position: fixed;top: 0;left: 0;height: 100%;width: 100%;z-index: 999;}#ias.hidden {display: none;}#ias_topbar {background-color: #ff9800;color: #fff;fill: #fff;height: 56px;width: 100%;}#ias_topbar #ias_topbar-pic {padding: 8px 16px;width: 40px;height: 40px;float: left;}#ias_topbar #ias_topbar-pic img {height: 100%;border-radius: 50%;}#ias_topbar #ias_topbar-text {float: left;margin-left: 6px;margin-top: 14px;font-size: 24px;}#ias_topbar #ias_topbar-close {color: #fff;float: right;font-size: 24px;margin: 16px 16px 0 0;}#ias_messages {background: #f7f8fb;height: calc(100% - 117px);overflow: auto;padding-top: 12px;}.ias_message {margin: 4px 8px;padding: 4px 12px;}.ias_message-sent {text-align: right;}.ias_message span {background-color: #fff;padding: 4px 12px;border-radius: 5px 5px 0 5px;box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);color: #333;display: inline-block;}.ias_message span img {margin: 8px 0 4px;max-width: 300px;max-height: 264px;}#ias_attachment {position: fixed;bottom: 48px;background: #fff;width: 100%;height: 220px;text-align: center;padding: 8px;box-sizing: border-box;border-top: 1px solid #efefef;}#ias_attachment.hidden {display: none;}#ias_attachment-close {position: absolute;top: 8px;right: 8px;}#ias_attachment #ias_attachment-preview img {max-height: 100%;max-width: 100%;}#ias_write {background-color: #fff;border-top: 1px solid #efefef;height: 48px;position: fixed;bottom: 0;left: 0;width: 100%;}#ias_write input {border: 0;border-bottom: 1px solid #ff9800;height: 31px;left: 0;margin: 0 48px;outline: none;padding: 8px 8px 0px 8px;position: absolute;top: 0;width: 70%;width: calc(100% - 122px);}#ias_write #ias_write-attachment svg {position: absolute;left: 12px;top: 13px;}#ias_write #ias_write-attachment input#ias_write-attachment-uploadFile {width: 24px;margin: 0px 4px;opacity: 0;position: absolute;top: 4px;left: 0px;}#ias_write button {background-color: #fff;border: none;position: fixed;right: 12px;bottom: 5px;border-radius: 50%;font-size: 24px;width: 34px;padding: 0;overflow: hidden;line-height: normal;}#ias-show {background-color: #ff9800;border-radius: 50%;bottom: 16px;box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12), 0 1px 1px 0 rgba(0, 0, 0, .24);box-sizing: border-box;color: #fff;fill: #fff;height: 56px;padding: 16px;position: fixed;right: 16px;width: 56px;}#ias-show-notifications {height: 16px;width: 16px;background: red;position: absolute;left: 1px;top: 1px;border-radius: 50%;}#ias-show-notifications.hidden {display: none;}@media screen and (min-width: 842px) {#ias{height: 600px;width: 368px;position: fixed;right: 0;bottom: 0;top: auto;overflow: hidden;left: auto;}#ias_message {height: 483px;}#ias_attachment, #ias_write {position: absolute;}}</style>' ;
139
156
140
157
var printplace = null ;
141
158
@@ -219,7 +236,7 @@ function IASChat(config) {
219
236
var text = e . srcElement . children [ 1 ] . value
220
237
221
238
if ( text === '' && attatchment === null ) {
222
- console . log ( 'tried to send empty form. Rejected.' ) ;
239
+ console . warn ( 'tried to send empty form. Rejected.' ) ;
223
240
return false ;
224
241
}
225
242
@@ -278,17 +295,21 @@ function IASChat(config) {
278
295
firebase . database ( ) . ref ( 'messages/' + cid ) . push ( msg ) ;
279
296
280
297
firebase . database ( ) . ref ( 'users/' + cid ) . once ( 'value' ) . then ( function ( snapshot ) {
298
+
299
+ var userLastMsg = msg ;
300
+ userLastMsg . read = false ;
301
+
281
302
if ( ! snapshot . val ( ) ) {
282
303
// Add user
283
304
firebase . database ( ) . ref ( 'users/' + cid ) . set ( {
284
305
name : name ,
285
306
pic : pic ,
286
307
isSupporter : false ,
287
308
supporter : - 1 ,
288
- lastMessage : msg
309
+ lastMessage : userLastMsg
289
310
} ) ;
290
311
} else {
291
- firebase . database ( ) . ref ( 'users/' + cid ) . update ( { lastMessage : msg } ) ;
312
+ firebase . database ( ) . ref ( 'users/' + cid ) . update ( { lastMessage : userLastMsg } ) ;
292
313
if ( ! snapshot . val ( ) . profile ) {
293
314
generateUserData ( cid )
294
315
}
@@ -312,8 +333,44 @@ function IASChat(config) {
312
333
313
334
if ( message . uid == uid ) {
314
335
printMessage ( text ) ;
336
+ if ( typeof onSend === 'function' && message . timestamp > lastMessage . timestamp ) {
337
+ onSend ( message , key ) ;
338
+ }
315
339
} else {
316
340
printMessage ( text , true ) ;
341
+
342
+ // If chat is open, set the message as read
343
+ if ( ! isHidden ( ) ) {
344
+ readLastMessage ( ) ;
345
+ }
346
+
347
+ if ( typeof onMessage === 'function' && message . timestamp > lastMessage . timestamp ) {
348
+ onMessage ( message , key ) ;
349
+ }
350
+ }
351
+ }
352
+
353
+ function readLastMessage ( ) {
354
+ firebase . database ( ) . ref ( 'users/' + cid + '/lastMessage' ) . update ( { read : true } ) ;
355
+ }
356
+
357
+ function setNotifications ( ) {
358
+
359
+ // Only set notifications if button are enabled
360
+ if ( button ) {
361
+ if ( lastMessage . uid !== uid && ! lastMessage . read ) {
362
+ if ( showNotifications . classList ) {
363
+ showNotifications . classList . remove ( 'hidden' ) ;
364
+ } else {
365
+ showNotifications . className = showNotifications . className . replace ( new RegExp ( '(^|\\b)' + 'hidden' . split ( ' ' ) . join ( '|' ) + '(\\b|$)' , 'gi' ) , ' ' ) ;
366
+ }
367
+ } else {
368
+ if ( showNotifications . classList ) {
369
+ showNotifications . classList . add ( 'hidden' ) ;
370
+ } else {
371
+ showNotifications . className += ' ' + 'hidden' ;
372
+ }
373
+ }
317
374
}
318
375
}
319
376
@@ -338,6 +395,9 @@ function IASChat(config) {
338
395
339
396
// Also set url hash to true;
340
397
addUrlHash ( ) ;
398
+
399
+ // And read last message
400
+ readLastMessage ( ) ;
341
401
}
342
402
343
403
function hideIAS ( e ) {
@@ -355,6 +415,20 @@ function IASChat(config) {
355
415
remUrlHash ( ) ;
356
416
}
357
417
418
+ function isHidden ( e ) {
419
+ if ( typeof ( e ) !== 'undefined' ) {
420
+ e . preventDefault ( ) ;
421
+ }
422
+
423
+ var className = 'hidden' ;
424
+
425
+ if ( ias . classList ) {
426
+ return ias . classList . contains ( className ) ;
427
+ } else {
428
+ return new RegExp ( '(^| )' + className + '( |$)' , 'gi' ) . test ( ias . className ) ;
429
+ }
430
+ }
431
+
358
432
/* ### URL Hash ### */
359
433
360
434
function visibilityUrlHash ( ) {
0 commit comments