mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
105 lines
2.9 KiB
JavaScript
105 lines
2.9 KiB
JavaScript
/**
|
|
* dat-gui JavaScript Controller Library
|
|
* http://code.google.com/p/dat-gui
|
|
*
|
|
* Copyright 2011 Data Arts Team, Google Creative Lab
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*/
|
|
|
|
import dom from '../dom/dom';
|
|
import common from '../utils/common';
|
|
|
|
class CenteredDiv {
|
|
constructor() {
|
|
this.backgroundElement = document.createElement('div');
|
|
common.extend(this.backgroundElement.style, {
|
|
backgroundColor: 'rgba(0,0,0,0.8)',
|
|
top: 0,
|
|
left: 0,
|
|
display: 'none',
|
|
zIndex: '1000',
|
|
opacity: 0,
|
|
WebkitTransition: 'opacity 0.2s linear',
|
|
transition: 'opacity 0.2s linear'
|
|
});
|
|
|
|
dom.makeFullscreen(this.backgroundElement);
|
|
this.backgroundElement.style.position = 'fixed';
|
|
|
|
this.domElement = document.createElement('div');
|
|
common.extend(this.domElement.style, {
|
|
position: 'fixed',
|
|
display: 'none',
|
|
zIndex: '1001',
|
|
opacity: 0,
|
|
WebkitTransition: '-webkit-transform 0.2s ease-out, opacity 0.2s linear',
|
|
transition: 'transform 0.2s ease-out, opacity 0.2s linear'
|
|
});
|
|
|
|
|
|
document.body.appendChild(this.backgroundElement);
|
|
document.body.appendChild(this.domElement);
|
|
|
|
const _this = this;
|
|
dom.bind(this.backgroundElement, 'click', function() {
|
|
_this.hide();
|
|
});
|
|
}
|
|
|
|
show() {
|
|
const _this = this;
|
|
|
|
this.backgroundElement.style.display = 'block';
|
|
|
|
this.domElement.style.display = 'block';
|
|
this.domElement.style.opacity = 0;
|
|
// this.domElement.style.top = '52%';
|
|
this.domElement.style.webkitTransform = 'scale(1.1)';
|
|
|
|
this.layout();
|
|
|
|
common.defer(function() {
|
|
_this.backgroundElement.style.opacity = 1;
|
|
_this.domElement.style.opacity = 1;
|
|
_this.domElement.style.webkitTransform = 'scale(1)';
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Hide centered div
|
|
*/
|
|
hide() {
|
|
const _this = this;
|
|
|
|
const hide = function() {
|
|
_this.domElement.style.display = 'none';
|
|
_this.backgroundElement.style.display = 'none';
|
|
|
|
dom.unbind(_this.domElement, 'webkitTransitionEnd', hide);
|
|
dom.unbind(_this.domElement, 'transitionend', hide);
|
|
dom.unbind(_this.domElement, 'oTransitionEnd', hide);
|
|
};
|
|
|
|
dom.bind(this.domElement, 'webkitTransitionEnd', hide);
|
|
dom.bind(this.domElement, 'transitionend', hide);
|
|
dom.bind(this.domElement, 'oTransitionEnd', hide);
|
|
|
|
this.backgroundElement.style.opacity = 0;
|
|
// this.domElement.style.top = '48%';
|
|
this.domElement.style.opacity = 0;
|
|
this.domElement.style.webkitTransform = 'scale(1.1)';
|
|
}
|
|
|
|
layout() {
|
|
this.domElement.style.left = window.innerWidth / 2 - dom.getWidth(this.domElement) / 2 + 'px';
|
|
this.domElement.style.top = window.innerHeight / 2 - dom.getHeight(this.domElement) / 2 + 'px';
|
|
}
|
|
}
|
|
|
|
export default CenteredDiv;
|