From 816a43c841adcd4b53311026f942e6d529d89df1 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
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 @@
</ul>
</mk-contextmenu>
<script>
- this.browser = this.opts.browser
+ this.browser = this.opts.browser;
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.createFolder = () => {
- this.browser.createFolder!
+ this.browser.createFolder();
this.refs.ctx.close();
+ };
this.upload = () => {
- this.browser.select-local-file!
+ this.browser.selectLocalFile();
this.refs.ctx.close();
+ };
- this.url-upload = () => {
- this.browser.url-upload!
+ this.urlUpload = () => {
+ this.browser.urlUpload();
this.refs.ctx.close();
+ };
</script>
</mk-drive-browser-base-contextmenu>
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 @@
<script>
this.mixin('api');
- this.folder = if this.opts.folder? then this.opts.folder else null
+ this.folder = this.opts.folder ? this.opts.folder : null;
this.on('mount', () => {
this.refs.window.on('closed', () => {
this.unmount();
+ });
- this.api 'drive' }).then((info) => {
- @update do
+ this.api('drive').then(info => {
+ this.update({
usage: info.usage / info.capacity * 100
+ });
+ });
+ });
this.close = () => {
this.refs.window.close();
+ };
</script>
</mk-drive-browser-window>
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 @@
<li onclick={ parent.setBanner }>
<p>バナーに設定</p>
</li>
- <li onclick={ parent.setWallpaper }>
- <p>壁紙に設定</p>
- </li>
</ul>
</li>
<li class="has-child">
@@ -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();
+ };
</script>
</mk-drive-browser-file-contextmenu>
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;
+ };
</script>
</mk-drive-browser-file>
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
+ });
+ });
+ };
</script>
</mk-drive-browser-folder-contextmenu>
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
- '<i class="fa fa-exclamation-triangle"></i>操作を完了できません'
- '移動先のフォルダーは、移動するフォルダーのサブフォルダーです。'
- [
- text: 'OK'
- ]
+ }).catch(err => {
+ switch (err) {
+ case 'detected-circular-definition':
+ this.dialog('<i class="fa fa-exclamation-triangle"></i>操作を完了できません',
+ '移動先のフォルダーは、移動するフォルダーのサブフォルダーです。', [{
+ 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;
+ };
</script>
</mk-drive-browser-folder>
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;
+ };
</script>
</mk-drive-browser-nav-folder>