mirror of
https://github.com/MisskeyIO/misskey
synced 2024-12-12 05:38:51 +09:00
[Client] Implement more file fetching and some refactors
This commit is contained in:
parent
1d860acc06
commit
b3b0f780f2
@ -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>
|
||||
|
@ -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)) {
|
||||
|
@ -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();
|
||||
});
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user