natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip

This commit is contained in:
syuilo 2017-02-21 17:52:10 +09:00
parent 3ea73a888d
commit e8378c2bb8
7 changed files with 254 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/web/app/desktop/tags/drive/base-contextmenu.tag
View File

@ -13,26 +13,32 @@
</ul> </ul>
</mk-contextmenu> </mk-contextmenu>
<script> <script>
this.browser = this.opts.browser this.browser = this.opts.browser;
this.on('mount', () => { this.on('mount', () => {
this.refs.ctx.on('closed', () => { this.refs.ctx.on('closed', () => {
this.trigger('closed'); this.trigger('closed');
this.unmount(); this.unmount();
});
});
this.open = (pos) => { this.open = pos => {
this.refs.ctx.open pos this.refs.ctx.open(pos);
};
this.createFolder = () => { this.createFolder = () => {
this.browser.createFolder! this.browser.createFolder();
this.refs.ctx.close(); this.refs.ctx.close();
};
this.upload = () => { this.upload = () => {
this.browser.select-local-file! this.browser.selectLocalFile();
this.refs.ctx.close(); this.refs.ctx.close();
};
this.url-upload = () => { this.urlUpload = () => {
this.browser.url-upload! this.browser.urlUpload();
this.refs.ctx.close(); this.refs.ctx.close();
};
</script> </script>
</mk-drive-browser-base-contextmenu> </mk-drive-browser-base-contextmenu>

11
src/web/app/desktop/tags/drive/browser-window.tag
View File

@ -30,17 +30,22 @@
<script> <script>
this.mixin('api'); 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.on('mount', () => {
this.refs.window.on('closed', () => { this.refs.window.on('closed', () => {
this.unmount(); this.unmount();
});
this.api 'drive' }).then((info) => { this.api('drive').then(info => {
@update do this.update({
usage: info.usage / info.capacity * 100 usage: info.usage / info.capacity * 100
});
});
});
this.close = () => { this.close = () => {
this.refs.window.close(); this.refs.window.close();
};
</script> </script>
</mk-drive-browser-window> </mk-drive-browser-window>

58
src/web/app/desktop/tags/drive/file-contextmenu.tag
View File

@ -22,9 +22,6 @@
<li onclick={ parent.setBanner }> <li onclick={ parent.setBanner }>
<p>バナーに設定</p> <p>バナーに設定</p>
</li> </li>
<li onclick={ parent.setWallpaper }>
<p>壁紙に設定</p>
</li>
</ul> </ul>
</li> </li>
<li class="has-child"> <li class="has-child">
@ -46,52 +43,51 @@
this.mixin('input-dialog'); this.mixin('input-dialog');
this.mixin('NotImplementedException'); this.mixin('NotImplementedException');
this.browser = this.opts.browser this.browser = this.opts.browser;
this.file = this.opts.file this.file = this.opts.file;
this.on('mount', () => { this.on('mount', () => {
this.refs.ctx.on('closed', () => { this.refs.ctx.on('closed', () => {
this.trigger('closed'); this.trigger('closed');
this.unmount(); this.unmount();
});
});
this.open = (pos) => { this.open = pos => {
this.refs.ctx.open pos this.refs.ctx.open(pos);
};
this.rename = () => { this.rename = () => {
this.refs.ctx.close(); this.refs.ctx.close();
name <~ @input-dialog do this.inputDialog('ファイル名の変更', '新しいファイル名を入力してください', this.file.name, name => {
'ファイル名の変更' this.api('drive/files/update', {
'新しいファイル名を入力してください' file_id: this.file.id,
this.file.name name: name
})
});
};
this.api('drive/files/update', { this.copyUrl = () => {
file_id: this.file.id this.NotImplementedException();
name: name };
}).then(() => {
// something
.catch (err) =>
console.error err
this.copy-url = () => {
@NotImplementedException!
this.download = () => { this.download = () => {
this.refs.ctx.close(); this.refs.ctx.close();
};
this.set-avatar = () => { this.setAvatar = () => {
this.refs.ctx.close(); 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(); this.refs.ctx.close();
@update-banner this.I, null, this.file this.updateBanner(this.I, null, this.file);
};
this.set-wallpaper = () => { this.addApp = () => {
this.refs.ctx.close(); this.NotImplementedException();
@update-wallpaper this.I, null, this.file };
this.add-app = () => {
@NotImplementedException!
</script> </script>
</mk-drive-browser-file-contextmenu> </mk-drive-browser-file-contextmenu>

90
src/web/app/desktop/tags/drive/file.tag
View File

@ -148,62 +148,72 @@
this.mixin('i'); this.mixin('i');
this.file = this.opts.file this.file = this.opts.file;
this.browser = this.parent 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 = () => { this.onclick = () => {
if this.browser.multiple if (this.browser.multiple) {
if this.file._selected? if (this.file._selected != null) {
this.file._selected = !this.file._selected this.file._selected = !this.file._selected;
else } else {
this.file._selected = true this.file._selected = true;
this.browser.trigger 'change-selection' this.browser.get-selection! }
else this.browser.trigger('change-selection', this.browser.getSelection());
if this.file._selected } else {
this.browser.trigger 'selected' this.file if (this.file._selected) {
else this.browser.trigger('selected', this.file);
this.browser.files.forEach (file) => } else {
file._selected = false this.browser.files.forEach(file => file._selected = false);
this.file._selected = true this.file._selected = true;
this.browser.trigger 'change-selection' this.file this.browser.trigger('change-selection', this.file);
}
}
};
this.oncontextmenu = (e) => { this.oncontextmenu = e => {
e.preventDefault(); e.preventDefault();
e.stopImmediatePropagation(); e.stopImmediatePropagation();
this.is-contextmenu-showing = true this.update({
this.update(); isContextmenuShowing: true
ctx = document.body.appendChild(document.createElement('mk-drive-browser-file-contextmenu')); });
ctx = riot.mount ctx, do const ctx = riot.mount(document.body.appendChild(document.createElement('mk-drive-browser-file-contextmenu')), {
browser: this.browser browser: this.browser,
file: this.file file: this.file
ctx = ctx.0 })[0];
ctx.open do ctx.open({
x: e.pageX - window.pageXOffset x: e.pageX - window.pageXOffset,
y: e.pageY - window.pageYOffset y: e.pageY - window.pageYOffset
});
ctx.on('closed', () => { ctx.on('closed', () => {
this.is-contextmenu-showing = false this.update({
this.update(); isContextmenuShowing: false
return false });
});
return false;
};
this.ondragstart = (e) => { this.ondragstart = e => {
e.dataTransfer.effectAllowed = 'move' e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.set-data 'text' JSON.stringify do e.dataTransfer.setData('text', JSON.stringify({
type: 'file' type: 'file',
id: this.file.id id: this.file.id,
file: this.file file: this.file
this.is-dragging = true });
this.isDragging = true;
// 親ブラウザに対して、ドラッグが開始されたフラグを立てる // 親ブラウザに対して、ドラッグが開始されたフラグを立てる
// (=あなたの子供が、ドラッグを開始しましたよ) // (=あなたの子供が、ドラッグを開始しましたよ)
this.browser.isDragSource = true this.browser.isDragSource = true;
};
this.ondragend = (e) => { this.ondragend = e => {
this.is-dragging = false this.isDragging = false;
this.browser.isDragSource = false this.browser.isDragSource = false;
};
</script> </script>
</mk-drive-browser-file> </mk-drive-browser-file>

28
src/web/app/desktop/tags/drive/folder-contextmenu.tag
View File

@ -30,33 +30,33 @@
this.refs.ctx.on('closed', () => { this.refs.ctx.on('closed', () => {
this.trigger('closed'); this.trigger('closed');
this.unmount(); this.unmount();
});
};
this.move = () => { this.move = () => {
this.browser.move this.folder.id this.browser.move(this.folder.id);
this.refs.ctx.close(); this.refs.ctx.close();
};
this.newWindow = () => { this.newWindow = () => {
this.browser.newWindow this.folder.id this.browser.newWindow(this.folder.id);
this.refs.ctx.close(); this.refs.ctx.close();
};
this.createFolder = () => { this.createFolder = () => {
this.browser.createFolder(); this.browser.createFolder();
this.refs.ctx.close(); this.refs.ctx.close();
};
this.rename = () => { this.rename = () => {
this.refs.ctx.close(); this.refs.ctx.close();
name <~ @input-dialog do this.inputialog('フォルダ名の変更', '新しいフォルダ名を入力してください', this.folder.name, name => {
'フォルダ名の変更' this.api('drive/folders/update', {
'新しいフォルダ名を入力してください' folder_id: this.folder.id,
this.folder.name name: name
});
this.api('drive/folders/update', { });
folder_id: this.folder.id };
name: name
}).then(() => {
// something
.catch (err) =>
console.error err
</script> </script>
</mk-drive-browser-folder-contextmenu> </mk-drive-browser-folder-contextmenu>

167
src/web/app/desktop/tags/drive/folder.tag
View File

@ -53,132 +53,149 @@
this.mixin('api'); this.mixin('api');
this.mixin('dialog'); this.mixin('dialog');
this.folder = this.opts.folder this.folder = this.opts.folder;
this.browser = this.parent this.browser = this.parent;
this.title = this.folder.name this.title = this.folder.name;
this.hover = false this.hover = false;
this.draghover = false this.draghover = false;
this.is-contextmenu-showing = false this.isContextmenuShowing = false;
this.onclick = () => { this.onclick = () => {
this.browser.move this.folder this.browser.move(this.folder);
};
this.onmouseover = () => { this.onmouseover = () => {
this.hover = true this.hover = true;
};
this.onmouseout = () => { this.onmouseout = () => {
this.hover = false this.hover = false
};
this.ondragover = (e) => { this.ondragover = e => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
// 自分自身がドラッグされていない場合 // 自分自身がドラッグされていない場合
if !@is-dragging if (!this.isDragging) {
// ドラッグされてきたものがファイルだったら // ドラッグされてきたものがファイルだったら
if e.dataTransfer.effectAllowed == 'all' if (e.dataTransfer.effectAllowed === 'all') {
e.dataTransfer.dropEffect = 'copy' e.dataTransfer.dropEffect = 'copy';
else } else {
e.dataTransfer.dropEffect = 'move' e.dataTransfer.dropEffect = 'move';
else }
} else {
// 自分自身にはドロップさせない // 自分自身にはドロップさせない
e.dataTransfer.dropEffect = 'none' e.dataTransfer.dropEffect = 'none';
return false }
return false;
};
this.ondragenter = () => { this.ondragenter = () => {
if !@is-dragging if (!this.isDragging) this.draghover = true;
this.draghover = true };
this.ondragleave = () => { this.ondragleave = () => {
this.draghover = false this.draghover = false;
};
this.ondrop = (e) => { this.ondrop = e => {
e.stopPropagation(); e.stopPropagation();
this.draghover = false this.draghover = false;
// ファイルだったら // ファイルだったら
if e.dataTransfer.files.length > 0 if (e.dataTransfer.files.length > 0) {
Array.prototype.forEach.call e.dataTransfer.files, (file) => e.dataTransfer.files.forEach(file => {
this.browser.upload file, this.folder this.browser.upload(file, this.folder);
return false });
return false;
};
// データ取得 // データ取得
data = e.dataTransfer.get-data 'text' const data = e.dataTransfer.getData('text');
if !data? if (data == null) return false;
return false
// パース // パース
obj = JSON.parse data // TODO: Validate JSON
const obj = JSON.parse(data);
// (ドライブの)ファイルだったら // (ドライブの)ファイルだったら
if obj.type == 'file' if (obj.type == 'file') {
file = obj.id const file = obj.id;
this.browser.remove-file file this.browser.removeFile(file);
this.api('drive/files/update', { this.api('drive/files/update', {
file_id: file file_id: file,
folder_id: this.folder.id folder_id: this.folder.id
}).then(() => { });
// something
.catch (err, text-status) =>
console.error err
// (ドライブの)フォルダーだったら // (ドライブの)フォルダーだったら
else if obj.type == 'folder' } else if (obj.type == 'folder') {
folder = obj.id const folder = obj.id;
// 移動先が自分自身ならreject // 移動先が自分自身ならreject
if folder == this.folder.id if (folder == this.folder.id) return false;
return false this.browser.removeFolder(folder);
this.browser.remove-folder folder
this.api('drive/folders/update', { this.api('drive/folders/update', {
folder_id: folder folder_id: folder,
parent_id: this.folder.id parent_id: this.folder.id
}).then(() => { }).then(() => {
// something // something
.catch (err) => }).catch(err => {
if err == 'detected-circular-definition' switch (err) {
@dialog do case 'detected-circular-definition':
'<i class="fa fa-exclamation-triangle"></i>操作を完了できません' this.dialog('<i class="fa fa-exclamation-triangle"></i>操作を完了できません',
'移動先のフォルダーは、移動するフォルダーのサブフォルダーです。' '移動先のフォルダーは、移動するフォルダーのサブフォルダーです。', [{
[ text: 'OK'
text: 'OK' }]);
] break;
default:
alert('不明なエラー' + err);
}
});
}
return false return false;
};
this.ondragstart = (e) => { this.ondragstart = e => {
e.dataTransfer.effectAllowed = 'move' e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.set-data 'text' JSON.stringify do e.dataTransfer.setData('text', JSON.stringify({
type: 'folder' type: 'folder',
id: this.folder.id id: this.folder.id
this.is-dragging = true }));
this.isDragging = true;
// 親ブラウザに対して、ドラッグが開始されたフラグを立てる // 親ブラウザに対して、ドラッグが開始されたフラグを立てる
// (=あなたの子供が、ドラッグを開始しましたよ) // (=あなたの子供が、ドラッグを開始しましたよ)
this.browser.isDragSource = true this.browser.isDragSource = true;
};
this.ondragend = (e) => { this.ondragend = e => {
this.is-dragging = false this.isDragging = false;
this.browser.isDragSource = false this.browser.isDragSource = false;
};
this.oncontextmenu = (e) => { this.oncontextmenu = e => {
e.preventDefault(); e.preventDefault();
e.stopImmediatePropagation(); e.stopImmediatePropagation();
this.is-contextmenu-showing = true this.update({
this.update(); isContextmenuShowing: true
ctx = document.body.appendChild(document.createElement('mk-drive-browser-folder-contextmenu')); });
ctx = riot.mount ctx, do const ctx = riot.mount(document.body.appendChild(document.createElement('mk-drive-browser-folder-contextmenu')), {
browser: this.browser browser: this.browser,
folder: this.folder folder: this.folder
ctx = ctx.0 })[0];
ctx.open do ctx.open({
x: e.pageX - window.pageXOffset x: e.pageX - window.pageXOffset,
y: e.pageY - window.pageYOffset y: e.pageY - window.pageYOffset
});
ctx.on('closed', () => { ctx.on('closed', () => {
this.is-contextmenu-showing = false this.update({
this.update(); isContextmenuShowing: false
});
});
return false return false;
};
</script> </script>
</mk-drive-browser-folder> </mk-drive-browser-folder>

99
src/web/app/desktop/tags/drive/nav-folder.tag
View File

@ -10,88 +10,89 @@
// Riotのバグでnullを渡しても""になる // Riotのバグでnullを渡しても""になる
// https://github.com/riot/riot/issues/2080 // https://github.com/riot/riot/issues/2080
#this.folder = this.opts.folder //this.folder = this.opts.folder
this.folder = if this.opts.folder? and this.opts.folder != '' then this.opts.folder else null this.folder = this.opts.folder && this.opts.folder != '' ? this.opts.folder : null;
this.browser = this.parent this.browser = this.parent;
this.hover = false this.hover = false;
this.onclick = () => { this.onclick = () => {
this.browser.move this.folder this.browser.move(this.folder);
};
this.onmouseover = () => { this.onmouseover = () => {
this.hover = true this.hover = true
};
this.onmouseout = () => { this.onmouseout = () => {
this.hover = false this.hover = false
};
this.ondragover = (e) => { this.ondragover = e => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
// このフォルダがルートかつカレントディレクトリならドロップ禁止 // このフォルダがルートかつカレントディレクトリならドロップ禁止
if this.folder == null and this.browser.folder == null if (this.folder == null && this.browser.folder == null) {
e.dataTransfer.dropEffect = 'none' e.dataTransfer.dropEffect = 'none';
// ドラッグされてきたものがファイルだったら // ドラッグされてきたものがファイルだったら
else if e.dataTransfer.effectAllowed == 'all' } else if (e.dataTransfer.effectAllowed == 'all') {
e.dataTransfer.dropEffect = 'copy' e.dataTransfer.dropEffect = 'copy';
else } else {
e.dataTransfer.dropEffect = 'move' e.dataTransfer.dropEffect = 'move';
return false }
return false;
};
this.ondragenter = () => { this.ondragenter = () => {
if this.folder != null or this.browser.folder != null if (this.folder || this.browser.folder) this.draghover = true;
this.draghover = true };
this.ondragleave = () => { this.ondragleave = () => {
if this.folder != null or this.browser.folder != null if (this.folder || this.browser.folder) this.draghover = false;
this.draghover = false };
this.ondrop = (e) => { this.ondrop = e => {
e.stopPropagation(); e.stopPropagation();
this.draghover = false this.draghover = false;
// ファイルだったら // ファイルだったら
if e.dataTransfer.files.length > 0 if (e.dataTransfer.files.length > 0) {
Array.prototype.forEach.call e.dataTransfer.files, (file) => e.dataTransfer.files.forEach(file => {
this.browser.upload file, this.folder this.browser.upload(file, this.folder);
return false });
return false;
};
// データ取得 // データ取得
data = e.dataTransfer.get-data 'text' const data = e.dataTransfer.getData('text');
if !data? if (data == null) return false;
return false
// パース // パース
obj = JSON.parse data // TODO: Validate JSON
const obj = JSON.parse(data);
// (ドライブの)ファイルだったら // (ドライブの)ファイルだったら
if obj.type == 'file' if (obj.type == 'file') {
file = obj.id const file = obj.id;
this.browser.remove-file file this.browser.removeFile(file);
this.api('drive/files/update', { this.api('drive/files/update', {
file_id: file file_id: file,
folder_id: if this.folder? then this.folder.id else null folder_id: this.folder ? this.folder.id : null
}).then(() => { });
// something
.catch (err, text-status) =>
console.error err
// (ドライブの)フォルダーだったら // (ドライブの)フォルダーだったら
else if obj.type == 'folder' } else if (obj.type == 'folder') {
folder = obj.id const folder = obj.id;
// 移動先が自分自身ならreject // 移動先が自分自身ならreject
if this.folder? and folder == this.folder.id if (this.folder && folder == this.folder.id) return false;
return false this.browser.removeFolder(folder);
this.browser.remove-folder folder
this.api('drive/folders/update', { this.api('drive/folders/update', {
folder_id: folder folder_id: folder,
parent_id: if this.folder? then this.folder.id else null parent_id: this.folder ? this.folder.id : null
}).then(() => { });
// something }
.catch (err, text-status) =>
console.error err
return false return false;
};
</script> </script>
</mk-drive-browser-nav-folder> </mk-drive-browser-nav-folder>