Skip to content
Snippets Groups Projects
Commit 0bcf2b1f authored by Alexander Rose's avatar Alexander Rose
Browse files

fix wrong style.overflow assignment

parent d074415a
No related branches found
No related tags found
No related merge requests found
/** /**
* Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info. * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
* *
* @author David Sehnal <david.sehnal@gmail.com> * @author David Sehnal <david.sehnal@gmail.com>
* @author Alexander Rose <alexander.rose@weirdbyte.de>
*/ */
import { ParamDefinition as PD } from '../mol-util/param-definition'; import { ParamDefinition as PD } from '../mol-util/param-definition';
...@@ -39,7 +40,7 @@ interface RootState { ...@@ -39,7 +40,7 @@ interface RootState {
position: string | null, position: string | null,
overflow: string | null, overflow: string | null,
viewports: HTMLElement[], viewports: HTMLElement[],
zindex: string | null zIndex: string | null
} }
export class PluginLayout extends PluginComponent<PluginLayoutStateProps> { export class PluginLayout extends PluginComponent<PluginLayoutStateProps> {
...@@ -48,7 +49,7 @@ export class PluginLayout extends PluginComponent<PluginLayoutStateProps> { ...@@ -48,7 +49,7 @@ export class PluginLayout extends PluginComponent<PluginLayoutStateProps> {
} }
private updateProps(state: Partial<PluginLayoutStateProps>) { private updateProps(state: Partial<PluginLayoutStateProps>) {
let prevExpanded = !!this.state.isExpanded; const prevExpanded = !!this.state.isExpanded;
this.updateState(state); this.updateState(state);
if (this.root && typeof state.isExpanded === 'boolean' && state.isExpanded !== prevExpanded) this.handleExpand(); if (this.root && typeof state.isExpanded === 'boolean' && state.isExpanded !== prevExpanded) this.handleExpand();
...@@ -76,15 +77,15 @@ export class PluginLayout extends PluginComponent<PluginLayoutStateProps> { ...@@ -76,15 +77,15 @@ export class PluginLayout extends PluginComponent<PluginLayoutStateProps> {
private handleExpand() { private handleExpand() {
try { try {
let body = document.getElementsByTagName('body')[0]; const body = document.getElementsByTagName('body')[0];
let head = document.getElementsByTagName('head')[0]; const head = document.getElementsByTagName('head')[0];
if (!body || !head || !this.root) return; if (!body || !head || !this.root) return;
if (this.state.isExpanded) { if (this.state.isExpanded) {
let children = head.children; const children = head.children;
const viewports: HTMLElement[] = [];
let hasExp = false; let hasExp = false;
let viewports: HTMLElement[] = [];
for (let i = 0; i < children.length; i++) { for (let i = 0; i < children.length; i++) {
if (children[i] === this.expandedViewport) { if (children[i] === this.expandedViewport) {
hasExp = true; hasExp = true;
...@@ -100,14 +101,14 @@ export class PluginLayout extends PluginComponent<PluginLayoutStateProps> { ...@@ -100,14 +101,14 @@ export class PluginLayout extends PluginComponent<PluginLayoutStateProps> {
if (!hasExp) head.appendChild(this.expandedViewport); if (!hasExp) head.appendChild(this.expandedViewport);
let s = body.style; const s = body.style;
let doc = this.getScrollElement(); const doc = this.getScrollElement();
let scrollLeft = doc.scrollLeft; const scrollLeft = doc.scrollLeft;
let scrollTop = doc.scrollTop; const scrollTop = doc.scrollTop;
this.rootState = { this.rootState = {
top: s.top, bottom: s.bottom, right: s.right, left: s.left, scrollTop, scrollLeft, position: s.position, overflow: s.overflow, viewports, zindex: this.root.style.zIndex, top: s.top, bottom: s.bottom, right: s.right, left: s.left, scrollTop, scrollLeft, position: s.position, overflow: s.overflow, viewports, zIndex: this.root.style.zIndex,
width: s.width, height: s.height, width: s.width, height: s.height,
maxWidth: s.maxWidth, maxHeight: s.maxHeight, maxWidth: s.maxWidth, maxHeight: s.maxHeight,
margin: s.margin, marginLeft: s.marginLeft, marginRight: s.marginRight, marginTop: s.marginTop, marginBottom: s.marginBottom margin: s.margin, marginLeft: s.marginLeft, marginRight: s.marginRight, marginTop: s.marginTop, marginBottom: s.marginBottom
...@@ -133,7 +134,7 @@ export class PluginLayout extends PluginComponent<PluginLayoutStateProps> { ...@@ -133,7 +134,7 @@ export class PluginLayout extends PluginComponent<PluginLayoutStateProps> {
// TODO: setting this breaks viewport controls for some reason. Is there a fix? // TODO: setting this breaks viewport controls for some reason. Is there a fix?
// this.root.style.zIndex = '100000'; // this.root.style.zIndex = '100000';
} else { } else {
let children = head.children; const children = head.children;
for (let i = 0; i < children.length; i++) { for (let i = 0; i < children.length; i++) {
if (children[i] === this.expandedViewport) { if (children[i] === this.expandedViewport) {
head.removeChild(this.expandedViewport); head.removeChild(this.expandedViewport);
...@@ -142,10 +143,12 @@ export class PluginLayout extends PluginComponent<PluginLayoutStateProps> { ...@@ -142,10 +143,12 @@ export class PluginLayout extends PluginComponent<PluginLayoutStateProps> {
} }
if (this.rootState) { if (this.rootState) {
let s = body.style, t = this.rootState; const t = this.rootState;
for (let v of t.viewports) { for (let v of t.viewports) {
head.appendChild(v); head.appendChild(v);
} }
const s = body.style
s.top = t.top; s.top = t.top;
s.bottom = t.bottom; s.bottom = t.bottom;
s.left = t.left; s.left = t.left;
...@@ -162,17 +165,20 @@ export class PluginLayout extends PluginComponent<PluginLayoutStateProps> { ...@@ -162,17 +165,20 @@ export class PluginLayout extends PluginComponent<PluginLayoutStateProps> {
s.marginBottom = t.marginBottom; s.marginBottom = t.marginBottom;
s.position = t.position; s.position = t.position;
s.overflow = t.overflow || 'fixed'; s.overflow = t.overflow || '';
let doc = this.getScrollElement();
const doc = this.getScrollElement();
doc.scrollTop = t.scrollTop; doc.scrollTop = t.scrollTop;
doc.scrollLeft = t.scrollLeft; doc.scrollLeft = t.scrollLeft;
this.rootState = void 0; this.rootState = void 0;
this.root.style.zIndex = t.zindex; this.root.style.zIndex = t.zIndex;
} }
} }
} catch (e) { } catch (e) {
this.context.log.error('Layout change error, you might have to reload the page.'); const msg = 'Layout change error, you might have to reload the page.'
console.log('Layout change error, you might have to reload the page.', e); this.context.log.error(msg);
console.error(msg, e);
} }
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment