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>
</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>

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

@ -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>

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

@ -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>

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

@ -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>

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

@ -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>

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

@ -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>操作を完了できません'
'移動先のフォルダーは、移動するフォルダーのサブフォルダーです。'
[
}).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>

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

@ -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>