wip
This commit is contained in:
parent
8fd6f24ee6
commit
2a9d9643aa
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user