diff options
| author | syuilo <syuilotan@yahoo.co.jp> | 2017-02-20 20:13:42 +0900 |
|---|---|---|
| committer | syuilo <syuilotan@yahoo.co.jp> | 2017-02-20 20:13:42 +0900 |
| commit | 2a3a5d4b509e527d1871b6a993f49b29c734c268 (patch) | |
| tree | 32fdf8c3ea5337c2a1d71f1017de54c7cfe6471b /src | |
| parent | wip (diff) | |
| download | misskey-2a3a5d4b509e527d1871b6a993f49b29c734c268.tar.gz misskey-2a3a5d4b509e527d1871b6a993f49b29c734c268.tar.bz2 misskey-2a3a5d4b509e527d1871b6a993f49b29c734c268.zip | |
wip
Diffstat (limited to 'src')
35 files changed, 402 insertions, 367 deletions
diff --git a/src/web/app/auth/tags/form.tag b/src/web/app/auth/tags/form.tag index 21a9a74048..619c71065e 100644 --- a/src/web/app/auth/tags/form.tag +++ b/src/web/app/auth/tags/form.tag @@ -114,13 +114,13 @@ this.cancel = () => { this.api('auth/deny', { token: @session.token - .then => + }).then(() => { this.trigger('denied'); this.accept = () => { this.api('auth/accept', { token: @session.token - .then => + }).then(() => { this.trigger('accepted'); </script> </mk-form> diff --git a/src/web/app/auth/tags/index.tag b/src/web/app/auth/tags/index.tag index 13abf07905..e52aeed4d2 100644 --- a/src/web/app/auth/tags/index.tag +++ b/src/web/app/auth/tags/index.tag @@ -110,7 +110,7 @@ if @session.app.is_authorized this.api('auth/accept', { token: @session.token - .then => + }).then(() => { @accepted! else this.state = 'waiting' diff --git a/src/web/app/common/scripts/contains.js b/src/web/app/common/scripts/contains.js new file mode 100644 index 0000000000..fe73666193 --- /dev/null +++ b/src/web/app/common/scripts/contains.js @@ -0,0 +1,8 @@ +module.exports = function(parent, child) { + let node = child.parentNode; + while (node) { + if (node == parent) return true; + node = node.parentNode; + } + return false; +} diff --git a/src/web/app/common/tags/signin.tag b/src/web/app/common/tags/signin.tag index 7b297b7b8e..e2b8736821 100644 --- a/src/web/app/common/tags/signin.tag +++ b/src/web/app/common/tags/signin.tag @@ -126,7 +126,7 @@ this.api('signin', { username: this.refs.username.value password: this.refs.password.value - .then => + }).then(() => { location.reload(); .catch => alert 'something happened' diff --git a/src/web/app/common/tags/signup.tag b/src/web/app/common/tags/signup.tag index 7646f8c861..39d4522e79 100644 --- a/src/web/app/common/tags/signup.tag +++ b/src/web/app/common/tags/signup.tag @@ -277,11 +277,11 @@ username: username, password: password, 'g-recaptcha-response': grecaptcha.getResponse() - .then => + }).then(() => { this.api('signin', { username: username password: password - .then => + }).then(() => { location.href = CONFIG.url .catch => alert '何らかの原因によりアカウントの作成に失敗しました。再度お試しください。' diff --git a/src/web/app/desktop/tags/analog-clock.tag b/src/web/app/desktop/tags/analog-clock.tag index ec627ec65f..4ac6d2281c 100644 --- a/src/web/app/desktop/tags/analog-clock.tag +++ b/src/web/app/desktop/tags/analog-clock.tag @@ -6,100 +6,92 @@ display block width 256px height 256px - </style> <script> + class Vec2 { + constructor(x, y) { + this.x = x; + this.y = y; + } + } + this.on('mount', () => { - @draw! - this.clock = setInterval @draw, 1000ms + this.draw() + this.clock = setInterval(this.draw, 1000); + }); this.on('unmount', () => { - clearInterval @clock + clearInterval(this.clock); + }); this.draw = () => { const now = new Date(); - s = now.get-seconds! - m = now.getMinutes() - h = now.getHours() - - vec2 = (x, y) -> - this.x = x - this.y = y + const s = now.getSeconds(); + const m = now.getMinutes(); + const h = now.getHours(); - ctx = this.refs.canvas.get-context '2d' - canv-w = this.refs.canvas.width - canv-h = this.refs.canvas.height - ctx.clear-rect 0, 0, canv-w, canv-h + 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); - // 背景 - center = (Math.min (canv-w / 2), (canv-h / 2)) - line-start = center * 0.90 - line-end-short = center * 0.87 - line-end-long = center * 0.84 - for i from 0 to 59 by 1 - angle = Math.PI * i / 30 - uv = new vec2 (Math.sin angle), (-Math.cos angle) - ctx.begin-path! - ctx.line-width = 1 - ctx.move-to do - (canv-w / 2) + uv.x * line-start - (canv-h / 2) + uv.y * line-start - if i % 5 == 0 - ctx.stroke-style = 'rgba(255, 255, 255, 0.2)' - ctx.line-to do - (canv-w / 2) + uv.x * line-end-long - (canv-h / 2) + uv.y * line-end-long - else - ctx.stroke-style = 'rgba(255, 255, 255, 0.1)' - ctx.line-to do - (canv-w / 2) + uv.x * line-end-short - (canv-h / 2) + uv.y * line-end-short - ctx.stroke! + { // 背景 + const center = Math.min((canvW / 2), (canvH / 2)); + const lineStart = center * 0.90; + const shortLineEnd = center * 0.87; + const longLineEnd = center * 0.84; + for (let i = 0; i < 60; i++) { + const angle = Math.PI * i / 30; + const uv = new Vec2(Math.sin(angle), -Math.cos(angle)); + ctx.beginPath(); + ctx.lineWidth = 1; + ctx.moveTo((canv-w / 2) + uv.x * lineStart, (canv-h / 2) + uv.y * lineStart); + if (i % 5 == 0) { + ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)'; + ctx.lineTo((canv-w / 2) + uv.x * longLineEnd, (canv-h / 2) + uv.y * longLineEnd); + } else { + ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)'; + ctx.lineTo((canv-w / 2) + uv.x * shortLineEnd, (canv-h / 2) + uv.y * shortLineEnd); + } + ctx.stroke(); + } + } - // 分 - angle = Math.PI * (m + s / 60) / 30 - length = (Math.min canv-w, canv-h) / 2.6 - uv = new vec2 (Math.sin angle), (-Math.cos angle) - ctx.begin-path! - ctx.stroke-style = '#ffffff' - ctx.line-width = 2 - ctx.move-to do - (canv-w / 2) - uv.x * length / 5 - (canv-h / 2) - uv.y * length / 5 - ctx.line-to do - (canv-w / 2) + uv.x * length - (canv-h / 2) + uv.y * length - ctx.stroke! + { // 分 + const angle = Math.PI * (m + s / 60) / 30; + const length = Math.min(canvW, canvH) / 2.6; + const uv = new vec2(Math.sin(angle), -Math.cos(angle)); + ctx.beginPath(); + ctx.strokeStyle = '#ffffff'; + ctx.lineWidth = 2; + ctx.moveTo(canvW / 2 - uv.x * length / 5, canvH / 2 - uv.y * length / 5); + ctx.lineTo(canvW / 2 + uv.x * length, canvH / 2 + uv.y * length); + ctx.stroke(); + } - // 時 - angle = Math.PI * (h % 12 + m / 60) / 6 - length = (Math.min canv-w, canv-h) / 4 - uv = new vec2 (Math.sin angle), (-Math.cos angle) - ctx.begin-path! - #ctx.stroke-style = '#ffffff' - ctx.stroke-style = CONFIG.theme-color - ctx.line-width = 2 - ctx.move-to do - (canv-w / 2) - uv.x * length / 5 - (canv-h / 2) - uv.y * length / 5 - ctx.line-to do - (canv-w / 2) + uv.x * length - (canv-h / 2) + uv.y * length - ctx.stroke! + { // 時 + const angle = Math.PI * (h % 12 + m / 60) / 6; + const length = Math.min(canvW, canvH) / 4; + const uv = new vec2(Math.sin(angle), -Math.cos(angle)); + ctx.beginPath(); + ctx.strokeStyle = CONFIG.themeColor; + ctx.lineWidth = 2; + ctx.moveTo(canvW / 2 - uv.x * length / 5, canvH / 2 - uv.y * length / 5); + ctx.lineTo(canvW / 2 + uv.x * length, canvH / 2 + uv.y * length); + ctx.stroke(); + } - // 秒 - angle = Math.PI * s / 30 - length = (Math.min canv-w, canv-h) / 2.6 - uv = new vec2 (Math.sin angle), (-Math.cos angle) - ctx.begin-path! - ctx.stroke-style = 'rgba(255, 255, 255, 0.5)' - ctx.line-width = 1 - ctx.move-to do - (canv-w / 2) - uv.x * length / 5 - (canv-h / 2) - uv.y * length / 5 - ctx.line-to do - (canv-w / 2) + uv.x * length - (canv-h / 2) + uv.y * length - ctx.stroke! + { // 秒 + const angle = Math.PI * s / 30; + const length = Math.min(canvW, canvH) / 2.6; + const uv = new vec2(Math.sin(angle), -Math.cos(angle)); + ctx.beginPath(); + ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)'; + ctx.lineWidth = 1; + ctx.moveTo(canvW / 2 - uv.x * length / 5, canvH / 2 - uv.y * length / 5); + ctx.lineTo(canvW / 2 + uv.x * length, canvH / 2 + uv.y * length); + ctx.stroke(); + } + }; </script> </mk-analog-clock> diff --git a/src/web/app/desktop/tags/autocomplete-suggestion.tag b/src/web/app/desktop/tags/autocomplete-suggestion.tag index 40f5f57591..c7cc29dc19 100644 --- a/src/web/app/desktop/tags/autocomplete-suggestion.tag +++ b/src/web/app/desktop/tags/autocomplete-suggestion.tag @@ -80,108 +80,118 @@ </style> <script> + const contains = require('../../common/scripts/contains'); + this.mixin('api'); - this.q = this.opts.q - this.textarea = this.opts.textarea - this.loading = true - this.users = [] - this.select = -1 + this.q = this.opts.q; + this.textarea = this.opts.textarea; + this.fetching = true; + this.users = []; + this.select = -1; this.on('mount', () => { - @textarea.addEventListener 'keydown' this.on-keydown + this.textarea.addEventListener('keydown', this.onKeydown); - all = document.query-selector-all 'body *' - Array.prototype.forEach.call all, (el) => - el.addEventListener 'mousedown' @mousedown + document.querySelectorAll('body *').forEach(el => { + el.addEventListener('mousedown', this.mousedown); + }); this.api('users/search_by_username', { - query: @q - limit: 30users - }).then((users) => { - this.users = users - this.loading = false - this.update(); - .catch (err) => - console.error err + query: this.q, + limit: 30 + }).then(users => { + this.update({ + fetching: false, + users: users + }); + }); + }); this.on('unmount', () => { - @textarea.removeEventListener 'keydown' this.on-keydown + this.textarea.removeEventListener('keydown', this.onKeydown); + + document.querySelectorAll('body *').forEach(el => { + el.removeEventListener('mousedown', this.mousedown); + }); + }); - all = document.query-selector-all 'body *' - Array.prototype.forEach.call all, (el) => - el.removeEventListener 'mousedown' @mousedown + this.mousedown = e => { + if (!contains(this.root, e.target) && (this.root != e.target)) this.close(); + }; - this.mousedown = (e) => { - if (!contains this.root, e.target) and (this.root != e.target) - @close(); + this.onClick = e => { + this.complete(e.item); + }; - this.on-click = (e) => { - @complete e.item + this.onKeydown = e => { + const cancel = () => { + e.preventDefault(); + e.stopPropagation(); + }; - this.on-keydown = (e) => { - key = e.which - switch (key) - | 10, 13 => // Key[ENTER] - if @select != -1 - e.preventDefault(); - e.stopPropagation(); - @complete this.users[@select] - else - @close(); - | 27 => // Key[ESC] - e.preventDefault(); - e.stopPropagation(); - @close(); - | 38 => // Key[↑] - if @select != -1 - e.preventDefault(); - e.stopPropagation(); - @select-prev! - else - @close(); - | 9, 40 => // Key[TAB] or Key[↓] - e.preventDefault(); - e.stopPropagation(); - @select-next! - | _ => - @close(); + switch (e.which) { + case 10: // [ENTER] + case 13: // [ENTER] + if (this.select !== -1) { + cancel(); + this.complete(this.users[this.select]); + } else { + this.close(); + } + break; - this.select-next = () => { - @select++ + case 27: // [ESC] + cancel(); + this.close(); + break; - if @select >= this.users.length - this.select = 0 + case 38: // [↑] + if (this.select !== -1) { + cancel(); + this.selectPrev(); + } else { + this.close(); + } + break; - @apply-select! + case 9: // [TAB] + case 40: // [↓] + cancel(); + this.selectNext(); + break; - this.select-prev = () => { - @select-- + default: + this.close(); + } + }; - if @select < 0 - this.select = this.users.length - 1 + this.selectNext = () => { + if (++this.select >= this.users.length) this.select = 0; + this.applySelect(); + }; - @apply-select! + this.selectPrev = () => { + if (--this.select < 0) this.select = this.users.length - 1; + this.applySelect(); + }; - this.apply-select = () => { - this.refs.users.children.forEach (el) => - el.remove-attribute 'data-selected' + this.applySelect = () => { + this.refs.users.children.forEach(el => { + el.removeAttribute('data-selected'); + }); - this.refs.users.children[@select].setAttribute 'data-selected' \true - this.refs.users.children[@select].focus(); + this.refs.users.children[this.select].setAttribute('data-selected', 'true'); + this.refs.users.children[this.select].focus(); + }; - this.complete = (user) => { - this.opts.complete user + this.complete = user => { + this.opts.complete(user); + }; this.close = () => { this.opts.close(); + }; - function contains(parent, child) - node = child.parentNode - while node? - if node == parent - return true - node = node.parentNode - return false </script> </mk-autocomplete-suggestion> diff --git a/src/web/app/desktop/tags/big-follow-button.tag b/src/web/app/desktop/tags/big-follow-button.tag index ba607c8372..309e6ce8ed 100644 --- a/src/web/app/desktop/tags/big-follow-button.tag +++ b/src/web/app/desktop/tags/big-follow-button.tag @@ -106,21 +106,21 @@ if this.user.is_following this.api('following/delete', { user_id: this.user.id - .then => + }).then(() => { this.user.is_following = false .catch (err) -> console.error err - .then => + }).then(() => { this.wait = false this.update(); else this.api('following/create', { user_id: this.user.id - .then => + }).then(() => { this.user.is_following = true .catch (err) -> console.error err - .then => + }).then(() => { this.wait = false this.update(); </script> diff --git a/src/web/app/desktop/tags/contextmenu.tag b/src/web/app/desktop/tags/contextmenu.tag index 92c8b71a2e..8df11c3819 100644 --- a/src/web/app/desktop/tags/contextmenu.tag +++ b/src/web/app/desktop/tags/contextmenu.tag @@ -1,4 +1,5 @@ -<mk-contextmenu><yield /> +<mk-contextmenu> + <yield /> <style> :scope $width = 240px @@ -94,46 +95,45 @@ </style> <script> - this.root.addEventListener 'contextmenu' (e) => + const contains = require('../../common/scripts/contains'); + + this.root.addEventListener('contextmenu', e => { e.preventDefault(); + }); - this.mousedown = (e) => { + this.mousedown = e => { e.preventDefault(); - if (!contains this.root, e.target) and (this.root != e.target) - @close(); - return false + if (!contains(this.root, e.target) && (this.root != e.target)) this.close(); + return false; + }; + + this.open = pos => { + document.querySelectorAll('body *').forEach(el => { + el.addEventListener('mousedown', this.mousedown); + }); - this.open = (pos) => { - all = document.query-selector-all 'body *' - Array.prototype.forEach.call all, (el) => - el.addEventListener 'mousedown' @mousedown - this.root.style.display = 'block' - this.root.style.left = pos.x + 'px' - this.root.style.top = pos.y + 'px' + this.root.style.display = 'block'; + this.root.style.left = pos.x + 'px'; + this.root.style.top = pos.y + 'px'; - Velocity(this.root, 'finish' true - Velocity(this.root, { opacity: 0 } 0ms + Velocity(this.root, 'finish', true); + Velocity(this.root, { opacity: 0 }, 0); Velocity(this.root, { opacity: 1 }, { - queue: false - duration: 100ms - easing: 'linear' - } + queue: false, + duration: 100, + easing: 'linear' + }); + }; this.close = () => { - all = document.query-selector-all 'body *' - Array.prototype.forEach.call all, (el) => - el.removeEventListener 'mousedown' @mousedown + document.querySelectorAll('body *').forEach(el => { + el.removeEventListener('mousedown', this.mousedown); + }); + this.trigger('closed'); this.unmount(); - - function contains(parent, child) - node = child.parentNode - while (node != null) - if (node == parent) - return true - node = node.parentNode - return false + }; </script> </mk-contextmenu> diff --git a/src/web/app/desktop/tags/dialog.tag b/src/web/app/desktop/tags/dialog.tag index 61a40e7b39..c0df0b330f 100644 --- a/src/web/app/desktop/tags/dialog.tag +++ b/src/web/app/desktop/tags/dialog.tag @@ -79,69 +79,72 @@ </style> <script> - this.can-through = if opts.can-through? then opts.can-through else true - this.opts.buttons.forEach (button) => - button._onclick = => - if button.onclick? - button.onclick(); - @close(); + this.canThrough = opts.canThrough != null ? opts.canThrough : true; + this.opts.buttons.forEach(button => { + button._onclick = () => { + if (button.onclick) button.onclick(); + this.close(); + }; + }); 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.pointer-events = 'auto' - Velocity(this.refs.bg, 'finish' true + this.refs.bg.style.pointerEvents = 'auto'; + Velocity(this.refs.bg, 'finish', true); Velocity(this.refs.bg, { opacity: 1 }, { - queue: false - duration: 100ms - easing: 'linear' - } + queue: false, + duration: 100, + easing: 'linear' + }); Velocity(this.refs.main, { - opacity: 0 + opacity: 0, scale: 1.2 }, { duration: 0 - } + }); Velocity(this.refs.main, { - opacity: 1 + opacity: 1, scale: 1 }, { - duration: 300ms + duration: 300, easing: [ 0, 0.5, 0.5, 1 ] - } + }); + }); this.close = () => { - this.refs.bg.style.pointer-events = 'none' - Velocity(this.refs.bg, 'finish' true + this.refs.bg.style.pointerEvents = 'none'; + Velocity(this.refs.bg, 'finish', true); Velocity(this.refs.bg, { opacity: 0 }, { - queue: false - duration: 300ms + queue: false, + duration: 300, easing: 'linear' - } + }); - this.refs.main.style.pointer-events = 'none' - Velocity(this.refs.main, 'finish' true + this.refs.main.style.pointerEvents = 'none'; + Velocity(this.refs.main, 'finish', true); Velocity(this.refs.main, { - opacity: 0 + opacity: 0, scale: 0.8 }, { - queue: false - duration: 300ms - easing: [ 0.5, -0.5, 1, 0.5 ] - complete: => - this.unmount(); - } + queue: false, + duration: 300, + easing: [ 0.5, -0.5, 1, 0.5 ], + complete: () => this.unmount() + }); + }; - this.bg-click = () => { - if @can-through - if this.opts.on-through? - this.opts.on-through! - @close(); + this.bgClick = () => { + if (this.canThrough) { + if (this.opts.onThrough) this.opts.onThrough(); + this.close(); + } + }; </script> </mk-dialog> diff --git a/src/web/app/desktop/tags/drive/browser.tag b/src/web/app/desktop/tags/drive/browser.tag index 13019dd160..51c26943a2 100644 --- a/src/web/app/desktop/tags/drive/browser.tag +++ b/src/web/app/desktop/tags/drive/browser.tag @@ -408,7 +408,7 @@ this.api('drive/files/update', { file_id: file folder_id: if this.folder? then this.folder.id else null - .then => + }).then(() => { // something .catch (err, text-status) => console.error err @@ -425,7 +425,7 @@ this.api('drive/folders/update', { folder_id: folder parent_id: if this.folder? then this.folder.id else null - .then => + }).then(() => { // something .catch (err) => if err == 'detected-circular-definition' diff --git a/src/web/app/desktop/tags/drive/file-contextmenu.tag b/src/web/app/desktop/tags/drive/file-contextmenu.tag index 9a615a9022..933ae6db01 100644 --- a/src/web/app/desktop/tags/drive/file-contextmenu.tag +++ b/src/web/app/desktop/tags/drive/file-contextmenu.tag @@ -68,7 +68,7 @@ this.api('drive/files/update', { file_id: this.file.id name: name - .then => + }).then(() => { // something .catch (err) => console.error err diff --git a/src/web/app/desktop/tags/drive/folder-contextmenu.tag b/src/web/app/desktop/tags/drive/folder-contextmenu.tag index 833eff42e2..582aa5e52c 100644 --- a/src/web/app/desktop/tags/drive/folder-contextmenu.tag +++ b/src/web/app/desktop/tags/drive/folder-contextmenu.tag @@ -54,7 +54,7 @@ this.api('drive/folders/update', { folder_id: this.folder.id name: name - .then => + }).then(() => { // something .catch (err) => console.error err diff --git a/src/web/app/desktop/tags/drive/folder.tag b/src/web/app/desktop/tags/drive/folder.tag index fff3c13ebe..c9bc5d7f04 100644 --- a/src/web/app/desktop/tags/drive/folder.tag +++ b/src/web/app/desktop/tags/drive/folder.tag @@ -118,7 +118,7 @@ this.api('drive/files/update', { file_id: file folder_id: this.folder.id - .then => + }).then(() => { // something .catch (err, text-status) => console.error err @@ -133,7 +133,7 @@ this.api('drive/folders/update', { folder_id: folder parent_id: this.folder.id - .then => + }).then(() => { // something .catch (err) => if err == 'detected-circular-definition' diff --git a/src/web/app/desktop/tags/drive/nav-folder.tag b/src/web/app/desktop/tags/drive/nav-folder.tag index 3f57fc1293..b485ddb53e 100644 --- a/src/web/app/desktop/tags/drive/nav-folder.tag +++ b/src/web/app/desktop/tags/drive/nav-folder.tag @@ -72,7 +72,7 @@ this.api('drive/files/update', { file_id: file folder_id: if this.folder? then this.folder.id else null - .then => + }).then(() => { // something .catch (err, text-status) => console.error err @@ -87,7 +87,7 @@ this.api('drive/folders/update', { folder_id: folder parent_id: if this.folder? then this.folder.id else null - .then => + }).then(() => { // something .catch (err, text-status) => console.error err diff --git a/src/web/app/desktop/tags/ellipsis-icon.tag b/src/web/app/desktop/tags/ellipsis-icon.tag index 731c2525f1..8462bfc4af 100644 --- a/src/web/app/desktop/tags/ellipsis-icon.tag +++ b/src/web/app/desktop/tags/ellipsis-icon.tag @@ -33,9 +33,5 @@ 40% transform scale(1) - - - - </style> </mk-ellipsis-icon> diff --git a/src/web/app/desktop/tags/follow-button.tag b/src/web/app/desktop/tags/follow-button.tag index 7b5ab7d0e4..64055a158f 100644 --- a/src/web/app/desktop/tags/follow-button.tag +++ b/src/web/app/desktop/tags/follow-button.tag @@ -103,21 +103,21 @@ if this.user.is_following this.api('following/delete', { user_id: this.user.id - .then => + }).then(() => { this.user.is_following = false .catch (err) -> console.error err - .then => + }).then(() => { this.wait = false this.update(); else this.api('following/create', { user_id: this.user.id - .then => + }).then(() => { this.user.is_following = true .catch (err) -> console.error err - .then => + }).then(() => { this.wait = false this.update(); </script> diff --git a/src/web/app/desktop/tags/go-top.tag b/src/web/app/desktop/tags/go-top.tag deleted file mode 100644 index cb75c04807..0000000000 --- a/src/web/app/desktop/tags/go-top.tag +++ /dev/null @@ -1,14 +0,0 @@ -<mk-go-top> - <button class="hidden" title="一番上へ"><i class="fa fa-angle-up"></i></button> - <script> - window.addEventListener 'load' this.on-scroll - window.addEventListener 'scroll' this.on-scroll - window.addEventListener 'resize' this.on-scroll - - this.on-scroll = () => { - if $ window .scroll-top! > 500px - @remove-class 'hidden' - else - @add-class 'hidden' - </script> -</mk-go-top> diff --git a/src/web/app/desktop/tags/images-viewer.tag b/src/web/app/desktop/tags/images-viewer.tag index 986debab4f..8d10ec6564 100644 --- a/src/web/app/desktop/tags/images-viewer.tag +++ b/src/web/app/desktop/tags/images-viewer.tag @@ -39,7 +39,7 @@ this.click = () => { dialog = document.body.appendChild(document.createElement('mk-image-dialog')); - riot.mount dialog, do + riot.mount dialog, do image: @image </script> </mk-images-viewer> diff --git a/src/web/app/desktop/tags/index.js b/src/web/app/desktop/tags/index.js index ed100ef75c..a90e42211d 100644 --- a/src/web/app/desktop/tags/index.js +++ b/src/web/app/desktop/tags/index.js @@ -16,7 +16,6 @@ require('./crop-window.tag'); require('./settings.tag'); require('./settings-window.tag'); require('./analog-clock.tag'); -require('./go-top.tag'); require('./ui-header.tag'); require('./ui-header-account.tag'); require('./ui-header-notifications.tag'); diff --git a/src/web/app/desktop/tags/input-dialog.tag b/src/web/app/desktop/tags/input-dialog.tag index dbfd1cfc70..aa417f0a7e 100644 --- a/src/web/app/desktop/tags/input-dialog.tag +++ b/src/web/app/desktop/tags/input-dialog.tag @@ -1,13 +1,17 @@ <mk-input-dialog> - <mk-window ref="window" is-modal={ true } width={ '500px' }><yield to="header"><i class="fa fa-i-cursor"></i>{ parent.title }</yield> -<yield to="content"> - <div class="body"> - <input ref="text" oninput={ parent.update } onkeydown={ parent.onKeydown } placeholder={ parent.placeholder }/> - </div> - <div class="action"> - <button class="cancel" onclick={ parent.cancel }>キャンセル</button> - <button class="ok" disabled={ !parent.allowEmpty && refs.text.value.length == 0 } onclick={ parent.ok }>決定</button> - </div></yield> + <mk-window ref="window" is-modal={ true } width={ '500px' }> + <yield to="header"> + <i class="fa fa-i-cursor"></i>{ parent.title } + </yield> + <yield to="content"> + <div class="body"> + <input ref="text" oninput={ parent.update } onkeydown={ parent.onKeydown } placeholder={ parent.placeholder }/> + </div> + <div class="action"> + <button class="cancel" onclick={ parent.cancel }>キャンセル</button> + <button class="ok" disabled={ !parent.allowEmpty && refs.text.value.length == 0 } onclick={ parent.ok }>決定</button> + </div> + </yield> </mk-window> <style> :scope @@ -116,18 +120,17 @@ </style> <script> - this.done = false + this.done = false; - this.title = this.opts.title - this.placeholder = this.opts.placeholder - this.default = this.opts.default - this.allow-empty = if this.opts.allow-empty? then this.opts.allow-empty else true + this.title = this.opts.title; + this.placeholder = this.opts.placeholder; + this.default = this.opts.default; + this.allowEmpty = this.opts.allowEmpty != null ? this.opts.allowEmpty : true; this.on('mount', () => { - this.text = this.refs.window.refs.text - if @default? - @text.value = @default - @text.focus(); + this.text = this.refs.window.refs.text; + if (this.default) this.text.value = this.default; + this.text.focus(); this.refs.window.on('closing', () => { if @done @@ -138,6 +141,7 @@ this.refs.window.on('closed', () => { this.unmount(); + }); this.cancel = () => { this.done = false @@ -148,7 +152,7 @@ this.done = true this.refs.window.close(); - this.on-keydown = (e) => { + this.onKeydown = (e) => { if e.which == 13 // Enter e.preventDefault(); e.stopPropagation(); diff --git a/src/web/app/desktop/tags/post-detail-sub.tag b/src/web/app/desktop/tags/post-detail-sub.tag index f5fec6f6a5..24feda9be3 100644 --- a/src/web/app/desktop/tags/post-detail-sub.tag +++ b/src/web/app/desktop/tags/post-detail-sub.tag @@ -127,13 +127,13 @@ if this.post.is_liked this.api('posts/likes/delete', { post_id: this.post.id - .then => + }).then(() => { this.post.is_liked = false this.update(); else this.api('posts/likes/create', { post_id: this.post.id - .then => + }).then(() => { this.post.is_liked = true this.update(); </script> diff --git a/src/web/app/desktop/tags/post-detail.tag b/src/web/app/desktop/tags/post-detail.tag index 3b5671452a..00426ea9bb 100644 --- a/src/web/app/desktop/tags/post-detail.tag +++ b/src/web/app/desktop/tags/post-detail.tag @@ -412,13 +412,13 @@ if this.p.is_liked this.api('posts/likes/delete', { post_id: this.p.id - .then => + }).then(() => { this.p.is_liked = false this.update(); else this.api('posts/likes/create', { post_id: this.p.id - .then => + }).then(() => { this.p.is_liked = true this.update(); diff --git a/src/web/app/desktop/tags/post-form.tag b/src/web/app/desktop/tags/post-form.tag index fe435c4e4f..cb1693420c 100644 --- a/src/web/app/desktop/tags/post-form.tag +++ b/src/web/app/desktop/tags/post-form.tag @@ -455,7 +455,7 @@ .catch (err) => console.error err @notify '投稿できませんでした' - .then => + }).then(() => { this.wait = false this.update(); diff --git a/src/web/app/desktop/tags/repost-form.tag b/src/web/app/desktop/tags/repost-form.tag index c3e3e02dfe..7d309bf754 100644 --- a/src/web/app/desktop/tags/repost-form.tag +++ b/src/web/app/desktop/tags/repost-form.tag @@ -127,14 +127,14 @@ this.wait = true this.api('posts/create', { repost_id: this.opts.post.id - text: if @quote then this.refs.text.value else undefined + text: if this.quote then this.refs.text.value else undefined }).then((data) => { this.trigger('posted'); @notify 'Repostしました!' .catch (err) => console.error err @notify 'Repostできませんでした' - .then => + }).then(() => { this.wait = false this.update(); diff --git a/src/web/app/desktop/tags/search-posts.tag b/src/web/app/desktop/tags/search-posts.tag index bad055eb04..248b8cc87d 100644 --- a/src/web/app/desktop/tags/search-posts.tag +++ b/src/web/app/desktop/tags/search-posts.tag @@ -42,7 +42,7 @@ window.addEventListener 'scroll' this.on-scroll this.api('posts/search', { - query: @query + query: this.query }).then((posts) => { this.is-loading = false this.is-empty = posts.length == 0 @@ -68,7 +68,7 @@ this.more-loading = true this.update(); this.api('posts/search', { - query: @query + query: this.query page: this.page + 1 }).then((posts) => { this.more-loading = false diff --git a/src/web/app/desktop/tags/sub-post-content.tag b/src/web/app/desktop/tags/sub-post-content.tag index 8d4a06b49d..e0509ab7d4 100644 --- a/src/web/app/desktop/tags/sub-post-content.tag +++ b/src/web/app/desktop/tags/sub-post-content.tag @@ -1,5 +1,11 @@ <mk-sub-post-content> - <div class="body"><a class="reply" if={ post.reply_to_id }><i class="fa fa-reply"></i></a><span ref="text"></span><a class="quote" if={ post.repost_id } href={ '/post:' + post.repost_id }>RP: ...</a></div> + <div class="body"> + <a class="reply" if={ post.reply_to_id }> + <i class="fa fa-reply"></i> + </a> + <span ref="text"></span> + <a class="quote" if={ post.repost_id } href={ '/post:' + post.repost_id }>RP: ...</a> + </div> <details if={ post.media }> <summary>({ post.media.length }つのメディア)</summary> <mk-images-viewer images={ post.media }></mk-images-viewer> @@ -31,15 +37,17 @@ this.mixin('text'); this.mixin('user-preview'); - this.post = this.opts.post + this.post = this.opts.post; this.on('mount', () => { - if this.post.text? - tokens = @analyze this.post.text - this.refs.text.innerHTML = @compile tokens, false + if (this.post.text) { + const tokens = this.analyze(this.post.text); + this.refs.text.innerHTML = this.compile(tokens, false); - this.refs.text.children.forEach (e) => - if e.tag-name == 'MK-URL' - riot.mount e + this.refs.text.children.forEach(e => { + if (e.tagName == 'MK-URL') riot.mount(e); + }); + } + }); </script> </mk-sub-post-content> diff --git a/src/web/app/desktop/tags/timeline-post.tag b/src/web/app/desktop/tags/timeline-post.tag index 5b656f812d..440d5d9f42 100644 --- a/src/web/app/desktop/tags/timeline-post.tag +++ b/src/web/app/desktop/tags/timeline-post.tag @@ -324,7 +324,7 @@ this.mixin('NotImplementedException'); this.post = this.opts.post; - this.isRepost = this.post.repost != null && this.post.text == null; + this.isRepost = this.post.repost && this.post.text == null; this.p = this.isRepost ? this.post.repost : this.post; this.title = this.dateStringify(this.p.created_at); @@ -354,58 +354,87 @@ }); this.reply = () => { - form = document.body.appendChild(document.createElement('mk-post-form-window')); - riot.mount form, do + riot.mount(document.body.appendChild(document.createElement('mk-post-form-window')), { reply: this.p + }); + }; this.repost = () => { - form = document.body.appendChild(document.createElement('mk-repost-form-window')); - riot.mount form, do + riot.mount(document.body.appendChild(document.createElement('mk-repost-form-window')), { post: this.p + }); + }; this.like = () => { - if this.p.is_liked + if (this.p.is_liked) { this.api('posts/likes/delete', { post_id: this.p.id - .then => - this.p.is_liked = false + }).then(() => { + this.p.is_liked = false; this.update(); - else + }); + } else { this.api('posts/likes/create', { post_id: this.p.id - .then => - this.p.is_liked = true + }).then(() => { + this.p.is_liked = true; this.update(); + }); + } + }; + + this.toggleDetail = () => { + this.update({ + isDetailOpened: !this.isDetailOpened + }); + }; + + this.onKeyDown = e => { + let shouldBeCancel = true; - this.toggle-detail = () => { - this.is-detail-opened = !@is-detail-opened - this.update(); + switch (true) { + case e.which == 38: // [↑] + case e.which == 74: // [j] + case e.which == 9 && e.shiftKey: // [Shift] + [Tab] + focus(this.root, e => e.previousElementSibling); + break; - this.on-key-down = (e) => { - should-be-cancel = true - switch - | e.which == 38 or e.which == 74 or (e.which == 9 and e.shift-key) => // ↑, j or Shift+Tab - focus this.root, (e) -> e.previousElementSibling - | e.which == 40 or e.which == 75 or e.which == 9 => // ↓, k or Tab - focus this.root, (e) -> e.nextElementSibling - | e.which == 81 or e.which == 69 => // q or e - @repost! - | e.which == 70 or e.which == 76 => // f or l - @like! - | e.which == 82 => // r - @reply! - | _ => - should-be-cancel = false + case e.which == 40: // [↓] + case e.which == 75: // [k] + case e.which == 9: // [Tab] + focus(this.root, e => e.nextElementSibling); + break; - if should-be-cancel - e.preventDefault(); + case e.which == 81: // [q] + case e.which == 69: // [e] + this.repost(); + break; - function focus(el, fn) - target = fn el - if target? - if target.has-attribute 'tabindex' + case e.which == 70: // [f] + case e.which == 76: // [l] + this.like(); + break; + + case e.which == 82: // [r] + this.reply(); + break; + + default: + shouldBeCancel = false; + } + + if (shouldBeCancel) e.preventDefault(); + }; + + function focus(el, fn) { + const target = fn(el); + if (target) { + if (target.hasAttribute('tabindex')) { target.focus(); - else - focus target, fn + } else { + focus(target, fn); + } + } + } </script> </mk-timeline-post> diff --git a/src/web/app/desktop/tags/window.tag b/src/web/app/desktop/tags/window.tag index 33bb244fa7..bd9df88231 100644 --- a/src/web/app/desktop/tags/window.tag +++ b/src/web/app/desktop/tags/window.tag @@ -501,7 +501,7 @@ this.ondragover = (e) => { e.dataTransfer.dropEffect = 'none' - this.on-keydown = (e) => { + this.onKeydown = (e) => { if e.which == 27 // Esc if @can-close e.preventDefault(); diff --git a/src/web/app/dev/tags/new-app-form.tag b/src/web/app/dev/tags/new-app-form.tag index 6be1c54487..c75eec37dd 100644 --- a/src/web/app/dev/tags/new-app-form.tag +++ b/src/web/app/dev/tags/new-app-form.tag @@ -233,7 +233,7 @@ description: description callback_url: cb permission: permission.join ',' - .then => + }).then(() => { location.href = '/apps' .catch => alert 'アプリの作成に失敗しました。再度お試しください。' diff --git a/src/web/app/mobile/tags/drive/file-viewer.tag b/src/web/app/mobile/tags/drive/file-viewer.tag index 5f2c5f61fb..e91a451c0d 100644 --- a/src/web/app/mobile/tags/drive/file-viewer.tag +++ b/src/web/app/mobile/tags/drive/file-viewer.tag @@ -192,9 +192,9 @@ name = window.prompt '名前を変更' this.file.name if name? and name != '' and name != this.file.name this.api('drive/files/update', { - file_id: this.file.id + file_id: this.file.id, name: name - .then => + }).then(() => { this.parent.cf this.file, true </script> diff --git a/src/web/app/mobile/tags/follow-button.tag b/src/web/app/mobile/tags/follow-button.tag index ecd0dc594d..43fcc3499c 100644 --- a/src/web/app/mobile/tags/follow-button.tag +++ b/src/web/app/mobile/tags/follow-button.tag @@ -84,21 +84,21 @@ if this.user.is_following this.api('following/delete', { user_id: this.user.id - .then => + }).then(() => { this.user.is_following = false .catch (err) -> console.error err - .then => + }).then(() => { this.wait = false this.update(); else this.api('following/create', { user_id: this.user.id - .then => + }).then(() => { this.user.is_following = true .catch (err) -> console.error err - .then => + }).then(() => { this.wait = false this.update(); </script> diff --git a/src/web/app/mobile/tags/post-detail.tag b/src/web/app/mobile/tags/post-detail.tag index 61983a1592..2b4bef1da3 100644 --- a/src/web/app/mobile/tags/post-detail.tag +++ b/src/web/app/mobile/tags/post-detail.tag @@ -406,13 +406,13 @@ if this.p.is_liked this.api('posts/likes/delete', { post_id: this.p.id - .then => + }).then(() => { this.p.is_liked = false this.update(); else this.api('posts/likes/create', { post_id: this.p.id - .then => + }).then(() => { this.p.is_liked = true this.update(); diff --git a/src/web/app/mobile/tags/search-posts.tag b/src/web/app/mobile/tags/search-posts.tag index 83c4b9cfb4..2dbb162d7b 100644 --- a/src/web/app/mobile/tags/search-posts.tag +++ b/src/web/app/mobile/tags/search-posts.tag @@ -9,24 +9,24 @@ <script> this.mixin('api'); - this.max = 30 - this.offset = 0 + this.max = 30; + this.offset = 0; - this.query = this.opts.query - this.with-media = this.opts.with-media + this.query = this.opts.query; + this.withMedia = this.opts.withMedia; this.init = new Promise (res, rej) => this.api('posts/search', { - query: @query - }).then((posts) => { + query: this.query + }).then(posts => { res posts this.trigger('loaded'); this.more = () => { - @offset += @max + this.offset += this.max; this.api('posts/search', { - query: @query - max: @max - offset: @offset + query: this.query + max: this.max + offset: this.offset </script> </mk-search-posts> diff --git a/src/web/app/mobile/tags/user-timeline.tag b/src/web/app/mobile/tags/user-timeline.tag index 2d3716b848..71fb1ac272 100644 --- a/src/web/app/mobile/tags/user-timeline.tag +++ b/src/web/app/mobile/tags/user-timeline.tag @@ -11,21 +11,21 @@ <script> this.mixin('api'); - this.user = this.opts.user - this.with-media = this.opts.with-media + this.user = this.opts.user; + this.withMedia = this.opts.withMedia; this.init = new Promise (res, rej) => this.api('users/posts', { user_id: this.user.id - with_media: @with-media - }).then((posts) => { + with_media: @withMedia + }).then(posts => { res posts this.trigger('loaded'); this.more = () => { this.api('users/posts', { user_id: this.user.id - with_media: @with-media + with_media: this.withMedia max_id: this.refs.timeline.tail!.id </script> </mk-user-timeline> |