From 2a9d9643aaaf39f61b3e4bc6c8c40f89ac27610e Mon Sep 17 00:00:00 2001 From: syuilo Date: Tue, 21 Feb 2017 19:10:07 +0900 Subject: [PATCH] wip --- src/web/app/common/tags/messaging/room.tag | 35 +++-- src/web/app/common/tags/signin.tag | 40 +++-- src/web/app/common/tags/signup.tag | 142 +++++++++--------- src/web/app/common/tags/time.tag | 57 ++++--- .../app/desktop/tags/big-follow-button.tag | 78 ++++++---- .../desktop/tags/messaging/room-window.tag | 4 +- src/web/app/desktop/tags/messaging/window.tag | 7 +- 7 files changed, 203 insertions(+), 160 deletions(-) diff --git a/src/web/app/common/tags/messaging/room.tag b/src/web/app/common/tags/messaging/room.tag index 8b1220e29..cb676badb 100644 --- a/src/web/app/common/tags/messaging/room.tag +++ b/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 = '' + 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 + })); + } + }); + }; diff --git a/src/web/app/common/tags/signin.tag b/src/web/app/common/tags/signin.tag index e2b873682..c44ae3d6e 100644 --- a/src/web/app/common/tags/signin.tag +++ b/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; + }; diff --git a/src/web/app/common/tags/signup.tag b/src/web/app/common/tags/signup.tag index 39d4522e7..dafdf51e1 100644 --- a/src/web/app/common/tags/signup.tag +++ b/src/web/app/common/tags/signup.tag @@ -185,112 +185,114 @@ 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, password: password, '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; + }; diff --git a/src/web/app/common/tags/time.tag b/src/web/app/common/tags/time.tag index 1bf078916..ad34115f6 100644 --- a/src/web/app/common/tags/time.tag +++ b/src/web/app/common/tags/time.tag @@ -1,41 +1,50 @@ - + diff --git a/src/web/app/desktop/tags/big-follow-button.tag b/src/web/app/desktop/tags/big-follow-button.tag index 309e6ce8e..9d12b5a53 100644 --- a/src/web/app/desktop/tags/big-follow-button.tag +++ b/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(); + }); + } + }; diff --git a/src/web/app/desktop/tags/messaging/room-window.tag b/src/web/app/desktop/tags/messaging/room-window.tag index 3cf10ffe1..e8a9ed6ac 100644 --- a/src/web/app/desktop/tags/messaging/room-window.tag +++ b/src/web/app/desktop/tags/messaging/room-window.tag @@ -19,10 +19,12 @@ diff --git a/src/web/app/desktop/tags/messaging/window.tag b/src/web/app/desktop/tags/messaging/window.tag index 208404d15..c7af1dc2a 100644 --- a/src/web/app/desktop/tags/messaging/window.tag +++ b/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 + }); + }); + });