Browse Source

Improved message media directive

master
Igor Zhukov 8 years ago
parent
commit
c91ed89975
  1. 38
      app/js/directives.js
  2. 9
      app/partials/desktop/message.html
  3. 10
      app/partials/desktop/message_attach_contact.html
  4. 10
      app/partials/desktop/message_attach_pending.html
  5. 34
      app/partials/desktop/message_attach_webpage.html
  6. 10
      app/partials/mobile/message_attach_contact.html
  7. 10
      app/partials/mobile/message_attach_pending.html

38
app/js/directives.js

@ -185,7 +185,11 @@ angular.module('myApp.directives', ['myApp.filters']) @@ -185,7 +185,11 @@ angular.module('myApp.directives', ['myApp.filters'])
};
function updateMessageText (message, element) {
var entities = message.totalEntities;
if (typeof message.message !== 'string' ||
!message.message.length) {
element.hide();
return;
}
var fromUser = message.from_id && AppUsersManager.getUser(message.from_id);
var fromBot = fromUser && fromUser.pFlags.bot && fromUser.username || false;
var toPeerID = AppPeersManager.getPeerID(message.to_id);
@ -196,7 +200,7 @@ angular.module('myApp.directives', ['myApp.filters']) @@ -196,7 +200,7 @@ angular.module('myApp.directives', ['myApp.filters'])
var options = {
noCommands: !withBot,
fromBot: fromBot,
entities: entities
entities: message.totalEntities
};
if (message.pFlags.mentioned) {
var user = AppUsersManager.getSelf();
@ -205,11 +209,21 @@ angular.module('myApp.directives', ['myApp.filters']) @@ -205,11 +209,21 @@ angular.module('myApp.directives', ['myApp.filters'])
}
}
var html = RichTextProcessor.wrapRichText(message.message, options);
// console.log('dd', entities, html);
element.html(html.valueOf());
}
function updateMessageMedia(message, element) {
if (!message.media) {
element.hide();
return;
}
switch (message.media._) {
case 'messageMediaPhoto':
}
}
function link ($scope, element, attrs) {
var message = $scope.message;
var msgID = message.mid;
@ -338,34 +352,39 @@ angular.module('myApp.directives', ['myApp.filters']) @@ -338,34 +352,39 @@ angular.module('myApp.directives', ['myApp.filters'])
.directive('myMessageVenue', function() {
return {
scope: {
'venue': '=myMessageVenue'
'media': '=myMessageVenue'
},
templateUrl: templateUrl('message_attach_venue')
};
})
.directive('myMessageContact', function() {
return {
scope: {
'media': '=myMessageContact'
},
templateUrl: templateUrl('message_attach_contact')
};
})
.directive('myMessageWebpage', function(AppWebPagesManager, AppPhotosManager) {
return {
scope: {
'webpage': '=myMessageWebpage',
'media': '=myMessageWebpage',
'messageId': '=messageId'
},
templateUrl: templateUrl('message_attach_webpage'),
link: function ($scope) {
$scope.openPhoto = AppPhotosManager.openPhoto;
$scope.openEmbed = function ($event) {
if ($scope.webpage && $scope.webpage.embed_url) {
AppWebPagesManager.openEmbed($scope.webpage.id, $scope.messageId);
if ($scope.media.webpage &&
$scope.media.webpage.embed_url) {
AppWebPagesManager.openEmbed($scope.media.webpage.id, $scope.messageId);
return cancelEvent($event);
}
};
$scope.$on('webpage_updated', function (e, eventData) {
if ($scope.webpage && $scope.webpage.id == eventData.id) {
if ($scope.media.webpage &&
$scope.media.webpage.id == eventData.id) {
$scope.$emit('ui_height');
}
});
@ -374,6 +393,9 @@ angular.module('myApp.directives', ['myApp.filters']) @@ -374,6 +393,9 @@ angular.module('myApp.directives', ['myApp.filters'])
})
.directive('myMessagePending', function() {
return {
scope: {
'media': '=myMessagePending'
},
templateUrl: templateUrl('message_attach_pending')
};
})

9
app/partials/desktop/message.html

@ -64,16 +64,15 @@ @@ -64,16 +64,15 @@
<div my-message-body="historyMessage">
<div class="im_message_text" dir="auto"></div>
<div ng-if="::historyMessage.media || historyMessage.mid < 0 ? true : false" class="im_message_media" ng-switch="historyMessage.media._">
<div class="im_message_media" ng-switch="historyMessage.media._">
<div ng-switch-when="messageMediaPhoto" my-message-photo="historyMessage.media" message-id="historyMessage.mid"></div>
<div ng-switch-when="messageMediaDocument" my-message-document="historyMessage.media" message-id="historyMessage.mid"></div>
<div ng-switch-when="messageMediaGeo" my-message-geo="historyMessage.media"></div>
<div ng-switch-when="messageMediaVenue" my-message-venue="historyMessage.media"></div>
<div ng-switch-when="messageMediaContact" my-message-contact></div>
<div ng-switch-when="messageMediaWebPage" my-message-webpage="historyMessage.media.webpage" message-id="historyMessage.mid"></div>
<div ng-switch-when="messageMediaPending" my-message-pending></div>
<div ng-switch-when="messageMediaContact" my-message-contact="historyMessage"></div>
<div ng-switch-when="messageMediaWebPage" my-message-webpage="historyMessage.media" message-id="historyMessage.mid"></div>
<div ng-switch-when="messageMediaPending" my-message-pending="historyMessage.media"></div>
<div ng-switch-when="messageMediaUnsupported">
<div class="im_message_text" my-i18n="message_attach_unsupported">
<my-i18n-param name="link"><a href="https://web.telegram.org" target="_blank">web.telegram.org</a></my-i18n-param>

10
app/partials/desktop/message_attach_contact.html

@ -1,8 +1,8 @@ @@ -1,8 +1,8 @@
<div class="im_message_contact">
<a ng-if="historyMessage.media.user_id > 0" class="im_message_contact_photo pull-left" my-peer-photolink="historyMessage.media.user_id" img-class="im_message_contact_photo" user-override="historyMessage.media"></a>
<div class="im_message_contact_name" ng-switch="historyMessage.media.user_id > 0">
<a ng-switch-when="true" my-peer-link="historyMessage.media.user_id" user-override="historyMessage.media"></a>
<span ng-switch-default ng-bind-html="::historyMessage.media.rFullName"></span>
<a ng-if="::media.user_id > 0" class="im_message_contact_photo pull-left" my-peer-photolink="media.user_id" img-class="im_message_contact_photo" user-override="media"></a>
<div class="im_message_contact_name" ng-switch="media.user_id > 0">
<a ng-switch-when="true" my-peer-link="media.user_id" user-override="media"></a>
<span ng-switch-default ng-bind-html="::media.rFullName"></span>
</div>
<div class="im_message_contact_phone" ng-bind="::historyMessage.media.phone_number | phoneNumber"></div>
<div class="im_message_contact_phone" ng-bind="::media.phone_number | phoneNumber"></div>
</div>

10
app/partials/desktop/message_attach_pending.html

@ -1,17 +1,17 @@ @@ -1,17 +1,17 @@
<div class="im_message_document im_message_upload_file" ng-class="::'im_message_upload_' + historyMessage.media.type">
<div class="im_message_document im_message_upload_file" ng-class="::'im_message_upload_' + media.type">
<div class="im_message_file_button im_message_file_button_upload">
<i class="im_message_file_button_icon"></i>
</div>
<div class="im_message_document_info">
<div class="im_message_document_name_wrap">
<span class="im_message_document_name" ng-bind="::historyMessage.media.file_name"></span>
<span class="im_message_document_size" ng-if="historyMessage.media.progress" ng-bind="historyMessage.media.progress | formatSizeProgress"></span>
<span class="im_message_document_name" ng-bind="::media.file_name"></span>
<span class="im_message_document_size" ng-if="media.progress" ng-bind="media.progress | formatSizeProgress"></span>
</div>
<div class="clearfix im_message_cancelable_progress_wrap">
<a class="im_message_media_progress_cancel pull-right" ng-click="historyMessage.media.progress.cancel()" my-i18n="modal_cancel"></a>
<a class="im_message_media_progress_cancel pull-right" ng-click="media.progress.cancel()" my-i18n="modal_cancel"></a>
<div class="im_message_download_progress_wrap">
<div class="progress tg_up_progress">
<div class="progress-bar progress-bar-success" role="progressbar" ng-style="{width: historyMessage.media.progress.percent + '%'}"></div>
<div class="progress-bar progress-bar-success" role="progressbar" ng-style="{width: media.progress.percent + '%'}"></div>
</div>
</div>
</div>

34
app/partials/desktop/message_attach_webpage.html

@ -1,31 +1,31 @@ @@ -1,31 +1,31 @@
<div ng-show="webpage._ == 'webPage'" class="im_message_webpage_wrap clearfix" ng-switch="webpage.type">
<div ng-show="media.webpage._ == 'webPage'" class="im_message_webpage_wrap clearfix" ng-switch="media.webpage.type">
<div ng-switch-when="photo" class="im_message_webpage_photo">
<div class="im_message_webpage_title">
<a href="{{webpage.url}}" target="_blank" ng-bind-html="webpage.rTitle"></a>
<a href="{{media.webpage.url}}" target="_blank" ng-bind-html="media.webpage.rTitle"></a>
</div>
<div ng-if="webpage.description.length" class="im_message_webpage_description" ng-bind-html="webpage.rDescription"></div>
<a class="im_message_photo_thumb" ng-click="openPhoto(webpage.photo.id, {w: webpage.id, m: messageId})" ng-style="::{width: webpage.photo.thumb.width + 'px'}" ng-mouseover="preloadPhoto(webpage.photo.id)">
<div ng-if="media.webpage.description.length" class="im_message_webpage_description" ng-bind-html="media.webpage.rDescription"></div>
<a class="im_message_photo_thumb" ng-click="openPhoto(media.webpage.photo.id, {w: media.webpage.id, m: messageId})" ng-style="::{width: media.webpage.photo.thumb.width + 'px'}" ng-mouseover="preloadPhoto(media.webpage.photo.id)">
<img
class="im_message_photo_thumb"
my-load-thumb
thumb="webpage.photo.thumb"
thumb="media.webpage.photo.thumb"
alt="[{{::'conversation_media_photo' | i18n}}]"
/>
</a>
</div>
<div ng-switch-when="video" class="im_message_webpage_video">
<div class="im_message_webpage_site" ng-bind="webpage.site_name || webpage.display_url"></div>
<div class="im_message_webpage_site" ng-bind="media.webpage.site_name || media.webpage.display_url"></div>
<div class="im_message_webpage_title">
<a ng-click="openEmbed($event)" href="{{webpage.url}}" target="_blank" ng-bind-html="webpage.rTitle"></a>
<a ng-click="openEmbed($event)" href="{{media.webpage.url}}" target="_blank" ng-bind-html="media.webpage.rTitle"></a>
</div>
<div ng-if="webpage.description.length" class="im_message_webpage_description" ng-bind-html="webpage.rDescription"></div>
<a class="im_message_video_thumb" ng-click="openEmbed($event)" ng-href="{{webpage.url}}" target="_blank" ng-style="::{width: video.thumb.width + 'px'}">
<span ng-if="webpage.duration > 0" class="im_message_video_duration nocopy" data-content="{{::webpage.duration | duration}}"></span>
<div ng-if="media.webpage.description.length" class="im_message_webpage_description" ng-bind-html="media.webpage.rDescription"></div>
<a class="im_message_video_thumb" ng-click="openEmbed($event)" ng-href="{{media.webpage.url}}" target="_blank" ng-style="::{width: video.thumb.width + 'px'}">
<span ng-if="media.webpage.duration > 0" class="im_message_video_duration nocopy" data-content="{{::media.webpage.duration | duration}}"></span>
<i class="icon icon-videoplay"></i>
<img
class="im_message_video_thumb"
my-load-thumb
thumb="webpage.photo.thumb"
thumb="media.webpage.photo.thumb"
alt="[{{::'conversation_media_video' | i18n}}]"
/>
</a>
@ -37,23 +37,23 @@ @@ -37,23 +37,23 @@
<div ng-switch-when="gif" class="im_message_webpage_gif">
<div class="im_message_webpage_title">
<a href="{{webpage.url}}" target="_blank" ng-bind-html="webpage.rTitle"></a>
<a href="{{media.webpage.url}}" target="_blank" ng-bind-html="media.webpage.rTitle"></a>
</div>
<div my-message-document="webpage" message-id="messageId"></div>
</div>
<div ng-switch-default class="im_message_webpage_article">
<a ng-if="webpage.photo" href="{{webpage.url}}" target="_blank" class="im_message_webpage_article_photo pull-right">
<a ng-if="media.webpage.photo" href="{{media.webpage.url}}" target="_blank" class="im_message_webpage_article_photo pull-right">
<img
class="im_message_article_thumb"
my-load-thumb
thumb="webpage.photo.thumb"
thumb="media.webpage.photo.thumb"
/>
</a>
<div class="im_message_webpage_site" ng-bind="webpage.site_name"></div>
<div class="im_message_webpage_site" ng-bind="media.webpage.site_name"></div>
<div class="im_message_webpage_title">
<a ng-click="openEmbed($event)" href="{{webpage.url}}" target="_blank" ng-bind-html="webpage.rTitle"></a>
<a ng-click="openEmbed($event)" href="{{media.webpage.url}}" target="_blank" ng-bind-html="media.webpage.rTitle"></a>
</div>
<div ng-if="webpage.description.length" class="im_message_webpage_description" ng-bind-html="webpage.rDescription"></div>
<div ng-if="media.webpage.description.length" class="im_message_webpage_description" ng-bind-html="media.webpage.rDescription"></div>
</div>
</div>

10
app/partials/mobile/message_attach_contact.html

@ -1,8 +1,8 @@ @@ -1,8 +1,8 @@
<div class="im_message_contact">
<a ng-if="historyMessage.media.user_id > 0" class="im_message_contact_photo pull-left" my-peer-photolink="historyMessage.media.user_id" img-class="im_message_contact_photo" user-override="historyMessage.media"></a>
<div class="im_message_contact_name" ng-switch="historyMessage.media.user_id > 0">
<a ng-switch-when="true" my-peer-link="historyMessage.media.user_id" user-override="historyMessage.media"></a>
<span ng-switch-default ng-bind-html="::historyMessage.media.rFullName"></span>
<a ng-if="::media.user_id > 0" class="im_message_contact_photo pull-left" my-peer-photolink="media.user_id" img-class="im_message_contact_photo" user-override="media"></a>
<div class="im_message_contact_name" ng-switch="media.user_id > 0">
<a ng-switch-when="true" my-peer-link="media.user_id" user-override="media"></a>
<span ng-switch-default ng-bind-html="::media.rFullName"></span>
</div>
<div class="im_message_contact_phone" ng-bind="::historyMessage.media.phone_number | phoneNumber"></div>
<div class="im_message_contact_phone" ng-bind="::media.phone_number | phoneNumber"></div>
</div>

10
app/partials/mobile/message_attach_pending.html

@ -1,17 +1,17 @@ @@ -1,17 +1,17 @@
<div class="im_message_document im_message_upload_file" ng-class="::'im_message_upload_' + historyMessage.media.type">
<div class="im_message_document im_message_upload_file" ng-class="::'im_message_upload_' + media.type">
<div class="im_message_file_button im_message_file_button_upload">
<i class="im_message_file_button_icon"></i>
</div>
<div class="im_message_document_info">
<div class="im_message_document_name_wrap">
<span class="im_message_document_name" ng-bind="::historyMessage.media.file_name"></span>
<span class="im_message_document_size" ng-if="historyMessage.media.progress" ng-bind="historyMessage.media.progress | formatSizeProgress"></span>
<span class="im_message_document_name" ng-bind="::media.file_name"></span>
<span class="im_message_document_size" ng-if="media.progress" ng-bind="media.progress | formatSizeProgress"></span>
</div>
<div class="clearfix im_message_cancelable_progress_wrap">
<a class="im_message_media_progress_cancel pull-right" ng-click="historyMessage.media.progress.cancel()" my-i18n="modal_cancel"></a>
<a class="im_message_media_progress_cancel pull-right" ng-click="media.progress.cancel()" my-i18n="modal_cancel"></a>
<div class="im_message_download_progress_wrap">
<div class="progress tg_down_progress">
<div class="progress-bar progress-bar-success" role="progressbar" ng-style="{width: historyMessage.media.progress.percent + '%'}"></div>
<div class="progress-bar progress-bar-success" role="progressbar" ng-style="{width: media.progress.percent + '%'}"></div>
</div>
</div>
</div>

Loading…
Cancel
Save