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({
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>

View file

@ -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>

View file

@ -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.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();
this.update({
usernameState: 'wait'
});
this.on-change-password = () => {
password = this.refs.password.value
this.api('username/available', {
username: username
}).then(result => {
this.update({
usernameState: result.available ? 'ok' : 'unavailable'
});
}).catch(err => {
this.update({
usernameState: 'error'
});
});
};
if password == ''
this.password-strength = ''
return
this.onChangePassword = () => {
const password = this.refs.password.value;
strength = @get-password-strength password
if (password == '') {
this.passwordStrength = '';
return;
}
if strength > 0.3
this.password-strength = 'medium'
if strength > 0.7
this.password-strength = 'high'
else
this.password-strength = 'low'
const strength = this.getPasswordStrength(password);
this.passwordStrength = strength > 0.7 ? 'high' : strength > 0.3 ? 'medium' : 'low';
this.refs.passwordMetar.style.width = `${strength * 100}%`;
};
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 = () => {
password = this.refs.password.value
retyped-password = this.refs.password-retype.value
this.passwordRetypeState = password == retypedPassword ? 'match' : 'not-match';
};
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>

View file

@ -1,41 +1,50 @@
<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() + '年' +
this.time.getFullYear() + '年' +
this.time.getMonth() + 1 + '月' +
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>

View file

@ -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>

View file

@ -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>

View file

@ -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>