QuickBlox · dimaspirit · Apr 12, 2016 · Feb 12, 2016 · Feb 12, 2016 · Feb 16, 2016
diff --git a/samples/chat/css/style.css b/samples/chat/css/style.css
@@ -120,11 +120,12 @@ input[type=file]#load-img {
   position: absolute;
   left: 16px;
   bottom: 0px;
-  width: 10%;
   height: 34px;
   opacity: 0;
   cursor: pointer;
   overflow: hidden;
+  display: none;
+
 }
 
 #progress {
@@ -178,15 +179,47 @@ input[type=file]:focus {
   border-radius: 0px;
 }
 
-#attach_btn.btn {
-	border-radius: 0px;
-	width: 10%;
+.icon-photo {
+	background-image: url('./../images/photo-btn.png');
+	background-repeat: no-repeat;
+	background-size: 24px 24px;
+	background-position: 0 0;
+	display: block;
+	opacity: 0.7;
+	height: 24px;
+	width: 24px;
+}
+
+.icon-sticker {
+	background-image: url('./../images/sticker-btn.png');
+	background-repeat: no-repeat;
+	background-size: 48px 24px;
+	background-position: 0 0;
+	display: block;
+	opacity: 0.7;
+	height: 24px;
+	width: 24px;
+}
+
+.icon-sticker.active {
+	background-position: -24px 0;
+	height: 24px;
+	width: 24px;
+}
+
+#attach_btn.btn,
+#stickers_btn.btn {
+	background: transparent !important;
+	border-radius: 0;
+	margin-right: 10px;
+	padding: 4px;
+	outline: none !important;
 }
 
 #message_text {
 	display: inline-block;
 	border-radius: 0px;
-	width: 78.7%;
+	width: 100%;
 	box-shadow: none;
 }
 
@@ -197,7 +230,7 @@ input[type=file]:focus {
 
 #send_btn.btn {
 	border-radius: 0px;
-	width: 10%
+	margin-left: 10px;
 }
 
 #all_occupants{
@@ -327,3 +360,25 @@ a.pull_push.active  {
   top: 30px;
   display: none;
 }
+
+.emoji {
+	height: 1.5em;
+	margin: 0 .2em;
+	width: 1.5em;
+}
+
+.sp-modal-overlay {
+	z-index: 1000000;
+}
+
+.sp-modal {
+	z-index: 1000005;
+}
+
+.visibility_hidden{
+  visibility: hidden;
+}
+
+iframe::-webkit-scrollbar {
+	width: 0;
+}
diff --git a/samples/chat/images/photo-btn.png b/samples/chat/images/photo-btn.png
diff --git a/samples/chat/images/sticker-btn.png b/samples/chat/images/sticker-btn.png
diff --git a/samples/chat/index.html b/samples/chat/index.html
@@ -6,6 +6,7 @@
   <title>QuickBlox JavaScript Chat code sample</title>
   <link rel="shortcut icon" href="https://quickblox.com/favicon.ico">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
+  <link rel="stylesheet" href="libs/stickerpipe/css/stickerpipe.min.css">
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
@@ -25,7 +26,7 @@
             <li><a href="#" onclick="showNewDialogPopup()">Create dialog</a></li>
             <li><a href="#" onclick="showDialogInfoPopup()">Dialog info</a></li>
           </ul>
-          <a href="https://github.com/QuickBlox/quickblox-javascript-sdk/tree/master/samples/chat"
+          <a href="https://github.com/QuickBlox/quickblox-javascript-sdk/"
       		style="position:absolute;top:20px;right:12%;font-size:0.85em;color:grey;">View source on GitHub</a>
         </div><!--/.nav-collapse -->
       </div>
@@ -56,12 +57,27 @@ <h4 class="list-header-title">History</h4>
                   </div>
                     <div><img src="images/ajax-loader.gif" class="load-msg"></div>
                     <form class="form-inline" role="form" method="POST" action="" onsubmit="return submit_handler(this)">
-                      <div class="form-group">
-                        <input id="load-img" type="file">
-                        <button type="button" id="attach_btn" class="btn btn-default" onclick="">Attach</button>
-                        <input type="text" class="form-control" id="message_text" placeholder="Enter message">
-                        <button  type="submit" id="send_btn" class="btn btn-default" onclick="clickSendMessage()">Send</button>
-                      </div>
+	                  <div class="input-group">
+		                  <span class="input-group-btn input-group-btn_change_load">
+			              <input id="load-img" type="file">
+			                <button type="button" id="attach_btn" class="btn btn-default" onclick="$('#load-img').click();">
+				              <i class="icon-photo"></i>
+			                </button>
+		                  </span>
+		                  <span class="input-group-btn input-group-btn_change_load">
+			                <button type="button" id="stickers_btn" class="btn btn-default" onclick="">
+				              <i class="icon-sticker"></i>
+			                </button>
+		                  </span>
+
+		                  <span class="input-group-btn" style="width: 100%;">
+			                 <input type="text" class="form-control" id="message_text" placeholder="Enter message">
+		                  </span>
+
+		                  <span class="input-group-btn">
+			                <button  type="submit" id="send_btn" class="btn btn-default" onclick="clickSendMessage()">Send</button>
+		                  </span>
+	                    </div>
                       <img src="images/ajax-loader.gif" id="progress">
                     </form>
                 </div>
@@ -148,9 +164,11 @@ <h5 class="col-md-12 col-sm-12 col-xs-12" id="all_occupants"></h5>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
 
   <script src="../../quickblox.min.js"></script>
+  <script src="libs/stickerpipe/js/stickerpipe.js"></script>
   <script src="js/config.js"></script>
   <script src="js/connection.js"></script>
   <script src="js/messages.js"></script>
+  <script src="js/stickerpipe.js"></script>
   <script src="js/ui_helpers.js"></script>
   <script src="js/dialogs.js"></script>
   <script src="js/users.js"></script>

diff --git a/samples/chat/js/config.js b/samples/chat/js/config.js
@@ -11,6 +11,20 @@ var config = {
   debug: {
     mode: 1,
     file: null
+  },
+  stickerpipe: {
+    elId: 'stickers_btn',
+
+    apiKey: '847b82c49db21ecec88c510e377b452c',
+
+    enableEmojiTab: false,
+    enableHistoryTab: true,
+    enableStoreTab: true,
+
+    userId: null,
+
+    priceB: '0.99 $',
+    priceC: '1.99 $'
   }
 };
 

diff --git a/samples/chat/js/connection.js b/samples/chat/js/connection.js
@@ -41,6 +41,11 @@ function connectToChat(user) {
           console.log(err);
         } else {
           console.log(roster);
+
+          // setup scroll stickerpipe module
+          //
+          setupStickerPipe();
+
           // load chat dialogs
           //
           retrieveChatDialogs();

diff --git a/samples/chat/js/dialogs.js b/samples/chat/js/dialogs.js
@@ -87,6 +87,7 @@ function retrieveChatDialogs() {
           var inputFile = $("input[type=file]")[0].files[0];
           if (inputFile) {
             $("#progress").show(0);
+            $(".input-group-btn_change_load").addClass("visibility_hidden");
           }
 
           clickSendAttachments(inputFile);
@@ -152,7 +153,7 @@ function updateDialogsList(dialogId, text){
   $('#'+dialogId+'.list-group-item.inactive .badge').text(parseInt(badgeCount)+1).fadeIn(500);
 
   // update last message
-  $('#'+dialogId+' .list-group-item-text').text(text);
+  $('#'+dialogId+' .list-group-item-text').text(stickerpipe.isSticker(text) ? 'Sticker' : text);
 }
 
 // Choose dialog

diff --git a/samples/chat/js/messages.js b/samples/chat/js/messages.js
@@ -165,7 +165,11 @@ function clickSendAttachments(inputFile) {
     if (err) {
       console.log(err);
     } else {
-      $("#progress").fadeOut(400);
+
+      $("#progress").fadeOut(400, function() {
+        $(".input-group-btn_change_load").removeClass("visibility_hidden");
+      });
+
       var uploadedFile = response;
 
       sendMessage("[attachment]", uploadedFile.id);
@@ -177,6 +181,9 @@ function clickSendAttachments(inputFile) {
 
 // send text or attachment
 function sendMessage(text, attachmentFileId) {
+
+  stickerpipe.onUserMessageSent(stickerpipe.isSticker(text));
+
   var msg = {
     type: currentDialog.type === 3 ? 'chat' : 'groupchat',
     body: text,
@@ -194,7 +201,7 @@ function sendMessage(text, attachmentFileId) {
     opponentId = QB.chat.helpers.getRecipientId(currentDialog.occupants_ids, currentUser.id);
     QB.chat.send(opponentId, msg);
 
-    $('.list-group-item.active .list-group-item-text').text(msg.body);
+    $('.list-group-item.active .list-group-item-text').text(stickerpipe.isSticker(msg.body) ? 'Sticker' : msg.body);
 
     if(attachmentFileId === null){
       showMessage(currentUser.id, msg);

diff --git a/samples/chat/js/stickerpipe.js b/samples/chat/js/stickerpipe.js
@@ -0,0 +1,89 @@
+
+var stickerpipe = null;
+
+function setupStickerPipe() {
+
+		var stickerpipeConfig = config.stickerpipe,
+
+				$stickersBtn = $('#' + stickerpipeConfig.elId + ' i'),
+				$messageText = $('#message_text');
+
+		stickerpipeConfig.userId = currentUser.id;
+
+		stickerpipe = new Stickers(stickerpipeConfig);
+
+		stickerpipe.render(function() {
+
+				this.stickerpipe.onClickSticker((function(stickerCode) {
+						sendMessage(stickerCode, null);
+				}).bind(this));
+
+				this.stickerpipe.onClickEmoji(function(emoji) {
+						console.log('click on emoji', emoji);
+						$messageText.focus();
+						pasteHtmlAtCaret(stickerpipe.parseEmojiFromText(emoji));
+				});
+
+		});
+
+		stickerpipe.onPurchase((function(packName, packTitle, pricePoint) {
+
+			try {
+				// do purchase transaction ...
+				if (confirm('Do you want buy pack "' + packName + '"?')) {
+					stickerpipe.purchaseSuccess(packName, pricePoint);
+				} else {
+					stickerpipe.purchaseFail();
+				}
+			} catch (e) {
+				stickerpipe.purchaseFail();
+			}
+		}).bind(this));
+
+		window.addEventListener('sp:popover:shown', function() {
+				$stickersBtn.addClass('active');
+		});
+
+		window.addEventListener('sp:popover:hidden', function() {
+				$stickersBtn.removeClass('active');
+		});
+
+}
+
+function pasteHtmlAtCaret(html) {
+		var sel, range;
+		if (window.getSelection) {
+				// IE9 and non-IE
+				sel = window.getSelection();
+				if (sel.getRangeAt && sel.rangeCount) {
+						range = sel.getRangeAt(0);
+						range.deleteContents();
+
+						// Range.createContextualFragment() would be useful here but is
+						// only relatively recently standardized and is not supported in
+						// some browsers (IE9, for one)
+						var el = document.createElement("div");
+						el.innerHTML = html;
+						var frag = document.createDocumentFragment(), node, lastNode;
+						while ( (node = el.firstChild) ) {
+								lastNode = frag.appendChild(node);
+						}
+						var firstNode = frag.firstChild;
+						range.insertNode(frag);
+
+						// Preserve the selection
+						if (lastNode) {
+								range = range.cloneRange();
+								range.setStartAfter(lastNode);
+								range.collapse(true);
+								sel.removeAllRanges();
+								sel.addRange(range);
+						}
+				}
+		} else if ( (sel = document.selection) && sel.type != "Control") {
+				// IE < 9
+				var originalRange = sel.createRange();
+				originalRange.collapse(true);
+				sel.createRange().pasteHTML(html);
+		}
+}