wip

src/web/app/common/tags/messaging/index.tag

@@ -309,49 +309,64 @@
 			const q = this.refs.search.value;
 			if (q == '') {
 				this.searchResult = [];
-			} else {
+				return;
-				this.api('users/search', {
+			}
-					query: q
+			this.api('users/search', {
-					max: 5
+				query: q,
-				}).then((users) => {
+				max: 5
-					users.forEach (user) =>
+			}).then(users => {
-						user._click = =>
+				users.forEach(user => {
-							this.trigger 'navigate-user' user
+					user._click = () => {
-							this.searchResult = []
+						this.trigger('navigate-user', user);
-					this.searchResult = users
+						this.searchResult = [];
-					this.update();
+					};
-				.catch (err) =>
+				});
-					console.error err
+				this.update({
+					searchResult: users
+				});
+			});
 		};
 
-		this.on-search-keydown = e => {
+		this.onSearchKeydown = e => {
-			const key = e.which;
+			switch (e.which) {
-			switch (key)
+				case 9: // [TAB]
-				| 9, 40 => // Key[TAB] or Key[↓]
+				case 40: // [↓]
 					e.preventDefault();
 					e.stopPropagation();
 					this.refs.searchResult.childNodes[0].focus();
+					break;
+			}
 		};
 
-		this.on-searchResult-keydown = (i, e) => {
+		this.onSearchResultKeydown = (i, e) => {
-			key = e.which
+			const cancel = () => {
-			switch (key)
+				e.preventDefault();
-				| 10, 13 => // Key[ENTER]
+				e.stopPropagation();
-					e.preventDefault();
+			};
-					e.stopPropagation();
+			switch (true) {
+				case e.which == 10: // [ENTER]
+				case e.which == 13: // [ENTER]
+					cancel();
 					this.searchResult[i]._click();
-				| 27 => // Key[ESC]
+					break;
-					e.preventDefault();
+
-					e.stopPropagation();
+				case e.which == 27: // [ESC]
+					cancel();
 					this.refs.search.focus();
-				| 38 => // Key[↑]
+					break;
-					e.preventDefault();
+
-					e.stopPropagation();
+				case e.which == 9 && e.shiftKey: // [TAB] + [Shift]
+				case e.which == 38: // [↑]
+					cancel();
 					(this.refs.searchResult.childNodes[i].previousElementSibling || this.refs.searchResult.childNodes[this.searchResult.length - 1]).focus();
-				| 9, 40 => // Key[TAB] or Key[↓]
+					break;
-					e.preventDefault();
+
-					e.stopPropagation();
+				case e.which == 9: // [TAB]
+				case e.which == 40: // [↓]
+					cancel();
 					(this.refs.searchResult.childNodes[i].nextElementSibling || this.refs.searchResult.childNodes[0]).focus();
+					break;
+			}
 		};
 
 	</script>

src/web/app/desktop/tags/pages/entrance.tag

@@ -63,18 +63,24 @@
 
 	</style>
 	<script>
-		this.mode = 'signin' 
+		this.mode = 'signin';
 
 		this.signup = () => {
-			this.mode = 'signup' 
+			this.update({
-			this.update();
+				mode: 'signup'
+			});
+		};
 
 		this.signin = () => {
-			this.mode = 'signin' 
+			this.update({
-			this.update();
+				mode: 'signin'
+			});
+		};
 
 		this.introduction = () => {
-			this.mode = 'introduction' 
+			this.update({
-			this.update();
+				mode: 'introduction'
+			});
+		};
 	</script>
 </mk-entrance>

src/web/app/desktop/tags/pages/entrance/signin.tag

@@ -120,11 +120,15 @@
 	</style>
 	<script>
 		this.on('mount', () => {
-			this.refs.signin.on('user', (user) => {
+			this.refs.signin.on('user', user => {
-				@update do
+				this.update({
 					user: user
+				});
+			});
+		});
 
 		this.introduction = () => {
-			this.parent.introduction!
+			this.parent.introduction();
+		};
 	</script>
 </mk-entrance-signin>

src/web/app/desktop/tags/pages/entrance/signup.tag

@@ -43,9 +43,5 @@
 				> i
 					padding 14px
 
-			
-
-			
-
 	</style>
 </mk-entrance-signup>

src/web/app/desktop/tags/pages/home.tag

@@ -5,7 +5,6 @@
 	<style>
 		:scope
 			display block
-
 	</style>
 	<script>
 		this.mixin('i');
@@ -14,34 +13,37 @@
 		this.mixin('stream');
 		this.mixin('get-post-summary');
 
-		this.unread-count = 0
+		this.unreadCount = 0;
 
-		this.page = switch this.opts.mode
+		this.page = this.opts.mode || 'timeline';
-			| 'timelie' => 'home' 
-			| 'mentions' => 'mentions' 
-			| _ => 'home' 
 
 		this.on('mount', () => {
 			this.refs.ui.refs.home.on('loaded', () => {
 				this.Progress.done();
-
+			});
-			document.title = 'Misskey'
+			document.title = 'Misskey';
 			this.Progress.start();
-			this.stream.on 'post' this.on-stream-post
+			this.stream.on('post', this.onStreamPost);
-			document.addEventListener 'visibilitychange' @window-onVisibilitychange, false
+			document.addEventListener('visibilitychange', this.windowOnVisibilitychange, false);
+		});
 
 		this.on('unmount', () => {
-			this.stream.off 'post' this.on-stream-post
+			this.stream.off('post', this.onStreamPost);
-			document.removeEventListener 'visibilitychange' @window-onVisibilitychange
+			document.removeEventListener('visibilitychange', this.windowOnVisibilitychange);
+		});
 
-		this.on-stream-post = (post) => {
+		this.onStreamPost = post => {
-			if document.hidden and post.user_id !== this.I.id
+			if (document.hidden && post.user_id != this.I.id) {
-				@unread-count++
+				this.unreadCount++;
-				document.title = '(' + @unread-count + ') ' + @get-post-summary post
+				document.title = `(${this.unreadCount}) ${this.getPostSummary(post)}`;
+			}
+		};
 
-		this.window-onVisibilitychange = () => {
+		this.windowOnVisibilitychange = () => {
-			if !document.hidden
+			if (!document.hidden) {
-				this.unread-count = 0
+				this.unreadCount = 0;
-				document.title = 'Misskey'
+				document.title = 'Misskey';
+			}
+		};
 	</script>
 </mk-home-page>

src/web/app/desktop/tags/pages/not-found.tag

@@ -1,54 +1,11 @@
 <mk-not-found>
 	<mk-ui>
 		<main>
-			<h1>Not Found</h1><img src="/_/resources/rogge.jpg" alt=""/>
+			<h1>Not Found</h1>
-			<div class="mask"></div>
 		</main>
 	</mk-ui>
 	<style>
 		:scope
 			display block
-
-			main
-				display block
-				width 600px
-				margin 32px auto
-
-				> img
-					display block
-					width 600px
-					height 459px
-					pointer-events none
-					user-select none
-					border-radius 16px
-					box-shadow 0 0 16px rgba(0, 0, 0, 0.1)
-
-				> h1
-					display block
-					margin 0
-					padding 0
-					position absolute
-					top 260px
-					left 225px
-					transform rotate(-12deg)
-					z-index 2
-					color #444
-					font-size 24px
-					line-height 20px
-
-				> .mask
-					position absolute
-					top 262px
-					left 217px
-					width 126px
-					height 18px
-					transform rotate(-12deg)
-					background #D6D5DA
-					border-radius 2px 6px 7px 6px
-
-			
-
-			
-
 	</style>
 </mk-not-found>

src/web/app/desktop/tags/pages/post.tag

@@ -18,15 +18,18 @@
 	<script>
 		this.mixin('ui-progress');
 
-		this.post = this.opts.post
+		this.post = this.opts.post;
 
 		this.on('mount', () => {
 			this.Progress.start();
 
 			this.refs.ui.refs.detail.on('post-fetched', () => {
 				this.Progress.set(0.5);
+			});
 
 			this.refs.ui.refs.detail.on('loaded', () => {
 				this.Progress.done();
+			});
+		});
 	</script>
 </mk-post-page>

src/web/app/desktop/tags/pages/search.tag

@@ -5,7 +5,6 @@
 	<style>
 		:scope
 			display block
-
 	</style>
 	<script>
 		this.mixin('ui-progress');
@@ -15,5 +14,7 @@
 
 			this.refs.ui.refs.search.on('loaded', () => {
 				this.Progress.done();
+			});
+		});
 	</script>
 </mk-search-page>

src/web/app/desktop/tags/pages/user.tag

@@ -5,21 +5,23 @@
 	<style>
 		:scope
 			display block
-
 	</style>
 	<script>
 		this.mixin('ui-progress');
 
-		this.user = this.opts.user
+		this.user = this.opts.user;
 
 		this.on('mount', () => {
 			this.Progress.start();
 
-			this.refs.ui.refs.user.on('user-fetched', (user) => {
+			this.refs.ui.refs.user.on('user-fetched', user => {
 				this.Progress.set(0.5);
 				document.title = user.name + ' | Misskey'
+			});
 
 			this.refs.ui.refs.user.on('loaded', () => {
 				this.Progress.done();
+			});
+		});
 	</script>
 </mk-user-page>

src/web/app/desktop/tags/search-posts.tag

@@ -31,56 +31,61 @@
 		this.mixin('api');
 		this.mixin('get-post-summary');
 
-		this.query = this.opts.query
+		this.query = this.opts.query;
-		this.is-loading = true
+		this.isLoading = true;
-		this.is-empty = false
+		this.isEmpty = false;
-		this.more-loading = false
+		this.moreLoading = false;
-		this.page = 0
+		this.page = 0;
 
 		this.on('mount', () => {
-			document.addEventListener 'keydown' this.on-document-keydown
+			document.addEventListener('keydown', this.onDocumentKeydown);
-			window.addEventListener 'scroll' this.on-scroll
+			window.addEventListener('scroll', this.onScroll);
 
 			this.api('posts/search', {
 				query: this.query
-			}).then((posts) => {
+			}).then(posts => {
-				this.is-loading = false
+				this.update({
-				this.is-empty = posts.length == 0
+					isLoading: false,
-				this.update();
+					isEmpty: posts.length == 0
-				this.refs.timeline.set-posts posts
+				});
+				this.refs.timeline.setPosts(posts);
 				this.trigger('loaded');
-			.catch (err) =>
+			});
-				console.error err
+		});
 
 		this.on('unmount', () => {
-			document.removeEventListener 'keydown' this.on-document-keydown
+			document.removeEventListener('keydown', this.onDocumentKeydown);
-			window.removeEventListener 'scroll' this.on-scroll
+			window.removeEventListener('scroll', this.onScroll);
+		});
 
-		this.on-document-keydown = (e) => {
+		this.onDocumentKeydown = e => {
-			tag = e.target.tag-name.to-lower-case!
+			if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
-			if tag != 'input' and tag != 'textarea' 
+				if (e.which == 84) { // t
-				if e.which == 84 // t
 					this.refs.timeline.focus();
+				}
+			}
+		};
 
 		this.more = () => {
-			if @more-loading or @is-loading or this.timeline.posts.length == 0
+			if (this.moreLoading || this.isLoading || this.timeline.posts.length == 0) return;
-				return
+			this.update({
-			this.more-loading = true
+				moreLoading: true
-			this.update();
+			});
 			this.api('posts/search', {
-				query: this.query
+				query: this.query,
 				page: this.page + 1
-			}).then((posts) => {
+			}).then(posts => {
-				this.more-loading = false
+				this.update({
-				this.page++
+					moreLoading: false,
-				this.update();
+					page: page + 1
-				this.refs.timeline.prepend-posts posts
+				});
-			.catch (err) =>
+				this.refs.timeline.prependPosts(posts);
-				console.error err
+			});
+		};
 
-		this.on-scroll = () => {
+		this.onScroll = () => {
-			current = window.scrollY + window.inner-height
+			const current = window.scrollY + window.innerHeight;
-			if current > document.body.offset-height - 16 // 遊び
+			if (current > document.body.offsetHeight - 16) this.more();
-				@more!
+		};
 	</script>
 </mk-search-posts>

src/web/app/desktop/tags/search.tag

@@ -23,10 +23,12 @@
 
 	</style>
 	<script>
-		this.query = this.opts.query
+		this.query = this.opts.query;
 
 		this.on('mount', () => {
 			this.refs.posts.on('loaded', () => {
 				this.trigger('loaded');
+			});
+		});
 	</script>
 </mk-search>

src/web/app/desktop/tags/user-photos.tag

@@ -60,27 +60,33 @@
 		this.mixin('api');
 		this.mixin('is-promise');
 
-		this.images = []
+		this.images = [];
-		this.initializing = true
+		this.initializing = true;
-
+		this.user = null;
-		this.user = null
+		this.userPromise = this.isPromise(this.opts.user)
-		this.user-promise = if @is-promise this.opts.user then this.opts.user else Promise.resolve this.opts.user
+			? this.opts.user
+			: Promise.resolve(this.opts.user);
 
 		this.on('mount', () => {
-			this.user-promise}).then((user) => {
+			this.userPromise.then(user => {
-				this.user = user
+				this.update({
-				this.update();
+					user: user
+				});
 
 				this.api('users/posts', {
-					user_id: this.user.id
+					user_id: this.user.id,
-					with_media: true
+					with_media: true,
-					limit: 9posts
+					limit: 9
-				}).then((posts) => {
+				}).then(posts => {
-					this.initializing = false
+					this.initializing = false;
-					posts.forEach (post) =>
+					posts.forEach(post => {
-						post.media.forEach (image) =>
+						post.media.forEach(media => {
-							if @images.length < 9
+							if (this.images.length < 9) this.images.push(image);
-								@images.push image
+						});
+					});
 					this.update();
+				});
+			});
+		});
 	</script>
 </mk-user-photos>

src/web/app/desktop/tags/user-posts-graph.tag

@@ -1,71 +0,0 @@
-<mk-user-posts-graph>
-	<canvas ref="canv" width="750" height="250"></canvas>
-	<style>
-		:scope
-			display block
-			width 750px
-			height 250px
-
-	</style>
-	<script>
-		this.mixin('api');
-		this.mixin('is-promise');
-
-		this.user = null
-		this.user-promise = if @is-promise this.opts.user then this.opts.user else Promise.resolve this.opts.user
-
-		this.on('mount', () => {
-			user <~ this.user-promise.then
-			this.user = user
-			this.update();
-
-			this.api('aggregation/users/post', {
-				user_id: this.user.id
-				limit: 30days
-			}).then((data) => {
-				data = data.reverse!
-				new Chart this.refs.canv, do
-					type: 'line' 
-					data:
-						labels: data.map (x, i) => if i % 3 == 2 then x.date.day + '日' else ''
-						datasets: [
-							{
-								label: '投稿' 
-								data: data.map (x) => x.posts
-								line-tension: 0
-								point-radius: 0
-								background-color: '#555' 
-								border-color: 'transparent' 
-							},
-							{
-								label: 'Repost' 
-								data: data.map (x) => x.reposts
-								line-tension: 0
-								point-radius: 0
-								background-color: '#a2d61e' 
-								border-color: 'transparent' 
-							},
-							{
-								label: '返信' 
-								data: data.map (x) => x.replies
-								line-tension: 0
-								point-radius: 0
-								background-color: '#F7796C' 
-								border-color: 'transparent' 
-							}
-						]
-					options:
-						responsive: false
-						scales:
-							x-axes: [
-								{
-									stacked: true
-								}
-							]
-							y-axes: [
-								{
-									stacked: true
-								}
-							]
-	</script>
-</mk-user-posts-graph>

src/web/app/desktop/tags/user-preview.tag

@@ -100,44 +100,47 @@
 		this.mixin('i');
 		this.mixin('api');
 
-		this.u = this.opts.user
+		this.u = this.opts.user;
-		this.user = null
+		this.user = null;
-		this.user-promise = 
+		this.userPromise =
-			if typeof @u == 'string' 
+			typeof this.u == 'string' ?
-				new Promise (resolve, reject) =>
+				new Promise((resolve, reject) => {
 					this.api('users/show', {
-						user_id: if @u.0 == '@' then undefined else @u
+						user_id: this.u[0] == '@' ? undefined : this.u,
-						username: if @u.0 == '@' then @u.substr 1 else undefined
+						username: this.u[0] == '@' ? this.u.substr(1) : undefined
-					}).then((user) => {
+					}).then(resolve);
-						resolve user
+				})
-			else
+			: Promise.resolve(this.u);
-				Promise.resolve @u
 
 		this.on('mount', () => {
-			this.user-promise}).then((user) => {
+			this.userPromise.then(user => {
-				this.user = user
+				this.update({
-				this.update();
+					user: user
+				});
+			});
 
 			Velocity(this.root, {
-				opacity: 0
+				opacity: 0,
-				'margin-top': '-8px' 
+				'margin-top': '-8px'
-			} 0ms
+			}, 0);
 			Velocity(this.root, {
-				opacity: 1
+				opacity: 1,
 				'margin-top': 0
 			}, {
-				duration: 200ms
+				duration: 200,
-				easing: 'ease-out' 
+				easing: 'ease-out'
-			}
+			});
+		});
 
 		this.close = () => {
 			Velocity(this.root, {
-				opacity: 0
+				opacity: 0,
-				'margin-top': '-8px' 
+				'margin-top': '-8px'
 			}, {
-				duration: 200ms
+				duration: 200,
-				easing: 'ease-out' 
+				easing: 'ease-out',
-				complete: => this.unmount();
+				complete: () => this.unmount()
-			}
+			});
+		};
 	</script>
 </mk-user-preview>