[Summary view] [Print] [Text view]

   1  /*

   2   * draggable_options.js

   3   */
   4  (function($) {
   5  
   6  function testScroll(position) {
   7      $("#main").css('position', position);
   8      drag(el, 50, 50);
   9      moved(50, 50, position+' parent');
  10  }
  11  
  12  function setScroll(what) {
  13      if(what) {
  14          $(document).scrollTop(100); $(document).scrollLeft(100);
  15      } else {
  16          $("#main")[0].scrollTop = 100; $("#main")[0].scrollLeft = 100;
  17      }
  18  }
  19  
  20  var border = function(el, side) { return parseInt(el.css('border-' + side + '-width')); }
  21  
  22  var margin = function(el, side) { return parseInt(el.css('margin-' + side)); }
  23  
  24  module("draggable: options");
  25  
  26  test("{ addClasses: true }, default", function() {
  27      equals(draggable_defaults.addClasses, true);
  28  
  29      el = $("<div></div>").draggable({ addClasses: true });
  30      ok(el.is(".ui-draggable"), "'ui-draggable' class added");
  31  
  32      el.draggable("destroy");
  33  });
  34  
  35  test("{ addClasses: false }", function() {
  36      el = $("<div></div>").draggable({ addClasses: false });
  37      ok(!el.is(".ui-draggable"), "'ui-draggable' class not added");
  38  
  39      el.draggable("destroy");
  40  });
  41  
  42  test("{ appendTo: 'parent' }, default", function() {
  43      equals(draggable_defaults.appendTo, "parent");
  44  
  45      ok(false, 'missing test - untested code is broken code');
  46  });
  47  
  48  test("{ appendTo: Element }", function() {
  49      ok(false, 'missing test - untested code is broken code');
  50  });
  51  
  52  test("{ appendTo: Selector }", function() {
  53      ok(false, 'missing test - untested code is broken code');
  54  });
  55  
  56  test("{ axis: false }, default", function() {
  57      equals(draggable_defaults.axis, false);
  58  
  59      el = $("#draggable2").draggable({ axis: false });
  60      drag(el, 50, 50);
  61      moved(50, 50);
  62  });
  63  
  64  test("{ axis: 'x' }", function() {
  65      el = $("#draggable2").draggable({ axis: "x" });
  66      drag(el, 50, 50);
  67      moved(50, 0);
  68  });
  69  
  70  test("{ axis: 'y' }", function() {
  71      el = $("#draggable2").draggable({ axis: "y" });
  72      drag(el, 50, 50);
  73      moved(0, 50);
  74  });
  75  
  76  test("{ axis: ? }, unexpected", function() {
  77      var unexpected = {
  78          "true": true,
  79          "{}": {},
  80          "[]": [],
  81          "null": null,
  82          "undefined": undefined,
  83          "function() {}": function() {}
  84      };
  85      $.each(unexpected, function(key, val) {
  86          el = $("#draggable2").draggable({ axis: val });
  87          drag(el, 50, 50);
  88          moved(50, 50, "axis: " + key);
  89          el.draggable("destroy");
  90      })
  91  });
  92  
  93  test("{ cancel: ':input,option' }, default", function() {
  94      equals(draggable_defaults.cancel, ":input,option");
  95  
  96      $('<div id="draggable-option-cancel-default"><input type="text"></div>').appendTo('body');
  97  
  98      el = $("#draggable-option-cancel-default").draggable({ cancel: ":input,option" });
  99      drag("#draggable-option-cancel-default", 50, 50);
 100      moved(50, 50);
 101  
 102      el = $("#draggable-option-cancel-default").draggable({ cancel: ":input,option" });
 103      drag("#draggable-option-cancel-default :input", 50, 50);
 104      moved(0, 0);
 105  
 106      el.draggable("destroy");
 107  });
 108  
 109  test("{ cancel: 'span' }", function() {
 110      el = $("#draggable2").draggable();
 111      drag("#draggable2 span", 50, 50);
 112      moved(50, 50);
 113  
 114      el.draggable("destroy");
 115  
 116      el = $("#draggable2").draggable({ cancel: 'span' });
 117      drag("#draggable2 span", 50, 50);
 118      moved(0, 0);
 119  });
 120  
 121  test("{ cancel: ? }, unexpected", function() {
 122      var unexpected = {
 123          "true": true,
 124          "false": false,
 125          "{}": {},
 126          "[]": [],
 127          "null": null,
 128          "undefined": undefined,
 129          "function() {return '';}": function() {return '';},
 130          "function() {return true;}": function() {return true;},
 131          "function() {return false;}": function() {return false;}
 132      };
 133      $.each(unexpected, function(key, val) {
 134          el = $("#draggable2").draggable({ cancel: val });
 135          drag(el, 50, 50);
 136          var expected = [50, 50];
 137          moved(expected[0], expected[1], "cancel: " + key);
 138          el.draggable("destroy");
 139      })
 140  });
 141  
 142  test("{ containment: false }, default", function() {
 143      equals(draggable_defaults.containment, false);
 144  
 145      ok(false, 'missing test - untested code is broken code');
 146  });
 147  
 148  test("{ containment: Element }", function() {
 149      ok(false, 'missing test - untested code is broken code');
 150  });
 151  
 152  test("{ containment: 'parent' }, relative", function() {
 153      el = $("#draggable1").draggable({ containment: 'parent' });
 154      var p = el.parent(), po = p.offset();
 155      drag(el, -100, -100);
 156      var expected = {
 157          left: po.left + border(p, 'left') + margin(el, 'left'),
 158          top: po.top + border(p, 'top') + margin(el, 'top')
 159      }
 160      same(offsetAfter, expected, 'compare offset to parent');
 161  });
 162  
 163  test("{ containment: 'parent' }, absolute", function() {
 164      el = $("#draggable2").draggable({ containment: 'parent' });
 165      var p = el.parent(), po = p.offset();
 166      drag(el, -100, -100);
 167      var expected = {
 168          left: po.left + border(p, 'left') + margin(el, 'left'),
 169          top: po.top + border(p, 'top') + margin(el, 'top')
 170      }
 171      same(offsetAfter, expected, 'compare offset to parent');
 172  });
 173  
 174  test("{ containment: 'document' }", function() {
 175      ok(false, 'missing test - untested code is broken code');
 176  });
 177  
 178  test("{ containment: 'window' }", function() {
 179      ok(false, 'missing test - untested code is broken code');
 180  });
 181  
 182  test("{ containment: Selector }", function() {
 183      ok(false, 'missing test - untested code is broken code');
 184  });
 185  
 186  test("{ cursor: 'auto' }, default", function() {
 187      equals(draggable_defaults.cursor, 'auto');
 188  
 189  	function getCursor() { return $("#draggable2").css("cursor"); }
 190  
 191      expect(3);
 192  
 193      var expected = "auto", actual, before, after;
 194  
 195      el = $("#draggable2").draggable({
 196          cursor: expected,
 197          start: function(event, ui) {
 198              actual = getCursor();
 199          }
 200      });
 201  
 202      before = getCursor();
 203      drag("#draggable2", -1, -1);
 204      after = getCursor();
 205  
 206      equals(actual, expected, "start callback: cursor '" + expected + "'");
 207      equals(after, before, "after drag: cursor restored");
 208  
 209  });
 210  
 211  test("{ cursor: 'move' }", function() {
 212  
 213  	function getCursor() { return $("body").css("cursor"); }
 214  
 215      expect(2);
 216  
 217      var expected = "move", actual, before, after;
 218  
 219      el = $("#draggable2").draggable({
 220          cursor: expected,
 221          start: function(event, ui) {
 222              actual = getCursor();
 223          }
 224      });
 225  
 226      before = getCursor();
 227      drag("#draggable2", -1, -1);
 228      after = getCursor();
 229  
 230      equals(actual, expected, "start callback: cursor '" + expected + "'");
 231      equals(after, before, "after drag: cursor restored");
 232  
 233  });
 234  
 235  test("{ cursorAt: false}, default", function() {
 236      equals(draggable_defaults.cursorAt, false);
 237  
 238      ok(false, 'missing test - untested code is broken code');
 239  });
 240  
 241  test("{ cursorAt: { left: -5, top: -5 } }", function() {
 242  
 243      expect(4);
 244  
 245      var dx = -3, dy = -3;
 246      var ox = 5, oy = 5;
 247      var cax = -5, cay = -5;
 248  
 249      var actual = null;
 250      $("#draggable2").draggable({
 251          cursorAt: { left: cax, top: cay },
 252          drag: function(event, ui) {
 253              actual = ui.absolutePosition;
 254          }
 255      });
 256      var el = $("#draggable2").data("draggable").element;
 257  
 258      var before = el.offset();
 259      var pos = { clientX: before.left + ox, clientY: before.top + oy };
 260      $("#draggable2").simulate("mousedown", pos);
 261      pos = { clientX: pos.clientX + dx, clientY: pos.clientY + dy };
 262      $(document).simulate("mousemove", pos);
 263      $(document).simulate("mousemove", pos);
 264      $("#draggable2").simulate("mouseup", pos);
 265      var expected = {
 266          left: before.left + ox - cax + dx,
 267          top: before.top + oy - cay + dy
 268      };
 269  
 270      equals(actual.left, expected.left, "Absolute: -1px left");
 271      equals(actual.top, expected.top, "Absolute: -1px top");
 272  
 273      var actual = null;
 274      $("#draggable1").draggable({
 275          cursorAt: { left: cax, top: cay },
 276          drag: function(event, ui) {
 277              actual = ui.absolutePosition;
 278          }
 279      });
 280      var el = $("#draggable2").data("draggable").element;
 281  
 282      var before = el.offset();
 283      var pos = { clientX: before.left + ox, clientY: before.top + oy };
 284      $("#draggable2").simulate("mousedown", pos);
 285      pos = { clientX: pos.clientX + dx, clientY: pos.clientY + dy };
 286      $(document).simulate("mousemove", pos);
 287      $(document).simulate("mousemove", pos);
 288      $("#draggable2").simulate("mouseup", pos);
 289      var expected = {
 290          left: before.left + ox - cax + dx,
 291          top: before.top + oy - cay + dy
 292      };
 293  
 294      equals(actual.left, expected.left, "Relative: -1px left");
 295      equals(actual.top, expected.top, "Relative: -1px top");
 296  
 297  });
 298  
 299  test("{ distance: 10 }", function() {
 300  
 301      el = $("#draggable2").draggable({ distance: 10 });
 302      drag(el, -9, -9);
 303      moved(0, 0, 'distance not met');
 304  
 305      drag(el, -10, -10);
 306      moved(-10, -10, 'distance met');
 307  
 308      drag(el, 9, 9);
 309      moved(0, 0, 'distance not met');
 310  
 311  });
 312  
 313  test("{ grid: [50, 50] }, relative", function() {
 314      el = $("#draggable1").draggable({ grid: [50, 50] });
 315      drag(el, 24, 24);
 316      moved(0, 0);
 317      drag(el, 26, 25);
 318      moved(50, 50);
 319  });
 320  
 321  test("{ grid: [50, 50] }, absolute", function() {
 322      el = $("#draggable2").draggable({ grid: [50, 50] });
 323      drag(el, 24, 24);
 324      moved(0, 0);
 325      drag(el, 26, 25);
 326      moved(50, 50);
 327  });
 328  
 329  test("{ handle: 'span' }", function() {
 330      el = $("#draggable2").draggable({ handle: 'span' });
 331  
 332      drag("#draggable2 span", 50, 50);
 333      moved(50, 50, "drag span");
 334  
 335      drag("#draggable2", 50, 50);
 336      moved(0, 0, "drag element");
 337  });
 338  
 339  test("{ helper: 'clone' }, relative", function() {
 340      el = $("#draggable1").draggable({ helper: "clone" });
 341      drag(el, 50, 50);
 342      moved(0, 0);
 343  });
 344  
 345  test("{ helper: 'clone' }, absolute", function() {
 346      el = $("#draggable2").draggable({ helper: "clone" });
 347      drag(el, 50, 50);
 348      moved(0, 0);
 349  });
 350  
 351  test("{ helper: 'original' }, relative, with scroll offset on parent", function() {
 352      
 353      el = $("#draggable1").draggable({ helper: "original" });
 354  
 355      setScroll();
 356      testScroll('relative');
 357      
 358      setScroll();
 359      testScroll('static');
 360      
 361      setScroll();
 362      testScroll('absolute');
 363  
 364      restoreScroll();
 365      
 366  });
 367  
 368  test("{ helper: 'original' }, relative, with scroll offset on root", function() {
 369      
 370      el = $("#draggable1").draggable({ helper: "original" });
 371      
 372      setScroll('root');
 373      testScroll('relative');
 374      
 375      setScroll('root');
 376      testScroll('static');
 377      
 378      setScroll('root');
 379      testScroll('absolute');
 380  
 381      restoreScroll('root');
 382      
 383  });
 384  
 385  test("{ helper: 'original' }, relative, with scroll offset on root and parent", function() {
 386      
 387      el = $("#draggable1").draggable({ helper: "original" });
 388      
 389      setScroll();
 390      setScroll('root');
 391      testScroll('relative');
 392      
 393      setScroll();
 394      setScroll('root');
 395      testScroll('static');
 396      
 397      setScroll();
 398      setScroll('root');
 399      testScroll('absolute');
 400  
 401      restoreScroll();
 402      restoreScroll('root');
 403      
 404  });
 405  
 406  test("{ helper: 'original' }, absolute, with scroll offset on parent", function() {
 407  
 408      el = $("#draggable1").css({ position: 'absolute', top: 0, left: 0 }).draggable({ helper: "original" });
 409  
 410      setScroll();
 411      testScroll('relative');
 412      
 413      setScroll();
 414      testScroll('static');
 415      
 416      setScroll();
 417      testScroll('absolute');
 418  
 419      restoreScroll();
 420  
 421  });
 422  
 423  test("{ helper: 'original' }, absolute, with scroll offset on root", function() {
 424  
 425      el = $("#draggable1").css({ position: 'absolute', top: 0, left: 0 }).draggable({ helper: "original" });
 426      
 427      setScroll('root');
 428      testScroll('relative');
 429      
 430      setScroll('root');
 431      testScroll('static');
 432      
 433      setScroll('root');
 434      testScroll('absolute');
 435  
 436      restoreScroll('root');
 437      
 438  });
 439  
 440  test("{ helper: 'original' }, absolute, with scroll offset on root and parent", function() {
 441  
 442      el = $("#draggable1").css({ position: 'absolute', top: 0, left: 0 }).draggable({ helper: "original" });
 443  
 444      setScroll();
 445      setScroll('root');
 446      testScroll('relative');
 447      
 448      setScroll();
 449      setScroll('root');
 450      testScroll('static');
 451      
 452      setScroll();
 453      setScroll('root');
 454      testScroll('absolute');
 455  
 456      restoreScroll();
 457      restoreScroll('root');
 458      
 459  });
 460  
 461  test("{ helper: 'original' }, fixed, with scroll offset on parent", function() {
 462  
 463      el = $("#draggable1").css({ position: 'fixed', top: 0, left: 0 }).draggable({ helper: "original" });
 464  
 465      setScroll();
 466      testScroll('relative');
 467      
 468      setScroll();
 469      testScroll('static');
 470      
 471      setScroll();
 472      testScroll('absolute');
 473  
 474      restoreScroll();
 475  
 476  });
 477  
 478  test("{ helper: 'original' }, fixed, with scroll offset on root", function() {
 479      
 480      el = $("#draggable1").css({ position: 'fixed', top: 0, left: 0 }).draggable({ helper: "original" });
 481  
 482      setScroll('root');
 483      testScroll('relative');
 484      
 485      setScroll('root');
 486      testScroll('static');
 487      
 488      setScroll('root');
 489      testScroll('absolute');
 490  
 491      restoreScroll('root');
 492  });
 493  
 494  test("{ helper: 'original' }, fixed, with scroll offset on root and parent", function() {
 495  
 496      el = $("#draggable1").css({ position: 'fixed', top: 0, left: 0 }).draggable({ helper: "original" });
 497  
 498      setScroll();
 499      setScroll('root');
 500      testScroll('relative');
 501      
 502      setScroll();
 503      setScroll('root');
 504      testScroll('static');
 505      
 506      setScroll();
 507      setScroll('root');
 508      testScroll('absolute');
 509      
 510      restoreScroll();
 511      restoreScroll('root');
 512  
 513  });
 514  
 515  test("{ helper: 'clone' }, absolute", function() {
 516  
 517      var helperOffset = null;
 518      var origOffset = $("#draggable1").offset();
 519  
 520      el = $("#draggable1").draggable({ helper: "clone", drag: function(event, ui) {
 521          helperOffset = ui.helper.offset();
 522      } });
 523  
 524      drag(el, 1, 1);
 525      same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
 526  
 527  });
 528  
 529  test("{ helper: 'clone' }, absolute with scroll offset on parent", function() {
 530  
 531      setScroll();
 532      var helperOffset = null;
 533      var origOffset = null;
 534  
 535      el = $("#draggable1").draggable({ helper: "clone", drag: function(event, ui) {
 536          helperOffset = ui.helper.offset();
 537      } });
 538  
 539      $("#main").css('position', 'relative');
 540      origOffset = $("#draggable1").offset();
 541      drag(el, 1, 1);
 542      same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
 543  
 544      $("#main").css('position', 'static');
 545      origOffset = $("#draggable1").offset();
 546      drag(el, 1, 1);
 547      same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
 548      
 549      $("#main").css('position', 'absolute');
 550      origOffset = $("#draggable1").offset();
 551      drag(el, 1, 1);
 552      same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
 553      
 554      restoreScroll();
 555  
 556  });
 557  
 558  test("{ helper: 'clone' }, absolute with scroll offset on root", function() {
 559  
 560      setScroll('root');
 561      var helperOffset = null;
 562      var origOffset = null;
 563  
 564      el = $("#draggable1").draggable({ helper: "clone", drag: function(event, ui) {
 565          helperOffset = ui.helper.offset();
 566      } });
 567      
 568      $("#main").css('position', 'relative');
 569      origOffset = $("#draggable1").offset();
 570      drag(el, 1, 1);
 571      same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
 572  
 573      $("#main").css('position', 'static');
 574      origOffset = $("#draggable1").offset();
 575      drag(el, 1, 1);
 576      same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
 577      
 578      $("#main").css('position', 'absolute');
 579      origOffset = $("#draggable1").offset();
 580      drag(el, 1, 1);
 581      same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');    
 582      
 583      restoreScroll('root');
 584  
 585  });
 586  
 587  test("{ helper: 'clone' }, absolute with scroll offset on root and parent", function() {
 588  
 589      setScroll('root');
 590      setScroll();
 591      var helperOffset = null;
 592      var origOffset = null;
 593  
 594      el = $("#draggable1").draggable({ helper: "clone", drag: function(event, ui) {
 595          helperOffset = ui.helper.offset();
 596      } });
 597  
 598      $("#main").css('position', 'relative');
 599      origOffset = $("#draggable1").offset()
 600      drag(el, 1, 1);
 601      same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
 602  
 603      $("#main").css('position', 'static');
 604      origOffset = $("#draggable1").offset()
 605      drag(el, 1, 1);
 606      same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
 607      
 608      $("#main").css('position', 'absolute');
 609      origOffset = $("#draggable1").offset()
 610      drag(el, 1, 1);
 611      same({ top: helperOffset.top-1, left: helperOffset.left-1 }, origOffset, 'dragged[' + dragged.dx + ', ' + dragged.dy + '] ');
 612      
 613      restoreScroll('root');
 614      restoreScroll();
 615  
 616  });
 617  
 618  test("{ opacity: 0.5 }", function() {
 619  
 620      expect(1);
 621  
 622      var opacity = null;
 623      el = $("#draggable2").draggable({
 624          opacity: 0.5,
 625          start: function(event, ui) {
 626              opacity = $(this).css("opacity");
 627          }
 628      });
 629  
 630      drag("#draggable2", -1, -1);
 631  
 632      equals(opacity, 0.5, "start callback: opacity is");
 633  
 634  });
 635  
 636  test("{ zIndex: 10 }", function() {
 637  
 638      expect(1);
 639  
 640      var expected = 10, actual;
 641  
 642      var zIndex = null;
 643      el = $("#draggable2").draggable({
 644          zIndex: expected,
 645          start: function(event, ui) {
 646              actual = $(this).css("zIndex");
 647          }
 648      });
 649  
 650      drag("#draggable2", -1, -1);
 651  
 652      equals(actual, expected, "start callback: zIndex is");
 653  
 654  });
 655  
 656  })(jQuery);