| OLD | NEW |
| 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 cr.define('options', function() { | 5 cr.define('options', function() { |
| 6 var OptionsPage = options.OptionsPage; | 6 var OptionsPage = options.OptionsPage; |
| 7 | 7 |
| 8 // The scale ratio of the display rectangle to its original size. | 8 // The scale ratio of the display rectangle to its original size. |
| 9 /** @const */ var VISUAL_SCALE = 1 / 10; | 9 /** @const */ var VISUAL_SCALE = 1 / 10; |
| 10 | 10 |
| (...skipping 194 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 205 onTouchMove_: function(e) { | 205 onTouchMove_: function(e) { |
| 206 if (e.touches.length != 1) | 206 if (e.touches.length != 1) |
| 207 return true; | 207 return true; |
| 208 | 208 |
| 209 var touchLocation = {x: e.touches[0].pageX, y: e.touches[0].pageY}; | 209 var touchLocation = {x: e.touches[0].pageX, y: e.touches[0].pageY}; |
| 210 // Touch move events happen even if the touch location doesn't change, but | 210 // Touch move events happen even if the touch location doesn't change, but |
| 211 // it doesn't need to process the dragging. Since sometimes the touch | 211 // it doesn't need to process the dragging. Since sometimes the touch |
| 212 // position changes slightly even though the user doesn't think to move | 212 // position changes slightly even though the user doesn't think to move |
| 213 // the finger, very small move is just ignored. | 213 // the finger, very small move is just ignored. |
| 214 /** @const */ var IGNORABLE_TOUCH_MOVE_PX = 1; | 214 /** @const */ var IGNORABLE_TOUCH_MOVE_PX = 1; |
| 215 var x_diff = Math.abs(touchLocation.x - this.lastTouchLocation_.x); | 215 var xDiff = Math.abs(touchLocation.x - this.lastTouchLocation_.x); |
| 216 var y_diff = Math.abs(touchLocation.y - this.lastTouchLocation_.y); | 216 var yDiff = Math.abs(touchLocation.y - this.lastTouchLocation_.y); |
| 217 if (x_diff <= IGNORABLE_TOUCH_MOVE_PX && | 217 if (xDiff <= IGNORABLE_TOUCH_MOVE_PX && |
| 218 y_diff <= IGNORABLE_TOUCH_MOVE_PX) { | 218 yDiff <= IGNORABLE_TOUCH_MOVE_PX) { |
| 219 return true; | 219 return true; |
| 220 } | 220 } |
| 221 | 221 |
| 222 this.lastTouchLocation_ = touchLocation; | 222 this.lastTouchLocation_ = touchLocation; |
| 223 return this.processDragging_(e, touchLocation); | 223 return this.processDragging_(e, touchLocation); |
| 224 }, | 224 }, |
| 225 | 225 |
| 226 /** | 226 /** |
| 227 * Mouse down handler for dragging display rectangle. | 227 * Mouse down handler for dragging display rectangle. |
| 228 * @param {Event} e The mouse down event. | 228 * @param {Event} e The mouse down event. |
| (...skipping 120 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 349 y: newPosition.y + draggingDiv.offsetHeight / 2 | 349 y: newPosition.y + draggingDiv.offsetHeight / 2 |
| 350 }; | 350 }; |
| 351 | 351 |
| 352 var baseBounds = { | 352 var baseBounds = { |
| 353 x: baseDiv.offsetLeft, | 353 x: baseDiv.offsetLeft, |
| 354 y: baseDiv.offsetTop, | 354 y: baseDiv.offsetTop, |
| 355 width: baseDiv.offsetWidth, | 355 width: baseDiv.offsetWidth, |
| 356 height: baseDiv.offsetHeight | 356 height: baseDiv.offsetHeight |
| 357 }; | 357 }; |
| 358 switch (getPositionToRectangle(baseBounds, newCenter)) { | 358 switch (getPositionToRectangle(baseBounds, newCenter)) { |
| 359 case SecondaryDisplayLayout.RIGHT: | 359 case SecondaryDisplayLayout.RIGHT: |
| 360 this.layout_ = this.dragging_.display.isPrimary ? | 360 this.layout_ = this.dragging_.display.isPrimary ? |
| 361 SecondaryDisplayLayout.LEFT : SecondaryDisplayLayout.RIGHT; | 361 SecondaryDisplayLayout.LEFT : SecondaryDisplayLayout.RIGHT; |
| 362 break; | 362 break; |
| 363 case SecondaryDisplayLayout.LEFT: | 363 case SecondaryDisplayLayout.LEFT: |
| 364 this.layout_ = this.dragging_.display.isPrimary ? | 364 this.layout_ = this.dragging_.display.isPrimary ? |
| 365 SecondaryDisplayLayout.RIGHT : SecondaryDisplayLayout.LEFT; | 365 SecondaryDisplayLayout.RIGHT : SecondaryDisplayLayout.LEFT; |
| 366 break; | 366 break; |
| 367 case SecondaryDisplayLayout.TOP: | 367 case SecondaryDisplayLayout.TOP: |
| 368 this.layout_ = this.dragging_.display.isPrimary ? | 368 this.layout_ = this.dragging_.display.isPrimary ? |
| 369 SecondaryDisplayLayout.BOTTOM : SecondaryDisplayLayout.TOP; | 369 SecondaryDisplayLayout.BOTTOM : SecondaryDisplayLayout.TOP; |
| 370 break; | 370 break; |
| 371 case SecondaryDisplayLayout.BOTTOM: | 371 case SecondaryDisplayLayout.BOTTOM: |
| 372 this.layout_ = this.dragging_.display.isPrimary ? | 372 this.layout_ = this.dragging_.display.isPrimary ? |
| 373 SecondaryDisplayLayout.TOP : SecondaryDisplayLayout.BOTTOM; | 373 SecondaryDisplayLayout.TOP : SecondaryDisplayLayout.BOTTOM; |
| 374 break; | 374 break; |
| 375 } | 375 } |
| 376 | 376 |
| 377 if (this.layout_ == SecondaryDisplayLayout.LEFT || | 377 if (this.layout_ == SecondaryDisplayLayout.LEFT || |
| 378 this.layout_ == SecondaryDisplayLayout.RIGHT) { | 378 this.layout_ == SecondaryDisplayLayout.RIGHT) { |
| 379 if (newPosition.y > baseDiv.offsetTop + baseDiv.offsetHeight) | 379 if (newPosition.y > baseDiv.offsetTop + baseDiv.offsetHeight) |
| 380 this.layout_ = this.dragging_.display.isPrimary ? | 380 this.layout_ = this.dragging_.display.isPrimary ? |
| 381 SecondaryDisplayLayout.TOP : SecondaryDisplayLayout.BOTTOM; | 381 SecondaryDisplayLayout.TOP : SecondaryDisplayLayout.BOTTOM; |
| 382 else if (newPosition.y + draggingDiv.offsetHeight < | 382 else if (newPosition.y + draggingDiv.offsetHeight < |
| 383 baseDiv.offsetTop) | 383 baseDiv.offsetTop) |
| 384 this.layout_ = this.dragging_.display.isPrimary ? | 384 this.layout_ = this.dragging_.display.isPrimary ? |
| 385 SecondaryDisplayLayout.BOTTOM : SecondaryDisplayLayout.TOP; | 385 SecondaryDisplayLayout.BOTTOM : SecondaryDisplayLayout.TOP; |
| 386 } else { | 386 } else { |
| 387 if (newPosition.y > baseDiv.offsetLeft + baseDiv.offsetWidth) | 387 if (newPosition.y > baseDiv.offsetLeft + baseDiv.offsetWidth) |
| 388 this.layout_ = this.dragging_.display.isPrimary ? | 388 this.layout_ = this.dragging_.display.isPrimary ? |
| 389 SecondaryDisplayLayout.LEFT : SecondaryDisplayLayout.RIGHT; | 389 SecondaryDisplayLayout.LEFT : SecondaryDisplayLayout.RIGHT; |
| 390 else if (newPosition.y + draggingDiv.offsetWidth < | 390 else if (newPosition.y + draggingDiv.offsetWidth < |
| 391 baseDiv.offstLeft) | 391 baseDiv.offstLeft) |
| 392 this.layout_ = this.dragging_.display.isPrimary ? | 392 this.layout_ = this.dragging_.display.isPrimary ? |
| 393 SecondaryDisplayLayout.RIGHT : SecondaryDisplayLayout.LEFT; | 393 SecondaryDisplayLayout.RIGHT : SecondaryDisplayLayout.LEFT; |
| 394 } | 394 } |
| 395 | 395 |
| 396 var layout_to_base; | 396 var layoutToBase; |
| 397 if (!this.dragging_.display.isPrimary) { | 397 if (!this.dragging_.display.isPrimary) { |
| 398 layout_to_base = this.layout_; | 398 layoutToBase = this.layout_; |
| 399 } else { | 399 } else { |
| 400 switch (this.layout_) { | 400 switch (this.layout_) { |
| 401 case SecondaryDisplayLayout.RIGHT: | 401 case SecondaryDisplayLayout.RIGHT: |
| 402 layout_to_base = SecondaryDisplayLayout.LEFT; | 402 layoutToBase = SecondaryDisplayLayout.LEFT; |
| 403 break; | 403 break; |
| 404 case SecondaryDisplayLayout.LEFT: | 404 case SecondaryDisplayLayout.LEFT: |
| 405 layout_to_base = SecondaryDisplayLayout.RIGHT; | 405 layoutToBase = SecondaryDisplayLayout.RIGHT; |
| 406 break; | 406 break; |
| 407 case SecondaryDisplayLayout.TOP: | 407 case SecondaryDisplayLayout.TOP: |
| 408 layout_to_base = SecondaryDisplayLayout.BOTTOM; | 408 layoutToBase = SecondaryDisplayLayout.BOTTOM; |
| 409 break; | 409 break; |
| 410 case SecondaryDisplayLayout.BOTTOM: | 410 case SecondaryDisplayLayout.BOTTOM: |
| 411 layout_to_base = SecondaryDisplayLayout.TOP; | 411 layoutToBase = SecondaryDisplayLayout.TOP; |
| 412 break; | 412 break; |
| 413 } | 413 } |
| 414 } | 414 } |
| 415 | 415 |
| 416 switch (layout_to_base) { | 416 switch (layoutToBase) { |
| 417 case SecondaryDisplayLayout.RIGHT: | 417 case SecondaryDisplayLayout.RIGHT: |
| 418 draggingDiv.style.left = | 418 draggingDiv.style.left = |
| 419 baseDiv.offsetLeft + baseDiv.offsetWidth + 'px'; | 419 baseDiv.offsetLeft + baseDiv.offsetWidth + 'px'; |
| 420 draggingDiv.style.top = newPosition.y + 'px'; | 420 draggingDiv.style.top = newPosition.y + 'px'; |
| 421 break; | 421 break; |
| 422 case SecondaryDisplayLayout.LEFT: | 422 case SecondaryDisplayLayout.LEFT: |
| 423 draggingDiv.style.left = | 423 draggingDiv.style.left = |
| 424 baseDiv.offsetLeft - draggingDiv.offsetWidth + 'px'; | 424 baseDiv.offsetLeft - draggingDiv.offsetWidth + 'px'; |
| 425 draggingDiv.style.top = newPosition.y + 'px'; | 425 draggingDiv.style.top = newPosition.y + 'px'; |
| 426 break; | 426 break; |
| 427 case SecondaryDisplayLayout.TOP: | 427 case SecondaryDisplayLayout.TOP: |
| 428 draggingDiv.style.top = | 428 draggingDiv.style.top = |
| 429 baseDiv.offsetTop - draggingDiv.offsetHeight + 'px'; | 429 baseDiv.offsetTop - draggingDiv.offsetHeight + 'px'; |
| 430 draggingDiv.style.left = newPosition.x + 'px'; | 430 draggingDiv.style.left = newPosition.x + 'px'; |
| 431 break; | 431 break; |
| 432 case SecondaryDisplayLayout.BOTTOM: | 432 case SecondaryDisplayLayout.BOTTOM: |
| 433 draggingDiv.style.top = | 433 draggingDiv.style.top = |
| 434 baseDiv.offsetTop + baseDiv.offsetHeight + 'px'; | 434 baseDiv.offsetTop + baseDiv.offsetHeight + 'px'; |
| 435 draggingDiv.style.left = newPosition.x + 'px'; | 435 draggingDiv.style.left = newPosition.x + 'px'; |
| 436 break; | 436 break; |
| 437 } | 437 } |
| 438 | 438 |
| 439 return false; | 439 return false; |
| 440 }, | 440 }, |
| 441 | 441 |
| 442 /** | 442 /** |
| 443 * start dragging of a display rectangle. | 443 * start dragging of a display rectangle. |
| 444 * @param {HTMLElement} target The event target. | 444 * @param {HTMLElement} target The event target. |
| 445 * @param {Object} eventLocation The object to hold the location where | 445 * @param {Object} eventLocation The object to hold the location where |
| 446 * this event happens. | 446 * this event happens. |
| (...skipping 326 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 773 mirroring, displays, layout, offset) { | 773 mirroring, displays, layout, offset) { |
| 774 DisplayOptions.getInstance().onDisplayChanged_( | 774 DisplayOptions.getInstance().onDisplayChanged_( |
| 775 mirroring, displays, layout, offset); | 775 mirroring, displays, layout, offset); |
| 776 }; | 776 }; |
| 777 | 777 |
| 778 // Export | 778 // Export |
| 779 return { | 779 return { |
| 780 DisplayOptions: DisplayOptions | 780 DisplayOptions: DisplayOptions |
| 781 }; | 781 }; |
| 782 }); | 782 }); |
| OLD | NEW |