This commit is contained in:
syuilo 2017-02-21 09:49:35 +09:00
parent 1efbb5a78e
commit b66bac7851
2 changed files with 298 additions and 272 deletions

View file

@ -27,13 +27,16 @@ riot.mixin({
// ↓ iOS待ちPolyfill (SEE: http://caniuse.com/#feat=fetch) // ↓ iOS待ちPolyfill (SEE: http://caniuse.com/#feat=fetch)
require('whatwg-fetch'); require('whatwg-fetch');
// ↓ NodeList、HTMLCollectionで forEach を使えるようにする // ↓ NodeList、HTMLCollection、FileListで forEach を使えるようにする
if (NodeList.prototype.forEach === undefined) { if (NodeList.prototype.forEach === undefined) {
NodeList.prototype.forEach = Array.prototype.forEach; NodeList.prototype.forEach = Array.prototype.forEach;
} }
if (HTMLCollection.prototype.forEach === undefined) { if (HTMLCollection.prototype.forEach === undefined) {
HTMLCollection.prototype.forEach = Array.prototype.forEach; HTMLCollection.prototype.forEach = Array.prototype.forEach;
} }
if (FileList.prototype.forEach === undefined) {
FileList.prototype.forEach = Array.prototype.forEach;
}
// ↓ iOSでプライベートモードだとlocalStorageが使えないので既存のメソッドを上書きする // ↓ iOSでプライベートモードだとlocalStorageが使えないので既存のメソッドを上書きする
try { try {

View file

@ -8,7 +8,7 @@
</div> </div>
<input class="search" type="search" placeholder="&#xf002; 検索"/> <input class="search" type="search" placeholder="&#xf002; 検索"/>
</nav> </nav>
<div class="main { uploading: uploads.length > 0, loading: loading }" ref="main" onmousedown={ onmousedown } ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop } oncontextmenu={ oncontextmenu }> <div class="main { uploading: uploads.length > 0, fetching: fetching }" ref="main" onmousedown={ onmousedown } ondragover={ ondragover } ondragenter={ ondragenter } ondragleave={ ondragleave } ondrop={ ondrop } oncontextmenu={ oncontextmenu }>
<div class="selection" ref="selection"></div> <div class="selection" ref="selection"></div>
<div class="contents" ref="contents"> <div class="contents" ref="contents">
<div class="folders" ref="foldersContainer" if={ folders.length > 0 }> <div class="folders" ref="foldersContainer" if={ folders.length > 0 }>
@ -23,13 +23,13 @@
</virtual> </virtual>
<button if={ moreFiles }>もっと読み込む</button> <button if={ moreFiles }>もっと読み込む</button>
</div> </div>
<div class="empty" if={ files.length == 0 && folders.length == 0 && !loading }> <div class="empty" if={ files.length == 0 && folders.length == 0 && !fetching }>
<p if={ draghover }>ドロップですか?いいですよ、ボクはカワイイですからね</p> <p if={ draghover }>ドロップですか?いいですよ、ボクはカワイイですからね</p>
<p if={ !draghover && folder == null }><strong>ドライブには何もありません。</strong><br/>右クリックして「ファイルをアップロード」を選んだり、ファイルをドラッグ&ドロップすることでもアップロードできます。</p> <p if={ !draghover && folder == null }><strong>ドライブには何もありません。</strong><br/>右クリックして「ファイルをアップロード」を選んだり、ファイルをドラッグ&ドロップすることでもアップロードできます。</p>
<p if={ !draghover && folder != null }>このフォルダーは空です</p> <p if={ !draghover && folder != null }>このフォルダーは空です</p>
</div> </div>
</div> </div>
<div class="loading" if={ loading }> <div class="loading" if={ fetching }>
<div class="spinner"> <div class="spinner">
<div class="dot1"></div> <div class="dot1"></div>
<div class="dot2"></div> <div class="dot2"></div>
@ -133,7 +133,7 @@
&, * &, *
user-select none user-select none
&.loading &.fetching
cursor wait !important cursor wait !important
* *
@ -184,7 +184,7 @@
> p > p
margin 0 margin 0
> .loading > .fetching
.spinner .spinner
margin 100px auto margin 100px auto
width 40px width 40px
@ -275,379 +275,402 @@
}); });
}); });
this.stream.on 'drive_file_created' this.onStreamDriveFileCreated this.stream.on('drive_file_created', this.onStreamDriveFileCreated);
this.stream.on 'drive_file_updated' this.onStreamDriveFileUpdated this.stream.on('drive_file_updated', this.onStreamDriveFileUpdated);
this.stream.on 'drive_folder_created' this.onStreamDriveFolderCreated this.stream.on('drive_folder_created', this.onStreamDriveFolderCreated);
this.stream.on 'drive_folder_updated' this.onStreamDriveFolderUpdated this.stream.on('drive_folder_updated', this.onStreamDriveFolderUpdated);
// Riotのバグでnullを渡しても""になる // Riotのバグでnullを渡しても""になる
// https://github.com/riot/riot/issues/2080 // https://github.com/riot/riot/issues/2080
#if this.opts.folder? //if (this.opts.folder)
if this.opts.folder? and this.opts.folder != '' if (this.opts.folder && this.opts.folder != '') {
this.move this.opts.folder this.move(this.opts.folder);
else } else {
this.load(); this.load();
}
});
this.on('unmount', () => { this.on('unmount', () => {
this.stream.off 'drive_file_created' this.onStreamDriveFileCreated this.stream.off('drive_file_created', this.onStreamDriveFileCreated);
this.stream.off 'drive_file_updated' this.onStreamDriveFileUpdated this.stream.off('drive_file_updated', this.onStreamDriveFileUpdated);
this.stream.off 'drive_folder_created' this.onStreamDriveFolderCreated this.stream.off('drive_folder_created', this.onStreamDriveFolderCreated);
this.stream.off 'drive_folder_updated' this.onStreamDriveFolderUpdated this.stream.off('drive_folder_updated', this.onStreamDriveFolderUpdated);
});
this.onStreamDriveFileCreated = (file) => { this.onStreamDriveFileCreated = file => {
this.addFile file, true this.addFile(file, true);
};
this.onStreamDriveFileUpdated = (file) => { this.onStreamDriveFileUpdated = file => {
current = if this.folder? then this.folder.id else null const current = this.folder ? this.folder.id : null;
if current != file.folder_id if (current != file.folder_id) {
@remove-file file this.removeFile(file);
else } else {
this.addFile file, true this.addFile(file, true);
}
};
this.onStreamDriveFolderCreated = (folder) => { this.onStreamDriveFolderCreated = folder => {
this.addFolder folder, true this.addFolder(folder, true);
};
this.onStreamDriveFolderUpdated = (folder) => { this.onStreamDriveFolderUpdated = folder => {
current = if this.folder? then this.folder.id else null const current = this.folder ? this.folder.id : null;
if current != folder.parent_id if (current != folder.parent_id) {
this.removeFolder folder this.removeFolder(folder);
else } else {
this.addFolder folder, true this.addFolder(folder, true);
}
};
this.onmousedown = (e) => { this.onmousedown = e => {
if (contains this.refs.folders-container, e.target) or (contains this.refs.files-container, e.target) if (contains(this.refs.foldersContainer, e.target) || contains(this.refs.filesContainer, e.target)) return true;
return true
rect = this.refs.main.getBoundingClientRect(); const rect = this.refs.main.getBoundingClientRect();
left = e.pageX + this.refs.main.scroll-left - rect.left - window.pageXOffset const left = e.pageX + this.refs.main.scrollLeft - rect.left - window.pageXOffset
top = e.pageY + this.refs.main.scroll-top - rect.top - window.pageYOffset const top = e.pageY + this.refs.main.scrollTop - rect.top - window.pageYOffset
move = (e) => const move = e => {
this.refs.selection.style.display = 'block' this.refs.selection.style.display = 'block';
cursorX = e.pageX + this.refs.main.scroll-left - rect.left - window.pageXOffset const cursorX = e.pageX + this.refs.main.scrollLeft - rect.left - window.pageXOffset;
cursorY = e.pageY + this.refs.main.scroll-top - rect.top - window.pageYOffset const cursorY = e.pageY + this.refs.main.scrollTop - rect.top - window.pageYOffset;
w = cursorX - left const w = cursorX - left;
h = cursorY - top const h = cursorY - top;
if w > 0 if (w > 0) {
this.refs.selection.style.width = w + 'px' this.refs.selection.style.width = w + 'px';
this.refs.selection.style.left = left + 'px' this.refs.selection.style.left = left + 'px';
else } else {
this.refs.selection.style.width = -w + 'px' this.refs.selection.style.width = -w + 'px';
this.refs.selection.style.left = cursorX + 'px' this.refs.selection.style.left = cursorX + 'px';
}
if h > 0 if (h > 0) {
this.refs.selection.style.height = h + 'px' this.refs.selection.style.height = h + 'px';
this.refs.selection.style.top = top + 'px' this.refs.selection.style.top = top + 'px';
else } else {
this.refs.selection.style.height = -h + 'px' this.refs.selection.style.height = -h + 'px';
this.refs.selection.style.top = cursorY + 'px' this.refs.selection.style.top = cursorY + 'px';
}
};
up = (e) => up = e => {
document.documentElement.removeEventListener 'mousemove' move document.documentElement.removeEventListener('mousemove', move);
document.documentElement.removeEventListener 'mouseup' up document.documentElement.removeEventListener('mouseup', up);
this.refs.selection.style.display = 'none' this.refs.selection.style.display = 'none';
};
document.documentElement.addEventListener 'mousemove' move document.documentElement.addEventListener('mousemove', move);
document.documentElement.addEventListener 'mouseup' up document.documentElement.addEventListener('mouseup', up);
};
this.path-oncontextmenu = (e) => { this.pathOncontextmenu = e => {
e.preventDefault(); e.preventDefault();
e.stopImmediatePropagation(); e.stopImmediatePropagation();
return false return false;
};
this.ondragover = (e) => { this.ondragover = e => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
// ドラッグ元が自分自身の所有するアイテムかどうか // ドラッグ元が自分自身の所有するアイテムかどうか
if !@isDragSource if (!this.isDragSource) {
// ドラッグされてきたものがファイルだったら // ドラッグされてきたものがファイルだったら
if e.dataTransfer.effectAllowed == 'all' e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
e.dataTransfer.dropEffect = 'copy' this.draghover = true;
else } else {
e.dataTransfer.dropEffect = 'move'
this.draghover = true
else
// 自分自身にはドロップさせない // 自分自身にはドロップさせない
e.dataTransfer.dropEffect = 'none' e.dataTransfer.dropEffect = 'none';
return false return false;
}
};
this.ondragenter = (e) => { this.ondragenter = e => {
e.preventDefault(); e.preventDefault();
if !@isDragSource if (!this.isDragSource) this.draghover = true;
this.draghover = true };
this.ondragleave = (e) => { this.ondragleave = e => {
this.draghover = false this.draghover = false;
};
this.ondrop = (e) => { this.ondrop = e => {
e.preventDefault(); e.preventDefault();
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 => {
@upload file, this.folder this.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: JSONじゃなかったら中断
const obj = JSON.parse(data);
// (ドライブの)ファイルだったら // (ドライブの)ファイルだったら
if obj.type == 'file' if (obj.type == 'file') {
file = obj.id const file = obj.id;
if (this.files.some (f) => f.id == file) if (this.files.some(f => f.id == file)) return false;
return false this.removeFile(file);
@remove-file 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 if (this.folders.some(f => f.id == folder)) return false;
if (this.folders.some (f) => f.id == folder) this.removeFolder(folder);
return false
this.removeFolder 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(() => { }).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.oncontextmenu = (e) => { this.oncontextmenu = e => {
e.preventDefault(); e.preventDefault();
e.stopImmediatePropagation(); e.stopImmediatePropagation();
ctx = document.body.appendChild(document.createElement('mk-drive-browser-base-contextmenu')); const ctx = riot.mount(document.body.appendChild(document.createElement('mk-drive-browser-base-contextmenu')), {
ctx = riot.mount ctx, do
browser: this browser: this
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
});
return false return false;
};
this.select-local-file = () => { this.selectLocalFile = () => {
this.refs.file-input.click(); this.refs.fileInput.click();
};
this.url-upload = () => { this.urlUpload = () => {
url <~ @input-dialog do this.inputDialog('URLアップロード', 'アップロードしたいファイルのURL', null, url => {
'URLアップロード'
'アップロードしたいファイルのURL'
null
if url? and url != ''
this.api('drive/files/upload_from_url', { this.api('drive/files/upload_from_url', {
url: url url: url,
folder_id: if this.folder? then this.folder.id else undefined folder_id: this.folder ? this.folder.id : undefined
});
@dialog do this.dialog('<i class="fa fa-check"></i>アップロードをリクエストしました',
'<i class="fa fa-check"></i>アップロードをリクエストしました' 'アップロードが完了するまで時間がかかる場合があります。', [{
'アップロードが完了するまで時間がかかる場合があります。' text: 'OK'
[ }]);
text: 'OK' });
] };
this.createFolder = () => { this.createFolder = () => {
name <~ @input-dialog do this.inputDialog('フォルダー作成', 'フォルダー名', null, name => {
'フォルダー作成' this.api('drive/folders/create', {
'フォルダー名' name: name,
null folder_id: this.folder ? this.folder.id : undefined
}).then(folder => {
this.addFolder(folder, true);
this.update();
});
});
};
this.api('drive/folders/create', { this.changeFileInput = () => {
name: name this.refs.fileInput.files.forEach(file => {
folder_id: if this.folder? then this.folder.id else undefined this.upload(file, this.folder);
}).then((folder) => { });
this.addFolder folder, true };
this.update();
.catch (err) =>
console.error err
this.change-file-input = () => {
files = this.refs.file-input.files
for i from 0 to files.length - 1
file = files.item i
@upload file, this.folder
this.upload = (file, folder) => { this.upload = (file, folder) => {
if folder? and typeof folder == 'object' if (folder && typeof folder == 'object') folder = folder.id;
folder = folder.id this.refs.uploader.upload(file, folder);
this.refs.uploader.upload file, folder };
this.get-selection = () => { this.getSelection = () => {
this.files.filter (file) -> file._selected this.files.filter(file => file._selected);
};
this.newWindow = (folder-id) => { this.newWindow = folderId => {
browser = document.body.appendChild(document.createElement('mk-drive-browser-window')); riot.mount(document.body.appendChild(document.createElement('mk-drive-browser-window')), {
riot.mount browser, do folder: folderId
folder: folder-id });
};
this.move = (target-folder) => { this.move = target => {
if target-folder? and typeof target-folder == 'object' if (target == null) {
target-folder = target-folder.id this.goRoot();
return;
} else if (typeof target == 'object') {
target = target.id;
}
if target-folder == null this.update({
@go-root! fetching: true
return });
this.loading = true
this.update();
this.api('drive/folders/show', { this.api('drive/folders/show', {
folder_id: target-folder folder_id: target
}).then((folder) => { }).then(folder => {
this.folder = folder this.folder = folder;
this.hierarchyFolders = [] this.hierarchyFolders = [];
x = (f) => const dive = folder => {
@hierarchyFolders.unshift f this.hierarchyFolders.unshift(folder);
if f.parent? if (folder.parent) dive(folder.parent);
x f.parent };
if folder.parent? if (folder.parent) dive(folder.parent);
x folder.parent
this.update(); this.update();
this.load(); this.load();
.catch (err, text-status) -> });
console.error err };
this.add-folder = (folder, unshift = false) => { this.addFolder = (folder, unshift = false) => {
current = if this.folder? then this.folder.id else null const current = this.folder ? this.folder.id : null;
if current != folder.parent_id if (current != folder.parent_id) return;
return
if (this.folders.some (f) => f.id == folder.id) if (this.folders.some(f => f.id == folder.id)) {
exist = (this.folders.map (f) -> f.id).index-of folder.id const exist = this.folders.map(f => f.id).indexOf(folder.id);
this.folders[exist] = folder this.folders[exist] = folder;
this.update(); this.update();
return return;
}
if unshift if (unshift) {
this.folders.unshift folder this.folders.unshift(folder);
else } else {
this.folders.push folder this.folders.push(folder);
}
this.update(); this.update();
};
this.add-file = (file, unshift = false) => { this.addFile = (file, unshift = false) => {
current = if this.folder? then this.folder.id else null const current = this.folder ? this.folder.id : null;
if current != file.folder_id if (current != file.folder_id) return;
return
if (this.files.some (f) => f.id == file.id) if (this.files.some(f => f.id == file.id)) {
exist = (this.files.map (f) -> f.id).index-of file.id const exist = this.files.map(f => f.id).indexOf(file.id);
this.files[exist] = file this.files[exist] = file;
this.update(); this.update();
return return;
}
if unshift if (unshift) {
this.files.unshift file this.files.unshift(file);
else } else {
this.files.push file this.files.push(file);
}
this.update(); this.update();
};
this.remove-folder = (folder) => { this.removeFolder = folder => {
if typeof folder == 'object' if (typeof folder == 'object') folder = folder.id;
folder = folder.id this.folders = this.folders.filter(f => f.id != folder);
this.folders = this.folders.filter (f) -> f.id != folder
this.update(); this.update();
};
this.remove-file = (file) => { this.removeFile = file => {
if typeof file == 'object' if (typeof file == 'object') file = file.id;
file = file.id this.files = this.files.filter(f => f.id != file);
this.files = this.files.filter (f) -> f.id != file
this.update(); this.update();
};
this.go-root = () => { this.goRoot = () => {
if this.folder != null // 既にrootにいるなら何もしない
this.folder = null if (this.folder == null) return;
this.hierarchyFolders = []
this.update(); this.update({
this.load(); folder: null,
hierarchyFolders: []
});
this.load();
};
this.load = () => { this.load = () => {
this.folders = [] this.update({
this.files = [] folders: [],
this.more-folders = false files: [],
this.more-files = false moreFolders: false,
this.loading = true moreFiles: false,
this.update(); fetching: true
});
load-folders = null let fetchedFolders = null;
load-files = null let fetchedFiles = null;
folders-max = 30 const foldersMax = 30;
files-max = 30 const filesMax = 30;
// フォルダ一覧取得 // フォルダ一覧取得
this.api('drive/folders', { this.api('drive/folders', {
folder_id: if this.folder? then this.folder.id else null folder_id: this.folder ? this.folder.id : null,
limit: folders-max + 1 limit: foldersMax + 1
}).then((folders) => { }).then(folders => {
if folders.length == folders-max + 1 if (folders.length == foldersMax + 1) {
this.more-folders = true this.moreFolders = true;
folders.pop! folders.pop();
load-folders := folders }
complete! fetchedFolders = folders;
.catch (err, text-status) => complete();
console.error err });
// ファイル一覧取得 // ファイル一覧取得
this.api('drive/files', { this.api('drive/files', {
folder_id: if this.folder? then this.folder.id else null folder_id: this.folder ? this.folder.id : null,
limit: files-max + 1 limit: filesMax + 1
}).then((files) => { }).then(files => {
if files.length == files-max + 1 if (files.length == filesMax + 1) {
this.more-files = true this.moreFiles = true;
files.pop! files.pop();
load-files := files }
complete! fetchedFiles = files;
.catch (err, text-status) => complete();
console.error err });
flag = false let flag = false;
complete = => complete = () => {
if flag if (flag) {
load-folders.forEach (folder) => fetchedFolders.forEach(folder => this.addFolder);
this.addFolder folder fetchedFiles.forEach(file => this.addFile);
load-files.forEach (file) => this.update({
this.addFile file fetching: false
this.loading = false });
this.update(); } else {
else flag = true;
flag := true }
};
};
</script> </script>
</mk-drive-browser> </mk-drive-browser>