Skip to content

Commit

Permalink
Merge pull request #11 from CodingCarlos/dev
Browse files Browse the repository at this point in the history 
v0.1 functions
  • Loading branch information
@CodingCarlos
CodingCarlos authored Jan 10, 2017
2 parents 0e43300 + 7852d3c commit fdeabf1
Show file tree
Hide file tree
Showing 4 changed files with 104 additions and 59 deletions.
8 changes: 2 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,14 +47,13 @@ To configure the chat, just use the object passed on IASChat instantiation. *Bol
- hashSign: String Symbol or string to add before url hash when chat open (Default: '?'. I.e.: url#existentHash**?**ias=true)
- defaultSupportName: String Default support name (if no supporter assigned)
- 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)

In IASChatProvider, there are some extra features:
- container: String Container for support panel (*#identifier* or *.className*. Default: *body*)
- chatContainer: String Container for chat (*#identifier* or *.className*. Default: *body* or support container)

In the future, early future, I hope to add...
- uploadFiles: Boolean Enable or disable the option to upload and send pictures.
- onlyPictures: Boolean Allow only pictures, or all file types.

*I'm open to any suggestion or request for more configuration params. Don't hesitate to open a new Issue*

Expand Down Expand Up @@ -118,9 +117,6 @@ Initialize the support user, and done.
### Secure the panel
This is your work. Support pannel in demo folder is not really a support panel, but a demo. This is not a fully control panel app, just a support chat "component" to add to your existing app.


## Responsiveness
Nope, right now is not desktop/tablet responsive, just mobile, but I'm doing my best to add larger screen support.

## Contribute
You can use this code as you like. If you find a bug, or want to ask for a feature, just open an issue, and we'll do our best. If you can fix it, do a pull request to ``dev`` branch, and we promise to review it as fast as possible to merge it.
Expand Down
68 changes: 41 additions & 27 deletions dist/chat.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ function IASChat(config) {
var defaultSupportPic = config.defaultSupportPic || 'https://s3.amazonaws.com/uifaces/faces/twitter/robertovivancos/128.jpg';
var container = config.container || null;
var hashSign = config.hashSign || '?';
var uploadFiles = config.uploadFiles || true;
var onlyPictures = config.onlyPictures || true;

// Prepare interface
printInterface(container);
Expand Down Expand Up @@ -133,7 +135,7 @@ function IASChat(config) {
}

// 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;}</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;}@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 @@ -169,6 +171,13 @@ function IASChat(config) {

// Form colors
form.children[0].style.borderColor = inputBorderColor;

// Upload form buttons
if(!uploadFiles) {
form.children[0].style.display = 'none';
form.children[1].style.margin = '0 16px';
form.children[1].style.width = 'calc(100% - 88px)';
}
}


Expand Down Expand Up @@ -199,7 +208,7 @@ function IASChat(config) {

var text = e.srcElement.children[1].value

if(text === '') {
if(text === '' && attatchment === null) {
console.log('tried to send empty form. Rejected.');
return false;
}
Expand Down Expand Up @@ -419,43 +428,48 @@ function IASChat(config) {

// File or Blob named mountains.jpg
var file = attatchment; // uploadFile.files[0];
var metadata;

if(!file) {
console.error('Empty file');
return false;
}

var extension = validateExtension(file);
if(onlyPictures) {

if(extension === null) {
console.error('Invalid file extension');
return false;
}
var extension = validateExtension(file);

var contentType = '';
switch(extension) {
case '.jpg':
case '.jpeg':
contentType = 'image/jpeg';
break;
if(extension === null) {
console.error('Invalid file extension');
return false;
}

case '.png':
contentType = 'image/png';
break;
var contentType = '';
switch(extension) {
case '.jpg':
case '.jpeg':
contentType = 'image/jpeg';
break;

case '.bmp':
contentType = 'image/bmp';
break;
case '.png':
contentType = 'image/png';
break;

case '.gif':
contentType = 'image/gif';
break;
}
case '.bmp':
contentType = 'image/bmp';
break;

// Create the file metadata
var metadata = {
contentType: contentType
};
case '.gif':
contentType = 'image/gif';
break;
}

// Create the file metadata
metadata = {
contentType: contentType
};

}

// Upload file and metadata to the object 'images/mountains.jpg'
var uploadTask = storageRef.child('images/' + uid + '/' + file.name).put(file, metadata);
Expand Down
66 changes: 40 additions & 26 deletions js/chat.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ function IASChat(config) {
var defaultSupportPic = config.defaultSupportPic || 'https://s3.amazonaws.com/uifaces/faces/twitter/robertovivancos/128.jpg';
var container = config.container || null;
var hashSign = config.hashSign || '?';
var uploadFiles = config.uploadFiles || true;
var onlyPictures = config.onlyPictures || true;

// Prepare interface
printInterface(container);
Expand Down Expand Up @@ -169,6 +171,13 @@ function IASChat(config) {

// Form colors
form.children[0].style.borderColor = inputBorderColor;

// Upload form buttons
if(!uploadFiles) {
form.children[0].style.display = 'none';
form.children[1].style.margin = '0 16px';
form.children[1].style.width = 'calc(100% - 88px)';
}
}


Expand Down Expand Up @@ -199,7 +208,7 @@ function IASChat(config) {

var text = e.srcElement.children[1].value

if(text === '') {
if(text === '' && attatchment === null) {
console.log('tried to send empty form. Rejected.');
return false;
}
Expand Down Expand Up @@ -419,43 +428,48 @@ function IASChat(config) {

// File or Blob named mountains.jpg
var file = attatchment; // uploadFile.files[0];
var metadata;

if(!file) {
console.error('Empty file');
return false;
}

var extension = validateExtension(file);
if(onlyPictures) {

if(extension === null) {
console.error('Invalid file extension');
return false;
}
var extension = validateExtension(file);

var contentType = '';
switch(extension) {
case '.jpg':
case '.jpeg':
contentType = 'image/jpeg';
break;
if(extension === null) {
console.error('Invalid file extension');
return false;
}

case '.png':
contentType = 'image/png';
break;
var contentType = '';
switch(extension) {
case '.jpg':
case '.jpeg':
contentType = 'image/jpeg';
break;

case '.bmp':
contentType = 'image/bmp';
break;
case '.png':
contentType = 'image/png';
break;

case '.gif':
contentType = 'image/gif';
break;
}
case '.bmp':
contentType = 'image/bmp';
break;

// Create the file metadata
var metadata = {
contentType: contentType
};
case '.gif':
contentType = 'image/gif';
break;
}

// Create the file metadata
metadata = {
contentType: contentType
};

}

// Upload file and metadata to the object 'images/mountains.jpg'
var uploadTask = storageRef.child('images/' + uid + '/' + file.name).put(file, metadata);
Expand Down
21 changes: 21 additions & 0 deletions template/ias_style.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,4 +151,25 @@
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>

0 comments on commit fdeabf1

Please sign in to comment.