From 816a43c841adcd4b53311026f942e6d529d89df1 Mon Sep 17 00:00:00 2001 From: syuilo Date: Tue, 21 Feb 2017 17:52:10 +0900 Subject: [PATCH] wip --- .../desktop/tags/drive/base-contextmenu.tag | 20 ++- .../app/desktop/tags/drive/browser-window.tag | 11 +- .../desktop/tags/drive/file-contextmenu.tag | 58 +++--- src/web/app/desktop/tags/drive/file.tag | 90 +++++----- .../desktop/tags/drive/folder-contextmenu.tag | 28 +-- src/web/app/desktop/tags/drive/folder.tag | 167 ++++++++++-------- src/web/app/desktop/tags/drive/nav-folder.tag | 99 ++++++----- 7 files changed, 254 insertions(+), 219 deletions(-) diff --git a/src/web/app/desktop/tags/drive/base-contextmenu.tag b/src/web/app/desktop/tags/drive/base-contextmenu.tag index 06ccba6a2..2a95de0cd 100644 --- a/src/web/app/desktop/tags/drive/base-contextmenu.tag +++ b/src/web/app/desktop/tags/drive/base-contextmenu.tag @@ -13,26 +13,32 @@ diff --git a/src/web/app/desktop/tags/drive/browser-window.tag b/src/web/app/desktop/tags/drive/browser-window.tag index f558b3d84..a658e3606 100644 --- a/src/web/app/desktop/tags/drive/browser-window.tag +++ b/src/web/app/desktop/tags/drive/browser-window.tag @@ -30,17 +30,22 @@ diff --git a/src/web/app/desktop/tags/drive/file-contextmenu.tag b/src/web/app/desktop/tags/drive/file-contextmenu.tag index 933ae6db0..733ee853f 100644 --- a/src/web/app/desktop/tags/drive/file-contextmenu.tag +++ b/src/web/app/desktop/tags/drive/file-contextmenu.tag @@ -22,9 +22,6 @@

  • バナーに設定

    • -
  • -

    壁紙に設定

    -
  • @@ -46,52 +43,51 @@ this.mixin('input-dialog'); this.mixin('NotImplementedException'); - this.browser = this.opts.browser - this.file = this.opts.file + this.browser = this.opts.browser; + this.file = this.opts.file; this.on('mount', () => { this.refs.ctx.on('closed', () => { this.trigger('closed'); this.unmount(); + }); + }); - this.open = (pos) => { - this.refs.ctx.open pos + this.open = pos => { + this.refs.ctx.open(pos); + }; this.rename = () => { this.refs.ctx.close(); - name <~ @input-dialog do - 'ファイル名の変更' - '新しいファイル名を入力してください' - this.file.name + this.inputDialog('ファイル名の変更', '新しいファイル名を入力してください', this.file.name, name => { + this.api('drive/files/update', { + file_id: this.file.id, + name: name + }) + }); + }; - this.api('drive/files/update', { - file_id: this.file.id - name: name - }).then(() => { - // something - .catch (err) => - console.error err - - this.copy-url = () => { - @NotImplementedException! + this.copyUrl = () => { + this.NotImplementedException(); + }; this.download = () => { this.refs.ctx.close(); + }; - this.set-avatar = () => { + this.setAvatar = () => { this.refs.ctx.close(); - @update-avatar this.I, null, this.file + this.updateAvatar(this.I, null, this.file); + }; - this.set-banner = () => { + this.setBanner = () => { this.refs.ctx.close(); - @update-banner this.I, null, this.file + this.updateBanner(this.I, null, this.file); + }; - this.set-wallpaper = () => { - this.refs.ctx.close(); - @update-wallpaper this.I, null, this.file - - this.add-app = () => { - @NotImplementedException! + this.addApp = () => { + this.NotImplementedException(); + }; diff --git a/src/web/app/desktop/tags/drive/file.tag b/src/web/app/desktop/tags/drive/file.tag index e35d204b6..5d12f2419 100644 --- a/src/web/app/desktop/tags/drive/file.tag +++ b/src/web/app/desktop/tags/drive/file.tag @@ -148,62 +148,72 @@ this.mixin('i'); - this.file = this.opts.file - this.browser = this.parent + this.file = this.opts.file; + this.browser = this.parent; - this.title = this.file.name + '\n' + this.file.type + ' ' + (@bytesToSize this.file.datasize) + this.title = `${this.file.name}\n${this.file.type} ${this.bytesToSize(this.file.datasize)}`; - this.is-contextmenu-showing = false + this.isContextmenuShowing = false; this.onclick = () => { - if this.browser.multiple - if this.file._selected? - this.file._selected = !this.file._selected - else - this.file._selected = true - this.browser.trigger 'change-selection' this.browser.get-selection! - else - if this.file._selected - this.browser.trigger 'selected' this.file - else - this.browser.files.forEach (file) => - file._selected = false - this.file._selected = true - this.browser.trigger 'change-selection' this.file + if (this.browser.multiple) { + if (this.file._selected != null) { + this.file._selected = !this.file._selected; + } else { + this.file._selected = true; + } + this.browser.trigger('change-selection', this.browser.getSelection()); + } else { + if (this.file._selected) { + this.browser.trigger('selected', this.file); + } else { + this.browser.files.forEach(file => file._selected = false); + this.file._selected = true; + this.browser.trigger('change-selection', this.file); + } + } + }; - this.oncontextmenu = (e) => { + this.oncontextmenu = e => { e.preventDefault(); e.stopImmediatePropagation(); - this.is-contextmenu-showing = true - this.update(); - ctx = document.body.appendChild(document.createElement('mk-drive-browser-file-contextmenu')); - ctx = riot.mount ctx, do - browser: this.browser + this.update({ + isContextmenuShowing: true + }); + const ctx = riot.mount(document.body.appendChild(document.createElement('mk-drive-browser-file-contextmenu')), { + browser: this.browser, file: this.file - ctx = ctx.0 - ctx.open do - x: e.pageX - window.pageXOffset + })[0]; + ctx.open({ + x: e.pageX - window.pageXOffset, y: e.pageY - window.pageYOffset + }); ctx.on('closed', () => { - this.is-contextmenu-showing = false - this.update(); - return false + this.update({ + isContextmenuShowing: false + }); + }); + return false; + }; - this.ondragstart = (e) => { - e.dataTransfer.effectAllowed = 'move' - e.dataTransfer.set-data 'text' JSON.stringify do - type: 'file' - id: this.file.id + this.ondragstart = e => { + e.dataTransfer.effectAllowed = 'move'; + e.dataTransfer.setData('text', JSON.stringify({ + type: 'file', + id: this.file.id, file: this.file - this.is-dragging = true + }); + this.isDragging = true; // 親ブラウザに対して、ドラッグが開始されたフラグを立てる // (=あなたの子供が、ドラッグを開始しましたよ) - this.browser.isDragSource = true + this.browser.isDragSource = true; + }; - this.ondragend = (e) => { - this.is-dragging = false - this.browser.isDragSource = false + this.ondragend = e => { + this.isDragging = false; + this.browser.isDragSource = false; + }; diff --git a/src/web/app/desktop/tags/drive/folder-contextmenu.tag b/src/web/app/desktop/tags/drive/folder-contextmenu.tag index 582aa5e52..51e131f44 100644 --- a/src/web/app/desktop/tags/drive/folder-contextmenu.tag +++ b/src/web/app/desktop/tags/drive/folder-contextmenu.tag @@ -30,33 +30,33 @@ this.refs.ctx.on('closed', () => { this.trigger('closed'); this.unmount(); + }); + }; this.move = () => { - this.browser.move this.folder.id + this.browser.move(this.folder.id); this.refs.ctx.close(); + }; this.newWindow = () => { - this.browser.newWindow this.folder.id + this.browser.newWindow(this.folder.id); this.refs.ctx.close(); + }; this.createFolder = () => { this.browser.createFolder(); this.refs.ctx.close(); + }; this.rename = () => { this.refs.ctx.close(); - name <~ @input-dialog do - 'フォルダ名の変更' - '新しいフォルダ名を入力してください' - this.folder.name - - this.api('drive/folders/update', { - folder_id: this.folder.id - name: name - }).then(() => { - // something - .catch (err) => - console.error err + this.inputialog('フォルダ名の変更', '新しいフォルダ名を入力してください', this.folder.name, name => { + this.api('drive/folders/update', { + folder_id: this.folder.id, + name: name + }); + }); + }; diff --git a/src/web/app/desktop/tags/drive/folder.tag b/src/web/app/desktop/tags/drive/folder.tag index abc9368f4..1b804e97a 100644 --- a/src/web/app/desktop/tags/drive/folder.tag +++ b/src/web/app/desktop/tags/drive/folder.tag @@ -53,132 +53,149 @@ this.mixin('api'); this.mixin('dialog'); - this.folder = this.opts.folder - this.browser = this.parent + this.folder = this.opts.folder; + this.browser = this.parent; - this.title = this.folder.name - this.hover = false - this.draghover = false - this.is-contextmenu-showing = false + this.title = this.folder.name; + this.hover = false; + this.draghover = false; + this.isContextmenuShowing = false; this.onclick = () => { - this.browser.move this.folder + this.browser.move(this.folder); + }; this.onmouseover = () => { - this.hover = true + this.hover = true; + }; this.onmouseout = () => { this.hover = false + }; - this.ondragover = (e) => { + this.ondragover = e => { e.preventDefault(); e.stopPropagation(); // 自分自身がドラッグされていない場合 - if !@is-dragging + if (!this.isDragging) { // ドラッグされてきたものがファイルだったら - if e.dataTransfer.effectAllowed == 'all' - e.dataTransfer.dropEffect = 'copy' - else - e.dataTransfer.dropEffect = 'move' - else + if (e.dataTransfer.effectAllowed === 'all') { + e.dataTransfer.dropEffect = 'copy'; + } else { + e.dataTransfer.dropEffect = 'move'; + } + } else { // 自分自身にはドロップさせない - e.dataTransfer.dropEffect = 'none' - return false + e.dataTransfer.dropEffect = 'none'; + } + return false; + }; this.ondragenter = () => { - if !@is-dragging - this.draghover = true + if (!this.isDragging) this.draghover = true; + }; this.ondragleave = () => { - this.draghover = false + this.draghover = false; + }; - this.ondrop = (e) => { + this.ondrop = e => { e.stopPropagation(); - this.draghover = false + this.draghover = false; // ファイルだったら - if e.dataTransfer.files.length > 0 - Array.prototype.forEach.call e.dataTransfer.files, (file) => - this.browser.upload file, this.folder - return false + if (e.dataTransfer.files.length > 0) { + e.dataTransfer.files.forEach(file => { + this.browser.upload(file, this.folder); + }); + return false; + }; // データ取得 - data = e.dataTransfer.get-data 'text' - if !data? - return false + const data = e.dataTransfer.getData('text'); + if (data == null) return false; // パース - obj = JSON.parse data + // TODO: Validate JSON + const obj = JSON.parse(data); // (ドライブの)ファイルだったら - if obj.type == 'file' - file = obj.id - this.browser.remove-file file + if (obj.type == 'file') { + const file = obj.id; + this.browser.removeFile(file); this.api('drive/files/update', { - file_id: file + file_id: file, folder_id: this.folder.id - }).then(() => { - // something - .catch (err, text-status) => - console.error err - + }); // (ドライブの)フォルダーだったら - else if obj.type == 'folder' - folder = obj.id + } else if (obj.type == 'folder') { + const folder = obj.id; // 移動先が自分自身ならreject - if folder == this.folder.id - return false - this.browser.remove-folder folder + if (folder == this.folder.id) return false; + this.browser.removeFolder(folder); this.api('drive/folders/update', { - folder_id: folder + folder_id: folder, parent_id: this.folder.id }).then(() => { // something - .catch (err) => - if err == 'detected-circular-definition' - @dialog do - '操作を完了できません' - '移動先のフォルダーは、移動するフォルダーのサブフォルダーです。' - [ - text: 'OK' - ] + }).catch(err => { + switch (err) { + case 'detected-circular-definition': + this.dialog('操作を完了できません', + '移動先のフォルダーは、移動するフォルダーのサブフォルダーです。', [{ + text: 'OK' + }]); + break; + default: + alert('不明なエラー' + err); + } + }); + } - return false + return false; + }; - this.ondragstart = (e) => { - e.dataTransfer.effectAllowed = 'move' - e.dataTransfer.set-data 'text' JSON.stringify do - type: 'folder' + this.ondragstart = e => { + e.dataTransfer.effectAllowed = 'move'; + e.dataTransfer.setData('text', JSON.stringify({ + type: 'folder', id: this.folder.id - this.is-dragging = true + })); + this.isDragging = true; // 親ブラウザに対して、ドラッグが開始されたフラグを立てる // (=あなたの子供が、ドラッグを開始しましたよ) - this.browser.isDragSource = true + this.browser.isDragSource = true; + }; - this.ondragend = (e) => { - this.is-dragging = false - this.browser.isDragSource = false + this.ondragend = e => { + this.isDragging = false; + this.browser.isDragSource = false; + }; - this.oncontextmenu = (e) => { + this.oncontextmenu = e => { e.preventDefault(); e.stopImmediatePropagation(); - this.is-contextmenu-showing = true - this.update(); - ctx = document.body.appendChild(document.createElement('mk-drive-browser-folder-contextmenu')); - ctx = riot.mount ctx, do - browser: this.browser + this.update({ + isContextmenuShowing: true + }); + const ctx = riot.mount(document.body.appendChild(document.createElement('mk-drive-browser-folder-contextmenu')), { + browser: this.browser, folder: this.folder - ctx = ctx.0 - ctx.open do - x: e.pageX - window.pageXOffset + })[0]; + ctx.open({ + x: e.pageX - window.pageXOffset, y: e.pageY - window.pageYOffset + }); ctx.on('closed', () => { - this.is-contextmenu-showing = false - this.update(); + this.update({ + isContextmenuShowing: false + }); + }); - return false + return false; + }; diff --git a/src/web/app/desktop/tags/drive/nav-folder.tag b/src/web/app/desktop/tags/drive/nav-folder.tag index b485ddb53..e961ac491 100644 --- a/src/web/app/desktop/tags/drive/nav-folder.tag +++ b/src/web/app/desktop/tags/drive/nav-folder.tag @@ -10,88 +10,89 @@ // Riotのバグでnullを渡しても""になる // https://github.com/riot/riot/issues/2080 - #this.folder = this.opts.folder - this.folder = if this.opts.folder? and this.opts.folder != '' then this.opts.folder else null - this.browser = this.parent + //this.folder = this.opts.folder + this.folder = this.opts.folder && this.opts.folder != '' ? this.opts.folder : null; + this.browser = this.parent; - this.hover = false + this.hover = false; this.onclick = () => { - this.browser.move this.folder + this.browser.move(this.folder); + }; this.onmouseover = () => { this.hover = true + }; this.onmouseout = () => { this.hover = false + }; - this.ondragover = (e) => { + this.ondragover = e => { e.preventDefault(); e.stopPropagation(); // このフォルダがルートかつカレントディレクトリならドロップ禁止 - if this.folder == null and this.browser.folder == null - e.dataTransfer.dropEffect = 'none' + if (this.folder == null && this.browser.folder == null) { + e.dataTransfer.dropEffect = 'none'; // ドラッグされてきたものがファイルだったら - else if e.dataTransfer.effectAllowed == 'all' - e.dataTransfer.dropEffect = 'copy' - else - e.dataTransfer.dropEffect = 'move' - return false + } else if (e.dataTransfer.effectAllowed == 'all') { + e.dataTransfer.dropEffect = 'copy'; + } else { + e.dataTransfer.dropEffect = 'move'; + } + return false; + }; this.ondragenter = () => { - if this.folder != null or this.browser.folder != null - this.draghover = true + if (this.folder || this.browser.folder) this.draghover = true; + }; this.ondragleave = () => { - if this.folder != null or this.browser.folder != null - this.draghover = false + if (this.folder || this.browser.folder) this.draghover = false; + }; - this.ondrop = (e) => { + this.ondrop = e => { e.stopPropagation(); - this.draghover = false + this.draghover = false; // ファイルだったら - if e.dataTransfer.files.length > 0 - Array.prototype.forEach.call e.dataTransfer.files, (file) => - this.browser.upload file, this.folder - return false + if (e.dataTransfer.files.length > 0) { + e.dataTransfer.files.forEach(file => { + this.browser.upload(file, this.folder); + }); + return false; + }; // データ取得 - data = e.dataTransfer.get-data 'text' - if !data? - return false + const data = e.dataTransfer.getData('text'); + if (data == null) return false; // パース - obj = JSON.parse data + // TODO: Validate JSON + const obj = JSON.parse(data); // (ドライブの)ファイルだったら - if obj.type == 'file' - file = obj.id - this.browser.remove-file file + if (obj.type == 'file') { + const file = obj.id; + this.browser.removeFile(file); this.api('drive/files/update', { - file_id: file - folder_id: if this.folder? then this.folder.id else null - }).then(() => { - // something - .catch (err, text-status) => - console.error err - + file_id: file, + folder_id: this.folder ? this.folder.id : null + }); // (ドライブの)フォルダーだったら - else if obj.type == 'folder' - folder = obj.id + } else if (obj.type == 'folder') { + const folder = obj.id; // 移動先が自分自身ならreject - if this.folder? and folder == this.folder.id - return false - this.browser.remove-folder folder + if (this.folder && folder == this.folder.id) return false; + this.browser.removeFolder(folder); this.api('drive/folders/update', { - folder_id: folder - parent_id: if this.folder? then this.folder.id else null - }).then(() => { - // something - .catch (err, text-status) => - console.error err + folder_id: folder, + parent_id: this.folder ? this.folder.id : null + }); + } - return false + return false; + };