opensource/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash.git synced 2025-11-01 19:32:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

feature (scroll memory): make it easier to scroll/select on long list of things

Browse Source
This commit is contained in:
Mickael KERJEAN
2018-09-26 03:23:01 +10:00
parent bde4079fb9
commit 434f1a90c3
2 changed files with 25 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
client/pages/filespage.js
View File

@ -11,8 +11,15 @@ import { notify, debounce, goToFiles, goToViewer, event, settings_get, settings_
import { BreadCrumb, FileSystem, FrequentlyAccess, Submenu } from './filespage/'; import { BreadCrumb, FileSystem, FrequentlyAccess, Submenu } from './filespage/';
import InfiniteScroll from 'react-infinite-scroller'; import InfiniteScroll from 'react-infinite-scroller';
const PAGE_NUMBER_INIT = 3; const PAGE_NUMBER_INIT = 2;
const LOAD_PER_SCROLL = 24; const LOAD_PER_SCROLL = 48;
// usefull when user press the back button while keeping the current context
let LAST_PAGE_PARAMS = {
path: null,
scroll: 0,
page_number: PAGE_NUMBER_INIT
};
@ErrorPage @ErrorPage
@LoggedInOnly @LoggedInOnly
@ -61,6 +68,10 @@ export class FilesPage extends React.Component {
this.props.unsubscribe('file.refresh'); this.props.unsubscribe('file.refresh');
window.removeEventListener('keydown', this.toggleHiddenFilesVisibilityonCtrlK); window.removeEventListener('keydown', this.toggleHiddenFilesVisibilityonCtrlK);
this._cleanupListeners(); this._cleanupListeners();
LAST_PAGE_PARAMS.path = this.state.path;
LAST_PAGE_PARAMS.scroll = this.refs.$scroll.scrollTop;
LAST_PAGE_PARAMS.page_number = this.state.page_number;
} }
componentWillReceiveProps(nextProps){ componentWillReceiveProps(nextProps){
@ -108,7 +119,16 @@ export class FilesPage extends React.Component {
metadata: res.metadata, metadata: res.metadata,
files: sort(files, this.state.sort), files: sort(files, this.state.sort),
loading: false, loading: false,
page_number: PAGE_NUMBER_INIT page_number: function(){
if(this.state.path === LAST_PAGE_PARAMS.path){
return LAST_PAGE_PARAMS.page_number;
}
return PAGE_NUMBER_INIT;
}.bind(this)()
}, () => {
if(this.state.path === LAST_PAGE_PARAMS.path){
this.refs.$scroll.scrollTop = LAST_PAGE_PARAMS.scroll;
}
}); });
}else{ }else{
notify.send(res, 'error'); notify.send(res, 'error');
@ -205,7 +225,7 @@ export class FilesPage extends React.Component {
<div className="component_page_filespage"> <div className="component_page_filespage">
<BreadCrumb className="breadcrumb" path={this.state.path} /> <BreadCrumb className="breadcrumb" path={this.state.path} />
<div className="page_container"> <div className="page_container">
<div className="scroll-y"> <div ref="$scroll" className="scroll-y">
<InfiniteScroll pageStart={0} loader={$moreLoading} hasMore={this.state.files.length > 70} <InfiniteScroll pageStart={0} loader={$moreLoading} hasMore={this.state.files.length > 70}
initialLoad={false} useWindow={false} loadMore={this.loadMore.bind(this)} threshold={100}> initialLoad={false} useWindow={false} loadMore={this.loadMore.bind(this)} threshold={100}>
<NgIf className="container" cond={!this.state.loading}> <NgIf className="container" cond={!this.state.loading}>

2
client/pages/filespage/thing-existing.js
View File

@ -408,7 +408,7 @@ class LazyLoadImage extends React.Component {
error: false error: false
}; };
this.$scroll = document.querySelector(props.scroller); this.$scroll = document.querySelector(props.scroller);
this.onScroll = debounce(this.onScroll.bind(this), 100); this.onScroll = debounce(this.onScroll.bind(this), 250);
} }
componentDidMount(){ componentDidMount(){