[80] | 1 | /* |
---|
| 2 | Script: Moo.js |
---|
| 3 | My Object Oriented javascript. |
---|
| 4 | |
---|
| 5 | Author: |
---|
| 6 | Valerio Proietti, <http://mad4milk.net> |
---|
| 7 | |
---|
| 8 | License: |
---|
| 9 | MIT-style license. |
---|
| 10 | |
---|
| 11 | Credits: |
---|
| 12 | - Class is slightly based on Base.js <http://dean.edwards.name/weblog/2006/03/base/> (c) 2006 Dean Edwards, License <http://creativecommons.org/licenses/LGPL/2.1/> |
---|
| 13 | - Some functions are based on those found in prototype.js <http://prototype.conio.net/> (c) 2005 Sam Stephenson sam [at] conio [dot] net, MIT-style license |
---|
| 14 | - Documentation by Aaron Newton (aaron.newton [at] cnet [dot] com) and Valerio Proietti. |
---|
| 15 | */ |
---|
| 16 | |
---|
| 17 | /* |
---|
| 18 | Class: Class |
---|
| 19 | The base class object of the <http://mootools.net> framework. |
---|
| 20 | |
---|
| 21 | Arguments: |
---|
| 22 | properties - the collection of properties that apply to the class. Creates a new class, its initialize method will fire upon class instantiation. |
---|
| 23 | |
---|
| 24 | Example: |
---|
| 25 | (start code) |
---|
| 26 | var Cat = new Class({ |
---|
| 27 | initialize: function(name){ |
---|
| 28 | this.name = name; |
---|
| 29 | } |
---|
| 30 | }); |
---|
| 31 | var myCat = new Cat('Micia'); |
---|
| 32 | alert myCat.name; //alerts 'Micia' |
---|
| 33 | (end) |
---|
| 34 | */ |
---|
| 35 | |
---|
| 36 | var Class = function(properties){ |
---|
| 37 | var klass = function(){ |
---|
| 38 | if (this.initialize && arguments[0] != 'noinit') return this.initialize.apply(this, arguments); |
---|
| 39 | else return this; |
---|
| 40 | }; |
---|
| 41 | for (var property in this) klass[property] = this[property]; |
---|
| 42 | klass.prototype = properties; |
---|
| 43 | return klass; |
---|
| 44 | }; |
---|
| 45 | |
---|
| 46 | /* |
---|
| 47 | Property: empty |
---|
| 48 | Returns an empty function |
---|
| 49 | */ |
---|
| 50 | |
---|
| 51 | Class.empty = function(){}; |
---|
| 52 | |
---|
| 53 | Class.prototype = { |
---|
| 54 | |
---|
| 55 | /* |
---|
| 56 | Property: extend |
---|
| 57 | Returns the copy of the Class extended with the passed in properties. |
---|
| 58 | |
---|
| 59 | Arguments: |
---|
| 60 | properties - the properties to add to the base class in this new Class. |
---|
| 61 | |
---|
| 62 | Example: |
---|
| 63 | (start code) |
---|
| 64 | var Animal = new Class({ |
---|
| 65 | initialize: function(age){ |
---|
| 66 | this.age = age; |
---|
| 67 | } |
---|
| 68 | }); |
---|
| 69 | var Cat = Animal.extend({ |
---|
| 70 | initialize: function(name, age){ |
---|
| 71 | this.parent(age); //will call the previous initialize; |
---|
| 72 | this.name = name; |
---|
| 73 | } |
---|
| 74 | }); |
---|
| 75 | var myCat = new Cat('Micia', 20); |
---|
| 76 | alert myCat.name; //alerts 'Micia' |
---|
| 77 | alert myCat.age; //alerts 20 |
---|
| 78 | (end) |
---|
| 79 | */ |
---|
| 80 | |
---|
| 81 | extend: function(properties){ |
---|
| 82 | var pr0t0typ3 = new this('noinit'); |
---|
| 83 | |
---|
| 84 | var parentize = function(previous, current){ |
---|
| 85 | if (!previous.apply || !current.apply) return false; |
---|
| 86 | return function(){ |
---|
| 87 | this.parent = previous; |
---|
| 88 | return current.apply(this, arguments); |
---|
| 89 | }; |
---|
| 90 | }; |
---|
| 91 | |
---|
| 92 | for (var property in properties){ |
---|
| 93 | var previous = pr0t0typ3[property]; |
---|
| 94 | var current = properties[property]; |
---|
| 95 | if (previous && previous != current) current = parentize(previous, current) || current; |
---|
| 96 | pr0t0typ3[property] = current; |
---|
| 97 | } |
---|
| 98 | return new Class(pr0t0typ3); |
---|
| 99 | }, |
---|
| 100 | |
---|
| 101 | /* |
---|
| 102 | Property: implement |
---|
| 103 | Implements the passed in properties to the base Class prototypes, altering the base class, unlike <Class.extend>. |
---|
| 104 | |
---|
| 105 | Arguments: |
---|
| 106 | properties - the properties to add to the base class. |
---|
| 107 | |
---|
| 108 | Example: |
---|
| 109 | (start code) |
---|
| 110 | var Animal = new Class({ |
---|
| 111 | initialize: function(age){ |
---|
| 112 | this.age = age; |
---|
| 113 | } |
---|
| 114 | }); |
---|
| 115 | Animal.implement({ |
---|
| 116 | setName: function(name){ |
---|
| 117 | this.name = name |
---|
| 118 | } |
---|
| 119 | }); |
---|
| 120 | var myAnimal = new Animal(20); |
---|
| 121 | myAnimal.setName('Micia'); |
---|
| 122 | alert(myAnimal.name); //alerts 'Micia' |
---|
| 123 | (end) |
---|
| 124 | */ |
---|
| 125 | |
---|
| 126 | implement: function(properties){ |
---|
| 127 | for (var property in properties) this.prototype[property] = properties[property]; |
---|
| 128 | } |
---|
| 129 | |
---|
| 130 | }; |
---|
| 131 | |
---|
| 132 | /* Section: Object related Functions */ |
---|
| 133 | |
---|
| 134 | /* |
---|
| 135 | Function: Object.extend |
---|
| 136 | Copies all the properties from the second passed object to the first passed Object. |
---|
| 137 | If you do myWhatever.extend = Object.extend the first parameter will become myWhatever, and your extend function will only need one parameter. |
---|
| 138 | |
---|
| 139 | Example: |
---|
| 140 | (start code) |
---|
| 141 | var firstOb = { |
---|
| 142 | 'name': 'John', |
---|
| 143 | 'lastName': 'Doe' |
---|
| 144 | }; |
---|
| 145 | var secondOb = { |
---|
| 146 | 'age': '20', |
---|
| 147 | 'sex': 'male', |
---|
| 148 | 'lastName': 'Dorian' |
---|
| 149 | }; |
---|
| 150 | Object.extend(firstOb, secondOb); |
---|
| 151 | //firstOb will become: |
---|
| 152 | { |
---|
| 153 | 'name': 'John', |
---|
| 154 | 'lastName': 'Dorian', |
---|
| 155 | 'age': '20', |
---|
| 156 | 'sex': 'male' |
---|
| 157 | }; |
---|
| 158 | (end) |
---|
| 159 | |
---|
| 160 | Returns: |
---|
| 161 | The first object, extended. |
---|
| 162 | */ |
---|
| 163 | |
---|
| 164 | Object.extend = function(){ |
---|
| 165 | var args = arguments; |
---|
| 166 | args = (args[1]) ? [args[0], args[1]] : [this, args[0]]; |
---|
| 167 | for (var property in args[1]) args[0][property] = args[1][property]; |
---|
| 168 | return args[0]; |
---|
| 169 | }; |
---|
| 170 | |
---|
| 171 | /* |
---|
| 172 | Function: Object.Native |
---|
| 173 | Will add a .extend method to the objects passed as a parameter, equivalent to <Class.implement> |
---|
| 174 | |
---|
| 175 | Arguments: |
---|
| 176 | a number of classes/native javascript objects |
---|
| 177 | |
---|
| 178 | */ |
---|
| 179 | |
---|
| 180 | Object.Native = function(){ |
---|
| 181 | for (var i = 0; i < arguments.length; i++) arguments[i].extend = Class.prototype.implement; |
---|
| 182 | }; |
---|
| 183 | |
---|
| 184 | new Object.Native(Function, Array, String, Number, Class); |
---|
| 185 | |
---|
| 186 | /* |
---|
| 187 | Script: Utility.js |
---|
| 188 | Contains Utility functions |
---|
| 189 | |
---|
| 190 | Author: |
---|
| 191 | Valerio Proietti, <http://mad4milk.net> |
---|
| 192 | |
---|
| 193 | License: |
---|
| 194 | MIT-style license. |
---|
| 195 | */ |
---|
| 196 | |
---|
| 197 | //htmlelement mapping |
---|
| 198 | |
---|
| 199 | if (typeof HTMLElement == 'undefined'){ |
---|
| 200 | var HTMLElement = Class.empty; |
---|
| 201 | HTMLElement.prototype = {}; |
---|
| 202 | } |
---|
| 203 | |
---|
| 204 | /* |
---|
| 205 | Function: $type |
---|
| 206 | Returns the type of object that matches the element passed in. |
---|
| 207 | |
---|
| 208 | Arguments: |
---|
| 209 | obj - the object to inspect. |
---|
| 210 | |
---|
| 211 | Example: |
---|
| 212 | >var myString = 'hello'; |
---|
| 213 | >$type(myString); //returns "string" |
---|
| 214 | |
---|
| 215 | Returns: |
---|
| 216 | 'element' - if obj is a DOM element node |
---|
| 217 | 'textnode' - if obj is a DOM text node |
---|
| 218 | 'whitespace' - if obj is a DOM whitespace node |
---|
| 219 | 'array' - if obj is an array |
---|
| 220 | 'object' - if obj is an object |
---|
| 221 | 'string' - if obj is a string |
---|
| 222 | 'number' - if obj is a number |
---|
| 223 | 'boolean' - if obj is a boolean |
---|
| 224 | 'function' - if obj is a function |
---|
| 225 | false - (boolean) if the object is not defined or none of the above. |
---|
| 226 | */ |
---|
| 227 | |
---|
| 228 | function $type(obj){ |
---|
| 229 | if (obj === null || obj === undefined) return false; |
---|
| 230 | var type = typeof obj; |
---|
| 231 | if (type == 'object'){ |
---|
| 232 | if (obj instanceof HTMLElement) return 'element'; |
---|
| 233 | if (obj instanceof Array) return 'array'; |
---|
| 234 | if (obj.nodeName){ |
---|
| 235 | switch (obj.nodeType){ |
---|
| 236 | case 1: return 'element'; |
---|
| 237 | case 3: return obj.nodeValue.test('\\S') ? 'textnode' : 'whitespace'; |
---|
| 238 | } |
---|
| 239 | } |
---|
| 240 | } |
---|
| 241 | return type; |
---|
| 242 | }; |
---|
| 243 | |
---|
| 244 | /* |
---|
| 245 | Function: $chk |
---|
| 246 | Returns true if the passed in value/object exists or is 0, otherwise returns false. |
---|
| 247 | Useful to accept zeroes. |
---|
| 248 | */ |
---|
| 249 | |
---|
| 250 | function $chk(obj){ |
---|
| 251 | return !!(obj || obj === 0); |
---|
| 252 | }; |
---|
| 253 | |
---|
| 254 | /* |
---|
| 255 | Function: $pick |
---|
| 256 | Returns the first object if defined, otherwise returns the second. |
---|
| 257 | */ |
---|
| 258 | |
---|
| 259 | function $pick(obj, picked){ |
---|
| 260 | return ($type(obj)) ? obj : picked; |
---|
| 261 | }; |
---|
| 262 | |
---|
| 263 | /* |
---|
| 264 | Function: $random |
---|
| 265 | Returns a random integer number between the two passed in values. |
---|
| 266 | |
---|
| 267 | Arguments: |
---|
| 268 | min - integer, the minimum value (inclusive). |
---|
| 269 | max - integer, the maximum value (inclusive). |
---|
| 270 | |
---|
| 271 | Returns: |
---|
| 272 | a random integer between min and max. |
---|
| 273 | */ |
---|
| 274 | |
---|
| 275 | function $random(min, max){ |
---|
| 276 | return Math.floor(Math.random() * (max - min + 1) + min); |
---|
| 277 | }; |
---|
| 278 | |
---|
| 279 | /* |
---|
| 280 | Function: $clear |
---|
| 281 | clears a timeout or an Interval. |
---|
| 282 | |
---|
| 283 | Returns: |
---|
| 284 | null |
---|
| 285 | |
---|
| 286 | Arguments: |
---|
| 287 | timer - the setInterval or setTimeout to clear. |
---|
| 288 | |
---|
| 289 | Example: |
---|
| 290 | >var myTimer = myFunction.delay(5000); //wait 5 seconds and execute my function. |
---|
| 291 | >myTimer = $clear(myTimer); //nevermind |
---|
| 292 | |
---|
| 293 | See also: |
---|
| 294 | <Function.delay>, <Function.periodical> |
---|
| 295 | */ |
---|
| 296 | |
---|
| 297 | function $clear(timer){ |
---|
| 298 | clearTimeout(timer); |
---|
| 299 | clearInterval(timer); |
---|
| 300 | return null; |
---|
| 301 | }; |
---|
| 302 | |
---|
| 303 | /* Section: Browser Detection */ |
---|
| 304 | |
---|
| 305 | /* |
---|
| 306 | Properties: |
---|
| 307 | window.ie - will be set to true if the current browser is internet explorer (any). |
---|
| 308 | window.ie6 - will be set to true if the current browser is internet explorer 6. |
---|
| 309 | window.ie7 - will be set to true if the current browser is internet explorer 7. |
---|
| 310 | window.khtml - will be set to true if the current browser is Safari/Konqueror. |
---|
| 311 | window.gecko - will be set to true if the current browser is Mozilla/Gecko. |
---|
| 312 | */ |
---|
| 313 | |
---|
| 314 | if (window.ActiveXObject) window.ie = window[window.XMLHttpRequest ? 'ie7' : 'ie6'] = true; |
---|
| 315 | else if (document.childNodes && !document.all && !navigator.taintEnabled) window.khtml = true; |
---|
| 316 | else if (document.getBoxObjectFor != null) window.gecko = true; |
---|
| 317 | |
---|
| 318 | /* |
---|
| 319 | Script: Array.js |
---|
| 320 | Contains Array prototypes and the function <$A>; |
---|
| 321 | |
---|
| 322 | Author: |
---|
| 323 | Valerio Proietti, <http://mad4milk.net> |
---|
| 324 | |
---|
| 325 | License: |
---|
| 326 | MIT-style license. |
---|
| 327 | */ |
---|
| 328 | |
---|
| 329 | /* |
---|
| 330 | Class: Array |
---|
| 331 | A collection of The Array Object prototype methods. |
---|
| 332 | */ |
---|
| 333 | |
---|
| 334 | //emulated methods |
---|
| 335 | |
---|
| 336 | /* |
---|
| 337 | Property: forEach |
---|
| 338 | Iterates through an array; This method is only available for browsers without native *forEach* support. |
---|
| 339 | For more info see <http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:forEach> |
---|
| 340 | */ |
---|
| 341 | |
---|
| 342 | Array.prototype.forEach = Array.prototype.forEach || function(fn, bind){ |
---|
| 343 | for (var i = 0; i < this.length; i++) fn.call(bind, this[i], i, this); |
---|
| 344 | }; |
---|
| 345 | |
---|
| 346 | /* |
---|
| 347 | Property: map |
---|
| 348 | This method is provided only for browsers without native *map* support. |
---|
| 349 | For more info see <http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:map> |
---|
| 350 | */ |
---|
| 351 | |
---|
| 352 | Array.prototype.map = Array.prototype.map || function(fn, bind){ |
---|
| 353 | var results = []; |
---|
| 354 | for (var i = 0; i < this.length; i++) results[i] = fn.call(bind, this[i], i, this); |
---|
| 355 | return results; |
---|
| 356 | }; |
---|
| 357 | |
---|
| 358 | /* |
---|
| 359 | Property: every |
---|
| 360 | This method is provided only for browsers without native *every* support. |
---|
| 361 | For more info see <http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:every> |
---|
| 362 | */ |
---|
| 363 | |
---|
| 364 | Array.prototype.every = Array.prototype.every || function(fn, bind){ |
---|
| 365 | for (var i = 0; i < this.length; i++){ |
---|
| 366 | if (!fn.call(bind, this[i], i, this)) return false; |
---|
| 367 | } |
---|
| 368 | return true; |
---|
| 369 | }; |
---|
| 370 | |
---|
| 371 | /* |
---|
| 372 | Property: some |
---|
| 373 | This method is provided only for browsers without native *some* support. |
---|
| 374 | For more info see <http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:some> |
---|
| 375 | */ |
---|
| 376 | |
---|
| 377 | Array.prototype.some = Array.prototype.some || function(fn, bind){ |
---|
| 378 | for (var i = 0; i < this.length; i++){ |
---|
| 379 | if (fn.call(bind, this[i], i, this)) return true; |
---|
| 380 | } |
---|
| 381 | return false; |
---|
| 382 | }; |
---|
| 383 | |
---|
| 384 | /* |
---|
| 385 | Property: indexOf |
---|
| 386 | This method is provided only for browsers without native *indexOf* support. |
---|
| 387 | For more info see <http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:Array:indexOf> |
---|
| 388 | */ |
---|
| 389 | |
---|
| 390 | Array.prototype.indexOf = Array.prototype.indexOf || function(item, from){ |
---|
| 391 | from = from || 0; |
---|
| 392 | if (from < 0) from = Math.max(0, this.length + from); |
---|
| 393 | while (from < this.length){ |
---|
| 394 | if(this[from] === item) return from; |
---|
| 395 | from++; |
---|
| 396 | } |
---|
| 397 | return -1; |
---|
| 398 | }; |
---|
| 399 | |
---|
| 400 | //custom methods |
---|
| 401 | |
---|
| 402 | Array.extend({ |
---|
| 403 | |
---|
| 404 | /* |
---|
| 405 | Property: each |
---|
| 406 | Same as <Array.forEach>. |
---|
| 407 | |
---|
| 408 | Arguments: |
---|
| 409 | fn - the function to execute with each item in the array |
---|
| 410 | bind - optional, the object that the "this" of the function will refer to. |
---|
| 411 | |
---|
| 412 | Example: |
---|
| 413 | >var Animals = ['Cat', 'Dog', 'Coala']; |
---|
| 414 | >Animals.forEach(function(animal){ |
---|
| 415 | > document.write(animal) |
---|
| 416 | >}); |
---|
| 417 | */ |
---|
| 418 | |
---|
| 419 | each: Array.prototype.forEach, |
---|
| 420 | |
---|
| 421 | /* |
---|
| 422 | Property: copy |
---|
| 423 | Copy the array and returns it. |
---|
| 424 | |
---|
| 425 | Returns: |
---|
| 426 | an Array |
---|
| 427 | |
---|
| 428 | Example: |
---|
| 429 | >var letters = ["a","b","c"]; |
---|
| 430 | >var copy = ["a","b","c"].copy(); |
---|
| 431 | */ |
---|
| 432 | |
---|
| 433 | copy: function(){ |
---|
| 434 | var newArray = []; |
---|
| 435 | for (var i = 0; i < this.length; i++) newArray[i] = this[i]; |
---|
| 436 | return newArray; |
---|
| 437 | }, |
---|
| 438 | |
---|
| 439 | /* |
---|
| 440 | Property: remove |
---|
| 441 | Removes all occurrences of an item from the array. |
---|
| 442 | |
---|
| 443 | Arguments: |
---|
| 444 | item - the item to remove |
---|
| 445 | |
---|
| 446 | Returns: |
---|
| 447 | the Array with all occurrences of the item removed. |
---|
| 448 | |
---|
| 449 | Example: |
---|
| 450 | >["1","2","3","2"].remove("2") // ["1","3"]; |
---|
| 451 | */ |
---|
| 452 | |
---|
| 453 | remove: function(item){ |
---|
| 454 | var i = 0; |
---|
| 455 | while (i < this.length){ |
---|
| 456 | if (this[i] == item) this.splice(i, 1); |
---|
| 457 | else i++; |
---|
| 458 | } |
---|
| 459 | return this; |
---|
| 460 | }, |
---|
| 461 | |
---|
| 462 | /* |
---|
| 463 | Property: test |
---|
| 464 | Tests an array for the presence of an item. |
---|
| 465 | |
---|
| 466 | Arguments: |
---|
| 467 | item - the item to search for in the array. |
---|
| 468 | from - optional, the index at which to begin the search, default is 0. If negative, it is taken as the offset from the end of the array. |
---|
| 469 | |
---|
| 470 | Returns: |
---|
| 471 | true - the item was found |
---|
| 472 | false - it wasn't |
---|
| 473 | |
---|
| 474 | Example: |
---|
| 475 | >["a","b","c"].test("a"); // true |
---|
| 476 | >["a","b","c"].test("d"); // false |
---|
| 477 | */ |
---|
| 478 | |
---|
| 479 | test: function(item, from){ |
---|
| 480 | return this.indexOf(item, from) != -1; |
---|
| 481 | }, |
---|
| 482 | |
---|
| 483 | /* |
---|
| 484 | Property: extend |
---|
| 485 | Extends an array with another |
---|
| 486 | |
---|
| 487 | Arguments: |
---|
| 488 | newArray - the array to extend ours with |
---|
| 489 | |
---|
| 490 | Example: |
---|
| 491 | >var Animals = ['Cat', 'Dog', 'Coala']; |
---|
| 492 | >Animals.extend(['Lizard']); |
---|
| 493 | >//Animals is now: ['Cat', 'Dog', 'Coala', 'Lizard']; |
---|
| 494 | */ |
---|
| 495 | |
---|
| 496 | extend: function(newArray){ |
---|
| 497 | for (var i = 0; i < newArray.length; i++) this.push(newArray[i]); |
---|
| 498 | return this; |
---|
| 499 | }, |
---|
| 500 | |
---|
| 501 | /* |
---|
| 502 | Property: associate |
---|
| 503 | Creates an object with key-value pairs based on the array of keywords passed in |
---|
| 504 | and the current content of the array. |
---|
| 505 | |
---|
| 506 | Arguments: |
---|
| 507 | keys - the array of keywords. |
---|
| 508 | |
---|
| 509 | Example: |
---|
| 510 | (start code) |
---|
| 511 | var Animals = ['Cat', 'Dog', 'Coala', 'Lizard']; |
---|
| 512 | var Speech = ['Miao', 'Bau', 'Fruuu', 'Mute']; |
---|
| 513 | var Speeches = Animals.associate(speech); |
---|
| 514 | //Speeches['Miao'] is now Cat. |
---|
| 515 | //Speeches['Bau'] is now Dog. |
---|
| 516 | //... |
---|
| 517 | (end) |
---|
| 518 | */ |
---|
| 519 | |
---|
| 520 | associate: function(keys){ |
---|
| 521 | var obj = {}, length = Math.min(this.length, keys.length); |
---|
| 522 | for (var i = 0; i < length; i++) obj[keys[i]] = this[i]; |
---|
| 523 | return obj; |
---|
| 524 | } |
---|
| 525 | |
---|
| 526 | }); |
---|
| 527 | |
---|
| 528 | /* Section: Utility Functions */ |
---|
| 529 | |
---|
| 530 | /* |
---|
| 531 | Function: $A() |
---|
| 532 | Same as <Array.copy>, but as function. |
---|
| 533 | Useful to apply Array prototypes to iterable objects, as a collection of DOM elements or the arguments object. |
---|
| 534 | |
---|
| 535 | Example: |
---|
| 536 | (start code) |
---|
| 537 | function myFunction(){ |
---|
| 538 | $A(arguments).each(argument, function(){ |
---|
| 539 | alert(argument); |
---|
| 540 | }); |
---|
| 541 | }; |
---|
| 542 | //the above will alert all the arguments passed to the function myFunction. |
---|
| 543 | (end) |
---|
| 544 | */ |
---|
| 545 | |
---|
| 546 | function $A(array){ |
---|
| 547 | return Array.prototype.copy.call(array); |
---|
| 548 | }; |
---|
| 549 | |
---|
| 550 | /* |
---|
| 551 | Function: $each |
---|
| 552 | use to iterate through iterables that are not regular arrays, such as builtin getElementsByTagName calls, or arguments of a function. |
---|
| 553 | |
---|
| 554 | Arguments: |
---|
| 555 | iterable - an iterable element. |
---|
| 556 | function - function to apply to the iterable. |
---|
| 557 | bind - optional, the 'this' of the function will refer to this object. |
---|
| 558 | */ |
---|
| 559 | |
---|
| 560 | function $each(iterable, fn, bind){ |
---|
| 561 | return Array.prototype.forEach.call(iterable, fn, bind); |
---|
| 562 | }; |
---|
| 563 | |
---|
| 564 | /* |
---|
| 565 | Script: String.js |
---|
| 566 | Contains String prototypes and Number prototypes. |
---|
| 567 | |
---|
| 568 | Author: |
---|
| 569 | Valerio Proietti, <http://mad4milk.net> |
---|
| 570 | |
---|
| 571 | License: |
---|
| 572 | MIT-style license. |
---|
| 573 | */ |
---|
| 574 | |
---|
| 575 | /* |
---|
| 576 | Class: String |
---|
| 577 | A collection of The String Object prototype methods. |
---|
| 578 | */ |
---|
| 579 | |
---|
| 580 | String.extend({ |
---|
| 581 | |
---|
| 582 | /* |
---|
| 583 | Property: test |
---|
| 584 | Tests a string with a regular expression. |
---|
| 585 | |
---|
| 586 | Arguments: |
---|
| 587 | regex - the regular expression you want to match the string with |
---|
| 588 | params - optional, any parameters you want to pass to the regex ('g' has no effect) |
---|
| 589 | |
---|
| 590 | Returns: |
---|
| 591 | true if a match for the regular expression is found in the string, false if not. |
---|
| 592 | See <http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Objects:RegExp:test> |
---|
| 593 | |
---|
| 594 | Example: |
---|
| 595 | >"I like cookies".test("cookie"); // returns true |
---|
| 596 | >"I like cookies".test("COOKIE", "i") // ignore case, returns true |
---|
| 597 | >"I like cookies".test("cake"); // returns false |
---|
| 598 | */ |
---|
| 599 | |
---|
| 600 | test: function(regex, params){ |
---|
| 601 | return new RegExp(regex, params).test(this); |
---|
| 602 | }, |
---|
| 603 | |
---|
| 604 | /* |
---|
| 605 | Property: toInt |
---|
| 606 | parses a string to an integer. |
---|
| 607 | |
---|
| 608 | Returns: |
---|
| 609 | either an int or "NaN" if the string is not a number. |
---|
| 610 | |
---|
| 611 | Example: |
---|
| 612 | >var value = "10px".toInt(); // value is 10 |
---|
| 613 | */ |
---|
| 614 | |
---|
| 615 | toInt: function(){ |
---|
| 616 | return parseInt(this); |
---|
| 617 | }, |
---|
| 618 | |
---|
| 619 | toFloat: function(){ |
---|
| 620 | return parseFloat(this); |
---|
| 621 | }, |
---|
| 622 | |
---|
| 623 | /* |
---|
| 624 | Property: camelCase |
---|
| 625 | Converts a hiphenated string to a camelcase string. |
---|
| 626 | |
---|
| 627 | Example: |
---|
| 628 | >"I-like-cookies".camelCase(); //"ILikeCookies" |
---|
| 629 | |
---|
| 630 | Returns: |
---|
| 631 | the camel cased string |
---|
| 632 | */ |
---|
| 633 | |
---|
| 634 | camelCase: function(){ |
---|
| 635 | return this.replace(/-\D/g, function(match){ |
---|
| 636 | return match.charAt(1).toUpperCase(); |
---|
| 637 | }); |
---|
| 638 | }, |
---|
| 639 | |
---|
| 640 | /* |
---|
| 641 | Property: hyphenate |
---|
| 642 | Converts a camelCased string to a hyphen-ated string. |
---|
| 643 | |
---|
| 644 | Example: |
---|
| 645 | >"ILikeCookies".hyphenate(); //"I-like-cookies" |
---|
| 646 | */ |
---|
| 647 | |
---|
| 648 | hyphenate: function(){ |
---|
| 649 | return this.replace(/\w[A-Z]/g, function(match){ |
---|
| 650 | return (match.charAt(0)+'-'+match.charAt(1).toLowerCase()); |
---|
| 651 | }); |
---|
| 652 | }, |
---|
| 653 | |
---|
| 654 | /* |
---|
| 655 | Property: capitalize |
---|
| 656 | Converts the first letter in each word of a string to Uppercase. |
---|
| 657 | |
---|
| 658 | Example: |
---|
| 659 | >"i like cookies".capitalize(); //"I Like Cookies" |
---|
| 660 | |
---|
| 661 | Returns: |
---|
| 662 | the capitalized string |
---|
| 663 | */ |
---|
| 664 | |
---|
| 665 | capitalize: function(){ |
---|
| 666 | return this.toLowerCase().replace(/\b[a-z]/g, function(match){ |
---|
| 667 | return match.toUpperCase(); |
---|
| 668 | }); |
---|
| 669 | }, |
---|
| 670 | |
---|
| 671 | /* |
---|
| 672 | Property: trim |
---|
| 673 | Trims the leading and trailing spaces off a string. |
---|
| 674 | |
---|
| 675 | Example: |
---|
| 676 | >" i like cookies ".trim() //"i like cookies" |
---|
| 677 | |
---|
| 678 | Returns: |
---|
| 679 | the trimmed string |
---|
| 680 | */ |
---|
| 681 | |
---|
| 682 | trim: function(){ |
---|
| 683 | return this.replace(/^\s+|\s+$/g, ''); |
---|
| 684 | }, |
---|
| 685 | |
---|
| 686 | /* |
---|
| 687 | Property: clean |
---|
| 688 | trims (<String.trim>) a string AND removes all the double spaces in a string. |
---|
| 689 | |
---|
| 690 | Returns: |
---|
| 691 | the cleaned string |
---|
| 692 | |
---|
| 693 | Example: |
---|
| 694 | >" i like cookies \n\n".clean() //"i like cookies" |
---|
| 695 | */ |
---|
| 696 | |
---|
| 697 | clean: function(){ |
---|
| 698 | return this.replace(/\s{2,}/g, ' ').trim(); |
---|
| 699 | }, |
---|
| 700 | |
---|
| 701 | /* |
---|
| 702 | Property: rgbToHex |
---|
| 703 | Converts an RGB value to hexidecimal. The string must be in the format of "rgb(255, 255, 255)" or "rgba(255, 255, 255, 1)"; |
---|
| 704 | |
---|
| 705 | Arguments: |
---|
| 706 | array - boolean value, defaults to false. Use true if you want the array ['FF', '33', '00'] as output instead of #FF3300 |
---|
| 707 | |
---|
| 708 | Returns: |
---|
| 709 | hex string or array. returns transparent if the fourth value of rgba in input string is 0, |
---|
| 710 | |
---|
| 711 | Example: |
---|
| 712 | >"rgb(17,34,51)".rgbToHex(); //"#112233" |
---|
| 713 | >"rgba(17,34,51,0)".rgbToHex(); //"transparent" |
---|
| 714 | >"rgb(17,34,51)".rgbToHex(true); //[11,22,33] |
---|
| 715 | */ |
---|
| 716 | |
---|
| 717 | rgbToHex: function(array){ |
---|
| 718 | var rgb = this.match(/\d{1,3}/g); |
---|
| 719 | return (rgb) ? rgb.rgbToHex(array) : false; |
---|
| 720 | }, |
---|
| 721 | |
---|
| 722 | /* |
---|
| 723 | Property: hexToRgb |
---|
| 724 | Converts a hexidecimal color value to RGB. Input string must be the hex color value (with or without the hash). Also accepts triplets ('333'); |
---|
| 725 | |
---|
| 726 | Arguments: |
---|
| 727 | array - boolean value, defaults to false. Use true if you want the array ['255', '255', '255'] as output instead of "rgb(255,255,255)"; |
---|
| 728 | |
---|
| 729 | Returns: |
---|
| 730 | rgb string or array. |
---|
| 731 | |
---|
| 732 | Example: |
---|
| 733 | >"#112233".hexToRgb(); //"rgb(17,34,51)" |
---|
| 734 | >"#112233".hexToRgb(true); //[17,34,51] |
---|
| 735 | */ |
---|
| 736 | |
---|
| 737 | hexToRgb: function(array){ |
---|
| 738 | var hex = this.match('^#?(\\w{1,2})(\\w{1,2})(\\w{1,2})$'); |
---|
| 739 | return (hex) ? hex.hexToRgb(array) : false; |
---|
| 740 | } |
---|
| 741 | |
---|
| 742 | }); |
---|
| 743 | |
---|
| 744 | Array.extend({ |
---|
| 745 | |
---|
| 746 | rgbToHex: function(array){ |
---|
| 747 | if (this.length < 3) return false; |
---|
| 748 | if (this[3] && this[3] == 0) return 'transparent'; |
---|
| 749 | var hex = []; |
---|
| 750 | for (var i = 0; i < 3; i++){ |
---|
| 751 | var bit = (this[i]-0).toString(16); |
---|
| 752 | hex.push(bit.length == 1 ? '0'+bit : bit); |
---|
| 753 | } |
---|
| 754 | return array ? hex : '#'+hex.join(''); |
---|
| 755 | }, |
---|
| 756 | |
---|
| 757 | hexToRgb: function(array){ |
---|
| 758 | if (this.length != 4) return false; |
---|
| 759 | var rgb = []; |
---|
| 760 | for (var i = 1; i < 4; i++){ |
---|
| 761 | if (this[i].length == 1) this[i] += this[i]; |
---|
| 762 | rgb.push(parseInt(this[i], 16)); |
---|
| 763 | } |
---|
| 764 | return array ? rgb : 'rgb('+rgb.join(',')+')'; |
---|
| 765 | } |
---|
| 766 | |
---|
| 767 | }); |
---|
| 768 | |
---|
| 769 | /* |
---|
| 770 | Class: Number |
---|
| 771 | contains the internal method toInt. |
---|
| 772 | */ |
---|
| 773 | |
---|
| 774 | Number.extend({ |
---|
| 775 | |
---|
| 776 | /* |
---|
| 777 | Property: toInt |
---|
| 778 | Returns this number; useful because toInt must work on both Strings and Numbers. |
---|
| 779 | */ |
---|
| 780 | |
---|
| 781 | toInt: function(){ |
---|
| 782 | return parseInt(this); |
---|
| 783 | }, |
---|
| 784 | |
---|
| 785 | toFloat: function(){ |
---|
| 786 | return parseFloat(this); |
---|
| 787 | } |
---|
| 788 | |
---|
| 789 | }); |
---|
| 790 | |
---|
| 791 | /* |
---|
| 792 | Script: Function.js |
---|
| 793 | Contains Function prototypes and utility functions . |
---|
| 794 | |
---|
| 795 | Author: |
---|
| 796 | Valerio Proietti, <http://mad4milk.net> |
---|
| 797 | |
---|
| 798 | License: |
---|
| 799 | MIT-style license. |
---|
| 800 | |
---|
| 801 | Credits: |
---|
| 802 | - Some functions are inspired by those found in prototype.js <http://prototype.conio.net/> (c) 2005 Sam Stephenson sam [at] conio [dot] net, MIT-style license |
---|
| 803 | */ |
---|
| 804 | |
---|
| 805 | /* |
---|
| 806 | Class: Function |
---|
| 807 | A collection of The Function Object prototype methods. |
---|
| 808 | */ |
---|
| 809 | |
---|
| 810 | Function.extend({ |
---|
| 811 | |
---|
| 812 | create: function(options){ |
---|
| 813 | var fn = this; |
---|
| 814 | options = Object.extend({ |
---|
| 815 | 'bind': fn, |
---|
| 816 | 'event': false, |
---|
| 817 | 'arguments': null, |
---|
| 818 | 'delay': false, |
---|
| 819 | 'periodical': false, |
---|
| 820 | 'attempt': false |
---|
| 821 | }, options || {}); |
---|
| 822 | if (options.arguments != null && typeof options.arguments != 'undefined' && !(options.arguments instanceof Array)) |
---|
| 823 | options.arguments = [options.arguments]; |
---|
| 824 | return function(event){ |
---|
| 825 | var args = options.arguments || arguments; |
---|
| 826 | if (options.event){ |
---|
| 827 | event = (options.event === true) ? event || window.event : new options.event(event); |
---|
| 828 | args = [event].concat(args); |
---|
| 829 | } |
---|
| 830 | var returns = function(){ |
---|
| 831 | return fn.apply(options.bind, args); |
---|
| 832 | }; |
---|
| 833 | if (options.delay) return setTimeout(returns, options.delay); |
---|
| 834 | if (options.periodical) return setInterval(returns, options.periodical); |
---|
| 835 | if (options.attempt){ |
---|
| 836 | try { |
---|
| 837 | var result = returns(); |
---|
| 838 | } catch(err){ |
---|
| 839 | result = err; |
---|
| 840 | } finally { |
---|
| 841 | return result; |
---|
| 842 | } |
---|
| 843 | } else return returns(); |
---|
| 844 | }; |
---|
| 845 | }, |
---|
| 846 | |
---|
| 847 | /* |
---|
| 848 | Property: pass |
---|
| 849 | Shortcut to create closures with arguments and bind. |
---|
| 850 | |
---|
| 851 | Returns: |
---|
| 852 | a function. |
---|
| 853 | |
---|
| 854 | Arguments: |
---|
| 855 | args - the arguments passed. must be an array if arguments > 1 |
---|
| 856 | bind - optional, the object that the "this" of the function will refer to. |
---|
| 857 | |
---|
| 858 | Example: |
---|
| 859 | >myFunction.pass([arg1, arg2], myElement); |
---|
| 860 | */ |
---|
| 861 | |
---|
| 862 | pass: function(args, bind){ |
---|
| 863 | return this.create({'arguments': args, 'bind': bind}); |
---|
| 864 | }, |
---|
| 865 | |
---|
| 866 | /* |
---|
| 867 | Property: attempt |
---|
| 868 | Tries to execute the function, returns either the function results or the error. |
---|
| 869 | |
---|
| 870 | Arguments: |
---|
| 871 | args - the arguments passed. must be an array if arguments > 1 |
---|
| 872 | bind - optional, the object that the "this" of the function will refer to. |
---|
| 873 | |
---|
| 874 | Example: |
---|
| 875 | >myFunction.attempt([arg1, arg2], myElement); |
---|
| 876 | */ |
---|
| 877 | |
---|
| 878 | attempt: function(args, bind){ |
---|
| 879 | return this.create({'arguments': args, 'bind': bind, 'attempt': true})(); |
---|
| 880 | }, |
---|
| 881 | |
---|
| 882 | /* |
---|
| 883 | Property: bind |
---|
| 884 | method to easily create closures with "this" altered. |
---|
| 885 | |
---|
| 886 | Arguments: |
---|
| 887 | bind - optional, the object that the "this" of the function will refer to. |
---|
| 888 | args - optional, the arguments passed. must be an array if arguments > 1 |
---|
| 889 | |
---|
| 890 | Returns: |
---|
| 891 | a function. |
---|
| 892 | |
---|
| 893 | Example: |
---|
| 894 | >function myFunction(){ |
---|
| 895 | > this.setStyle('color', 'red'); |
---|
| 896 | > // note that 'this' here refers to myFunction, not an element |
---|
| 897 | > // we'll need to bind this function to the element we want to alter |
---|
| 898 | >}; |
---|
| 899 | >var myBoundFunction = myFunction.bind(myElement); |
---|
| 900 | >myBoundFunction(); // this will make the element myElement red. |
---|
| 901 | */ |
---|
| 902 | |
---|
| 903 | bind: function(bind, args){ |
---|
| 904 | return this.create({'bind': bind, 'arguments': args}); |
---|
| 905 | }, |
---|
| 906 | |
---|
| 907 | /* |
---|
| 908 | Property: bindAsEventListener |
---|
| 909 | cross browser method to pass event firer |
---|
| 910 | |
---|
| 911 | Arguments: |
---|
| 912 | bind - optional, the object that the "this" of the function will refer to. |
---|
| 913 | args - optional, the arguments passed. must be an array if arguments > 1 |
---|
| 914 | |
---|
| 915 | Returns: |
---|
| 916 | a function with the parameter bind as its "this" and as a pre-passed argument event or window.event, depending on the browser. |
---|
| 917 | |
---|
| 918 | Example: |
---|
| 919 | >function myFunction(event){ |
---|
| 920 | > alert(event.clientx) //returns the coordinates of the mouse.. |
---|
| 921 | >}; |
---|
| 922 | >myElement.onclick = myFunction.bindAsEventListener(myElement); |
---|
| 923 | */ |
---|
| 924 | |
---|
| 925 | bindAsEventListener: function(bind, args){ |
---|
| 926 | return this.create({'bind': bind, 'event': true, 'arguments': args}); |
---|
| 927 | }, |
---|
| 928 | |
---|
| 929 | /* |
---|
| 930 | Property: delay |
---|
| 931 | Delays the execution of a function by a specified duration. |
---|
| 932 | |
---|
| 933 | Arguments: |
---|
| 934 | ms - the duration to wait in milliseconds |
---|
| 935 | bind - optional, the object that the "this" of the function will refer to. |
---|
| 936 | args - optional, the arguments passed. must be an array if arguments > 1 |
---|
| 937 | |
---|
| 938 | Example: |
---|
| 939 | >myFunction.delay(50, myElement) //wait 50 milliseconds, then call myFunction and bind myElement to it |
---|
| 940 | >(function(){alert('one second later...')}).delay(1000); //wait a second and alert |
---|
| 941 | */ |
---|
| 942 | |
---|
| 943 | delay: function(ms, bind, args){ |
---|
| 944 | return this.create({'delay': ms, 'bind': bind, 'arguments': args})(); |
---|
| 945 | }, |
---|
| 946 | |
---|
| 947 | /* |
---|
| 948 | Property: periodical |
---|
| 949 | Executes a function in the specified intervals of time |
---|
| 950 | |
---|
| 951 | Arguments: |
---|
| 952 | ms - the duration of the intervals between executions. |
---|
| 953 | bind - optional, the object that the "this" of the function will refer to. |
---|
| 954 | args - optional, the arguments passed. must be an array if arguments > 1 |
---|
| 955 | */ |
---|
| 956 | |
---|
| 957 | periodical: function(ms, bind, args){ |
---|
| 958 | return this.create({'periodical': ms, 'bind': bind, 'arguments': args})(); |
---|
| 959 | } |
---|
| 960 | |
---|
| 961 | }); |
---|
| 962 | |
---|
| 963 | /* |
---|
| 964 | Script: Element.js |
---|
| 965 | Contains useful Element prototypes, to be used with the dollar function <$>. |
---|
| 966 | |
---|
| 967 | Author: |
---|
| 968 | Valerio Proietti, <http://mad4milk.net> |
---|
| 969 | |
---|
| 970 | License: |
---|
| 971 | MIT-style license. |
---|
| 972 | |
---|
| 973 | Credits: |
---|
| 974 | - Some functions are inspired by those found in prototype.js <http://prototype.conio.net/> (c) 2005 Sam Stephenson sam [at] conio [dot] net, MIT-style license |
---|
| 975 | */ |
---|
| 976 | |
---|
| 977 | /* |
---|
| 978 | Class: Element |
---|
| 979 | Custom class to allow all of its methods to be used with any DOM element via the dollar function <$>. |
---|
| 980 | */ |
---|
| 981 | |
---|
| 982 | var Element = new Class({ |
---|
| 983 | |
---|
| 984 | /* |
---|
| 985 | Property: initialize |
---|
| 986 | Creates a new element of the type passed in. |
---|
| 987 | |
---|
| 988 | Arguments: |
---|
| 989 | el - the tag name for the element you wish to create. |
---|
| 990 | |
---|
| 991 | Example: |
---|
| 992 | >var div = new Element('div'); |
---|
| 993 | */ |
---|
| 994 | |
---|
| 995 | initialize: function(el){ |
---|
| 996 | if ($type(el) == 'string') el = document.createElement(el); |
---|
| 997 | return $(el); |
---|
| 998 | } |
---|
| 999 | |
---|
| 1000 | }); |
---|
| 1001 | |
---|
| 1002 | /* |
---|
| 1003 | Function: $() |
---|
| 1004 | returns the element passed in with all the Element prototypes applied. |
---|
| 1005 | |
---|
| 1006 | Arguments: |
---|
| 1007 | el - a reference to an actual element or a string representing the id of an element |
---|
| 1008 | |
---|
| 1009 | Example: |
---|
| 1010 | >$('myElement') // gets a DOM element by id with all the Element prototypes applied. |
---|
| 1011 | >var div = document.getElementById('myElement'); |
---|
| 1012 | >$(div) //returns an Element also with all the mootools extentions applied. |
---|
| 1013 | |
---|
| 1014 | You'll use this when you aren't sure if a variable is an actual element or an id, as |
---|
| 1015 | well as just shorthand for document.getElementById(). |
---|
| 1016 | |
---|
| 1017 | Returns: |
---|
| 1018 | a DOM element or false (if no id was found). |
---|
| 1019 | |
---|
| 1020 | Note: |
---|
| 1021 | you need to call $ on an element only once to get all the prototypes. |
---|
| 1022 | But its no harm to call it multiple times, as it will detect if it has been already extended. |
---|
| 1023 | */ |
---|
| 1024 | |
---|
| 1025 | function $(el){ |
---|
| 1026 | if (!el) return false; |
---|
| 1027 | if (el._element_extended_ || [window, document].test(el)) return el; |
---|
| 1028 | if ($type(el) == 'string') el = document.getElementById(el); |
---|
| 1029 | if ($type(el) != 'element') return false; |
---|
| 1030 | if (['object', 'embed'].test(el.tagName.toLowerCase()) || el.extend) return el; |
---|
| 1031 | el._element_extended_ = true; |
---|
| 1032 | Garbage.collect(el); |
---|
| 1033 | el.extend = Object.extend; |
---|
| 1034 | if (!(el instanceof HTMLElement)) el.extend(Element.prototype); |
---|
| 1035 | return el; |
---|
| 1036 | }; |
---|
| 1037 | |
---|
| 1038 | //elements class |
---|
| 1039 | |
---|
| 1040 | var Elements = new Class({}); |
---|
| 1041 | |
---|
| 1042 | new Object.Native(Elements); |
---|
| 1043 | |
---|
| 1044 | document.getElementsBySelector = document.getElementsByTagName; |
---|
| 1045 | |
---|
| 1046 | /* |
---|
| 1047 | Function: $$() |
---|
| 1048 | Selects, and extends DOM elements. |
---|
| 1049 | |
---|
| 1050 | Arguments: |
---|
| 1051 | HTMLCollection(document.getElementsByTagName, element.childNodes), an array of elements, a string. |
---|
| 1052 | |
---|
| 1053 | Note: |
---|
| 1054 | if you loaded <Dom.js>, $$ will also accept CSS Selectors. |
---|
| 1055 | |
---|
| 1056 | Example: |
---|
| 1057 | >$$('a') //an array of all anchor tags on the page |
---|
| 1058 | >$$('a', 'b') //an array of all anchor and bold tags on the page |
---|
| 1059 | >$$('#myElement') //array containing only the element with id = myElement. (only with <Dom.js>) |
---|
| 1060 | >$$('#myElement a.myClass') //an array of all anchor tags with the class "myClass" within the DOM element with id "myElement" (only with <Dom.js>) |
---|
| 1061 | |
---|
| 1062 | Returns: |
---|
| 1063 | array - array of all the dom elements matched |
---|
| 1064 | */ |
---|
| 1065 | |
---|
| 1066 | function $$(){ |
---|
| 1067 | if (!arguments) return false; |
---|
| 1068 | if (arguments.length == 1){ |
---|
| 1069 | if (!arguments[0]) return false; |
---|
| 1070 | if (arguments[0]._elements_extended_) return arguments[0]; |
---|
| 1071 | } |
---|
| 1072 | var elements = []; |
---|
| 1073 | $each(arguments, function(selector){ |
---|
| 1074 | switch ($type(selector)){ |
---|
| 1075 | case 'element': elements.push($(selector)); break; |
---|
| 1076 | case 'string': selector = document.getElementsBySelector(selector); |
---|
| 1077 | default: |
---|
| 1078 | if (selector.length){ |
---|
| 1079 | $each(selector, function(el){ |
---|
| 1080 | if ($(el)) elements.push(el); |
---|
| 1081 | }); |
---|
| 1082 | } |
---|
| 1083 | } |
---|
| 1084 | }); |
---|
| 1085 | elements._elements_extended_ = true; |
---|
| 1086 | return Object.extend(elements, new Elements); |
---|
| 1087 | }; |
---|
| 1088 | |
---|
| 1089 | Elements.Multi = function(property){ |
---|
| 1090 | return function(){ |
---|
| 1091 | var args = arguments; |
---|
| 1092 | var items = []; |
---|
| 1093 | var elements = true; |
---|
| 1094 | $each(this, function(el){ |
---|
| 1095 | var returns = el[property].apply(el, args); |
---|
| 1096 | if ($type(returns) != 'element') elements = false; |
---|
| 1097 | items.push(returns); |
---|
| 1098 | }); |
---|
| 1099 | if (elements) items = $$(items); |
---|
| 1100 | return items; |
---|
| 1101 | }; |
---|
| 1102 | }; |
---|
| 1103 | |
---|
| 1104 | Element.extend = function(properties){ |
---|
| 1105 | for (var property in properties){ |
---|
| 1106 | HTMLElement.prototype[property] = properties[property]; |
---|
| 1107 | Element.prototype[property] = properties[property]; |
---|
| 1108 | Elements.prototype[property] = Elements.Multi(property); |
---|
| 1109 | } |
---|
| 1110 | }; |
---|
| 1111 | |
---|
| 1112 | Element.extend({ |
---|
| 1113 | |
---|
| 1114 | inject: function(el, where){ |
---|
| 1115 | el = $(el) || new Element(el); |
---|
| 1116 | switch (where){ |
---|
| 1117 | case "before": $(el.parentNode).insertBefore(this, el); break; |
---|
| 1118 | case "after": |
---|
| 1119 | if (!el.getNext()) $(el.parentNode).appendChild(this); |
---|
| 1120 | else $(el.parentNode).insertBefore(this, el.getNext()); |
---|
| 1121 | break; |
---|
| 1122 | case "inside": el.appendChild(this); |
---|
| 1123 | } |
---|
| 1124 | return this; |
---|
| 1125 | }, |
---|
| 1126 | |
---|
| 1127 | /* |
---|
| 1128 | Property: injectBefore |
---|
| 1129 | Inserts the Element before the passed element. |
---|
| 1130 | |
---|
| 1131 | Parameteres: |
---|
| 1132 | el - a string representing the element to be injected in (myElementId, or div), or an element reference. |
---|
| 1133 | If you pass div or another tag, the element will be created. |
---|
| 1134 | |
---|
| 1135 | Example: |
---|
| 1136 | >html: |
---|
| 1137 | ><div id="myElement"></div> |
---|
| 1138 | ><div id="mySecondElement"></div> |
---|
| 1139 | >js: |
---|
| 1140 | >$('mySecondElement').injectBefore('myElement'); |
---|
| 1141 | >resulting html: |
---|
| 1142 | ><div id="mySecondElement"></div> |
---|
| 1143 | ><div id="myElement"></div> |
---|
| 1144 | |
---|
| 1145 | */ |
---|
| 1146 | |
---|
| 1147 | injectBefore: function(el){ |
---|
| 1148 | return this.inject(el, 'before'); |
---|
| 1149 | }, |
---|
| 1150 | |
---|
| 1151 | /* |
---|
| 1152 | Property: injectAfter |
---|
| 1153 | Same as <Element.injectBefore>, but inserts the element after. |
---|
| 1154 | */ |
---|
| 1155 | |
---|
| 1156 | injectAfter: function(el){ |
---|
| 1157 | return this.inject(el, 'after'); |
---|
| 1158 | }, |
---|
| 1159 | |
---|
| 1160 | /* |
---|
| 1161 | Property: injectInside |
---|
| 1162 | Same as <Element.injectBefore>, but inserts the element inside. |
---|
| 1163 | */ |
---|
| 1164 | |
---|
| 1165 | injectInside: function(el){ |
---|
| 1166 | return this.inject(el, 'inside'); |
---|
| 1167 | }, |
---|
| 1168 | |
---|
| 1169 | /* |
---|
| 1170 | Property: adopt |
---|
| 1171 | Inserts the passed element inside the Element. Works as <Element.injectInside> but in reverse. |
---|
| 1172 | |
---|
| 1173 | Parameteres: |
---|
| 1174 | el - a string representing the element to be injected in (myElementId, or div), or an element reference. |
---|
| 1175 | If you pass div or another tag, the element will be created. |
---|
| 1176 | */ |
---|
| 1177 | |
---|
| 1178 | adopt: function(el){ |
---|
| 1179 | this.appendChild($(el) || new Element(el)); |
---|
| 1180 | return this; |
---|
| 1181 | }, |
---|
| 1182 | |
---|
| 1183 | /* |
---|
| 1184 | Property: remove |
---|
| 1185 | Removes the Element from the DOM. |
---|
| 1186 | |
---|
| 1187 | Example: |
---|
| 1188 | >$('myElement').remove() //bye bye |
---|
| 1189 | */ |
---|
| 1190 | |
---|
| 1191 | remove: function(){ |
---|
| 1192 | this.parentNode.removeChild(this); |
---|
| 1193 | return this; |
---|
| 1194 | }, |
---|
| 1195 | |
---|
| 1196 | /* |
---|
| 1197 | Property: clone |
---|
| 1198 | Clones the Element and returns the cloned one. |
---|
| 1199 | |
---|
| 1200 | Returns: |
---|
| 1201 | the cloned element |
---|
| 1202 | |
---|
| 1203 | Example: |
---|
| 1204 | >var clone = $('myElement').clone().injectAfter('myElement'); |
---|
| 1205 | >//clones the Element and append the clone after the Element. |
---|
| 1206 | */ |
---|
| 1207 | |
---|
| 1208 | clone: function(contents){ |
---|
| 1209 | var el = this.cloneNode(contents !== false); |
---|
| 1210 | return $(el); |
---|
| 1211 | }, |
---|
| 1212 | |
---|
| 1213 | /* |
---|
| 1214 | Property: replaceWith |
---|
| 1215 | Replaces the Element with an element passed. |
---|
| 1216 | |
---|
| 1217 | Parameteres: |
---|
| 1218 | el - a string representing the element to be injected in (myElementId, or div), or an element reference. |
---|
| 1219 | If you pass div or another tag, the element will be created. |
---|
| 1220 | |
---|
| 1221 | Returns: |
---|
| 1222 | the passed in element |
---|
| 1223 | |
---|
| 1224 | Example: |
---|
| 1225 | >$('myOldElement').replaceWith($('myNewElement')); //$('myOldElement') is gone, and $('myNewElement') is in its place. |
---|
| 1226 | */ |
---|
| 1227 | |
---|
| 1228 | replaceWith: function(el){ |
---|
| 1229 | el = $(el) || new Element(el); |
---|
| 1230 | this.parentNode.replaceChild(el, this); |
---|
| 1231 | return el; |
---|
| 1232 | }, |
---|
| 1233 | |
---|
| 1234 | /* |
---|
| 1235 | Property: appendText |
---|
| 1236 | Appends text node to a DOM element. |
---|
| 1237 | |
---|
| 1238 | Arguments: |
---|
| 1239 | text - the text to append. |
---|
| 1240 | |
---|
| 1241 | Example: |
---|
| 1242 | ><div id="myElement">hey</div> |
---|
| 1243 | >$('myElement').appendText(' howdy'); //myElement innerHTML is now "hey howdy" |
---|
| 1244 | */ |
---|
| 1245 | |
---|
| 1246 | appendText: function(text){ |
---|
| 1247 | if (window.ie){ |
---|
| 1248 | switch(this.getTag()){ |
---|
| 1249 | case 'style': this.styleSheet.cssText = text; return this; |
---|
| 1250 | case 'script': this.setProperty('text', text); return this; |
---|
| 1251 | } |
---|
| 1252 | } |
---|
| 1253 | this.appendChild(document.createTextNode(text)); |
---|
| 1254 | return this; |
---|
| 1255 | }, |
---|
| 1256 | |
---|
| 1257 | /* |
---|
| 1258 | Property: hasClass |
---|
| 1259 | Tests the Element to see if it has the passed in className. |
---|
| 1260 | |
---|
| 1261 | Returns: |
---|
| 1262 | true - the Element has the class |
---|
| 1263 | false - it doesn't |
---|
| 1264 | |
---|
| 1265 | Arguments: |
---|
| 1266 | className - the class name to test. |
---|
| 1267 | |
---|
| 1268 | Example: |
---|
| 1269 | ><div id="myElement" class="testClass"></div> |
---|
| 1270 | >$('myElement').hasClass('testClass'); //returns true |
---|
| 1271 | */ |
---|
| 1272 | |
---|
| 1273 | hasClass: function(className){ |
---|
| 1274 | return this.className.test('(?:^|\\s+)' + className + '(?:\\s+|$)'); |
---|
| 1275 | }, |
---|
| 1276 | |
---|
| 1277 | /* |
---|
| 1278 | Property: addClass |
---|
| 1279 | Adds the passed in class to the Element, if the element doesnt already have it. |
---|
| 1280 | |
---|
| 1281 | Arguments: |
---|
| 1282 | className - the class name to add |
---|
| 1283 | |
---|
| 1284 | Example: |
---|
| 1285 | ><div id="myElement" class="testClass"></div> |
---|
| 1286 | >$('myElement').addClass('newClass'); //<div id="myElement" class="testClass newClass"></div> |
---|
| 1287 | */ |
---|
| 1288 | |
---|
| 1289 | addClass: function(className){ |
---|
| 1290 | if (!this.hasClass(className)) this.className = (this.className+' '+className).clean(); |
---|
| 1291 | return this; |
---|
| 1292 | }, |
---|
| 1293 | |
---|
| 1294 | /* |
---|
| 1295 | Property: removeClass |
---|
| 1296 | works like <Element.addClass>, but removes the class from the element. |
---|
| 1297 | */ |
---|
| 1298 | |
---|
| 1299 | removeClass: function(className){ |
---|
| 1300 | if (this.hasClass(className)) this.className = this.className.replace(className, '').clean(); |
---|
| 1301 | return this; |
---|
| 1302 | }, |
---|
| 1303 | |
---|
| 1304 | /* |
---|
| 1305 | Property: toggleClass |
---|
| 1306 | Adds or removes the passed in class name to the element, depending on if it's present or not. |
---|
| 1307 | |
---|
| 1308 | Arguments: |
---|
| 1309 | className - the class to add or remove |
---|
| 1310 | |
---|
| 1311 | Example: |
---|
| 1312 | ><div id="myElement" class="myClass"></div> |
---|
| 1313 | >$('myElement').toggleClass('myClass'); |
---|
| 1314 | ><div id="myElement" class=""></div> |
---|
| 1315 | >$('myElement').toggleClass('myClass'); |
---|
| 1316 | ><div id="myElement" class="myClass"></div> |
---|
| 1317 | */ |
---|
| 1318 | |
---|
| 1319 | toggleClass: function(className){ |
---|
| 1320 | return this.hasClass(className) ? this.removeClass(className) : this.addClass(className); |
---|
| 1321 | }, |
---|
| 1322 | |
---|
| 1323 | /* |
---|
| 1324 | Property: setStyle |
---|
| 1325 | Sets a css property to the Element. |
---|
| 1326 | |
---|
| 1327 | Arguments: |
---|
| 1328 | property - the property to set |
---|
| 1329 | value - the value to which to set it |
---|
| 1330 | |
---|
| 1331 | Example: |
---|
| 1332 | >$('myElement').setStyle('width', '300px'); //the width is now 300px |
---|
| 1333 | */ |
---|
| 1334 | |
---|
| 1335 | setStyle: function(property, value){ |
---|
| 1336 | if (property == 'opacity') this.setOpacity(parseFloat(value)); |
---|
| 1337 | else this.style[property.camelCase()] = (value.push) ? value.rgbToHex() : value; |
---|
| 1338 | return this; |
---|
| 1339 | }, |
---|
| 1340 | |
---|
| 1341 | /* |
---|
| 1342 | Property: setStyles |
---|
| 1343 | Applies a collection of styles to the Element. |
---|
| 1344 | |
---|
| 1345 | Arguments: |
---|
| 1346 | source - an object or string containing all the styles to apply |
---|
| 1347 | |
---|
| 1348 | Examples: |
---|
| 1349 | >$('myElement').setStyles({ |
---|
| 1350 | > border: '1px solid #000', |
---|
| 1351 | > width: '300px', |
---|
| 1352 | > height: '400px' |
---|
| 1353 | >}); |
---|
| 1354 | |
---|
| 1355 | OR |
---|
| 1356 | |
---|
| 1357 | >$('myElement').setStyle('border: 1px solid #000; width: 300px; height: 400px;'); |
---|
| 1358 | */ |
---|
| 1359 | |
---|
| 1360 | setStyles: function(source){ |
---|
| 1361 | switch ($type(source)){ |
---|
| 1362 | case 'object': |
---|
| 1363 | for (var property in source) this.setStyle(property, source[property]); |
---|
| 1364 | break; |
---|
| 1365 | case 'string': |
---|
| 1366 | if (window.ie) this.cssText = source; |
---|
| 1367 | else this.setAttribute('style', source); |
---|
| 1368 | } |
---|
| 1369 | return this; |
---|
| 1370 | }, |
---|
| 1371 | |
---|
| 1372 | /* |
---|
| 1373 | Property: setOpacity |
---|
| 1374 | Sets the opacity of the Element, and sets also visibility == "hidden" if opacity == 0, and visibility = "visible" if opacity == 1. |
---|
| 1375 | |
---|
| 1376 | Arguments: |
---|
| 1377 | opacity - Accepts numbers from 0 to 1. |
---|
| 1378 | |
---|
| 1379 | Example: |
---|
| 1380 | >$('myElement').setOpacity(0.5) //make it 50% transparent |
---|
| 1381 | */ |
---|
| 1382 | |
---|
| 1383 | setOpacity: function(opacity){ |
---|
| 1384 | if (opacity == 0){ |
---|
| 1385 | if(this.style.visibility != "hidden") this.style.visibility = "hidden"; |
---|
| 1386 | } else { |
---|
| 1387 | if(this.style.visibility != "visible") this.style.visibility = "visible"; |
---|
| 1388 | } |
---|
| 1389 | if (!this.currentStyle || !this.currentStyle.hasLayout) this.style.zoom = 1; |
---|
| 1390 | if (window.ie) this.style.filter = "alpha(opacity=" + opacity*100 + ")"; |
---|
| 1391 | this.style.opacity = this.opacity = opacity; |
---|
| 1392 | return this; |
---|
| 1393 | }, |
---|
| 1394 | |
---|
| 1395 | /* |
---|
| 1396 | Property: getStyle |
---|
| 1397 | Returns the style of the Element given the property passed in. |
---|
| 1398 | |
---|
| 1399 | Arguments: |
---|
| 1400 | property - the css style property you want to retrieve |
---|
| 1401 | |
---|
| 1402 | Example: |
---|
| 1403 | >$('myElement').getStyle('width'); //returns "400px" |
---|
| 1404 | >//but you can also use |
---|
| 1405 | >$('myElement').getStyle('width').toInt(); //returns "400" |
---|
| 1406 | |
---|
| 1407 | Returns: |
---|
| 1408 | the style as a string |
---|
| 1409 | */ |
---|
| 1410 | |
---|
| 1411 | getStyle: function(property){ |
---|
| 1412 | property = property.camelCase(); |
---|
| 1413 | var style = this.style[property] || false; |
---|
| 1414 | if (!$chk(style)){ |
---|
| 1415 | if (property == 'opacity') return $chk(this.opacity) ? this.opacity : 1; |
---|
| 1416 | if (['margin', 'padding'].test(property)){ |
---|
| 1417 | return [this.getStyle(property+'-top') || 0, this.getStyle(property+'-right') || 0, |
---|
| 1418 | this.getStyle(property+'-bottom') || 0, this.getStyle(property+'-left') || 0].join(' '); |
---|
| 1419 | } |
---|
| 1420 | if (document.defaultView) style = document.defaultView.getComputedStyle(this, null).getPropertyValue(property.hyphenate()); |
---|
| 1421 | else if (this.currentStyle) style = this.currentStyle[property]; |
---|
| 1422 | } |
---|
| 1423 | return (style && property.test('color', 'i') && style.test('rgb')) ? style.rgbToHex() : style; |
---|
| 1424 | }, |
---|
| 1425 | |
---|
| 1426 | /* |
---|
| 1427 | Property: addEvent |
---|
| 1428 | Attaches an event listener to a DOM element. |
---|
| 1429 | |
---|
| 1430 | Arguments: |
---|
| 1431 | type - the event to monitor ('click', 'load', etc) without the prefix 'on'. |
---|
| 1432 | fn - the function to execute |
---|
| 1433 | |
---|
| 1434 | Example: |
---|
| 1435 | >$('myElement').addEvent('click', function(){alert('clicked!')}); |
---|
| 1436 | */ |
---|
| 1437 | |
---|
| 1438 | addEvent: function(type, fn){ |
---|
| 1439 | this.events = this.events || {}; |
---|
| 1440 | this.events[type] = this.events[type] || {'keys': [], 'values': []}; |
---|
| 1441 | if (!this.events[type].keys){ |
---|
| 1442 | this.events[type].keys = []; |
---|
| 1443 | } |
---|
| 1444 | if (!this.events[type].values){ |
---|
| 1445 | this.events[type].values = []; |
---|
| 1446 | } |
---|
| 1447 | if (!this.events[type].keys.test(fn)){ |
---|
| 1448 | this.events[type].keys.push(fn); |
---|
| 1449 | if (this.addEventListener){ |
---|
| 1450 | this.addEventListener((type == 'mousewheel' && window.gecko) ? 'DOMMouseScroll' : type, fn, false); |
---|
| 1451 | } else { |
---|
| 1452 | fn = fn.bind(this); |
---|
| 1453 | this.attachEvent('on'+type, fn); |
---|
| 1454 | this.events[type].values.push(fn); |
---|
| 1455 | } |
---|
| 1456 | } |
---|
| 1457 | return this; |
---|
| 1458 | }, |
---|
| 1459 | |
---|
| 1460 | addEvents: function(source){ |
---|
| 1461 | if (source){ |
---|
| 1462 | for (var type in source) this.addEvent(type, source[type]); |
---|
| 1463 | } |
---|
| 1464 | return this; |
---|
| 1465 | }, |
---|
| 1466 | |
---|
| 1467 | /* |
---|
| 1468 | Property: removeEvent |
---|
| 1469 | Works as Element.addEvent, but instead removes the previously added event listener. |
---|
| 1470 | */ |
---|
| 1471 | |
---|
| 1472 | removeEvent: function(type, fn){ |
---|
| 1473 | if (this.events && this.events[type]){ |
---|
| 1474 | var pos = this.events[type].keys.indexOf(fn); |
---|
| 1475 | if (pos == -1) return this; |
---|
| 1476 | var key = this.events[type].keys.splice(pos,1)[0]; |
---|
| 1477 | if (this.removeEventListener){ |
---|
| 1478 | this.removeEventListener((type == 'mousewheel' && window.gecko) ? 'DOMMouseScroll' : type, key, false); |
---|
| 1479 | } else { |
---|
| 1480 | this.detachEvent('on'+type, this.events[type].values.splice(pos,1)[0]); |
---|
| 1481 | } |
---|
| 1482 | } |
---|
| 1483 | return this; |
---|
| 1484 | }, |
---|
| 1485 | |
---|
| 1486 | /* |
---|
| 1487 | Property: removeEvents |
---|
| 1488 | removes all events of a certain type from an element. if no argument is passed in, removes all events. |
---|
| 1489 | */ |
---|
| 1490 | |
---|
| 1491 | removeEvents: function(type){ |
---|
| 1492 | if (this.events){ |
---|
| 1493 | if (type){ |
---|
| 1494 | if (this.events[type]){ |
---|
| 1495 | this.events[type].keys.each(function(fn){ |
---|
| 1496 | this.removeEvent(type, fn); |
---|
| 1497 | }, this); |
---|
| 1498 | this.events[type] = null; |
---|
| 1499 | } |
---|
| 1500 | } else { |
---|
| 1501 | for (var evType in this.events) this.removeEvents(evType); |
---|
| 1502 | this.events = null; |
---|
| 1503 | } |
---|
| 1504 | } |
---|
| 1505 | return this; |
---|
| 1506 | }, |
---|
| 1507 | |
---|
| 1508 | /* |
---|
| 1509 | Property: fireEvent |
---|
| 1510 | executes all events of the specified type present in the element. |
---|
| 1511 | */ |
---|
| 1512 | |
---|
| 1513 | fireEvent: function(type, args){ |
---|
| 1514 | if (this.events && this.events[type]){ |
---|
| 1515 | args = args || []; |
---|
| 1516 | if ($type(args) != 'array') args = [args]; |
---|
| 1517 | this.events[type].keys.each(function(fn){ |
---|
| 1518 | fn.apply(this, args); |
---|
| 1519 | }, this); |
---|
| 1520 | } |
---|
| 1521 | }, |
---|
| 1522 | |
---|
| 1523 | getBrother: function(what){ |
---|
| 1524 | var el = this[what+'Sibling']; |
---|
| 1525 | while ($type(el) == 'whitespace') el = el[what+'Sibling']; |
---|
| 1526 | return $(el); |
---|
| 1527 | }, |
---|
| 1528 | |
---|
| 1529 | /* |
---|
| 1530 | Property: getPrevious |
---|
| 1531 | Returns the previousSibling of the Element, excluding text nodes. |
---|
| 1532 | |
---|
| 1533 | Example: |
---|
| 1534 | >$('myElement').getPrevious(); //get the previous DOM element from myElement |
---|
| 1535 | |
---|
| 1536 | Returns: |
---|
| 1537 | the sibling element or undefined if none found. |
---|
| 1538 | */ |
---|
| 1539 | |
---|
| 1540 | getPrevious: function(){ |
---|
| 1541 | return this.getBrother('previous'); |
---|
| 1542 | }, |
---|
| 1543 | |
---|
| 1544 | /* |
---|
| 1545 | Property: getNext |
---|
| 1546 | Works as Element.getPrevious, but tries to find the nextSibling. |
---|
| 1547 | */ |
---|
| 1548 | |
---|
| 1549 | getNext: function(){ |
---|
| 1550 | return this.getBrother('next'); |
---|
| 1551 | }, |
---|
| 1552 | |
---|
| 1553 | /* |
---|
| 1554 | Property: getFirst |
---|
| 1555 | Works as <Element.getPrevious>, but tries to find the firstChild. |
---|
| 1556 | */ |
---|
| 1557 | |
---|
| 1558 | getFirst: function(){ |
---|
| 1559 | var el = this.firstChild; |
---|
| 1560 | while ($type(el) == 'whitespace') el = el.nextSibling; |
---|
| 1561 | return $(el); |
---|
| 1562 | }, |
---|
| 1563 | |
---|
| 1564 | /* |
---|
| 1565 | Property: getLast |
---|
| 1566 | Works as <Element.getPrevious>, but tries to find the lastChild. |
---|
| 1567 | */ |
---|
| 1568 | |
---|
| 1569 | getLast: function(){ |
---|
| 1570 | var el = this.lastChild; |
---|
| 1571 | while ($type(el) == 'whitespace') el = el.previousSibling; |
---|
| 1572 | return $(el); |
---|
| 1573 | }, |
---|
| 1574 | |
---|
| 1575 | /* |
---|
| 1576 | Property: getParent |
---|
| 1577 | returns the $(element.parentNode) |
---|
| 1578 | */ |
---|
| 1579 | |
---|
| 1580 | getParent: function(){ |
---|
| 1581 | return $(this.parentNode); |
---|
| 1582 | }, |
---|
| 1583 | |
---|
| 1584 | /* |
---|
| 1585 | Property: getChildren |
---|
| 1586 | returns all the $(element.childNodes), excluding text nodes. Returns as <Elements>. |
---|
| 1587 | */ |
---|
| 1588 | |
---|
| 1589 | getChildren: function(){ |
---|
| 1590 | return $$(this.childNodes); |
---|
| 1591 | }, |
---|
| 1592 | |
---|
| 1593 | /* |
---|
| 1594 | Property: setProperty |
---|
| 1595 | Sets an attribute for the Element. |
---|
| 1596 | |
---|
| 1597 | Arguments: |
---|
| 1598 | property - the property to assign the value passed in |
---|
| 1599 | value - the value to assign to the property passed in |
---|
| 1600 | |
---|
| 1601 | Example: |
---|
| 1602 | >$('myImage').setProperty('src', 'whatever.gif'); //myImage now points to whatever.gif for its source |
---|
| 1603 | */ |
---|
| 1604 | |
---|
| 1605 | setProperty: function(property, value){ |
---|
| 1606 | switch (property){ |
---|
| 1607 | case 'class': this.className = value; break; |
---|
| 1608 | case 'style': this.setStyles(value); break; |
---|
| 1609 | case 'name': if (window.ie6){ |
---|
| 1610 | var el = $(document.createElement('<'+this.getTag()+' name="'+value+'" />')); |
---|
| 1611 | $each(this.attributes, function(attribute){ |
---|
| 1612 | if (attribute.name != 'name') el.setProperty(attribute.name, attribute.value); |
---|
| 1613 | }); |
---|
| 1614 | if (this.parentNode) this.replaceWith(el); |
---|
| 1615 | return el; |
---|
| 1616 | } |
---|
| 1617 | default: this.setAttribute(property, value); |
---|
| 1618 | } |
---|
| 1619 | return this; |
---|
| 1620 | }, |
---|
| 1621 | |
---|
| 1622 | /* |
---|
| 1623 | Property: setProperties |
---|
| 1624 | Sets numerous attributes for the Element. |
---|
| 1625 | |
---|
| 1626 | Arguments: |
---|
| 1627 | source - an object with key/value pairs. |
---|
| 1628 | |
---|
| 1629 | Example: |
---|
| 1630 | >$('myElement').setProperties({ |
---|
| 1631 | > src: 'whatever.gif', |
---|
| 1632 | > alt: 'whatever dude' |
---|
| 1633 | >}); |
---|
| 1634 | ><img src="whatever.gif" alt="whatever dude"> |
---|
| 1635 | */ |
---|
| 1636 | |
---|
| 1637 | setProperties: function(source){ |
---|
| 1638 | for (var property in source) this.setProperty(property, source[property]); |
---|
| 1639 | return this; |
---|
| 1640 | }, |
---|
| 1641 | |
---|
| 1642 | /* |
---|
| 1643 | Property: setHTML |
---|
| 1644 | Sets the innerHTML of the Element. |
---|
| 1645 | |
---|
| 1646 | Arguments: |
---|
| 1647 | html - the new innerHTML for the element. |
---|
| 1648 | |
---|
| 1649 | Example: |
---|
| 1650 | >$('myElement').setHTML(newHTML) //the innerHTML of myElement is now = newHTML |
---|
| 1651 | */ |
---|
| 1652 | |
---|
| 1653 | setHTML: function(html){ |
---|
| 1654 | this.innerHTML = html; |
---|
| 1655 | return this; |
---|
| 1656 | }, |
---|
| 1657 | |
---|
| 1658 | /* |
---|
| 1659 | Property: getProperty |
---|
| 1660 | Gets the an attribute of the Element. |
---|
| 1661 | |
---|
| 1662 | Arguments: |
---|
| 1663 | property - the attribute to retrieve |
---|
| 1664 | |
---|
| 1665 | Example: |
---|
| 1666 | >$('myImage').getProperty('src') // returns whatever.gif |
---|
| 1667 | |
---|
| 1668 | Returns: |
---|
| 1669 | the value, or an empty string |
---|
| 1670 | */ |
---|
| 1671 | |
---|
| 1672 | getProperty: function(property){ |
---|
| 1673 | return (property == 'class') ? this.className : this.getAttribute(property); |
---|
| 1674 | }, |
---|
| 1675 | |
---|
| 1676 | /* |
---|
| 1677 | Property: getTag |
---|
| 1678 | Returns the tagName of the element in lower case. |
---|
| 1679 | |
---|
| 1680 | Example: |
---|
| 1681 | >$('myImage').getTag() // returns 'img' |
---|
| 1682 | |
---|
| 1683 | Returns: |
---|
| 1684 | The tag name in lower case |
---|
| 1685 | */ |
---|
| 1686 | |
---|
| 1687 | getTag: function(){ |
---|
| 1688 | return this.tagName.toLowerCase(); |
---|
| 1689 | }, |
---|
| 1690 | |
---|
| 1691 | getOffsets: function(){ |
---|
| 1692 | var el = this, offsetLeft = 0, offsetTop = 0; |
---|
| 1693 | do { |
---|
| 1694 | offsetLeft += el.offsetLeft || 0; |
---|
| 1695 | offsetTop += el.offsetTop || 0; |
---|
| 1696 | el = el.offsetParent; |
---|
| 1697 | } while (el); |
---|
| 1698 | return {'x': offsetLeft, 'y': offsetTop}; |
---|
| 1699 | }, |
---|
| 1700 | |
---|
| 1701 | /* |
---|
| 1702 | Property: scrollTo |
---|
| 1703 | scrolls the element to the specified coordinated (if the element has an overflow) |
---|
| 1704 | |
---|
| 1705 | Arguments: |
---|
| 1706 | x - the x coordinate |
---|
| 1707 | y - the y coordinate |
---|
| 1708 | |
---|
| 1709 | Example: |
---|
| 1710 | >$('myElement').scrollTo(0, 100) |
---|
| 1711 | */ |
---|
| 1712 | |
---|
| 1713 | scrollTo: function(x, y){ |
---|
| 1714 | this.scrollLeft = x; |
---|
| 1715 | this.scrollTop = y; |
---|
| 1716 | }, |
---|
| 1717 | |
---|
| 1718 | /* |
---|
| 1719 | Property: getSize |
---|
| 1720 | return an Object representing the size/scroll values of the element. |
---|
| 1721 | |
---|
| 1722 | Example: |
---|
| 1723 | (start code) |
---|
| 1724 | $('myElement').getSize(); |
---|
| 1725 | (end) |
---|
| 1726 | |
---|
| 1727 | Returns: |
---|
| 1728 | (start code) |
---|
| 1729 | { |
---|
| 1730 | 'scroll': {'x': 100, 'y': 100}, |
---|
| 1731 | 'size': {'x': 200, 'y': 400}, |
---|
| 1732 | 'scrollSize': {'x': 300, 'y': 500} |
---|
| 1733 | } |
---|
| 1734 | (end) |
---|
| 1735 | */ |
---|
| 1736 | |
---|
| 1737 | getSize: function(){ |
---|
| 1738 | return { |
---|
| 1739 | 'scroll': {'x': this.scrollLeft, 'y': this.scrollTop}, |
---|
| 1740 | 'size': {'x': this.offsetWidth, 'y': this.offsetHeight}, |
---|
| 1741 | 'scrollSize': {'x': this.scrollWidth, 'y': this.scrollHeight} |
---|
| 1742 | }; |
---|
| 1743 | }, |
---|
| 1744 | |
---|
| 1745 | /* |
---|
| 1746 | Property: getTop |
---|
| 1747 | Returns the distance from the top of the window to the Element. |
---|
| 1748 | */ |
---|
| 1749 | |
---|
| 1750 | getTop: function(){ |
---|
| 1751 | return this.getOffsets().y; |
---|
| 1752 | }, |
---|
| 1753 | |
---|
| 1754 | /* |
---|
| 1755 | Property: getLeft |
---|
| 1756 | Returns the distance from the left of the window to the Element. |
---|
| 1757 | */ |
---|
| 1758 | |
---|
| 1759 | getLeft: function(){ |
---|
| 1760 | return this.getOffsets().x; |
---|
| 1761 | }, |
---|
| 1762 | |
---|
| 1763 | /* |
---|
| 1764 | Property: getPosition |
---|
| 1765 | Returns an object with width, height, left, right, top, and bottom, representing the values of the Element |
---|
| 1766 | |
---|
| 1767 | Example: |
---|
| 1768 | (start code) |
---|
| 1769 | var myValues = $('myElement').getPosition(); |
---|
| 1770 | (end) |
---|
| 1771 | |
---|
| 1772 | Returns: |
---|
| 1773 | (start code) |
---|
| 1774 | { |
---|
| 1775 | width: 200, |
---|
| 1776 | height: 300, |
---|
| 1777 | left: 100, |
---|
| 1778 | top: 50, |
---|
| 1779 | right: 300, |
---|
| 1780 | bottom: 350 |
---|
| 1781 | } |
---|
| 1782 | (end) |
---|
| 1783 | */ |
---|
| 1784 | |
---|
| 1785 | getPosition: function(){ |
---|
| 1786 | var offs = this.getOffsets(); |
---|
| 1787 | var obj = { |
---|
| 1788 | 'width': this.offsetWidth, |
---|
| 1789 | 'height': this.offsetHeight, |
---|
| 1790 | 'left': offs.x, |
---|
| 1791 | 'top': offs.y |
---|
| 1792 | }; |
---|
| 1793 | obj.right = obj.left + obj.width; |
---|
| 1794 | obj.bottom = obj.top + obj.height; |
---|
| 1795 | return obj; |
---|
| 1796 | }, |
---|
| 1797 | |
---|
| 1798 | /* |
---|
| 1799 | Property: getValue |
---|
| 1800 | Returns the value of the Element, if its tag is textarea, select or input. no multiple select support. |
---|
| 1801 | */ |
---|
| 1802 | |
---|
| 1803 | getValue: function(){ |
---|
| 1804 | switch (this.getTag()){ |
---|
| 1805 | case 'select': if (this.selectedIndex != -1) return this.options[this.selectedIndex].value; break; |
---|
| 1806 | case 'input': if (!(this.checked && ['checkbox', 'radio'].test(this.type)) && !['hidden', 'text', 'password'].test(this.type)) break; |
---|
| 1807 | case 'textarea': return this.value; |
---|
| 1808 | } |
---|
| 1809 | return false; |
---|
| 1810 | } |
---|
| 1811 | |
---|
| 1812 | }); |
---|
| 1813 | |
---|
| 1814 | var Window = window; |
---|
| 1815 | |
---|
| 1816 | window.addEvent = document.addEvent = Element.prototype.addEvent; |
---|
| 1817 | window.removeEvent = document.removeEvent = Element.prototype.removeEvent; |
---|
| 1818 | |
---|
| 1819 | var Garbage = { |
---|
| 1820 | |
---|
| 1821 | elements: [], |
---|
| 1822 | |
---|
| 1823 | collect: function(element){ |
---|
| 1824 | Garbage.elements.push(element); |
---|
| 1825 | }, |
---|
| 1826 | |
---|
| 1827 | trash: function(){ |
---|
| 1828 | window.removeEvent('unload', Garbage.trash); |
---|
| 1829 | Garbage.elements.each(function(el){ |
---|
| 1830 | el.removeEvents(); |
---|
| 1831 | for (var p in Element.prototype) HTMLElement[p] = window[p] = document[p] = el[p] = null; |
---|
| 1832 | el.extend = null; |
---|
| 1833 | }); |
---|
| 1834 | } |
---|
| 1835 | |
---|
| 1836 | }; |
---|
| 1837 | |
---|
| 1838 | window.addEvent('unload', Garbage.trash); |
---|
| 1839 | |
---|
| 1840 | /* |
---|
| 1841 | Script: Event.js |
---|
| 1842 | Event class |
---|
| 1843 | |
---|
| 1844 | Author: |
---|
| 1845 | Valerio Proietti, <http://mad4milk.net>, Michael Jackson, <http://ajaxon.com/michael> |
---|
| 1846 | |
---|
| 1847 | License: |
---|
| 1848 | MIT-style license. |
---|
| 1849 | */ |
---|
| 1850 | |
---|
| 1851 | /* |
---|
| 1852 | Class: Event |
---|
| 1853 | Cross browser methods to manage events. |
---|
| 1854 | |
---|
| 1855 | Arguments: |
---|
| 1856 | event - the event |
---|
| 1857 | |
---|
| 1858 | Properties: |
---|
| 1859 | shift - true if the user pressed the shift |
---|
| 1860 | control - true if the user pressed the control |
---|
| 1861 | alt - true if the user pressed the alt |
---|
| 1862 | meta - true if the user pressed the meta key |
---|
| 1863 | code - the keycode of the key pressed |
---|
| 1864 | page.x - the x position of the mouse, relative to the full window |
---|
| 1865 | page.y - the y position of the mouse, relative to the full window |
---|
| 1866 | client.x - the x position of the mouse, relative to the viewport |
---|
| 1867 | client.y - the y position of the mouse, relative to the viewport |
---|
| 1868 | key - the key pressed as a lowercase string. key also returns 'enter', 'up', 'down', 'left', 'right', 'space', 'backspace', 'delete', 'esc'. Handy for these special keys. |
---|
| 1869 | target - the event target |
---|
| 1870 | relatedTarget - the event related target |
---|
| 1871 | |
---|
| 1872 | Example: |
---|
| 1873 | (start code) |
---|
| 1874 | $('myLink').onkeydown = function(event){ |
---|
| 1875 | var event = new Event(event); |
---|
| 1876 | //event is now the Event class. |
---|
| 1877 | alert(event.key); //returns the lowercase letter pressed |
---|
| 1878 | alert(event.shift); //returns true if the key pressed is shift |
---|
| 1879 | if (event.key == 's' && event.control) alert('document saved'); |
---|
| 1880 | }; |
---|
| 1881 | (end) |
---|
| 1882 | */ |
---|
| 1883 | |
---|
| 1884 | var Event = new Class({ |
---|
| 1885 | |
---|
| 1886 | initialize: function(event){ |
---|
| 1887 | this.event = event || window.event; |
---|
| 1888 | this.type = this.event.type; |
---|
| 1889 | this.target = this.event.target || this.event.srcElement; |
---|
| 1890 | if (this.target.nodeType == 3) this.target = this.target.parentNode; // Safari |
---|
| 1891 | this.shift = this.event.shiftKey; |
---|
| 1892 | this.control = this.event.ctrlKey; |
---|
| 1893 | this.alt = this.event.altKey; |
---|
| 1894 | this.meta = this.event.metaKey; |
---|
| 1895 | if (['DOMMouseScroll', 'mousewheel'].test(this.type)){ |
---|
| 1896 | this.wheel = this.event.wheelDelta ? (this.event.wheelDelta / (window.opera ? -120 : 120)) : -(this.event.detail || 0) / 3; |
---|
| 1897 | } else if (this.type.test('key')){ |
---|
| 1898 | this.code = this.event.which || this.event.keyCode; |
---|
| 1899 | for (var name in Event.keys){ |
---|
| 1900 | if (Event.keys[name] == this.code) var special = name; |
---|
| 1901 | } |
---|
| 1902 | this.key = special || String.fromCharCode(this.code).toLowerCase(); |
---|
| 1903 | |
---|
| 1904 | } else if (this.type.test('mouse') || this.type == 'click'){ |
---|
| 1905 | this.page = { |
---|
| 1906 | 'x': this.event.pageX || this.event.clientX + document.documentElement.scrollLeft, |
---|
| 1907 | 'y': this.event.pageY || this.event.clientY + document.documentElement.scrollTop |
---|
| 1908 | }; |
---|
| 1909 | this.client = { |
---|
| 1910 | 'x': this.event.pageX ? this.event.pageX - window.pageXOffset : this.event.clientX, |
---|
| 1911 | 'y': this.event.pageY ? this.event.pageY - window.pageYOffset : this.event.clientY |
---|
| 1912 | }; |
---|
| 1913 | this.rightClick = (this.event.which == 3) || (this.event.button == 2); |
---|
| 1914 | switch (this.type){ |
---|
| 1915 | case 'mouseover': this.relatedTarget = this.event.relatedTarget || this.event.fromElement; break; |
---|
| 1916 | case 'mouseout': this.relatedTarget = this.event.relatedTarget || this.event.toElement; |
---|
| 1917 | } |
---|
| 1918 | } |
---|
| 1919 | }, |
---|
| 1920 | |
---|
| 1921 | /* |
---|
| 1922 | Property: stop |
---|
| 1923 | cross browser method to stop an event |
---|
| 1924 | */ |
---|
| 1925 | |
---|
| 1926 | stop: function() { |
---|
| 1927 | this.stopPropagation(); |
---|
| 1928 | this.preventDefault(); |
---|
| 1929 | return this; |
---|
| 1930 | }, |
---|
| 1931 | |
---|
| 1932 | /* |
---|
| 1933 | Property: stopPropagation |
---|
| 1934 | cross browser method to stop the propagation of an event |
---|
| 1935 | */ |
---|
| 1936 | |
---|
| 1937 | stopPropagation: function(){ |
---|
| 1938 | if (this.event.stopPropagation) this.event.stopPropagation(); |
---|
| 1939 | else this.event.cancelBubble = true; |
---|
| 1940 | return this; |
---|
| 1941 | }, |
---|
| 1942 | |
---|
| 1943 | /* |
---|
| 1944 | Property: preventDefault |
---|
| 1945 | cross browser method to prevent the default action of the event |
---|
| 1946 | */ |
---|
| 1947 | |
---|
| 1948 | preventDefault: function(){ |
---|
| 1949 | if (this.event.preventDefault) this.event.preventDefault(); |
---|
| 1950 | else this.event.returnValue = false; |
---|
| 1951 | return this; |
---|
| 1952 | } |
---|
| 1953 | |
---|
| 1954 | }); |
---|
| 1955 | |
---|
| 1956 | Event.keys = { |
---|
| 1957 | 'enter': 13, |
---|
| 1958 | 'up': 38, |
---|
| 1959 | 'down': 40, |
---|
| 1960 | 'left': 37, |
---|
| 1961 | 'right': 39, |
---|
| 1962 | 'esc': 27, |
---|
| 1963 | 'space': 32, |
---|
| 1964 | 'backspace': 8, |
---|
| 1965 | 'delete': 46 |
---|
| 1966 | }; |
---|
| 1967 | |
---|
| 1968 | Function.extend({ |
---|
| 1969 | |
---|
| 1970 | /* |
---|
| 1971 | Property: bindWithEvent |
---|
| 1972 | automatically passes mootools Event Class. |
---|
| 1973 | |
---|
| 1974 | Arguments: |
---|
| 1975 | bind - optional, the object that the "this" of the function will refer to. |
---|
| 1976 | |
---|
| 1977 | Returns: |
---|
| 1978 | a function with the parameter bind as its "this" and as a pre-passed argument event or window.event, depending on the browser. |
---|
| 1979 | |
---|
| 1980 | Example: |
---|
| 1981 | >function myFunction(event){ |
---|
| 1982 | > alert(event.clientx) //returns the coordinates of the mouse.. |
---|
| 1983 | >}; |
---|
| 1984 | >myElement.onclick = myFunction.bindWithEvent(myElement); |
---|
| 1985 | */ |
---|
| 1986 | |
---|
| 1987 | bindWithEvent: function(bind, args){ |
---|
| 1988 | return this.create({'bind': bind, 'arguments': args, 'event': Event}); |
---|
| 1989 | } |
---|
| 1990 | |
---|
| 1991 | }); |
---|
| 1992 | |
---|
| 1993 | |
---|
| 1994 | /* |
---|
| 1995 | Script: Common.js |
---|
| 1996 | Contains common implementations for custom classes. In Mootools is implemented in <Ajax> and <Fx>. |
---|
| 1997 | |
---|
| 1998 | Author: |
---|
| 1999 | Valerio Proietti, <http://mad4milk.net> |
---|
| 2000 | |
---|
| 2001 | License: |
---|
| 2002 | MIT-style license. |
---|
| 2003 | */ |
---|
| 2004 | |
---|
| 2005 | /* |
---|
| 2006 | Class: Chain |
---|
| 2007 | An "Utility" Class. Its methods can be implemented with <Class.implement> into any <Class>. |
---|
| 2008 | Currently implemented in <Fx> and <Ajax>. In <Fx> for example, is used to execute a list of function, one after another, once the effect is completed. |
---|
| 2009 | The functions will not be fired all togheter, but one every completion, to create custom complex animations. |
---|
| 2010 | |
---|
| 2011 | Example: |
---|
| 2012 | (start code) |
---|
| 2013 | var myFx = new Fx.Style('element', 'opacity'); |
---|
| 2014 | |
---|
| 2015 | myFx.start(1,0).chain(function(){ |
---|
| 2016 | myFx.start(0,1); |
---|
| 2017 | }).chain(function(){ |
---|
| 2018 | myFx.start(1,0); |
---|
| 2019 | }).chain(function(){ |
---|
| 2020 | myFx.start(0,1); |
---|
| 2021 | }); |
---|
| 2022 | //the element will appear and disappear three times |
---|
| 2023 | (end) |
---|
| 2024 | */ |
---|
| 2025 | |
---|
| 2026 | var Chain = new Class({ |
---|
| 2027 | |
---|
| 2028 | /* |
---|
| 2029 | Property: chain |
---|
| 2030 | adds a function to the Chain instance stack. |
---|
| 2031 | |
---|
| 2032 | Arguments: |
---|
| 2033 | fn - the function to append. |
---|
| 2034 | */ |
---|
| 2035 | |
---|
| 2036 | chain: function(fn){ |
---|
| 2037 | this.chains = this.chains || []; |
---|
| 2038 | this.chains.push(fn); |
---|
| 2039 | return this; |
---|
| 2040 | }, |
---|
| 2041 | |
---|
| 2042 | /* |
---|
| 2043 | Property: callChain |
---|
| 2044 | Executes the first function of the Chain instance stack, then removes it. The first function will then become the second. |
---|
| 2045 | */ |
---|
| 2046 | |
---|
| 2047 | callChain: function(){ |
---|
| 2048 | if (this.chains && this.chains.length) this.chains.splice(0, 1)[0].delay(10, this); |
---|
| 2049 | }, |
---|
| 2050 | |
---|
| 2051 | /* |
---|
| 2052 | Property: clearChain |
---|
| 2053 | Clears the stack of a Chain instance. |
---|
| 2054 | */ |
---|
| 2055 | |
---|
| 2056 | clearChain: function(){ |
---|
| 2057 | this.chains = []; |
---|
| 2058 | } |
---|
| 2059 | |
---|
| 2060 | }); |
---|
| 2061 | |
---|
| 2062 | /* |
---|
| 2063 | Class: Events |
---|
| 2064 | An "Utility" Class. Its methods can be implemented with <Class.implement> into any <Class>. |
---|
| 2065 | In <Fx> Class, for example, is used to give the possibility add any number of functions to the Effects events, like onComplete, onStart, onCancel |
---|
| 2066 | |
---|
| 2067 | Example: |
---|
| 2068 | (start code) |
---|
| 2069 | var myFx = new Fx.Style('element', 'opacity').addEvent('onComplete', function(){ |
---|
| 2070 | alert('the effect is completed'); |
---|
| 2071 | }).addEvent('onComplete', function(){ |
---|
| 2072 | alert('I told you the effect is completed'); |
---|
| 2073 | }); |
---|
| 2074 | |
---|
| 2075 | myFx.start(0,1); |
---|
| 2076 | //upon completion it will display the 2 alerts, in order. |
---|
| 2077 | (end) |
---|
| 2078 | */ |
---|
| 2079 | |
---|
| 2080 | var Events = new Class({ |
---|
| 2081 | |
---|
| 2082 | /* |
---|
| 2083 | Property: addEvent |
---|
| 2084 | adds an event to the stack of events of the Class instance. |
---|
| 2085 | */ |
---|
| 2086 | |
---|
| 2087 | addEvent: function(type, fn){ |
---|
| 2088 | if (fn != Class.empty){ |
---|
| 2089 | this.events = this.events || {}; |
---|
| 2090 | this.events[type] = this.events[type] || []; |
---|
| 2091 | if (!this.events[type].test(fn)) this.events[type].push(fn); |
---|
| 2092 | } |
---|
| 2093 | return this; |
---|
| 2094 | }, |
---|
| 2095 | |
---|
| 2096 | /* |
---|
| 2097 | Property: fireEvent |
---|
| 2098 | fires all events of the specified type in the Class instance. |
---|
| 2099 | */ |
---|
| 2100 | |
---|
| 2101 | fireEvent: function(type, args, delay){ |
---|
| 2102 | if (this.events && this.events[type]){ |
---|
| 2103 | this.events[type].each(function(fn){ |
---|
| 2104 | fn.create({'bind': this, 'delay': delay, 'arguments': args})(); |
---|
| 2105 | }, this); |
---|
| 2106 | } |
---|
| 2107 | return this; |
---|
| 2108 | }, |
---|
| 2109 | |
---|
| 2110 | /* |
---|
| 2111 | Property: removeEvent |
---|
| 2112 | removes an event from the stack of events of the Class instance. |
---|
| 2113 | */ |
---|
| 2114 | |
---|
| 2115 | removeEvent: function(type, fn){ |
---|
| 2116 | if (this.events && this.events[type]) this.events[type].remove(fn); |
---|
| 2117 | return this; |
---|
| 2118 | } |
---|
| 2119 | |
---|
| 2120 | }); |
---|
| 2121 | |
---|
| 2122 | /* |
---|
| 2123 | Class: Options |
---|
| 2124 | An "Utility" Class. Its methods can be implemented with <Class.implement> into any <Class>. |
---|
| 2125 | Used to automate the options settings, also adding Class <Events> when the option begins with on. |
---|
| 2126 | */ |
---|
| 2127 | |
---|
| 2128 | var Options = new Class({ |
---|
| 2129 | |
---|
| 2130 | /* |
---|
| 2131 | Property: setOptions |
---|
| 2132 | sets this.options |
---|
| 2133 | |
---|
| 2134 | Arguments: |
---|
| 2135 | defaults - the default set of options |
---|
| 2136 | options - the user entered options. can be empty too. |
---|
| 2137 | |
---|
| 2138 | Note: |
---|
| 2139 | if your Class has <Events> implemented, every option beginning with on, followed by a capital letter (onComplete) becomes an Class instance event. |
---|
| 2140 | */ |
---|
| 2141 | |
---|
| 2142 | setOptions: function(defaults, options){ |
---|
| 2143 | this.options = Object.extend(defaults, options); |
---|
| 2144 | if (this.addEvent){ |
---|
| 2145 | for (var option in this.options){ |
---|
| 2146 | if (($type(this.options[option]) == 'function') && option.test('^on[A-Z]')) this.addEvent(option, this.options[option]); |
---|
| 2147 | } |
---|
| 2148 | } |
---|
| 2149 | return this; |
---|
| 2150 | } |
---|
| 2151 | |
---|
| 2152 | }); |
---|
| 2153 | |
---|
| 2154 | /* |
---|
| 2155 | Script: Dom.js |
---|
| 2156 | Css Query related function and <Element> extensions |
---|
| 2157 | |
---|
| 2158 | Author: |
---|
| 2159 | Valerio Proietti, <http://mad4milk.net> |
---|
| 2160 | |
---|
| 2161 | License: |
---|
| 2162 | MIT-style license. |
---|
| 2163 | */ |
---|
| 2164 | |
---|
| 2165 | /* Section: Utility Functions */ |
---|
| 2166 | |
---|
| 2167 | /* |
---|
| 2168 | Function: $E |
---|
| 2169 | Selects a single (i.e. the first found) Element based on the selector passed in and an optional filter element. |
---|
| 2170 | |
---|
| 2171 | Arguments: |
---|
| 2172 | selector - the css selector to match |
---|
| 2173 | filter - optional; a DOM element to limit the scope of the selector match; defaults to document. |
---|
| 2174 | |
---|
| 2175 | Example: |
---|
| 2176 | >$E('a', 'myElement') //find the first anchor tag inside the DOM element with id 'myElement' |
---|
| 2177 | |
---|
| 2178 | Returns: |
---|
| 2179 | a DOM element - the first element that matches the selector |
---|
| 2180 | */ |
---|
| 2181 | |
---|
| 2182 | function $E(selector, filter){ |
---|
| 2183 | return ($(filter) || document).getElement(selector); |
---|
| 2184 | }; |
---|
| 2185 | |
---|
| 2186 | /* |
---|
| 2187 | Function: $ES |
---|
| 2188 | Returns a collection of Elements that match the selector passed in limited to the scope of the optional filter. |
---|
| 2189 | See Also: <Element.getElements> for an alternate syntax. |
---|
| 2190 | |
---|
| 2191 | Returns: |
---|
| 2192 | an array of dom elements that match the selector within the filter |
---|
| 2193 | |
---|
| 2194 | Arguments: |
---|
| 2195 | selector - css selector to match |
---|
| 2196 | filter - optional; a DOM element to limit the scope of the selector match; defaults to document. |
---|
| 2197 | |
---|
| 2198 | Examples: |
---|
| 2199 | >$ES("a") //gets all the anchor tags; synonymous with $$("a") |
---|
| 2200 | >$ES('a','myElement') //get all the anchor tags within $('myElement') |
---|
| 2201 | */ |
---|
| 2202 | |
---|
| 2203 | function $ES(selector, filter){ |
---|
| 2204 | return ($(filter) || document).getElementsBySelector(selector); |
---|
| 2205 | }; |
---|
| 2206 | |
---|
| 2207 | /* |
---|
| 2208 | Class: Element |
---|
| 2209 | Custom class to allow all of its methods to be used with any DOM element via the dollar function <$>. |
---|
| 2210 | */ |
---|
| 2211 | |
---|
| 2212 | Element.extend({ |
---|
| 2213 | |
---|
| 2214 | /* |
---|
| 2215 | Property: getElements |
---|
| 2216 | Gets all the elements within an element that match the given (single) selector. |
---|
| 2217 | |
---|
| 2218 | Arguments: |
---|
| 2219 | selector - the css selector to match |
---|
| 2220 | |
---|
| 2221 | Example: |
---|
| 2222 | >$('myElement').getElements('a'); // get all anchors within myElement |
---|
| 2223 | |
---|
| 2224 | Credits: |
---|
| 2225 | Say thanks to Christophe Beyls <http://digitalia.be> for the new regular expression that rules getElements, a big step forward in terms of speed. |
---|
| 2226 | */ |
---|
| 2227 | |
---|
| 2228 | getElements: function(selector){ |
---|
| 2229 | var filters = []; |
---|
| 2230 | selector.clean().split(' ').each(function(sel, i){ |
---|
| 2231 | var param = sel.match('^(\\w*|\\*)(?:#([\\w_-]+)|\\.([\\w_-]+))?(?:\\[["\']?(\\w+)["\']?(?:([\\*\\^\\$]?=)["\']?(\\w*)["\']?)?\\])?$'); |
---|
| 2232 | //PARAM ARRAY: 0 = full string: 1 = tag; 2 = id; 3 = class; 4 = attribute; 5 = operator; 6 = value; |
---|
| 2233 | if (!param) return; |
---|
| 2234 | param[1] = param[1] || '*'; |
---|
| 2235 | if (i == 0){ |
---|
| 2236 | if (param[2]){ |
---|
| 2237 | var el = this.getElementById(param[2]); |
---|
| 2238 | if (!el || ((param[1] != '*') && (Element.prototype.getTag.call(el) != param[1]))) return; |
---|
| 2239 | filters = [el]; |
---|
| 2240 | } else { |
---|
| 2241 | filters = $A(this.getElementsByTagName(param[1])); |
---|
| 2242 | } |
---|
| 2243 | } else { |
---|
| 2244 | filters = Elements.prototype.filterByTagName.call(filters, param[1]); |
---|
| 2245 | if (param[2]) filters = Elements.prototype.filterById.call(filters, param[2]); |
---|
| 2246 | } |
---|
| 2247 | if (param[3]) filters = Elements.prototype.filterByClassName.call(filters, param[3]); |
---|
| 2248 | if (param[4]) filters = Elements.prototype.filterByAttribute.call(filters, param[4], param[6], param[5]); |
---|
| 2249 | }, this); |
---|
| 2250 | return $$(filters); |
---|
| 2251 | }, |
---|
| 2252 | |
---|
| 2253 | /* |
---|
| 2254 | Property: getElementById |
---|
| 2255 | Targets an element with the specified id found inside the Element. Does not overwrite document.getElementById. |
---|
| 2256 | |
---|
| 2257 | Arguments: |
---|
| 2258 | id - the id of the element to find. |
---|
| 2259 | */ |
---|
| 2260 | |
---|
| 2261 | getElementById: function(id){ |
---|
| 2262 | var el = document.getElementById(id); |
---|
| 2263 | if (!el) return false; |
---|
| 2264 | for (var parent = el.parentNode; parent != this; parent = parent.parentNode){ |
---|
| 2265 | if (!parent) return false; |
---|
| 2266 | } |
---|
| 2267 | return el; |
---|
| 2268 | }, |
---|
| 2269 | |
---|
| 2270 | /* |
---|
| 2271 | Property: getElement |
---|
| 2272 | Same as <Element.getElements>, but returns only the first. Alternate syntax for <$E>, where filter is the Element. |
---|
| 2273 | */ |
---|
| 2274 | |
---|
| 2275 | getElement: function(selector){ |
---|
| 2276 | return this.getElementsBySelector(selector)[0]; |
---|
| 2277 | }, |
---|
| 2278 | |
---|
| 2279 | /* |
---|
| 2280 | Property: getElementsBySelector |
---|
| 2281 | Same as <Element.getElements>, but allows for comma separated selectors, as in css. Alternate syntax for <$$>, where filter is the Element. |
---|
| 2282 | |
---|
| 2283 | */ |
---|
| 2284 | |
---|
| 2285 | getElementsBySelector: function(selector){ |
---|
| 2286 | var els = []; |
---|
| 2287 | selector.split(',').each(function(sel){ |
---|
| 2288 | els.extend(this.getElements(sel)); |
---|
| 2289 | }, this); |
---|
| 2290 | return $$(els); |
---|
| 2291 | } |
---|
| 2292 | |
---|
| 2293 | }); |
---|
| 2294 | |
---|
| 2295 | document.extend = Object.extend; |
---|
| 2296 | |
---|
| 2297 | /* Section: document related functions */ |
---|
| 2298 | |
---|
| 2299 | document.extend({ |
---|
| 2300 | /* |
---|
| 2301 | Function: document.getElementsByClassName |
---|
| 2302 | Returns all the elements that match a specific class name. |
---|
| 2303 | Here for compatibility purposes. can also be written: document.getElements('.className'), or $$('.className') |
---|
| 2304 | */ |
---|
| 2305 | |
---|
| 2306 | getElementsByClassName: function(className){ |
---|
| 2307 | return document.getElements('.'+className); |
---|
| 2308 | }, |
---|
| 2309 | getElement: Element.prototype.getElement, |
---|
| 2310 | getElements: Element.prototype.getElements, |
---|
| 2311 | getElementsBySelector: Element.prototype.getElementsBySelector |
---|
| 2312 | |
---|
| 2313 | }); |
---|
| 2314 | |
---|
| 2315 | /* |
---|
| 2316 | Class: Elements |
---|
| 2317 | Methods for dom queries arrays, as <$$>. |
---|
| 2318 | */ |
---|
| 2319 | |
---|
| 2320 | Elements.extend({ |
---|
| 2321 | |
---|
| 2322 | //internal methods |
---|
| 2323 | |
---|
| 2324 | filterById: function(id, tag){ |
---|
| 2325 | var found = []; |
---|
| 2326 | this.each(function(el){ |
---|
| 2327 | if (el.id == id) found.push(el); |
---|
| 2328 | }); |
---|
| 2329 | return found; |
---|
| 2330 | }, |
---|
| 2331 | |
---|
| 2332 | filterByClassName: function(className){ |
---|
| 2333 | var found = []; |
---|
| 2334 | this.each(function(el){ |
---|
| 2335 | if (Element.prototype.hasClass.call(el, className)) found.push(el); |
---|
| 2336 | }); |
---|
| 2337 | return found; |
---|
| 2338 | }, |
---|
| 2339 | |
---|
| 2340 | filterByTagName: function(tagName){ |
---|
| 2341 | var found = []; |
---|
| 2342 | this.each(function(el){ |
---|
| 2343 | found.extend(el.getElementsByTagName(tagName)); |
---|
| 2344 | }); |
---|
| 2345 | return found; |
---|
| 2346 | }, |
---|
| 2347 | |
---|
| 2348 | filterByAttribute: function(name, value, operator){ |
---|
| 2349 | var found = []; |
---|
| 2350 | this.each(function(el){ |
---|
| 2351 | var att = el.getAttribute(name); |
---|
| 2352 | if (!att) return found; |
---|
| 2353 | if (!operator) return found.push(el); |
---|
| 2354 | |
---|
| 2355 | switch (operator){ |
---|
| 2356 | case '*=': if (att.test(value)) found.push(el); break; |
---|
| 2357 | case '=': if (att == value) found.push(el); break; |
---|
| 2358 | case '^=': if (att.test('^'+value)) found.push(el); break; |
---|
| 2359 | case '$=': if (att.test(value+'$')) found.push(el); |
---|
| 2360 | } |
---|
| 2361 | return found; |
---|
| 2362 | }); |
---|
| 2363 | return found; |
---|
| 2364 | } |
---|
| 2365 | |
---|
| 2366 | }); |
---|
| 2367 | |
---|
| 2368 | /* |
---|
| 2369 | Script: Hash.js |
---|
| 2370 | Contains the class Hash. |
---|
| 2371 | |
---|
| 2372 | Author: |
---|
| 2373 | Christophe Beyls <http://digitalia.be> |
---|
| 2374 | |
---|
| 2375 | License: |
---|
| 2376 | MIT-style license. |
---|
| 2377 | */ |
---|
| 2378 | |
---|
| 2379 | /* |
---|
| 2380 | Class: Hash |
---|
| 2381 | It wraps an object that it uses internally as a map. The user must use put(), get(), and remove() to add/change, retrieve and remove values, it must not access the internal object directly. With this implementation, null values are not allowed. |
---|
| 2382 | |
---|
| 2383 | Example: |
---|
| 2384 | (start code) |
---|
| 2385 | var hash = new Hash({a: 'hi', b: 'world', c: 'howdy'}); |
---|
| 2386 | hash.remove('b'); // b is removed. |
---|
| 2387 | hash.set('c', 'hello'); |
---|
| 2388 | hash.get('c'); // returns 'hello' |
---|
| 2389 | hash.length // returns 2 (a and b) |
---|
| 2390 | (end) |
---|
| 2391 | */ |
---|
| 2392 | |
---|
| 2393 | var Hash = new Class({ |
---|
| 2394 | |
---|
| 2395 | length: 0, |
---|
| 2396 | |
---|
| 2397 | initialize: function(obj) { |
---|
| 2398 | this.obj = {}; |
---|
| 2399 | for (var property in obj) { |
---|
| 2400 | this.obj[property] = obj[property]; |
---|
| 2401 | this.length++; |
---|
| 2402 | } |
---|
| 2403 | }, |
---|
| 2404 | |
---|
| 2405 | get: function(key) { |
---|
| 2406 | return this.obj[key]; |
---|
| 2407 | }, |
---|
| 2408 | |
---|
| 2409 | set: function(key, value) { |
---|
| 2410 | if (value == null) return false; |
---|
| 2411 | if (this.obj[key] == undefined) this.length++; |
---|
| 2412 | this.obj[key] = value; |
---|
| 2413 | return this; |
---|
| 2414 | }, |
---|
| 2415 | |
---|
| 2416 | remove: function(key) { |
---|
| 2417 | if (this.obj[key] == undefined) return false; |
---|
| 2418 | var obj = {}; |
---|
| 2419 | this.length--; |
---|
| 2420 | for (var property in this.obj){ |
---|
| 2421 | if (property != key) obj[property] = this.obj[property]; |
---|
| 2422 | } |
---|
| 2423 | this.obj = obj; |
---|
| 2424 | return this; |
---|
| 2425 | }, |
---|
| 2426 | |
---|
| 2427 | each: function(fn, bind) { |
---|
| 2428 | for (var property in this.obj) fn.call(bind || this, property, this.obj[property]); |
---|
| 2429 | }, |
---|
| 2430 | |
---|
| 2431 | extend: function(obj){ |
---|
| 2432 | this.initialize(Object.extend(this.obj, obj)); |
---|
| 2433 | return this; |
---|
| 2434 | }, |
---|
| 2435 | |
---|
| 2436 | empty: function() { |
---|
| 2437 | return (this.length == 0); |
---|
| 2438 | }, |
---|
| 2439 | |
---|
| 2440 | keys: function() { |
---|
| 2441 | var keys = []; |
---|
| 2442 | for (var property in this.obj) keys.push(property); |
---|
| 2443 | return keys; |
---|
| 2444 | }, |
---|
| 2445 | |
---|
| 2446 | values: function() { |
---|
| 2447 | var values = []; |
---|
| 2448 | for (var property in this.obj) values.push(this.obj[property]); |
---|
| 2449 | return values; |
---|
| 2450 | } |
---|
| 2451 | |
---|
| 2452 | }); |
---|
| 2453 | |
---|
| 2454 | /* |
---|
| 2455 | Function: $H |
---|
| 2456 | Shortcut to create an Hash from an Object. |
---|
| 2457 | */ |
---|
| 2458 | |
---|
| 2459 | function $H(obj) { |
---|
| 2460 | return new Hash(obj); |
---|
| 2461 | }; |
---|
| 2462 | |
---|
| 2463 | /* |
---|
| 2464 | Script: Color.js |
---|
| 2465 | Contains the Color class. |
---|
| 2466 | |
---|
| 2467 | Author: |
---|
| 2468 | Michael Jackson <http://ajaxon.com/michael> |
---|
| 2469 | |
---|
| 2470 | License: |
---|
| 2471 | MIT-style license. |
---|
| 2472 | */ |
---|
| 2473 | |
---|
| 2474 | /* |
---|
| 2475 | Class: Color |
---|
| 2476 | Creates a new Color Object, which is an array with some color specific methods. |
---|
| 2477 | |
---|
| 2478 | Example: |
---|
| 2479 | (start code) |
---|
| 2480 | var black = new Color('#000'); |
---|
| 2481 | var purple = new Color([255,0,255]); |
---|
| 2482 | // mix black with white and purple, each time at 10% of the new color |
---|
| 2483 | var darkpurple = black.mix('#fff', purple, 10); |
---|
| 2484 | $('myDiv').setStyle('background-color', darkpurple); |
---|
| 2485 | (end) |
---|
| 2486 | */ |
---|
| 2487 | |
---|
| 2488 | var Color = new Class({ |
---|
| 2489 | |
---|
| 2490 | initialize: function(color){ |
---|
| 2491 | if (color.mix && color.invert) return color; |
---|
| 2492 | var rgb = (color.push) ? color : color.hexToRgb(true); |
---|
| 2493 | return Object.extend(rgb, Color.prototype); |
---|
| 2494 | }, |
---|
| 2495 | |
---|
| 2496 | mix: function(){ |
---|
| 2497 | var colors = $A(arguments); |
---|
| 2498 | var alpha = 50; |
---|
| 2499 | if ($type(colors[colors.length-1]) == 'number') alpha = colors.pop(); |
---|
| 2500 | var rgb = this.copy(); |
---|
| 2501 | colors.each(function(color){ |
---|
| 2502 | color = new Color(color); |
---|
| 2503 | for (var i = 0; i < 3; i++) rgb[i] = Math.round((rgb[i] / 100 * (100 - alpha)) + (color[i] / 100 * alpha)); |
---|
| 2504 | }); |
---|
| 2505 | return new Color(rgb); |
---|
| 2506 | }, |
---|
| 2507 | |
---|
| 2508 | invert: function(){ |
---|
| 2509 | var rgb = []; |
---|
| 2510 | for (var i = 0; i < 3; i++) rgb.push(255 - this[i]); |
---|
| 2511 | return new Color(rgb); |
---|
| 2512 | } |
---|
| 2513 | |
---|
| 2514 | }); |
---|
| 2515 | |
---|
| 2516 | function $C(color){ |
---|
| 2517 | return new Color(color); |
---|
| 2518 | }; |
---|
| 2519 | |
---|
| 2520 | /* |
---|
| 2521 | Script: Window.Base.js |
---|
| 2522 | Contains Window.onDomReady and Window.disableImageCache |
---|
| 2523 | |
---|
| 2524 | License: |
---|
| 2525 | MIT-style license. |
---|
| 2526 | */ |
---|
| 2527 | |
---|
| 2528 | /* |
---|
| 2529 | Class: Window |
---|
| 2530 | Cross browser methods to get the window size, onDomReady method. |
---|
| 2531 | */ |
---|
| 2532 | |
---|
| 2533 | window.extend = Object.extend; |
---|
| 2534 | |
---|
| 2535 | window.extend({ |
---|
| 2536 | |
---|
| 2537 | /* |
---|
| 2538 | Function: window.disableImageCache |
---|
| 2539 | Disables background image chache for internex explorer, to prevent flickering. |
---|
| 2540 | To be called if you have effects with background images, and they flicker. |
---|
| 2541 | |
---|
| 2542 | Example: |
---|
| 2543 | Window.disableImageCache(); |
---|
| 2544 | */ |
---|
| 2545 | |
---|
| 2546 | disableImageCache: function(){ |
---|
| 2547 | if (this.ie6) try {document.execCommand("BackgroundImageCache", false, true);} catch (e){}; |
---|
| 2548 | }, |
---|
| 2549 | |
---|
| 2550 | addEvent: function(type, fn){ |
---|
| 2551 | if (type == 'domready'){ |
---|
| 2552 | if (this.loaded) fn(); |
---|
| 2553 | else if (!this.events || !this.events.domready){ |
---|
| 2554 | var domReady = function(){ |
---|
| 2555 | if (this.loaded) return; |
---|
| 2556 | this.loaded = true; |
---|
| 2557 | if (this.timer) this.timer = $clear(this.timer); |
---|
| 2558 | Element.prototype.fireEvent.call(this, 'domready'); |
---|
| 2559 | this.events.domready = null; |
---|
| 2560 | }.bind(this); |
---|
| 2561 | if (document.readyState && this.khtml){ //safari and konqueror |
---|
| 2562 | this.timer = function(){ |
---|
| 2563 | if (['loaded','complete'].test(document.readyState)) domReady(); |
---|
| 2564 | }.periodical(50); |
---|
| 2565 | } |
---|
| 2566 | else if (document.readyState && this.ie){ //ie |
---|
| 2567 | document.write("<script id=ie_ready defer src=javascript:void(0)><\/script>"); |
---|
| 2568 | $('ie_ready').onreadystatechange = function(){ |
---|
| 2569 | if (this.readyState == 'complete') domReady(); |
---|
| 2570 | }; |
---|
| 2571 | } else { //others |
---|
| 2572 | this.addEvent("load", domReady); |
---|
| 2573 | document.addEvent("DOMContentLoaded", domReady); |
---|
| 2574 | } |
---|
| 2575 | } |
---|
| 2576 | } |
---|
| 2577 | Element.prototype.addEvent.call(this, type, fn); |
---|
| 2578 | return this; |
---|
| 2579 | }, |
---|
| 2580 | |
---|
| 2581 | /* |
---|
| 2582 | Function: window.onDomReady |
---|
| 2583 | Executes the passed in function when the DOM is ready (when the document tree has loaded, not waiting for images). |
---|
| 2584 | Same as window.addEvent('domready', init); |
---|
| 2585 | |
---|
| 2586 | Credits: |
---|
| 2587 | (c) Dean Edwards/Matthias Miller/John Resig, remastered for mootools. Later touched up by Christophe Beyls <http://digitalia.be>. |
---|
| 2588 | |
---|
| 2589 | Arguments: |
---|
| 2590 | init - the function to execute when the DOM is ready |
---|
| 2591 | |
---|
| 2592 | Example: |
---|
| 2593 | > window.addEvent('domready', function(){alert('the dom is ready')}); |
---|
| 2594 | */ |
---|
| 2595 | |
---|
| 2596 | onDomReady: function(init){ |
---|
| 2597 | return this.addEvent('domready', init); |
---|
| 2598 | } |
---|
| 2599 | |
---|
| 2600 | }); |
---|
| 2601 | |
---|
| 2602 | /* |
---|
| 2603 | Script: Window.Size.js |
---|
| 2604 | Window cross-browser dimensions methods. |
---|
| 2605 | |
---|
| 2606 | License: |
---|
| 2607 | MIT-style license. |
---|
| 2608 | */ |
---|
| 2609 | |
---|
| 2610 | /* |
---|
| 2611 | Class: window |
---|
| 2612 | Cross browser methods to get the window size, onDomReady method. |
---|
| 2613 | */ |
---|
| 2614 | |
---|
| 2615 | window.extend({ |
---|
| 2616 | |
---|
| 2617 | /* |
---|
| 2618 | Property: getWidth |
---|
| 2619 | Returns an integer representing the width of the browser. |
---|
| 2620 | */ |
---|
| 2621 | |
---|
| 2622 | getWidth: function(){ |
---|
| 2623 | if (this.khtml || this.opera) return this.innerWidth; |
---|
| 2624 | else return document.documentElement.clientWidth || document.body.clientWidth; |
---|
| 2625 | }, |
---|
| 2626 | |
---|
| 2627 | /* |
---|
| 2628 | Property: getHeight |
---|
| 2629 | Returns an integer representing the height of the browser. |
---|
| 2630 | */ |
---|
| 2631 | |
---|
| 2632 | getHeight: function(){ |
---|
| 2633 | if (this.khtml || this.opera) return this.innerHeight; |
---|
| 2634 | return document.documentElement.clientHeight || document.body.clientHeight; |
---|
| 2635 | }, |
---|
| 2636 | |
---|
| 2637 | /* |
---|
| 2638 | Property: getScrollHeight |
---|
| 2639 | Returns an integer representing the scrollHeight of the window. |
---|
| 2640 | |
---|
| 2641 | See Also: |
---|
| 2642 | <http://developer.mozilla.org/en/docs/DOM:element.scrollHeight> |
---|
| 2643 | */ |
---|
| 2644 | |
---|
| 2645 | getScrollHeight: function(){ |
---|
| 2646 | return document.documentElement.scrollHeight; |
---|
| 2647 | }, |
---|
| 2648 | |
---|
| 2649 | /* |
---|
| 2650 | Property: getScrollWidth |
---|
| 2651 | Returns an integer representing the scrollWidth of the window. |
---|
| 2652 | |
---|
| 2653 | See Also: |
---|
| 2654 | <http://developer.mozilla.org/en/docs/DOM:element.scrollWidth> |
---|
| 2655 | */ |
---|
| 2656 | |
---|
| 2657 | getScrollWidth: function(){ |
---|
| 2658 | return document.documentElement.scrollWidth; |
---|
| 2659 | }, |
---|
| 2660 | |
---|
| 2661 | /* |
---|
| 2662 | Property: getScrollTop |
---|
| 2663 | Returns an integer representing the scrollTop of the window (the number of pixels the window has scrolled from the top). |
---|
| 2664 | |
---|
| 2665 | See Also: |
---|
| 2666 | <http://developer.mozilla.org/en/docs/DOM:element.scrollTop> |
---|
| 2667 | */ |
---|
| 2668 | |
---|
| 2669 | getScrollTop: function(){ |
---|
| 2670 | return this.pageYOffset || document.documentElement.scrollTop; |
---|
| 2671 | }, |
---|
| 2672 | |
---|
| 2673 | /* |
---|
| 2674 | Property: getScrollLeft |
---|
| 2675 | Returns an integer representing the scrollLeft of the window (the number of pixels the window has scrolled from the left). |
---|
| 2676 | |
---|
| 2677 | See Also: |
---|
| 2678 | <http://developer.mozilla.org/en/docs/DOM:element.scrollLeft> |
---|
| 2679 | */ |
---|
| 2680 | |
---|
| 2681 | getScrollLeft: function(){ |
---|
| 2682 | return this.pageXOffset || document.documentElement.scrollLeft; |
---|
| 2683 | }, |
---|
| 2684 | |
---|
| 2685 | /* |
---|
| 2686 | Property: getSize |
---|
| 2687 | Same as <Element.getSize> |
---|
| 2688 | */ |
---|
| 2689 | |
---|
| 2690 | getSize: function(){ |
---|
| 2691 | return { |
---|
| 2692 | 'scroll': {'x': this.getScrollLeft(), 'y': this.getScrollTop()}, |
---|
| 2693 | 'size': {'x': this.getWidth(), 'y': this.getHeight()}, |
---|
| 2694 | 'scrollSize': {'x': this.getScrollWidth(), 'y': this.getScrollHeight()} |
---|
| 2695 | }; |
---|
| 2696 | }, |
---|
| 2697 | |
---|
| 2698 | //ignore |
---|
| 2699 | getOffsets: function(){return {'x': 0, 'y': 0}} |
---|
| 2700 | |
---|
| 2701 | }); |
---|
| 2702 | |
---|
| 2703 | /* |
---|
| 2704 | Script: Fx.Base.js |
---|
| 2705 | Contains <Fx.Base> and two Transitions. |
---|
| 2706 | |
---|
| 2707 | Author: |
---|
| 2708 | Valerio Proietti, <http://mad4milk.net> |
---|
| 2709 | |
---|
| 2710 | License: |
---|
| 2711 | MIT-style license. |
---|
| 2712 | */ |
---|
| 2713 | |
---|
| 2714 | var Fx = {}; |
---|
| 2715 | |
---|
| 2716 | /* |
---|
| 2717 | Class: Fx.Base |
---|
| 2718 | Base class for the Mootools Effects (Moo.Fx) library. |
---|
| 2719 | |
---|
| 2720 | Options: |
---|
| 2721 | onStart - the function to execute as the effect begins; nothing (<Class.empty>) by default. |
---|
| 2722 | onComplete - the function to execute after the effect has processed; nothing (<Class.empty>) by default. |
---|
| 2723 | transition - the equation to use for the effect see <Fx.Transitions>; default is <Fx.Transitions.sineInOut> |
---|
| 2724 | duration - the duration of the effect in ms; 500 is the default. |
---|
| 2725 | unit - the unit is 'px' by default (other values include things like 'em' for fonts or '%'). |
---|
| 2726 | wait - boolean: to wait or not to wait for a current transition to end before running another of the same instance. defaults to true. |
---|
| 2727 | fps - the frames per second for the transition; default is 30 |
---|
| 2728 | */ |
---|
| 2729 | |
---|
| 2730 | Fx.Base = new Class({ |
---|
| 2731 | |
---|
| 2732 | getOptions: function(){ |
---|
| 2733 | return { |
---|
| 2734 | onStart: Class.empty, |
---|
| 2735 | onComplete: Class.empty, |
---|
| 2736 | onCancel: Class.empty, |
---|
| 2737 | transition: Fx.Transitions.sineInOut, |
---|
| 2738 | duration: 500, |
---|
| 2739 | unit: 'px', |
---|
| 2740 | wait: true, |
---|
| 2741 | fps: 50 |
---|
| 2742 | }; |
---|
| 2743 | }, |
---|
| 2744 | |
---|
| 2745 | initialize: function(options){ |
---|
| 2746 | this.element = this.element || null; |
---|
| 2747 | this.setOptions(this.getOptions(), options); |
---|
| 2748 | if (this.options.initialize) this.options.initialize.call(this); |
---|
| 2749 | }, |
---|
| 2750 | |
---|
| 2751 | step: function(){ |
---|
| 2752 | var time = new Date().getTime(); |
---|
| 2753 | if (time < this.time + this.options.duration){ |
---|
| 2754 | this.cTime = time - this.time; |
---|
| 2755 | this.setNow(); |
---|
| 2756 | this.increase(); |
---|
| 2757 | } else { |
---|
| 2758 | this.stop(true); |
---|
| 2759 | this.now = this.to; |
---|
| 2760 | this.increase(); |
---|
| 2761 | this.fireEvent('onComplete', this.element, 10); |
---|
| 2762 | this.callChain(); |
---|
| 2763 | } |
---|
| 2764 | }, |
---|
| 2765 | |
---|
| 2766 | /* |
---|
| 2767 | Property: set |
---|
| 2768 | Immediately sets the value with no transition. |
---|
| 2769 | |
---|
| 2770 | Arguments: |
---|
| 2771 | to - the point to jump to |
---|
| 2772 | |
---|
| 2773 | Example: |
---|
| 2774 | >var myFx = new Fx.Style('myElement', 'opacity').set(0); //will make it immediately transparent |
---|
| 2775 | */ |
---|
| 2776 | |
---|
| 2777 | set: function(to){ |
---|
| 2778 | this.now = to; |
---|
| 2779 | this.increase(); |
---|
| 2780 | return this; |
---|
| 2781 | }, |
---|
| 2782 | |
---|
| 2783 | setNow: function(){ |
---|
| 2784 | this.now = this.compute(this.from, this.to); |
---|
| 2785 | }, |
---|
| 2786 | |
---|
| 2787 | compute: function(from, to){ |
---|
| 2788 | return this.options.transition(this.cTime, from, (to - from), this.options.duration); |
---|
| 2789 | }, |
---|
| 2790 | |
---|
| 2791 | /* |
---|
| 2792 | Property: start |
---|
| 2793 | Executes an effect from one position to the other. |
---|
| 2794 | |
---|
| 2795 | Arguments: |
---|
| 2796 | from - integer: staring value |
---|
| 2797 | to - integer: the ending value |
---|
| 2798 | |
---|
| 2799 | Examples: |
---|
| 2800 | >var myFx = new Fx.Style('myElement', 'opacity').start(0,1); //display a transition from transparent to opaque. |
---|
| 2801 | */ |
---|
| 2802 | |
---|
| 2803 | start: function(from, to){ |
---|
| 2804 | if (!this.options.wait) this.stop(); |
---|
| 2805 | else if (this.timer) return this; |
---|
| 2806 | this.from = from; |
---|
| 2807 | this.to = to; |
---|
| 2808 | this.time = new Date().getTime(); |
---|
| 2809 | this.timer = this.step.periodical(Math.round(1000/this.options.fps), this); |
---|
| 2810 | this.fireEvent('onStart', this.element); |
---|
| 2811 | return this; |
---|
| 2812 | }, |
---|
| 2813 | |
---|
| 2814 | /* |
---|
| 2815 | Property: stop |
---|
| 2816 | Stops the transition. |
---|
| 2817 | */ |
---|
| 2818 | |
---|
| 2819 | stop: function(end){ |
---|
| 2820 | if (!this.timer) return this; |
---|
| 2821 | this.timer = $clear(this.timer); |
---|
| 2822 | if (!end) this.fireEvent('onCancel', this.element); |
---|
| 2823 | return this; |
---|
| 2824 | }, |
---|
| 2825 | |
---|
| 2826 | //compat |
---|
| 2827 | custom: function(from, to){return this.start(from, to)}, |
---|
| 2828 | clearTimer: function(end){return this.stop(end)} |
---|
| 2829 | |
---|
| 2830 | }); |
---|
| 2831 | |
---|
| 2832 | Fx.Base.implement(new Chain); |
---|
| 2833 | Fx.Base.implement(new Events); |
---|
| 2834 | Fx.Base.implement(new Options); |
---|
| 2835 | |
---|
| 2836 | /* |
---|
| 2837 | Class: Fx.Transitions |
---|
| 2838 | A collection of transition equations for use with the <Fx> Class. |
---|
| 2839 | |
---|
| 2840 | See Also: |
---|
| 2841 | <Fxtransitions.js> for a whole bunch of transitions. |
---|
| 2842 | |
---|
| 2843 | Credits: |
---|
| 2844 | Easing Equations, (c) 2003 Robert Penner (http://www.robertpenner.com/easing/), Open Source BSD License. |
---|
| 2845 | */ |
---|
| 2846 | |
---|
| 2847 | Fx.Transitions = { |
---|
| 2848 | |
---|
| 2849 | /* Property: linear */ |
---|
| 2850 | linear: function(t, b, c, d){ |
---|
| 2851 | return c*t/d + b; |
---|
| 2852 | }, |
---|
| 2853 | |
---|
| 2854 | /* Property: sineInOut */ |
---|
| 2855 | sineInOut: function(t, b, c, d){ |
---|
| 2856 | return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; |
---|
| 2857 | } |
---|
| 2858 | |
---|
| 2859 | }; |
---|
| 2860 | |
---|
| 2861 | /* |
---|
| 2862 | Script: Fx.CSS.js |
---|
| 2863 | Css parsing class for effects. Required by <Fx.Style>, <Fx.Styles>, <Fx.Elements>. No documentation needed, as its used internally. |
---|
| 2864 | |
---|
| 2865 | Author: |
---|
| 2866 | Christophe Beyls, <http://www.digitalia.be>, |
---|
| 2867 | Valerio Proietti, <http://mad4milk.net> |
---|
| 2868 | |
---|
| 2869 | License: |
---|
| 2870 | MIT-style license. |
---|
| 2871 | */ |
---|
| 2872 | |
---|
| 2873 | Fx.CSS = { |
---|
| 2874 | |
---|
| 2875 | select: function(property, to){ |
---|
| 2876 | if (property.test('color', 'i')) return this.Color; |
---|
| 2877 | if (to.test && to.test(' ')) return this.Multi; |
---|
| 2878 | return this.Single; |
---|
| 2879 | }, |
---|
| 2880 | |
---|
| 2881 | parse: function(el, property, fromTo){ |
---|
| 2882 | if (!fromTo.push) fromTo = [fromTo]; |
---|
| 2883 | var from = fromTo[0], to = fromTo[1]; |
---|
| 2884 | if (!to && to != 0){ |
---|
| 2885 | to = from; |
---|
| 2886 | from = el.getStyle(property); |
---|
| 2887 | } |
---|
| 2888 | var css = this.select(property, to); |
---|
| 2889 | return {from: css.parse(from), to: css.parse(to), css: css}; |
---|
| 2890 | } |
---|
| 2891 | |
---|
| 2892 | }; |
---|
| 2893 | |
---|
| 2894 | Fx.CSS.Single = { |
---|
| 2895 | |
---|
| 2896 | parse: function(value){ |
---|
| 2897 | return parseFloat(value); |
---|
| 2898 | }, |
---|
| 2899 | |
---|
| 2900 | getNow: function(from, to, fx){ |
---|
| 2901 | return fx.compute(from, to); |
---|
| 2902 | }, |
---|
| 2903 | |
---|
| 2904 | getValue: function(value, unit){ |
---|
| 2905 | return value+unit; |
---|
| 2906 | } |
---|
| 2907 | |
---|
| 2908 | }; |
---|
| 2909 | |
---|
| 2910 | Fx.CSS.Multi = { |
---|
| 2911 | |
---|
| 2912 | parse: function(value){ |
---|
| 2913 | return value.push ? value : value.split(' ').map(function(v){ |
---|
| 2914 | return parseFloat(v); |
---|
| 2915 | }); |
---|
| 2916 | }, |
---|
| 2917 | |
---|
| 2918 | getNow: function(from, to, fx){ |
---|
| 2919 | var now = []; |
---|
| 2920 | for (var i = 0; i < from.length; i++) now[i] = fx.compute(from[i], to[i]); |
---|
| 2921 | return now; |
---|
| 2922 | }, |
---|
| 2923 | |
---|
| 2924 | getValue: function(value, unit){ |
---|
| 2925 | return value.join(unit+' ')+unit; |
---|
| 2926 | } |
---|
| 2927 | |
---|
| 2928 | }; |
---|
| 2929 | |
---|
| 2930 | Fx.CSS.Color = { |
---|
| 2931 | |
---|
| 2932 | parse: function(value){ |
---|
| 2933 | return value.push ? value : value.hexToRgb(true); |
---|
| 2934 | }, |
---|
| 2935 | |
---|
| 2936 | getNow: function(from, to, fx){ |
---|
| 2937 | var now = []; |
---|
| 2938 | for (var i = 0; i < from.length; i++) now[i] = Math.round(fx.compute(from[i], to[i])); |
---|
| 2939 | return now; |
---|
| 2940 | }, |
---|
| 2941 | |
---|
| 2942 | getValue: function(value){ |
---|
| 2943 | return 'rgb('+value.join(',')+')'; |
---|
| 2944 | } |
---|
| 2945 | |
---|
| 2946 | }; |
---|
| 2947 | |
---|
| 2948 | /* |
---|
| 2949 | Script: Fx.Style.js |
---|
| 2950 | Contains <Fx.Style> |
---|
| 2951 | |
---|
| 2952 | Author: |
---|
| 2953 | Valerio Proietti, <http://mad4milk.net> |
---|
| 2954 | |
---|
| 2955 | License: |
---|
| 2956 | MIT-style license. |
---|
| 2957 | */ |
---|
| 2958 | |
---|
| 2959 | /* |
---|
| 2960 | Class: Fx.Style |
---|
| 2961 | The Style effect; Extends <Fx.Base>, inherits all its properties. Used to transition any css property from one value to another. Includes colors. |
---|
| 2962 | Colors must be in hex format. |
---|
| 2963 | |
---|
| 2964 | Arguments: |
---|
| 2965 | el - the $(element) to apply the style transition to |
---|
| 2966 | property - the property to transition |
---|
| 2967 | options - the Fx.Base options (see: <Fx.Base>) |
---|
| 2968 | |
---|
| 2969 | Example: |
---|
| 2970 | >var marginChange = new Fx.Style('myElement', 'margin-top', {duration:500}); |
---|
| 2971 | >marginChange.start(10, 100); |
---|
| 2972 | */ |
---|
| 2973 | |
---|
| 2974 | Fx.Style = Fx.Base.extend({ |
---|
| 2975 | |
---|
| 2976 | initialize: function(el, property, options){ |
---|
| 2977 | this.element = $(el); |
---|
| 2978 | this.property = property; |
---|
| 2979 | this.parent(options); |
---|
| 2980 | }, |
---|
| 2981 | |
---|
| 2982 | /* |
---|
| 2983 | Property: hide |
---|
| 2984 | Same as <Fx.Base.set>(0) |
---|
| 2985 | */ |
---|
| 2986 | |
---|
| 2987 | hide: function(){ |
---|
| 2988 | return this.set(0); |
---|
| 2989 | }, |
---|
| 2990 | |
---|
| 2991 | setNow: function(){ |
---|
| 2992 | this.now = this.css.getNow(this.from, this.to, this); |
---|
| 2993 | }, |
---|
| 2994 | |
---|
| 2995 | set: function(to){ |
---|
| 2996 | this.css = Fx.CSS.select(this.property, to); |
---|
| 2997 | return this.parent(this.css.parse(to)); |
---|
| 2998 | }, |
---|
| 2999 | |
---|
| 3000 | /* |
---|
| 3001 | Property: start |
---|
| 3002 | displays the transition to the value/values passed in |
---|
| 3003 | |
---|
| 3004 | Example: |
---|
| 3005 | (start code) |
---|
| 3006 | var var marginChange = new Fx.Style('myElement', 'margin-top', {duration:500}); |
---|
| 3007 | marginChange.start(10); //tries to read current margin top value and goes from current to 10 |
---|
| 3008 | (end) |
---|
| 3009 | */ |
---|
| 3010 | |
---|
| 3011 | start: function(from, to){ |
---|
| 3012 | if (this.timer && this.options.wait) return this; |
---|
| 3013 | var parsed = Fx.CSS.parse(this.element, this.property, [from, to]); |
---|
| 3014 | this.css = parsed.css; |
---|
| 3015 | return this.parent(parsed.from, parsed.to); |
---|
| 3016 | }, |
---|
| 3017 | |
---|
| 3018 | increase: function(){ |
---|
| 3019 | this.element.setStyle(this.property, this.css.getValue(this.now, this.options.unit)); |
---|
| 3020 | } |
---|
| 3021 | |
---|
| 3022 | }); |
---|
| 3023 | |
---|
| 3024 | /* |
---|
| 3025 | Class: Element |
---|
| 3026 | Custom class to allow all of its methods to be used with any DOM element via the dollar function <$>. |
---|
| 3027 | */ |
---|
| 3028 | |
---|
| 3029 | Element.extend({ |
---|
| 3030 | |
---|
| 3031 | /* |
---|
| 3032 | Property: effect |
---|
| 3033 | Applies an <Fx.Style> to the Element; This a shortcut for <Fx.Style>. |
---|
| 3034 | |
---|
| 3035 | Example: |
---|
| 3036 | >var myEffect = $('myElement').effect('height', {duration: 1000, transition: Fx.Transitions.linear}); |
---|
| 3037 | >myEffect.start(10, 100); |
---|
| 3038 | */ |
---|
| 3039 | |
---|
| 3040 | effect: function(property, options){ |
---|
| 3041 | return new Fx.Style(this, property, options); |
---|
| 3042 | } |
---|
| 3043 | |
---|
| 3044 | }); |
---|
| 3045 | |
---|
| 3046 | /* |
---|
| 3047 | Script: Fx.Styles.js |
---|
| 3048 | Contains <Fx.Styles> |
---|
| 3049 | |
---|
| 3050 | Author: |
---|
| 3051 | Valerio Proietti, <http://mad4milk.net> |
---|
| 3052 | |
---|
| 3053 | License: |
---|
| 3054 | MIT-style license. |
---|
| 3055 | */ |
---|
| 3056 | |
---|
| 3057 | /* |
---|
| 3058 | Class: Fx.Styles |
---|
| 3059 | Allows you to animate multiple css properties at once; Extends <Fx.Base>, inherits all its properties. Includes colors. |
---|
| 3060 | Colors must be in hex format. |
---|
| 3061 | |
---|
| 3062 | Arguments: |
---|
| 3063 | el - the $(element) to apply the styles transition to |
---|
| 3064 | options - the fx options (see: <Fx.Base>) |
---|
| 3065 | |
---|
| 3066 | Example: |
---|
| 3067 | (start code) |
---|
| 3068 | var myEffects = new Fx.Styles('myElement', {duration: 1000, transition: Fx.Transitions.linear}); |
---|
| 3069 | |
---|
| 3070 | //height from 10 to 100 and width from 900 to 300 |
---|
| 3071 | myEffects.start({ |
---|
| 3072 | 'height': [10, 100], |
---|
| 3073 | 'width': [900, 300] |
---|
| 3074 | }); |
---|
| 3075 | |
---|
| 3076 | //or height from current height to 100 and width from current width to 300 |
---|
| 3077 | myEffects.start({ |
---|
| 3078 | 'height': 100, |
---|
| 3079 | 'width': 300 |
---|
| 3080 | }); |
---|
| 3081 | (end) |
---|
| 3082 | */ |
---|
| 3083 | |
---|
| 3084 | Fx.Styles = Fx.Base.extend({ |
---|
| 3085 | |
---|
| 3086 | initialize: function(el, options){ |
---|
| 3087 | this.element = $(el); |
---|
| 3088 | this.parent(options); |
---|
| 3089 | }, |
---|
| 3090 | |
---|
| 3091 | setNow: function(){ |
---|
| 3092 | for (var p in this.from) this.now[p] = this.css[p].getNow(this.from[p], this.to[p], this); |
---|
| 3093 | }, |
---|
| 3094 | |
---|
| 3095 | set: function(to){ |
---|
| 3096 | var parsed = {}; |
---|
| 3097 | this.css = {}; |
---|
| 3098 | for (var p in to){ |
---|
| 3099 | this.css[p] = Fx.CSS.select(p, to[p]); |
---|
| 3100 | parsed[p] = this.css[p].parse(to[p]); |
---|
| 3101 | } |
---|
| 3102 | return this.parent(parsed); |
---|
| 3103 | }, |
---|
| 3104 | |
---|
| 3105 | /* |
---|
| 3106 | Property: start |
---|
| 3107 | The function you'll actually use to execute a transition. |
---|
| 3108 | |
---|
| 3109 | Arguments: |
---|
| 3110 | an object |
---|
| 3111 | |
---|
| 3112 | Example: |
---|
| 3113 | see <Fx.Styles> |
---|
| 3114 | */ |
---|
| 3115 | |
---|
| 3116 | start: function(obj){ |
---|
| 3117 | if (this.timer && this.options.wait) return this; |
---|
| 3118 | this.now = {}; |
---|
| 3119 | this.css = {}; |
---|
| 3120 | var from = {}, to = {}; |
---|
| 3121 | for (var p in obj){ |
---|
| 3122 | var parsed = Fx.CSS.parse(this.element, p, obj[p]); |
---|
| 3123 | from[p] = parsed.from; |
---|
| 3124 | to[p] = parsed.to; |
---|
| 3125 | this.css[p] = parsed.css; |
---|
| 3126 | } |
---|
| 3127 | return this.parent(from, to); |
---|
| 3128 | }, |
---|
| 3129 | |
---|
| 3130 | increase: function(){ |
---|
| 3131 | for (var p in this.now) this.element.setStyle(p, this.css[p].getValue(this.now[p], this.options.unit)); |
---|
| 3132 | } |
---|
| 3133 | |
---|
| 3134 | }); |
---|
| 3135 | |
---|
| 3136 | /* |
---|
| 3137 | Class: Element |
---|
| 3138 | Custom class to allow all of its methods to be used with any DOM element via the dollar function <$>. |
---|
| 3139 | */ |
---|
| 3140 | |
---|
| 3141 | Element.extend({ |
---|
| 3142 | |
---|
| 3143 | /* |
---|
| 3144 | Property: effects |
---|
| 3145 | Applies an <Fx.Styles> to the Element; This a shortcut for <Fx.Styles>. |
---|
| 3146 | |
---|
| 3147 | Example: |
---|
| 3148 | >var myEffects = $(myElement).effects({duration: 1000, transition: Fx.Transitions.sineInOut}); |
---|
| 3149 | >myEffects.start({'height': [10, 100], 'width': [900, 300]}); |
---|
| 3150 | */ |
---|
| 3151 | |
---|
| 3152 | effects: function(options){ |
---|
| 3153 | return new Fx.Styles(this, options); |
---|
| 3154 | } |
---|
| 3155 | |
---|
| 3156 | }); |
---|
| 3157 | |
---|
| 3158 | /* |
---|
| 3159 | Script: Fx.Elements.js |
---|
| 3160 | Contains <Fx.Elements> |
---|
| 3161 | |
---|
| 3162 | Author: |
---|
| 3163 | Valerio Proietti, <http://mad4milk.net> |
---|
| 3164 | |
---|
| 3165 | License: |
---|
| 3166 | MIT-style license. |
---|
| 3167 | */ |
---|
| 3168 | |
---|
| 3169 | /* |
---|
| 3170 | Class: Fx.Elements |
---|
| 3171 | Fx.Elements allows you to apply any number of styles transitions to a selection of elements. Includes colors (must be in hex format). |
---|
| 3172 | |
---|
| 3173 | Arguments: |
---|
| 3174 | elements - a collection of elements the effects will be applied to. |
---|
| 3175 | options - same as <Fx.Base> options. |
---|
| 3176 | */ |
---|
| 3177 | |
---|
| 3178 | Fx.Elements = Fx.Base.extend({ |
---|
| 3179 | |
---|
| 3180 | initialize: function(elements, options){ |
---|
| 3181 | this.elements = $$(elements); |
---|
| 3182 | this.parent(options); |
---|
| 3183 | }, |
---|
| 3184 | |
---|
| 3185 | setNow: function(){ |
---|
| 3186 | for (var i in this.from){ |
---|
| 3187 | var iFrom = this.from[i], iTo = this.to[i], iCss = this.css[i], iNow = this.now[i] = {}; |
---|
| 3188 | for (var p in iFrom) iNow[p] = iCss[p].getNow(iFrom[p], iTo[p], this); |
---|
| 3189 | } |
---|
| 3190 | }, |
---|
| 3191 | |
---|
| 3192 | set: function(to){ |
---|
| 3193 | var parsed = {}; |
---|
| 3194 | this.css = {}; |
---|
| 3195 | for (var i in to){ |
---|
| 3196 | var iTo = to[i], iCss = this.css[i] = {}, iParsed = parsed[i] = {}; |
---|
| 3197 | for (var p in iTo){ |
---|
| 3198 | iCss[p] = Fx.CSS.select(p, iTo[p]); |
---|
| 3199 | iParsed[p] = iCss[p].parse(iTo[p]); |
---|
| 3200 | } |
---|
| 3201 | } |
---|
| 3202 | return this.parent(parsed); |
---|
| 3203 | }, |
---|
| 3204 | |
---|
| 3205 | /* |
---|
| 3206 | Property: start |
---|
| 3207 | Applies the passed in style transitions to each object named (see example). Each item in the collection is refered to as a numerical string ("1" for instance). The first item is "0", the second "1", etc. |
---|
| 3208 | |
---|
| 3209 | Example: |
---|
| 3210 | (start code) |
---|
| 3211 | var myElementsEffects = new Fx.Elements($$('a')); |
---|
| 3212 | myElementsEffects.start({ |
---|
| 3213 | '0': { //let's change the first element's opacity and width |
---|
| 3214 | 'opacity': [0,1], |
---|
| 3215 | 'width': [100,200] |
---|
| 3216 | }, |
---|
| 3217 | '1': { //and the second one's opacity |
---|
| 3218 | 'opacity': [0.2, 0.5] |
---|
| 3219 | } |
---|
| 3220 | }); |
---|
| 3221 | (end) |
---|
| 3222 | */ |
---|
| 3223 | |
---|
| 3224 | start: function(obj){ |
---|
| 3225 | if (this.timer && this.options.wait) return this; |
---|
| 3226 | this.now = {}; |
---|
| 3227 | this.css = {}; |
---|
| 3228 | var from = {}, to = {}; |
---|
| 3229 | for (var i in obj){ |
---|
| 3230 | var iProps = obj[i], iFrom = from[i] = {}, iTo = to[i] = {}, iCss = this.css[i] = {}; |
---|
| 3231 | for (var p in iProps){ |
---|
| 3232 | var parsed = Fx.CSS.parse(this.elements[i], p, iProps[p]); |
---|
| 3233 | iFrom[p] = parsed.from; |
---|
| 3234 | iTo[p] = parsed.to; |
---|
| 3235 | iCss[p] = parsed.css; |
---|
| 3236 | } |
---|
| 3237 | } |
---|
| 3238 | return this.parent(from, to); |
---|
| 3239 | }, |
---|
| 3240 | |
---|
| 3241 | increase: function(){ |
---|
| 3242 | for (var i in this.now){ |
---|
| 3243 | var iNow = this.now[i], iCss = this.css[i]; |
---|
| 3244 | for (var p in iNow) this.elements[i].setStyle(p, iCss[p].getValue(iNow[p], this.options.unit)); |
---|
| 3245 | } |
---|
| 3246 | } |
---|
| 3247 | |
---|
| 3248 | }); |
---|
| 3249 | |
---|
| 3250 | /* |
---|
| 3251 | Script: Fx.Scroll.js |
---|
| 3252 | Contains <Fx.Scroll> |
---|
| 3253 | |
---|
| 3254 | Author: |
---|
| 3255 | Valerio Proietti, <http://mad4milk.net> |
---|
| 3256 | |
---|
| 3257 | License: |
---|
| 3258 | MIT-style license. |
---|
| 3259 | */ |
---|
| 3260 | |
---|
| 3261 | /* |
---|
| 3262 | Class: Fx.Scroll |
---|
| 3263 | Scroll any element with an overflow, including the window element. |
---|
| 3264 | |
---|
| 3265 | Arguments: |
---|
| 3266 | element - the element to scroll |
---|
| 3267 | options - same as <Fx.Base> options. |
---|
| 3268 | */ |
---|
| 3269 | |
---|
| 3270 | Fx.Scroll = Fx.Base.extend({ |
---|
| 3271 | |
---|
| 3272 | initialize: function(element, options){ |
---|
| 3273 | this.now = []; |
---|
| 3274 | this.element = $(element); |
---|
| 3275 | this.addEvent('onStart', function(){ |
---|
| 3276 | this.element.addEvent('mousewheel', this.stop.bind(this, false)); |
---|
| 3277 | }.bind(this)); |
---|
| 3278 | this.removeEvent('onComplete', function(){ |
---|
| 3279 | this.element.removeEvent('mousewheel', this.stop.bind(this, false)); |
---|
| 3280 | }.bind(this)); |
---|
| 3281 | this.parent(options); |
---|
| 3282 | }, |
---|
| 3283 | |
---|
| 3284 | setNow: function(){ |
---|
| 3285 | for (var i = 0; i < 2; i++) this.now[i] = this.compute(this.from[i], this.to[i]); |
---|
| 3286 | }, |
---|
| 3287 | |
---|
| 3288 | /* |
---|
| 3289 | Property: scrollTo |
---|
| 3290 | Scrolls the chosen element to the x/y coordinates. |
---|
| 3291 | |
---|
| 3292 | Arguments: |
---|
| 3293 | x - the x coordinate to scroll the element to |
---|
| 3294 | y - the y coordinate to scroll the element to |
---|
| 3295 | */ |
---|
| 3296 | |
---|
| 3297 | scrollTo: function(x, y){ |
---|
| 3298 | if (this.timer && this.options.wait) return this; |
---|
| 3299 | var el = this.element.getSize(); |
---|
| 3300 | var values = {'x': x, 'y': y}; |
---|
| 3301 | for (var z in el.size){ |
---|
| 3302 | var max = el.scrollSize[z] - el.size[z]; |
---|
| 3303 | if ($chk(values[z])) values[z] = ($type(values[z]) == 'number') ? Math.max(Math.min(values[z], max), 0) : max; |
---|
| 3304 | else values[z] = el.scroll[z]; |
---|
| 3305 | } |
---|
| 3306 | return this.start([el.scroll.x, el.scroll.y], [values.x, values.y]); |
---|
| 3307 | }, |
---|
| 3308 | |
---|
| 3309 | /* |
---|
| 3310 | Property: toTop |
---|
| 3311 | Scrolls the chosen element to its maximum top. |
---|
| 3312 | */ |
---|
| 3313 | |
---|
| 3314 | toTop: function(){ |
---|
| 3315 | return this.scrollTo(false, 0); |
---|
| 3316 | }, |
---|
| 3317 | |
---|
| 3318 | /* |
---|
| 3319 | Property: toBottom |
---|
| 3320 | Scrolls the chosen element to its maximum bottom. |
---|
| 3321 | */ |
---|
| 3322 | |
---|
| 3323 | toBottom: function(){ |
---|
| 3324 | return this.scrollTo(false, 'full'); |
---|
| 3325 | }, |
---|
| 3326 | |
---|
| 3327 | /* |
---|
| 3328 | Property: toLeft |
---|
| 3329 | Scrolls the chosen element to its maximum left. |
---|
| 3330 | */ |
---|
| 3331 | |
---|
| 3332 | toLeft: function(){ |
---|
| 3333 | return this.scrollTo(0, false); |
---|
| 3334 | }, |
---|
| 3335 | |
---|
| 3336 | /* |
---|
| 3337 | Property: toRight |
---|
| 3338 | Scrolls the chosen element to its maximum right. |
---|
| 3339 | */ |
---|
| 3340 | |
---|
| 3341 | toRight: function(){ |
---|
| 3342 | return this.scrollTo('full', false); |
---|
| 3343 | }, |
---|
| 3344 | |
---|
| 3345 | /* |
---|
| 3346 | Property: toElement |
---|
| 3347 | Scrolls the specified element to the position the passed in element is found. Only usable if the chosen element is == window. |
---|
| 3348 | |
---|
| 3349 | Arguments: |
---|
| 3350 | el - the $(element) to scroll the window to |
---|
| 3351 | */ |
---|
| 3352 | |
---|
| 3353 | toElement: function(el){ |
---|
| 3354 | return this.scrollTo($(el).getLeft(), $(el).getTop()); |
---|
| 3355 | }, |
---|
| 3356 | |
---|
| 3357 | increase: function(){ |
---|
| 3358 | this.element.scrollTo(this.now[0], this.now[1]); |
---|
| 3359 | } |
---|
| 3360 | |
---|
| 3361 | }); |
---|
| 3362 | |
---|
| 3363 | /* |
---|
| 3364 | Script: Fx.Slide.js |
---|
| 3365 | Contains <Fx.Slide> |
---|
| 3366 | |
---|
| 3367 | Author: |
---|
| 3368 | Valerio Proietti, <http://mad4milk.net> |
---|
| 3369 | |
---|
| 3370 | License: |
---|
| 3371 | MIT-style license. |
---|
| 3372 | */ |
---|
| 3373 | |
---|
| 3374 | /* |
---|
| 3375 | Class: Fx.Slide |
---|
| 3376 | The slide effect; slides an element in horizontally or vertically, the contents will fold inside. Extends <Fx.Base>, inherits all its properties. |
---|
| 3377 | |
---|
| 3378 | Note: |
---|
| 3379 | This effect works on any block element, but the element *cannot be positioned*; no margins or absolute positions. To position the element, put it inside another element (a wrapper div, for instance) and position that instead. |
---|
| 3380 | |
---|
| 3381 | Options: |
---|
| 3382 | mode - set it to vertical or horizontal. Defaults to vertical. |
---|
| 3383 | and all the <Fx.Base> options |
---|
| 3384 | |
---|
| 3385 | Example: |
---|
| 3386 | (start code) |
---|
| 3387 | var mySlider = new Fx.Slide('myElement', {duration: 500}); |
---|
| 3388 | mySlider.toggle() //toggle the slider up and down. |
---|
| 3389 | (end) |
---|
| 3390 | */ |
---|
| 3391 | |
---|
| 3392 | Fx.Slide = Fx.Base.extend({ |
---|
| 3393 | |
---|
| 3394 | initialize: function(el, options){ |
---|
| 3395 | this.element = $(el).setStyle('margin', 0); |
---|
| 3396 | this.wrapper = new Element('div').injectAfter(this.element).setStyle('overflow', 'hidden').adopt(this.element); |
---|
| 3397 | this.setOptions({'mode': 'vertical'}, options); |
---|
| 3398 | this.now = []; |
---|
| 3399 | this.parent(this.options); |
---|
| 3400 | }, |
---|
| 3401 | |
---|
| 3402 | setNow: function(){ |
---|
| 3403 | for (var i = 0; i < 2; i++) this.now[i] = this.compute(this.from[i], this.to[i]); |
---|
| 3404 | }, |
---|
| 3405 | |
---|
| 3406 | vertical: function(){ |
---|
| 3407 | this.margin = 'top'; |
---|
| 3408 | this.layout = 'height'; |
---|
| 3409 | this.offset = this.element.offsetHeight; |
---|
| 3410 | return [this.element.getStyle('margin-top').toInt(), this.wrapper.getStyle('height').toInt()]; |
---|
| 3411 | }, |
---|
| 3412 | |
---|
| 3413 | horizontal: function(){ |
---|
| 3414 | this.margin = 'left'; |
---|
| 3415 | this.layout = 'width'; |
---|
| 3416 | this.offset = this.element.offsetWidth; |
---|
| 3417 | return [this.element.getStyle('margin-left').toInt(), this.wrapper.getStyle('width').toInt()]; |
---|
| 3418 | }, |
---|
| 3419 | |
---|
| 3420 | /* |
---|
| 3421 | Property: slideIn |
---|
| 3422 | slides the elements in view horizontally or vertically, depending on the mode parameter or options.mode. |
---|
| 3423 | */ |
---|
| 3424 | |
---|
| 3425 | slideIn: function(mode){ |
---|
| 3426 | return this.start(this[mode || this.options.mode](), [0, this.offset]); |
---|
| 3427 | }, |
---|
| 3428 | |
---|
| 3429 | /* |
---|
| 3430 | Property: slideOut |
---|
| 3431 | slides the elements out of the view horizontally or vertically, depending on the mode parameter or options.mode. |
---|
| 3432 | */ |
---|
| 3433 | |
---|
| 3434 | slideOut: function(mode){ |
---|
| 3435 | return this.start(this[mode || this.options.mode](), [-this.offset, 0]); |
---|
| 3436 | }, |
---|
| 3437 | |
---|
| 3438 | /* |
---|
| 3439 | Property: hide |
---|
| 3440 | Hides the element without a transition. |
---|
| 3441 | */ |
---|
| 3442 | |
---|
| 3443 | hide: function(mode){ |
---|
| 3444 | this[mode || this.options.mode](); |
---|
| 3445 | return this.set([-this.offset, 0]); |
---|
| 3446 | }, |
---|
| 3447 | |
---|
| 3448 | /* |
---|
| 3449 | Property: show |
---|
| 3450 | Shows the element without a transition. |
---|
| 3451 | */ |
---|
| 3452 | |
---|
| 3453 | show: function(mode){ |
---|
| 3454 | this[mode || this.options.mode](); |
---|
| 3455 | return this.set([0, this.offset]); |
---|
| 3456 | }, |
---|
| 3457 | |
---|
| 3458 | /* |
---|
| 3459 | Property: toggle |
---|
| 3460 | Slides in or Out the element, depending on its state |
---|
| 3461 | */ |
---|
| 3462 | |
---|
| 3463 | toggle: function(mode){ |
---|
| 3464 | if (this.wrapper.offsetHeight == 0 || this.wrapper.offsetWidth == 0) return this.slideIn(mode); |
---|
| 3465 | else return this.slideOut(mode); |
---|
| 3466 | }, |
---|
| 3467 | |
---|
| 3468 | increase: function(){ |
---|
| 3469 | this.element.setStyle('margin-'+this.margin, this.now[0]+this.options.unit); |
---|
| 3470 | this.wrapper.setStyle(this.layout, this.now[1]+this.options.unit); |
---|
| 3471 | } |
---|
| 3472 | |
---|
| 3473 | }); |
---|
| 3474 | |
---|
| 3475 | /* |
---|
| 3476 | Script: Fx.Transitions.js |
---|
| 3477 | Cool transitions, to be used with all the effects. |
---|
| 3478 | |
---|
| 3479 | Author: |
---|
| 3480 | Robert Penner, <http://www.robertpenner.com/easing/>, modified to be used with mootools. |
---|
| 3481 | |
---|
| 3482 | License: |
---|
| 3483 | Easing Equations v1.5, (c) 2003 Robert Penner, all rights reserved. Open Source BSD License. |
---|
| 3484 | */ |
---|
| 3485 | |
---|
| 3486 | /* |
---|
| 3487 | Class: Fx.Transitions |
---|
| 3488 | A collection of tweaning transitions for use with the <Fx.Base> classes. |
---|
| 3489 | */ |
---|
| 3490 | |
---|
| 3491 | Fx.Transitions = { |
---|
| 3492 | |
---|
| 3493 | /* Property: linear */ |
---|
| 3494 | linear: function(t, b, c, d){ |
---|
| 3495 | return c*t/d + b; |
---|
| 3496 | }, |
---|
| 3497 | |
---|
| 3498 | /* Property: quadIn */ |
---|
| 3499 | quadIn: function(t, b, c, d){ |
---|
| 3500 | return c*(t/=d)*t + b; |
---|
| 3501 | }, |
---|
| 3502 | |
---|
| 3503 | /* Property: quatOut */ |
---|
| 3504 | quadOut: function(t, b, c, d){ |
---|
| 3505 | return -c *(t/=d)*(t-2) + b; |
---|
| 3506 | }, |
---|
| 3507 | |
---|
| 3508 | /* Property: quadInOut */ |
---|
| 3509 | quadInOut: function(t, b, c, d){ |
---|
| 3510 | if ((t/=d/2) < 1) return c/2*t*t + b; |
---|
| 3511 | return -c/2 * ((--t)*(t-2) - 1) + b; |
---|
| 3512 | }, |
---|
| 3513 | |
---|
| 3514 | /* Property: cubicIn */ |
---|
| 3515 | cubicIn: function(t, b, c, d){ |
---|
| 3516 | return c*(t/=d)*t*t + b; |
---|
| 3517 | }, |
---|
| 3518 | |
---|
| 3519 | /* Property: cubicOut */ |
---|
| 3520 | cubicOut: function(t, b, c, d){ |
---|
| 3521 | return c*((t=t/d-1)*t*t + 1) + b; |
---|
| 3522 | }, |
---|
| 3523 | |
---|
| 3524 | /* Property: cubicInOut */ |
---|
| 3525 | cubicInOut: function(t, b, c, d){ |
---|
| 3526 | if ((t/=d/2) < 1) return c/2*t*t*t + b; |
---|
| 3527 | return c/2*((t-=2)*t*t + 2) + b; |
---|
| 3528 | }, |
---|
| 3529 | |
---|
| 3530 | /* Property: quartIn */ |
---|
| 3531 | quartIn: function(t, b, c, d){ |
---|
| 3532 | return c*(t/=d)*t*t*t + b; |
---|
| 3533 | }, |
---|
| 3534 | |
---|
| 3535 | /* Property: quartOut */ |
---|
| 3536 | quartOut: function(t, b, c, d){ |
---|
| 3537 | return -c * ((t=t/d-1)*t*t*t - 1) + b; |
---|
| 3538 | }, |
---|
| 3539 | |
---|
| 3540 | /* Property: quartInOut */ |
---|
| 3541 | quartInOut: function(t, b, c, d){ |
---|
| 3542 | if ((t/=d/2) < 1) return c/2*t*t*t*t + b; |
---|
| 3543 | return -c/2 * ((t-=2)*t*t*t - 2) + b; |
---|
| 3544 | }, |
---|
| 3545 | |
---|
| 3546 | /* Property: quintIn */ |
---|
| 3547 | quintIn: function(t, b, c, d){ |
---|
| 3548 | return c*(t/=d)*t*t*t*t + b; |
---|
| 3549 | }, |
---|
| 3550 | |
---|
| 3551 | /* Property: quintOut */ |
---|
| 3552 | quintOut: function(t, b, c, d){ |
---|
| 3553 | return c*((t=t/d-1)*t*t*t*t + 1) + b; |
---|
| 3554 | }, |
---|
| 3555 | |
---|
| 3556 | /* Property: quintInOut */ |
---|
| 3557 | quintInOut: function(t, b, c, d){ |
---|
| 3558 | if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; |
---|
| 3559 | return c/2*((t-=2)*t*t*t*t + 2) + b; |
---|
| 3560 | }, |
---|
| 3561 | |
---|
| 3562 | /* Property: sineIn */ |
---|
| 3563 | sineIn: function(t, b, c, d){ |
---|
| 3564 | return -c * Math.cos(t/d * (Math.PI/2)) + c + b; |
---|
| 3565 | }, |
---|
| 3566 | |
---|
| 3567 | /* Property: sineOut */ |
---|
| 3568 | sineOut: function(t, b, c, d){ |
---|
| 3569 | return c * Math.sin(t/d * (Math.PI/2)) + b; |
---|
| 3570 | }, |
---|
| 3571 | |
---|
| 3572 | /* Property: sineInOut */ |
---|
| 3573 | sineInOut: function(t, b, c, d){ |
---|
| 3574 | return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; |
---|
| 3575 | }, |
---|
| 3576 | |
---|
| 3577 | /* Property: expoIn */ |
---|
| 3578 | expoIn: function(t, b, c, d){ |
---|
| 3579 | return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; |
---|
| 3580 | }, |
---|
| 3581 | |
---|
| 3582 | /* Property: expoOut */ |
---|
| 3583 | expoOut: function(t, b, c, d){ |
---|
| 3584 | return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; |
---|
| 3585 | }, |
---|
| 3586 | |
---|
| 3587 | /* Property: expoInOut */ |
---|
| 3588 | expoInOut: function(t, b, c, d){ |
---|
| 3589 | if (t==0) return b; |
---|
| 3590 | if (t==d) return b+c; |
---|
| 3591 | if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; |
---|
| 3592 | return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; |
---|
| 3593 | }, |
---|
| 3594 | |
---|
| 3595 | /* Property: circIn */ |
---|
| 3596 | circIn: function(t, b, c, d){ |
---|
| 3597 | return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; |
---|
| 3598 | }, |
---|
| 3599 | |
---|
| 3600 | /* Property: circOut */ |
---|
| 3601 | circOut: function(t, b, c, d){ |
---|
| 3602 | return c * Math.sqrt(1 - (t=t/d-1)*t) + b; |
---|
| 3603 | }, |
---|
| 3604 | |
---|
| 3605 | /* Property: circInOut */ |
---|
| 3606 | circInOut: function(t, b, c, d){ |
---|
| 3607 | if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; |
---|
| 3608 | return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; |
---|
| 3609 | }, |
---|
| 3610 | |
---|
| 3611 | /* Property: elasticIn */ |
---|
| 3612 | elasticIn: function(t, b, c, d, a, p){ |
---|
| 3613 | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (!a) a = 1; |
---|
| 3614 | if (a < Math.abs(c)){ a=c; var s=p/4; } |
---|
| 3615 | else var s = p/(2*Math.PI) * Math.asin(c/a); |
---|
| 3616 | return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; |
---|
| 3617 | }, |
---|
| 3618 | |
---|
| 3619 | /* Property: elasticOut */ |
---|
| 3620 | elasticOut: function(t, b, c, d, a, p){ |
---|
| 3621 | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (!a) a = 1; |
---|
| 3622 | if (a < Math.abs(c)){ a=c; var s=p/4; } |
---|
| 3623 | else var s = p/(2*Math.PI) * Math.asin(c/a); |
---|
| 3624 | return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; |
---|
| 3625 | }, |
---|
| 3626 | |
---|
| 3627 | /* Property: elasticInOut */ |
---|
| 3628 | elasticInOut: function(t, b, c, d, a, p){ |
---|
| 3629 | if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); if (!a) a = 1; |
---|
| 3630 | if (a < Math.abs(c)){ a=c; var s=p/4; } |
---|
| 3631 | else var s = p/(2*Math.PI) * Math.asin(c/a); |
---|
| 3632 | if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; |
---|
| 3633 | return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; |
---|
| 3634 | }, |
---|
| 3635 | |
---|
| 3636 | /* Property: backIn */ |
---|
| 3637 | backIn: function(t, b, c, d, s){ |
---|
| 3638 | if (!s) s = 1.70158; |
---|
| 3639 | return c*(t/=d)*t*((s+1)*t - s) + b; |
---|
| 3640 | }, |
---|
| 3641 | |
---|
| 3642 | /* Property: backOut */ |
---|
| 3643 | backOut: function(t, b, c, d, s){ |
---|
| 3644 | if (!s) s = 1.70158; |
---|
| 3645 | return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; |
---|
| 3646 | }, |
---|
| 3647 | |
---|
| 3648 | /* Property: backInOut */ |
---|
| 3649 | backInOut: function(t, b, c, d, s){ |
---|
| 3650 | if (!s) s = 1.70158; |
---|
| 3651 | if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; |
---|
| 3652 | return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; |
---|
| 3653 | }, |
---|
| 3654 | |
---|
| 3655 | /* Property: bounceIn */ |
---|
| 3656 | bounceIn: function(t, b, c, d){ |
---|
| 3657 | return c - Fx.Transitions.bounceOut (d-t, 0, c, d) + b; |
---|
| 3658 | }, |
---|
| 3659 | |
---|
| 3660 | /* Property: bounceOut */ |
---|
| 3661 | bounceOut: function(t, b, c, d){ |
---|
| 3662 | if ((t/=d) < (1/2.75)){ |
---|
| 3663 | return c*(7.5625*t*t) + b; |
---|
| 3664 | } else if (t < (2/2.75)){ |
---|
| 3665 | return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; |
---|
| 3666 | } else if (t < (2.5/2.75)){ |
---|
| 3667 | return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; |
---|
| 3668 | } else { |
---|
| 3669 | return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; |
---|
| 3670 | } |
---|
| 3671 | }, |
---|
| 3672 | |
---|
| 3673 | /* Property: bounceInOut */ |
---|
| 3674 | bounceInOut: function(t, b, c, d){ |
---|
| 3675 | if (t < d/2) return Fx.Transitions.bounceIn(t*2, 0, c, d) * .5 + b; |
---|
| 3676 | return Fx.Transitions.bounceOut(t*2-d, 0, c, d) * .5 + c*.5 + b; |
---|
| 3677 | } |
---|
| 3678 | |
---|
| 3679 | }; |
---|
| 3680 | |
---|
| 3681 | /* |
---|
| 3682 | Script: Drag.Base.js |
---|
| 3683 | Contains <Drag.Base>, <Element.makeResizable> |
---|
| 3684 | |
---|
| 3685 | Author: |
---|
| 3686 | Valerio Proietti, <http://mad4milk.net> |
---|
| 3687 | |
---|
| 3688 | License: |
---|
| 3689 | MIT-style license. |
---|
| 3690 | */ |
---|
| 3691 | |
---|
| 3692 | var Drag = {}; |
---|
| 3693 | |
---|
| 3694 | /* |
---|
| 3695 | Class: Drag.Base |
---|
| 3696 | Modify two css properties of an element based on the position of the mouse. |
---|
| 3697 | |
---|
| 3698 | Arguments: |
---|
| 3699 | el - the $(element) to apply the transformations to. |
---|
| 3700 | options - optional. The options object. |
---|
| 3701 | |
---|
| 3702 | Options: |
---|
| 3703 | handle - the $(element) to act as the handle for the draggable element. defaults to the $(element) itself. |
---|
| 3704 | modifiers - an object. see Modifiers Below. |
---|
| 3705 | onStart - optional, function to execute when the user starts to drag (on mousedown); |
---|
| 3706 | onComplete - optional, function to execute when the user completes the drag. |
---|
| 3707 | onDrag - optional, function to execute at every step of the drag |
---|
| 3708 | limit - an object, see Limit below. |
---|
| 3709 | snap - optional, the distance you have to drag before the element starts to respond to the drag. defaults to false |
---|
| 3710 | |
---|
| 3711 | modifiers: |
---|
| 3712 | x - string, the style you want to modify when the mouse moves in an horizontal direction. defaults to 'left' |
---|
| 3713 | y - string, the style you want to modify when the mouse moves in a vertical direction. defaults to 'top' |
---|
| 3714 | |
---|
| 3715 | limit: |
---|
| 3716 | x - array with start and end limit relative to modifiers.x |
---|
| 3717 | y - array with start and end limit relative to modifiers.y |
---|
| 3718 | */ |
---|
| 3719 | |
---|
| 3720 | Drag.Base = new Class({ |
---|
| 3721 | |
---|
| 3722 | getOptions: function(){ |
---|
| 3723 | return { |
---|
| 3724 | handle: false, |
---|
| 3725 | unit: 'px', |
---|
| 3726 | onStart: Class.empty, |
---|
| 3727 | onComplete: Class.empty, |
---|
| 3728 | onSnap: Class.empty, |
---|
| 3729 | onDrag: Class.empty, |
---|
| 3730 | limit: false, |
---|
| 3731 | modifiers: {x: 'left', y: 'top'}, |
---|
| 3732 | snap: 6 |
---|
| 3733 | }; |
---|
| 3734 | }, |
---|
| 3735 | |
---|
| 3736 | initialize: function(el, options){ |
---|
| 3737 | this.setOptions(this.getOptions(), options); |
---|
| 3738 | this.element = $(el); |
---|
| 3739 | this.handle = $(this.options.handle) || this.element; |
---|
| 3740 | this.mouse = {'now': {}, 'pos': {}}; |
---|
| 3741 | this.value = {'start': {}, 'now': {}}; |
---|
| 3742 | this.bound = {'start': this.start.bindWithEvent(this)}; |
---|
| 3743 | this.handle.addEvent('mousedown', this.bound.start); |
---|
| 3744 | if (this.options.initialize) this.options.initialize.call(this); |
---|
| 3745 | }, |
---|
| 3746 | |
---|
| 3747 | start: function(event){ |
---|
| 3748 | this.mouse.start = event.page; |
---|
| 3749 | var limit = this.options.limit; |
---|
| 3750 | this.limit = {'x': [], 'y': []}; |
---|
| 3751 | for (var z in this.options.modifiers){ |
---|
| 3752 | this.value.now[z] = this.element.getStyle(this.options.modifiers[z]).toInt(); |
---|
| 3753 | this.mouse.pos[z] = event.page[z] - this.value.now[z]; |
---|
| 3754 | if (limit && limit[z]){ |
---|
| 3755 | for (var i = 0; i < 2; i++){ |
---|
| 3756 | if ($chk(limit[z][i])) this.limit[z][i] = limit[z][i].apply ? limit[z][i].call(this) : limit[z][i]; |
---|
| 3757 | } |
---|
| 3758 | } |
---|
| 3759 | } |
---|
| 3760 | this.bound.drag = this.drag.bindWithEvent(this); |
---|
| 3761 | this.bound.checkAndDrag = this.checkAndDrag.bindWithEvent(this); |
---|
| 3762 | this.bound.stop = this.stop.bind(this); |
---|
| 3763 | document.addEvent('mousemove', this.options.snap ? this.bound.checkAndDrag : this.bound.drag); |
---|
| 3764 | document.addEvent('mouseup', this.bound.stop); |
---|
| 3765 | this.fireEvent('onStart', this.element); |
---|
| 3766 | event.stop(); |
---|
| 3767 | }, |
---|
| 3768 | |
---|
| 3769 | checkAndDrag: function(event){ |
---|
| 3770 | var distance = Math.round(Math.sqrt(Math.pow(event.page.x - this.mouse.start.x, 2) + Math.pow(event.page.y - this.mouse.start.y, 2))); |
---|
| 3771 | if (distance > this.options.snap){ |
---|
| 3772 | document.removeEvent('mousemove', this.bound.checkAndDrag); |
---|
| 3773 | document.addEvent('mousemove', this.bound.drag); |
---|
| 3774 | this.drag(event); |
---|
| 3775 | this.fireEvent('onSnap', this.element); |
---|
| 3776 | } |
---|
| 3777 | event.stop(); |
---|
| 3778 | }, |
---|
| 3779 | |
---|
| 3780 | drag: function(event){ |
---|
| 3781 | this.out = false; |
---|
| 3782 | this.mouse.now = event.page; |
---|
| 3783 | for (var z in this.options.modifiers){ |
---|
| 3784 | this.value.now[z] = event.page[z] - this.mouse.pos[z]; |
---|
| 3785 | if (this.limit[z]){ |
---|
| 3786 | if ($chk(this.limit[z][1]) && (this.value.now[z] > this.limit[z][1])){ |
---|
| 3787 | this.value.now[z] = this.limit[z][1]; |
---|
| 3788 | this.out = true; |
---|
| 3789 | } else if ($chk(this.limit[z][0]) && (this.value.now[z] < this.limit[z][0])){ |
---|
| 3790 | this.value.now[z] = this.limit[z][0]; |
---|
| 3791 | this.out = true; |
---|
| 3792 | } |
---|
| 3793 | } |
---|
| 3794 | this.element.setStyle(this.options.modifiers[z], this.value.now[z] + this.options.unit); |
---|
| 3795 | } |
---|
| 3796 | this.fireEvent('onDrag', this.element); |
---|
| 3797 | event.stop(); |
---|
| 3798 | }, |
---|
| 3799 | |
---|
| 3800 | detach: function(){ |
---|
| 3801 | this.handle.removeEvent('mousedown', this.bound.start); |
---|
| 3802 | }, |
---|
| 3803 | |
---|
| 3804 | stop: function(){ |
---|
| 3805 | document.removeEvent('mousemove', this.bound.drag); |
---|
| 3806 | document.removeEvent('mouseup', this.bound.stop); |
---|
| 3807 | this.fireEvent('onComplete', this.element); |
---|
| 3808 | } |
---|
| 3809 | |
---|
| 3810 | }); |
---|
| 3811 | |
---|
| 3812 | Drag.Base.implement(new Events); |
---|
| 3813 | Drag.Base.implement(new Options); |
---|
| 3814 | |
---|
| 3815 | /* |
---|
| 3816 | Class: Element |
---|
| 3817 | Custom class to allow all of its methods to be used with any DOM element via the dollar function <$>. |
---|
| 3818 | */ |
---|
| 3819 | |
---|
| 3820 | Element.extend({ |
---|
| 3821 | |
---|
| 3822 | /* |
---|
| 3823 | Property: makeResizable |
---|
| 3824 | Makes an element resizable (by dragging) with the supplied options. |
---|
| 3825 | |
---|
| 3826 | Arguments: |
---|
| 3827 | options - see <Drag.Base> for acceptable options. |
---|
| 3828 | */ |
---|
| 3829 | |
---|
| 3830 | makeResizable: function(options){ |
---|
| 3831 | return new Drag.Base(this, Object.extend(options || {}, {modifiers: {x: 'width', y: 'height'}})); |
---|
| 3832 | } |
---|
| 3833 | |
---|
| 3834 | }); |
---|
| 3835 | |
---|
| 3836 | /* |
---|
| 3837 | Script: Scroller.js |
---|
| 3838 | Contains the <Scroller>. |
---|
| 3839 | |
---|
| 3840 | Author: |
---|
| 3841 | Valerio Proietti, <http://mad4milk.net> |
---|
| 3842 | |
---|
| 3843 | License: |
---|
| 3844 | MIT-style license. |
---|
| 3845 | */ |
---|
| 3846 | |
---|
| 3847 | /* |
---|
| 3848 | Class: Scroller |
---|
| 3849 | The Scroller is a class to scroll any element with an overflow (including the window) when the mouse cursor reaches certain buondaries of that element. |
---|
| 3850 | You must call its start method to start listening to mouse movements. |
---|
| 3851 | |
---|
| 3852 | Arguments: |
---|
| 3853 | element - required, the element to scroll. |
---|
| 3854 | options - optional, see options below, and <Fx.Base> options. |
---|
| 3855 | |
---|
| 3856 | Options: |
---|
| 3857 | area - integer, the necessary boundaries to make the element scroll. |
---|
| 3858 | velocity - integer, velocity ratio, the modifier for the window scrolling speed. |
---|
| 3859 | onChange - optionally, when the mouse reaches some boundaries, you can choose to alter some other values, instead of the scrolling offsets. |
---|
| 3860 | Automatically passes as parameters x and y values. |
---|
| 3861 | */ |
---|
| 3862 | |
---|
| 3863 | var Scroller = new Class({ |
---|
| 3864 | |
---|
| 3865 | getOptions: function(){ |
---|
| 3866 | return { |
---|
| 3867 | area: 20, |
---|
| 3868 | velocity: 1, |
---|
| 3869 | onChange: function(x, y){ |
---|
| 3870 | this.element.scrollTo(x, y); |
---|
| 3871 | } |
---|
| 3872 | }; |
---|
| 3873 | }, |
---|
| 3874 | |
---|
| 3875 | initialize: function(element, options){ |
---|
| 3876 | this.setOptions(this.getOptions(), options); |
---|
| 3877 | this.element = $(element); |
---|
| 3878 | this.mousemover = ([window, document].test(element)) ? $(document.body) : this.element; |
---|
| 3879 | }, |
---|
| 3880 | |
---|
| 3881 | /* |
---|
| 3882 | Property: start |
---|
| 3883 | The scroller starts listening to mouse movements. |
---|
| 3884 | */ |
---|
| 3885 | |
---|
| 3886 | start: function(){ |
---|
| 3887 | this.coord = this.getCoords.bindWithEvent(this); |
---|
| 3888 | this.mousemover.addEvent('mousemove', this.coord); |
---|
| 3889 | }, |
---|
| 3890 | |
---|
| 3891 | /* |
---|
| 3892 | Property: stop |
---|
| 3893 | The scroller stops listening to mouse movements. |
---|
| 3894 | */ |
---|
| 3895 | |
---|
| 3896 | stop: function(){ |
---|
| 3897 | this.mousemover.removeEvent('mousemove', this.coord); |
---|
| 3898 | this.timer = $clear(this.timer); |
---|
| 3899 | }, |
---|
| 3900 | |
---|
| 3901 | getCoords: function(event){ |
---|
| 3902 | this.page = (this.element == window) ? event.client : event.page; |
---|
| 3903 | if (!this.timer) this.timer = this.scroll.periodical(50, this); |
---|
| 3904 | }, |
---|
| 3905 | |
---|
| 3906 | scroll: function(){ |
---|
| 3907 | var el = this.element.getSize(); |
---|
| 3908 | var pos = this.element.getOffsets(); |
---|
| 3909 | |
---|
| 3910 | var change = {'x': 0, 'y': 0}; |
---|
| 3911 | for (var z in this.page){ |
---|
| 3912 | if (this.page[z] < (this.options.area + pos[z]) && el.scroll[z] != 0) |
---|
| 3913 | change[z] = (this.page[z] - this.options.area - pos[z]) * this.options.velocity; |
---|
| 3914 | else if (this.page[z] + this.options.area > (el.size[z] + pos[z]) && el.scroll[z] + el.size[z] != el.scrollSize[z]) |
---|
| 3915 | change[z] = (this.page[z] - el.size[z] + this.options.area - pos[z]) * this.options.velocity; |
---|
| 3916 | } |
---|
| 3917 | if (change.y || change.x) this.fireEvent('onChange', [el.scroll.x + change.x, el.scroll.y + change.y]); |
---|
| 3918 | } |
---|
| 3919 | |
---|
| 3920 | }); |
---|
| 3921 | |
---|
| 3922 | Scroller.implement(new Events); |
---|
| 3923 | Scroller.implement(new Options); |
---|
| 3924 | |
---|
| 3925 | /* |
---|
| 3926 | Script: Slider.js |
---|
| 3927 | Contains <Slider> |
---|
| 3928 | |
---|
| 3929 | Author: |
---|
| 3930 | Valerio Proietti, <http://mad4milk.net> |
---|
| 3931 | |
---|
| 3932 | License: |
---|
| 3933 | MIT-style license. |
---|
| 3934 | */ |
---|
| 3935 | |
---|
| 3936 | /* |
---|
| 3937 | Class: Slider |
---|
| 3938 | Creates a slider with two elements: a knob and a container. Returns the values. |
---|
| 3939 | |
---|
| 3940 | Arguments: |
---|
| 3941 | element - the knob container |
---|
| 3942 | knob - the handle |
---|
| 3943 | options - see Options below |
---|
| 3944 | |
---|
| 3945 | Options: |
---|
| 3946 | onChange - a function to fire when the value changes. |
---|
| 3947 | onComplete - a function to fire when you're done dragging. |
---|
| 3948 | onTick - optionally, you can alter the onTick behavior, for example displaying an effect of the knob moving to the desired position. |
---|
| 3949 | Passes as parameter the new position. |
---|
| 3950 | steps - the number of steps for your slider. |
---|
| 3951 | mode - either 'horizontal' or 'vertical'. defaults to horizontal. |
---|
| 3952 | wheel - experimental! Also use the mouse wheel to control the slider. defaults to false. |
---|
| 3953 | */ |
---|
| 3954 | |
---|
| 3955 | var Slider = new Class({ |
---|
| 3956 | |
---|
| 3957 | getOptions: function(){ |
---|
| 3958 | return { |
---|
| 3959 | onChange: Class.empty, |
---|
| 3960 | onComplete: Class.empty, |
---|
| 3961 | onTick: function(pos){ |
---|
| 3962 | this.knob.setStyle(this.p, pos+'px'); |
---|
| 3963 | }, |
---|
| 3964 | steps: 100, |
---|
| 3965 | mode: 'horizontal', |
---|
| 3966 | wheel: false |
---|
| 3967 | }; |
---|
| 3968 | }, |
---|
| 3969 | |
---|
| 3970 | initialize: function(el, knob, options){ |
---|
| 3971 | this.element = $(el); |
---|
| 3972 | this.knob = $(knob); |
---|
| 3973 | this.setOptions(this.getOptions(), options); |
---|
| 3974 | |
---|
| 3975 | this.previousChange = -1; |
---|
| 3976 | this.previousEnd = -1; |
---|
| 3977 | this.step = -1; |
---|
| 3978 | |
---|
| 3979 | this.element.addEvent('mousedown', this.clickedElement.bindWithEvent(this)); |
---|
| 3980 | |
---|
| 3981 | if (this.options.wheel) this.element.addEvent('mousewheel', this.scrolledElement.bindWithEvent(this)); |
---|
| 3982 | |
---|
| 3983 | if (this.options.mode == 'horizontal'){ |
---|
| 3984 | this.z = 'x'; this.p = 'left'; |
---|
| 3985 | this.max = this.element.offsetWidth-this.knob.offsetWidth; |
---|
| 3986 | this.half = this.knob.offsetWidth/2; |
---|
| 3987 | this.getPos = this.element.getLeft.bind(this.element); |
---|
| 3988 | } else if (this.options.mode == 'vertical'){ |
---|
| 3989 | this.z = 'y'; this.p = 'top'; |
---|
| 3990 | this.max = this.element.offsetHeight-this.knob.offsetHeight; |
---|
| 3991 | this.half = this.knob.offsetHeight/2; |
---|
| 3992 | this.getPos = this.element.getTop.bind(this.element); |
---|
| 3993 | } |
---|
| 3994 | |
---|
| 3995 | this.knob.setStyle('position', 'relative').setStyle(this.p, 0); |
---|
| 3996 | |
---|
| 3997 | var modSlide = {}, limSlide = {}; |
---|
| 3998 | |
---|
| 3999 | limSlide[this.z] = [0, this.max]; |
---|
| 4000 | modSlide[this.z] = this.p; |
---|
| 4001 | |
---|
| 4002 | this.drag = new Drag.Base(this.knob, { |
---|
| 4003 | limit: limSlide, |
---|
| 4004 | snap: 0, |
---|
| 4005 | modifiers: modSlide, |
---|
| 4006 | onStart: function(){ |
---|
| 4007 | this.draggedKnob(); |
---|
| 4008 | }.bind(this), |
---|
| 4009 | onDrag: function(){ |
---|
| 4010 | this.draggedKnob(); |
---|
| 4011 | }.bind(this), |
---|
| 4012 | onComplete: function(){ |
---|
| 4013 | this.draggedKnob(); |
---|
| 4014 | this.end(); |
---|
| 4015 | }.bind(this) |
---|
| 4016 | }); |
---|
| 4017 | if (this.options.initialize) this.options.initialize.call(this); |
---|
| 4018 | }, |
---|
| 4019 | |
---|
| 4020 | /* |
---|
| 4021 | Property: set |
---|
| 4022 | The slider will get the step you pass. |
---|
| 4023 | |
---|
| 4024 | Arguments: |
---|
| 4025 | step - one integer |
---|
| 4026 | */ |
---|
| 4027 | |
---|
| 4028 | set: function(step){ |
---|
| 4029 | if (step > this.options.steps) step = this.options.steps; |
---|
| 4030 | else if (step < 0) step = 0; |
---|
| 4031 | this.step = step; |
---|
| 4032 | this.checkStep(); |
---|
| 4033 | this.end(); |
---|
| 4034 | this.fireEvent('onTick', this.toPosition(this.step)+''); |
---|
| 4035 | return this; |
---|
| 4036 | }, |
---|
| 4037 | |
---|
| 4038 | scrolledElement: function(event){ |
---|
| 4039 | if (event.wheel < 0) this.set(this.step + 1); |
---|
| 4040 | else if (event.wheel > 0) this.set(this.step - 1); |
---|
| 4041 | event.stop(); |
---|
| 4042 | }, |
---|
| 4043 | |
---|
| 4044 | clickedElement: function(event){ |
---|
| 4045 | var position = event.page[this.z] - this.getPos() - this.half; |
---|
| 4046 | if (position > this.max) position = this.max; |
---|
| 4047 | else if (position < 0) position = 0; |
---|
| 4048 | this.step = this.toStep(position); |
---|
| 4049 | this.checkStep(); |
---|
| 4050 | this.end(); |
---|
| 4051 | this.fireEvent('onTick', position+''); |
---|
| 4052 | }, |
---|
| 4053 | |
---|
| 4054 | draggedKnob: function(){ |
---|
| 4055 | this.step = this.toStep(this.drag.value.now[this.z]); |
---|
| 4056 | this.checkStep(); |
---|
| 4057 | }, |
---|
| 4058 | |
---|
| 4059 | checkStep: function(){ |
---|
| 4060 | if (this.previousChange != this.step){ |
---|
| 4061 | this.previousChange = this.step; |
---|
| 4062 | this.fireEvent('onChange', this.step); |
---|
| 4063 | } |
---|
| 4064 | }, |
---|
| 4065 | |
---|
| 4066 | end: function(){ |
---|
| 4067 | if (this.previousEnd !== this.step){ |
---|
| 4068 | this.previousEnd = this.step; |
---|
| 4069 | this.fireEvent('onComplete', this.step+''); |
---|
| 4070 | } |
---|
| 4071 | }, |
---|
| 4072 | |
---|
| 4073 | toStep: function(position){ |
---|
| 4074 | return Math.round(position/this.max*this.options.steps); |
---|
| 4075 | }, |
---|
| 4076 | |
---|
| 4077 | toPosition: function(step){ |
---|
| 4078 | return (this.max)*step/this.options.steps; |
---|
| 4079 | } |
---|
| 4080 | |
---|
| 4081 | }); |
---|
| 4082 | |
---|
| 4083 | Slider.implement(new Events); |
---|
| 4084 | Slider.implement(new Options); |
---|