Vue Rewrite

Signed-off-by: Sean Molenaar <sean@seanmolenaar.eu>

14 files changed, 11 insertions, 1332 deletions

diff --git a/templates/admin.php b/templates/admin.php
deleted file mode 100644
index d85af3f83..000000000
--- a/templates/admin.php
+++ /dev/null
@@ -1,132 +0,0 @@
-<?php
-script('news', 'admin/Admin');
-style('news', 'admin');
-?>
-
-<div class="section" id="news">
-    <h2>News</h2>
-    <div class="form-line">
-        <p><input type="checkbox" name="news-use-cron-updates"
-               <?php if ($_['useCronUpdates']) p('checked'); ?>>
-            <label for="news-use-cron-updates">
-                <?php p($l->t('Use system cron for updates')); ?>
-            </label>
-        </p>
-        <p>
-            <em><?php p($l->t(
-                'Disable this if you use a custom updater.'
-            )); ?></em>
-        </p>
-    </div>
-    <div class="form-line">
-        <p>
-            <label for="news-auto-purge-minimum-interval">
-                <?php p($l->t('Purge interval')); ?></p>
-            </label>
-        <p>
-            <em>
-            <?php p($l->t(
-                'Minimum amount of seconds after deleted feeds and folders ' .
-                'are removed from the database; values below 60 seconds are ' .
-                'ignored.'
-            )); ?></em>
-        </p>
-        <p><input type="text" name="news-auto-purge-minimum-interval"
-               value="<?php p($_['autoPurgeMinimumInterval']); ?>"></p>
-    </div>
-    <div class="form-line">
-        <p>
-            <label for="news-auto-purge-count">
-                <?php p($l->t('Maximum read count per feed')); ?>
-            </label>
-        </p>
-        <p>
-            <em>
-            <?php p($l->t(
-                'Defines the maximum amount of articles that can be read per ' .
-                "feed which won't be deleted by the cleanup job; ".
-                'if old articles reappear after being read, increase ' .
-                'this value; negative values such as -1 will turn this ' .
-                'feature off.'
-            )); ?></em>
-        </p>
-        <p><input type="text" name="news-auto-purge-count"
-               value="<?php p($_['autoPurgeCount']); ?>"></p>
-    </div>
-    <div class="form-line">
-        <p>
-            <label for="news-max-redirects">
-                <?php p($l->t('Maximum redirects')); ?>
-            </label>
-        </p>
-        <p>
-            <em>
-                <?php p($l->t(
-                    'How many redirects the feed fetcher should follow.'
-                )); ?>
-            </em>
-        </p>
-        <p><input type="text" name="news-max-redirects"
-               value="<?php p($_['maxRedirects']); ?>"></p>
-    </div>
-    <div class="form-line">
-        <p>
-            <label for="news-feed-fetcher-timeout">
-                <?php p($l->t('Feed fetcher timeout')); ?>
-            </label>
-        </p>
-        <p>
-            <em>
-            <?php p($l->t(
-                'Maximum number of seconds to wait for an RSS or Atom feed ' .
-                'to load; if it takes longer the update will be aborted.'
-            )); ?></em>
-        </p>
-        <p><input type="text" name="news-feed-fetcher-timeout"
-               value="<?php p($_['feedFetcherTimeout']); ?>"></p>
-    </div>
-    <div class="form-line">
-        <p>
-            <label for="news-explore-url">
-                <?php p($l->t('Explore Service URL')); ?>
-            </label>
-        </p>
-        <p>
-            <em>
-                <?php p($l->t(
-                    'If given, this service\'s URL will be queried for ' .
-                    'displaying the feeds in the explore feed section. To ' .
-                    'fall back to the built in explore service, leave this ' .
-                    'input empty.'
-                )); ?>
-            </em>
-            <a href="https://nextcloud.github.io/news/admin/"><?php p($l->t(
-                'For more information check the wiki.'
-            )); ?></a>
-        </p>
-        <p><input type="text" name="news-explore-url"
-               value="<?php p($_['exploreUrl']); ?>"></p>
-    </div>
-    <div class="form-line">
-        <p>
-            <label for="news-updater-interval">
-                <?php p($l->t('Update interval')); ?>
-            </label>
-        </p>
-        <p>
-            <em>
-                <?php p($l->t(
-                    'Interval in seconds in which the feeds will be updated.'
-                )); ?>
-            </em>
-            <a href="https://nextcloud.github.io/news/admin/"><?php p($l->t(
-                'For more information check the documentation.'
-            )); ?></a>
-        </p>
-        <p><input type="text" name="news-update-interval"
-               value="<?php p($_['updateInterval']); ?>"></p>
-    </div>
-    <div id="news-saved-message">
-        <span class="msg success"><?php p($l->t('Saved')); ?></span>
-    </div>
-</div>
diff --git a/templates/index.php b/templates/index.php
index 9ad38a0d5..561bf361b 100644
--- a/templates/index.php
+++ b/templates/index.php
@@ -1,99 +1,14 @@
 <?php
-use OCA\News\Plugin\Client\Plugin;
-
-script('news', [
-    'build/app.min'
-]);
-
-style('news', [
-    'app',
-    'content',
-    'custom',
-    'explore',
-    'mobile',
-    'navigation',
-    'settings',
-    'shortcuts'
-]);
-
-// load plugin scripts and styles
-foreach (Plugin::getStyles() as $appName => $fileName) {
-    style($appName, $fileName);
-}
-foreach (Plugin::getScripts() as $appName => $fileName) {
-    script($appName, $fileName);
-}
+script('news', 'nextcloud-news-main');
+style('news', 'navigation');
+style('news', 'explore');
+style('news', 'admin');
+style('news', 'app');
+style('news', 'content');
+style('news', 'custom');
+style('news', 'mobile');
+style('news', 'settings');
+style('news', 'shortcuts');
 ?>
 
-    <div id="global-loading"
-        class="icon-loading"
-        ngCloak
-        ng-show="App.loading.isLoading('global')"></div>
-
-    <!-- content -->
-    <script type="text/ng-template" id="content.html">
-        <?php print_unescaped($this->inc('part.content')) ?>
-    </script>
-    <script type="text/ng-template" id="shortcuts.html">
-        <?php print_unescaped($this->inc('part.content.shortcuts')) ?>
-    </script>
-    <script type="text/ng-template" id="explore.html">
-        <?php print_unescaped($this->inc('part.content.explore')) ?>
-    </script>
-
-    <!-- navigation -->
-    <div id="app-navigation"
-        ng-controller="NavigationController as Navigation"
-        ng-hide="App.loading.isLoading('global')">
-
-        <news-search on-search="Navigation.search"></news-search>
-        <news-title-unread-count
-            unread-count="{{ Navigation.getUnreadCount() }}">
-        </news-title-unread-count>
-
-        <ul class="with-icon" data-id="0" news-droppable>
-            <?php print_unescaped($this->inc('part.navigation.addfeed')) ?>
-            <?php print_unescaped($this->inc('part.navigation.addfolder')) ?>
-            <?php print_unescaped($this->inc('part.navigation.unreadfeed')) ?>
-            <?php print_unescaped($this->inc('part.navigation.starredfeed')) ?>
-            <?php print_unescaped($this->inc(
-                'part.navigation.feed', ['folderId' => 'null']
-            )) ?>
-            <?php print_unescaped($this->inc('part.navigation.folder')) ?>
-            <?php print_unescaped($this->inc('part.navigation.explore')) ?>
-        </ul>
-
-        <!-- settings -->
-        <div id="app-settings" ng-controller="SettingsController as Settings">
-            <?php print_unescaped($this->inc('part.settings')) ?>
-        </div>
-    </div>
-
-    <div id="app-content"
-        ng-class="{
-            'loading-content': App.loading.isLoading('content') &&
-                               !App.loading.isLoading('global'),
-            'explore': App.isFirstRun()
-        }"
-        tabindex="-1"
-        news-pull-to-refresh="showPullToRefresh">
-        <div class="podcast" news-sticky-menu="#app-content" ng-if="App.playingItem">
-            <audio controls autoplay ng-src="{{ App.playingItem.enclosureLink|trustUrl }}" news-play-one></audio>
-            <a class="button podcast-download" title="<?php p($l->t('Download')) ?>"
-                ng-href="{{ App.playingItem.enclosureLink|trustUrl }}"
-                target="_blank"
-                rel="noreferrer"></a>
-            <button class="podcast-close" title="<?php p($l->t('Close')) ?>"
-                ng-click="App.playingItem = false"></button>
-        </div>
-        <div id="app-content-wrapper"
-            ng-class="{
-                'autopaging': App.loading.isLoading('autopaging'),
-                'finished-auto-paging': Content.isNothingMoreToAutoPage
-            }"
-            ng-hide="App.loading.isLoading('global')"
-            ng-view
-            news-scroll
-            news-scroll-enabled-mark-read="Content.markReadEnabled()"
-            news-scroll-auto-page="Content.autoPage()"
-            news-scroll-mark-read="Content.scrollRead(itemIds)"></div>
+<div id="q-app"></div>
diff --git a/templates/part.content.explore.php b/templates/part.content.explore.php
deleted file mode 100644
index 28f4e5d23..000000000
--- a/templates/part.content.explore.php
+++ /dev/null
@@ -1,26 +0,0 @@
-<?php print_unescaped($this->inc('part.content.warnings')) ?>
-
-<div id="explore">
-    <div class="grid">
-        <div ng-repeat="entry in Explore.feeds | filter:Explore.filter | orderBy:'-votes'" ng-show="!Explore.feedExists(entry.feed)" class="explore-feed grid-item" news-refresh-masonry>
-            <h2 ng-show="entry.favicon"
-				class="explore-title"
-                ng-style="{ backgroundImage: 'url(' + entry.favicon + ')'}">
-                <a target="_blank" rel="noreferrer" ng-href="{{ entry.url }}">{{ entry.title }}</a>
-            </h2>
-            <h2 ng-hide="entry.favicon" class="icon-rss explore-title">
-                {{ entry.title }}
-            </h2>
-            <div class="explore-content">
-                <p>{{ entry.description }}</p>
-
-                <div ng-if="entry.image" class="explore-logo">
-                    <img ng-src="{{ entry.image }}" >
-                </div>
-            </div>
-            <button class="explore-subscribe" ng-click="Explore.subscribeTo(entry.feed)">
-                <?php p($l->t('Subscribe to')) ?> {{ entry.title }}
-            </button>
-        </div>
-    </div>
-</div>
diff --git a/templates/part.content.php b/templates/part.content.php
deleted file mode 100644
index 6250fefb5..000000000
--- a/templates/part.content.php
+++ /dev/null
@@ -1,243 +0,0 @@
-<?php print_unescaped($this->inc('part.content.warnings')) ?>
-
-<div news-auto-focus="#app-content"
-    id="articles"
-     ng-class="{
-        compact: Content.isCompactView(),
-        'feed-view': Content.isFeed()
-    }"
-    news-compact-expand="{{ Content.isCompactExpand() }}"
-    class="app-content-detail">
-    <div ng-show="Content.getItems().length == 0" class="no-feeds-available">
-        <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>
-    <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>
-
-    <ul>
-        <li class="item {{ ::Content.getFeed(item.feedId).cssClass }}"
-            ng-repeat="item in Content.getItems() |
-                orderBy:'id':Content.oldestFirst:Content.sortIds track by item.id"
-            ng-mouseup="Content.markRead(item.id)"
-            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)}"
-            data-id="{{ ::item.id }}">
-            <div class="utils"
-                ng-click="Content.toggleItem(item)"
-                ng-class="{'compact-dropdown': Content.showDropdown[item.id]}">
-                <ul>
-                    <li class="util-spacer"></li>
-                    <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>
-                    <li class="title only-in-compact"
-                        ng-class="{
-                            'icon-rss':
-                                !Content.getFeed(item.feedId).faviconLink
-                        }"
-                        ng-style="{
-                            backgroundImage:
-                                'url('
-                                    + Content.getFeed(item.feedId).faviconLink +
-                                ')'
-                            }">
-                        <h1 ng-attr-dir="{{item.rtl && 'rtl'}}"><a>{{ ::item.title }} <span class="intro" news-bind-html-unsafe="::item.intro"></span></a></h1>
-                    </li>
-                    <li class="only-in-compact">
-                        <time class="date"
-                                title="{{ item.pubDate*1000 |
-                                            date:'yyyy-MM-dd HH:mm:ss' }}"
-                            datetime="{{ item.pubDate*1000 |
-                                            date:'yyyy-MM-ddTHH:mm:ssZ' }}">
-                                {{ item.pubDate*1000 | relativeTimestamp }}
-                        </time>
-                    </li>
-                    <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>
-                    </li>
-                    <li ng-click="Content.toggleKeepUnread(item.id)"
-                        class="util toggle-keep-unread"
-                        news-stop-propagation>
-                        <button class="icon-toggle"
-                            ng-hide="item.keepUnread"
-                            title="<?php p($l->t('Keep article unread')); ?>">
-                        </button>
-                        <button
-                            class="icon-toggle keep-unread"
-                            ng-show="item.keepUnread"
-                            title="<?php
-                                p($l->t('Remove keep article unread'));
-                            ?>">
-                        </button>
-                    </li>
-
-                    <li
-                        class="util"
-                        news-stop-propagation>
-                        <button class="icon-share share"
-                            title="<?php p($l->t('Share')) ?>"
-                            ng-click="Content.openDropdown(item.id)">
-                        </button>
-                    </li>
-
-                    <li class="util more" news-stop-propagation ng-hide="noPlugins">
-                        <button class="icon-more" news-toggle-show="#actions-{{item.id}}"></button>
-                        <div class="article-actions" id="actions-{{item.id}}">
-                            <ul news-article-actions="item" no-plugins="noPlugins"></ul>
-                        </div>
-                    </li>
-                </ul>
-                <!-- 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>
-
-                        <div class="dropdown-search-message"
-                            ng-if="Share.userList.length === 0 && nameQuery && !App.loading.isLoading('user') && !Share.searchUsersFailed">
-                            <?php p($l->t('No users found')) ?>
-                        </div>
-                        <div class="dropdown-search-message"
-                            ng-if="Share.userList.length === 0 && Share.searchUsersFailed">
-                            <?php p($l->t('Error while searching for users')) ?>
-                        </div>
-                        <a
-                            ng-repeat="user in Share.userList"
-                            class="icon-category-installed pr-3"
-                            ng-click="Share.shareItem(item.id, user.value.shareWith)">
-                            {{ user.label }}
-                            <span class="share-status-icon"
-                                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>
-
-                        <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"
-                                        ng-href="{{ Share.getFacebookUrl(item.url) }}"></a>
-                                </div>
-                                <div ng-if="Share.isSocialAppEnabled('twitter')" class="col-4">
-                                    <a target="_blank"
-                                        class="icon-dropdown icon-twitter pr-5"
-                                        ng-href="{{ Share.getTwitterUrl(item.url) }}"></a>
-                                </div>
-                                <div ng-if="Share.isSocialAppEnabled('email')" class="col-4">
-                                    <a class="icon-dropdown icon-mail pr-5"
-                                        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>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </ng-container>
-                <!-- End share dropdown -->
-            </div>
-
-            <div class="article" ng-if="!Content.isCompactView() || item.show">
-
-                <div class="heading only-in-expanded">
-                    <time class="date"
-                          title="{{ item.pubDate*1000 |
-                            date:'yyyy-MM-dd HH:mm:ss' }}"
-                          datetime="{{ item.pubDate*1000 |
-                            date:'yyyy-MM-ddTHH:mm:ssZ' }}">
-                        {{ item.pubDate*1000 | relativeTimestamp }}
-                    </time>
-                    <h1 ng-attr-dir="{{item.rtl && 'rtl'}}">
-                        <a class="external"
-                            target="_blank"
-                            rel="noreferrer"
-                            ng-href="{{ ::item.url }}"
-                            title="{{ ::item.title }}">
-                            {{ ::item.title }}
-                        </a>
-                    </h1>
-                </div>
-
-                <div class="subtitle" ng-attr-dir="{{item.rtl && 'rtl'}}">
-                    <span class="author" ng-show="item.author">
-                        <?php p($l->t('by')) ?> {{ ::item.author }}
-                    </span>
-                    <span ng-if="!item.sharedBy" class="source"><?php p($l->t('from')) ?>
-                        <a ng-href="#/items/feeds/{{ ::item.feedId }}/">
-                            {{ ::Content.getFeed(item.feedId).title }}
-                            <img ng-if="Content.getFeed(item.feedId).faviconLink && !Content.isCompactView()" ng-src="{{ ::Content.getFeed(item.feedId).faviconLink }}" alt="favicon">
-                        </a>
-                    </span>
-                    <span ng-if="item.sharedBy">
-                        <span ng-if="item.author">-</span>
-                        <?php p($l->t('shared by')) ?>
-                        {{ ::item.sharedByDisplayName }}
-                    </span>
-                </div>
-
-                <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 }}">
-                    </video>
-                    <a class="button" ng-href="{{ item.enclosureLink|trustUrl }}" target="_blank" rel="noreferrer">
-                        <?php p($l->t('Download video')) ?>
-                    </a>
-                </div>
-
-                <div class="enclosure thumbnail" ng-