This commit is contained in:
syuilo 2017-02-21 19:10:07 +09:00
parent 8fd6f24ee6
commit 2a9d9643aa
7 changed files with 203 additions and 160 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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