[Client] Implement more file fetching and some refactors

This commit is contained in:
syuilo 2017-02-26 17:36:54 +09:00
parent 1d860acc06
commit b3b0f780f2
3 changed files with 70 additions and 20 deletions

View File

@ -21,7 +21,7 @@
<virtual each={ file in files }>
<mk-drive-browser-file class="file" file={ file }></mk-drive-browser-file>
</virtual>
<button if={ moreFiles }>もっと読み込む</button>
<button if={ moreFiles } onclick={ fetchMoreFiles }>もっと読み込む</button>
</div>
<div class="empty" if={ files.length == 0 && folders.length == 0 && !fetching }>
<p if={ draghover }>ドロップですか?いいですよ、ボクはカワイイですからね</p>
@ -287,7 +287,7 @@
if (this.opts.folder && this.opts.folder != '') {
this.move(this.opts.folder);
} else {
this.load();
this.fetch();
}
});
@ -567,7 +567,7 @@
if (folder.parent) dive(folder.parent);
this.update();
this.load();
this.fetch();
});
};
@ -636,10 +636,10 @@
folder: null,
hierarchyFolders: []
});
this.load();
this.fetch();
};
this.load = () => {
this.fetch = () => {
this.update({
folders: [],
files: [],
@ -694,5 +694,30 @@
};
};
this.fetchMoreFiles = () => {
this.update({
fetching: true
});
const max = 30;
// ファイル一覧取得
this.api('drive/files', {
folder_id: this.folder ? this.folder.id : null,
limit: max + 1
}).then(files => {
if (files.length == max + 1) {
this.moreFiles = true;
files.pop();
} else {
this.moreFiles = false;
}
files.forEach(this.appendFile);
this.update({
fetching: false
});
});
};
</script>
</mk-drive-browser>

View File

@ -14,7 +14,7 @@
<p>{ file.name }</p>
</virtual>
</nav>
<div class="browser { loading: fetching }" if={ file == null }>
<div class="browser { fetching: fetching }" if={ file == null }>
<div class="folders" if={ folders.length > 0 }>
<virtual each={ folder in folders }>
<mk-drive-folder folder={ folder }></mk-drive-folder>
@ -25,13 +25,13 @@
<virtual each={ file in files }>
<mk-drive-file file={ file }></mk-drive-file>
</virtual>
<p if={ moreFiles }>もっと読み込む</p>
<p if={ moreFiles } onclick={ fetchMoreFiles }>もっと読み込む</p>
</div>
<div class="empty" if={ files.length == 0 && folders.length == 0 && !fetching }>
<p if={ !folder == null }>ドライブには何もありません。</p>
<p if={ folder != null }>このフォルダーは空です</p>
</div>
<div class="loading" if={ fetching }>
<div class="fetching" if={ fetching }>
<div class="spinner">
<div class="dot1"></div>
<div class="dot2"></div>
@ -71,7 +71,7 @@
opacity 0.5
> .browser
&.loading
&.fetching
opacity 0.5
> .folders
@ -91,7 +91,7 @@
> p
margin 0
> .loading
> .fetching
.spinner
margin 100px auto
width 40px
@ -160,7 +160,7 @@
} else if (this.opts.file && this.opts.file != '') {
this.cf(this.opts.file, true);
} else {
this.load();
this.fetch();
}
});
@ -223,7 +223,7 @@
this.update();
this.trigger('open-folder', this.folder, silent);
this.load();
this.fetch();
});
};
@ -290,11 +290,11 @@
hierarchyFolders: []
});
this.trigger('move-root');
this.load();
this.fetch();
}
};
this.load = () => {
this.fetch = () => {
this.update({
folders: [],
files: [],
@ -303,7 +303,7 @@
fetching: true
});
this.trigger('begin-load');
this.trigger('begin-fetch');
let fetchedFolders = null;
let fetchedFiles = null;
@ -346,15 +346,40 @@
fetching: false
});
// 一連の読み込みが完了したイベントを発行
this.trigger('loaded');
this.trigger('fetched');
} else {
flag = true;
// 一連の読み込みが半分完了したイベントを発行
this.trigger('load-mid');
this.trigger('fetch-mid');
}
};
};
this.fetchMoreFiles = () => {
this.update({
fetching: true
});
const max = 30;
// ファイル一覧取得
this.api('drive/files', {
folder_id: this.folder ? this.folder.id : null,
limit: max + 1
}).then(files => {
if (files.length == max + 1) {
this.moreFiles = true;
files.pop();
} else {
this.moreFiles = false;
}
files.forEach(this.appendFile);
this.update({
fetching: false
});
});
};
this.chooseFile = file => {
if (this.isSelectMode) {
if (this.selectedFiles.some(f => f.id == file.id)) {

View File

@ -14,15 +14,15 @@
document.title = 'Misskey Drive';
this.ui.trigger('title', '<i class="fa fa-cloud"></i>ドライブ');
this.refs.ui.refs.browser.on('begin-load', () => {
this.refs.ui.refs.browser.on('begin-fetch', () => {
this.Progress.start();
});
this.refs.ui.refs.browser.on('loaded-mid', () => {
this.refs.ui.refs.browser.on('fetched-mid', () => {
this.Progress.set(0.5);
});
this.refs.ui.refs.browser.on('loaded', () => {
this.refs.ui.refs.browser.on('fetched', () => {
this.Progress.done();
});