From 07efc8e1504450b4eb6bc29f43986a9d538d0680 Mon Sep 17 00:00:00 2001 From: こぴなたみぽ Date: Wed, 7 Feb 2018 18:17:59 +0900 Subject: wip --- src/web/app/common/tags/messaging/form.tag | 6 +-- src/web/app/common/tags/messaging/index.tag | 10 ++-- src/web/app/common/tags/messaging/message.tag | 6 +-- src/web/app/common/tags/messaging/room.tag | 2 +- src/web/app/common/tags/poll-editor.tag | 2 +- src/web/app/common/tags/post-menu.tag | 26 +++++----- src/web/app/common/tags/reaction-picker.vue | 68 ++++++++++++++------------- src/web/app/common/tags/signin-history.tag | 2 +- src/web/app/common/tags/signin.tag | 20 ++++---- src/web/app/common/tags/signup.tag | 14 +++--- 10 files changed, 79 insertions(+), 77 deletions(-) (limited to 'src/web/app/common') diff --git a/src/web/app/common/tags/messaging/form.tag b/src/web/app/common/tags/messaging/form.tag index a5de32e3fd..93733e8d7a 100644 --- a/src/web/app/common/tags/messaging/form.tag +++ b/src/web/app/common/tags/messaging/form.tag @@ -136,7 +136,7 @@ }; this.selectFile = () => { - this.refs.file.click(); + this.$refs.file.click(); }; this.selectFileFromDrive = () => { @@ -155,7 +155,7 @@ this.sending = true; this.api('messaging/messages/create', { user_id: this.opts.user.id, - text: this.refs.text.value + text: this.$refs.text.value }).then(message => { this.clear(); }).catch(err => { @@ -167,7 +167,7 @@ }; this.clear = () => { - this.refs.text.value = ''; + this.$refs.text.value = ''; this.files = []; this.update(); }; diff --git a/src/web/app/common/tags/messaging/index.tag b/src/web/app/common/tags/messaging/index.tag index 547727da27..d38569999d 100644 --- a/src/web/app/common/tags/messaging/index.tag +++ b/src/web/app/common/tags/messaging/index.tag @@ -389,7 +389,7 @@ }; this.search = () => { - const q = this.refs.search.value; + const q = this.$refs.search.value; if (q == '') { this.searchResult = []; return; @@ -416,7 +416,7 @@ case 40: // [↓] e.preventDefault(); e.stopPropagation(); - this.refs.searchResult.childNodes[0].focus(); + this.$refs.searchResult.childNodes[0].focus(); break; } }; @@ -435,19 +435,19 @@ case e.which == 27: // [ESC] cancel(); - this.refs.search.focus(); + this.$refs.search.focus(); break; case e.which == 9 && e.shiftKey: // [TAB] + [Shift] case e.which == 38: // [↑] cancel(); - (this.refs.searchResult.childNodes[i].previousElementSibling || this.refs.searchResult.childNodes[this.searchResult.length - 1]).focus(); + (this.$refs.searchResult.childNodes[i].previousElementSibling || this.$refs.searchResult.childNodes[this.searchResult.length - 1]).focus(); break; case e.which == 9: // [TAB] case e.which == 40: // [↓] cancel(); - (this.refs.searchResult.childNodes[i].nextElementSibling || this.refs.searchResult.childNodes[0]).focus(); + (this.$refs.searchResult.childNodes[i].nextElementSibling || this.$refs.searchResult.childNodes[0]).focus(); break; } }; diff --git a/src/web/app/common/tags/messaging/message.tag b/src/web/app/common/tags/messaging/message.tag index 354022d7df..f211b10b55 100644 --- a/src/web/app/common/tags/messaging/message.tag +++ b/src/web/app/common/tags/messaging/message.tag @@ -217,9 +217,9 @@ if (this.message.text) { const tokens = this.message.ast; - this.refs.text.innerHTML = compile(tokens); + this.$refs.text.innerHTML = compile(tokens); - Array.from(this.refs.text.children).forEach(e => { + Array.from(this.$refs.text.children).forEach(e => { if (e.tagName == 'MK-URL') riot.mount(e); }); @@ -227,7 +227,7 @@ tokens .filter(t => t.type == 'link') .map(t => { - const el = this.refs.text.appendChild(document.createElement('mk-url-preview')); + const el = this.$refs.text.appendChild(document.createElement('mk-url-preview')); riot.mount(el, { url: t.content }); diff --git a/src/web/app/common/tags/messaging/room.tag b/src/web/app/common/tags/messaging/room.tag index a42e0ea949..2fdf50457b 100644 --- a/src/web/app/common/tags/messaging/room.tag +++ b/src/web/app/common/tags/messaging/room.tag @@ -296,7 +296,7 @@ this.scrollToBottom(); n.parentNode.removeChild(n); }; - this.refs.notifications.appendChild(n); + this.$refs.notifications.appendChild(n); setTimeout(() => { n.style.opacity = 0; diff --git a/src/web/app/common/tags/poll-editor.tag b/src/web/app/common/tags/poll-editor.tag index 73e783ddbd..f660032c92 100644 --- a/src/web/app/common/tags/poll-editor.tag +++ b/src/web/app/common/tags/poll-editor.tag @@ -95,7 +95,7 @@ this.add = () => { this.choices.push(''); this.update(); - this.refs.choices.childNodes[this.choices.length - 1].childNodes[0].focus(); + this.$refs.choices.childNodes[this.choices.length - 1].childNodes[0].focus(); }; this.remove = (i) => { diff --git a/src/web/app/common/tags/post-menu.tag b/src/web/app/common/tags/post-menu.tag index dd2a273d4e..92b2801f59 100644 --- a/src/web/app/common/tags/post-menu.tag +++ b/src/web/app/common/tags/post-menu.tag @@ -85,29 +85,29 @@ this.on('mount', () => { const rect = this.source.getBoundingClientRect(); - const width = this.refs.popover.offsetWidth; - const height = this.refs.popover.offsetHeight; + const width = this.$refs.popover.offsetWidth; + const height = this.$refs.popover.offsetHeight; if (this.opts.compact) { const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2); const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2); - this.refs.popover.style.left = (x - (width / 2)) + 'px'; - this.refs.popover.style.top = (y - (height / 2)) + 'px'; + this.$refs.popover.style.left = (x - (width / 2)) + 'px'; + this.$refs.popover.style.top = (y - (height / 2)) + 'px'; } else { const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2); const y = rect.top + window.pageYOffset + this.source.offsetHeight; - this.refs.popover.style.left = (x - (width / 2)) + 'px'; - this.refs.popover.style.top = y + 'px'; + this.$refs.popover.style.left = (x - (width / 2)) + 'px'; + this.$refs.popover.style.top = y + 'px'; } anime({ - targets: this.refs.backdrop, + targets: this.$refs.backdrop, opacity: 1, duration: 100, easing: 'linear' }); anime({ - targets: this.refs.popover, + targets: this.$refs.popover, opacity: 1, scale: [0.5, 1], duration: 500 @@ -124,7 +124,7 @@ }; this.categorize = () => { - const category = this.refs.categorySelect.options[this.refs.categorySelect.selectedIndex].value; + const category = this.$refs.categorySelect.options[this.$refs.categorySelect.selectedIndex].value; this.api('posts/categorize', { post_id: this.post.id, category: category @@ -135,17 +135,17 @@ }; this.close = () => { - this.refs.backdrop.style.pointerEvents = 'none'; + this.$refs.backdrop.style.pointerEvents = 'none'; anime({ - targets: this.refs.backdrop, + targets: this.$refs.backdrop, opacity: 0, duration: 200, easing: 'linear' }); - this.refs.popover.style.pointerEvents = 'none'; + this.$refs.popover.style.pointerEvents = 'none'; anime({ - targets: this.refs.popover, + targets: this.$refs.popover, opacity: 0, scale: 0.5, duration: 200, diff --git a/src/web/app/common/tags/reaction-picker.vue b/src/web/app/common/tags/reaction-picker.vue index 970b7036de..4157372088 100644 --- a/src/web/app/common/tags/reaction-picker.vue +++ b/src/web/app/common/tags/reaction-picker.vue @@ -25,10 +25,40 @@ const placeholder = '%i18n:common.tags.mk-reaction-picker.choose-reaction%'; export default { - props: ['post', 'cb'], + props: ['post', 'source', 'compact', 'cb'], data: { title: placeholder }, + created: function() { + const rect = this.source.getBoundingClientRect(); + const width = this.$refs.popover.offsetWidth; + const height = this.$refs.popover.offsetHeight; + if (this.compact) { + const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2); + const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2); + this.$refs.popover.style.left = (x - (width / 2)) + 'px'; + this.$refs.popover.style.top = (y - (height / 2)) + 'px'; + } else { + const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2); + const y = rect.top + window.pageYOffset + this.source.offsetHeight; + this.$refs.popover.style.left = (x - (width / 2)) + 'px'; + this.$refs.popover.style.top = y + 'px'; + } + + anime({ + targets: this.$refs.backdrop, + opacity: 1, + duration: 100, + easing: 'linear' + }); + + anime({ + targets: this.$refs.popover, + opacity: 1, + scale: [0.5, 1], + duration: 500 + }); + }, methods: { react: function(reaction) { api('posts/reactions/create', { @@ -54,34 +84,6 @@ this.source = this.opts.source; this.on('mount', () => { - const rect = this.source.getBoundingClientRect(); - const width = this.refs.popover.offsetWidth; - const height = this.refs.popover.offsetHeight; - if (this.opts.compact) { - const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2); - const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2); - this.refs.popover.style.left = (x - (width / 2)) + 'px'; - this.refs.popover.style.top = (y - (height / 2)) + 'px'; - } else { - const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2); - const y = rect.top + window.pageYOffset + this.source.offsetHeight; - this.refs.popover.style.left = (x - (width / 2)) + 'px'; - this.refs.popover.style.top = y + 'px'; - } - - anime({ - targets: this.refs.backdrop, - opacity: 1, - duration: 100, - easing: 'linear' - }); - - anime({ - targets: this.refs.popover, - opacity: 1, - scale: [0.5, 1], - duration: 500 - }); }); this.react = reaction => { @@ -89,17 +91,17 @@ }; this.close = () => { - this.refs.backdrop.style.pointerEvents = 'none'; + this.$refs.backdrop.style.pointerEvents = 'none'; anime({ - targets: this.refs.backdrop, + targets: this.$refs.backdrop, opacity: 0, duration: 200, easing: 'linear' }); - this.refs.popover.style.pointerEvents = 'none'; + this.$refs.popover.style.pointerEvents = 'none'; anime({ - targets: this.refs.popover, + targets: this.$refs.popover, opacity: 0, scale: 0.5, duration: 200, diff --git a/src/web/app/common/tags/signin-history.tag b/src/web/app/common/tags/signin-history.tag index 10729789c6..9f02fc687d 100644 --- a/src/web/app/common/tags/signin-history.tag +++ b/src/web/app/common/tags/signin-history.tag @@ -104,7 +104,7 @@ this.show = false; this.on('mount', () => { - hljs.highlightBlock(this.refs.headers); + hljs.highlightBlock(this.$refs.headers); }); this.toggle = () => { diff --git a/src/web/app/common/tags/signin.tag b/src/web/app/common/tags/signin.tag index f5a2be94ed..2ee188bbcb 100644 --- a/src/web/app/common/tags/signin.tag +++ b/src/web/app/common/tags/signin.tag @@ -108,7 +108,7 @@ this.oninput = () => { this.api('users/show', { - username: this.refs.username.value + username: this.$refs.username.value }).then(user => { this.user = user; this.trigger('user', user); @@ -119,16 +119,16 @@ this.onsubmit = e => { e.preventDefault(); - if (this.refs.username.value == '') { - this.refs.username.focus(); + if (this.$refs.username.value == '') { + this.$refs.username.focus(); return false; } - if (this.refs.password.value == '') { - this.refs.password.focus(); + if (this.$refs.password.value == '') { + this.$refs.password.focus(); return false; } - if (this.user && this.user.two_factor_enabled && this.refs.token.value == '') { - this.refs.token.focus(); + if (this.user && this.user.two_factor_enabled && this.$refs.token.value == '') { + this.$refs.token.focus(); return false; } @@ -137,9 +137,9 @@ }); this.api('signin', { - username: this.refs.username.value, - password: this.refs.password.value, - token: this.user && this.user.two_factor_enabled ? this.refs.token.value : undefined + username: this.$refs.username.value, + password: this.$refs.password.value, + token: this.user && this.user.two_factor_enabled ? this.$refs.token.value : undefined }).then(() => { location.reload(); }).catch(() => { diff --git a/src/web/app/common/tags/signup.tag b/src/web/app/common/tags/signup.tag index d0bd769074..0b2ddf6d76 100644 --- a/src/web/app/common/tags/signup.tag +++ b/src/web/app/common/tags/signup.tag @@ -208,7 +208,7 @@ }); this.onChangeUsername = () => { - const username = this.refs.username.value; + const username = this.$refs.username.value; if (username == '') { this.update({ @@ -248,7 +248,7 @@ }; this.onChangePassword = () => { - const password = this.refs.password.value; + const password = this.$refs.password.value; if (password == '') { this.passwordStrength = ''; @@ -258,12 +258,12 @@ const strength = getPasswordStrength(password); this.passwordStrength = strength > 0.7 ? 'high' : strength > 0.3 ? 'medium' : 'low'; this.update(); - this.refs.passwordMetar.style.width = `${strength * 100}%`; + this.$refs.passwordMetar.style.width = `${strength * 100}%`; }; this.onChangePasswordRetype = () => { - const password = this.refs.password.value; - const retypedPassword = this.refs.passwordRetype.value; + const password = this.$refs.password.value; + const retypedPassword = this.$refs.passwordRetype.value; if (retypedPassword == '') { this.passwordRetypeState = null; @@ -276,8 +276,8 @@ this.onsubmit = e => { e.preventDefault(); - const username = this.refs.username.value; - const password = this.refs.password.value; + const username = this.$refs.username.value; + const password = this.$refs.password.value; const locker = document.body.appendChild(document.createElement('mk-locker')); -- cgit v1.2.3-freya