Browse Source

Shared media: save scroll position

master
Eduard Kuzmenko 4 years ago
parent
commit
4c4cf275ac
  1. 93
      src/components/appSearchSuper..ts
  2. 22
      src/components/sidebarRight/tabs/sharedMedia.ts
  3. 4
      src/scss/partials/_leftSidebar.scss
  4. 31
      src/scss/partials/_rightSidebar.scss

93
src/components/appSearchSuper..ts

@ -22,8 +22,9 @@ import { ripple } from "./ripple";
import Scrollable, { ScrollableX } from "./scrollable"; import Scrollable, { ScrollableX } from "./scrollable";
import { wrapDocument, wrapPhoto, wrapVideo } from "./wrappers"; import { wrapDocument, wrapPhoto, wrapVideo } from "./wrappers";
import useHeavyAnimationCheck, { getHeavyAnimationPromise } from "../hooks/useHeavyAnimationCheck"; import useHeavyAnimationCheck, { getHeavyAnimationPromise } from "../hooks/useHeavyAnimationCheck";
import { isMobileSafari } from "../helpers/userAgent";
const testScroll = false; //const testScroll = false;
export type SearchSuperType = MyInputMessagesFilter/* | 'chats' */; export type SearchSuperType = MyInputMessagesFilter/* | 'chats' */;
export type SearchSuperContext = { export type SearchSuperContext = {
@ -80,6 +81,8 @@ export default class AppSearchSuper {
private searchGroupMedia: SearchGroup; private searchGroupMedia: SearchGroup;
public goingHard: Partial<{[type in MyInputMessagesFilter]: {scrollTop: number, scrollHeight: number}}> = {};
constructor(public types: {inputFilter: SearchSuperType, name: string}[], public scrollable: Scrollable, public searchGroups?: {[group in SearchGroupType]: SearchGroup}, public asChatList = false, public groupByMonth = true) { constructor(public types: {inputFilter: SearchSuperType, name: string}[], public scrollable: Scrollable, public searchGroups?: {[group in SearchGroupType]: SearchGroup}, public asChatList = false, public groupByMonth = true) {
this.container = document.createElement('div'); this.container = document.createElement('div');
this.container.classList.add('search-super'); this.container.classList.add('search-super');
@ -116,10 +119,25 @@ export default class AppSearchSuper {
for(const type of types) { for(const type of types) {
const container = document.createElement('div'); const container = document.createElement('div');
container.classList.add('search-super-container-' + type.name.toLowerCase()); container.classList.add('search-super-container-' + type.name.toLowerCase()/* , 'scrollable', 'scrollable-y' */);
const content = document.createElement('div'); const content = document.createElement('div');
content.classList.add('search-super-content-' + type.name.toLowerCase()); content.classList.add('search-super-content-' + type.name.toLowerCase()/* , 'scrollable', 'scrollable-y' */);
//content.style.overflowY = 'hidden';
/* container.style.overflow = 'visible';
const v = 236;
content.style.top = (v * -1) + 'px';
content.style.paddingTop = v + 'px';
content.style.height = `calc(100% + ${v}px)`;
content.style.maxHeight = `calc(100% + ${v}px)`;
content.addEventListener('scroll', (e) => {
const scrollTop = content.scrollTop;
if(scrollTop <= v) {
//this.scrollable.scrollTop = scrollTop;
(this.container.previousElementSibling as HTMLElement).style.transform = `translateY(-${scrollTop}px)`;
}
}); */
container.append(content); container.append(content);
@ -141,21 +159,44 @@ export default class AppSearchSuper {
} }
}; };
//this.scroll.attachSentinels(undefined, 400); //this.scroll.attachSentinels(undefined, 400);
this.selectTab = horizontalMenu(this.tabsMenu, this.tabsContainer, (id, tabContent) => { this.selectTab = horizontalMenu(this.tabsMenu, this.tabsContainer, (id, tabContent) => {
if(this.prevTabId === id) return; if(this.prevTabId === id) return;
if(this.prevTabId !== -1) { if(this.prevTabId !== -1) {
this.onTransitionStart(); this.onTransitionStart();
} }
this.type = this.types[id].inputFilter; this.goingHard[this.type] = {scrollTop: this.scrollable.scrollTop, scrollHeight: this.scrollable.scrollHeight};
const newType = this.types[id].inputFilter;
this.tabSelected = tabContent.firstElementChild as HTMLDivElement; this.tabSelected = tabContent.firstElementChild as HTMLDivElement;
if(this.prevTabId !== -1 && nav.offsetTop) { if(this.goingHard[newType] === undefined) {
this.scrollable.scrollTop -= nav.offsetTop; const rect = this.container.getBoundingClientRect();
const rect2 = this.container.parentElement.getBoundingClientRect();
const diff = rect.y - rect2.y;
if(this.scrollable.scrollTop > diff) {
this.goingHard[newType] = {scrollTop: diff, scrollHeight: 0};
}
}
if(this.goingHard[newType]) {
const diff = this.goingHard[this.type].scrollTop - this.goingHard[newType].scrollTop;
//console.log('what you gonna do', this.goingHard, diff);
if(diff/* && diff < 0 */) {
this.tabSelected.style.transform = `translateY(${diff}px)`;
}
} }
this.type = newType;
/* if(this.prevTabId !== -1 && nav.offsetTop) {
this.scrollable.scrollTop -= nav.offsetTop;
} */
/* this.log('setVirtualContainer', id, this.sharedMediaSelected, this.sharedMediaSelected.childElementCount); /* this.log('setVirtualContainer', id, this.sharedMediaSelected, this.sharedMediaSelected.childElementCount);
this.scroll.setVirtualContainer(this.sharedMediaSelected); */ this.scroll.setVirtualContainer(this.sharedMediaSelected); */
@ -167,6 +208,13 @@ export default class AppSearchSuper {
this.prevTabId = id; this.prevTabId = id;
}, () => { }, () => {
this.scrollable.onScroll(); this.scrollable.onScroll();
//console.log('what y', this.tabSelected.style.transform);
if(this.goingHard[this.type] !== undefined) {
this.tabSelected.style.transform = '';
this.scrollable.scrollTop = this.goingHard[this.type].scrollTop;
}
this.onTransitionEnd(); this.onTransitionEnd();
}, undefined, navScrollable); }, undefined, navScrollable);
@ -217,7 +265,18 @@ export default class AppSearchSuper {
private onTransitionEnd = () => { private onTransitionEnd = () => {
// Jolly Cobra's // Workaround for scrollable content flickering during animation. // Jolly Cobra's // Workaround for scrollable content flickering during animation.
const container = this.scrollable.container; const container = this.scrollable.container;
if(isMobileSafari) { // ! safari doesn't respect sticky header, so it flicks when overflow is changing
container.style.display = 'none';
}
container.style.overflowY = ''; container.style.overflowY = '';
if(isMobileSafari) {
void container.offsetLeft; // reflow
container.style.display = '';
}
container.style.paddingRight = '0'; container.style.paddingRight = '0';
this.container.classList.remove('sliding'); this.container.classList.remove('sliding');
}; };
@ -747,9 +806,9 @@ export default class AppSearchSuper {
} }
public load(single = false, justLoad = false) { public load(single = false, justLoad = false) {
if(testScroll/* || 1 === 1 */) { // if(testScroll/* || 1 === 1 */) {
return; // return;
} // }
//return; //return;
@ -950,6 +1009,7 @@ export default class AppSearchSuper {
this.cleanupObj.cleaned = true; this.cleanupObj.cleaned = true;
this.cleanupObj = {cleaned: false}; this.cleanupObj = {cleaned: false};
this.goingHard = {};
} }
public cleanupHTML() { public cleanupHTML() {
@ -969,11 +1029,11 @@ export default class AppSearchSuper {
if(!this.historyStorage || !this.historyStorage[type]) { if(!this.historyStorage || !this.historyStorage[type]) {
const parent = this.tabs[type].parentElement; const parent = this.tabs[type].parentElement;
if(!testScroll) { //if(!testScroll) {
if(!parent.querySelector('.preloader')) { if(!parent.querySelector('.preloader')) {
putPreloader(parent, true); putPreloader(parent, true);
} }
} //}
const empty = parent.querySelector('.content-empty'); const empty = parent.querySelector('.content-empty');
if(empty) { if(empty) {
@ -984,8 +1044,9 @@ export default class AppSearchSuper {
this.monthContainers = {}; this.monthContainers = {};
this.searchGroupMedia.clear(); this.searchGroupMedia.clear();
this.scrollable.scrollTop = 0;
if(testScroll) { /* if(testScroll) {
for(let i = 0; i < 1500; ++i) { for(let i = 0; i < 1500; ++i) {
let div = document.createElement('div'); let div = document.createElement('div');
div.insertAdjacentHTML('beforeend', `<img class="media-image" src="assets/img/camomile.jpg">`); div.insertAdjacentHTML('beforeend', `<img class="media-image" src="assets/img/camomile.jpg">`);
@ -994,7 +1055,7 @@ export default class AppSearchSuper {
//div.innerText = '' + (i / 3 | 0); //div.innerText = '' + (i / 3 | 0);
this.tabs.inputMessagesFilterPhotoVideo.append(div); this.tabs.inputMessagesFilterPhotoVideo.append(div);
} }
} } */
} }
// * will change .cleaned in cleanup() and new instance will be created // * will change .cleaned in cleanup() and new instance will be created
@ -1035,4 +1096,4 @@ export default class AppSearchSuper {
this.cleanup(); this.cleanup();
} }
} }

22
src/components/sidebarRight/tabs/sharedMedia.ts

@ -104,8 +104,30 @@ export default class AppSharedMediaTab implements SliderTab {
const isSharedMedia = top <= HEADER_HEIGHT; const isSharedMedia = top <= HEADER_HEIGHT;
closeIcon.classList.toggle('state-back', isSharedMedia); closeIcon.classList.toggle('state-back', isSharedMedia);
transition(+isSharedMedia); transition(+isSharedMedia);
if(!isSharedMedia) {
this.searchSuper.goingHard = {};
}
//this.searchSuper.container.style.position = 'relative';
//this.searchSuper.container.style.zIndex = '500';
//this.scroll.container.style.overflowY = isSharedMedia ? 'hidden' : '';
//this.scroll.container.style.zIndex = '1';
//this.searchSuper.tabs[this.searchSuper.type].style.overflowY = isSharedMedia ? '' : 'hidden';
}; };
//this.scroll.container.style.overflowY = 'hidden';
/* this.scroll.container.addEventListener('scroll', (e) => {
this.searchSuper.tabs[this.searchSuper.type].scrollTop = this.scroll.container.scrollTop + 1;
console.log('writings on the wall', e, this.scroll.container.scrollTop, this.searchSuper.scrollable.container.scrollTop);
}); */
/* this.scroll.container.addEventListener('wheel', (e) => {
cancelEvent(e);
this.scroll.scrollTop += e.deltaY;
}); */
const transition = TransitionSlider(this.closeBtn.nextElementSibling as HTMLElement, 'slide-fade', 400, null, false); const transition = TransitionSlider(this.closeBtn.nextElementSibling as HTMLElement, 'slide-fade', 400, null, false);
transition(0); transition(0);

4
src/scss/partials/_leftSidebar.scss

@ -178,6 +178,10 @@
.search-super-tabs-scrollable { .search-super-tabs-scrollable {
position: relative !important; position: relative !important;
&:before {
display: none;
}
.menu-horizontal-div-item { .menu-horizontal-div-item {
flex: 1 0 auto !important; flex: 1 0 auto !important;
} }

31
src/scss/partials/_rightSidebar.scss

@ -227,13 +227,17 @@
} }
#shared-media-container { #shared-media-container {
.search-super { /* .search-super {
top: 100%; top: 100%;
min-height: calc((var(--vh, 1vh) * 100) - 100% - 56px); min-height: calc((var(--vh, 1vh) * 100) - 100% - 56px);
&.sliding { &.sliding {
max-height: calc((var(--vh, 1vh) * 100) - 100% - 56px); max-height: calc((var(--vh, 1vh) * 100) - 100% - 56px);
} }
} */
.search-super {
top: 100%;
min-height: calc((var(--vh, 1vh) * 100) - 56px);
} }
.sidebar-header .transition { .sidebar-header .transition {
@ -271,8 +275,12 @@
} }
} }
&.sliding { /* &.sliding {
max-height: 100%; max-height: 100%;
} */
&.sliding {
max-height: none !important;
} }
&-tabs { &-tabs {
@ -287,10 +295,22 @@
box-shadow: none !important; box-shadow: none !important;
position: -webkit-sticky !important; position: -webkit-sticky !important;
position: sticky !important; position: sticky !important;
top: -1px; //top: -1px;
top: 0px;
z-index: 2; z-index: 2;
background-color: #fff; background-color: #fff;
&:before {
position: absolute;
width: 100%;
height: 1px;
left: 0;
top: -1px;
background-color: inherit;
display: block;
content: " ";
}
.scrollable { .scrollable {
position: relative; position: relative;
} }
@ -324,6 +344,11 @@
} */ } */
} }
/* .scrollable-y {
height: auto;
position: absolute !important;
} */
/* > div > div:not(.scroll-padding) { /* > div > div:not(.scroll-padding) {
height: 100%; height: 100%;
} */ } */

Loading…
Cancel
Save