mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
Fixed a bug where typing the letter h in a string field would hide the gui
This commit is contained in:
George Michael Brower
parent
08eb75861c
commit
bfc6820597
314
demo/demo.css
314
demo/demo.css
@ -1,221 +1,265 @@
|
|||||||
* {
|
* {
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font: 9.5px/13px Lucida Grande, sans-serif;
|
font: 9.5px/13px Lucida Grande, sans-serif;
|
||||||
padding: 0 20px 20px 20px;
|
padding: 0 20px 20px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#container {
|
#container {
|
||||||
max-width: 530px;
|
max-width: 530px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
|
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
|
||||||
color: #222;
|
color: #222;
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
border: 0;
|
border: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
border-top: 1px dotted #ccc;
|
border-top: 1px dotted #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 80px;
|
font-size: 80px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
text-transform: lowercase;
|
text-transform: lowercase;
|
||||||
line-height: 80px;
|
line-height: 80px;
|
||||||
margin: 39px 0 20px 0;
|
margin: 39px 0 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
|
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
margin-right: 7px;
|
margin-right: 7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 img {
|
h1 img {
|
||||||
width: 45px;
|
width: 45px;
|
||||||
height: 45px;
|
height: 45px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2.section {
|
h2.section {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 20px 0px 20px 0px;
|
padding: 20px 0px 20px 0px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-top: 1px dotted #ccc;
|
border-top: 1px dotted #ccc;
|
||||||
-webkit-transition: color 0.15s linear;
|
-webkit-transition: color 0.15s linear;
|
||||||
}
|
|
||||||
h2.section:hover {
|
|
||||||
color: #00aeff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
div.collapsed h2, div.expanded h2 {
|
h2.section:hover {
|
||||||
|
color: #00aeff;
|
||||||
float: left;
|
|
||||||
clear: both;
|
|
||||||
width: 100%;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.last { margin-bottom: 0px !important; }
|
div.collapsed h2, div.expanded h2 {
|
||||||
.first { margin-top: 0px; }
|
|
||||||
|
float: left;
|
||||||
|
clear: both;
|
||||||
|
width: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.last {
|
||||||
|
margin-bottom: 0px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first {
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
div.trans {
|
div.trans {
|
||||||
border-top: 1px dotted #ccc;
|
border-top: 1px dotted #ccc;
|
||||||
margin: 0px 0px 20px 0px;
|
margin: 0px 0px 20px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ol#secrets {
|
ol#secrets {
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.expanded h2:before {
|
div.expanded h2:before {
|
||||||
content: '-';
|
content: '-';
|
||||||
}
|
}
|
||||||
div.collapsed h2:before {
|
|
||||||
content: '+';
|
div.collapsed h2:before {
|
||||||
|
content: '+';
|
||||||
}
|
}
|
||||||
|
|
||||||
div.expanded h2:before, div.collapsed h2:before {
|
div.expanded h2:before, div.collapsed h2:before {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
line-height: 2px;
|
line-height: 2px;
|
||||||
float: left;
|
float: left;
|
||||||
margin-top: 6px;
|
margin-top: 6px;
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
font-family: Monaco, monospace;
|
font-family: Monaco, monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.collapsable>div {
|
div.collapsable>div {
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.collapsable {
|
div.collapsable {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
clear: both;
|
clear: both;
|
||||||
-moz-transition: height .2s ease-out;
|
-moz-transition: height .2s ease-out;
|
||||||
-webkit-transition: height .2s ease-out;
|
-webkit-transition: height .2s ease-out;
|
||||||
transition: height .2s ease-out;
|
transition: height .2s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.collapsable div {
|
div.collapsable div {
|
||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
margin-bottom: -20px;
|
margin-bottom: -20px;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.collapsed .collapsable {
|
div.collapsed .collapsable {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
clear: both;
|
clear: both;
|
||||||
height: 0;
|
height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.expanded { cursor: pointer; }
|
div.expanded {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
#helvetica-demo {
|
#helvetica-demo {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 800;
|
width: 800;
|
||||||
height: 300;
|
height: 300;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#notifier {
|
#notifier {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 300px;
|
||||||
width: 271px;
|
width: 271px;
|
||||||
height: 142px;
|
height: 142px;
|
||||||
background: url("assets/itgivesyouthis.jpg") center 0 no-repeat;
|
background: url("assets/itgivesyouthis.jpg") center 0 no-repeat;
|
||||||
z-index: -2;
|
z-index: -2;
|
||||||
margin: 30px 22px 0 0;
|
margin: 30px 22px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
margin: 20px 0 20px 0;
|
margin: 20px 0 20px 0;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
background-color: #222;
|
background-color: #222;
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
font: 10px Monaco, monospace;
|
font: 10px Monaco, monospace;
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
p, ul, ol {
|
p, ul, ol {
|
||||||
font-size: 125%;
|
font-size: 125%;
|
||||||
clear: both;
|
clear: both;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
margin-left: 22px;
|
margin-left: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul#desc {
|
ul#desc {
|
||||||
list-style: circle;
|
list-style: circle;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
max-width: 380px;
|
max-width: 380px;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:link {
|
a:link {
|
||||||
color: #00aeff;
|
color: #00aeff;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:visited {
|
a:visited {
|
||||||
color: #0fa954;
|
color: #0fa954;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
color: #e61d5f;
|
color: #e61d5f;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:active {
|
a:active {
|
||||||
color: #54396e;
|
color: #54396e;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
width: 510px;
|
width: 510px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
clear: both;
|
clear: both;
|
||||||
color: #444;
|
color: #444;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
pre a:link,
|
pre a:link,
|
||||||
pre a:visited,
|
pre a:visited,
|
||||||
pre a:active,
|
pre a:active,
|
||||||
pre a:hover {
|
pre a:hover {
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
font: 10px Monaco, monospace;
|
font: 10px Monaco, monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
code strong {
|
code strong {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
color: #e61d5f;
|
color: #e61d5f;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* SPAN elements with the classes below are added by prettyprint. */
|
.str {
|
||||||
.str { color: #0fa954; }
|
color: #0fa954;
|
||||||
.kwd { color: #e61d5f; }
|
}
|
||||||
.com { color: #555; }
|
|
||||||
.typ { color: #ccc; }
|
.kwd {
|
||||||
.lit { color: #00aeff; }
|
color: #e61d5f;
|
||||||
.pun, .opn, .clo { color: #777; }
|
}
|
||||||
.pln { color: #ccc; }
|
|
||||||
.tag { color: #555; }
|
.com {
|
||||||
.atn { color: #555; }
|
color: #555;
|
||||||
.atv { color: #777; }
|
}
|
||||||
.dec { color: #606; }
|
|
||||||
|
.typ {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lit {
|
||||||
|
color: #00aeff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pun, .opn, .clo {
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pln {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.atn {
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.atv {
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dec {
|
||||||
|
color: #606;
|
||||||
|
}
|
||||||
@ -26,11 +26,16 @@ DAT.GUI.ControllerString = function() {
|
|||||||
}, false);
|
}, false);
|
||||||
|
|
||||||
input.addEventListener('blur', function() {
|
input.addEventListener('blur', function() {
|
||||||
|
DAT.GUI.supressHotKeys = false;
|
||||||
if (_this.finishChangeFunction != null) {
|
if (_this.finishChangeFunction != null) {
|
||||||
_this.finishChangeFunction.call(this, _this.getValue());
|
_this.finishChangeFunction.call(this, _this.getValue());
|
||||||
}
|
}
|
||||||
}, false);
|
}, false);
|
||||||
|
|
||||||
|
input.addEventListener('focus', function() {
|
||||||
|
DAT.GUI.supressHotKeys = true;
|
||||||
|
}, false);
|
||||||
|
|
||||||
this.updateDisplay = function() {
|
this.updateDisplay = function() {
|
||||||
input.value = _this.getValue();
|
input.value = _this.getValue();
|
||||||
};
|
};
|
||||||
|
|||||||
@ -20,6 +20,9 @@ DAT.GUI = function(parameters) {
|
|||||||
|
|
||||||
var listenInterval;
|
var listenInterval;
|
||||||
|
|
||||||
|
// Set this to minified css if you don't want to attach style sheets
|
||||||
|
var inlineCSS = '';
|
||||||
|
|
||||||
// Sum total of heights of controllers in this gui
|
// Sum total of heights of controllers in this gui
|
||||||
var controllerHeight;
|
var controllerHeight;
|
||||||
|
|
||||||
@ -453,12 +456,21 @@ DAT.GUI = function(parameters) {
|
|||||||
|
|
||||||
// Add hide listener if this is the first DAT.GUI.
|
// Add hide listener if this is the first DAT.GUI.
|
||||||
if (DAT.GUI.allGuis.length == 1) {
|
if (DAT.GUI.allGuis.length == 1) {
|
||||||
|
|
||||||
window.addEventListener('keyup', function(e) {
|
window.addEventListener('keyup', function(e) {
|
||||||
// Hide on 'H'
|
// Hide on 'H'
|
||||||
if (e.keyCode == 72) {
|
if (!DAT.GUI.supressHotKeys && e.keyCode == 72) {
|
||||||
DAT.GUI.toggleHide();
|
DAT.GUI.toggleHide();
|
||||||
}
|
}
|
||||||
}, false);
|
}, false);
|
||||||
|
|
||||||
|
if (inlineCSS != '') {
|
||||||
|
var styleSheet = document.createElement('style');
|
||||||
|
styleSheet.setAttribute('type', 'text/css');
|
||||||
|
styleSheet.innerHTML = inlineCSS;
|
||||||
|
document.head.appendChild(styleSheet);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
@ -473,6 +485,7 @@ DAT.GUI.autoPlaceContainer = null;
|
|||||||
DAT.GUI.allControllers = [];
|
DAT.GUI.allControllers = [];
|
||||||
DAT.GUI.allGuis = [];
|
DAT.GUI.allGuis = [];
|
||||||
|
|
||||||
|
DAT.GUI.supressHotKeys = false;
|
||||||
|
|
||||||
DAT.GUI.toggleHide = function() {
|
DAT.GUI.toggleHide = function() {
|
||||||
if (DAT.GUI.hidden) {
|
if (DAT.GUI.hidden) {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user