Skip to content

Commit

Permalink
Merge pull request #18 from CodingCarlos/dev
Browse files Browse the repository at this point in the history 
Added new message notifications, and message callbacks (both for send and recieve)
  • Loading branch information
@CodingCarlos
CodingCarlos authored Mar 11, 2017
2 parents e454370 + 0b774cf commit b1bf648
Show file tree
Hide file tree
Showing 9 changed files with 240 additions and 24 deletions.
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@ To configure the chat, just use the object passed on IASChat instantiation. *Bol
- defaultSupportPic: String Default support picture (if no supporter assigned)
- uploadFiles: Boolean Enable or disable the option to upload and send files (Default: true)
- onlyPictures: Boolean Allow only pictures, or all file types (Default: true)
- onMessage: Function Execute a function on message recieved. Params message (all object) and key are passed to the function
- onSend: Function Execute a function when a message is sent. Params message (all object) and key are passed to the function

In IASChatProvider, there are some extra features:
- container: String Container for support panel (*#identifier* or *.className*. Default: *body*)
Expand Down
16 changes: 15 additions & 1 deletion demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,22 @@ <h1>User side support</h1>
mainColor: '#ff9800',
textColor: '#fff',
defaultSupportName: 'John Doe',
defaultSupportPic: 'http://lorempixel.com/100/100/people'
defaultSupportPic: 'http://lorempixel.com/100/100/people',
onMessage: myFunction,
onSend: function(msg, key) {
console.log('#################');
console.log('- Message sent! Key: ' + key);
console.log(msg)
console.log('#################');
}
});

function myFunction(message, key) {
console.log('--------------------');
console.log('- We got a message! key: ' + key);
console.log(message);
console.log('--------------------');
}
};
</script>

Expand Down
98 changes: 86 additions & 12 deletions dist/chat.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,15 @@ function IASChat(config) {
var hashSign = config.hashSign || '?';
var uploadFiles = config.uploadFiles || true;
var onlyPictures = config.onlyPictures || true;
var onSend = config.onSend || null;
var onMessage = config.onMessage || null;

// Prepare interface
printInterface(container);

// Prepare listeners
var show = document.getElementById('ias-show');
var showNotifications = document.getElementById('ias-show-notifications');
var ias = document.getElementById('ias');
var topbar = document.getElementById('ias_topbar');
var close = document.getElementById('ias_topbar-close');
Expand All @@ -47,6 +50,10 @@ function IASChat(config) {
var lastHash = '';
var lastPage = '';

var user = null;
var lastMessage = {};


// Listen event submit
if(show) {
show.addEventListener('click', showIAS.bind(this));
Expand Down Expand Up @@ -83,7 +90,19 @@ function IASChat(config) {
name = config.name || '';
pic = config.pic || '';

setChatData();
// Get chat info
userRef = firebase.database().ref('users/' + cid);
userRef.on('value', function(data) {

user = data.val();

lastMessage = user.lastMessage;
// console.log(lastMessage);

setChatData();
setNotifications();
});


clearMessages();

Expand All @@ -96,10 +115,7 @@ function IASChat(config) {

function setChatData() {

userRef = firebase.database().ref('users/' + cid);
userRef.on('value', function(data) {
var key = data.key;
var user = data.val();
if(user) {

var printData = {
name: defaultSupportName,
Expand All @@ -118,8 +134,9 @@ function IASChat(config) {

document.getElementById('ias_topbar-text').innerHTML = printData.name;
document.getElementById('ias_topbar-pic').firstChild.setAttribute('src', printData.pic);
});

} else {
setTimeout(setChatData, 100);
}
}


Expand All @@ -131,11 +148,11 @@ function IASChat(config) {

// If shall show button, add it to interface (from html/show-button.html)
if(button) {
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>'
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>'
}

// Also add the styles from css/style.css
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>';
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>';

var printplace = null;

Expand Down Expand Up @@ -219,7 +236,7 @@ function IASChat(config) {
var text = e.srcElement.children[1].value

if(text === '' && attatchment === null) {
console.log('tried to send empty form. Rejected.');
console.warn('tried to send empty form. Rejected.');
return false;
}

Expand Down Expand Up @@ -278,17 +295,21 @@ function IASChat(config) {
firebase.database().ref('messages/' + cid).push(msg);

firebase.database().ref('users/' + cid).once('value').then(function(snapshot) {

var userLastMsg = msg;
userLastMsg.read = false;

if(!snapshot.val()) {
// Add user
firebase.database().ref('users/' + cid).set({
name: name,
pic: pic,
isSupporter: false,
supporter: -1,
lastMessage: msg
lastMessage: userLastMsg
});
} else {
firebase.database().ref('users/' + cid).update({lastMessage: msg});
firebase.database().ref('users/' + cid).update({lastMessage: userLastMsg});
if(!snapshot.val().profile) {
generateUserData(cid)
}
Expand All @@ -312,8 +333,44 @@ function IASChat(config) {

if(message.uid == uid) {
printMessage(text);
if(typeof onSend === 'function' && message.timestamp > lastMessage.timestamp) {
onSend(message, key);
}
} else {
printMessage(text, true);

// If chat is open, set the message as read
if(!isHidden()) {
readLastMessage();
}

if(typeof onMessage === 'function' && message.timestamp > lastMessage.timestamp) {
onMessage(message, key);
}
}
}

function readLastMessage() {
firebase.database().ref('users/' + cid + '/lastMessage').update({read: true});
}

function setNotifications() {

// Only set notifications if button are enabled
if(button) {
if(lastMessage.uid !== uid && !lastMessage.read) {
if (showNotifications.classList) {
showNotifications.classList.remove('hidden');
} else {
showNotifications.className = showNotifications.className.replace(new RegExp('(^|\\b)' + 'hidden'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
} else {
if (showNotifications.classList) {
showNotifications.classList.add('hidden');
} else {
showNotifications.className += ' ' + 'hidden';
}
}
}
}

Expand All @@ -338,6 +395,9 @@ function IASChat(config) {

// Also set url hash to true;
addUrlHash();

// And read last message
readLastMessage();
}

function hideIAS(e) {
Expand All @@ -355,6 +415,20 @@ function IASChat(config) {
remUrlHash();
}

function isHidden(e) {
if(typeof(e) !== 'undefined') {
e.preventDefault();
}

var className = 'hidden';

if (ias.classList) {
return ias.classList.contains(className);
} else {
return new RegExp('(^| )' + className + '( |$)', 'gi').test(ias.className);
}
}

/* ### URL Hash ### */

function visibilityUrlHash() {
Expand Down
17 changes: 16 additions & 1 deletion dist/provider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ function IASChatProvider(config) {

function printInterface(container) {
// Compressed version of html/chat.html turned to string
var ias = '<div id=\"iasProvider\"><div id=\"iasProvider_unassigned-chat\"><h3>Unassigned Users:</h3><ul class=\"iasProvider_users-chat\"></ul></div><div id=\"iasProvider_assigned-chat\"><h3>Your Users:</h3><ul class=\"iasProvider_users-chat\"></ul></div></div><style>#iasProvider {font-family: \"Roboto\",\"Helvetica\",\"Arial\",sans-serif!important;}.iasProvider_users-chat {list-style: none;margin: 0;padding: 0;}.iasProvider_users-chat li div {display: inline-block;vertical-align: middle;}.iasProvider_users-chat li div.iasProvider_users-chat-pic {box-sizing: border-box;padding: 8px 16px;width: 72px;}.iasProvider_users-chat li div.iasProvider_users-chat-pic img {border-radius: 50%;height: 40px;width: 40px;}.iasProvider_users-chat li div.iasProvider_users-chat-name {font-size: 16px;}</style>'
var ias = '<div id=\"iasProvider\"><div id=\"iasProvider_unassigned-chat\"><h3>Unassigned Users:</h3><ul class=\"iasProvider_users-chat\"></ul></div><div id=\"iasProvider_assigned-chat\"><h3>Your Users:</h3><ul class=\"iasProvider_users-chat\"></ul></div></div><style>#iasProvider {font-family: \"Roboto\",\"Helvetica\",\"Arial\",sans-serif!important;}.iasProvider_users-chat {list-style: none;margin: 0;padding: 0;}.iasProvider_users-chat-unread {font-weight: bold;}.iasProvider_users-chat-message {font-weight: lighter;font-family: .8em;}.iasProvider_users-chat li div {display: inline-block;vertical-align: middle;}.iasProvider_users-chat li div.iasProvider_users-chat-pic {box-sizing: border-box;padding: 8px 16px;width: 72px;}.iasProvider_users-chat li div.iasProvider_users-chat-pic img {border-radius: 50%;height: 40px;width: 40px;}.iasProvider_users-chat li div.iasProvider_users-chat-name {font-size: 16px;}</style>'

// Also add the provider styles from css/provider-style.css
// ias += '';
Expand Down Expand Up @@ -101,10 +101,25 @@ function IASChatProvider(config) {

var supporter = data.supporter.uid || data.supporter;

var read = true;

if(typeof data.lastMessage !== 'undefined' && typeof data.lastMessage.read !== 'undefined' && !data.lastMessage.read) {
read = false;
}

var user = document.createElement('li');
user.setAttribute("data-cid", data.uid);
user.setAttribute("data-supporter", supporter);

if(read) {
user.innerHTML = '<div class="iasProvider_users-chat-pic"><img src="' + data.pic + '"></div><div class="iasProvider_users-chat-name">' + data.name + '</div>';
} else {
var message = data.lastMessage.text;
if(data.lastMessage.text.length > 20)
message = data.lastMessage.text.slice(0, 20) + '...';

user.innerHTML = '<div class="iasProvider_users-chat-pic"><img src="' + data.pic + '"></div><div class="iasProvider_users-chat-name iasProvider_users-chat-unread">' + data.name + '<br><span class="iasProvider_users-chat-message">' + message + '</span></div>';
}

user.addEventListener('click', usersChatManagement, false);

Expand Down
Loading

0 comments on commit b1bf648

Please sign in to comment.