Skip to content

Commit a596c8f

Browse files
dehimbdimaspirit
dehimb
authored and
dimaspirit
committed
Added stickers (#126)
- added stickers by 908Inc to chat sample
1 parent ce92d19 commit a596c8f

16 files changed

+7628
-25
lines changed

‎samples/chat/css/style.css

Lines changed: 61 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -120,11 +120,12 @@ input[type=file]#load-img {
120120
position: absolute;
121121
left: 16px;
122122
bottom: 0px;
123-
width: 10%;
124123
height: 34px;
125124
opacity: 0;
126125
cursor: pointer;
127126
overflow: hidden;
127+
display: none;
128+
128129
}
129130

130131
#progress {
@@ -178,15 +179,47 @@ input[type=file]:focus {
178179
border-radius: 0px;
179180
}
180181

181-
#attach_btn.btn {
182-
border-radius: 0px;
183-
width: 10%;
182+
.icon-photo {
183+
background-image: url('./../images/photo-btn.png');
184+
background-repeat: no-repeat;
185+
background-size: 24px 24px;
186+
background-position: 0 0;
187+
display: block;
188+
opacity: 0.7;
189+
height: 24px;
190+
width: 24px;
191+
}
192+
193+
.icon-sticker {
194+
background-image: url('./../images/sticker-btn.png');
195+
background-repeat: no-repeat;
196+
background-size: 48px 24px;
197+
background-position: 0 0;
198+
display: block;
199+
opacity: 0.7;
200+
height: 24px;
201+
width: 24px;
202+
}
203+
204+
.icon-sticker.active {
205+
background-position: -24px 0;
206+
height: 24px;
207+
width: 24px;
208+
}
209+
210+
#attach_btn.btn,
211+
#stickers_btn.btn {
212+
background: transparent !important;
213+
border-radius: 0;
214+
margin-right: 10px;
215+
padding: 4px;
216+
outline: none !important;
184217
}
185218

186219
#message_text {
187220
display: inline-block;
188221
border-radius: 0px;
189-
width: 78.7%;
222+
width: 100%;
190223
box-shadow: none;
191224
}
192225

@@ -197,7 +230,7 @@ input[type=file]:focus {
197230

198231
#send_btn.btn {
199232
border-radius: 0px;
200-
width: 10%
233+
margin-left: 10px;
201234
}
202235

203236
#all_occupants{
@@ -327,3 +360,25 @@ a.pull_push.active {
327360
top: 30px;
328361
display: none;
329362
}
363+
364+
.emoji {
365+
height: 1.5em;
366+
margin: 0 .2em;
367+
width: 1.5em;
368+
}
369+
370+
.sp-modal-overlay {
371+
z-index: 1000000;
372+
}
373+
374+
.sp-modal {
375+
z-index: 1000005;
376+
}
377+
378+
.visibility_hidden{
379+
visibility: hidden;
380+
}
381+
382+
iframe::-webkit-scrollbar {
383+
width: 0;
384+
}

‎samples/chat/images/photo-btn.png

429 Bytes
Loading

‎samples/chat/images/sticker-btn.png

2.37 KB
Loading

‎samples/chat/index.html

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<title>QuickBlox JavaScript Chat code sample</title>
77
<link rel="shortcut icon" href="https://quickblox.com/favicon.ico">
88
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
9+
<link rel="stylesheet" href="libs/stickerpipe/css/stickerpipe.min.css">
910
<link rel="stylesheet" href="css/style.css">
1011
</head>
1112
<body>
@@ -25,7 +26,7 @@
2526
<li><a href="#" onclick="showNewDialogPopup()">Create dialog</a></li>
2627
<li><a href="#" onclick="showDialogInfoPopup()">Dialog info</a></li>
2728
</ul>
28-
<a href="https://github.com/QuickBlox/quickblox-javascript-sdk/tree/master/samples/chat"
29+
<a href="https://github.com/QuickBlox/quickblox-javascript-sdk/"
2930
style="position:absolute;top:20px;right:12%;font-size:0.85em;color:grey;">View source on GitHub</a>
3031
</div><!--/.nav-collapse -->
3132
</div>
@@ -56,12 +57,27 @@ <h4 class="list-header-title">History</h4>
5657
</div>
5758
<div><img src="images/ajax-loader.gif" class="load-msg"></div>
5859
<form class="form-inline" role="form" method="POST" action="" onsubmit="return submit_handler(this)">
59-
<div class="form-group">
60-
<input id="load-img" type="file">
61-
<button type="button" id="attach_btn" class="btn btn-default" onclick="">Attach</button>
62-
<input type="text" class="form-control" id="message_text" placeholder="Enter message">
63-
<button type="submit" id="send_btn" class="btn btn-default" onclick="clickSendMessage()">Send</button>
64-
</div>
60+
<div class="input-group">
61+
<span class="input-group-btn input-group-btn_change_load">
62+
<input id="load-img" type="file">
63+
<button type="button" id="attach_btn" class="btn btn-default" onclick="$('#load-img').click();">
64+
<i class="icon-photo"></i>
65+
</button>
66+
</span>
67+
<span class="input-group-btn input-group-btn_change_load">
68+
<button type="button" id="stickers_btn" class="btn btn-default" onclick="">
69+
<i class="icon-sticker"></i>
70+
</button>
71+
</span>
72+
73+
<span class="input-group-btn" style="width: 100%;">
74+
<input type="text" class="form-control" id="message_text" placeholder="Enter message">
75+
</span>
76+
77+
<span class="input-group-btn">
78+
<button type="submit" id="send_btn" class="btn btn-default" onclick="clickSendMessage()">Send</button>
79+
</span>
80+
</div>
6581
<img src="images/ajax-loader.gif" id="progress">
6682
</form>
6783
</div>
@@ -148,9 +164,11 @@ <h5 class="col-md-12 col-sm-12 col-xs-12" id="all_occupants"></h5>
148164
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
149165

150166
<script src="../../quickblox.min.js"></script>
167+
<script src="libs/stickerpipe/js/stickerpipe.js"></script>
151168
<script src="js/config.js"></script>
152169
<script src="js/connection.js"></script>
153170
<script src="js/messages.js"></script>
171+
<script src="js/stickerpipe.js"></script>
154172
<script src="js/ui_helpers.js"></script>
155173
<script src="js/dialogs.js"></script>
156174
<script src="js/users.js"></script>

‎samples/chat/js/config.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,20 @@ var config = {
1111
debug: {
1212
mode: 1,
1313
file: null
14+
},
15+
stickerpipe: {
16+
elId: 'stickers_btn',
17+
18+
apiKey: '847b82c49db21ecec88c510e377b452c',
19+
20+
enableEmojiTab: false,
21+
enableHistoryTab: true,
22+
enableStoreTab: true,
23+
24+
userId: null,
25+
26+
priceB: '0.99 $',
27+
priceC: '1.99 $'
1428
}
1529
};
1630

‎samples/chat/js/connection.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,11 @@ function connectToChat(user) {
4141
console.log(err);
4242
} else {
4343
console.log(roster);
44+
45+
// setup scroll stickerpipe module
46+
//
47+
setupStickerPipe();
48+
4449
// load chat dialogs
4550
//
4651
retrieveChatDialogs();

‎samples/chat/js/dialogs.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ function retrieveChatDialogs() {
8787
var inputFile = $("input[type=file]")[0].files[0];
8888
if (inputFile) {
8989
$("#progress").show(0);
90+
$(".input-group-btn_change_load").addClass("visibility_hidden");
9091
}
9192

9293
clickSendAttachments(inputFile);
@@ -152,7 +153,7 @@ function updateDialogsList(dialogId, text){
152153
$('#'+dialogId+'.list-group-item.inactive .badge').text(parseInt(badgeCount)+1).fadeIn(500);
153154

154155
// update last message
155-
$('#'+dialogId+' .list-group-item-text').text(text);
156+
$('#'+dialogId+' .list-group-item-text').text(stickerpipe.isSticker(text) ? 'Sticker' : text);
156157
}
157158

158159
// Choose dialog

‎samples/chat/js/messages.js

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,11 @@ function clickSendAttachments(inputFile) {
165165
if (err) {
166166
console.log(err);
167167
} else {
168-
$("#progress").fadeOut(400);
168+
169+
$("#progress").fadeOut(400, function() {
170+
$(".input-group-btn_change_load").removeClass("visibility_hidden");
171+
});
172+
169173
var uploadedFile = response;
170174

171175
sendMessage("[attachment]", uploadedFile.id);
@@ -177,6 +181,9 @@ function clickSendAttachments(inputFile) {
177181

178182
// send text or attachment
179183
function sendMessage(text, attachmentFileId) {
184+
185+
stickerpipe.onUserMessageSent(stickerpipe.isSticker(text));
186+
180187
var msg = {
181188
type: currentDialog.type === 3 ? 'chat' : 'groupchat',
182189
body: text,
@@ -194,7 +201,7 @@ function sendMessage(text, attachmentFileId) {
194201
opponentId = QB.chat.helpers.getRecipientId(currentDialog.occupants_ids, currentUser.id);
195202
QB.chat.send(opponentId, msg);
196203

197-
$('.list-group-item.active .list-group-item-text').text(msg.body);
204+
$('.list-group-item.active .list-group-item-text').text(stickerpipe.isSticker(msg.body) ? 'Sticker' : msg.body);
198205

199206
if(attachmentFileId === null){
200207
showMessage(currentUser.id, msg);

‎samples/chat/js/stickerpipe.js

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
2+
var stickerpipe = null;
3+
4+
function setupStickerPipe() {
5+
6+
var stickerpipeConfig = config.stickerpipe,
7+
8+
$stickersBtn = $('#' + stickerpipeConfig.elId + ' i'),
9+
$messageText = $('#message_text');
10+
11+
stickerpipeConfig.userId = currentUser.id;
12+
13+
stickerpipe = new Stickers(stickerpipeConfig);
14+
15+
stickerpipe.render(function() {
16+
17+
this.stickerpipe.onClickSticker((function(stickerCode) {
18+
sendMessage(stickerCode, null);
19+
}).bind(this));
20+
21+
this.stickerpipe.onClickEmoji(function(emoji) {
22+
console.log('click on emoji', emoji);
23+
$messageText.focus();
24+
pasteHtmlAtCaret(stickerpipe.parseEmojiFromText(emoji));
25+
});
26+
27+
});
28+
29+
stickerpipe.onPurchase((function(packName, packTitle, pricePoint) {
30+
31+
try {
32+
// do purchase transaction ...
33+
if (confirm('Do you want buy pack "' + packName + '"?')) {
34+
stickerpipe.purchaseSuccess(packName, pricePoint);
35+
} else {
36+
stickerpipe.purchaseFail();
37+
}
38+
} catch (e) {
39+
stickerpipe.purchaseFail();
40+
}
41+
}).bind(this));
42+
43+
window.addEventListener('sp:popover:shown', function() {
44+
$stickersBtn.addClass('active');
45+
});
46+
47+
window.addEventListener('sp:popover:hidden', function() {
48+
$stickersBtn.removeClass('active');
49+
});
50+
51+
}
52+
53+
function pasteHtmlAtCaret(html) {
54+
var sel, range;
55+
if (window.getSelection) {
56+
// IE9 and non-IE
57+
sel = window.getSelection();
58+
if (sel.getRangeAt && sel.rangeCount) {
59+
range = sel.getRangeAt(0);
60+
range.deleteContents();
61+
62+
// Range.createContextualFragment() would be useful here but is
63+
// only relatively recently standardized and is not supported in
64+
// some browsers (IE9, for one)
65+
var el = document.createElement("div");
66+
el.innerHTML = html;
67+
var frag = document.createDocumentFragment(), node, lastNode;
68+
while ( (node = el.firstChild) ) {
69+
lastNode = frag.appendChild(node);
70+
}
71+
var firstNode = frag.firstChild;
72+
range.insertNode(frag);
73+
74+
// Preserve the selection
75+
if (lastNode) {
76+
range = range.cloneRange();
77+
range.setStartAfter(lastNode);
78+
range.collapse(true);
79+
sel.removeAllRanges();
80+
sel.addRange(range);
81+
}
82+
}
83+
} else if ( (sel = document.selection) && sel.type != "Control") {
84+
// IE < 9
85+
var originalRange = sel.createRange();
86+
originalRange.collapse(true);
87+
sel.createRange().pasteHTML(html);
88+
}
89+
}

0 commit comments

Comments
 (0)