Skip to content
Snippets Groups Projects
Commit 07efc8e1 authored by こぴなたみぽ's avatar こぴなたみぽ
Browse files

wip

parent ea70350d
No related branches found
No related tags found
No related merge requests found
Showing
with 137 additions and 135 deletions
......@@ -114,13 +114,13 @@
state: 'waiting'
});
this.refs.form.on('denied', () => {
this.$refs.form.on('denied', () => {
this.update({
state: 'denied'
});
});
this.refs.form.on('accepted', this.accepted);
this.$refs.form.on('accepted', this.accepted);
}
}).catch(error => {
this.update({
......
......@@ -289,7 +289,7 @@
this.files = null;
this.on('mount', () => {
this.refs.uploader.on('uploaded', file => {
this.$refs.uploader.on('uploaded', file => {
this.update({
files: [file]
});
......@@ -297,7 +297,7 @@
});
this.upload = file => {
this.refs.uploader.upload(file);
this.$refs.uploader.upload(file);
};
this.clearReply = () => {
......@@ -311,7 +311,7 @@
this.update({
files: null
});
this.refs.text.value = '';
this.$refs.text.value = '';
};
this.post = () => {
......@@ -324,7 +324,7 @@
: undefined;
this.api('posts/create', {
text: this.refs.text.value == '' ? undefined : this.refs.text.value,
text: this.$refs.text.value == '' ? undefined : this.$refs.text.value,
media_ids: files,
reply_id: this.reply ? this.reply.id : undefined,
channel_id: this.channel.id
......@@ -340,11 +340,11 @@
};
this.changeFile = () => {
Array.from(this.refs.file.files).forEach(this.upload);
Array.from(this.$refs.file.files).forEach(this.upload);
};
this.selectFile = () => {
this.refs.file.click();
this.$refs.file.click();
};
this.drive = () => {
......
......@@ -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'));
......
......@@ -28,9 +28,9 @@
const m = now.getMinutes();
const h = now.getHours();
const ctx = this.refs.canvas.getContext('2d');
const canvW = this.refs.canvas.width;
const canvH = this.refs.canvas.height;
const ctx = this.$refs.canvas.getContext('2d');
const canvW = this.$refs.canvas.width;
const canvH = this.$refs.canvas.height;
ctx.clearRect(0, 0, canvW, canvH);
{ // 背景
......
......@@ -177,12 +177,12 @@
};
this.applySelect = () => {
Array.from(this.refs.users.children).forEach(el => {
Array.from(this.$refs.users.children).forEach(el => {
el.removeAttribute('data-selected');
});
this.refs.users.children[this.select].setAttribute('data-selected', 'true');
this.refs.users.children[this.select].focus();
this.$refs.users.children[this.select].setAttribute('data-selected', 'true');
this.$refs.users.children[this.select].focus();
};
this.complete = user => {
......
......@@ -168,7 +168,7 @@
this.cropper = null;
this.on('mount', () => {
this.img = this.refs.window.refs.img;
this.img = this.$refs.window.refs.img;
this.cropper = new Cropper(this.img, {
aspectRatio: this.aspectRatio,
highlight: false,
......@@ -179,18 +179,18 @@
this.ok = () => {
this.cropper.getCroppedCanvas().toBlob(blob => {
this.trigger('cropped', blob);
this.refs.window.close();
this.$refs.window.close();
});
};
this.skip = () => {
this.trigger('skipped');
this.refs.window.close();
this.$refs.window.close();
};
this.cancel = () => {
this.trigger('canceled');
this.refs.window.close();
this.$refs.window.close();
};
</script>
</mk-crop-window>
......@@ -62,8 +62,8 @@
});
this.close = () => {
this.refs.bg.style.pointerEvents = 'none';
this.refs.main.style.pointerEvents = 'none';
this.$refs.bg.style.pointerEvents = 'none';
this.$refs.main.style.pointerEvents = 'none';
anime({
targets: this.root,
opacity: 0,
......
......@@ -94,19 +94,19 @@
});
this.on('mount', () => {
this.refs.header.innerHTML = this.opts.title;
this.refs.body.innerHTML = this.opts.text;
this.$refs.header.innerHTML = this.opts.title;
this.$refs.body.innerHTML = this.opts.text;
this.refs.bg.style.pointerEvents = 'auto';
this.$refs.bg.style.pointerEvents = 'auto';
anime({
targets: this.refs.bg,
targets: this.$refs.bg,
opacity: 1,
duration: 100,
easing: 'linear'
});
anime({
targets: this.refs.main,
targets: this.$refs.main,
opacity: 1,
scale: [1.2, 1],
duration: 300,
......@@ -115,17 +115,17 @@
});
this.close = () => {
this.refs.bg.style.pointerEvents = 'none';
this.$refs.bg.style.pointerEvents = 'none';
anime({
targets: this.refs.bg,
targets: this.$refs.bg,
opacity: 0,
duration: 300,
easing: 'linear'
});
this.refs.main.style.pointerEvents = 'none';
this.$refs.main.style.pointerEvents = 'none';
anime({
targets: this.refs.main,
targets: this.$refs.main,
opacity: 0,
scale: 0.8,
duration: 300,
......
......@@ -16,29 +16,29 @@
this.browser = this.opts.browser;
this.on('mount', () => {
this.refs.ctx.on('closed', () => {
this.$refs.ctx.on('closed', () => {
this.trigger('closed');
this.unmount();
});
});
this.open = pos => {
this.refs.ctx.open(pos);
this.$refs.ctx.open(pos);
};
this.createFolder = () => {
this.browser.createFolder();
this.refs.ctx.close();
this.$refs.ctx.close();
};
this.upload = () => {
this.browser.selectLocalFile();
this.refs.ctx.close();
this.$refs.ctx.close();
};
this.urlUpload = () => {
this.browser.urlUpload();
this.refs.ctx.close();
this.$refs.ctx.close();
};
</script>
</mk-drive-browser-base-contextmenu>
......@@ -33,7 +33,7 @@
this.folder = this.opts.folder ? this.opts.folder : null;
this.popout = () => {
const folder = this.refs.window.refs.browser.folder;
const folder = this.$refs.window.refs.browser.folder;
if (folder) {
return `${_URL_}/i/drive/folder/${folder.id}`;
} else {
......@@ -42,7 +42,7 @@
};
this.on('mount', () => {
this.refs.window.on('closed', () => {
this.$refs.window.on('closed', () => {
this.unmount();
});
......@@ -54,7 +54,7 @@
});
this.close = () => {
this.refs.window.close();
this.$refs.window.close();
};
</script>
</mk-drive-browser-window>
......@@ -275,11 +275,11 @@
this.isDragSource = false;
this.on('mount', () => {
this.refs.uploader.on('uploaded', file => {
this.$refs.uploader.on('uploaded', file => {
this.addFile(file, true);
});
this.refs.uploader.on('change-uploads', uploads => {
this.$refs.uploader.on('change-uploads', uploads => {
this.update({
uploads: uploads
});
......@@ -332,35 +332,35 @@
};
this.onmousedown = e => {
if (contains(this.refs.foldersContainer, e.target) || contains(this.refs.filesContainer, e.target)) return true;
if (contains(this.$refs.foldersContainer, e.target) || contains(this.$refs.filesContainer, e.target)) return true;
const rect = this.refs.main.getBoundingClientRect();
const rect = this.$refs.main.getBoundingClientRect();
const left = e.pageX + this.refs.main.scrollLeft - rect.left - window.pageXOffset
const top = e.pageY + this.refs.main.scrollTop - rect.top - window.pageYOffset
const left = e.pageX + this.$refs.main.scrollLeft - rect.left - window.pageXOffset
const top = e.pageY + this.$refs.main.scrollTop - rect.top - window.pageYOffset
const move = e => {
this.refs.selection.style.display = 'block';
this.$refs.selection.style.display = 'block';
const cursorX = e.pageX + this.refs.main.scrollLeft - rect.left - window.pageXOffset;
const cursorY = e.pageY + this.refs.main.scrollTop - rect.top - window.pageYOffset;
const cursorX = e.pageX + this.$refs.main.scrollLeft - rect.left - window.pageXOffset;
const cursorY = e.pageY + this.$refs.main.scrollTop - rect.top - window.pageYOffset;
const w = cursorX - left;
const h = cursorY - top;
if (w > 0) {
this.refs.selection.style.width = w + 'px';
this.refs.selection.style.left = left + 'px';
this.$refs.selection.style.width = w + 'px';
this.$refs.selection.style.left = left + 'px';
} else {
this.refs.selection.style.width = -w + 'px';
this.refs.selection.style.left = cursorX + 'px';
this.$refs.selection.style.width = -w + 'px';
this.$refs.selection.style.left = cursorX + 'px';
}
if (h > 0) {
this.refs.selection.style.height = h + 'px';
this.refs.selection.style.top = top + 'px';
this.$refs.selection.style.height = h + 'px';
this.$refs.selection.style.top = top + 'px';
} else {
this.refs.selection.style.height = -h + 'px';
this.refs.selection.style.top = cursorY + 'px';
this.$refs.selection.style.height = -h + 'px';
this.$refs.selection.style.top = cursorY + 'px';
}
};
......@@ -368,7 +368,7 @@
document.documentElement.removeEventListener('mousemove', move);
document.documentElement.removeEventListener('mouseup', up);
this.refs.selection.style.display = 'none';
this.$refs.selection.style.display = 'none';
};
document.documentElement.addEventListener('mousemove', move);
......@@ -482,7 +482,7 @@
};
this.selectLocalFile = () => {
this.refs.fileInput.click();
this.$refs.fileInput.click();
};
this.urlUpload = () => {
......@@ -516,14 +516,14 @@
};
this.changeFileInput = () => {
Array.from(this.refs.fileInput.files).forEach(file => {
Array.from(this.$refs.fileInput.files).forEach(file => {
this.upload(file, this.folder);
});
};
this.upload = (file, folder) => {
if (folder && typeof folder == 'object') folder = folder.id;
this.refs.uploader.upload(file, folder);
this.$refs.uploader.upload(file, folder);
};
this.chooseFile = file => {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment