Merge pull request #11 from CodingCarlos/dev

v0.1 functions

Author: CodingCarlos

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. 

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 += '<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;
 
@@ -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);

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);

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;
+        }
+    }
 </style>