script.aculo.us: Removed Builder code from effects.js, removed Object…

….debug (implemented as Test.Unit.inspect), Added slider unit tests, fixed handling of values to autocalculate min/max, fixed upper/lower boundaries on setting the value programmatically git-svn-id: http://svn.rubyonrails.org/rails/spinoffs/scriptaculous@2704 5ecf4fe2-1ee6-0310-87b1-e25e094e27de
pangor · Oct 22, 2005 · cbfdecd · cbfdecd
1 parent 9029d8c
commit cbfdecd
Show file tree

Hide file tree

Showing 8 changed files with 146 additions and 146 deletions.
diff --git a/CHANGELOG b/CHANGELOG
@@ -1,5 +1,9 @@
 *SVN*
 
+* Removed Builder code from effects.js, removed Object.debug (implemented as Test.Unit.inspect)
+
+* Added slider unit tests, fixed handling of values to autocalculate min/max, fixed upper/lower boundaries on setting the value programmatically
+
 * Synced to Rails 1.0 release candidate, update to Prototype 1.4.0_rc1, removed util.js, merged rests of util.js into effects.js to prepare for refactoring
 
 * Give Builder it's own file

diff --git a/Rakefile b/Rakefile
@@ -61,6 +61,7 @@ JavaScriptTestTask.new(:unittest) do |t|
   t.run("/test/unit/effects_test.html")
   t.run("/test/unit/ajax_autocompleter_test.html")
   t.run("/test/unit/ajax_inplaceeditor_test.html")
+  t.run("/test/unit/slider_test.html")
   t.run("/test/unit/string_test.html")
   t.run("/test/unit/builder_test.html")
   t.run("/test/unit/element_test.html")

diff --git a/src/effects.js b/src/effects.js
@@ -4,123 +4,8 @@
 //  Mark Pilgrim (http://diveintomark.org/)
 //  Martin Bialasinki
 // 
-// See scriptaculous.js for full license.
+// See scriptaculous.js for full license.  
 
-Object.debug = function(obj) {  
-  var info = [];  
-
-  if(typeof obj in ["string","number"]) {  
-    return obj;  
-  } else {  
-    for(property in obj)  
-      if(typeof obj[property]!="function")  
-        info.push(property + ' => ' +  
-          (typeof obj[property] == "string" ?  
-            '"' + obj[property] + '"' :  
-            obj[property]));  
-  }  
-
-  return ("'" + obj + "' #" + typeof obj +  
-    ": {" + info.join(", ") + "}");  
-}  
-
-
-/*--------------------------------------------------------------------------*/  
-
-var Builder = {  
-  NODEMAP: {  
-    AREA: 'map',  
-    CAPTION: 'table',  
-    COL: 'table',  
-    COLGROUP: 'table',  
-    LEGEND: 'fieldset',  
-    OPTGROUP: 'select',  
-    OPTION: 'select',  
-    PARAM: 'object',  
-    TBODY: 'table',  
-    TD: 'table',  
-    TFOOT: 'table',  
-    TH: 'table',  
-    THEAD: 'table',  
-    TR: 'table'  
-  },  
-  // note: For Firefox < 1.5, OPTION and OPTGROUP tags are currently broken,  
-  //       due to a Firefox bug  
-  node: function(elementName) {  
-    elementName = elementName.toUpperCase();  
-
-    // try innerHTML approach  
-    var parentTag = this.NODEMAP[elementName] || 'div';  
-    var parentElement = document.createElement(parentTag);  
-    parentElement.innerHTML = "<" + elementName + "></" + elementName + ">";  
-    var element = parentElement.firstChild || null;  
-
-    // see if browser added wrapping tags  
-    if(element && (element.tagName != elementName))  
-      element = element.getElementsByTagName(elementName)[0];  
-
-    // fallback to createElement approach  
-    if(!element) element = document.createElement(elementName);  
-
-    // abort if nothing could be created  
-    if(!element) return;  
-
-    // attributes (or text)  
-    if(arguments[1])  
-      if(this._isStringOrNumber(arguments[1]) ||  
-        (arguments[1] instanceof Array)) {  
-          this._children(element, arguments[1]);  
-        } else {  
-          var attrs = this._attributes(arguments[1]);  
-          if(attrs.length) {  
-            parentElement.innerHTML = "<" +elementName + " " +  
-              attrs + "></" + elementName + ">";  
-            element = parentElement.firstChild || null;  
-            // workaround firefox 1.0.X bug  
-            if(!element) {  
-              element = document.createElement(elementName);  
-              for(attr in arguments[1])  
-                element[attr == 'class' ? 'className' : attr] = arguments[1][attr];  
-            }  
-            if(element.tagName != elementName)  
-              element = parentElement.getElementsByTagName(elementName)[0];  
-            }  
-        }  
-
-    // text, or array of children  
-    if(arguments[2])  
-      this._children(element, arguments[2]);  
-
-     return element;  
-  },  
-  _text: function(text) {  
-     return document.createTextNode(text);  
-  },  
-  _attributes: function(attributes) {  
-    var attrs = [];  
-    for(attribute in attributes)  
-      attrs.push((attribute=='className' ? 'class' : attribute) +  
-          '="' + attributes[attribute].toString().escapeHTML() + '"');  
-    return attrs.join(" ");  
-  },  
-  _children: function(element, children) {  
-    if(typeof children=='object') { // array can hold nodes and text  
-      children.flatten().each( function(e) {  
-        if(typeof e=='object')  
-          element.appendChild(e)  
-        else  
-          if(Builder._isStringOrNumber(e))  
-            element.appendChild(Builder._text(e));  
-      });  
-    } else  
-      if(Builder._isStringOrNumber(children))  
-         element.appendChild(Builder._text(children));  
-  },  
-  _isStringOrNumber: function(param) {  
-    return(typeof param=='string' || typeof param=='number');  
-  }  
-}  
-
 /* ------------- element ext -------------- */  
 
 // converts rgb() and #xxx to #xxxxxx format,  

diff --git a/src/slider.js b/src/slider.js
@@ -46,9 +46,6 @@ Control.Slider.prototype = {
     this.originalTop  = this.currentTop();
     this.originalZ    = parseInt(this.handle.style.zIndex || "0");
 
-    // Prepopulate Slider value
-    this.setSliderValue(parseInt(this.options.sliderValue) || 0);
-
     this.active   = false;
     this.dragging = false;
     this.disabled = false;
@@ -65,6 +62,13 @@ Control.Slider.prototype = {
 
     // Value Array
     this.values = this.options.values || false;  // Add method to validate and sort??
+    if(this.values) {
+      this.minimum = this.values.min();
+      this.maximum = this.values.max();
+    }
+
+    // Prepopulate Slider value
+    this.setSliderValue(parseInt(this.options.sliderValue) || this.minimum);
 
     Element.makePositioned(this.handle); // fix IE
 
@@ -114,22 +118,24 @@ Control.Slider.prototype = {
   }, 
   getNearestValue: function(value){
     if(this.values){
-      var i = 0;
+      if(value >= this.values.max()) return(this.values.max());
+      if(value <= this.values.min()) return(this.values.min());
+
       var offset = Math.abs(this.values[0] - value);
       var newValue = this.values[0];
 
-      for(i=0; i < this.values.length; i++){
-        var currentOffset = Math.abs(this.values[i] - value);
-        if(currentOffset < offset){
-          newValue = this.values[i];
+      this.values.each( function(v) {
+        var currentOffset = Math.abs(v - value);
+        if(currentOffset <= offset){
+          newValue = v;
           offset = currentOffset;
-        }
-      }
+        } 
+      });
       return newValue;
     }
     return value;
   },
-  setSliderValue:  function(sliderValue){
+  setSliderValue: function(sliderValue){
     // First check our max and minimum and nearest values
     sliderValue = this.getNearestValue(sliderValue);	
     if(sliderValue > this.maximum) sliderValue = this.maximum;

diff --git a/test/unit/index.html b/test/unit/index.html
@@ -34,6 +34,11 @@ <h2>controls.js</h2>
   <li><a href="ajax_inplaceeditor_test.html" target="test">Ajax.InPlaceEditor test</a></li>
 </ul>
 
+<h2>slider.js</h2>
+<ul>
+  <li><a href="slider_test.html" target="test">Control.Slider test</a></li>
+</ul>
+
 <h2>util.js</h2>
 <ul>
   <li><a href="builder_test.html" target="test">Builder test</a></li>
@@ -43,7 +48,7 @@ <h2>util.js</h2>
   <li><a href="util_test.html" target="test">Other util.js methods</a></li>
 </ul>
 
-<h2>dragodrop.js</h2>
+<h2>dragdrop.js</h2>
 <ul>
   <li><a href="sortable_test.html" target="test">Sortable test</a></li>
 </ul>

diff --git a/test/unit/slider_test.html b/test/unit/slider_test.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+  <title>script.aculo.us Unit test file</title>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+  <script src="../../lib/prototype.js" type="text/javascript"></script>
+  <script src="../../src/scriptaculous.js" type="text/javascript"></script>
+  <script src="../../src/unittest.js" type="text/javascript"></script>
+  <link rel="stylesheet" href="../test.css" type="text/css" />
+</head>
+<body>
+<h1>script.aculo.us Unit test file</h1>
+<p>
+  Test of slider.js
+</p>
+
+<div id="track1" style="width:200px;background-color:#aaa;height:5px;">
+  <div id="handle1" style="width:5px;height:10px;background-color:#f00;"> </div>
+</div>
+
+<div id="track2-vertical" style="height:100px;background-color:#aaa;width:5px;">
+  <div id="handle2-vertical" style="width:10px;height:5px;background-color:#f00;"> </div>
+</div>
+
+<div id="track2-horizontal" style="height:5px;background-color:#aaa;width:300px;">
+  <div id="handle2-horizontal" style="width:10px;height:5px;background-color:#f00;"> </div>
+</div>
+
+<!-- Log output -->
+<div id="testlog"> </div>
+
+<!-- Tests follow -->
+<script type="text/javascript" language="javascript" charset="utf-8">
+// <![CDATA[
+
+  var globalValue;
+
+  new Test.Unit.Runner({
+
+    testSliderBasics: function() { with(this) {
+      var slider = new Control.Slider('handle1', 'track1');
+      assertInstanceOf(Control.Slider, slider);
+      assertEqual(5, Event.observers.length);
+
+      assertEqual('horizontal', slider.axis);
+      assertEqual(false, slider.disabled);
+      assertEqual(0, slider.value);
+
+      slider.dispose();
+    }},
+
+    testSliderValues: function() { with(this) {
+      ['horizontal', 'vertical'].each( function(axis) {
+        var slider = new Control.Slider('handle2-'+axis, 'track2-'+axis, {values:[10,20,30,40,50],axis:axis});
+        assertEqual(axis, slider.axis);
+        assertEqual(10, slider.value);
+
+        slider.setSliderValue(5);
+        assertEqual(10, slider.value);
+
+        slider.setSliderValue(22);
+        assertEqual(20, slider.value);
+
+        slider.setSliderValue(25);
+        assertEqual(30, slider.value);
+
+        slider.setSliderValue(55555);
+        assertEqual(50, slider.value);
+
+        // leave active to be able to play around with the sliders
+        // slider.dispose();
+      });
+      assertEqual("40px", $('handle2-horizontal').style.left);    
+      assertEqual("40px", $('handle2-vertical').style.top);
+    }},
+
+    testSliderOnChange: function() { with(this) {
+      var slider = new Control.Slider('handle1', 'track1', { onChange:function(v){ globalValue = v; } });
+      slider.setSliderValue(100);
+      assert(100, globalValue);
+      assert(100, slider.value);
+
+      slider.setDisabled();
+      slider.setSliderValue(50);
+      assert(100, globalValue);
+      assert(100, slider.value);
+
+      slider.setEnabled();
+      slider.setSliderValue(50);
+      assert(50, globalValue);
+      assert(50, slider.value);
+    }}
+
+  }, "testlog");
+// ]]>
+</script>
+</body>
+</html>
diff --git a/test/unit/unittest_test.html b/test/unit/unittest_test.html
@@ -47,6 +47,23 @@ <h1>script.aculo.us Unit test file</h1>
 
   new Test.Unit.Runner({
 
+    testInspect: function() { with(this) {
+      assertEqual("'[object Object]' #object: {}",
+        Test.Unit.inspect({}));
+      assertEqual("'[object Object]' #object: {}",
+        Test.Unit.inspect({x:function(){}}));
+      assertEqual("'[object Object]' #object: {x => \"test\"}",
+        Test.Unit.inspect({x:"test"}));
+      assertEqual("'[object Object]' #object: {x => \"test\", y => 123}",
+        Test.Unit.inspect({x:"test",y:123}));
+      assertEqual("'[object Object]' #object: {x => [object Object]}",
+        Test.Unit.inspect({x:{}}));
+      assertEqual("'[object Object]' #object: {x => \"test\", y => [object Object]}",
+        Test.Unit.inspect({x:"test",y:{}}));
+      assertEqual("'[object Object]' #object: {x => \"test\", y => [object Object]}",
+        Test.Unit.inspect({x:"test",y:{z:"test",blah:{}}}));
+    }},
+
     testAssertEqual: function() { with(this) {
       assertEqual(0, 0);
       assertEqual(0, 0, "test");

diff --git a/test/unit/util_test.html b/test/unit/util_test.html
@@ -18,7 +18,7 @@
 <body>
 <h1>script.aculo.us Unit test file</h1>
 <p>
-  Test of utility functions in util.js
+  Test of utility functions
 </p>
 
 <!-- Log output -->
@@ -29,23 +29,6 @@ <h1>script.aculo.us Unit test file</h1>
 // <![CDATA[
 
   new Test.Unit.Runner({
-
-    testObjectDebug: function() { with(this) {
-      assertEqual("'[object Object]' #object: {}",
-        Object.debug({}));
-      assertEqual("'[object Object]' #object: {}",
-        Object.debug({x:function(){}}));
-      assertEqual("'[object Object]' #object: {x => \"test\"}",
-        Object.debug({x:"test"}));
-      assertEqual("'[object Object]' #object: {x => \"test\", y => 123}",
-        Object.debug({x:"test",y:123}));
-      assertEqual("'[object Object]' #object: {x => [object Object]}",
-        Object.debug({x:{}}));
-      assertEqual("'[object Object]' #object: {x => \"test\", y => [object Object]}",
-        Object.debug({x:"test",y:{}}));
-      assertEqual("'[object Object]' #object: {x => \"test\", y => [object Object]}",
-        Object.debug({x:"test",y:{z:"test",blah:{}}}));
-    }},
 
     testElementClassRemove: function() { with(this) {
       var element = Builder.node('div',{className: 'a b c d'});