2017-05-24 20:52:23 +02:00
< ? php print_unescaped ( $this -> inc ( 'part.content.warnings' )) ?>
2014-05-23 20:19:06 +02:00
2014-09-12 19:40:16 +02:00
< div news - auto - focus = " #app-content "
2014-10-20 17:24:42 +02:00
id = " articles "
2014-10-21 18:19:23 +02:00
ng - class = " {
compact : Content . isCompactView (),
'feed-view' : Content . isFeed ()
2014-12-03 10:40:41 +01:00
} "
2018-01-25 10:02:32 +01:00
news - compact - expand = " { { Content.isCompactExpand() }} "
class = " app-content-detail " >
2014-11-19 19:39:59 +01:00
< div ng - show = " Content.getItems().length == 0 " class = " no-feeds-available " >
2014-11-19 17:09:23 +01:00
< p ng - show = " Content.isShowAll() " >< ? php p ( $l -> t ( 'No articles available' )) ?> </p>
< p ng - show = " !Content.isShowAll() " >< ? php p ( $l -> t ( 'No unread articles available' )) ?> </p>
</ div >
2019-05-11 10:08:14 +02:00
< button ng - controller = " NavigationController as Navigation " id = " mark-all-read-button " ng - click = " Navigation.markCurrentRead() " class = " hidden " >
< span title = " Mark Read " class = " icon-checkmark " ></ span >
</ button >
2014-09-09 22:21:40 +02:00
< ul >
2014-11-17 14:16:50 +01:00
< li class = " item { { ::Content.getFeed(item.feedId).cssClass }} "
2014-10-21 18:19:23 +02:00
ng - repeat = " item in Content.getItems() |
2021-02-09 07:11:33 +01:00
orderBy : 'id' : Content . oldestFirst : Content . sortIds track by item . id "
2015-06-02 09:49:12 +02:00
ng - mouseup = " Content.markRead(item.id) "
2016-04-18 21:18:13 +02:00
ng - click = " Content.markRead(item.id); Content.setItemActive(item.id) "
news - on - active = " Content.setItemActive(item.id) "
ng - class = " { read: !item.unread, open: item.show, active: Content.isItemActive(item.id)} "
2014-11-17 14:16:50 +01:00
data - id = " { { ::item.id }} " >
2021-03-17 00:33:29 +01:00
< div class = " utils "
2021-03-17 00:54:08 +01:00
ng - click = " Content.toggleItem(item) "
ng - class = " { 'compact-dropdown': Content.showDropdown[item.id]} " >
2014-09-09 23:44:25 +02:00
< ul >
2014-09-14 22:16:26 +02:00
< li class = " util-spacer " ></ li >
2021-08-21 10:14:45 +02:00
< li class = " util only-in-compact " >
< a class = " external icon-link "
ng - click = " Content.markRead(item.id) "
target = " _blank "
rel = " noreferrer "
ng - href = " { { ::item.url }} "
title = " <?php p( $l->t ('Open website')) ?> "
news - stop - propagation >
</ a >
</ li >
2014-09-13 19:46:40 +02:00
< li class = " title only-in-compact "
2014-10-21 18:19:23 +02:00
ng - class = " {
'icon-rss' :
! Content . getFeed ( item . feedId ) . faviconLink
} "
ng - style = " {
backgroundImage :
'url('
+ Content . getFeed ( item . feedId ) . faviconLink +
')'
} " >
2020-05-11 09:44:16 +02:00
< h1 ng - attr - dir = " { { item.rtl && 'rtl'}} " >< a > {{ :: item . title }} < span class = " intro " news - bind - html - unsafe = " ::item.intro " ></ span ></ a ></ h1 >
2014-09-13 20:13:51 +02:00
</ li >
< li class = " only-in-compact " >
2014-10-21 18:19:23 +02:00
< time class = " date "
title = " { { item.pubDate*1000 |
date : 'yyyy-MM-dd HH:mm:ss' }} "
datetime = " { { item.pubDate*1000 |
date : 'yyyy-MM-ddTHH:mm:ssZ' }} " >
2021-07-16 14:40:04 +02:00
{{ item . pubDate * 1000 | relativeTimestamp }}
2014-09-13 20:13:51 +02:00
</ time >
2014-09-10 17:52:07 +02:00
</ li >
2014-10-21 18:19:23 +02:00
< li ng - click = " Content.toggleStar(item.id) "
class = " util "
news - stop - propagation >
< button class = " star svg "
ng - hide = " item.starred "
title = " <?php p( $l->t ('Star article')); ?> " >
</ button >
< button class = " starred svg "
ng - show = " item.starred "
title = " <?php p( $l->t ('Unstar article')); ?> " >
</ button >
2014-09-09 23:44:25 +02:00
</ li >
2014-10-21 18:19:23 +02:00
< li ng - click = " Content.toggleKeepUnread(item.id) "
2014-12-02 15:16:04 +01:00
class = " util toggle-keep-unread "
2014-10-21 18:19:23 +02:00
news - stop - propagation >
2014-12-02 15:16:04 +01:00
< button class = " icon-toggle "
2014-10-21 18:19:23 +02:00
ng - hide = " item.keepUnread "
title = " <?php p( $l->t ('Keep article unread')); ?> " >
</ button >
< button
2014-12-02 15:16:04 +01:00
class = " icon-toggle keep-unread "
2014-10-21 18:19:23 +02:00
ng - show = " item.keepUnread "
title = " <?php
p ( $l -> t ( 'Remove keep article unread' ));
?> ">
</ button >
2014-09-29 14:58:29 +02:00
</ li >
2021-03-14 22:11:24 +01:00
2021-03-17 00:33:29 +01:00
< li
2021-03-20 20:46:04 +01:00
class = " util "
2021-03-14 22:36:31 +01:00
news - stop - propagation >
2021-03-20 20:46:04 +01:00
< button class = " icon-share share "
2021-03-14 22:36:31 +01:00
title = " <?php p( $l->t ('Share')) ?> "
ng - click = " Content.openDropdown(item.id) " >
</ button >
2021-03-16 23:45:02 +01:00
</ li >
2020-12-09 20:16:29 +01:00
2015-09-20 16:38:10 +02:00
< li class = " util more " news - stop - propagation ng - hide = " noPlugins " >
2015-09-20 16:28:02 +02:00
< button class = " icon-more " news - toggle - show = " #actions- { { item.id}} " ></ button >
< div class = " article-actions " id = " actions- { { item.id}} " >
2019-07-07 09:46:12 +02:00
< ul news - article - actions = " item " no - plugins = " noPlugins " ></ ul >
2015-09-20 16:28:02 +02:00
</ div >
</ li >
2014-09-09 23:44:25 +02:00
</ ul >
2021-03-17 00:54:08 +01:00
<!-- Share dropdown -->
< ng - container click - outside = " Content.hide() " news - stop - propagation >
< div
ng - controller = " ShareController as Share "
ng - if = " Content.showDropdown[item.id] "
class = " dropdown-content "
news - stop - propagation >
<!-- Share with users -->
< p class = " label-group " >< ? php p ( $l -> t ( 'Share with users' )) ?> </p>
< form ng - submit = " "
name = " contactForm "
autocomplete = " off " >
< fieldset class = " contact-input " >
< input
ng - model = " nameQuery "
ng - model - options = " { debounce: 400} "
ng - change = " Share.searchUsers(nameQuery) "
type = " text "
placeholder = " <?php p( $l->t ('Username')) ?> "
title = " <?php p( $l->t ('Username')) ?> "
name = " contactName "
required
style = " width: 200px " >
< div ng - if = " App.loading.isLoading('user') "
ng - class = " { 'icon-loading-small': App.loading.isLoading('user') } " >
</ div >
</ fieldset >
</ form >
2021-03-20 20:46:04 +01:00
< div class = " dropdown-search-message "
2021-03-17 21:45:19 +01:00
ng - if = " Share.userList.length === 0 && nameQuery && !App.loading.isLoading('user') && !Share.searchUsersFailed " >
2021-03-17 00:54:08 +01:00
< ? php p ( $l -> t ( 'No users found' )) ?>
</ div >
2021-03-20 20:46:04 +01:00
< div class = " dropdown-search-message "
2021-03-17 21:45:19 +01:00
ng - if = " Share.userList.length === 0 && Share.searchUsersFailed " >
< ? php p ( $l -> t ( 'Error while searching for users' )) ?>
</ div >
2021-03-17 00:54:08 +01:00
< a
ng - repeat = " user in Share.userList "
class = " icon-category-installed pr-3 "
ng - click = " Share.shareItem(item.id, user.value.shareWith) " >
{{ user . label }}
2021-03-20 20:46:04 +01:00
< span class = " share-status-icon "
2021-03-17 00:54:08 +01:00
ng - class = " { 'icon-loading-small': Share.isLoading(user.value.shareWith), 'icon-checkmark': Share.isStatus(item.id, user.value.shareWith, true), 'icon-close': Share.isStatus(item.id, user.value.shareWith, false)} " >
</ span >
</ a >
2021-03-20 20:26:39 +01:00
< div ng - if = " Share.isAnySocialAppEnabled() " >
< p class = " label-group " > < ? php p ( $l -> t ( 'Share on social media' )) ?> </p>
< div class = " row " >
< div ng - if = " Share.isSocialAppEnabled('facebook') " class = " col-4 " >
< a target = " _blank "
class = " icon-dropdown icon-facebook pr-5 "
2021-04-08 23:05:29 +02:00
ng - href = " { { Share.getFacebookUrl(item.url) }} " ></ a >
2021-03-20 20:26:39 +01:00
</ div >
< div ng - if = " Share.isSocialAppEnabled('twitter') " class = " col-4 " >
< a target = " _blank "
class = " icon-dropdown icon-twitter pr-5 "
2021-04-08 23:05:29 +02:00
ng - href = " { { Share.getTwitterUrl(item.url) }} " ></ a >
2021-03-20 20:26:39 +01:00
</ div >
< div ng - if = " Share.isSocialAppEnabled('email') " class = " col-4 " >
< a class = " icon-dropdown icon-mail pr-5 "
2021-04-08 23:05:29 +02:00
ng - href = " { { Share.getEmailUrl(item.url, '<?php p( $l->t ('I wanted you to see this article')) ?>', '<?php p( $l->t ('Check out this article')) ?>') }} " ></ a >
2021-03-20 20:26:39 +01:00
</ div >
2021-03-17 00:54:08 +01:00
</ div >
</ div >
</ div >
2021-03-17 22:47:56 +01:00
</ ng - container >
2021-03-17 00:54:08 +01:00
<!-- End share dropdown -->
2014-09-09 23:44:25 +02:00
</ div >
2014-09-09 22:21:40 +02:00
2015-05-08 09:36:22 +02:00
< div class = " article " ng - if = " !Content.isCompactView() || item.show " >
2014-09-09 22:21:40 +02:00
2014-09-13 19:46:40 +02:00
< div class = " heading only-in-expanded " >
2014-10-21 18:19:23 +02:00
< time class = " date "
title = " { { item.pubDate*1000 |
date : 'yyyy-MM-dd HH:mm:ss' }} "
datetime = " { { item.pubDate*1000 |
date : 'yyyy-MM-ddTHH:mm:ssZ' }} " >
2021-07-16 14:40:04 +02:00
{{ item . pubDate * 1000 | relativeTimestamp }}
2014-10-21 18:19:23 +02:00
</ time >
2015-08-31 16:11:51 +02:00
< h1 ng - attr - dir = " { { item.rtl && 'rtl'}} " >
2014-09-18 17:01:29 +02:00
< a class = " external "
target = " _blank "
2015-01-06 17:06:22 +01:00
rel = " noreferrer "
2014-11-17 14:16:50 +01:00
ng - href = " { { ::item.url }} "
title = " { { ::item.title }} " >
{{ :: item . title }}
2014-09-18 17:01:29 +02:00
</ a >
</ h1 >
2014-09-13 19:46:40 +02:00
</ div >
2015-08-31 16:11:51 +02:00
< div class = " subtitle " ng - attr - dir = " { { item.rtl && 'rtl'}} " >
2014-10-21 18:19:23 +02:00
< span class = " author " ng - show = " item.author " >
2014-11-17 14:16:50 +01:00
< ? php p ( $l -> t ( 'by' )) ?> {{ ::item.author }}
2014-10-21 18:19:23 +02:00
</ span >
2021-03-07 00:23:38 +01:00
< span ng - if = " !item.sharedBy " class = " source " >< ? php p ( $l -> t ( 'from' )) ?>
2021-04-08 23:05:29 +02:00
< a ng - href = " #/items/feeds/ { { ::item.feedId }}/ " >
2014-11-17 14:16:50 +01:00
{{ :: Content . getFeed ( item . feedId ) . title }}
2021-08-20 14:27:09 +02:00
< img ng - if = " Content.getFeed(item.feedId).faviconLink && !Content.isCompactView() " ng - src = " { { ::Content.getFeed(item.feedId).faviconLink }} " alt = " favicon " >
2014-10-21 18:19:23 +02:00
</ a >
</ span >
2021-03-13 23:38:38 +01:00
< span ng - if = " item.sharedBy " >
< span ng - if = " item.author " >-</ span >
< ? php p ( $l -> t ( 'shared by' )) ?>
2021-03-19 00:00:11 +01:00
{{ :: item . sharedByDisplayName }}
2021-01-26 18:14:05 +01:00
</ span >
2014-09-13 19:46:40 +02:00
</ div >
2019-11-10 08:19:05 +01:00
< div class = " enclosure " ng - if = " Content.getMediaType(item.enclosureMime) == 'audio' " >
< button ng - click = " App.play(item) " >< ? php p ( $l -> t ( 'Play audio' )) ?> </button>
< a class = " button " ng - href = " { { item.enclosureLink|trustUrl }} " target = " _blank " rel = " noreferrer " >
< ? php p ( $l -> t ( 'Download audio' )) ?>
</ a >
</ div >
< div class = " enclosure " ng - if = " Content.getMediaType(item.enclosureMime) == 'video' " >
< video controls preload = " none " news - play - one ng - src = " { { item.enclosureLink|trustUrl }} " type = " { { item.enclosureMime }} " >
2015-03-30 16:20:05 +02:00
</ video >
2019-11-10 08:19:05 +01:00
< a class = " button " ng - href = " { { item.enclosureLink|trustUrl }} " target = " _blank " rel = " noreferrer " >
2015-03-30 16:20:05 +02:00
< ? php p ( $l -> t ( 'Download video' )) ?>
</ a >
2014-09-09 23:44:25 +02:00
</ div >
2014-09-09 22:21:40 +02:00
2020-02-16 14:26:06 +01:00
< div class = " enclosure thumbnail " ng - if = " item.mediaThumbnail " >
< a ng - href = " { { ::item.enclosureLink }} " >< img ng - src = " { { item.mediaThumbnail|trustUrl }} " alt = " " /></ a >
</ div >
< div class = " enclosure description " ng - if = " item.mediaDescription " news - bind - html - unsafe = " item.mediaDescription " ></ div >
2015-08-26 13:03:55 +02:00
< div class = " body " news - bind - html - unsafe = " item.body " ng - attr - dir = " { { item.rtl && 'rtl'}} " ></ div >
2014-05-30 15:14:07 +02:00
2014-09-09 23:44:25 +02:00
</ div >
</ li >
2014-05-23 20:19:06 +02:00
</ ul >
</ div >