Attempt to make text in number boxes unselectable.

This commit is contained in:
George Michael Brower 2011-01-24 15:08:48 -07:00
parent b8323ce896
commit e648445346
6 changed files with 29 additions and 18 deletions

View File

@ -19,6 +19,13 @@ var Controller = function() {
elem.unselectable = "on";
}
this.makeSelectable = function(elem) {
elem.onselectstart = function() { };
elem.style.MozUserSelect = "auto";
elem.style.KhtmlUserSelect = "auto";
elem.unselectable = "off";
}
this.domElement = document.createElement('div');
this.domElement.setAttribute('class', 'guidat-controller ' + this.type);

View File

@ -43,10 +43,15 @@ var NumberController = function() {
}, false);
document.addEventListener('mouseup', function(e) {
isClicked = false;
_this.makeSelectable(GUI.domElement);
_this.makeSelectable(button);
}, false);
document.addEventListener('mousemove', function(e) {
if(isClicked) {
e.preventDefault();
_this.makeUnselectable(GUI.domElement);
_this.makeUnselectable(button);
py = y;
y = e.offsetY;
var dy = y - py;
@ -64,8 +69,8 @@ var NumberController = function() {
}
button.value = inc;
_this.setValue(inc);
}
return false;
}
}, false);
this.__defineSetter__("position", function(val) {

View File

@ -11,6 +11,7 @@ var StringController = function() {
var initialValue = this.getValue();
input.setAttribute('value', initialValue);
input.setAttribute('spellcheck', 'false');
this.domElement.addEventListener('mouseup', function() {
input.focus();
input.select();

View File

@ -3,12 +3,13 @@
<link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
<link href="demo.css" media="screen" rel="stylesheet" type="text/css" />
<!--<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>-->
<script type="text/javascript" src="gui.js"></script>
<script type="text/javascript" src="controller.js"></script>
<script type="text/javascript" src="controller.string.js"></script>
<script type="text/javascript" src="controller.number.js"></script>
<script type="text/javascript" src="controller.boolean.js"></script>
<script type="text/javascript" src="controller.function.js"></script>
<script type="text/javascript" src="gui.js"></script>
<script id="demo" type="text/javascript">
var controllableObject =
{
@ -41,8 +42,6 @@ window.onload = function() {
// Creates a checkbox
GUI.add(controllableObject, "booleanProperty");
// Creates a checkbox
GUI.add(controllableObject, "anotherBooleanProperty");
// Creates a button
GUI.add(controllableObject, "functionProperty");

View File

@ -78,7 +78,6 @@
}
.guidat-controller.number input[type=number] {
width: 45px;
cursor: ns-resize;
}
.guidat-controller.boolean input {
@ -88,7 +87,7 @@ margin-top: 6px;
.guidat-controller:last-child {
border-bottom: none;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);

22
gui.js
View File

@ -17,8 +17,8 @@ var GUI = new function() {
// Have we already added this?
if (alreadyControlled(object, propertyName)) {
error("Controller for \"" + propertyName+"\" already added.");
return;
// error("Controller for \"" + propertyName+"\" already added.");
// return;
}
var value = object[propertyName];
@ -102,7 +102,7 @@ var GUI = new function() {
// GUI ... GUI
var domElement;
this.domElement = null;
var controllerContainer;
var started = false;
var open = false;
@ -112,8 +112,8 @@ var GUI = new function() {
this.start = function() {
domElement = document.createElement('div');
domElement.setAttribute('id', 'guidat');
this.domElement = document.createElement('div');
this.domElement.setAttribute('id', 'guidat');
controllerContainer = document.createElement('div');
controllerContainer.setAttribute('id', 'guidat-controllers');
@ -127,12 +127,12 @@ var GUI = new function() {
e.preventDefault();
}, false);
domElement.appendChild(controllerContainer);
domElement.appendChild(toggleButton);
this.domElement.appendChild(controllerContainer);
this.domElement.appendChild(toggleButton);
domElement.style.marginTop = -domElementMarginTop+"px";
this.domElement.style.marginTop = -domElementMarginTop+"px";
document.body.appendChild(domElement);
document.body.appendChild(this.domElement);
started = true;
@ -149,13 +149,13 @@ var GUI = new function() {
};
this.show = function() {
domElement.style.marginTop = 0+"px";
this.domElement.style.marginTop = 0+"px";
toggleButton.innerHTML = "Hide Controls";
open = true;
}
this.hide = function() {
domElement.style.marginTop = -domElementMarginTop+"px";
this.domElement.style.marginTop = -domElementMarginTop+"px";
toggleButton.innerHTML = "Show Controls";
open = false;
}