aboutsummaryrefslogtreecommitdiffstats
path: root/view/tpl/messages_widget.tpl
diff options
context:
space:
mode:
Diffstat (limited to 'view/tpl/messages_widget.tpl')
-rw-r--r--view/tpl/messages_widget.tpl139
1 files changed, 139 insertions, 0 deletions
diff --git a/view/tpl/messages_widget.tpl b/view/tpl/messages_widget.tpl
new file mode 100644
index 000000000..83f563db6
--- /dev/null
+++ b/view/tpl/messages_widget.tpl
@@ -0,0 +1,139 @@
+<ul class="nav nav-tabs nav-fill clearfix">
+ <li class="nav-item">
+ <a class="nav-link active messages-type" href="#" title="{{$strings.messages_title}}" data-messages_type="">
+ <i class="fa fa-fw fa-comment-o"></i>
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link messages-type" href="#" title="{{$strings.direct_messages_title}}" data-messages_type="direct">
+ <i class="fa fa-fw fa-envelope-o"></i>
+ </a>
+ </li>
+ {{if $feature_star}}
+ <li class="nav-item">
+ <a class="nav-link messages-type" href="#" title="{{$strings.starred_messages_title}}" data-messages_type="starred">
+ <i class="fa fa-fw fa-star"></i>
+ </a>
+ </li>
+ {{/if}}
+ <li class="nav-item">
+ <a class="nav-link messages-type" href="#" title="{{$strings.notice_messages_title}}" data-messages_type="notification">
+ <i class="fa fa-fw fa-exclamation"></i>
+ </a>
+ </li>
+</ul>
+<div id="messages-widget" class="border border-top-0 overflow-auto mb-3 clearfix" style="height: 70vh;">
+ <div id="messages-template" rel="template" class="d-none">
+ <a href="{6}" class="list-group-item list-group-item-action message" data-b64mid="{0}">
+ <div class="d-flex w-100 justify-content-between">
+ <div class="mb-1 text-truncate" title="{5}">
+ {7}
+ <strong>{4}</strong>
+ </div>
+ <small class="messages-timeago text-nowrap" title="{1}"></small>
+ </div>
+ <div class="mb-1">
+ <div class="text-break">{2}</div>
+ </div>
+ <small>{3}</small>
+ </a>
+ </div>
+ <div id="dm-container" class="list-group list-group-flush" data-offset="10">
+ {{foreach $entries as $e}}
+ <a href="{{$e.href}}" class="list-group-item list-group-item-action message" data-b64mid="{{$e.b64mid}}">
+ <div class="d-flex w-100 justify-content-between">
+ <div class="mb-1 text-truncate" title="{{$e.author_addr}}">
+ {{$e.icon}}
+ <strong>{{$e.author_name}}</strong>
+ </div>
+ <small class="messages-timeago text-nowrap" title="{{$e.created}}"></small>
+ </div>
+ <div class="mb-1">
+ <div class="text-break">{{$e.summary}}</div>
+ </div>
+ <small>{{$e.info}}</small>
+ </a>
+ {{/foreach}}
+ <div id="messages-empty" class="list-group-item border-0"{{if $entries}} style="display: none;"{{/if}}>
+ {{$strings.empty}}...
+ </div>
+ <div id="messages-loading" class="list-group-item" style="display: none;">
+ {{$strings.loading}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span>
+ </div>
+ </div>
+</div>
+<script>
+ var messages_offset = {{$offset}};
+ var get_messages_page_active = false;
+ var messages_type;
+
+ $(document).ready(function () {
+ $('.messages-timeago').timeago();
+ $('.message[data-b64mid=\'' + bParam_mid + '\']').addClass('active');
+ });
+
+ $('#messages-widget').on('scroll', function() {
+ if(this.scrollTop > this.scrollHeight - this.clientHeight - (this.scrollHeight/7)) {
+ get_messages_page();
+ }
+ });
+
+ $(document).on('click', '.messages-type', function(e) {
+ e.preventDefault();
+ $('.messages-type').removeClass('active');
+ $(this).addClass('active');
+ messages_offset = 0;
+ messages_type = $(this).data('messages_type');
+ $('#dm-container .message').remove();
+ get_messages_page();
+ });
+
+ function get_messages_page() {
+
+ if (get_messages_page_active)
+ return;
+
+ if (messages_offset === -1)
+ return;
+
+ get_messages_page_active = true;
+ $('#messages-loading').show();
+ $('#messages-empty').hide();
+
+ $.ajax({
+ type: 'post',
+ url: 'hq',
+ data: {
+ offset: messages_offset,
+ type: messages_type
+ }
+ }).done(function(obj) {
+ get_messages_page_active = false;
+ messages_offset = obj.offset;
+ let html;
+ let tpl = $('#messages-template[rel=template]').html();
+ if (obj.entries.length) {
+ obj.entries.forEach(function(e) {
+ html = tpl.format(
+ e.b64mid,
+ e.created,
+ e.summary,
+ e.info,
+ e.author_name,
+ e.author_addr,
+ e.href,
+ e.icon
+ );
+ $('#messages-loading').before(html);
+ });
+ }
+ else {
+ $('#messages-empty').show();
+ }
+ $('.message[data-b64mid=\'' + bParam_mid + '\']').addClass('active');
+ $('#messages-loading').hide();
+ $('.messages-timeago').timeago();
+
+ });
+ }
+</script>