1
0
Fork 0

Replace Javascript notification string formatting with Smarty templates

This commit is contained in:
Hypolite Petovan 2022-03-04 00:21:06 -05:00
commit 5a12bd87f3
12 changed files with 107 additions and 140 deletions

View file

@ -239,7 +239,6 @@ $(function() {
});
/* notifications template */
var notifications_tpl= unescape($("#nav-notifications-template[rel=template]").html());
var notifications_all = unescape($('<div>').append($("#nav-notifications-see-all").clone()).html()); //outerHtml hack
var notifications_mark = unescape($('<div>').append($("#nav-notifications-mark-all").clone()).html()); //outerHtml hack
var notifications_empty = unescape($("#nav-notifications-menu").html());
@ -315,34 +314,20 @@ $(function() {
var notification_id = 0;
// Insert notifs into the notifications-menu
$(data.notifications).each(function(key, notification) {
var text = notification.message.format('<span class="contactname">' + notification.name + '</span>');
var contact = ('<a href="' + notification.url + '"><span class="contactname">' + notification.name + '</span></a>');
var seenclass = (notification.seen == 1) ? "notification-seen" : "notification-unseen";
var html = notifications_tpl.format(
notification.href, // {0} // link to the source
notification.photo, // {1} // photo of the contact
text, // {2} // preformatted text (autor + text)
notification.date, // {3} // date of notification (time ago)
seenclass, // {4} // visited status of the notification
new Date(notification.timestamp*1000), // {5} // date of notification
notification.url, // {6} // profile url of the contact
notification.message.format(contact), // {7} // preformatted html (text including author profile url)
'' // {8} // Deprecated
);
nnm.append(html);
$(data.notifications).each(function(key, navNotif) {
nnm.append(navNotif.html);
});
// Desktop Notifications
$(data.notifications.reverse()).each(function(key, e) {
notification_id = parseInt(e.timestamp);
if (notification_lastitem !== null && notification_id > notification_lastitem && Number(e.seen) === 0) {
$(data.notifications.reverse()).each(function(key, navNotif) {
notification_id = parseInt(navNotif.timestamp);
if (notification_lastitem !== null && notification_id > notification_lastitem && Number(navNotif.seen) === 0) {
if (getNotificationPermission() === "granted") {
var notification = new Notification(document.title, {
body: decodeHtml(e.message.replace('&rarr; ', '').format(e.name)),
icon: e.photo,
});
notification['url'] = e.href;
body: decodeHtml(navNotif.plaintext),
icon: navNotif.contact.photo,
});
notification['url'] = navNotif.href;
notification.addEventListener("click", function(ev) {
window.location = ev.target.url;
});

View file

@ -65,7 +65,3 @@
<span id="nav-end"></span>
<span id="banner">{{$banner nofilter}}</span>
</nav>
<ul id="nav-notifications-template" style="display:none;" rel="template">
<li class="{4}"><a href="{0}" title="{5}"><img data-src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
</ul>

View file

@ -0,0 +1,3 @@
<li class="notification-{{if !$notify.seen}}un{{/if}}seen">
<a href="{{$notify.href}}" title="{{$notify.localdate}}"><img data-src="{{$notify.contact.photo}}" height="24" width="24" alt="" />{{$notify.richtext nofilter}} <span class="notif-when">{{$notify.ago}}</span></a>
</li>

View file

@ -67,7 +67,3 @@
<span id="nav-end"></span>
<span id="banner">{{$banner nofilter}}</span>
</nav>
<ul id="nav-notifications-template" style="display:none;" rel="template">
<li class="{4}"><a href="{0}" title="{5}"><img data-src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
</ul>

View file

@ -461,22 +461,6 @@
</div>
</div>
{{*The second part of the notifications dropdown menu. It handles the notifications *}}
{{if $nav.notifications}}
<ul id="nav-notifications-template" class="media-list" style="display:none;" rel="template">
<li class="{4} notif-entry">
<div class="notif-entry-wrapper media">
<div class="notif-photo-wrapper media-object pull-left" aria-hidden="true"><a href="{6}"
class="userinfo click-card" tabIndex="-1"><img data-src="{1}"></a></div>
<a href="{0}" class="notif-desc-wrapper media-body">
{2}
<div><time class="notif-when time" data-toggle="tooltip" title="{5}">{3}</time></div>
</a>
</div>
</li>
</ul>
{{/if}}
{{* This is the mask of the firefox logo. We set the background of #logo-img to the user icon color and apply this mask to it
The result is a friendica logo in the user icon color.*}}
<svg id="friendica-logo-mask" x="0px" y="0px" width="0px" height="0px" viewBox="0 0 250 250">

View file

@ -0,0 +1,11 @@
<li class="notification-{{if !$notify.seen}}un{{/if}}seen notif-entry">
<div class="notif-entry-wrapper media">
<div class="notif-photo-wrapper media-object pull-left" aria-hidden="true">
<a href="{{$notify.contact.url}}" class="userinfo click-card" tabIndex="-1"><img data-src="{{$notify.contact.photo}}" alt=""></a>
</div>
<a href="{{$notify.href}}" class="notif-desc-wrapper media-body">
{{$notify.richtext nofilter}}
<div><time class="notif-when time" data-toggle="tooltip" title="{{$notify.localdate}}">{{$notify.ago}}</time></div>
</a>
</div>
</li>

View file

@ -108,8 +108,5 @@
</ul>
</nav>
<ul id="nav-notifications-template" style="display:none;" rel="template">
<li class="{4}"><a href="{0}" title="{5}"><img data-src="{1}">{2} <span class="notif-when">{3}</span></a></li>
</ul>
<div style="position: fixed; top: 3px; left: 5px; z-index:9999">{{$langselector}}</div>

View file

@ -58,10 +58,6 @@
</div>
</nav>
<ul id="nav-notifications-template" style="display:none;" rel="template">
<li class="{4}"><a href="{0}"><img data-src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
</ul>
<div style="position: fixed; top: 3px; left: 5px; z-index:9999">{{$langselector}}</div>
<script>

View file

@ -141,17 +141,7 @@
</ul>
</nav>
<ul id="nav-notifications-template" style="display:none;" rel="template">
<li class="{4}" onclick="location.href='{0}';">
<div class="notif-entry-wrapper">
<div class="notif-photo-wrapper"><a href="{6}"><img data-src="{1}"></a></div>
<div class="notif-desc-wrapper">
{8}{7}
<div><time class="notif-when" title="{5}">{3}</time></div>
</div>
</div>
</li>
</ul>
<!--
<div class="icon-flag" style="position: fixed; bottom: 10px; left: 20px; z-index:9;">{{$langselector}}</div>
-->

View file

@ -0,0 +1,9 @@
<li class="notification-{{if !$notify.seen}}un{{/if}}seen" onclick="location.href='{{$notify.href}}';">
<div class="notif-entry-wrapper">
<div class="notif-photo-wrapper"><a href="{{$notify.contact.url}}"><img data-src="{{$notify.contact.photo}}"></a></div>
<div class="notif-desc-wrapper">
{{$notify.richtext nofilter}}
<div><time class="notif-when" title="{{$notify.localdate}}">{{$notify.ago}}</time></div>
</div>
</div>
</li>