path: root/view/tpl/messages_widget.tpl

<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}}
</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>