wip

10 files changed, 79 insertions, 77 deletions

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'));