wip
This commit is contained in:
@@ -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();
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -104,7 +104,7 @@
|
||||
this.show = false;
|
||||
|
||||
this.on('mount', () => {
|
||||
hljs.highlightBlock(this.refs.headers);
|
||||
hljs.highlightBlock(this.$refs.headers);
|
||||
});
|
||||
|
||||
this.toggle = () => {
|
||||
|
||||
@@ -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(() => {
|
||||
|
||||
@@ -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'));
|
||||
|
||||
|
||||
Reference in New Issue
Block a user