| 1 | /*
|
|---|
| 2 | * position_core.js
|
|---|
| 3 | */
|
|---|
| 4 | (function($) {
|
|---|
| 5 |
|
|---|
| 6 | test('my, at, of', function() {
|
|---|
| 7 | $('#elx').position({
|
|---|
| 8 | my: 'left top',
|
|---|
| 9 | at: 'left top',
|
|---|
| 10 | of: '#parentx',
|
|---|
| 11 | collision: 'none'
|
|---|
| 12 | });
|
|---|
| 13 | same($('#elx').offset(), { top: 40, left: 40 }, 'left top, left top');
|
|---|
| 14 |
|
|---|
| 15 | $('#elx').position({
|
|---|
| 16 | my: 'left top',
|
|---|
| 17 | at: 'left bottom',
|
|---|
| 18 | of: '#parentx',
|
|---|
| 19 | collision: 'none'
|
|---|
| 20 | });
|
|---|
| 21 | same($('#elx').offset(), { top: 60, left: 40 }, 'left top, left bottom');
|
|---|
| 22 |
|
|---|
| 23 | $('#elx').position({
|
|---|
| 24 | my: 'left',
|
|---|
| 25 | at: 'bottom',
|
|---|
| 26 | of: '#parentx',
|
|---|
| 27 | collision: 'none'
|
|---|
| 28 | });
|
|---|
| 29 | same($('#elx').offset(), { top: 55, left: 50 }, 'left, bottom');
|
|---|
| 30 |
|
|---|
| 31 | $('#elx').position({
|
|---|
| 32 | my: 'left foo',
|
|---|
| 33 | at: 'bar baz',
|
|---|
| 34 | of: '#parentx',
|
|---|
| 35 | collision: 'none'
|
|---|
| 36 | });
|
|---|
| 37 | same($('#elx').offset(), { top: 45, left: 50 }, 'left foo, bar baz');
|
|---|
| 38 | });
|
|---|
| 39 |
|
|---|
| 40 | test('multiple elements', function() {
|
|---|
| 41 | var elements = $('#el1, #el2');
|
|---|
| 42 | var result = elements.position({
|
|---|
| 43 | my: 'left top',
|
|---|
| 44 | at: 'left bottom',
|
|---|
| 45 | of: '#parent',
|
|---|
| 46 | collision: 'none'
|
|---|
| 47 | });
|
|---|
| 48 |
|
|---|
| 49 | same(result, elements);
|
|---|
| 50 | var expected = {top: 10, left: 4};
|
|---|
| 51 | elements.each(function() {
|
|---|
| 52 | same($(this).offset(), expected);
|
|---|
| 53 | });
|
|---|
| 54 | });
|
|---|
| 55 |
|
|---|
| 56 | test('positions', function() {
|
|---|
| 57 | var definitions = [];
|
|---|
| 58 | var offsets = {
|
|---|
| 59 | left: 0,
|
|---|
| 60 | center: 3,
|
|---|
| 61 | right: 6,
|
|---|
| 62 | top: 0,
|
|---|
| 63 | center: 3,
|
|---|
| 64 | bottom: 6
|
|---|
| 65 | };
|
|---|
| 66 | var start = { left: 4, top: 4 };
|
|---|
| 67 | $.each([0, 1], function(my) {
|
|---|
| 68 | $.each(["top", "center", "bottom"], function(vindex, vertical) {
|
|---|
| 69 | $.each(["left", "center", "right"], function(hindex, horizontal) {
|
|---|
| 70 | definitions.push({
|
|---|
| 71 | my: my ? horizontal + " " + vertical : 'left top',
|
|---|
| 72 | at: !my ? horizontal + " " + vertical : 'left top',
|
|---|
| 73 | result: {
|
|---|
| 74 | top: my ? start.top - offsets[vertical] : start.top + offsets[vertical],
|
|---|
| 75 | left: my ? start.left - offsets[horizontal] : start.left + offsets[horizontal]
|
|---|
| 76 | }
|
|---|
| 77 | });
|
|---|
| 78 | });
|
|---|
| 79 | });
|
|---|
| 80 | });
|
|---|
| 81 | var el = $("#el1");
|
|---|
| 82 | $.each(definitions, function(index, definition) {
|
|---|
| 83 | el.position({
|
|---|
| 84 | my: definition.my,
|
|---|
| 85 | at: definition.at,
|
|---|
| 86 | of: '#parent',
|
|---|
| 87 | collision: 'none'
|
|---|
| 88 | });
|
|---|
| 89 | same(el.offset(), definition.result, "Position via " + jsDump.parse({my:definition.my, at:definition.at}));
|
|---|
| 90 | });
|
|---|
| 91 | });
|
|---|
| 92 |
|
|---|
| 93 | test('of', function() {
|
|---|
| 94 | $('#elx').position({
|
|---|
| 95 | my: 'left top',
|
|---|
| 96 | at: 'left top',
|
|---|
| 97 | of: '#parentx',
|
|---|
| 98 | collision: 'none'
|
|---|
| 99 | });
|
|---|
| 100 | same($('#elx').offset(), { top: 40, left: 40 }, 'selector');
|
|---|
| 101 |
|
|---|
| 102 | $('#elx').position({
|
|---|
| 103 | my: 'left top',
|
|---|
| 104 | at: 'left bottom',
|
|---|
| 105 | of: $('#parentx'),
|
|---|
| 106 | collision: 'none'
|
|---|
| 107 | });
|
|---|
| 108 | same($('#elx').offset(), { top: 60, left: 40 }, 'jQuery object');
|
|---|
| 109 |
|
|---|
| 110 | $('#elx').position({
|
|---|
| 111 | my: 'left top',
|
|---|
| 112 | at: 'left top',
|
|---|
| 113 | of: $('#parentx')[0],
|
|---|
| 114 | collision: 'none'
|
|---|
| 115 | });
|
|---|
| 116 | same($('#elx').offset(), { top: 40, left: 40 }, 'DOM element');
|
|---|
| 117 |
|
|---|
| 118 | $('#elx').position({
|
|---|
| 119 | my: 'right bottom',
|
|---|
| 120 | at: 'right bottom',
|
|---|
| 121 | of: document,
|
|---|
| 122 | collision: 'none'
|
|---|
| 123 | });
|
|---|
| 124 | same($('#elx').offset(), {
|
|---|
| 125 | top: $(document).height() - 10,
|
|---|
| 126 | left: $(document).width() - 10
|
|---|
| 127 | }, 'document');
|
|---|
| 128 |
|
|---|
| 129 | $('#elx').position({
|
|---|
| 130 | my: 'right bottom',
|
|---|
| 131 | at: 'right bottom',
|
|---|
| 132 | of: window,
|
|---|
| 133 | collision: 'none'
|
|---|
| 134 | });
|
|---|
| 135 | same($('#elx').offset(), {
|
|---|
| 136 | top: $(window).height() - 10,
|
|---|
| 137 | left: $(window).width() - 10
|
|---|
| 138 | }, 'window');
|
|---|
| 139 |
|
|---|
| 140 | $(window).scrollTop(500).scrollLeft(200);
|
|---|
| 141 | $('#elx').position({
|
|---|
| 142 | my: 'right bottom',
|
|---|
| 143 | at: 'right bottom',
|
|---|
| 144 | of: window,
|
|---|
| 145 | collision: 'none'
|
|---|
| 146 | });
|
|---|
| 147 | same($('#elx').offset(), {
|
|---|
| 148 | top: $(window).height() + 500 - 10,
|
|---|
| 149 | left: $(window).width() + 200 - 10
|
|---|
| 150 | }, 'window, scrolled');
|
|---|
| 151 | $(window).scrollTop(0).scrollLeft(0);
|
|---|
| 152 |
|
|---|
| 153 | var event = $.extend($.Event('someEvent'), { pageX: 200, pageY: 300 });
|
|---|
| 154 | $('#elx').position({
|
|---|
| 155 | my: 'left top',
|
|---|
| 156 | at: 'left top',
|
|---|
| 157 | of: event,
|
|---|
| 158 | collision: 'none'
|
|---|
| 159 | });
|
|---|
| 160 | same($('#elx').offset(), {
|
|---|
| 161 | top: 300,
|
|---|
| 162 | left: 200
|
|---|
| 163 | }, 'event - left top, left top');
|
|---|
| 164 |
|
|---|
| 165 | event = $.extend($.Event('someEvent'), { pageX: 400, pageY: 600 });
|
|---|
| 166 | $('#elx').position({
|
|---|
| 167 | my: 'left top',
|
|---|
| 168 | at: 'right bottom',
|
|---|
| 169 | of: event,
|
|---|
| 170 | collision: 'none'
|
|---|
| 171 | });
|
|---|
| 172 | same($('#elx').offset(), {
|
|---|
| 173 | top: 600,
|
|---|
| 174 | left: 400
|
|---|
| 175 | }, 'event - left top, right bottom');
|
|---|
| 176 | });
|
|---|
| 177 |
|
|---|
| 178 | test('offset', function() {
|
|---|
| 179 | $('#elx').position({
|
|---|
| 180 | my: 'left top',
|
|---|
| 181 | at: 'left bottom',
|
|---|
| 182 | of: '#parentx',
|
|---|
| 183 | offset: '10',
|
|---|
| 184 | collision: 'none'
|
|---|
| 185 | });
|
|---|
| 186 | same($('#elx').offset(), { top: 70, left: 50 }, 'single value');
|
|---|
| 187 |
|
|---|
| 188 | $('#elx').position({
|
|---|
| 189 | my: 'left top',
|
|---|
| 190 | at: 'left bottom',
|
|---|
| 191 | of: '#parentx',
|
|---|
| 192 | offset: '5 -3',
|
|---|
| 193 | collision: 'none'
|
|---|
| 194 | });
|
|---|
| 195 | same($('#elx').offset(), { top: 57, left: 45 }, 'two values');
|
|---|
| 196 |
|
|---|
| 197 | $('#elx').position({
|
|---|
| 198 | my: 'left top',
|
|---|
| 199 | at: 'left bottom',
|
|---|
| 200 | of: '#parentx',
|
|---|
| 201 | offset: '5px -3px',
|
|---|
| 202 | collision: 'none'
|
|---|
| 203 | });
|
|---|
| 204 | same($('#elx').offset(), { top: 57, left: 45 }, 'with units');
|
|---|
| 205 | });
|
|---|
| 206 |
|
|---|
| 207 | test('using', function() {
|
|---|
| 208 | expect(6);
|
|---|
| 209 |
|
|---|
| 210 | var count = 0,
|
|---|
| 211 | elems = $('#el1, #el2'),
|
|---|
| 212 | expectedPosition = { top: 40, left: 40 },
|
|---|
| 213 | originalPosition = elems.position({
|
|---|
| 214 | my: 'right bottom',
|
|---|
| 215 | at: 'rigt bottom',
|
|---|
| 216 | of: '#parentx',
|
|---|
| 217 | collision: 'none'
|
|---|
| 218 | }).offset();
|
|---|
| 219 |
|
|---|
| 220 | elems.position({
|
|---|
| 221 | my: 'left top',
|
|---|
| 222 | at: 'left top',
|
|---|
| 223 | of: '#parentx',
|
|---|
| 224 | using: function(position) {
|
|---|
| 225 | same(this, elems[count], 'correct context for call #' + count);
|
|---|
| 226 | same(position, expectedPosition, 'correct position for call #' + count);
|
|---|
| 227 | count++;
|
|---|
| 228 | }
|
|---|
| 229 | });
|
|---|
| 230 |
|
|---|
| 231 | elems.each(function() {
|
|---|
| 232 | same($(this).offset(), originalPosition, 'elements not moved');
|
|---|
| 233 | });
|
|---|
| 234 | });
|
|---|
| 235 |
|
|---|
| 236 | function collisionTest(config, result, msg) {
|
|---|
| 237 | var elem = $("#elx").position($.extend({
|
|---|
| 238 | my: "left top",
|
|---|
| 239 | at: "right bottom",
|
|---|
| 240 | of: window
|
|---|
| 241 | }, config));
|
|---|
| 242 | same(elem.offset(), result, msg);
|
|---|
| 243 | }
|
|---|
| 244 |
|
|---|
| 245 | function collisionTest2(config, result, msg) {
|
|---|
| 246 | collisionTest($.extend({
|
|---|
| 247 | my: "right bottom",
|
|---|
| 248 | at: "left top"
|
|---|
| 249 | }, config), result, msg);
|
|---|
| 250 | }
|
|---|
| 251 |
|
|---|
| 252 | test("collision: fit, no offset", function() {
|
|---|
| 253 | collisionTest({
|
|---|
| 254 | collision: "fit"
|
|---|
| 255 | }, { top: $(window).height() - 10, left: $(window).width() - 10 }, "right bottom");
|
|---|
| 256 |
|
|---|
| 257 | collisionTest2({
|
|---|
| 258 | collision: "fit"
|
|---|
| 259 | }, { top: 0, left: 0 }, "left top");
|
|---|
| 260 | });
|
|---|
| 261 |
|
|---|
| 262 | test("collision: fit, with offset", function() {
|
|---|
| 263 | collisionTest({
|
|---|
| 264 | collision: "fit",
|
|---|
| 265 | offset: "2 3"
|
|---|
| 266 | }, { top: $(window).height() - 10, left: $(window).width() - 10 }, "right bottom");
|
|---|
| 267 |
|
|---|
| 268 | collisionTest2({
|
|---|
| 269 | collision: "fit",
|
|---|
| 270 | offset: "2 3"
|
|---|
| 271 | }, { top: 0, left: 0 }, "left top, positive offset");
|
|---|
| 272 |
|
|---|
| 273 | collisionTest2({
|
|---|
| 274 | collision: "fit",
|
|---|
| 275 | offset: "-2 -3"
|
|---|
| 276 | }, { top: 0, left: 0 }, "left top, negative offset");
|
|---|
| 277 | });
|
|---|
| 278 |
|
|---|
| 279 | test("collision: flip, no offset", function() {
|
|---|
| 280 | collisionTest({
|
|---|
| 281 | collision: "flip"
|
|---|
| 282 | }, { top: -10, left: -10 }, "left top");
|
|---|
| 283 |
|
|---|
| 284 | collisionTest2({
|
|---|
| 285 | collision: "flip"
|
|---|
| 286 | }, { top: $(window).height(), left: $(window).width() }, "right bottom");
|
|---|
| 287 | });
|
|---|
| 288 |
|
|---|
| 289 | test("collision: flip, with offset", function() {
|
|---|
| 290 | collisionTest({
|
|---|
| 291 | collision: "flip",
|
|---|
| 292 | offset: "2 3"
|
|---|
| 293 | }, { top: -13, left: -12 }, "left top, with offset added");
|
|---|
| 294 |
|
|---|
| 295 | collisionTest2({
|
|---|
| 296 | collision: "flip",
|
|---|
| 297 | offset: "2 3"
|
|---|
| 298 | }, { top: $(window).height() - 3, left: $(window).width() - 2 }, "bottom, positive offset");
|
|---|
| 299 |
|
|---|
| 300 | collisionTest2({
|
|---|
| 301 | collision: "flip",
|
|---|
| 302 | offset: "-2 -3"
|
|---|
| 303 | }, { top: $(window).height() + 3, left: $(window).width() + 2 }, "right bottom, negative offset");
|
|---|
| 304 | });
|
|---|
| 305 |
|
|---|
| 306 | test("collision: none, no offset", function() {
|
|---|
| 307 | collisionTest({
|
|---|
| 308 | collision: "none"
|
|---|
| 309 | }, { top: $(window).height(), left: $(window).width() }, "left top");
|
|---|
| 310 |
|
|---|
| 311 | collisionTest2({
|
|---|
| 312 | collision: "none"
|
|---|
| 313 | }, { top: -10, left: -10 }, "moved to the right bottom");
|
|---|
| 314 | });
|
|---|
| 315 |
|
|---|
| 316 | test("collision: none, with offset", function() {
|
|---|
| 317 | collisionTest({
|
|---|
| 318 | collision: "none",
|
|---|
| 319 | offset: "2 3"
|
|---|
| 320 | }, { top: $(window).height() + 3, left: $(window).width() + 2 }, "right bottom, with offset added");
|
|---|
| 321 |
|
|---|
| 322 | collisionTest2({
|
|---|
| 323 | collision: "none",
|
|---|
| 324 | offset: "2 3"
|
|---|
| 325 | }, { top: -7, left: -8 }, "left top, positive offset");
|
|---|
| 326 |
|
|---|
| 327 | collisionTest2({
|
|---|
| 328 | collision: "none",
|
|---|
| 329 | offset: "-2 -3"
|
|---|
| 330 | }, { top: -13, left: -12 }, "left top, negative offset");
|
|---|
| 331 | });
|
|---|
| 332 |
|
|---|
| 333 | })(jQuery);
|
|---|
