molstar
Version:
A comprehensive macromolecular library.
179 lines • 8.15 kB
JavaScript
;
/**
* Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
*
* @author David Sehnal <david.sehnal@gmail.com>
* @author Alexander Rose <alexander.rose@weirdbyte.de>
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.PluginLayout = exports.PluginLayoutStateParams = void 0;
var tslib_1 = require("tslib");
var param_definition_1 = require("../mol-util/param-definition");
var component_1 = require("../mol-plugin-state/component");
var commands_1 = require("./commands");
var regionStateOptions = [
['full', 'Full'],
['collapsed', 'Collapsed'],
['hidden', 'Hidden'],
];
var simpleRegionStateOptions = [
['full', 'Full'],
['hidden', 'Hidden'],
];
exports.PluginLayoutStateParams = {
isExpanded: param_definition_1.ParamDefinition.Boolean(false),
showControls: param_definition_1.ParamDefinition.Boolean(true),
regionState: param_definition_1.ParamDefinition.Group({
left: param_definition_1.ParamDefinition.Select('full', regionStateOptions),
top: param_definition_1.ParamDefinition.Select('full', simpleRegionStateOptions),
right: param_definition_1.ParamDefinition.Select('full', simpleRegionStateOptions),
bottom: param_definition_1.ParamDefinition.Select('full', simpleRegionStateOptions),
}),
controlsDisplay: param_definition_1.ParamDefinition.Value('outside', { isHidden: true })
};
var PluginLayout = /** @class */ (function (_super) {
(0, tslib_1.__extends)(PluginLayout, _super);
function PluginLayout(context) {
var _this = _super.call(this, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, param_definition_1.ParamDefinition.getDefaultValues(exports.PluginLayoutStateParams)), (context.spec.layout && context.spec.layout.initial))) || this;
_this.context = context;
_this.events = {
updated: _this.ev()
};
_this.rootState = void 0;
commands_1.PluginCommands.Layout.Update.subscribe(context, function (e) { return _this.updateProps(e.state); });
// TODO how best make sure it runs on node.js as well as in the browser?
if (typeof document !== 'undefined') {
// <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
_this.expandedViewport = document.createElement('meta');
_this.expandedViewport.name = 'viewport';
_this.expandedViewport.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0';
}
return _this;
}
PluginLayout.prototype.updateProps = function (state) {
var prevExpanded = !!this.state.isExpanded;
this.updateState(state);
if (this.root && typeof state.isExpanded === 'boolean' && state.isExpanded !== prevExpanded)
this.handleExpand();
this.events.updated.next(void 0);
};
PluginLayout.prototype.setProps = function (props) {
this.updateState(props);
};
PluginLayout.prototype.setRoot = function (root) {
this.root = root;
if (this.state.isExpanded)
this.handleExpand();
};
PluginLayout.prototype.getScrollElement = function () {
if (document.scrollingElement)
return document.scrollingElement;
if (document.documentElement)
return document.documentElement;
return document.body;
};
PluginLayout.prototype.handleExpand = function () {
try {
var body = document.getElementsByTagName('body')[0];
var head = document.getElementsByTagName('head')[0];
if (!body || !head || !this.root)
return;
if (this.state.isExpanded) {
var children = head.children;
var viewports = [];
var hasExp = false;
for (var i = 0; i < children.length; i++) {
if (children[i] === this.expandedViewport) {
hasExp = true;
}
else if ((children[i].name || '').toLowerCase() === 'viewport') {
viewports.push(children[i]);
}
}
for (var _i = 0, viewports_1 = viewports; _i < viewports_1.length; _i++) {
var v = viewports_1[_i];
head.removeChild(v);
}
if (!hasExp)
head.appendChild(this.expandedViewport);
var s = body.style;
var doc = this.getScrollElement();
var scrollLeft = doc.scrollLeft;
var scrollTop = doc.scrollTop;
this.rootState = {
top: s.top, bottom: s.bottom, right: s.right, left: s.left,
scrollTop: scrollTop,
scrollLeft: scrollLeft,
position: s.position, overflow: s.overflow,
viewports: viewports,
zIndex: this.root.style.zIndex,
width: s.width, height: s.height,
maxWidth: s.maxWidth, maxHeight: s.maxHeight,
margin: s.margin, marginLeft: s.marginLeft, marginRight: s.marginRight, marginTop: s.marginTop, marginBottom: s.marginBottom
};
s.overflow = 'hidden';
s.position = 'fixed';
s.top = '0';
s.bottom = '0';
s.right = '0';
s.left = '0';
s.width = '100%';
s.height = '100%';
s.maxWidth = '100%';
s.maxHeight = '100%';
s.margin = '0';
s.marginLeft = '0';
s.marginRight = '0';
s.marginTop = '0';
s.marginBottom = '0';
// TODO: setting this breaks viewport controls for some reason. Is there a fix?
// this.root.style.zIndex = '100000';
}
else {
var children = head.children;
for (var i = 0; i < children.length; i++) {
if (children[i] === this.expandedViewport) {
head.removeChild(this.expandedViewport);
break;
}
}
if (this.rootState) {
var t = this.rootState;
for (var _a = 0, _b = t.viewports; _a < _b.length; _a++) {
var v = _b[_a];
head.appendChild(v);
}
var s = body.style;
s.top = t.top;
s.bottom = t.bottom;
s.left = t.left;
s.right = t.right;
s.width = t.width;
s.height = t.height;
s.maxWidth = t.maxWidth;
s.maxHeight = t.maxHeight;
s.margin = t.margin;
s.marginLeft = t.marginLeft;
s.marginRight = t.marginRight;
s.marginTop = t.marginTop;
s.marginBottom = t.marginBottom;
s.position = t.position;
s.overflow = t.overflow || '';
var doc = this.getScrollElement();
doc.scrollTop = t.scrollTop;
doc.scrollLeft = t.scrollLeft;
this.rootState = void 0;
this.root.style.zIndex = t.zIndex;
}
}
}
catch (e) {
var msg = 'Layout change error, you might have to reload the page.';
this.context.log.error(msg);
console.error(msg, e);
}
};
return PluginLayout;
}(component_1.StatefulPluginComponent));
exports.PluginLayout = PluginLayout;
//# sourceMappingURL=layout.js.map