Skip to content

Commit bd2f657

Browse files
gilledebastgilledebast
committed
Update to 0.4
Remove all jquery code !
1 parent c063c3c commit bd2f657

8 files changed

Lines changed: 73 additions & 81 deletions

File tree

‎dist/messenger.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@
3434
.messenger{
3535
padding:calc(var(--avatar-width) + 15px);
3636
}
37+
.messenger *{
38+
margin:0;padding:0;
39+
}
3740
.messenger::after {
3841
content: " ";
3942
display: block;

‎dist/messenger.js‎

Lines changed: 49 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
* - Theme manager // this.theme = "dark";
2323
* - CSS loading
2424
*
25-
* Update: 28/10/20 Current V.0.3
25+
* Update: 18/03/21 Current V.0.4
2626
* ----------------------------------------------------------------------------------------------------
2727
*/
2828

@@ -41,7 +41,13 @@ class Messenger{
4141
//create the messenger container
4242
this.container = container;
4343
this.id = this.generateId("messenger");
44-
$(this.container).append(`<ul id="${this.id}" class="messenger"><li class="user sender receiver hidden"></li></ul>`);
44+
45+
//$(this.container).append(`<ul id="${this.id}" class="messenger"><li class="user sender receiver hidden"></li></ul>`);
46+
47+
this.containerEl = document.querySelector(this.container);
48+
document.querySelector(this.container).insertAdjacentHTML( 'beforeend', `<ul id="${this.id}" class="messenger"><li class="user sender receiver hidden"></li></ul>` );
49+
50+
this.messengerEl = document.getElementById(this.id);
4551

4652
this.manager = new Manager();
4753

@@ -51,21 +57,28 @@ class Messenger{
5157
this.automaticScroll = automaticScroll;
5258

5359
this.remove = {
54-
loader: () => { //Give the possibility to remove the loader in the queue
55-
this.append(null);
60+
/**
61+
* Remove loading message
62+
*/
63+
loader: () => {
64+
document.getElementById(this.user+'-loader')?.parentElement.remove();
5665
},
57-
message: (id) => {
58-
console.warn("Removing message isn't possible for the moment - id : "+id);
59-
//this.remove($("#"+id));
66+
/**
67+
* Remove a message
68+
*
69+
* @param {HTML Element} el
70+
*
71+
*/
72+
message: (el) => {
73+
el.parentElement.remove();
6074
}
6175
}
6276

6377
/* –––– CUSTOM EVENT LISTENER –––– */
6478
const self = this;
6579

66-
//AddPackage listener
80+
//Messenger Event listener
6781
document.addEventListener('messenger', function (e) {
68-
//console.log(e.detail);
6982
self[e.detail.user][e.detail.type](e.detail.content, {comment:e.detail.comment, callback:e.detail.callback});
7083
}, false);
7184

@@ -118,9 +131,12 @@ class Messenger{
118131
const message = html ? this.surround(html+this.comment(comment)) : null;
119132
const self = this;
120133
this.manager.enqueue( () => {
121-
self.removeLoader();
134+
self.remove.loader();
122135
if(message){
123-
$('#'+self.id).append(message);
136+
137+
//$('#'+self.id).append(message);
138+
this.messengerEl.insertAdjacentHTML( 'beforeend', message );
139+
124140
}
125141
if(self.automaticScroll){
126142
self.smoothScroll();
@@ -165,7 +181,8 @@ class Messenger{
165181
* Scroll through html, body & the container each time a message is added
166182
*/
167183
smoothScroll(){
168-
$('html, body, '+this.container).animate({ scrollTop: $(document).height() }, this.scrollSpeed);
184+
scroll({ top: this.messengerEl.scrollHeight, behavior: "smooth" });
185+
//$('html, body, '+this.container).animate({ scrollTop: $(document).height() }, this.scrollSpeed);
169186
}
170187

171188
/**
@@ -177,7 +194,8 @@ class Messenger{
177194
generateId(string){
178195
let id = Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
179196
if(string){
180-
while ($("#"+string+"-"+id).length) {
197+
//while ($("#"+string+"-"+id).length) {
198+
while (document.getElementById(string+"-"+id) !== null) {
181199
console.warn("#"+string+"-"+id+" already exist");
182200
id = Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
183201
}
@@ -187,16 +205,6 @@ class Messenger{
187205
}
188206
}
189207

190-
/**
191-
* Remove a message
192-
*
193-
* @param {HTML Element} el
194-
*
195-
*/
196-
remove(el){
197-
$(el).parent().remove();
198-
}
199-
200208
/**
201209
* Update a message
202210
*
@@ -207,36 +215,20 @@ class Messenger{
207215
*/
208216
update(el, type, options, {comment, callback} = {comment: null, callback: null}){
209217
if(type == "text"){
210-
$(el).html(options);
218+
219+
//$(el).html(options);
220+
el.innerHTML = options;
221+
211222
if(comment){
212-
$(el).parent().append(this.comment(comment));
223+
//TO ADD
224+
//$(el).parent().append(this.comment(comment));
225+
//el.parentElement.querySelector(".comment").innerHTML = this.comment(comment);
213226
}
214227
} else {
215228
console.error("The type "+type+" isn't supported in the update methode");
216229
}
217230
}
218231

219-
/**
220-
* /!\ SPEAK DEPRECATED
221-
* use update() instead
222-
*
223-
* @param {String} utterance User utterance
224-
* @param {String} comment Optional comment of the message
225-
*
226-
*/
227-
//speak(utterance, comment = null){
228-
// if(this.senderSpeaking == false){
229-
// this.senderSpeaking = true;
230-
// this.text(utterance, {comment: comment});
231-
// } else {
232-
// //update utterance
233-
// $('#'+this.id+' li.sender:last .content').html(utterance); //.text()
234-
// if(comment){
235-
// $('#'+this.id+' li.sender:last').append(this.comment(comment));
236-
// }
237-
// }
238-
//}
239-
240232
/** –––––––––––––––––––––––
241233
* MESSAGE TYPE
242234
* ––––––––––––––––––––––– */
@@ -258,7 +250,7 @@ class Messenger{
258250
comment:comment,
259251
callback: () => {
260252
if(callback instanceof Function){
261-
return callback($('#'+id)[0]);
253+
return callback( document.getElementById(id) );
262254
}
263255
}
264256
}
@@ -282,7 +274,7 @@ class Messenger{
282274
comment:comment,
283275
callback: () => {
284276
if(callback instanceof Function){
285-
return callback($('#'+id)[0]);
277+
return callback( document.getElementById(id) );
286278
}
287279
}
288280
}
@@ -317,7 +309,7 @@ class Messenger{
317309
comment:comment,
318310
callback: () => {
319311
if(callback instanceof Function){
320-
return callback($('#'+id)[0]);
312+
return callback( document.getElementById(id) );
321313
}
322314
}
323315
}
@@ -356,7 +348,7 @@ class Messenger{
356348
comment:comment,
357349
callback: () => {
358350
if(callback instanceof Function){
359-
return callback($('#'+id)[0]);
351+
return callback( document.getElementById(id) );
360352
}
361353
}
362354
}
@@ -395,7 +387,7 @@ class Messenger{
395387
comment:comment,
396388
callback: () => {
397389
if(callback instanceof Function){
398-
return callback($('#'+id)[0]);
390+
return callback( document.getElementById(id) );
399391
}
400392
}
401393
}
@@ -432,7 +424,7 @@ class Messenger{
432424
comment:comment,
433425
callback: () => {
434426
if(callback instanceof Function){
435-
return callback($('#'+id)[0]);
427+
return callback( document.getElementById(id) );
436428
}
437429
}
438430
}
@@ -534,7 +526,7 @@ class Messenger{
534526
comment:comment,
535527
callback: () => {
536528
if(callback instanceof Function){
537-
return callback($("#"+id)[0]);
529+
return callback( document.getElementById(id) );
538530
}
539531
}
540532
}
@@ -560,7 +552,7 @@ class Messenger{
560552
comment:comment,
561553
callback: () => {
562554
if(callback instanceof Function){
563-
return callback($('#'+id)[0]);
555+
return callback( document.getElementById(id) );
564556
}
565557
}
566558
}
@@ -583,7 +575,7 @@ class Messenger{
583575
comment:comment,
584576
callback: () => {
585577
if(callback instanceof Function){
586-
const el = $('#'+id)[0];
578+
const el = document.getElementById(id);
587579
const ctx = el.getContext('2d');
588580
return callback(el, ctx);
589581
}
@@ -609,8 +601,8 @@ class Messenger{
609601
comment:comment,
610602
callback: () => {
611603
if(callback instanceof Function){
612-
const videoEl = $('#'+id)[0];
613-
const buttonEl = $("#button-"+id)[0];
604+
const videoEl = document.getElementById(id);
605+
const buttonEl = document.getElementById("button-"+id);
614606

615607
let localStream;
616608
if (navigator.mediaDevices.getUserMedia) {
@@ -659,13 +651,6 @@ class Messenger{
659651
'</div>'
660652
);
661653
}
662-
663-
/**
664-
* Remove loading message
665-
*/
666-
removeLoader(){
667-
$('#'+this.user+'-loader').parent().remove();
668-
}
669654
}
670655

671656
/**

0 commit comments

Comments
 (0)