From c4e76b0c8912470efa5484b331b823ee2be4375c Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 26 May 2017 16:12:52 +0900
Subject: [PATCH] #192

---
 src/web/app/mobile/tags/home-timeline.tag  |   7 +
 src/web/app/mobile/tags/index.js           |   1 +
 src/web/app/mobile/tags/init-following.tag | 169 +++++++++++++++++++++
 3 files changed, 177 insertions(+)
 create mode 100644 src/web/app/mobile/tags/init-following.tag

diff --git a/src/web/app/mobile/tags/home-timeline.tag b/src/web/app/mobile/tags/home-timeline.tag
index 34cea212b..c5aeacd4d 100644
--- a/src/web/app/mobile/tags/home-timeline.tag
+++ b/src/web/app/mobile/tags/home-timeline.tag
@@ -1,14 +1,21 @@
 <mk-home-timeline>
+	<mk-init-following if={ noFollowing } />
 	<mk-timeline ref="timeline" init={ init } more={ more } empty={ '%i18n:mobile.tags.mk-home-timeline.empty-timeline%' }></mk-timeline>
 	<style>
 		:scope
 			display block
+
+			> mk-init-following
+				border-bottom solid 1px #eee
+
 	</style>
 	<script>
 		this.mixin('i');
 		this.mixin('api');
 		this.mixin('stream');
 
+		this.noFollowing = this.I.following_count == 0;
+
 		this.init = new Promise((res, rej) => {
 			this.api('posts/timeline').then(posts => {
 				res(posts);
diff --git a/src/web/app/mobile/tags/index.js b/src/web/app/mobile/tags/index.js
index 3797e1a15..02d1541fc 100644
--- a/src/web/app/mobile/tags/index.js
+++ b/src/web/app/mobile/tags/index.js
@@ -49,3 +49,4 @@ require('./user-preview.tag');
 require('./users-list.tag');
 require('./user-following.tag');
 require('./user-followers.tag');
+require('./init-following.tag');
diff --git a/src/web/app/mobile/tags/init-following.tag b/src/web/app/mobile/tags/init-following.tag
new file mode 100644
index 000000000..e7388972a
--- /dev/null
+++ b/src/web/app/mobile/tags/init-following.tag
@@ -0,0 +1,169 @@
+<mk-init-following>
+	<p class="title">気になるユーザーをフォロー:</p>
+	<div class="users" if={ !fetching && users.length > 0 }>
+		<div class="user" each={ users }><a class="avatar-anchor" href={ '/' + username }><img class="avatar" src={ avatar_url + '?thumbnail&size=42' } alt=""/></a>
+			<div class="body"><a class="name" href={ '/' + username } target="_blank">{ name }</a>
+				<p class="username">@{ username }</p>
+			</div>
+			<mk-follow-button user={ this }></mk-follow-button>
+		</div>
+	</div>
+	<p class="empty" if={ !fetching && users.length == 0 }>おすすめのユーザーは見つかりませんでした。</p>
+	<p class="fetching" if={ fetching }><i class="fa fa-spinner fa-pulse fa-fw"></i>読み込んでいます
+		<mk-ellipsis></mk-ellipsis>
+	</p><a class="refresh" onclick={ refresh }>もっと見る</a>
+	<button class="close" onclick={ close } title="閉じる"><i class="fa fa-times"></i></button>
+	<style>
+		:scope
+			display block
+			padding 16px
+
+			> .title
+				margin 0 0 12px 0
+				font-size 1em
+				font-weight bold
+				color #888
+
+			> .users
+				&:after
+					content ""
+					display block
+					clear both
+
+				> .user
+					padding 16px
+					width 238px
+					float left
+
+					&:after
+						content ""
+						display block
+						clear both
+
+					> .avatar-anchor
+						display block
+						float left
+						margin 0 12px 0 0
+
+						> .avatar
+							display block
+							width 42px
+							height 42px
+							margin 0
+							border-radius 8px
+							vertical-align bottom
+
+					> .body
+						float left
+						width calc(100% - 54px)
+
+						> .name
+							margin 0
+							font-size 16px
+							line-height 24px
+							color #555
+
+						> .username
+							margin 0
+							font-size 15px
+							line-height 16px
+							color #ccc
+
+					> mk-follow-button
+						position absolute
+						top 16px
+						right 16px
+
+			> .empty
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+			> .fetching
+				margin 0
+				padding 16px
+				text-align center
+				color #aaa
+
+				> i
+					margin-right 4px
+
+			> .refresh
+				display block
+				margin 0 8px 0 0
+				text-align right
+				font-size 0.9em
+				color #999
+
+			> .close
+				cursor pointer
+				display block
+				position absolute
+				top 0
+				right 0
+				z-index 1
+				margin 0
+				padding 0
+				font-size 1.2em
+				color #999
+				border none
+				outline none
+				background transparent
+
+				&:hover
+					color #555
+
+				&:active
+					color #222
+
+				> i
+					padding 14px
+
+	</style>
+	<script>
+		this.mixin('api');
+
+		this.users = null;
+		this.fetching = true;
+
+		this.limit = 6;
+		this.page = 0;
+
+		this.on('mount', () => {
+			this.fetch();
+		});
+
+		this.fetch = () => {
+			this.update({
+				fetching: true,
+				users: null
+			});
+
+			this.api('users/recommendation', {
+				limit: this.limit,
+				offset: this.limit * this.page
+			}).then(users => {
+				this.fetching = false
+				this.users = users
+				this.update({
+					fetching: false,
+					users: users
+				});
+			});
+		};
+
+		this.refresh = () => {
+			if (this.users.length < this.limit) {
+				this.page = 0;
+			} else {
+				this.page++;
+			}
+			this.fetch();
+		};
+
+		this.close = () => {
+			this.unmount();
+		};
+	</script>
+</mk-init-following>