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)
require('whatwg-fetch');
// ↓ NodeList、HTMLCollectionで forEach を使えるようにする
// ↓ NodeList、HTMLCollection、FileListで forEach を使えるようにする
if (NodeList.prototype.forEach === undefined) {
NodeList.prototype.forEach = Array.prototype.forEach;
}
if (HTMLCollection.prototype.forEach === undefined) {
HTMLCollection.prototype.forEach = Array.prototype.forEach;
}
if (FileList.prototype.forEach === undefined) {
FileList.prototype.forEach = Array.prototype.forEach;
}
// ↓ iOSでプライベートモードだとlocalStorageが使えないので既存のメソッドを上書きする
try {

View File

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