[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 }> <virtual each={ file in files }>
<mk-drive-browser-file class="file" file={ file }></mk-drive-browser-file> <mk-drive-browser-file class="file" file={ file }></mk-drive-browser-file>
</virtual> </virtual>
<button if={ moreFiles }>もっと読み込む</button> <button if={ moreFiles } onclick={ fetchMoreFiles }>もっと読み込む</button>
</div> </div>
<div class="empty" if={ files.length == 0 && folders.length == 0 && !fetching }> <div class="empty" if={ files.length == 0 && folders.length == 0 && !fetching }>
<p if={ draghover }>ドロップですか?いいですよ、ボクはカワイイですからね</p> <p if={ draghover }>ドロップですか?いいですよ、ボクはカワイイですからね</p>
@ -287,7 +287,7 @@
if (this.opts.folder && 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.fetch();
} }
}); });
@ -567,7 +567,7 @@
if (folder.parent) dive(folder.parent); if (folder.parent) dive(folder.parent);
this.update(); this.update();
this.load(); this.fetch();
}); });
}; };
@ -636,10 +636,10 @@
folder: null, folder: null,
hierarchyFolders: [] hierarchyFolders: []
}); });
this.load(); this.fetch();
}; };
this.load = () => { this.fetch = () => {
this.update({ this.update({
folders: [], folders: [],
files: [], 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> </script>
</mk-drive-browser> </mk-drive-browser>

View file

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

View file

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