mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
46de34be1e
The background wasn't set to display: none because the css transitions were set with webkit prefix only and so weren't triggered of Firefox.
117 lines
3.0 KiB
JavaScript
117 lines
3.0 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
|
|
*/
|
|
|
|
define([
|
|
'dat/dom/dom',
|
|
'dat/utils/common'
|
|
], function(dom, common) {
|
|
|
|
|
|
var CenteredDiv = function() {
|
|
|
|
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);
|
|
|
|
var _this = this;
|
|
dom.bind(this.backgroundElement, 'click', function() {
|
|
_this.hide();
|
|
});
|
|
|
|
|
|
};
|
|
|
|
CenteredDiv.prototype.show = function() {
|
|
|
|
var _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)';
|
|
});
|
|
|
|
};
|
|
|
|
CenteredDiv.prototype.hide = function() {
|
|
|
|
var _this = this;
|
|
|
|
var 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)';
|
|
|
|
};
|
|
|
|
CenteredDiv.prototype.layout = function() {
|
|
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';
|
|
};
|
|
|
|
function lockScroll(e) {
|
|
console.log(e);
|
|
}
|
|
|
|
return CenteredDiv;
|
|
|
|
}); |