├── icon.png ├── img ├── bg.png ├── glovebox.jpg ├── footer-hover.png └── footer-buttons.png ├── tests ├── index.html ├── qunit │ ├── qunit.css │ └── qunit.js └── tests.js ├── imageScroller.html ├── README ├── style.css ├── index.html └── GloveBox.js /icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/purplecabbage/GloveBox/HEAD/icon.png -------------------------------------------------------------------------------- /img/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/purplecabbage/GloveBox/HEAD/img/bg.png -------------------------------------------------------------------------------- /img/glovebox.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/purplecabbage/GloveBox/HEAD/img/glovebox.jpg -------------------------------------------------------------------------------- /img/footer-hover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/purplecabbage/GloveBox/HEAD/img/footer-hover.png -------------------------------------------------------------------------------- /img/footer-buttons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/purplecabbage/GloveBox/HEAD/img/footer-buttons.png -------------------------------------------------------------------------------- /tests/index.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 14 | 15 | 16 |

GloveBox Tests

17 |

18 |

19 |
    20 |
    21 |
    22 |
    23 |
    24 |
    25 | 26 |
    27 |
    28 | 29 | -------------------------------------------------------------------------------- /imageScroller.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | ScrollTest 10 | 11 | 12 | 13 | 14 | 46 | 47 | 48 | 49 | 52 | 53 |
    54 | 55 |
    56 | 57 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /README: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2010 Jesse MacFadyen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | 11 | Changelog:: 12 | 13 | July 9, 2010 - jm 14 | - PinchZoom support added. 15 | - Customizable transitions. 16 | - disables form elements while scrolling 17 | - does not fire click events on elements if _dragThreshold has been exceeded 18 | 19 | July 13, 2010 -jm 20 | - added check for createTouch in document ( mouse handlers are experimental only ) 21 | - listeners are added using delegate self, instead of closure function 22 | - allows nested gloveboxes 23 | - does not interfere with other touch events in the DOM 24 | - commented out debug doc writing 25 | :: Scaling is exceptionally buggy, use at your own risk|peril - jm 26 | 27 | August 4th, 2010 -fm 28 | - fixed on android 2.2 (no createTouch function in document, check with 'TouchEvent' on window instead). 29 | 30 | :: Scaling is exceptionally buggy, use at your own risk|peril - jm 31 | 32 | Sept 20, 2010 -jm 33 | - cleaned up scaling code, still does not scale from correct point, but positioning after is correct. 34 | - moved touchEvents/mouseEvents to static vars 35 | - accepts constructor arg of string-id or dom element 36 | - added clamping ( buggy, not ready for primetime ) 37 | - added snapping, to specify pixel grid to snap to, can be used for paging ( no events yet ) 38 | - mouse events are still fuct 39 | - added GloveBox.CanTouch, incorporated fil maj's changes for android touch checking 40 | 41 | Oct 14, 2010 -jm 42 | - merged wildabeast's bug fix :: afterTrans setter was actually setting dragTrans 43 | 44 | Oct 29, 2010 -fm 45 | - fixed a bug in mouse handlers, and added a bit smarter mouseout firing 46 | - better touch event detection (look for an exception rather than the existence of a property/function) 47 | 48 | Feb 16, 2011 -jm 49 | - major rewrite + restruct 50 | - api remains the same, but implementation has been updated, code is more concise 51 | 52 | Feb 18, 2011 -jm 53 | - fauxmentum, in 2 dimensions 54 | -------------------------------------------------------------------------------- /tests/qunit/qunit.css: -------------------------------------------------------------------------------- 1 | /** Font Family and Sizes */ 2 | 3 | #qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult { 4 | font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial; 5 | } 6 | 7 | #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; } 8 | #qunit-tests { font-size: smaller; } 9 | 10 | 11 | /** Resets */ 12 | 13 | #qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult { 14 | margin: 0; 15 | padding: 0; 16 | } 17 | 18 | 19 | /** Header */ 20 | 21 | #qunit-header { 22 | padding: 0.5em 0 0.5em 1em; 23 | 24 | color: #fff; 25 | text-shadow: rgba(0, 0, 0, 0.5) 4px 4px 1px; 26 | background-color: #0d3349; 27 | 28 | border-radius: 15px 15px 0 0; 29 | -moz-border-radius: 15px 15px 0 0; 30 | -webkit-border-top-right-radius: 15px; 31 | -webkit-border-top-left-radius: 15px; 32 | } 33 | 34 | #qunit-header a { 35 | text-decoration: none; 36 | color: white; 37 | } 38 | 39 | #qunit-banner { 40 | height: 5px; 41 | } 42 | 43 | #qunit-testrunner-toolbar { 44 | padding: 0em 0 0.5em 2em; 45 | } 46 | 47 | #qunit-userAgent { 48 | padding: 0.5em 0 0.5em 2.5em; 49 | background-color: #2b81af; 50 | color: #fff; 51 | text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px; 52 | } 53 | 54 | 55 | /** Tests: Pass/Fail */ 56 | 57 | #qunit-tests { 58 | list-style-position: inside; 59 | } 60 | 61 | #qunit-tests li { 62 | padding: 0.4em 0.5em 0.4em 2.5em; 63 | border-bottom: 1px solid #fff; 64 | list-style-position: inside; 65 | } 66 | 67 | #qunit-tests li strong { 68 | cursor: pointer; 69 | } 70 | 71 | #qunit-tests ol { 72 | margin-top: 0.5em; 73 | padding: 0.5em; 74 | 75 | background-color: #fff; 76 | 77 | border-radius: 15px; 78 | -moz-border-radius: 15px; 79 | -webkit-border-radius: 15px; 80 | 81 | box-shadow: inset 0px 2px 13px #999; 82 | -moz-box-shadow: inset 0px 2px 13px #999; 83 | -webkit-box-shadow: inset 0px 2px 13px #999; 84 | } 85 | 86 | /*** Test Counts */ 87 | 88 | #qunit-tests b.counts { color: black; } 89 | #qunit-tests b.passed { color: #5E740B; } 90 | #qunit-tests b.failed { color: #710909; } 91 | 92 | #qunit-tests li li { 93 | margin: 0.5em; 94 | padding: 0.4em 0.5em 0.4em 0.5em; 95 | background-color: #fff; 96 | border-bottom: none; 97 | list-style-position: inside; 98 | } 99 | 100 | /*** Passing Styles */ 101 | 102 | #qunit-tests li li.pass { 103 | color: #5E740B; 104 | background-color: #fff; 105 | border-left: 26px solid #C6E746; 106 | } 107 | 108 | #qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; } 109 | #qunit-tests .pass .test-name { color: #366097; } 110 | 111 | #qunit-tests .pass .test-actual, 112 | #qunit-tests .pass .test-expected { color: #999999; } 113 | 114 | #qunit-banner.qunit-pass { background-color: #C6E746; } 115 | 116 | /*** Failing Styles */ 117 | 118 | #qunit-tests li li.fail { 119 | color: #710909; 120 | background-color: #fff; 121 | border-left: 26px solid #EE5757; 122 | } 123 | 124 | #qunit-tests .fail { color: #000000; background-color: #EE5757; } 125 | #qunit-tests .fail .test-name, 126 | #qunit-tests .fail .module-name { color: #000000; } 127 | 128 | #qunit-tests .fail .test-actual { color: #EE5757; } 129 | #qunit-tests .fail .test-expected { color: green; } 130 | 131 | #qunit-banner.qunit-fail, 132 | #qunit-testrunner-toolbar { background-color: #EE5757; } 133 | 134 | 135 | /** Footer */ 136 | 137 | #qunit-testresult { 138 | padding: 0.5em 0.5em 0.5em 2.5em; 139 | 140 | color: #2b81af; 141 | background-color: #D2E0E6; 142 | 143 | border-radius: 0 0 15px 15px; 144 | -moz-border-radius: 0 0 15px 15px; 145 | -webkit-border-bottom-right-radius: 15px; 146 | -webkit-border-bottom-left-radius: 15px; 147 | } 148 | 149 | /** Fixture */ 150 | 151 | #qunit-fixture { 152 | position: absolute; 153 | top: -10000px; 154 | left: -10000px; 155 | } 156 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* Quickie Reset */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | border: 0; 6 | font-family: Helvetica; 7 | } 8 | 9 | /* Minimum height on body helps preventDefault */ 10 | body { 11 | min-height: 480px; 12 | max-height:480px; 13 | height:480px; 14 | background-color:#222; 15 | 16 | } 17 | 18 | /* Set our fixed elements above everything else */ 19 | #header, #footer { 20 | left: 0; 21 | display: block; 22 | width: 100%; 23 | z-index: 200; 24 | 25 | -webkit-box-sizing: border-box; 26 | border-bottom: 1px solid #141313; 27 | 28 | margin-bottom:2px; 29 | height: 36px; 30 | background: #141313 repeat-x; 31 | background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(128, 128, 128, 0.25)), to(rgba(0, 0, 0, 0.5))); 32 | position: relative; 33 | 34 | } 35 | 36 | #header 37 | { 38 | height: 42px; 39 | border-bottom:solid 1px #333; 40 | margin-bottom:8px; 41 | } 42 | 43 | /* Header */ 44 | #header h1 { 45 | color: #FFF; 46 | text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0px; 47 | font-size: 20px; 48 | text-align: center; 49 | line-height: 44px; 50 | } 51 | 52 | /* Footer */ 53 | #footer { 54 | position: absolute; 55 | bottom:0px; 56 | height: 49px; 57 | background-position: center bottom; 58 | border-top:solid 1px #666; 59 | } 60 | 61 | /* Reposition on scroll */ 62 | body.scrolled #footer { 63 | /*top: 307px;*/ 64 | } 65 | 66 | /* Reposition on orientation change */ 67 | body[orient="landscape"] #footer { 68 | /*top: 220px;*/ 69 | } 70 | 71 | /* Reposition on scroll */ 72 | body.scrolled[orient="landscape"] #footer { 73 | /*top: 159px;*/ 74 | } 75 | 76 | #footer ul { 77 | margin: 0 auto; 78 | padding: 3px 0 0; 79 | list-style: none; 80 | display: block; 81 | height: 46px; 82 | width: 640px; 83 | text-align: center; 84 | overflow: hidden; 85 | } 86 | 87 | #footer li { 88 | margin: 0 2px; 89 | float: left; 90 | position: relative; 91 | } 92 | 93 | #footer li.active { 94 | border: 3px solid; 95 | border-width: 0 3px; 96 | -webkit-border-image: url("img/footer-hover.png") 0 3; 97 | } 98 | 99 | #footer span { 100 | padding: 29px 3px 3px; 101 | float: left; 102 | width: 54px; 103 | color: #bbb; 104 | font-weight: bold; 105 | font-size: 10px; 106 | text-decoration: none; 107 | background: url("img/footer-buttons.png") no-repeat -2px -50px; 108 | } 109 | 110 | #footer li.active span { 111 | padding-left: 0; 112 | padding-right: 0; 113 | color: #fff; 114 | } 115 | 116 | #footer .team.active span { 117 | background-position: -5px top; 118 | } 119 | 120 | #footer .feed span { 121 | background-position: -66px -50px; 122 | } 123 | 124 | #footer .feed.active span { 125 | background-position: -69px top; 126 | } 127 | 128 | #footer .post span { 129 | background-position: -130px -50px; 130 | } 131 | 132 | #footer .post.active span { 133 | background-position: -133px top; 134 | } 135 | 136 | #footer .box span { 137 | background-position: -194px -50px; 138 | } 139 | 140 | #footer .box.active span { 141 | background-position: -197px top; 142 | } 143 | 144 | #footer .games span { 145 | background-position: -258px -50px; 146 | } 147 | 148 | #footer .games.active span { 149 | background-position: -261px top; 150 | } 151 | 152 | #footer .tweets span { 153 | background-position: -322px -50px; 154 | } 155 | 156 | #footer .tweets.active span { 157 | background-position: -325px top; 158 | } 159 | 160 | #bulkContainer 161 | { 162 | height:362px; 163 | overflow:hidden; 164 | width:320px; 165 | } 166 | 167 | /* Container */ 168 | #container1 { 169 | height:336px; 170 | overflow:hidden; 171 | background:#FFFDCA; 172 | } 173 | 174 | #container2 { 175 | height:336px; 176 | overflow:hidden; 177 | background:#9894B7; 178 | } 179 | 180 | .container 181 | { 182 | overflow:hidden; 183 | width:160px; 184 | float:left; 185 | clear:none; 186 | } 187 | 188 | /* Reposition on scroll */ 189 | body.scrolled #container { 190 | /*height: 263px;*/ 191 | } 192 | 193 | /* Reposition on orientation change */ 194 | body[orient="landscape"] #container { 195 | height: 176px; 196 | } 197 | 198 | /* Reposition on scroll */ 199 | body.scrolled[orient="landscape"] #container { 200 | height: 115px; 201 | } 202 | 203 | /* Content */ 204 | .content { 205 | position: relative; 206 | border-top: 1px solid #e0e0e0; 207 | 208 | } 209 | 210 | .content li { 211 | position: relative; 212 | list-style-type: none; 213 | overflow: hidden; 214 | margin: 0; 215 | padding: 0; 216 | -webkit-margin-top-collapse: separate; 217 | -webkit-margin-bottom-collapse: separate; 218 | border: 1px solid #e0e0e0; 219 | height: 47px; 220 | } 221 | 222 | .content li.active { 223 | 224 | } 225 | 226 | .content li.active span { 227 | color: #fff; 228 | } 229 | 230 | .content li span { 231 | position: absolute; 232 | left: 10px; 233 | top: 12px; 234 | height: 22px; 235 | right: 30px; 236 | width: auto; 237 | color: #000; 238 | font-weight: bold; 239 | font-size: 20px; 240 | text-overflow: ellipsis; 241 | overflow: hidden; 242 | white-space: nowrap; 243 | text-decoration: none; 244 | } 245 | -------------------------------------------------------------------------------- /tests/tests.js: -------------------------------------------------------------------------------- 1 | // A little sugar on top of qunit 2 | QUnit.chain = function(tests, delay) { 3 | if (tests.length > 0) { 4 | setTimeout(function() { 5 | tests.shift()(); 6 | QUnit.chain(tests, delay); 7 | }, delay); 8 | } else QUnit.start(); 9 | }; 10 | 11 | function Tests() { 12 | this.bounceTimeout = 3000; 13 | this.scrollTimeout = 1000; 14 | // this.containerHeight = document.getElementById() 15 | }; 16 | Tests.prototype = { 17 | run:function() { 18 | for (var t in this) { 19 | if (t.indexOf('Test') > -1) { 20 | this[t](); 21 | } 22 | } 23 | }, 24 | Test:function() { 25 | var self = this; 26 | module('Construction/destruction', { 27 | setup:function() { 28 | // glovebox = new GloveBox("masterList"); 29 | }, 30 | teardown:function(){ 31 | // glovebox = null; 32 | } 33 | }); 34 | test('Baseline GloveBox initilization', function() { 35 | expect(6); 36 | var glovebox1 = new GloveBox("masterList"); 37 | ok(typeof glovebox1 == 'object', 'GloveBox can be instantiated via ID string'); 38 | var glovebox2 = new GloveBox(document.getElementById("masterList")); 39 | ok(typeof glovebox2 == 'object', 'GloveBox can be instantiated via element'); 40 | try { 41 | var glovebox3 = new GloveBox('somerandomstring'); 42 | } catch(e) { 43 | ok(true, 'Expected exception raised when wrong ID string provided on construction' + e.type); 44 | // perhaps should throw its own exception? 45 | equals(e.message, "Cannot read property 'parentNode' of null"); 46 | } 47 | ok(glovebox2.scrollY, 'Default scrolling direction is vertical'); 48 | ok(!glovebox2.scrollX, 'Horizontal scrolling is off by default'); 49 | }); 50 | test('GloveBox destruction', function(){ 51 | // does it clean up after itself? any side effects from defining two gloveboxes on the same element? 52 | // what about two gloveboxes on same element with different direction styles? 53 | expect(1); 54 | var g_one = new GloveBox('masterList', {scrollX:true, scrollY:false}); 55 | g_one.x = -200; 56 | g_one.finishScrolling(); 57 | QUnit.chain([function() { 58 | g_two = new GloveBox('masterList', {scrollY:true, scrollX:false}); 59 | g_two.y = -1*HALF_H; 60 | g_two.finishScrolling(); 61 | }, function() { 62 | equals(g_two.y, -1*HALF_H, 'New GloveBox instances on same element override instantiation parameters'); 63 | }], self.bounceTimeout); 64 | 65 | }) 66 | test('GloveBox options configuration', function() { 67 | expect(3); 68 | var glovebox = new GloveBox('masterList', { scrollX:true, scrollY:true, parentHeight:'100px'}); 69 | ok(glovebox.scrollX, 'scrollX=true in options object should be true in GloveBox object'); 70 | ok(glovebox.scrollY, 'scrollY=true in options object should be true in GloveBox object'); 71 | equals(document.getElementById('masterList').parentNode.style.height, '100px', 'Can set GloveBox element\'s parent\'s height') 72 | }); 73 | 74 | module('Scrolling', { 75 | setup:function() { 76 | glovebox = new GloveBox("masterList"); 77 | box = GloveBox.GetOffset(glovebox.element); 78 | HALF_H = (Math.floor(box.height/2)); 79 | }, 80 | teardown:function() { 81 | glovebox = null; 82 | box = null; 83 | HALF_H = null; 84 | } 85 | }); 86 | test('Scrolling directions', function() { 87 | QUnit.stop(); 88 | expect(1); 89 | var lastKnownY = glovebox.y; 90 | glovebox.scrollY = false; 91 | glovebox.scrollX = true; 92 | glovebox.y = -1*HALF_H; 93 | glovebox.finishScrolling(); 94 | QUnit.chain([function() { 95 | equals(glovebox.y, lastKnownY, 'Setting y when scrollY = false should do nothing'); 96 | }], self.scrollTimeout); 97 | }); 98 | test('Vertical scrolling test in range', function() { 99 | QUnit.stop(); 100 | expect(1); 101 | glovebox.y = -1*HALF_H; 102 | glovebox.finishScrolling(); 103 | QUnit.chain([function() { 104 | equals(glovebox.y, -1*HALF_H, 'Setting y to in-range value works'); 105 | }], self.scrollTimeout); 106 | }); 107 | test('Vertical scrolling test out of range', function() { 108 | QUnit.stop(); 109 | expect(2); 110 | glovebox.y = 1*HALF_H; 111 | glovebox.finishScrolling(); 112 | QUnit.chain([function() { 113 | equals(glovebox.y, 0, 'Setting y to out-of-range positive value works'); 114 | glovebox.y = -10*HALF_H; 115 | glovebox.finishScrolling(); 116 | }, function() { 117 | equals(glovebox.y, -1*(box.height-glovebox.parentCoords.height), 'Setting y to out-of-range negative value works'); 118 | }], self.bounceTimeout); 119 | }); 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | GloveBox Demo - trends on twitter 10 | 11 | 12 | 13 | 14 | 134 | 135 | 255 | 256 | 257 | 258 | 272 | 273 | 276 | 277 | 278 |
    279 |
    280 |
    281 |
    282 | 283 |
    284 |
    285 |
    286 |
    287 |
    288 |
    289 | 290 | 291 | 292 | 293 | 294 | 298 | 312 | 313 | 314 | 315 | 316 | -------------------------------------------------------------------------------- /GloveBox.js: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2010-2011 Jesse MacFadyen 5 | jesse.macfadyen@nitobi.com 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated 8 | documentation files (the "Software"), to deal in the Software without restriction, including without limitation the 9 | rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit 10 | persons to whom the Software is furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the 13 | Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE 16 | WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 17 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR 18 | OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 19 | */ 20 | 21 | var GloveBox = (function(){ 22 | 23 | var Gbx = function(elemOrId,opts) 24 | { 25 | if ( this instanceof Gbx ) 26 | { 27 | if (typeof elemOrId == "string" || elemOrId instanceof String) 28 | { 29 | this.element = document.getElementById(elemOrId); 30 | } 31 | else 32 | { 33 | this.element = elemOrId; 34 | } 35 | 36 | this.par.addEventListener(Gbx.StartEvent, this, false); 37 | this.par.addEventListener('click', this, true); 38 | 39 | this.element.addEventListener("webkitTransitionEnd", this, true ); 40 | this.element.style.webkitTransformOrigin = "0% 0%"; 41 | 42 | for(var v in opts) 43 | { 44 | this[v] = opts[v]; 45 | } 46 | 47 | } 48 | else 49 | { 50 | return new Gbx(elemOrId); 51 | } 52 | } 53 | 54 | // set defaults for mouse 55 | Gbx.StartEvent = "mousedown"; 56 | Gbx.EndEvent = "mouseup"; 57 | Gbx.MoveEvent = "mousemove"; 58 | Gbx.CancelEvent = "touchcancel"; 59 | // This used to be mouseout, but we still want to track once the mouse leave, so we leave it to touchcancel 60 | // even though it will not be fired 61 | 62 | Gbx.DraggingTransition = "-webkit-transform none"; 63 | Gbx.AfterTouchTransition = "-webkit-transform 400ms ease-out"; 64 | Gbx.BounceBackTransition = "-webkit-transform 200ms ease-out"; 65 | Gbx.Friction = 0.002; 66 | 67 | 68 | try 69 | { 70 | document.createEvent("TouchEvent"); 71 | Gbx.CanTouch = true; 72 | // update events to use touch events, they are available 73 | Gbx.StartEvent = "touchstart"; 74 | Gbx.EndEvent = "touchend"; 75 | Gbx.MoveEvent = "touchmove"; 76 | Gbx.CancelEvent = "touchcancel"; 77 | } 78 | catch (e) //look for exception to feature-detection touch events. 79 | { 80 | Gbx.CanTouch = false; 81 | } 82 | 83 | Gbx.prototype = 84 | { 85 | formElements:null, 86 | state:"ready", 87 | 88 | //Scaling stuff 89 | _scalable:false, 90 | isScaling:false, 91 | startScale:1.0, 92 | _scale:1.0, 93 | maxScale:4.0, 94 | minScale:0.2, 95 | _scaleCenter:{x:0,y:0}, 96 | 97 | // Rotation stuff ( buggy ) 98 | 99 | _rotation:0, 100 | canRotate:false, 101 | startAngle:0, 102 | _angle:0, 103 | 104 | isDragging:false, 105 | _x:0,_y:0, 106 | 107 | startTime:0, 108 | 109 | // snapping to coords ex. {x:20,y:20} 110 | snap:null, 111 | 112 | clampX:false,clampY:false, 113 | 114 | lastX:0,lastY:0, 115 | 116 | scrollX:false,scrollY:true, 117 | 118 | _dragT:null, 119 | _afterT:null, 120 | _bounceT:null, 121 | _dragThreshold:20, 122 | 123 | par:function(){ return this.element.parentNode;}, 124 | 125 | get_x:function(){ return this._x; }, 126 | set_x:function(inX){ this.setPos(inX,this._y);}, 127 | 128 | get_y:function(){ return this._y;}, 129 | set_y:function(inY){ this.setPos(this._x,inY);}, 130 | 131 | get_scale:function(){return this._scale;}, 132 | set_scale:function(inS) 133 | { 134 | this._scale = Math.max(Math.min(inS,this.maxScale),this.minScale); 135 | this._updateTransform(); 136 | }, 137 | 138 | // Transition to display while the user is dragging 139 | get_dragTrans:function(){ 140 | return this._dragT || Gbx.DraggingTransition; 141 | }, 142 | set_dragTrans:function(t){ 143 | this._dragT = t; 144 | }, 145 | 146 | // Transition to display when the user releases 147 | get_afterTrans:function(){ 148 | return this._afterT || Gbx.AfterTouchTransition; 149 | }, 150 | set_afterTrans:function(t){ 151 | this._afterT = t; 152 | }, 153 | 154 | // Transition to display when we enforce the boundaries 155 | get_bounceTrans:function(){ 156 | return this._bounceT || Gbx.BounceBackTransition; 157 | }, 158 | set_bounceTrans:function(t){ 159 | this._bounceT = t; 160 | }, 161 | 162 | get_canScale:function(){return this._scalable;}, 163 | set_canScale:function(b) 164 | { 165 | this._scalable = (b === true); 166 | if(this._scalable) 167 | { 168 | this.par.addEventListener("gesturestart", this,true); 169 | } 170 | else 171 | { 172 | this.par.removeEventListener("gesturestart", this,true); 173 | } 174 | }, 175 | 176 | getContentSize:function() 177 | { 178 | return {"y":this.element.scrollHeight * this.scale, 179 | "x":this.element.scrollWidth * this.scale}; 180 | }, 181 | 182 | handleEvent:function(evt) 183 | { 184 | if(typeof this[evt.type] === "function") 185 | { 186 | return this[evt.type](evt); 187 | } 188 | else 189 | { 190 | console.log("event handler is not a function :: " + evt.type); 191 | } 192 | }, 193 | 194 | setPos:function(x,y) 195 | { 196 | this._x = (this.scrollX ? x : this._x); 197 | this._y = (this.scrollY ? y : this._y); 198 | this._updateTransform(); 199 | }, 200 | 201 | scrollToBottom:function() 202 | { 203 | var minY = this.par.offsetHeight - this.par.scrollHeight; 204 | this.setPos(this._x,minY); 205 | }, 206 | 207 | _updateTransform:function() 208 | { 209 | this.element.style.webkitTransform = "translate3d("+this._x+"px,"+this._y+"px,0px) scale3D("+this.scale+","+this.scale+",1.0)"; 210 | }, 211 | 212 | addTouchListeners:function() 213 | { 214 | window.addEventListener(Gbx.EndEvent, this, false); 215 | window.addEventListener(Gbx.MoveEvent, this, false); 216 | window.addEventListener(Gbx.CancelEvent, this, false); 217 | }, 218 | 219 | removeTouchListeners:function() 220 | { 221 | window.removeEventListener(Gbx.EndEvent, this, false); 222 | window.removeEventListener(Gbx.MoveEvent, this, false); 223 | window.removeEventListener(Gbx.CancelEvent, this, false); 224 | }, 225 | 226 | disableInputs:function() 227 | { 228 | var src = document; 229 | if("getElementsByTagName" in this.par) 230 | { 231 | src = this.par; 232 | } 233 | this.formElements = []; 234 | var tags = ["select","input","textarea"]; 235 | for(var s = 0; s < 3; s++) 236 | { 237 | var elems = src.getElementsByTagName(tags[s]); 238 | if (elems) 239 | { 240 | for(var n = 0, len = elems.length; n < len; n++) 241 | { 242 | var elem = elems[n]; 243 | if(!elem.disabled) 244 | { 245 | elem.disabled = true; 246 | this.formElements.push(elem); 247 | } 248 | } 249 | } 250 | } 251 | }, 252 | 253 | reenableInputs:function() 254 | { 255 | if(this.formElements) 256 | { 257 | for(var n = 0, len = this.formElements.length; n < len; n++) 258 | { 259 | this.formElements[n].disabled = false; 260 | } 261 | this.formElements = null; 262 | } 263 | }, 264 | 265 | click:function(e) 266 | { 267 | if(this.isDragging) 268 | { 269 | e.preventDefault(); 270 | e.stopPropagation(); 271 | } 272 | }, 273 | 274 | getClampedX:function(x) 275 | { 276 | if(!this.clampX) 277 | return x; 278 | 279 | var parentNode = this.par; 280 | // get updated x position 281 | 282 | var pWidth = parentNode.clientWidth; 283 | 284 | var selfWidth = this.element.scrollWidth * this.scale; 285 | 286 | var maxX = 0; 287 | var minX = ( ( parentNode.offsetWidth - this.element.scrollWidth ) * this.scale); 288 | var newLeft = x; 289 | 290 | if(newLeft > maxX) 291 | { 292 | newLeft = maxX; 293 | this.xVel = 0; 294 | } 295 | else if(newLeft < minX) 296 | { 297 | newLeft = minX; 298 | this.xVel = 0; 299 | } 300 | 301 | return newLeft; 302 | }, 303 | 304 | getClampedY:function(y) 305 | { 306 | if(!this.clampY) 307 | return y; 308 | 309 | var parentNode = this.par; 310 | // get updated y position 311 | 312 | var selfHeight = this.element.scrollHeight * this.scale; 313 | 314 | var maxY = 0; 315 | var minY = ((parentNode.offsetHeight - this.element.scrollHeight ) * this.scale); 316 | var newTop = y; 317 | 318 | if(newTop > maxY) 319 | { 320 | newTop = maxY; 321 | this.yVel = 0; 322 | } 323 | else if(newTop < minY) 324 | { 325 | newTop = minY; 326 | this.yVel = 0; 327 | } 328 | 329 | return newTop; 330 | }, 331 | 332 | // Transition Ended 333 | webkitTransitionEnd:function(e) 334 | { 335 | console.log("webkitTransitionEnd::" + this.state); 336 | // this is only really here in case we decide to support event broadcasting later 337 | switch(this.state) 338 | { 339 | case "ready" : // fallthrough is intentional 340 | case "starting" : 341 | case "moving" : 342 | case "scaling" : 343 | case "done": 344 | break; 345 | case "ending" : 346 | this.finishScrolling(); 347 | break; 348 | } 349 | }, 350 | 351 | /* :: Mouse Events :: */ 352 | 353 | mousedown:function(e) 354 | { 355 | e.preventDefault(); // this prevents Chrome's drag action on images! 356 | this.isDragging = true; 357 | var touchEvent = {timeStamp:e.timeStamp}; 358 | touchEvent.preventDefault = function(){e.preventDefault();}; 359 | touchEvent.stopPropagation = function(){e.stopPropagation();}; 360 | touchEvent.targetTouches = [{pageX:e.x,pageY:e.y}]; 361 | return this.touchstart(touchEvent); 362 | }, 363 | 364 | mousemove:function(e) 365 | { 366 | if(this.isDragging) 367 | { 368 | var touchEvent = {timeStamp:e.timeStamp}; 369 | touchEvent.preventDefault = function(){e.preventDefault();}; 370 | touchEvent.stopPropagation = function(){e.stopPropagation();}; 371 | touchEvent.targetTouches = [{pageX:e.x,pageY:e.y}]; 372 | return this.touchmove(touchEvent); 373 | } 374 | return false; 375 | }, 376 | 377 | mouseup:function(e) 378 | { 379 | var touchEvent = {timeStamp:e.timeStamp}; 380 | touchEvent.preventDefault = function(){e.preventDefault();}; 381 | touchEvent.stopPropagation = function(){e.stopPropagation();}; 382 | return this.touchend(touchEvent); 383 | }, 384 | 385 | /* :: Touch Events :: */ 386 | 387 | touchstart:function(e) 388 | { 389 | // Start tracking 390 | if (e.targetTouches.length != 1 || this.isScaling) 391 | { 392 | return false; 393 | } 394 | this.stopMomentum(); 395 | 396 | this.state = "starting"; 397 | 398 | 399 | e.stopPropagation(); 400 | 401 | this.startX = e.targetTouches[0].pageX; 402 | this.startY = e.targetTouches[0].pageY; 403 | 404 | this.lastX = this.startX; 405 | this.lastY = this.startY; 406 | 407 | this.xVel = 0; 408 | this.yVel = 0; 409 | 410 | this.startTime = e.timeStamp; 411 | 412 | this.addTouchListeners(); 413 | 414 | return false; 415 | }, 416 | 417 | 418 | touchmove:function(e) 419 | { 420 | // Don't track motion when multiple touches are down in this element (that's a gesture) 421 | if(!e.targetTouches || e.targetTouches.length != 1 || this.isScaling) 422 | { 423 | return false; 424 | } 425 | 426 | var currentX = e.targetTouches[0].pageX; 427 | var currentY = e.targetTouches[0].pageY; 428 | 429 | // TODO: this should allow velocity to be added 430 | // instead of always moving it to where the finger is now, 431 | // we could move it to where it was + ( velocity * elapsed ) 432 | // currently speed is NOT used while we are scrolling, and recalculated 433 | // once we let go 434 | 435 | if(this.formElements == null) 436 | { 437 | this.disableInputs(); 438 | } 439 | 440 | this.state = "moving"; 441 | 442 | // Prevent the browser from doing its default thing (scroll, zoom) 443 | e.preventDefault(); 444 | 445 | var dX = (currentX - this.lastX); 446 | var dY = (currentY - this.lastY); 447 | 448 | if(!this.isDragging) 449 | { 450 | if( Math.abs(dX) > this._dragThreshold || Math.abs(dY) > this._dragThreshold ) 451 | { 452 | this.isDragging = true; 453 | // use a tighter animation during dragging [ or NONE! ] 454 | this.element.style.webkitTransition = this.dragTrans; 455 | } 456 | } 457 | // it may have been changed by the statement above 458 | if(this.isDragging) 459 | { 460 | var newX = this.x; 461 | var newY = this.y; 462 | 463 | if(this.scrollX) 464 | { 465 | newX = this.getClampedX(this.x + dX); 466 | } 467 | 468 | if(this.scrollY) 469 | { 470 | newY = this.getClampedY(this.y + dY); 471 | } 472 | 473 | this.setPos(newX,newY); 474 | 475 | this.lastX = currentX; 476 | this.lastY = currentY; 477 | } 478 | }, 479 | 480 | 481 | touchend:function(e) 482 | { 483 | if (this.isDragging) 484 | { 485 | var self = this; 486 | // reenable inputs after a short wait 487 | setTimeout(function(){ self.reenableInputs(); }, 1500); 488 | 489 | // Prevent the browser from doing its default thing (scroll, zoom) 490 | this.removeTouchListeners(); 491 | 492 | this.state = "ending"; 493 | var elapsed = e.timeStamp - this.startTime; 494 | 495 | if(this.scrollY) 496 | { 497 | var dY = this.lastY - this.startY; 498 | this.yVel = dY / elapsed; 499 | if( Math.abs(this.yVel) < 0.5 ) 500 | { 501 | this.yVel = 0; 502 | } 503 | } 504 | 505 | if(this.scrollX) 506 | { 507 | var dX = this.lastX - this.startX; 508 | this.xVel = dX / elapsed; 509 | if(Math.abs(this.xVel) < 0.5) 510 | { 511 | this.xVel = 0; 512 | } 513 | } 514 | 515 | // if we are not really moving, we can skip the extra logic of momentum 516 | if (Math.abs(this.xVel) + Math.abs(this.yVel) < 0.5) 517 | { 518 | // can we get out early? 519 | this.finishScrolling(); 520 | } 521 | else 522 | { 523 | this.doMomentum(); 524 | } 525 | } 526 | return false; 527 | }, 528 | 529 | touchcancel:function(e) 530 | { 531 | this.touchend(e); 532 | }, 533 | 534 | /* :: Momentum :: aka Fauxmentum :: */ 535 | 536 | isDecelerating:function() 537 | { 538 | return this.state == "ending"; 539 | }, 540 | 541 | doMomentum:function() 542 | { 543 | // calculate the vector velocity, using both xVelocity and yVelocity 544 | // this velocity value is a normalized vector, it is always positive 545 | var velocity = Math.sqrt( this.xVel * this.xVel + this.yVel * this.yVel); 546 | 547 | // how long until we are stopped completely 548 | var time = Math.floor( velocity / Gbx.Friction ); 549 | // delta Distance = velocity * time OR px * ms / ms 550 | var dY = this.yVel * time; 551 | var dX = this.xVel * time; 552 | 553 | // Now do bounds checking 554 | var pHeight = this.par.clientHeight; 555 | var selfHeight = this.element.scrollHeight * this.scale; 556 | 557 | var maxY = 0; 558 | var minY = pHeight - selfHeight; 559 | var newTop = Math.min(Math.max(this.y + dY,minY),maxY); 560 | 561 | var pWidth = this.par.clientWidth; 562 | var selfWidth = this.element.scrollWidth * this.scale; 563 | 564 | var maxX = 0; 565 | var minX = pWidth - selfWidth; 566 | var newLeft = Math.min(Math.max(this.x + dX,minX),maxX); 567 | 568 | this.element.style.webkitTransition = '-webkit-transform ' + time + 'ms cubic-bezier(0, 0, 0.44, 1)'; 569 | this.setPos(newLeft,newTop); 570 | 571 | }, 572 | 573 | stopMomentum:function() 574 | { 575 | if (this.isDecelerating()) 576 | { 577 | // Get the computed style object. 578 | var style = document.defaultView.getComputedStyle(this.element, null); 579 | // Computed the transform in a matrix object given the style. 580 | var transform = new WebKitCSSMatrix(style.webkitTransform); 581 | // Clear the active transition so it doesn’t apply to our next transform. 582 | this.element.style.webkitTransition = "none"; 583 | // Set the element transform to where it is right now. 584 | this.setPos(transform.m41,transform.m42); 585 | } 586 | }, 587 | 588 | /* :: Gestures - still a work in progress aka Jestures -jm :: */ 589 | 590 | addGestureListeners:function() 591 | { 592 | var f = this.par.addEventListener; 593 | f('gesturechange', this, true); 594 | f('gestureend', this, true); 595 | }, 596 | 597 | removeGestureListeners:function() 598 | { 599 | var f = this.par.removeEventListener; 600 | f('gesturechange', this, true); 601 | f('gestureend', this, true); 602 | }, 603 | 604 | gesturestart:function(e) 605 | { 606 | this.addGestureListeners(); 607 | this.isDragging = false; 608 | this.isScaling = true; 609 | this.startScale = this._scale; 610 | this.startAngle = this._angle; 611 | this.element.style.webkitTransition = this.dragTrans; 612 | return false; 613 | }, 614 | 615 | gesturechange:function(e) 616 | { 617 | this.isScaling = true; 618 | this.scale = this.startScale * e.scale; 619 | return false; 620 | }, 621 | 622 | gestureend:function(e) 623 | { 624 | this.removeGestureListeners(); 625 | this.isScaling = false; 626 | this.finishScrolling(); 627 | return false; 628 | }, 629 | 630 | finishScrolling:function() 631 | { 632 | console.log("finishScrolling"); 633 | this.state = "done"; 634 | this.element.style.webkitTransition = this.bounceTrans; 635 | this.isDragging = false; 636 | 637 | var parentNode = this.par; 638 | // get updated x position 639 | 640 | var pWidth = parentNode.clientWidth; 641 | var selfWidth = this.element.scrollWidth * this.scale; 642 | 643 | var maxX = 0; 644 | var minX = 0; 645 | var newLeft = 0; 646 | 647 | if (pWidth > selfWidth) 648 | { 649 | maxX = pWidth - selfWidth; 650 | minX = 0; 651 | newLeft = (pWidth - selfWidth)/2; 652 | } 653 | else 654 | { 655 | maxX = 0; 656 | minX = pWidth - selfWidth; 657 | newLeft = Math.min(Math.max(this.x,minX),maxX); 658 | } 659 | 660 | // get updated y 661 | 662 | var pHeight = parentNode.clientHeight; 663 | var selfHeight = this.element.scrollHeight * this.scale; 664 | 665 | var minY = 0; 666 | var maxY = 0; 667 | var newTop = 0; 668 | 669 | if(pHeight > selfHeight) 670 | { 671 | minY = 0; 672 | maxY = pHeight - selfHeight; 673 | newTop = (pHeight - selfHeight)/2; 674 | } 675 | else 676 | { 677 | maxY = 0; 678 | minY = pHeight - selfHeight; 679 | newTop = Math.min(Math.max(this.y,minY),maxY); 680 | } 681 | 682 | if(this.snap != null) 683 | { 684 | newLeft = this.snap.x ? Math.round(newLeft / this.snap.x ) * this.snap.x : newLeft; 685 | newTop = this.snap.y ? Math.round(newTop / this.snap.y ) * this.snap.y : newTop; 686 | } 687 | 688 | this.setPos(newLeft,newTop); 689 | } 690 | }; 691 | 692 | // Utility function for allowing obj.x to call an accessor function pointing to obj.get_x() 693 | function makeAccessors(obj,props) 694 | { 695 | function makeAccessor(prop) 696 | { 697 | Object.defineProperty(obj, prop, { get : obj["get_" + prop], set : obj["set_" + prop] } ); 698 | } 699 | props.forEach(makeAccessor); 700 | } 701 | // turn gb.x into a call to gb.get_x() which in turn uses gb._x 702 | makeAccessors(Gbx.prototype,[ "x", "y", "scale", "dragTrans", "afterTrans", "bounceTrans", "canScale" ]); 703 | Object.defineProperty(Gbx.prototype, "par", { get :function(){return this.element.parentNode;}}); 704 | return Gbx; 705 | 706 | })(); 707 | 708 | -------------------------------------------------------------------------------- /tests/qunit/qunit.js: -------------------------------------------------------------------------------- 1 | /* 2 | * QUnit - A JavaScript Unit Testing Framework 3 | * 4 | * http://docs.jquery.com/QUnit 5 | * 6 | * Copyright (c) 2009 John Resig, Jörn Zaefferer 7 | * Dual licensed under the MIT (MIT-LICENSE.txt) 8 | * and GPL (GPL-LICENSE.txt) licenses. 9 | */ 10 | 11 | (function(window) { 12 | 13 | var QUnit = { 14 | 15 | // call on start of module test to prepend name to all tests 16 | module: function(name, testEnvironment) { 17 | config.currentModule = name; 18 | 19 | synchronize(function() { 20 | if ( config.currentModule ) { 21 | QUnit.moduleDone( config.currentModule, config.moduleStats.bad, config.moduleStats.all ); 22 | } 23 | 24 | config.currentModule = name; 25 | config.moduleTestEnvironment = testEnvironment; 26 | config.moduleStats = { all: 0, bad: 0 }; 27 | 28 | QUnit.moduleStart( name, testEnvironment ); 29 | }); 30 | }, 31 | 32 | asyncTest: function(testName, expected, callback) { 33 | if ( arguments.length === 2 ) { 34 | callback = expected; 35 | expected = 0; 36 | } 37 | 38 | QUnit.test(testName, expected, callback, true); 39 | }, 40 | 41 | test: function(testName, expected, callback, async) { 42 | var name = '' + testName + '', testEnvironment, testEnvironmentArg; 43 | 44 | if ( arguments.length === 2 ) { 45 | callback = expected; 46 | expected = null; 47 | } 48 | // is 2nd argument a testEnvironment? 49 | if ( expected && typeof expected === 'object') { 50 | testEnvironmentArg = expected; 51 | expected = null; 52 | } 53 | 54 | if ( config.currentModule ) { 55 | name = '' + config.currentModule + ": " + name; 56 | } 57 | 58 | if ( !validTest(config.currentModule + ": " + testName) ) { 59 | return; 60 | } 61 | 62 | synchronize(function() { 63 | 64 | testEnvironment = extend({ 65 | setup: function() {}, 66 | teardown: function() {} 67 | }, config.moduleTestEnvironment); 68 | if (testEnvironmentArg) { 69 | extend(testEnvironment,testEnvironmentArg); 70 | } 71 | 72 | QUnit.testStart( testName, testEnvironment ); 73 | 74 | // allow utility functions to access the current test environment 75 | QUnit.current_testEnvironment = testEnvironment; 76 | 77 | config.assertions = []; 78 | config.expected = expected; 79 | 80 | var tests = id("qunit-tests"); 81 | if (tests) { 82 | var b = document.createElement("strong"); 83 | b.innerHTML = "Running " + name; 84 | var li = document.createElement("li"); 85 | li.appendChild( b ); 86 | li.id = "current-test-output"; 87 | tests.appendChild( li ) 88 | } 89 | 90 | try { 91 | if ( !config.pollution ) { 92 | saveGlobal(); 93 | } 94 | 95 | testEnvironment.setup.call(testEnvironment); 96 | } catch(e) { 97 | QUnit.ok( false, "Setup failed on " + name + ": " + e.message ); 98 | } 99 | }); 100 | 101 | synchronize(function() { 102 | if ( async ) { 103 | QUnit.stop(); 104 | } 105 | 106 | try { 107 | callback.call(testEnvironment); 108 | } catch(e) { 109 | fail("Test " + name + " died, exception and test follows", e, callback); 110 | QUnit.ok( false, "Died on test #" + (config.assertions.length + 1) + ": " + e.message ); 111 | // else next test will carry the responsibility 112 | saveGlobal(); 113 | 114 | // Restart the tests if they're blocking 115 | if ( config.blocking ) { 116 | start(); 117 | } 118 | } 119 | }); 120 | 121 | synchronize(function() { 122 | try { 123 | checkPollution(); 124 | testEnvironment.teardown.call(testEnvironment); 125 | } catch(e) { 126 | QUnit.ok( false, "Teardown failed on " + name + ": " + e.message ); 127 | } 128 | }); 129 | 130 | synchronize(function() { 131 | try { 132 | QUnit.reset(); 133 | } catch(e) { 134 | fail("reset() failed, following Test " + name + ", exception and reset fn follows", e, QUnit.reset); 135 | } 136 | 137 | if ( config.expected && config.expected != config.assertions.length ) { 138 | QUnit.ok( false, "Expected " + config.expected + " assertions, but " + config.assertions.length + " were run" ); 139 | } 140 | 141 | var good = 0, bad = 0, 142 | tests = id("qunit-tests"); 143 | 144 | config.stats.all += config.assertions.length; 145 | config.moduleStats.all += config.assertions.length; 146 | 147 | if ( tests ) { 148 | var ol = document.createElement("ol"); 149 | 150 | for ( var i = 0; i < config.assertions.length; i++ ) { 151 | var assertion = config.assertions[i]; 152 | 153 | var li = document.createElement("li"); 154 | li.className = assertion.result ? "pass" : "fail"; 155 | li.innerHTML = assertion.message || "(no message)"; 156 | ol.appendChild( li ); 157 | 158 | if ( assertion.result ) { 159 | good++; 160 | } else { 161 | bad++; 162 | config.stats.bad++; 163 | config.moduleStats.bad++; 164 | } 165 | } 166 | if (bad == 0) { 167 | ol.style.display = "none"; 168 | } 169 | 170 | var b = document.createElement("strong"); 171 | b.innerHTML = name + " (" + bad + ", " + good + ", " + config.assertions.length + ")"; 172 | 173 | addEvent(b, "click", function() { 174 | var next = b.nextSibling, display = next.style.display; 175 | next.style.display = display === "none" ? "block" : "none"; 176 | }); 177 | 178 | addEvent(b, "dblclick", function(e) { 179 | var target = e && e.target ? e.target : window.event.srcElement; 180 | if ( target.nodeName.toLowerCase() == "span" || target.nodeName.toLowerCase() == "b" ) { 181 | target = target.parentNode; 182 | } 183 | if ( window.location && target.nodeName.toLowerCase() === "strong" ) { 184 | window.location.search = "?" + encodeURIComponent(getText([target]).replace(/\(.+\)$/, "").replace(/(^\s*|\s*$)/g, "")); 185 | } 186 | }); 187 | 188 | var li = id("current-test-output"); 189 | li.id = ""; 190 | li.className = bad ? "fail" : "pass"; 191 | li.removeChild( li.firstChild ); 192 | li.appendChild( b ); 193 | li.appendChild( ol ); 194 | 195 | if ( bad ) { 196 | var toolbar = id("qunit-testrunner-toolbar"); 197 | if ( toolbar ) { 198 | toolbar.style.display = "block"; 199 | id("qunit-filter-pass").disabled = null; 200 | id("qunit-filter-missing").disabled = null; 201 | } 202 | } 203 | 204 | } else { 205 | for ( var i = 0; i < config.assertions.length; i++ ) { 206 | if ( !config.assertions[i].result ) { 207 | bad++; 208 | config.stats.bad++; 209 | config.moduleStats.bad++; 210 | } 211 | } 212 | } 213 | 214 | QUnit.testDone( testName, bad, config.assertions.length ); 215 | 216 | if ( !window.setTimeout && !config.queue.length ) { 217 | done(); 218 | } 219 | }); 220 | 221 | synchronize( done ); 222 | }, 223 | 224 | /** 225 | * Specify the number of expected assertions to gurantee that failed test (no assertions are run at all) don't slip through. 226 | */ 227 | expect: function(asserts) { 228 | config.expected = asserts; 229 | }, 230 | 231 | /** 232 | * Asserts true. 233 | * @example ok( "asdfasdf".length > 5, "There must be at least 5 chars" ); 234 | */ 235 | ok: function(a, msg) { 236 | msg = escapeHtml(msg); 237 | QUnit.log(a, msg); 238 | 239 | config.assertions.push({ 240 | result: !!a, 241 | message: msg 242 | }); 243 | }, 244 | 245 | /** 246 | * Checks that the first two arguments are equal, with an optional message. 247 | * Prints out both actual and expected values. 248 | * 249 | * Prefered to ok( actual == expected, message ) 250 | * 251 | * @example equal( format("Received {0} bytes.", 2), "Received 2 bytes." ); 252 | * 253 | * @param Object actual 254 | * @param Object expected 255 | * @param String message (optional) 256 | */ 257 | equal: function(actual, expected, message) { 258 | push(expected == actual, actual, expected, message); 259 | }, 260 | 261 | notEqual: function(actual, expected, message) { 262 | push(expected != actual, actual, expected, message); 263 | }, 264 | 265 | deepEqual: function(actual, expected, message) { 266 | push(QUnit.equiv(actual, expected), actual, expected, message); 267 | }, 268 | 269 | notDeepEqual: function(actual, expected, message) { 270 | push(!QUnit.equiv(actual, expected), actual, expected, message); 271 | }, 272 | 273 | strictEqual: function(actual, expected, message) { 274 | push(expected === actual, actual, expected, message); 275 | }, 276 | 277 | notStrictEqual: function(actual, expected, message) { 278 | push(expected !== actual, actual, expected, message); 279 | }, 280 | 281 | raises: function(fn, message) { 282 | try { 283 | fn(); 284 | ok( false, message ); 285 | } 286 | catch (e) { 287 | ok( true, message ); 288 | } 289 | }, 290 | 291 | start: function() { 292 | // A slight delay, to avoid any current callbacks 293 | if ( window.setTimeout ) { 294 | window.setTimeout(function() { 295 | if ( config.timeout ) { 296 | clearTimeout(config.timeout); 297 | } 298 | 299 | config.blocking = false; 300 | process(); 301 | }, 13); 302 | } else { 303 | config.blocking = false; 304 | process(); 305 | } 306 | }, 307 | 308 | stop: function(timeout) { 309 | config.blocking = true; 310 | 311 | if ( timeout && window.setTimeout ) { 312 | config.timeout = window.setTimeout(function() { 313 | QUnit.ok( false, "Test timed out" ); 314 | QUnit.start(); 315 | }, timeout); 316 | } 317 | } 318 | 319 | }; 320 | 321 | // Backwards compatibility, deprecated 322 | QUnit.equals = QUnit.equal; 323 | QUnit.same = QUnit.deepEqual; 324 | 325 | // Maintain internal state 326 | var config = { 327 | // The queue of tests to run 328 | queue: [], 329 | 330 | // block until document ready 331 | blocking: true 332 | }; 333 | 334 | // Load paramaters 335 | (function() { 336 | var location = window.location || { search: "", protocol: "file:" }, 337 | GETParams = location.search.slice(1).split('&'); 338 | 339 | for ( var i = 0; i < GETParams.length; i++ ) { 340 | GETParams[i] = decodeURIComponent( GETParams[i] ); 341 | if ( GETParams[i] === "noglobals" ) { 342 | GETParams.splice( i, 1 ); 343 | i--; 344 | config.noglobals = true; 345 | } else if ( GETParams[i].search('=') > -1 ) { 346 | GETParams.splice( i, 1 ); 347 | i--; 348 | } 349 | } 350 | 351 | // restrict modules/tests by get parameters 352 | config.filters = GETParams; 353 | 354 | // Figure out if we're running the tests from a server or not 355 | QUnit.isLocal = !!(location.protocol === 'file:'); 356 | })(); 357 | 358 | // Expose the API as global variables, unless an 'exports' 359 | // object exists, in that case we assume we're in CommonJS 360 | if ( typeof exports === "undefined" || typeof require === "undefined" ) { 361 | extend(window, QUnit); 362 | window.QUnit = QUnit; 363 | } else { 364 | extend(exports, QUnit); 365 | exports.QUnit = QUnit; 366 | } 367 | 368 | // define these after exposing globals to keep them in these QUnit namespace only 369 | extend(QUnit, { 370 | config: config, 371 | 372 | // Initialize the configuration options 373 | init: function() { 374 | extend(config, { 375 | stats: { all: 0, bad: 0 }, 376 | moduleStats: { all: 0, bad: 0 }, 377 | started: +new Date, 378 | updateRate: 1000, 379 | blocking: false, 380 | autostart: true, 381 | autorun: false, 382 | assertions: [], 383 | filters: [], 384 | queue: [] 385 | }); 386 | 387 | var tests = id("qunit-tests"), 388 | banner = id("qunit-banner"), 389 | result = id("qunit-testresult"); 390 | 391 | if ( tests ) { 392 | tests.innerHTML = ""; 393 | } 394 | 395 | if ( banner ) { 396 | banner.className = ""; 397 | } 398 | 399 | if ( result ) { 400 | result.parentNode.removeChild( result ); 401 | } 402 | }, 403 | 404 | /** 405 | * Resets the test setup. Useful for tests that modify the DOM. 406 | */ 407 | reset: function() { 408 | if ( window.jQuery ) { 409 | jQuery("#main, #qunit-fixture").html( config.fixture ); 410 | } 411 | }, 412 | 413 | /** 414 | * Trigger an event on an element. 415 | * 416 | * @example triggerEvent( document.body, "click" ); 417 | * 418 | * @param DOMElement elem 419 | * @param String type 420 | */ 421 | triggerEvent: function( elem, type, event ) { 422 | if ( document.createEvent ) { 423 | event = document.createEvent("MouseEvents"); 424 | event.initMouseEvent(type, true, true, elem.ownerDocument.defaultView, 425 | 0, 0, 0, 0, 0, false, false, false, false, 0, null); 426 | elem.dispatchEvent( event ); 427 | 428 | } else if ( elem.fireEvent ) { 429 | elem.fireEvent("on"+type); 430 | } 431 | }, 432 | 433 | // Safe object type checking 434 | is: function( type, obj ) { 435 | return QUnit.objectType( obj ) == type; 436 | }, 437 | 438 | objectType: function( obj ) { 439 | if (typeof obj === "undefined") { 440 | return "undefined"; 441 | 442 | // consider: typeof null === object 443 | } 444 | if (obj === null) { 445 | return "null"; 446 | } 447 | 448 | var type = Object.prototype.toString.call( obj ) 449 | .match(/^\[object\s(.*)\]$/)[1] || ''; 450 | 451 | switch (type) { 452 | case 'Number': 453 | if (isNaN(obj)) { 454 | return "nan"; 455 | } else { 456 | return "number"; 457 | } 458 | case 'String': 459 | case 'Boolean': 460 | case 'Array': 461 | case 'Date': 462 | case 'RegExp': 463 | case 'Function': 464 | return type.toLowerCase(); 465 | } 466 | if (typeof obj === "object") { 467 | return "object"; 468 | } 469 | return undefined; 470 | }, 471 | 472 | // Logging callbacks 473 | begin: function() {}, 474 | done: function(failures, total) {}, 475 | log: function(result, message) {}, 476 | testStart: function(name, testEnvironment) {}, 477 | testDone: function(name, failures, total) {}, 478 | moduleStart: function(name, testEnvironment) {}, 479 | moduleDone: function(name, failures, total) {} 480 | }); 481 | 482 | if ( typeof document === "undefined" || document.readyState === "complete" ) { 483 | config.autorun = true; 484 | } 485 | 486 | addEvent(window, "load", function() { 487 | QUnit.begin(); 488 | 489 | // Initialize the config, saving the execution queue 490 | var oldconfig = extend({}, config); 491 | QUnit.init(); 492 | extend(config, oldconfig); 493 | 494 | config.blocking = false; 495 | 496 | var userAgent = id("qunit-userAgent"); 497 | if ( userAgent ) { 498 | userAgent.innerHTML = navigator.userAgent; 499 | } 500 | var banner = id("qunit-header"); 501 | if ( banner ) { 502 | banner.innerHTML = '' + banner.innerHTML + ''; 503 | } 504 | 505 | var toolbar = id("qunit-testrunner-toolbar"); 506 | if ( toolbar ) { 507 | toolbar.style.display = "none"; 508 | 509 | var filter = document.createElement("input"); 510 | filter.type = "checkbox"; 511 | filter.id = "qunit-filter-pass"; 512 | filter.disabled = true; 513 | addEvent( filter, "click", function() { 514 | var li = document.getElementsByTagName("li"); 515 | for ( var i = 0; i < li.length; i++ ) { 516 | if ( li[i].className.indexOf("pass") > -1 ) { 517 | li[i].style.display = filter.checked ? "none" : ""; 518 | } 519 | } 520 | }); 521 | toolbar.appendChild( filter ); 522 | 523 | var label = document.createElement("label"); 524 | label.setAttribute("for", "qunit-filter-pass"); 525 | label.innerHTML = "Hide passed tests"; 526 | toolbar.appendChild( label ); 527 | 528 | var missing = document.createElement("input"); 529 | missing.type = "checkbox"; 530 | missing.id = "qunit-filter-missing"; 531 | missing.disabled = true; 532 | addEvent( missing, "click", function() { 533 | var li = document.getElementsByTagName("li"); 534 | for ( var i = 0; i < li.length; i++ ) { 535 | if ( li[i].className.indexOf("fail") > -1 && li[i].innerHTML.indexOf('missing test - untested code is broken code') > - 1 ) { 536 | li[i].parentNode.parentNode.style.display = missing.checked ? "none" : "block"; 537 | } 538 | } 539 | }); 540 | toolbar.appendChild( missing ); 541 | 542 | label = document.createElement("label"); 543 | label.setAttribute("for", "qunit-filter-missing"); 544 | label.innerHTML = "Hide missing tests (untested code is broken code)"; 545 | toolbar.appendChild( label ); 546 | } 547 | 548 | var main = id('main') || id('qunit-fixture'); 549 | if ( main ) { 550 | config.fixture = main.innerHTML; 551 | } 552 | 553 | if (config.autostart) { 554 | QUnit.start(); 555 | } 556 | }); 557 | 558 | function done() { 559 | if ( config.doneTimer && window.clearTimeout ) { 560 | window.clearTimeout( config.doneTimer ); 561 | config.doneTimer = null; 562 | } 563 | 564 | if ( config.queue.length ) { 565 | config.doneTimer = window.setTimeout(function(){ 566 | if ( !config.queue.length ) { 567 | done(); 568 | } else { 569 | synchronize( done ); 570 | } 571 | }, 13); 572 | 573 | return; 574 | } 575 | 576 | config.autorun = true; 577 | 578 | // Log the last module results 579 | if ( config.currentModule ) { 580 | QUnit.moduleDone( config.currentModule, config.moduleStats.bad, config.moduleStats.all ); 581 | } 582 | 583 | var banner = id("qunit-banner"), 584 | tests = id("qunit-tests"), 585 | html = ['Tests completed in ', 586 | +new Date - config.started, ' milliseconds.
    ', 587 | '', config.stats.all - config.stats.bad, ' tests of ', config.stats.all, ' passed, ', config.stats.bad,' failed.'].join(''); 588 | 589 | if ( banner ) { 590 | banner.className = (config.stats.bad ? "qunit-fail" : "qunit-pass"); 591 | } 592 | 593 | if ( tests ) { 594 | var result = id("qunit-testresult"); 595 | 596 | if ( !result ) { 597 | result = document.createElement("p"); 598 | result.id = "qunit-testresult"; 599 | result.className = "result"; 600 | tests.parentNode.insertBefore( result, tests.nextSibling ); 601 | } 602 | 603 | result.innerHTML = html; 604 | } 605 | 606 | QUnit.done( config.stats.bad, config.stats.all ); 607 | } 608 | 609 | function validTest( name ) { 610 | var i = config.filters.length, 611 | run = false; 612 | 613 | if ( !i ) { 614 | return true; 615 | } 616 | 617 | while ( i-- ) { 618 | var filter = config.filters[i], 619 | not = filter.charAt(0) == '!'; 620 | 621 | if ( not ) { 622 | filter = filter.slice(1); 623 | } 624 | 625 | if ( name.indexOf(filter) !== -1 ) { 626 | return !not; 627 | } 628 | 629 | if ( not ) { 630 | run = true; 631 | } 632 | } 633 | 634 | return run; 635 | } 636 | 637 | function escapeHtml(s) { 638 | s = s === null ? "" : s + ""; 639 | return s.replace(/[\&"<>\\]/g, function(s) { 640 | switch(s) { 641 | case "&": return "&"; 642 | case "\\": return "\\\\"; 643 | case '"': return '\"'; 644 | case "<": return "<"; 645 | case ">": return ">"; 646 | default: return s; 647 | } 648 | }); 649 | } 650 | 651 | function push(result, actual, expected, message) { 652 | message = escapeHtml(message) || (result ? "okay" : "failed"); 653 | message = '' + message + ""; 654 | expected = escapeHtml(QUnit.jsDump.parse(expected)); 655 | actual = escapeHtml(QUnit.jsDump.parse(actual)); 656 | var output = message + ', expected: ' + expected + ''; 657 | if (actual != expected) { 658 | output += ' result: ' + actual + ', diff: ' + QUnit.diff(expected, actual); 659 | } 660 | 661 | // can't use ok, as that would double-escape messages 662 | QUnit.log(result, output); 663 | config.assertions.push({ 664 | result: !!result, 665 | message: output 666 | }); 667 | } 668 | 669 | function synchronize( callback ) { 670 | config.queue.push( callback ); 671 | 672 | if ( config.autorun && !config.blocking ) { 673 | process(); 674 | } 675 | } 676 | 677 | function process() { 678 | var start = (new Date()).getTime(); 679 | 680 | while ( config.queue.length && !config.blocking ) { 681 | if ( config.updateRate <= 0 || (((new Date()).getTime() - start) < config.updateRate) ) { 682 | config.queue.shift()(); 683 | 684 | } else { 685 | setTimeout( process, 13 ); 686 | break; 687 | } 688 | } 689 | } 690 | 691 | function saveGlobal() { 692 | config.pollution = []; 693 | 694 | if ( config.noglobals ) { 695 | for ( var key in window ) { 696 | config.pollution.push( key ); 697 | } 698 | } 699 | } 700 | 701 | function checkPollution( name ) { 702 | var old = config.pollution; 703 | saveGlobal(); 704 | 705 | var newGlobals = diff( old, config.pollution ); 706 | if ( newGlobals.length > 0 ) { 707 | ok( false, "Introduced global variable(s): " + newGlobals.join(", ") ); 708 | config.expected++; 709 | } 710 | 711 | var deletedGlobals = diff( config.pollution, old ); 712 | if ( deletedGlobals.length > 0 ) { 713 | ok( false, "Deleted global variable(s): " + deletedGlobals.join(", ") ); 714 | config.expected++; 715 | } 716 | } 717 | 718 | // returns a new Array with the elements that are in a but not in b 719 | function diff( a, b ) { 720 | var result = a.slice(); 721 | for ( var i = 0; i < result.length; i++ ) { 722 | for ( var j = 0; j < b.length; j++ ) { 723 | if ( result[i] === b[j] ) { 724 | result.splice(i, 1); 725 | i--; 726 | break; 727 | } 728 | } 729 | } 730 | return result; 731 | } 732 | 733 | function fail(message, exception, callback) { 734 | if ( typeof console !== "undefined" && console.error && console.warn ) { 735 | console.error(message); 736 | console.error(exception); 737 | console.warn(callback.toString()); 738 | 739 | } else if ( window.opera && opera.postError ) { 740 | opera.postError(message, exception, callback.toString); 741 | } 742 | } 743 | 744 | function extend(a, b) { 745 | for ( var prop in b ) { 746 | a[prop] = b[prop]; 747 | } 748 | 749 | return a; 750 | } 751 | 752 | function addEvent(elem, type, fn) { 753 | if ( elem.addEventListener ) { 754 | elem.addEventListener( type, fn, false ); 755 | } else if ( elem.attachEvent ) { 756 | elem.attachEvent( "on" + type, fn ); 757 | } else { 758 | fn(); 759 | } 760 | } 761 | 762 | function id(name) { 763 | return !!(typeof document !== "undefined" && document && document.getElementById) && 764 | document.getElementById( name ); 765 | } 766 | 767 | // Test for equality any JavaScript type. 768 | // Discussions and reference: http://philrathe.com/articles/equiv 769 | // Test suites: http://philrathe.com/tests/equiv 770 | // Author: Philippe Rathé 771 | QUnit.equiv = function () { 772 | 773 | var innerEquiv; // the real equiv function 774 | var callers = []; // stack to decide between skip/abort functions 775 | var parents = []; // stack to avoiding loops from circular referencing 776 | 777 | // Call the o related callback with the given arguments. 778 | function bindCallbacks(o, callbacks, args) { 779 | var prop = QUnit.objectType(o); 780 | if (prop) { 781 | if (QUnit.objectType(callbacks[prop]) === "function") { 782 | return callbacks[prop].apply(callbacks, args); 783 | } else { 784 | return callbacks[prop]; // or undefined 785 | } 786 | } 787 | } 788 | 789 | var callbacks = function () { 790 | 791 | // for string, boolean, number and null 792 | function useStrictEquality(b, a) { 793 | if (b instanceof a.constructor || a instanceof b.constructor) { 794 | // to catch short annotaion VS 'new' annotation of a declaration 795 | // e.g. var i = 1; 796 | // var j = new Number(1); 797 | return a == b; 798 | } else { 799 | return a === b; 800 | } 801 | } 802 | 803 | return { 804 | "string": useStrictEquality, 805 | "boolean": useStrictEquality, 806 | "number": useStrictEquality, 807 | "null": useStrictEquality, 808 | "undefined": useStrictEquality, 809 | 810 | "nan": function (b) { 811 | return isNaN(b); 812 | }, 813 | 814 | "date": function (b, a) { 815 | return QUnit.objectType(b) === "date" && a.valueOf() === b.valueOf(); 816 | }, 817 | 818 | "regexp": function (b, a) { 819 | return QUnit.objectType(b) === "regexp" && 820 | a.source === b.source && // the regex itself 821 | a.global === b.global && // and its modifers (gmi) ... 822 | a.ignoreCase === b.ignoreCase && 823 | a.multiline === b.multiline; 824 | }, 825 | 826 | // - skip when the property is a method of an instance (OOP) 827 | // - abort otherwise, 828 | // initial === would have catch identical references anyway 829 | "function": function () { 830 | var caller = callers[callers.length - 1]; 831 | return caller !== Object && 832 | typeof caller !== "undefined"; 833 | }, 834 | 835 | "array": function (b, a) { 836 | var i, j, loop; 837 | var len; 838 | 839 | // b could be an object literal here 840 | if ( ! (QUnit.objectType(b) === "array")) { 841 | return false; 842 | } 843 | 844 | len = a.length; 845 | if (len !== b.length) { // safe and faster 846 | return false; 847 | } 848 | 849 | //track reference to avoid circular references 850 | parents.push(a); 851 | for (i = 0; i < len; i++) { 852 | loop = false; 853 | for(j=0;j= 0) { 998 | type = "array"; 999 | } else { 1000 | type = typeof obj; 1001 | } 1002 | return type; 1003 | }, 1004 | separator:function() { 1005 | return this.multiline ? this.HTML ? '
    ' : '\n' : this.HTML ? ' ' : ' '; 1006 | }, 1007 | indent:function( extra ) {// extra can be a number, shortcut for increasing-calling-decreasing 1008 | if ( !this.multiline ) 1009 | return ''; 1010 | var chr = this.indentChar; 1011 | if ( this.HTML ) 1012 | chr = chr.replace(/\t/g,' ').replace(/ /g,' '); 1013 | return Array( this._depth_ + (extra||0) ).join(chr); 1014 | }, 1015 | up:function( a ) { 1016 | this._depth_ += a || 1; 1017 | }, 1018 | down:function( a ) { 1019 | this._depth_ -= a || 1; 1020 | }, 1021 | setParser:function( name, parser ) { 1022 | this.parsers[name] = parser; 1023 | }, 1024 | // The next 3 are exposed so you can use them 1025 | quote:quote, 1026 | literal:literal, 1027 | join:join, 1028 | // 1029 | _depth_: 1, 1030 | // This is the list of parsers, to modify them, use jsDump.setParser 1031 | parsers:{ 1032 | window: '[Window]', 1033 | document: '[Document]', 1034 | error:'[ERROR]', //when no parser is found, shouldn't happen 1035 | unknown: '[Unknown]', 1036 | 'null':'null', 1037 | undefined:'undefined', 1038 | 'function':function( fn ) { 1039 | var ret = 'function', 1040 | name = 'name' in fn ? fn.name : (reName.exec(fn)||[])[1];//functions never have name in IE 1041 | if ( name ) 1042 | ret += ' ' + name; 1043 | ret += '('; 1044 | 1045 | ret = [ ret, this.parse( fn, 'functionArgs' ), '){'].join(''); 1046 | return join( ret, this.parse(fn,'functionCode'), '}' ); 1047 | }, 1048 | array: array, 1049 | nodelist: array, 1050 | arguments: array, 1051 | object:function( map ) { 1052 | var ret = [ ]; 1053 | this.up(); 1054 | for ( var key in map ) 1055 | ret.push( this.parse(key,'key') + ': ' + this.parse(map[key]) ); 1056 | this.down(); 1057 | return join( '{', ret, '}' ); 1058 | }, 1059 | node:function( node ) { 1060 | var open = this.HTML ? '<' : '<', 1061 | close = this.HTML ? '>' : '>'; 1062 | 1063 | var tag = node.nodeName.toLowerCase(), 1064 | ret = open + tag; 1065 | 1066 | for ( var a in this.DOMAttrs ) { 1067 | var val = node[this.DOMAttrs[a]]; 1068 | if ( val ) 1069 | ret += ' ' + a + '=' + this.parse( val, 'attribute' ); 1070 | } 1071 | return ret + close + open + '/' + tag + close; 1072 | }, 1073 | functionArgs:function( fn ) {//function calls it internally, it's the arguments part of the function 1074 | var l = fn.length; 1075 | if ( !l ) return ''; 1076 | 1077 | var args = Array(l); 1078 | while ( l-- ) 1079 | args[l] = String.fromCharCode(97+l);//97 is 'a' 1080 | return ' ' + args.join(', ') + ' '; 1081 | }, 1082 | key:quote, //object calls it internally, the key part of an item in a map 1083 | functionCode:'[code]', //function calls it internally, it's the content of the function 1084 | attribute:quote, //node calls it internally, it's an html attribute value 1085 | string:quote, 1086 | date:quote, 1087 | regexp:literal, //regex 1088 | number:literal, 1089 | 'boolean':literal 1090 | }, 1091 | DOMAttrs:{//attributes to dump from nodes, name=>realName 1092 | id:'id', 1093 | name:'name', 1094 | 'class':'className' 1095 | }, 1096 | HTML:false,//if true, entities are escaped ( <, >, \t, space and \n ) 1097 | indentChar:' ',//indentation unit 1098 | multiline:false //if true, items in a collection, are separated by a \n, else just a space. 1099 | }; 1100 | 1101 | return jsDump; 1102 | })(); 1103 | 1104 | // from Sizzle.js 1105 | function getText( elems ) { 1106 | var ret = "", elem; 1107 | 1108 | for ( var i = 0; elems[i]; i++ ) { 1109 | elem = elems[i]; 1110 | 1111 | // Get the text from text nodes and CDATA nodes 1112 | if ( elem.nodeType === 3 || elem.nodeType === 4 ) { 1113 | ret += elem.nodeValue; 1114 | 1115 | // Traverse everything else, except comment nodes 1116 | } else if ( elem.nodeType !== 8 ) { 1117 | ret += getText( elem.childNodes ); 1118 | } 1119 | } 1120 | 1121 | return ret; 1122 | }; 1123 | 1124 | /* 1125 | * Javascript Diff Algorithm 1126 | * By John Resig (http://ejohn.org/) 1127 | * Modified by Chu Alan "sprite" 1128 | * 1129 | * Released under the MIT license. 1130 | * 1131 | * More Info: 1132 | * http://ejohn.org/projects/javascript-diff-algorithm/ 1133 | * 1134 | * Usage: QUnit.diff(expected, actual) 1135 | * 1136 | * QUnit.diff("the quick brown fox jumped over", "the quick fox jumps over") == "the quick brown fox jumped jumps over" 1137 | */ 1138 | QUnit.diff = (function() { 1139 | function diff(o, n){ 1140 | var ns = new Object(); 1141 | var os = new Object(); 1142 | 1143 | for (var i = 0; i < n.length; i++) { 1144 | if (ns[n[i]] == null) 1145 | ns[n[i]] = { 1146 | rows: new Array(), 1147 | o: null 1148 | }; 1149 | ns[n[i]].rows.push(i); 1150 | } 1151 | 1152 | for (var i = 0; i < o.length; i++) { 1153 | if (os[o[i]] == null) 1154 | os[o[i]] = { 1155 | rows: new Array(), 1156 | n: null 1157 | }; 1158 | os[o[i]].rows.push(i); 1159 | } 1160 | 1161 | for (var i in ns) { 1162 | if (ns[i].rows.length == 1 && typeof(os[i]) != "undefined" && os[i].rows.length == 1) { 1163 | n[ns[i].rows[0]] = { 1164 | text: n[ns[i].rows[0]], 1165 | row: os[i].rows[0] 1166 | }; 1167 | o[os[i].rows[0]] = { 1168 | text: o[os[i].rows[0]], 1169 | row: ns[i].rows[0] 1170 | }; 1171 | } 1172 | } 1173 | 1174 | for (var i = 0; i < n.length - 1; i++) { 1175 | if (n[i].text != null && n[i + 1].text == null && n[i].row + 1 < o.length && o[n[i].row + 1].text == null && 1176 | n[i + 1] == o[n[i].row + 1]) { 1177 | n[i + 1] = { 1178 | text: n[i + 1], 1179 | row: n[i].row + 1 1180 | }; 1181 | o[n[i].row + 1] = { 1182 | text: o[n[i].row + 1], 1183 | row: i + 1 1184 | }; 1185 | } 1186 | } 1187 | 1188 | for (var i = n.length - 1; i > 0; i--) { 1189 | if (n[i].text != null && n[i - 1].text == null && n[i].row > 0 && o[n[i].row - 1].text == null && 1190 | n[i - 1] == o[n[i].row - 1]) { 1191 | n[i - 1] = { 1192 | text: n[i - 1], 1193 | row: n[i].row - 1 1194 | }; 1195 | o[n[i].row - 1] = { 1196 | text: o[n[i].row - 1], 1197 | row: i - 1 1198 | }; 1199 | } 1200 | } 1201 | 1202 | return { 1203 | o: o, 1204 | n: n 1205 | }; 1206 | } 1207 | 1208 | return function(o, n){ 1209 | o = o.replace(/\s+$/, ''); 1210 | n = n.replace(/\s+$/, ''); 1211 | var out = diff(o == "" ? [] : o.split(/\s+/), n == "" ? [] : n.split(/\s+/)); 1212 | 1213 | var str = ""; 1214 | 1215 | var oSpace = o.match(/\s+/g); 1216 | if (oSpace == null) { 1217 | oSpace = [" "]; 1218 | } 1219 | else { 1220 | oSpace.push(" "); 1221 | } 1222 | var nSpace = n.match(/\s+/g); 1223 | if (nSpace == null) { 1224 | nSpace = [" "]; 1225 | } 1226 | else { 1227 | nSpace.push(" "); 1228 | } 1229 | 1230 | if (out.n.length == 0) { 1231 | for (var i = 0; i < out.o.length; i++) { 1232 | str += '' + out.o[i] + oSpace[i] + ""; 1233 | } 1234 | } 1235 | else { 1236 | if (out.n[0].text == null) { 1237 | for (n = 0; n < out.o.length && out.o[n].text == null; n++) { 1238 | str += '' + out.o[n] + oSpace[n] + ""; 1239 | } 1240 | } 1241 | 1242 | for (var i = 0; i < out.n.length; i++) { 1243 | if (out.n[i].text == null) { 1244 | str += '' + out.n[i] + nSpace[i] + ""; 1245 | } 1246 | else { 1247 | var pre = ""; 1248 | 1249 | for (n = out.n[i].row + 1; n < out.o.length && out.o[n].text == null; n++) { 1250 | pre += '' + out.o[n] + oSpace[n] + ""; 1251 | } 1252 | str += " " + out.n[i].text + nSpace[i] + pre; 1253 | } 1254 | } 1255 | } 1256 | 1257 | return str; 1258 | } 1259 | })(); 1260 | 1261 | })(this); 1262 | --------------------------------------------------------------------------------