Added updateValue method to StringController (so watched string controllers update).

Moved easing from margin-top to height. It's now showing an ugly scrollbar jump. Hmm...
This commit is contained in:
Mr.doob 2011-01-29 02:25:48 +00:00
parent 25f2d64c74
commit 46b5d1ff24
2 changed files with 32 additions and 26 deletions

View File

@ -4,24 +4,30 @@ var StringController = function() {
var _this = this; var _this = this;
Controller.apply(this, arguments); Controller.apply(this, arguments);
var input = document.createElement('input'); var input = document.createElement('input');
var initialValue = this.getValue(); var initialValue = this.getValue();
input.setAttribute('value', initialValue); input.setAttribute('value', initialValue);
input.setAttribute('spellcheck', 'false'); input.setAttribute('spellcheck', 'false');
this.domElement.addEventListener('mouseup', function() {
input.focus();
input.select();
}, false);
input.addEventListener('keyup', function() { this.domElement.addEventListener('mouseup', function() {
_this.setValue(input.value); input.focus();
}, false); input.select();
}, false);
input.addEventListener('keyup', function() {
_this.setValue(input.value);
}, false);
this.domElement.appendChild(input);
this.updateValue = function(val) {
input.setAttribute('value', val);
}
this.domElement.appendChild(input);
}; };
StringController.prototype = new Controller(); StringController.prototype = new Controller();
StringController.prototype.constructor = StringController; StringController.prototype.constructor = StringController;

View File

@ -8,9 +8,6 @@
left: 100%; left: 100%;
margin-left: -300px; margin-left: -300px;
background-color: #fff; background-color: #fff;
-moz-transition: margin-top .2s ease-out;
-webkit-transition: margin-top .2s ease-out;
transition: margin-top .2s ease-out;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
@ -26,6 +23,9 @@
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
background-color: rgba(0,0,0,0.1); background-color: rgba(0,0,0,0.1);
-moz-transition: height .2s ease-out;
-webkit-transition: height .2s ease-out;
transition: height .2s ease-out;
} }
#guidat-toggle { #guidat-toggle {