From 8fd6f24ee6665124aadec5712591ae0a8375e602 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 21 Feb 2017 18:36:43 +0900
Subject: [PATCH] wip

---
 .../desktop/tags/home-widgets/calendar.tag    |  48 ++++----
 .../desktop/tags/home-widgets/mentions.tag    |  94 ++++++++-------
 src/web/app/desktop/tags/home-widgets/nav.tag |   4 -
 .../tags/home-widgets/notifications.tag       |   5 +-
 .../tags/home-widgets/photo-stream.tag        |  35 +++---
 .../app/desktop/tags/home-widgets/profile.tag |  10 +-
 .../desktop/tags/home-widgets/rss-reader.tag  |  34 +++---
 .../desktop/tags/home-widgets/timeline.tag    | 109 ++++++++++--------
 .../app/desktop/tags/home-widgets/tips.tag    |  43 +++----
 .../tags/home-widgets/user-recommendation.tag |  56 +++++----
 10 files changed, 231 insertions(+), 207 deletions(-)

diff --git a/src/web/app/desktop/tags/home-widgets/calendar.tag b/src/web/app/desktop/tags/home-widgets/calendar.tag
index acf8e8c734..2a455edff9 100644
--- a/src/web/app/desktop/tags/home-widgets/calendar.tag
+++ b/src/web/app/desktop/tags/home-widgets/calendar.tag
@@ -108,41 +108,43 @@
 	<script>
 		this.draw = () => {
 			const now = new Date();
-			nd = now.getDate()
-			nm = now.getMonth()
-			ny = now.getFullYear()
+			const nd = now.getDate();
+			const nm = now.getMonth();
+			const ny = now.getFullYear();
 
-			this.year = ny
-			this.month = nm + 1
-			this.day = nd
-			this.week-day = [\日 '月' \火 '水' \木 '金' \土][now.get-day!]
+			this.year = ny;
+			this.month = nm + 1;
+			this.day = nd;
+			this.weekDay = ['日', '月', '火', '水' '木', '金', '土'][now.getDay()];
 
-			@day-numer   = (now - (new Date ny, nm, nd))
-			@day-denom   = 1000ms * 60s * 60m * 24h
-			this.month-numer = (now - (new Date ny, nm, 1))
-			this.month-denom = (new Date ny, nm + 1,  1) - (new Date ny, nm, 1)
-			@year-numer  = (now - (new Date ny, 0, 1))
-			@year-denom  = (new Date ny + 1, 0,  1) - (new Date ny, 0, 1)
+			this.dayNumer   = now - new Date(ny, nm, nd);
+			this.dayDenom   = 1000/*ms*/ * 60/*s*/ * 60/*m*/ * 24/*h*/;
+			this.monthNumer = now - new Date(ny, nm, 1);
+			this.monthDenom = new Date(ny, nm + 1, 1) - new Date(ny, nm, 1);
+			this.yearNumer  = now - new Date(ny, 0, 1);
+			this.yearDenom  = new Date(ny + 1, 0, 1) - new Date(ny, 0, 1);
 
-			@day-p   = @day-numer   / @day-denom   * 100
-			this.month-p = @month-numer / @month-denom * 100
-			@year-p  = @year-numer  / @year-denom  * 100
+			this.dayP   = this.dayNumer   / this.dayDenom   * 100;
+			this.monthP = this.monthNumer / this.monthDenom * 100;
+			this.yearP  = this.yearNumer  / this.yearDenom  * 100;
 
-			this.is-holiday = 
-				(now.get-day! == 0 or now.get-day! == 6)
+			this.isHoliday = now.getDay() == 0 || now.getDay() == 6;
 
 			this.special = 
-				| nm == 0 and nd == 1 => 'on-new-years-day' 
-				| _ => false
+				nm == 0 && nd == 1 ? 'on-new-years-day' :
+				false;
 
 			this.update();
+		};
 
-		@draw!
+		this.draw();
 
 		this.on('mount', () => {
-			this.clock = setInterval @draw, 1000ms
+			this.clock = setInterval(this.draw, 1000);
+		});
 
 		this.on('unmount', () => {
-			clearInterval @clock
+			clearInterval(this.clock);
+		});
 	</script>
 </mk-calendar-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/mentions.tag b/src/web/app/desktop/tags/home-widgets/mentions.tag
index 4ae17647f7..6e6d891cbf 100644
--- a/src/web/app/desktop/tags/home-widgets/mentions.tag
+++ b/src/web/app/desktop/tags/home-widgets/mentions.tag
@@ -49,64 +49,70 @@
 		this.mixin('i');
 		this.mixin('api');
 
-		this.is-loading = true
-		this.is-empty = false
-		this.more-loading = false
-		this.mode = 'all' 
+		this.isLoading = true;
+		this.isEmpty = false;
+		this.moreLoading = false;
+		this.mode = 'all';
 
 		this.on('mount', () => {
-			document.addEventListener 'keydown' this.on-document-keydown
-			window.addEventListener 'scroll' this.on-scroll
+			document.addEventListener('keydown', this.onDocumentKeydown);
+			window.addEventListener('scroll', this.onScroll);
 
-			@fetch =>
-				this.trigger('loaded');
+			this.fetch(() => this.trigger('loaded'));
+		});
 
 		this.on('unmount', () => {
-			document.removeEventListener 'keydown' this.on-document-keydown
-			window.removeEventListener 'scroll' this.on-scroll
+			document.removeEventListener('keydown', this.onDocumentKeydown);
+			window.removeEventListener('scroll', this.onScroll);
+		});
 
-		this.on-document-keydown = (e) => {
-			tag = e.target.tag-name.to-lower-case!
-			if tag != 'input' and tag != 'textarea' 
-				if e.which == 84 // t
+		this.onDocumentKeydown = e => {
+			if (e.target.tagName != 'INPUT' && tag != 'TEXTAREA') {
+				if (e.which == 84) { // t
 					this.refs.timeline.focus();
+				}
+			}
+		};
 
-		this.fetch = (cb) => {
+		this.fetch = cb => {
 			this.api('posts/mentions', {
-				following: this.mode == 'following' 
-			}).then((posts) => {
-				this.is-loading = false
-				this.is-empty = posts.length == 0
-				this.update();
-				this.refs.timeline.set-posts posts
-				if cb? then cb!
-			.catch (err) =>
-				console.error err
-				if cb? then cb!
+				following: this.mode == 'following'
+			}).then(posts => {
+				this.update({
+					isLoading: false,
+					isEmpty: posts.length == 0
+				});
+				this.refs.timeline.setPosts(posts);
+				if (cb) cb();
+			});
+		};
 
 		this.more = () => {
-			if @more-loading or @is-loading or this.refs.timeline.posts.length == 0
-				return
-			this.more-loading = true
-			this.update();
+			if (this.moreLoading || this.isLoading || this.refs.timeline.posts.length == 0) return;
+			this.update({
+				moreLoading: true
+			});
 			this.api('posts/mentions', {
-				following: this.mode == 'following' 
-				max_id: this.refs.timeline.tail!.id
-			}).then((posts) => {
-				this.more-loading = false
-				this.update();
-				this.refs.timeline.prepend-posts posts
-			.catch (err) =>
-				console.error err
+				following: this.mode == 'following',
+				max_id: this.refs.timeline.tail().id
+			}).then(posts => {
+				this.update({
+					moreLoading: false
+				});
+				this.refs.timeline.prependPosts(posts);
+			});
+		};
 
-		this.on-scroll = () => {
-			current = window.scrollY + window.inner-height
-			if current > document.body.offset-height - 8
-				@more!
+		this.onScroll = () => {
+			const current = window.scrollY + window.innerHeight;
+			if (current > document.body.offsetHeight - 8) this.more();
+		};
 
-		this.set-mode = (mode) => {
-			@update do
+		this.setMode = mode => {
+			this.update({
 				mode: mode
-			@fetch!
+			});
+			this.fetch();
+		};
 	</script>
 </mk-mentions-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/nav.tag b/src/web/app/desktop/tags/home-widgets/nav.tag
index a792299a53..67affc75f9 100644
--- a/src/web/app/desktop/tags/home-widgets/nav.tag
+++ b/src/web/app/desktop/tags/home-widgets/nav.tag
@@ -13,9 +13,5 @@
 			i
 				color #ccc
 
-			
-
-			
-
 	</style>
 </mk-nav-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/notifications.tag b/src/web/app/desktop/tags/home-widgets/notifications.tag
index 12520e95a3..5ed26b5d74 100644
--- a/src/web/app/desktop/tags/home-widgets/notifications.tag
+++ b/src/web/app/desktop/tags/home-widgets/notifications.tag
@@ -44,7 +44,8 @@
 	</style>
 	<script>
 		this.settings = () => {
-			w = riot.mount document.body.appendChild document.createElement 'mk-settings-window' .0
-			w.switch 'notification' 
+			const w = riot.mount(document.body.appendChild(document.createElement('mk-settings-window')[0];
+			w.switch('notification');
+		};
 	</script>
 </mk-notifications-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/photo-stream.tag b/src/web/app/desktop/tags/home-widgets/photo-stream.tag
index 3ebbf6a1e2..7cbb07b4de 100644
--- a/src/web/app/desktop/tags/home-widgets/photo-stream.tag
+++ b/src/web/app/desktop/tags/home-widgets/photo-stream.tag
@@ -60,28 +60,33 @@
 		this.mixin('api');
 		this.mixin('stream');
 
-		this.images = []
-		this.initializing = true
+		this.images = [];
+		this.initializing = true;
 
 		this.on('mount', () => {
-			this.stream.on 'drive_file_created' this.onStreamDriveFileCreated
+			this.stream.on('drive_file_created', this.onStreamDriveFileCreated);
 
 			this.api('drive/stream', {
-				type: 'image/*'
-				limit: 9images
-			}).then((images) => {
-				this.initializing = false
-				this.images = images
-				this.update();
+				type: 'image/*',
+				limit: 9
+			}).then(images => {
+				this.update({
+					initializing: false,
+					images: images
+				});
+			});
+		});
 
 		this.on('unmount', () => {
-			this.stream.off 'drive_file_created' this.onStreamDriveFileCreated
+			this.stream.off('drive_file_created', this.onStreamDriveFileCreated);
+		});
 
-		this.onStreamDriveFileCreated = (file) => {
-			if /^image\/.+$/.test file.type
-				@images.unshift file
-				if @images.length > 9
-					@images.pop!
+		this.onStreamDriveFileCreated = file => {
+			if (/^image\/.+$/.test(file.type)) {
+				this.images.unshift(file);
+				if (this.images.length > 9) this.images.pop();
 				this.update();
+			}
+		};
 	</script>
 </mk-photo-stream-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/profile.tag b/src/web/app/desktop/tags/home-widgets/profile.tag
index 72b2c18c38..8ee2186149 100644
--- a/src/web/app/desktop/tags/home-widgets/profile.tag
+++ b/src/web/app/desktop/tags/home-widgets/profile.tag
@@ -46,10 +46,12 @@
 		this.mixin('update-avatar');
 		this.mixin('update-banner');
 
-		this.set-avatar = () => {
-			@update-avatar this.I
+		this.setAvatar = () => {
+			this.updateAvatar(this.I);
+		};
 
-		this.set-banner = () => {
-			@update-banner this.I
+		this.setBanner = () => {
+			this.updateBanner(this.I);
+		};
 	</script>
 </mk-profile-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/rss-reader.tag b/src/web/app/desktop/tags/home-widgets/rss-reader.tag
index 98af55cb55..c8700a8b63 100644
--- a/src/web/app/desktop/tags/home-widgets/rss-reader.tag
+++ b/src/web/app/desktop/tags/home-widgets/rss-reader.tag
@@ -67,28 +67,32 @@
 		this.mixin('api');
 		this.mixin('NotImplementedException');
 
-		this.url = 'http://news.yahoo.co.jp/pickup/rss.xml'
-		this.items = []
-		this.initializing = true
+		this.url = 'http://news.yahoo.co.jp/pickup/rss.xml';
+		this.items = [];
+		this.initializing = true;
 
 		this.on('mount', () => {
-			@fetch!
-			this.clock = setInterval @fetch, 60000ms
+			this.fetch();
+			this.clock = setInterval(this.fetch, 60000);
+		});
 
 		this.on('unmount', () => {
-			clearInterval @clock
+			clearInterval(this.clock);
+		});
 
 		this.fetch = () => {
-			this.api CONFIG.url + '/api:rss' do
-				url: @url
-			}).then((feed) => {
-				this.items = feed.rss.channel.item
-				this.initializing = false
-				this.update();
-			.catch (err) ->
-				console.error err
+			this.api(CONFIG.url + '/api:rss', {
+				url: this.url
+			}).then(feed => {
+				this.update({
+					initializing: false,
+					items: feed.rss.channel.item
+				});
+			});
+		};
 
 		this.settings = () => {
-			@NotImplementedException!
+			this.NotImplementedException();
+		};
 	</script>
 </mk-rss-reader-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/timeline.tag b/src/web/app/desktop/tags/home-widgets/timeline.tag
index 69417aa83b..138ff5ed14 100644
--- a/src/web/app/desktop/tags/home-widgets/timeline.tag
+++ b/src/web/app/desktop/tags/home-widgets/timeline.tag
@@ -36,76 +36,83 @@
 		this.mixin('api');
 		this.mixin('stream');
 
-		this.is-loading = true
-		this.is-empty = false
-		this.more-loading = false
-		this.no-following = this.I.following_count == 0
+		this.isLoading = true;
+		this.isEmpty = false;
+		this.moreLoading = false;
+		this.noFollowing = this.I.following_count == 0;
 
 		this.on('mount', () => {
-			this.stream.on 'post' this.on-stream-post
-			this.stream.on 'follow' this.on-stream-follow
-			this.stream.on 'unfollow' this.on-stream-unfollow
+			this.stream.on('post', this.onStreamPost);
+			this.stream.on('follow', this.onStreamFollow);
+			this.stream.on('unfollow', this.onStreamUnfollow);
 
-			document.addEventListener 'keydown' this.on-document-keydown
-			window.addEventListener 'scroll' this.on-scroll
+			document.addEventListener('keydown', this.onDocumentKeydown);
+			window.addEventListener('scroll', this.onScroll);
 
-			@load =>
-				this.trigger('loaded');
+			this.load(() => this.trigger('loaded'));
+		});
 
 		this.on('unmount', () => {
-			this.stream.off 'post' this.on-stream-post
-			this.stream.off 'follow' this.on-stream-follow
-			this.stream.off 'unfollow' this.on-stream-unfollow
+			this.stream.off('post', this.onStreamPost);
+			this.stream.off('follow', this.onStreamFollow);
+			this.stream.off('unfollow', this.onStreamUnfollow);
 
-			document.removeEventListener 'keydown' this.on-document-keydown
-			window.removeEventListener 'scroll' this.on-scroll
+			document.removeEventListener('keydown', this.onDocumentKeydown);
+			window.removeEventListener('scroll', this.onScroll);
+		});
 
-		this.on-document-keydown = (e) => {
-			tag = e.target.tag-name.to-lower-case!
-			if tag != 'input' and tag != 'textarea' 
-				if e.which == 84 // t
+		this.onDocumentKeydown = e => {
+			if (e.target.tagName != 'INPUT' && tag != 'TEXTAREA') {
+				if (e.which == 84) { // t
 					this.refs.timeline.focus();
+				}
+			}
+		};
 
 		this.load = (cb) => {
-			this.api 'posts/timeline' 
-			}).then((posts) => {
-				this.is-loading = false
-				this.is-empty = posts.length == 0
-				this.update();
-				this.refs.timeline.set-posts posts
-				if cb? then cb!
-			.catch (err) =>
-				console.error err
-				if cb? then cb!
+			this.api('posts/timeline').then(posts => {
+				this.update({
+					isLoading: false,
+					isEmpty: posts.length == 0
+				});
+				this.refs.timeline.setPosts(posts);
+				if (cb) cb();
+			});
+		};
 
 		this.more = () => {
-			if @more-loading or @is-loading or this.refs.timeline.posts.length == 0
-				return
-			this.more-loading = true
-			this.update();
+			if (this.moreLoading || this.isLoading || this.refs.timeline.posts.length == 0) return;
+			this.update({
+				moreLoading: true
+			});
 			this.api('posts/timeline', {
-				max_id: this.refs.timeline.tail!.id
-			}).then((posts) => {
-				this.more-loading = false
-				this.update();
-				this.refs.timeline.prepend-posts posts
-			.catch (err) =>
-				console.error err
+				max_id: this.refs.timeline.tail().id
+			}).then(posts => {
+				this.update({
+					moreLoading: false
+				});
+				this.refs.timeline.prependPosts(posts);
+			});
+		};
 
-		this.on-stream-post = (post) => {
-			this.is-empty = false
-			this.update();
-			this.refs.timeline.add-post post
+		this.onStreamPost = post => {
+			this.update({
+				isEmpty: false
+			});
+			this.refs.timeline.addPost(post);
+		};
 
-		this.on-stream-follow = () => {
+		this.onStreamFollow = () => {
 			this.load();
+		};
 
-		this.on-stream-unfollow = () => {
+		this.onStreamUnfollow = () => {
 			this.load();
+		};
 
-		this.on-scroll = () => {
-			current = window.scrollY + window.inner-height
-			if current > document.body.offset-height - 8
-				@more!
+		this.onScroll = () => {
+			const current = window.scrollY + window.innerHeight;
+			if (current > document.body.offsetHeight - 8) this.more();
+		};
 	</script>
 </mk-timeline-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/tips.tag b/src/web/app/desktop/tags/home-widgets/tips.tag
index ff7516f33b..27268f3ed3 100644
--- a/src/web/app/desktop/tags/home-widgets/tips.tag
+++ b/src/web/app/desktop/tags/home-widgets/tips.tag
@@ -30,42 +30,45 @@
 	</style>
 	<script>
 		this.tips = [
-			'<kbd>t</kbd>でタイムラインにフォーカスできます'
-			'<kbd>p</kbd>または<kbd>n</kbd>で投稿フォームを開きます'
-			'投稿フォームにはファイルをドラッグ&ドロップできます'
-			'投稿フォームにクリップボードにある画像データをペーストできます'
-			'ドライブにファイルをドラッグ&ドロップしてアップロードできます'
-			'ドライブでファイルをドラッグしてフォルダ移動できます'
-			'ドライブでフォルダをドラッグしてフォルダ移動できます'
-			'ホームをカスタマイズできます(準備中)'
+			'<kbd>t</kbd>でタイムラインにフォーカスできます',
+			'<kbd>p</kbd>または<kbd>n</kbd>で投稿フォームを開きます',
+			'投稿フォームにはファイルをドラッグ&ドロップできます',
+			'投稿フォームにクリップボードにある画像データをペーストできます',
+			'ドライブにファイルをドラッグ&ドロップしてアップロードできます',
+			'ドライブでファイルをドラッグしてフォルダ移動できます',
+			'ドライブでフォルダをドラッグしてフォルダ移動できます',
+			'ホームをカスタマイズできます(準備中)',
 			'MisskeyはMIT Licenseです'
 		]
 
 		this.on('mount', () => {
-			@set!
-			this.clock = setInterval @change, 20000ms
+			this.set();
+			this.clock = setInterval(this.change, 20000);
+		});
 
 		this.on('unmount', () => {
-			clearInterval @clock
+			clearInterval(this.clock);
+		});
 
 		this.set = () => {
-			this.refs.text.innerHTML = @tips[Math.floor Math.random! * @tips.length]
-			this.update();
+			this.refs.text.innerHTML = this.tips[Math.floor(Math.random() * this.tips.length)];
+		};
 
 		this.change = () => {
 			Velocity(this.refs.tip, {
 				opacity: 0
 			}, {
-				duration: 500ms
-				easing: 'linear' 
-				complete: @set
-			}
+				duration: 500,
+				easing: 'linear',
+				complete: this.set
+			});
 
 			Velocity(this.refs.tip, {
 				opacity: 1
 			}, {
-				duration: 500ms
-				easing: 'linear' 
-			}
+				duration: 500,
+				easing: 'linear'
+			});
+		};
 	</script>
 </mk-tips-home-widget>
diff --git a/src/web/app/desktop/tags/home-widgets/user-recommendation.tag b/src/web/app/desktop/tags/home-widgets/user-recommendation.tag
index 63a8d1571e..517d206a4d 100644
--- a/src/web/app/desktop/tags/home-widgets/user-recommendation.tag
+++ b/src/web/app/desktop/tags/home-widgets/user-recommendation.tag
@@ -112,41 +112,39 @@
 		this.mixin('api');
 		this.mixin('user-preview');
 
-		this.users = null
-		this.loading = true
+		this.users = null;
+		this.loading = true;
 
-		this.limit = 3users
-		this.page = 0
+		this.limit = 3;
+		this.page = 0;
 
 		this.on('mount', () => {
-			@fetch!
-			this.clock = setInterval =>
-				if this.users.length < @limit
-					@fetch true
-			, 60000ms
+			this.fetch();
+		});
 
-		this.on('unmount', () => {
-			clearInterval @clock
-
-		this.fetch = (quiet = false) => {
-			this.loading = true
-			this.users = null
-			if not quiet then this.update();
+		this.fetch = () => {
+			this.update({
+				loading: true,
+				users: null
+			});
 			this.api('users/recommendation', {
-				limit: @limit
-				offset: @limit * this.page
-			}).then((users) => {
-				this.loading = false
-				this.users = users
-				this.update();
-			.catch (err, text-status) ->
-				console.error err
+				limit: this.limit,
+				offset: this.limit * this.page
+			}).then(users => {
+				this.update({
+					loading: false,
+					users: users
+				});
+			});
+		};
 
 		this.refresh = () => {
-			if this.users.length < @limit
-				this.page = 0
-			else
-				this.page++
-			@fetch!
+			if (this.users.length < this.limit) {
+				this.page = 0;
+			} else {
+				this.page++;
+			}
+			this.fetch();
+		};
 	</script>
 </mk-user-recommendation-home-widget>