diff options
Diffstat (limited to 'view/tpl/notifications_widget.tpl')
| -rw-r--r-- | view/tpl/notifications_widget.tpl | 119 |
1 files changed, 92 insertions, 27 deletions
diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl index 0ece84891..3545f4379 100644 --- a/view/tpl/notifications_widget.tpl +++ b/view/tpl/notifications_widget.tpl @@ -1,30 +1,87 @@ -<style> - .notification-content { - max-height: 70vh; - overflow: auto; - } +<script> + var notifications_parent; - .notification-content.collapsing { - overflow: hidden; - } + $(document).ready(function() { + notifications_parent = $('#notifications_wrapper')[0].parentElement.id; + $('.notifications-btn').click(function() { + if($('#notifications_wrapper').hasClass('fs')) + $('#notifications_wrapper').prependTo('#' + notifications_parent); + else + $('#notifications_wrapper').prependTo('section'); - .fs { - position: fixed; - top: 0px; - left: 0px; - padding: 4.5rem .5rem 1rem .5rem; - background-color: white; - width: 100%; - max-width: 100%; - height: 100%; - z-index: 1029; - overflow: auto; - } + $('#notifications_wrapper').toggleClass('fs'); + if($('#navbar-collapse-2').hasClass('show')){ + $('#navbar-collapse-2').removeClass('show'); + } + }); + + window.onpopstate = function(e) { + if(e.state !== null) + getData(e.state.b64mid, ''); + }; + }); - #notifications { - margin-bottom: 1rem; + {{if $module == 'display' || $module == 'hq'}} + $(document).on('click', '.notification', function(e) { + var b64mid = $(this).data('b64mid'); + var notify_id = $(this).data('notify_id'); + var path = $(this)[0].pathname.substr(1,7); + var stateObj = { b64mid: b64mid }; + + if(b64mid === 'undefined' && notify_id === 'undefined') + return; + + {{if $module == 'display'}} + history.pushState(stateObj, '', 'display/' + b64mid); + {{/if}} + {{if $module == 'hq'}} + history.pushState(stateObj, '', 'hq/' + b64mid); + {{/if}} + + {{if $module == 'hq'}} + if(b64mid !== 'undefined') { + {{else}} + if(path === 'display' && b64mid) { + {{/if}} + e.preventDefault(); + + if(! page_load) { + if($(this).parent().attr('id') !== 'nav-pubs-menu') + $(this).fadeOut(); + + getData(b64mid, notify_id); + } + + if($('#notifications_wrapper').hasClass('fs')) + $('#notifications_wrapper').prependTo('#' + notifications_parent).removeClass('fs'); + } + }); + {{/if}} + + {{foreach $notifications as $notification}} + {{if $notification.filter}} + $(document).on('click', '#tt-{{$notification.type}}-only', function(e) { + e.preventDefault(); + $('#nav-{{$notification.type}}-menu [data-thread_top=false]').toggle(); + $(this).toggleClass('active sticky-top'); + }); + {{/if}} + {{/foreach}} + + function getData(b64mid, notify_id) { + $('.thread-wrapper').remove(); + bParam_mid = b64mid; + mode = 'replace'; + page_load = true; + {{if $module == 'hq'}} + liveUpdate(notify_id); + {{/if}} + {{if $module == 'display'}} + liveUpdate(); + {{/if}} } -</style> +</script> + {{if $module == 'display'}} <script> @@ -52,9 +109,12 @@ {{if $notifications}} <div id="notifications_wrapper"> + <div id="no_notifications" class="d-xl-none"> + {{$no_notifications}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span> + </div> <div id="notifications" class="navbar-nav" data-children=".nav-item"> <div id="nav-notifications-template" rel="template"> - <a class="list-group-item clearfix notification {5}" href="{0}" title="{2} {3}" data-b64mid="{6}"> + <a class="list-group-item clearfix notification {5}" href="{0}" title="{2} {3}" data-b64mid="{6}" data-notify_id="{7}" data-thread_top="{8}"> <img class="menu-img-3" data-src="{1}"> <span class="contactname">{2}</span> <span class="dropdown-sub-text">{3}<br>{4}</span> @@ -73,11 +133,16 @@ </a> {{/if}} {{if $notification.markall}} - <a class="list-group-item text-dark" id="nav-{{$notification.type}}-mark-all" href="{{$notification.markall.url}}" onclick="markRead('{{$notification.type}}'); return false;"> + <div class="list-group-item cursor-pointer" id="nav-{{$notification.type}}-mark-all" onclick="markRead('{{$notification.type}}'); return false;"> <i class="fa fa-fw fa-check"></i> {{$notification.markall.label}} - </a> + </div> + {{/if}} + {{if $notification.filter}} + <div class="list-group-item cursor-pointer" id="tt-{{$notification.type}}-only"> + <i class="fa fa-fw fa-filter"></i> {{$notification.filter.label}} + </div> {{/if}} - {{$loading}} + {{$loading}}<span class="jumping-dots"><span class="dot-1">.</span><span class="dot-2">.</span><span class="dot-3">.</span></span> </div> </div> {{/foreach}} |