Browse Source

Supported install/uninstall stickersets

master
Igor Zhukov 10 years ago
parent
commit
96a8ecc2cd
  1. 7
      app/js/controllers.js
  2. 63
      app/js/directives.js
  3. 5
      app/js/locales/en-us.json
  4. 45
      app/js/message_composer.js
  5. 66
      app/js/services.js
  6. 57
      app/less/app.less
  7. 5
      app/less/desktop.less
  8. 28
      app/partials/desktop/stickerset_modal.html

7
app/js/controllers.js

@ -3848,6 +3848,13 @@ angular.module('myApp.controllers', ['myApp.i18n'])
$scope.$broadcast('ui_height'); $scope.$broadcast('ui_height');
$scope.stickersetLoaded = true; $scope.stickersetLoaded = true;
$scope.stickerset = result.set; $scope.stickerset = result.set;
$scope.stickersetInstalled = result.installed;
$scope.documents = result.documents; $scope.documents = result.documents;
}); });
$scope.toggleInstalled = function (installed) {
AppStickersManager.installStickerset($scope.stickerset, !installed).then(function () {
$scope.stickersetInstalled = installed;
})
}
}) })

63
app/js/directives.js

@ -925,6 +925,33 @@ angular.module('myApp.directives', ['myApp.filters'])
}) })
.directive('myStickersList', function($window, $timeout) {
return {
link: link
};
function link ($scope, element, attrs) {
var stickersWrap = $('.stickerset_wrap', element)[0];
onContentLoaded(function () {
$(stickersWrap).nanoScroller({preventPageScrolling: true, tabIndex: -1, iOSNativeScrolling: true});
updateSizes();
});
function updateSizes () {
$(element).css({
height: Math.min(500, $($window).height()
- (Config.Mobile ? 46 + 18 : 200))
});
$(stickersWrap).nanoScroller();
}
$($window).on('resize', updateSizes);
};
})
.directive('myHistory', function ($window, $timeout, $rootScope, $transition) { .directive('myHistory', function ($window, $timeout, $rootScope, $transition) {
return { return {
@ -1249,7 +1276,7 @@ angular.module('myApp.directives', ['myApp.filters'])
}) })
.directive('mySendForm', function ($timeout, $compile, $modalStack, $http, $interpolate, Storage, AppStickersManager, ErrorService) { .directive('mySendForm', function ($timeout, $compile, $modalStack, $http, $interpolate, Storage, AppStickersManager, AppDocsManager, ErrorService) {
return { return {
link: link, link: link,
@ -1270,14 +1297,28 @@ angular.module('myApp.directives', ['myApp.filters'])
var dragStarted, dragTimeout; var dragStarted, dragTimeout;
var submitBtn = $('.im_submit', element)[0]; var submitBtn = $('.im_submit', element)[0];
var stickerImageCompiled = $compile('<a class="composer_sticker_btn" my-load-sticker document="document" thumb="true" img-class="composer_sticker_image"></a>');
var cachedStickerImages = {};
var emojiTooltip = new EmojiTooltip(emojiButton, { var emojiTooltip = new EmojiTooltip(emojiButton, {
getStickers: function (callback) { getStickers: function (callback) {
AppStickersManager.getStickers().then(function () { AppStickersManager.getStickers().then(callback);
AppStickersManager.getStickersImages().then(function (stickersData) { },
callback(stickersData); getStickerImage: function (element, docID) {
}); if (cachedStickerImages[docID]) {
element.replaceWith(cachedStickerImages[docID]);
return;
}
var scope = $scope.$new(true);
scope.document = AppDocsManager.getDoc(docID);
stickerImageCompiled(scope, function (clonedElement) {
cachedStickerImages[docID] = clonedElement;
element.replaceWith(clonedElement);
}); });
}, },
onStickersetSelected: function (stickerset) {
AppStickersManager.openStickersetLink(stickerset);
},
onEmojiSelected: function (code) { onEmojiSelected: function (code) {
$scope.$apply(function () { $scope.$apply(function () {
composer.onEmojiSelected(code); composer.onEmojiSelected(code);
@ -1817,7 +1858,9 @@ angular.module('myApp.directives', ['myApp.filters'])
}; };
function link ($scope, element, attrs) { function link ($scope, element, attrs) {
var imgElement = $('<img />').appendTo(element); var imgElement = $('<img />')
.appendTo(element)
.addClass(attrs.imgClass);
var setSrc = function (blob) { var setSrc = function (blob) {
if (WebpManager.isWebpSupported()) { if (WebpManager.isWebpSupported()) {
@ -1863,12 +1906,20 @@ angular.module('myApp.directives', ['myApp.filters'])
imgElement.attr('src', emptySrc); imgElement.attr('src', emptySrc);
} }
if (attrs.thumb) {
MtpApiFileManager.downloadSmallFile(smallLocation).then(function (blob) {
setSrc(blob);
}, function (e) {
console.log('Download sticker failed', e, fullLocation);
});
} else {
MtpApiFileManager.downloadFile($scope.document.dc_id, fullLocation, $scope.document.size).then(function (blob) { MtpApiFileManager.downloadFile($scope.document.dc_id, fullLocation, $scope.document.size).then(function (blob) {
setSrc(blob); setSrc(blob);
}, function (e) { }, function (e) {
console.log('Download sticker failed', e, fullLocation); console.log('Download sticker failed', e, fullLocation);
}); });
} }
}
}) })
.directive('myLoadDocument', function(MtpApiFileManager, AppDocsManager, FileManager) { .directive('myLoadDocument', function(MtpApiFileManager, AppDocsManager, FileManager) {

5
app/js/locales/en-us.json

@ -86,6 +86,11 @@
"sessions_modal_terminate_all": "Terminate all other sessions", "sessions_modal_terminate_all": "Terminate all other sessions",
"sessions_modal_active_sessions": "Active sessions", "sessions_modal_active_sessions": "Active sessions",
"stickerset_modal_title_loading": "Stickerset",
"stickerset_modal_install": "Add stickers",
"stickerset_modal_uninstall": "Remove stickers",
"stickerset_modal_loading": "Loading{dots}",
"page_title_pluralize_notifications": "{'0': 'No notifications', 'one': '1 notification', 'other': '{} notifications'}", "page_title_pluralize_notifications": "{'0': 'No notifications', 'one': '1 notification', 'other': '{} notifications'}",
"profile_edit_modal_title": "Edit profile", "profile_edit_modal_title": "Edit profile",

45
app/js/message_composer.js

@ -138,6 +138,8 @@ function EmojiTooltip (btnEl, options) {
this.onEmojiSelected = options.onEmojiSelected; this.onEmojiSelected = options.onEmojiSelected;
this.onStickerSelected = options.onStickerSelected; this.onStickerSelected = options.onStickerSelected;
this.getStickers = options.getStickers; this.getStickers = options.getStickers;
this.getStickerImage = options.getStickerImage;
this.onStickersetSelected = options.onStickersetSelected;
if (!Config.Navigator.touch) { if (!Config.Navigator.touch) {
$(this.btnEl).on('mouseenter mouseleave', function (e) { $(this.btnEl).on('mouseenter mouseleave', function (e) {
@ -258,7 +260,7 @@ EmojiTooltip.prototype.createTooltip = function () {
this.contentEl.on('mousedown', function (e) { this.contentEl.on('mousedown', function (e) {
e = e.originalEvent || e; e = e.originalEvent || e;
var target = $(e.target), code, sticker; var target = $(e.target), code, sticker, stickerset;
if (target[0].tagName != 'A') { if (target[0].tagName != 'A') {
target = $(target[0].parentNode); target = $(target[0].parentNode);
} }
@ -276,6 +278,12 @@ EmojiTooltip.prototype.createTooltip = function () {
self.hide(); self.hide();
} }
} }
if (stickerset = target.attr('data-stickerset')) {
if (self.onStickersetSelected) {
self.onStickersetSelected(stickerset);
}
self.hide();
}
return cancelEvent(e); return cancelEvent(e);
}); });
@ -298,7 +306,7 @@ EmojiTooltip.prototype.createTooltip = function () {
EmojiTooltip.prototype.selectTab = function (tab) { EmojiTooltip.prototype.selectTab = function (tab) {
if (this.tab === tab) { if (this.tab === tab && tab != 6) {
return false; return false;
} }
$('.active', this.tabsEl).removeClass('active'); $('.active', this.tabsEl).removeClass('active');
@ -308,7 +316,7 @@ EmojiTooltip.prototype.selectTab = function (tab) {
this.updateTabContents(); this.updateTabContents();
}; };
EmojiTooltip.prototype.updateTabContents = function (tab) { EmojiTooltip.prototype.updateTabContents = function () {
var html = []; var html = [];
var self = this; var self = this;
var iconSize = Config.Mobile ? 26 : 20; var iconSize = Config.Mobile ? 26 : 20;
@ -325,14 +333,32 @@ EmojiTooltip.prototype.updateTabContents = function (tab) {
} }
if (this.tab == 6) { // Stickers if (this.tab == 6) { // Stickers
var renderStickers = function (stickers) { var renderStickers = function (stickersets) {
var sticker, i; var set, docID, i, j, len1, len2;
var count = stickers.length; for (i = 0, len1 = stickersets.length; i < len1; i++) {
for (i = 0; i < count; i++) { set = stickersets[i];
sticker = stickers[i]; if (!set.docIDs.length) {
html.push('<a class="composer_sticker_btn" data-sticker="' + sticker.id + '"><img class="composer_sticker_image" src="' + encodeEntities(sticker.src) + '" /></a>'); continue;
}
if (set.id && set.title) {
html.push(
'<a class="composer_stickerset_title" data-stickerset="',
encodeEntities(set.short_name),
'">',
encodeEntities(set.title),
'</a>'
);
}
for (j = 0, len2 = set.docIDs.length; j < len2; j++) {
docID = set.docIDs[j];
html.push('<a class="composer_sticker_btn" data-sticker="' + docID + '"></a>');
}
} }
renderContent(); renderContent();
self.contentEl.find('.composer_sticker_btn').each(function (k, element) {
self.getStickerImage($(element), element.getAttribute('data-sticker'));
});
}; };
this.getStickers(renderStickers); this.getStickers(renderStickers);
} }
@ -381,6 +407,7 @@ EmojiTooltip.prototype.updatePosition = function () {
EmojiTooltip.prototype.show = function () { EmojiTooltip.prototype.show = function () {
this.updatePosition(); this.updatePosition();
this.updateTabContents();
this.tooltipEl.addClass('composer_emoji_tooltip_shown'); this.tooltipEl.addClass('composer_emoji_tooltip_shown');
this.btnEl.addClass('composer_emoji_insert_btn_on'); this.btnEl.addClass('composer_emoji_insert_btn_on');
delete this.showTimeout; delete this.showTimeout;

66
app/js/services.js

@ -3348,6 +3348,10 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
apiDoc.stickerEmojiRaw = attribute.alt; apiDoc.stickerEmojiRaw = attribute.alt;
apiDoc.stickerEmoji = RichTextProcessor.wrapRichText(apiDoc.stickerEmojiRaw, {noLinks: true, noLinebreaks: true}); apiDoc.stickerEmoji = RichTextProcessor.wrapRichText(apiDoc.stickerEmojiRaw, {noLinks: true, noLinebreaks: true});
} }
if (attribute.stickerset &&
attribute.stickerset._ == 'inputStickerSetID') {
apiDoc.stickerSetID = attribute.stickerset.id;
}
break; break;
case 'documentAttributeImageSize': case 'documentAttributeImageSize':
apiDoc.w = attribute.w; apiDoc.w = attribute.w;
@ -3640,16 +3644,19 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
} }
}) })
.service('AppStickersManager', function ($q, $rootScope, $modal, FileManager, MtpApiManager, MtpApiFileManager, AppDocsManager, Storage) { .service('AppStickersManager', function ($q, $rootScope, $modal, _, FileManager, MtpApiManager, MtpApiFileManager, AppDocsManager, Storage) {
var currentStickers = []; var currentStickers = [];
var currentStickersets = [];
var installedStickersets = {}; var installedStickersets = {};
var stickersetItems = {};
var applied = false; var applied = false;
var started = false; var started = false;
return { return {
start: start, start: start,
openStickersetLink: openStickersetLink, openStickersetLink: openStickersetLink,
installStickerset: installStickerset,
getStickers: getStickers, getStickers: getStickers,
getStickerset: getStickerset, getStickerset: getStickerset,
getStickersImages: getStickersImages getStickersImages: getStickersImages
@ -3670,26 +3677,49 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
function processRawStickers(stickers) { function processRawStickers(stickers) {
if (applied !== stickers.hash) { if (applied !== stickers.hash) {
applied = stickers.hash; applied = stickers.hash;
var i, j, len1, len2, doc; var i, j, len1, len2, doc, setID, set;
len1 = stickers.documents.length; len1 = stickers.documents.length;
currentStickers = []; currentStickers = [];
stickersetItems = {};
for (i = 0; i < len1; i++) { for (i = 0; i < len1; i++) {
doc = stickers.documents[i]; doc = stickers.documents[i];
AppDocsManager.saveDoc(doc); AppDocsManager.saveDoc(doc);
currentStickers.push(doc.id); currentStickers.push(doc.id);
setID = doc.stickerSetID || 0;
if (stickersetItems[setID] === undefined) {
stickersetItems[setID] = [];
}
stickersetItems[setID].push(doc.id);
}
if (stickersetItems[0] !== undefined) {
currentStickersets.push({
_: 'stickerSetDefault',
id: 0,
docIDs: stickersetItems[0]
});
} }
len1 = stickers.sets.length;
for (i = 0; i < len1; i++) {
set = stickers.sets[i];
installedStickersets[set.id] = true;
set.docIDs = stickersetItems[set.id] || [];
currentStickersets.push(set);
} }
return currentStickers;
} }
function getStickers () { return currentStickersets;
}
function getStickers (force) {
return Storage.get('all_stickers').then(function (stickers) { return Storage.get('all_stickers').then(function (stickers) {
var layer = Config.Schema.API.layer; var layer = Config.Schema.API.layer;
if (stickers.layer != layer) { if (stickers.layer != layer) {
stickers = false; stickers = false;
} }
if (stickers && stickers.date > tsNow(true)) { if (stickers && stickers.date > tsNow(true) && !force) {
return processRawStickers(stickers); return processRawStickers(stickers);
} }
return MtpApiManager.invokeApi('messages.getAllStickers', { return MtpApiManager.invokeApi('messages.getAllStickers', {
@ -3742,10 +3772,32 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
for (var i = 0; i < result.documents.length; i++) { for (var i = 0; i < result.documents.length; i++) {
AppDocsManager.saveDoc(result.documents[i]); AppDocsManager.saveDoc(result.documents[i]);
} }
result.installed = installedStickersets[result.set.id] !== undefined;
return result; return result;
}); });
} }
function installStickerset (set, uninstall) {
var method = uninstall
? 'messages.uninstallStickerSet'
: 'messages.installStickerSet';
var inputStickerset = {
_: 'inputStickerSetID',
id: set.id,
access_hash: set.access_hash
};
return MtpApiManager.invokeApi(method, {
stickerset: inputStickerset
}).then(function (result) {
if (uninstall) {
delete installedStickersets[set.id];
} else {
installedStickersets[set.id] = true;
}
getStickers(true);
});
}
function openStickersetLink (shortName) { function openStickersetLink (shortName) {
var scope = $rootScope.$new(true); var scope = $rootScope.$new(true);
scope.inputStickerset = { scope.inputStickerset = {
@ -3755,8 +3807,8 @@ angular.module('myApp.services', ['myApp.i18n', 'izhukov.utils'])
var modal = $modal.open({ var modal = $modal.open({
templateUrl: templateUrl('stickerset_modal'), templateUrl: templateUrl('stickerset_modal'),
controller: 'StickersetModalController', controller: 'StickersetModalController',
scope: scope/*, scope: scope,
windowClass: 'error_modal_window'*/ windowClass: 'stickerset_modal_window'
}); });
} }
}) })

57
app/less/app.less

@ -2474,6 +2474,20 @@ a.composer_emoji_btn {
vertical-align: top; vertical-align: top;
} }
.composer_stickerset_title {
display: block;
clear: both;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: bold;
font-size: 13px;
color: #444;
margin: 10px 0 3px;
}
.composer_stickerset_title:hover {
color: #444;
}
.composer_sticker_btn { .composer_sticker_btn {
width: 78px; width: 78px;
height: 78px; height: 78px;
@ -2917,6 +2931,49 @@ a.contacts_modal_contact:hover .md_modal_list_peer_description,
margin: 15px 0 20px 24px; margin: 15px 0 20px 24px;
} }
.stickerset_modal_window .modal-dialog {
max-width: 474px;
}
.stickerset_modal_stickers_list {
padding: 25px;
}
.stickerset_modal_sticker_wrap {
list-style: none;
margin: 0 10px 10px 0;
padding: 0;
position: relative;
display: block;
width: 96px;
height: 96px;
float: left;
}
.stickerset_modal_sticker {
width: 96px;
height: 96px;
}
.stickerset_modal_sticker img {
width: 96px;
height: 96px;
}
.stickerset_modal_sticker_alt {
position: absolute;
bottom: 0;
right: 0;
}
.stickerset_actions {
padding: 10px 20px;
text-align: center;
}
.stickerset_modal_loading {
text-align: center;
color: #999;
font-size: 16px;
line-height: 18px;
padding: 1px 50px;
margin: 0;
}
.modal-dialog { .modal-dialog {
.md_simple_modal_window &, .md_simple_modal_window &,
.confirm_modal_window &, .confirm_modal_window &,

5
app/less/desktop.less

@ -646,6 +646,7 @@ a.footer_link.active:active {
.im_history_col .nano > &, .im_history_col .nano > &,
.contacts_modal_col .nano > &, .contacts_modal_col .nano > &,
.sessions_modal_col .nano > &, .sessions_modal_col .nano > &,
.stickerset_modal_col .nano > &,
.im_dialogs_modal_col .nano > & { .im_dialogs_modal_col .nano > & {
background : rgba(216,223,225,0.45); /*45% d8dfe5*/ background : rgba(216,223,225,0.45); /*45% d8dfe5*/
width : 9px; width : 9px;
@ -661,7 +662,8 @@ a.footer_link.active:active {
right: 4px; right: 4px;
} }
.sessions_modal_col .nano > & { .sessions_modal_col .nano > &,
.stickerset_modal_col .nano > & {
top: 4px; top: 4px;
bottom: 4px; bottom: 4px;
width: 5px; width: 5px;
@ -681,6 +683,7 @@ a.footer_link.active:active {
.im_history_col .nano > &, .im_history_col .nano > &,
.contacts_modal_col .nano > &, .contacts_modal_col .nano > &,
.sessions_modal_col .nano > &, .sessions_modal_col .nano > &,
.stickerset_modal_col .nano > &,
.im_dialogs_modal_col .nano > & { .im_dialogs_modal_col .nano > & {
& > .nano-slider { & > .nano-slider {
background : rgba(137,160,179,0.50); /*50% 89a0b3*/ background : rgba(137,160,179,0.50); /*50% 89a0b3*/

28
app/partials/desktop/stickerset_modal.html

@ -6,12 +6,15 @@
<a class="md_modal_action md_modal_action_close" ng-click="$dismiss()" my-i18n="modal_close"></a> <a class="md_modal_action md_modal_action_close" ng-click="$dismiss()" my-i18n="modal_close"></a>
</div> </div>
</div> </div>
<div class="md_modal_title" my-i18n="stickerset_modal_title"></div> <div class="md_modal_title" ng-switch="!stickersetLoaded">
<span ng-switch-when="true" my-i18n="stickerset_modal_title_loading"></span>
<span ng-switch-default ng-bind="stickerset.title"></span>
</div>
</div> </div>
<div class="md_modal_body"> <div class="md_modal_body">
<div my-stickerset-list class="stickerset_modal_col"> <div my-stickers-list class="stickerset_modal_col">
<div class="stickerset_wrap nano" my-infinite-scroller> <div class="stickerset_wrap nano" my-infinite-scroller>
<div class="stickerset_scrollable_wrap nano-content" ng-switch="!stickersetLoaded"> <div class="stickerset_scrollable_wrap nano-content" ng-switch="!stickersetLoaded">
@ -22,17 +25,11 @@
</my-i18n-param> </my-i18n-param>
</div> </div>
<div ng-switch-default> <div ng-switch-default class="stickerset_modal_stickers_list clearfix">
<h4 ng-bind="stickerset.title"></h4> <div class="stickerset_modal_sticker_wrap" ng-repeat="sticker in documents | limitTo: slice.limit">
<div class="stickerset_modal_sticker" my-load-sticker document="sticker" thumb="true"></div>
<ul class="stickerset_modal_stickers_list">
<li class="stickerset_modal_sticker_wrap" ng-repeat="sticker in documents | limitTo: slice.limit">
<img class="stickerset_modal_sticker" my-load-sticker document="sticker"></img>
<div class="stickerset_modal_sticker_alt" ng-bind-html="sticker.stickerEmoji"></div> <div class="stickerset_modal_sticker_alt" ng-bind-html="sticker.stickerEmoji"></div>
</li> </div>
</ul>
</div> </div>
</div> </div>
@ -40,6 +37,13 @@
</div> </div>
<div class="stickerset_actions_wrap" ng-if="stickersetLoaded">
<div class="stickerset_actions" ng-switch="stickersetInstalled">
<button ng-switch-when="true" class="btn btn-md btn-md-danger" my-i18n="stickerset_modal_uninstall" ng-click="toggleInstalled(false)"></button>
<button ng-switch-default class="btn btn-md btn-md-primary" my-i18n="stickerset_modal_install" ng-click="toggleInstalled(true)"></button>
</div>
</div>
</div> </div>
</div> </div>

Loading…
Cancel
Save