From ad23d49ab76d4c056eb6f782c7703930b3266f62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=93=E3=81=B4=E3=81=AA=E3=81=9F=E3=81=BF=E3=81=BD?=
<syuilotan@yahoo.co.jp>
Date: Tue, 20 Feb 2018 06:40:31 +0900
Subject: [PATCH] wip
---
.../desktop/-tags/home-widgets/rss-reader.tag | 109 -----------------
.../desktop/views/components/widgets/rss.vue | 111 ++++++++++++++++++
2 files changed, 111 insertions(+), 109 deletions(-)
delete mode 100644 src/web/app/desktop/-tags/home-widgets/rss-reader.tag
create mode 100644 src/web/app/desktop/views/components/widgets/rss.vue
diff --git a/src/web/app/desktop/-tags/home-widgets/rss-reader.tag b/src/web/app/desktop/-tags/home-widgets/rss-reader.tag
deleted file mode 100644
index 4e0ed702e..000000000
--- a/src/web/app/desktop/-tags/home-widgets/rss-reader.tag
+++ /dev/null
@@ -1,109 +0,0 @@
-<mk-rss-reader-home-widget>
- <template v-if="!data.compact">
- <p class="title">%fa:rss-square%RSS</p>
- <button @click="settings" title="設定">%fa:cog%</button>
- </template>
- <div class="feed" v-if="!initializing">
- <template each={ item in items }><a href={ item.link } target="_blank">{ item.title }</a></template>
- </div>
- <p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
- <style lang="stylus" scoped>
- :scope
- display block
- background #fff
- border solid 1px rgba(0, 0, 0, 0.075)
- border-radius 6px
-
- > .title
- margin 0
- padding 0 16px
- line-height 42px
- font-size 0.9em
- font-weight bold
- color #888
- box-shadow 0 1px rgba(0, 0, 0, 0.07)
-
- > [data-fa]
- margin-right 4px
-
- > button
- position absolute
- top 0
- right 0
- padding 0
- width 42px
- font-size 0.9em
- line-height 42px
- color #ccc
-
- &:hover
- color #aaa
-
- &:active
- color #999
-
- > .feed
- padding 12px 16px
- font-size 0.9em
-
- > a
- display block
- padding 4px 0
- color #666
- border-bottom dashed 1px #eee
-
- &:last-child
- border-bottom none
-
- > .initializing
- margin 0
- padding 16px
- text-align center
- color #aaa
-
- > [data-fa]
- margin-right 4px
-
- </style>
- <script lang="typescript">
- this.data = {
- compact: false
- };
-
- this.mixin('widget');
-
- this.url = 'http://news.yahoo.co.jp/pickup/rss.xml';
- this.items = [];
- this.initializing = true;
-
- this.on('mount', () => {
- this.fetch();
- this.clock = setInterval(this.fetch, 60000);
- });
-
- this.on('unmount', () => {
- clearInterval(this.clock);
- });
-
- this.fetch = () => {
- fetch(`https://api.rss2json.com/v1/api.json?rss_url=${this.url}`, {
- cache: 'no-cache'
- }).then(res => {
- res.json().then(feed => {
- this.update({
- initializing: false,
- items: feed.items
- });
- });
- });
- };
-
- this.settings = () => {
- };
-
- this.func = () => {
- this.data.compact = !this.data.compact;
- this.save();
- };
- </script>
-</mk-rss-reader-home-widget>
diff --git a/src/web/app/desktop/views/components/widgets/rss.vue b/src/web/app/desktop/views/components/widgets/rss.vue
new file mode 100644
index 000000000..954edf3c5
--- /dev/null
+++ b/src/web/app/desktop/views/components/widgets/rss.vue
@@ -0,0 +1,111 @@
+<template>
+<div class="mkw-rss">
+ <template v-if="!props.compact">
+ <p class="title">%fa:rss-square%RSS</p>
+ <button title="設定">%fa:cog%</button>
+ </template>
+ <p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+ <div class="feed" v-else>
+ <a v-for="item in items" :href="item.link" target="_blank">{{ item.title }}</a>
+ </div>
+</div>
+</template>
+
+<script lang="ts">
+import define from '../../../../common/define-widget';
+export default define({
+ name: 'rss',
+ props: {
+ compact: false
+ }
+}).extend({
+ data() {
+ return {
+ url: 'http://news.yahoo.co.jp/pickup/rss.xml',
+ items: [],
+ fetching: true,
+ clock: null
+ };
+ },
+ mounted() {
+ this.fetch();
+ this.clock = setInterval(this.fetch, 60000);
+ },
+ beforeDestroy() {
+ clearInterval(this.clock);
+ },
+ methods: {
+ func() {
+ this.props.compact = !this.props.compact;
+ },
+ fetch() {
+ fetch(`https://api.rss2json.com/v1/api.json?rss_url=${this.url}`, {
+ cache: 'no-cache'
+ }).then(res => {
+ res.json().then(feed => {
+ this.items = feed.items;
+ this.fetching = false;
+ });
+ });
+ }
+ }
+});
+</script>
+
+<style lang="stylus" scoped>
+.mkw-rss
+ background #fff
+ border solid 1px rgba(0, 0, 0, 0.075)
+ border-radius 6px
+
+ > .title
+ margin 0
+ padding 0 16px
+ line-height 42px
+ font-size 0.9em
+ font-weight bold
+ color #888
+ box-shadow 0 1px rgba(0, 0, 0, 0.07)
+
+ > [data-fa]
+ margin-right 4px
+
+ > button
+ position absolute
+ top 0
+ right 0
+ padding 0
+ width 42px
+ font-size 0.9em
+ line-height 42px
+ color #ccc
+
+ &:hover
+ color #aaa
+
+ &:active
+ color #999
+
+ > .feed
+ padding 12px 16px
+ font-size 0.9em
+
+ > a
+ display block
+ padding 4px 0
+ color #666
+ border-bottom dashed 1px #eee
+
+ &:last-child
+ border-bottom none
+
+ > .fetching
+ margin 0
+ padding 16px
+ text-align center
+ color #aaa
+
+ > [data-fa]
+ margin-right 4px
+
+</style>