diff --git a/README.md b/README.md index de4f1ee..c581e8e 100644 --- a/README.md +++ b/README.md @@ -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* @@ -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. diff --git a/dist/chat.js b/dist/chat.js index 0bbb8c1..7f01ae0 100644 --- a/dist/chat.js +++ b/dist/chat.js @@ -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); @@ -133,7 +135,7 @@ function IASChat(config) { } // Also add the styles from css/style.css - ias += ''; + ias += ''; var printplace = null; @@ -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)'; + } } @@ -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; } @@ -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); diff --git a/js/chat.js b/js/chat.js index b5cbb40..c530723 100644 --- a/js/chat.js +++ b/js/chat.js @@ -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); @@ -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)'; + } } @@ -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; } @@ -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); diff --git a/template/ias_style.html b/template/ias_style.html index 3596ebe..f46eb6a 100644 --- a/template/ias_style.html +++ b/template/ias_style.html @@ -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; + } + } \ No newline at end of file