1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
<ul class="nav nav-tabs nav-fill">
<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}}
</ul>
<div id="messages-widget" class="border border-top-0 overflow-auto mb-3" 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-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;
$('#messages-widget').on('scroll', function() {
if(this.scrollTop > this.scrollHeight - this.clientHeight - (this.scrollHeight/7)) {
get_messages_page('hq');
}
});
$(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();
});
$('.messages-timeago').timeago();
$('.message[data-b64mid=\'' + bParam_mid + '\']').addClass('active');
function get_messages_page() {
if (get_messages_page_active)
return;
if (messages_offset === -1)
return;
get_messages_page_active = true;
$('#messages-loading').show();
$.ajax({
type: 'post',
url: 'hq',
data: {
offset: messages_offset,
type: messages_type
}
}).done(function(obj) {
get_messages_page_active = false;
messages_offset = obj.offset;
console.log(obj);
let html;
let tpl = $('#messages-template[rel=template]').html();
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);
});
$('.message[data-b64mid=\'' + bParam_mid + '\']').addClass('active');
$('#messages-loading').hide();
$('.messages-timeago').timeago();
});
}
</script>
|
