Saving on lock, memorizes panel appearance, scrollOffsets, you name it. Gonna give this a lookover in FF then minify and push to gh-pages

controllers/controller.number.js

@@ -63,6 +63,20 @@ var NumberController = function() {
         document.addEventListener('mousemove', dragNumberField, false);
     }, false);
 
+	// Handle up arrow and down arrow
+	numberField.addEventListener('keydown', function(e) {
+		switch(e.keyCode) {
+			case 38: 	// up
+				var newVal = _this.getValue() + step;
+				_this.setValue(newVal);
+				break;
+			case 40: 	// down
+				var newVal = _this.getValue() - step;
+				_this.setValue(newVal);
+				break;
+		}
+	}, false);
+    
     document.addEventListener('mouseup', function(e) {
         document.removeEventListener('mousemove', dragNumberField, false);
         GUI.makeSelectable(_this.parent.domElement); 

demo/demo.css

@@ -48,40 +48,56 @@ h2 {
     margin-bottom: 24px;
 }
 
-h2.collapsed { 
+h2.section { 
+margin: 0;
+padding: 20px 0 20px;
+cursor: pointer;
+border-top: 1px dotted #ccc;
+-webkit-transition: color 0.15s linear;
+}
+h2.section:hover { 
+color: #00aeff;
+}
 
-    padding-top:24px;
+div.collapsed h2, div.expanded h2 { 
-    border-top: 1px solid #ccc;
-    margin-top: 0;
-    }
-
-/*
-h2.collapsed { 
 
     float: left;
     clear: both;
     width: 100%;
-cursor: pointer;
+	cursor: pointer;
 }
-h2.collapsed:before { 
+h2.last {
-content: '+';
+border-bottom: 1px dotted #ccc;
-font-weight: normal;
+margin-bottom: 20px;
-line-height: 2px;
-float: left;
-margin-top: 6px;
-margin-right: 6px;
-font-size: 9px;
-font-family: Monaco, monospace;
-}
-h2.collapsed:hover:before { 
-color: red;
 }
 
-.collapsable {
+div.expanded h2:before {
-clear: both;
+	content: '-';
+}
+div.collapsed h2:before { 
+	content: '+';
+}
+div.expanded h2:before, div.collapsed h2:before {
+	font-weight: normal;
+	line-height: 2px;
+	float: left;
+	margin-top: 6px;
+	margin-right: 6px;
+	font-size: 9px;
+	font-family: Monaco, monospace;
+}
 
-display: none;
+div.collapsed .collapsable {
-}*/
+	overflow: hidden;
+	clear: both;
+	height: 0;
+}
+div.expanded .collapsable {
+	overflow: hidden;
+	clear: both;
+	height: auto;
+}
+div.expanded { cursor: pointer; }
 
 #helvetica-demo {
 	position: absolute;

demo/demo.js

@@ -224,5 +224,4 @@ function FizzyText(message) {
         
     }
 
-
 }

gui.css

@@ -1,8 +1,8 @@
 #guidat { 
 position: fixed;
 top: 0; 
-left: 0;
+right: 0;
-width: 100%;
+width: auto;
 z-index: 1001;
 text-align: right;
 }

gui.js

@@ -22,8 +22,6 @@ var GUI = function() {
 	
 	var _this = this;
 	
-	
-	
 	var open = false;
 	var width = 280;
 	
@@ -338,7 +336,7 @@ var GUI = function() {
 		} else {
 			controllerContainer.style.overflowY = "hidden";
 		}	
-		console.log(controllerHeight, openHeight);
+		// console.log(controllerHeight, openHeight);
 	}
 	
 	var addHandlers = {
@@ -399,7 +397,7 @@ var GUI = function() {
 	
 	// used in saveURL
 	this.appearanceVars = function() {
-		return [open, width, openHeight];
+		return [open, width, openHeight, controllerContainer.scrollTop]
 	}
 	
 	var beginResize = function() {
@@ -418,12 +416,26 @@ var GUI = function() {
 
 	if (GUI.guiIndex < GUI.savedAppearanceVars.length) {
 
+	
 		width = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][1]);
 		_this.domElement.style.width = width+"px";
 		
 		openHeight = parseInt(GUI.savedAppearanceVars[GUI.guiIndex][2]);
 		explicitOpenHeight = true;
 		if (eval(GUI.savedAppearanceVars[GUI.guiIndex][0]) == true) {
+			curControllerContainerHeight = openHeight;
+			var t = GUI.savedAppearanceVars[GUI.guiIndex][3]
+			
+			// Hack.
+			setTimeout(function() {
+				controllerContainer.scrollTop = t;
+			}, 0);
+			
+			if (GUI.scrollTop > -1) {
+			console.log("hey");
+				document.body.scrollTop = GUI.scrollTop;
+			}
+			resizeTo = openHeight;
 			this.show();
 		}
 
@@ -447,19 +459,24 @@ GUI.saveURL = function() {
 	window.location = url;
 };
 
+GUI.scrollTop = -1;
+
 // TODO: Not working in FF.
 GUI.load = function(saveString) {
-	GUI.savedAppearanceVars = [];
+
-	var vals = saveString.split(',');
+	console.log(saveString);
+
+	//GUI.savedAppearanceVars = [];
+	var vals = saveString.split(",");
+	console.log(vals);
 	var numGuis = parseInt(vals[0]);
-	var vv = vals.splice(1, vals.length-1);
+	GUI.scrollTop = parseInt(vals[1]);
-	var numGuis = vals[0];
-	console.log(numGuis);
 	for (var i = 0; i < numGuis; i++) {
-		var appr = vv.splice(0, 3);
+		var appr = vals.splice(2, 4);
 		GUI.savedAppearanceVars.push(appr);
 	}
-	GUI.savedValues = vv;
+	
+	GUI.savedValues = vals.splice(2, vals.length);
 };
 
 GUI.savedValues = [];
@@ -470,10 +487,12 @@ GUI.getSaveString = function() {
 	var vals = [];
 	
 	vals.push(GUI.allGuis.length);
+	vals.push(document.body.scrollTop);
+	
 	
 	for (var i in GUI.allGuis) {
 		var av = GUI.allGuis[i].appearanceVars();
-		for (var j = 0; j <= GUI.allGuis.length; j++) {
+		for (var j = 0; j < av.length; j++) {
 			vals.push(av[j]);
 		}
 	}	

index.html

@@ -30,7 +30,7 @@
   <script type="text/javascript" src="demo/demo.js">
 </script>
   <script type="text/javascript">
-//<![CDATA[
+	//<![CDATA[
 
                 window.onload = function() {
 
@@ -65,8 +65,55 @@
                         gui.add(GUI, "saveURL");
                         
 
+						// Javascript for documentation
+						getCollapsables();
+						handleListening();
                 };
 
+				function toggle(e) {
+					
+					if(this.className == 'collapsed') {
+						this.className = 'expanded';
+					} else {
+						this.className = 'collapsed';
+					}
+				}
+				
+				function getCollapsables() {
+					
+					if (document.getElementsByClassName == undefined) {
+						document.getElementsByClassName = function(className)
+						{
+							var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
+							var allElements = document.getElementsByTagName("*");
+							var results = [];
+
+							var element;
+							for (var i = 0; (element = allElements[i]) != null; i++) {
+								var elementClass = element.className;
+								if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
+									results.push(element);
+							}
+
+							return results;
+						};
+					}
+					
+					collapsed = document.getElementsByClassName('collapsed');
+					expanded  = document.getElementsByClassName('expanded');
+				}
+				
+				function handleListening() {
+					
+					for(var i = 0; i < collapsed.length; i++) {
+						collapsed[i].addEventListener('click', toggle, false);
+					}
+					
+					for(var j = 0; j < expanded.length; j++) {
+						expanded[i].addEventListener('click', toggle, false);
+					}
+				}
+
   //]]>
   </script>
 </head>
@@ -74,8 +121,10 @@
 <body>
   <div id="container">
   
+	<!-- GUIDAT logo -->
     <div id="helvetica-demo"></div>
 
+	<!-- It gives you this! -->
     <div id="notifier"></div>
 
     <h1><a href="http://twitter.com/guidat"><img src="demo/assets/profile.png" border="0" alt="GUI-DAT flag" /></a></h1>
@@ -134,33 +183,33 @@ window.onload = function() {
         alert("You changed me to " + n);
 });</pre>-->
 	
-    <h2 class="collapsed">Saving your parameters</h2>
+	<div class="collapsed">
-	<div class="collapsable">
+	    <h2 class="section">Saving your parameters</h2>
-    <p>The simplest way to save your parameters is via <code>GUI.saveURL()</code>. This method directs your browser to a URL containing the current GUI settings.</p>
+		<div class="collapsable">
-    <pre class="prettyprint">
+	    	<p>The simplest way to save your parameters is via <code>GUI.saveURL()</code>. This method directs your browser to a URL containing the current GUI settings.</p>
+	    	<pre class="prettyprint">
 // Make a button for the url function
-gui.add(GUI, "saveURL");
+gui.add(GUI, "saveURL");</pre>
-</pre>
     
-</div>
+		</div>
-    <h2 class="collapsed">Advanced saving</h2>
+	</div>
-	<div class="collapsable">
+	<div class="collapsed">
-    <p>Let's say you'd like to share your settings with someone. Instead of sending a long link with lots of parameters stored in it, you can make your saved settings the defaults.</p>
+	    <h2 class="section">Advanced saving</h2>
+		<div class="collapsable">
+	    	<p>Let's say you'd like to share your settings with someone. Instead of sending a long link with lots of parameters stored in it, you can make your saved settings the defaults.</p>
 
-    <p>First, add the method <code>GUI.showSaveString()</code> to a gui object:</p>
+	    	<p>First, add the method <code>GUI.showSaveString()</code> to a gui object:</p>
-    <pre class="prettyprint">
+	    	<pre class="prettyprint">var gui = new GUI();
-var gui = new GUI();
 
 // Add some stuff (and pretend I change their values);
 gui.add(someObject, "someProperty");
 gui.add(someObject, "someOtherProperty");
 
 // Make a save button.
-gui.add(GUI, "showSaveString");
+gui.add(GUI, "showSaveString");</pre>
-</pre>
 
-    <p>Clicking the "showSaveString" button bring up an alert with a string. Copy and paste that string into the method <code>GUI.load()</code> before you instantiate any gui objects.</p>
+		<p>Clicking the "showSaveString" button bring up an alert with a string. Copy and paste that string into the method <code>GUI.load()</code> before you instantiate any gui objects.</p>
-    <pre class="prettyprint">
+		<pre class="prettyprint">
 // Replace COPIED STRING with the value you got from 
 GUI.load("COPIED STRING");
 
@@ -168,36 +217,35 @@ var gui = new GUI();
 
 // Now these properties will be set to the values you just saved.
 gui.add(someObject, "someProperty");
-gui.add(someObject, "someOtherProperty");
+gui.add(someObject, "someOtherProperty");</pre>
-</pre>
 
-    <p><strong>Save strings won't work if you change the order in which you've added properties to your gui objects</strong>. If you want to add more parameters to your gui and use an old save string, make sure they're added after the properties whose values you've saved.</p>
+	    	<p><strong>Save strings won't work if you change the order in which you've added properties to your gui objects</strong>. If you want to add more parameters to your gui and use an old save string, make sure they're added after the properties whose values you've saved.</p>
+	    </div>
     </div>
 
+	<div class="collapsed">
+	    <h2 class="section">Listen for variable changes outside of the GUI</h2>
+		<div class="collapsable">
+	    	<p>Let's say you have a variable that changes by itself from time to time. If you'd like the GUI to reflect those changes, use the <code>listen()</code> method.</p>
+	    	<pre class="prettyprint">gui.add(obj, "changingProperty").listen();</pre>
+    	</div>
+	</div>
     
-    <h2 class="collapsed">Listen for variable changes <em>outside</em> of the GUI</h2>
+	<div class="collapsed">
-	<div class="collapsable">
+		<h2 class="section">Advanced listening</h2>
-    <p>Let's say you have a variable that changes by itself from time to time. If you'd like the GUI to reflect those changes, use the <code>listen()</code> method.</p>
+		<div class="collapsable">
-    <pre class="prettyprint">
+	    	<p>By default, <strong>gui-dat</strong> will create an internal interval that checks for changes in the values you've marked with <code>listen()</code>. If you'd like to check for these changes in an interval of your own definition, use the following:</p>
-gui.add(obj, "changingProperty").listen();
+	    	<pre class="prettyprint">
-</pre>
-    
-</div>
-    <h2 class="collapsed">Advanced listening</h2>
-	<div class="collapsable">
-    <p>By default, <strong>gui-dat</strong> will create an internal interval that checks for changes in the values you've marked with <code>listen()</code>. If you'd like to check for these changes in an interval of your own definition, use the following:</p>
-    <pre class="prettyprint">
 gui.autoListen = false; // disables internal interval
 gui.add(obj, "changingProperty").listen();
 
 // Make your own loop
 setInterval(function() {
-        gui.listen(); // updates values you've marked with listen()
+		gui.listen(); // updates values you've marked with listen()
-}, 1000 / 60);
+}, 1000 / 60);</pre>
-</pre>
 
-    <p>Alternatively, you can forego calling <code>listen()</code> on individual controllers, and instead choose to monitor changes in <em>all</em> values controlled by your gui.</p>
+	    	<p>Alternatively, you can forego calling <code>listen()</code> on individual controllers, and instead choose to monitor changes in <em>all</em> values controlled by your gui.</p>
-    <pre class="prettyprint">
+	    	<pre class="prettyprint">
 gui.autoListen = false; // disables internal interval
 gui.add(obj, "add");
 gui.add(obj, "lotsa");
@@ -205,26 +253,24 @@ gui.add(obj, "properties");
 
 // Make your own loop
 setInterval(function() {
-        gui.listenAll(); // updates ALL values managed by this gui
+		gui.listenAll(); // updates ALL values managed by this gui
-}, 1000 / 60);
+}, 1000 / 60);</pre>
-</pre>
+		</div>
-</div>
+	</div>
     
-
+	<div class="collapsed">
-    <h2 class="collapsed">Multiple panels and custom placement</h2>
+	    <h2 class="section">Multiple panels and custom placement</h2>
-	<div class="collapsable">
+		<div class="collapsable">
-    <p>You can instantiate multiple <code>GUI</code> objects and name them however you'd like.</p>
+	    	<p>You can instantiate multiple <code>GUI</code> objects and name them however you'd like.</p>
-    <pre class="prettyprint">
+	    	<pre class="prettyprint">var gui1 = new GUI();
-var gui1 = new GUI();
 var gui2 = new GUI();
 
 // The name function overwrites the "Show Controls" text.
 gui1.name("Utilities");
-gui2.name("Camera Placement");
+gui2.name("Camera Placement");</pre>
-</pre>
 
-    <p>By default, <strong>gui-dat</strong> panels will be automatically added to the HTML document and fixed to the top of the screen. You can disable this behavior / styling and append the gui DOM element to a container of your choosing.</p>
+	    	<p>By default, <strong>gui-dat</strong> panels will be automatically added to the HTML document and fixed to the top of the screen. You can disable this behavior / styling and append the gui DOM element to a container of your choosing.</p>
-    <pre class="prettyprint">
+	    	<pre class="prettyprint">
 // Notice this belongs to the GUI class (uppercase) 
 // and not an instance thereof.
 GUI.autoPlace = false; 
@@ -236,21 +282,22 @@ gui.domElement.style.position = "absolute";
 gui.domElement.style.top = "20px";
 gui.domElement.style.left = "20px";
 
-document.getElementById("my-gui-container").appendChild( gui.domElement );
+document.getElementById("my-gui-container").appendChild( gui.domElement );</pre>
-</pre>
+		</div>
-</div>
-    
-
-    <h2 class="collapsed">Pro tips.</h2>
-	<div class="collapsable">
-    <ol id="secrets">
-      <li><strong>gui-dat</strong> panels are resizeable. Drag the toggle button.</li>
-
-      <li>Press <strong>H</strong> to make panels invisible. Then press <strong>H</strong> to show them again.</li>
-    </ol>
-    
-    <footer>Initiated by <a href="http://georgemichaelbrower.com/">George Michael Brower</a> and <a href="http://jonobr1.com/">Jono Brandel</a> of the Data Arts Team, Google Creative Lab.</footer>
     </div>
-  </div>
+
+	<div class="collapsed">
+	    <h2 class="section last">Pro tips.</h2>
+		<div class="collapsable">
+		    <ol id="secrets">
+	          <li><strong>gui-dat</strong> panels are resizeable. Drag the toggle button.</li>
+
+	          <li>Press <strong>H</strong> to make panels invisible. Then press <strong>H</strong> to show them again.</li>
+		    </ol>
+	    </div>
+	</div>
+	
+    <footer>Initiated by <a href="http://georgemichaelbrower.com/">George Michael Brower</a> and <a href="http://jonobr1.com/">Jono Brandel</a> of the Data Arts Team, Google Creative Lab.
+	</footer>
 </body>
 </html>