wip

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

@@ -176,7 +176,7 @@
 				this.connection.socket.send(JSON.stringify({
 					type: 'read',
 					id: message.id
-				});
+				}));
 			}
 			this.update();
 
@@ -197,7 +197,7 @@
 					this.messages[exist].is_read = true;
 					this.update();
 				}
-			}):
+			});
 		};
 
 		this.isBottom = () => {
@@ -206,7 +206,7 @@
 			return current > (max - 32);
 		};
 
-		this.scroll-to-bottom = () => {
+		this.scrollToBottom = () => {
 			this.root.scrollTop = this.root.scrollHeight;
 		};
 
@@ -215,23 +215,26 @@
 			n.innerHTML = '<i class="fa fa-arrow-circle-down"></i>' + message;
 			n.onclick = () => {
 				this.scrollToBottom();
-				n.parentNode.removeChild n
-			this.refs.notifications.appendChild n
+				n.parentNode.removeChild(n);
+			};
+			this.refs.notifications.appendChild(n);
 
-			setTimeout =>
-				n.style.opacity = 0
-				setTimeout =>
-					n.parentNode.removeChild n
-				, 1000ms
-			, 4000ms
+			setTimeout(() => {
+				n.style.opacity = 0;
+				setTimeout(() => n.parentNode.removeChild(n), 1000);
+			}, 4000);
 		};
 
 		this.onVisibilitychange = () => {
-			if document.hidden then return
-			@messages.forEach (message) =>
-				if message.user_id != this.I.id and not message.is_read
-					@connection.socket.send JSON.stringify do
-						type: 'read' 
+			if (document.hidden) return;
+			this.messages.forEach(message => {
+				if (message.user_id !== this.I.id && !message.is_read) {
+					this.connection.socket.send(JSON.stringify({
+						type: 'read',
 						id: message.id
+					}));
+				}
+			});
+		};
 	</script>
 </mk-messaging-room>

src/web/app/common/tags/signin.tag

@@ -105,34 +105,42 @@
 		this.oninput = () => {
 			this.api('users/show', {
 				username: this.refs.username.value
-			}).then((user) => {
-				this.user = user
-				this.trigger 'user' user
+			}).then(user => {
+				this.user = user;
+				this.trigger('user', user);
 				this.update();
+			});
+		};
 
-		this.onsubmit = (e) => {
+		this.onsubmit = e => {
 			e.preventDefault();
 
-			if this.refs.username.value == ''
+			if (this.refs.username.value == '') {
 				this.refs.username.focus();
-				return false
-			if this.refs.password.value == ''
+				return false;
+			}
+			if (this.refs.password.value == '') {
 				this.refs.password.focus();
-				return false
+				return false;
+			}
 
-			this.signing = true
-			this.update();
+			this.update({
+				signing: true
+			});
 
 			this.api('signin', {
-				username: this.refs.username.value
+				username: this.refs.username.value,
 				password: this.refs.password.value
 			}).then(() => {
 				location.reload();
-			.catch =>
-				alert 'something happened'
-				this.signing = false
-				this.update();
+			}).catch(() => {
+				alert('something happened');
+				this.update({
+					signing: false
+				});
+			});
 
-			false
+			return false;
+		};
 	</script>
 </mk-signin>

src/web/app/common/tags/signup.tag

@@ -185,93 +185,92 @@
 		window.onEecaptchaed = () => {
 			this.recaptchaed = true;
 			this.update();
-		}
+		};
 
 		window.onRecaptchaExpired = () => {
 			this.recaptchaed = false;
 			this.update();
-		}
+		};
 
 		this.on('mount', () => {
-			const head = (document.getElementsByTagName('head'))[0];
-			script = document.createElement 'script' 
-				..setAttribute 'src' \https://www.google.com/recaptcha/api.js
-			head.appendChild script
+			const head = document.getElementsByTagName('head')[0];
+			const script = document.createElement('script');
+			script.setAttribute('src', 'https://www.google.com/recaptcha/api.js');
+			head.appendChild(script);
 		});
 
-		this.on-change-username = () => {
-			username = this.refs.username.value
+		this.onChangeUsername = () => {
+			const username = this.refs.username.value;
 
-			if username == ''
-				this.username-state = null
-				this.update();
-				return
+			if (username == '') {
+				this.update({
+					usernameState: null
+				});
+				return;
+			}
 
-			err = switch
-				| not username.match /^[a-zA-Z0-9\-]+$/ => 'invalid-format' 
-				| username.length < 3chars              => 'min-range' 
-				| username.length > 20chars             => 'max-range' 
-				| _                                     => null
+			const err =
+				!username.match(/^[a-zA-Z0-9\-]+$/) ? 'invalid-format' :
+				username.length < 3 ? 'min-range' :
+				username.length > 20 ? 'max-range' :
+				null;
 
-			if err?
-				this.username-state = err
-				this.update();
-			else
-				this.username-state = 'wait' 
-				this.update();
+			if (err) {
+				this.update({
+					usernameState: err
+				});
+				return;
+			}
+
+			this.update({
+				usernameState: 'wait'
+			});
 
 			this.api('username/available', {
 				username: username
-				}).then((result) => {
-					if result.available
-						this.username-state = 'ok' 
-					else
-						this.username-state = 'unavailable' 
-					this.update();
-				.catch (err) =>
-					this.username-state = 'error' 
-					this.update();
+			}).then(result => {
+				this.update({
+					usernameState: result.available ? 'ok' : 'unavailable'
+				});
+			}).catch(err => {
+				this.update({
+					usernameState: 'error'
+				});
+			});
+		};
 
-		this.on-change-password = () => {
-			password = this.refs.password.value
+		this.onChangePassword = () => {
+			const password = this.refs.password.value;
 
-			if password == ''
-				this.password-strength = ''
-				return
+			if (password == '') {
+				this.passwordStrength = '';
+				return;
+			}
 
-			strength = @get-password-strength password
+			const strength = this.getPasswordStrength(password);
+			this.passwordStrength = strength > 0.7 ? 'high' : strength > 0.3 ? 'medium' : 'low';
+			this.refs.passwordMetar.style.width = `${strength * 100}%`;
+		};
 
-			if strength > 0.3
-				this.password-strength = 'medium' 
-				if strength > 0.7
-					this.password-strength = 'high' 
-			else
-				this.password-strength = 'low' 
+		this.onChangePasswordRetype = () => {
+			const password = this.refs.password.value;
+			const retypedPassword = this.refs.passwordRetype.value;
 
-			this.update();
+			if (retyped-password == '') {
+				this.passwordRetypeState = null;
+				return;
+			}
 
-			this.refs.password-metar.style.width = (strength * 100) + '%' 
+			this.passwordRetypeState = password == retypedPassword ? 'match' : 'not-match';
+		};
 
-		this.on-change-password-retype = () => {
-			password = this.refs.password.value
-			retyped-password = this.refs.password-retype.value
-
-			if retyped-password == ''
-				this.password-retype-state = null
-				return
-
-			if password == retyped-password
-				this.password-retype-state = 'match' 
-			else
-				this.password-retype-state = 'not-match' 
-
-		this.onsubmit = (e) => {
+		this.onsubmit = e => {
 			e.preventDefault();
 
 			const username = this.refs.username.value;
 			const password = this.refs.password.value;
 
-			locker = document.body.appendChild(document.createElement('mk-locker'));
+			const locker = document.body.appendChild(document.createElement('mk-locker'));
 
 			this.api('signup', {
 				username: username,
@@ -279,18 +278,21 @@
 				'g-recaptcha-response': grecaptcha.getResponse()
 			}).then(() => {
 				this.api('signin', {
-					username: username
+					username: username,
 					password: password
 				}).then(() => {
 					location.href = CONFIG.url
-			.catch =>
-				alert '何らかの原因によりアカウントの作成に失敗しました。再度お試しください。'
+				});
+			}).catch(() => {
+				alert('何らかの原因によりアカウントの作成に失敗しました。再度お試しください。');
 
-				grecaptcha.reset!
-				this.recaptchaed = false
+				grecaptcha.reset();
+				this.recaptchaed = false;
 
-				locker.parentNode.removeChild locker
+				locker.parentNode.removeChild(locker);
+			});
 
-			false
+			return false;
+		};
 	</script>
 </mk-signup>

src/web/app/common/tags/time.tag

@@ -1,9 +1,13 @@
 <mk-time>
-	<time datetime={ opts.time }><span if={ mode == 'relative' }>{ relative }</span><span if={ mode == 'absolute' }>{ absolute }</span><span if={ mode == 'detail' }>{ absolute } ({ relative })</span></time>
+	<time datetime={ opts.time }>
+		<span if={ mode == 'relative' }>{ relative }</span>
+		<span if={ mode == 'absolute' }>{ absolute }</span>
+		<span if={ mode == 'detail' }>{ absolute } ({ relative })</span>
+	</time>
 	<script>
-		this.time = new Date this.opts.time
-		this.mode = this.opts.mode || 'relative' 
-		this.tickid = null
+		this.time = new Date(this.opts.time);
+		this.mode = this.opts.mode || 'relative';
+		this.tickid = null;
 
 		this.absolute =
 			this.time.getFullYear()  + '年' +
@@ -11,31 +15,36 @@
 			this.time.getDate()      + '日' +
 			' ' +
 			this.time.getHours()     + '時' +
-			this.time.getMinutes()   + '分' 
+			this.time.getMinutes()   + '分';
 
 		this.on('mount', () => {
-			if this.mode == 'relative' or this.mode == 'detail' 
-				this.tick!
-				this.tickid = setInterval this.tick, 1000ms
+			if (this.mode == 'relative' || this.mode == 'detail') {
+				this.tick();
+				this.tickid = setInterval(this.tick, 1000);
+			}
+		});
 
 		this.on('unmount', () => {
-			if this.mode == 'relative' or this.mode == 'detail' 
-				clearInterval this.tickid
+			if (this.mode === 'relative' || this.mode === 'detail') {
+				clearInterval(this.tickid);
+			}
+		});
 
 		this.tick = () => {
 			const now = new Date();
-			ago = (now - this.time) / 1000ms
-			this.relative = switch
-				| ago >= 31536000s => ~~(ago / 31536000s) + '年前'
-				| ago >= 2592000s  => ~~(ago / 2592000s)  + 'ヶ月前'
-				| ago >= 604800s   => ~~(ago / 604800s)   + '週間前'
-				| ago >= 86400s    => ~~(ago / 86400s)    + '日前'
-				| ago >= 3600s     => ~~(ago / 3600s)     + '時間前'
-				| ago >= 60s       => ~~(ago / 60s)       + '分前'
-				| ago >= 10s       => ~~(ago % 60s)       + '秒前'
-				| ago >= 0s        =>                       'たった今'
-				| ago <  0s        =>                       '未来'
-				| _                =>                       'なぞのじかん'
+			const ago = (now - this.time) / 1000/*ms*/;
+			this.relative =
+				ago >= 31536000 ? ~~(ago / 31536000) + '年前' :
+				ago >= 2592000  ? ~~(ago / 2592000)  + 'ヶ月前' :
+				ago >= 604800   ? ~~(ago / 604800)   + '週間前' :
+				ago >= 86400    ? ~~(ago / 86400)    + '日前' :
+				ago >= 3600     ? ~~(ago / 3600)     + '時間前' :
+				ago >= 60       ? ~~(ago / 60)       + '分前' :
+				ago >= 10       ? ~~(ago % 60)       + '秒前' :
+				ago >= 0        ?                      'たった今' :
+				ago <  0        ?                      '未来' :
+				                                       'なぞのじかん';
 			this.update();
+		};
 	</script>
 </mk-time>

src/web/app/desktop/tags/big-follow-button.tag

@@ -74,54 +74,70 @@
 		this.mixin('is-promise');
 		this.mixin('stream');
 
-		this.user = null
-		this.user-promise = if @is-promise this.opts.user then this.opts.user else Promise.resolve this.opts.user
-		this.init = true
-		this.wait = false
+		this.user = null;
+		this.userPromise = this.isPromise(this.opts.user)
+			? this.opts.user
+			: Promise.resolve(this.opts.user);
+		this.init = true;
+		this.wait = false;
 
 		this.on('mount', () => {
-			this.user-promise}).then((user) => {
-				this.user = user
-				this.init = false
-				this.update();
-				this.stream.on 'follow' this.on-stream-follow
-				this.stream.on 'unfollow' this.on-stream-unfollow
+			this.userPromise.then(user => {
+				this.update({
+					init: false,
+					user: user
+				});
+				this.stream.on('follow', this.onStreamFollow);
+				this.stream.on('unfollow', this.onStreamUnfollow);
+			});
+		});
 
 		this.on('unmount', () => {
-			this.stream.off 'follow' this.on-stream-follow
-			this.stream.off 'unfollow' this.on-stream-unfollow
+			this.stream.off('follow', this.onStreamFollow);
+			this.stream.off('unfollow', this.onStreamUnfollow);
+		});
 
-		this.on-stream-follow = (user) => {
-			if user.id == this.user.id
-				this.user = user
-				this.update();
+		this.onStreamFollow = user => {
+			if (user.id == this.user.id) {
+				this.update({
+					user: user
+				});
+			}
+		};
 
-		this.on-stream-unfollow = (user) => {
-			if user.id == this.user.id
-				this.user = user
-				this.update();
+		this.onStreamUnfollow = user => {
+			if (user.id == this.user.id) {
+				this.update({
+					user: user
+				});
+			}
+		};
 
 		this.onclick = () => {
-			this.wait = true
-			if this.user.is_following
+			this.wait = true;
+			if (this.user.is_following) {
 				this.api('following/delete', {
 					user_id: this.user.id
 				}).then(() => {
-					this.user.is_following = false
-				.catch (err) ->
-					console.error err
+					this.user.is_following = false;
+				}).catch(err => {
+					console.error(err);
 				}).then(() => {
-					this.wait = false
+					this.wait = false;
 					this.update();
-			else
+				});
+			} else {
 				this.api('following/create', {
 					user_id: this.user.id
 				}).then(() => {
-					this.user.is_following = true
-				.catch (err) ->
-					console.error err
+					this.user.is_following = true;
+				}).catch(err => {
+					console.error(err);
 				}).then(() => {
-					this.wait = false
+					this.wait = false;
 					this.update();
+				});
+			}
+		};
 	</script>
 </mk-big-follow-button>

src/web/app/desktop/tags/messaging/room-window.tag

@@ -19,10 +19,12 @@
 
 	</style>
 	<script>
-		this.user = this.opts.user
+		this.user = this.opts.user;
 
 		this.on('mount', () => {
 			this.refs.window.on('closed', () => {
 				this.unmount();
+			});
+		});
 	</script>
 </mk-messaging-room-window>

src/web/app/desktop/tags/messaging/window.tag

@@ -22,10 +22,13 @@
 		this.on('mount', () => {
 			this.refs.window.on('closed', () => {
 				this.unmount();
+			});
 
 			this.refs.window.refs.index.on('navigate-user', user => {
-				w = document.body.appendChild(document.createElement('mk-messaging-room-window'));
- 				riot.mount w, do
+				riot.mount(document.body.appendChild(document.createElement('mk-messaging-room-window')), {
 					user: user
+				});
+			});
+		});
 	</script>
 </mk-messaging-window>