wip
This commit is contained in:
syuilo
parent
1efbb5a78e
commit
b66bac7851
2 changed files with 298 additions and 272 deletions
|
|
@ -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 {
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
</div>
|
</div>
|
||||||
<input class="search" type="search" placeholder=" 検索"/>
|
<input class="search" type="search" placeholder=" 検索"/>
|
||||||
</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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue