OLD | NEW |
1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 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 /** | 5 /** |
6 * Slide mode displays a single image and has a set of controls to navigate | 6 * Slide mode displays a single image and has a set of controls to navigate |
7 * between the images and to edit an image. | 7 * between the images and to edit an image. |
8 * | 8 * |
9 * @param {!HTMLElement} container Main container element. | 9 * @param {!HTMLElement} container Main container element. |
10 * @param {!HTMLElement} content Content container element. | 10 * @param {!HTMLElement} content Content container element. |
(...skipping 1808 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
1819 | 1819 |
1820 /** | 1820 /** |
1821 * Whether it is in a touch operation that is started from targetElement or | 1821 * Whether it is in a touch operation that is started from targetElement or |
1822 * not. | 1822 * not. |
1823 * @type {boolean} | 1823 * @type {boolean} |
1824 * @private | 1824 * @private |
1825 */ | 1825 */ |
1826 this.touchStarted_ = false; | 1826 this.touchStarted_ = false; |
1827 | 1827 |
1828 /** | 1828 /** |
| 1829 * Whether the element is being clicked now or not. |
| 1830 * @type {boolean} |
| 1831 * @private |
| 1832 */ |
| 1833 this.clickStarted_ = false; |
| 1834 |
| 1835 /** |
1829 * The swipe action that should happen only once in an operation is already | 1836 * The swipe action that should happen only once in an operation is already |
1830 * done or not. | 1837 * done or not. |
1831 * @type {boolean} | 1838 * @type {boolean} |
1832 * @private | 1839 * @private |
1833 */ | 1840 */ |
1834 this.done_ = false; | 1841 this.done_ = false; |
1835 | 1842 |
1836 /** | 1843 /** |
1837 * Event on beginning of the current gesture. | 1844 * Event on beginning of the current gesture. |
1838 * The variable is updated when the number of touch finger changed. | 1845 * The variable is updated when the number of touch finger changed. |
(...skipping 21 matching lines...) Expand all Loading... |
1860 * @type {number} | 1867 * @type {number} |
1861 * @private | 1868 * @private |
1862 */ | 1869 */ |
1863 this.lastZoom_ = 1.0; | 1870 this.lastZoom_ = 1.0; |
1864 | 1871 |
1865 targetElement.addEventListener('touchstart', this.onTouchStart_.bind(this)); | 1872 targetElement.addEventListener('touchstart', this.onTouchStart_.bind(this)); |
1866 var onTouchEventBound = this.onTouchEvent_.bind(this); | 1873 var onTouchEventBound = this.onTouchEvent_.bind(this); |
1867 targetElement.ownerDocument.addEventListener('touchmove', onTouchEventBound); | 1874 targetElement.ownerDocument.addEventListener('touchmove', onTouchEventBound); |
1868 targetElement.ownerDocument.addEventListener('touchend', onTouchEventBound); | 1875 targetElement.ownerDocument.addEventListener('touchend', onTouchEventBound); |
1869 | 1876 |
| 1877 targetElement.addEventListener('mousedown', this.onMouseDown_.bind(this)); |
| 1878 targetElement.ownerDocument.addEventListener('mousemove', |
| 1879 this.onMouseMove_.bind(this)); |
| 1880 targetElement.ownerDocument.addEventListener('mouseup', |
| 1881 this.onMouseUp_.bind(this)); |
1870 targetElement.addEventListener('mousewheel', this.onMouseWheel_.bind(this)); | 1882 targetElement.addEventListener('mousewheel', this.onMouseWheel_.bind(this)); |
1871 } | 1883 } |
1872 | 1884 |
1873 /** | 1885 /** |
1874 * If the user touched the image and moved the finger more than SWIPE_THRESHOLD | 1886 * If the user touched the image and moved the finger more than SWIPE_THRESHOLD |
1875 * horizontally it's considered as a swipe gesture (change the current image). | 1887 * horizontally it's considered as a swipe gesture (change the current image). |
1876 * @type {number} | 1888 * @type {number} |
1877 * @const | 1889 * @const |
1878 */ | 1890 */ |
1879 TouchHandler.SWIPE_THRESHOLD = 100; | 1891 TouchHandler.SWIPE_THRESHOLD = 100; |
(...skipping 155 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
2035 this.slideMode_.applyViewportChange(); | 2047 this.slideMode_.applyViewportChange(); |
2036 break; | 2048 break; |
2037 } | 2049 } |
2038 | 2050 |
2039 // Update the last event. | 2051 // Update the last event. |
2040 this.lastEvent_ = event; | 2052 this.lastEvent_ = event; |
2041 this.lastZoom_ = viewport.getZoom(); | 2053 this.lastZoom_ = viewport.getZoom(); |
2042 }; | 2054 }; |
2043 | 2055 |
2044 /** | 2056 /** |
| 2057 * Zoom magnification of one scroll event. |
| 2058 * @private {number} |
| 2059 * @const |
| 2060 */ |
| 2061 TouchHandler.WHEEL_ZOOM_FACTOR = 1.05; |
| 2062 |
| 2063 /** |
2045 * Handles mouse wheel events. | 2064 * Handles mouse wheel events. |
2046 * @param {!Event} event Wheel event. | 2065 * @param {!Event} event Wheel event. |
2047 * @private | 2066 * @private |
2048 */ | 2067 */ |
2049 TouchHandler.prototype.onMouseWheel_ = function(event) { | 2068 TouchHandler.prototype.onMouseWheel_ = function(event) { |
2050 var event = assertInstanceof(event, MouseEvent); | 2069 var event = assertInstanceof(event, MouseEvent); |
2051 var viewport = this.slideMode_.getViewport(); | 2070 var viewport = this.slideMode_.getViewport(); |
2052 if (!this.enabled_ || !viewport.isZoomed()) | 2071 if (!this.enabled_) |
| 2072 return; |
| 2073 |
| 2074 this.stopOperation(); |
| 2075 this.lastZoom_ = viewport.getZoom(); |
| 2076 var zoom = this.lastZoom_; |
| 2077 if (event.wheelDeltaY > 0) { |
| 2078 zoom *= TouchHandler.WHEEL_ZOOM_FACTOR; |
| 2079 } else { |
| 2080 zoom /= TouchHandler.WHEEL_ZOOM_FACTOR; |
| 2081 } |
| 2082 viewport.setZoom(zoom); |
| 2083 this.slideMode_.imageView_.applyViewportChange(); |
| 2084 }; |
| 2085 |
| 2086 /** |
| 2087 * Handles mouse down events. |
| 2088 * @param {!Event} event Wheel event. |
| 2089 * @private |
| 2090 */ |
| 2091 TouchHandler.prototype.onMouseDown_ = function(event) { |
| 2092 var event = assertInstanceof(event, MouseEvent); |
| 2093 var viewport = this.slideMode_.getViewport(); |
| 2094 if (!this.enabled_ || event.button !== 0) |
| 2095 return; |
| 2096 this.clickStarted_ = true; |
| 2097 }; |
| 2098 |
| 2099 /** |
| 2100 * Handles mouse move events. |
| 2101 * @param {!Event} event Wheel event. |
| 2102 * @private |
| 2103 */ |
| 2104 TouchHandler.prototype.onMouseMove_ = function(event) { |
| 2105 var event = assertInstanceof(event, MouseEvent); |
| 2106 var viewport = this.slideMode_.getViewport(); |
| 2107 if (!this.enabled_ || !this.clickStarted_) |
2053 return; | 2108 return; |
2054 this.stopOperation(); | 2109 this.stopOperation(); |
2055 viewport.setOffset( | 2110 viewport.setOffset( |
2056 viewport.getOffsetX() + event.wheelDeltaX, | 2111 viewport.getOffsetX() + |
2057 viewport.getOffsetY() + event.wheelDeltaY); | 2112 (/** @type {{movementX: number}} */(event)).movementX, |
2058 this.slideMode_.applyViewportChange(); | 2113 viewport.getOffsetY() + |
| 2114 (/** @type {{movementY: number}} */(event)).movementY); |
| 2115 this.slideMode_.imageView_.applyViewportChange(); |
2059 }; | 2116 }; |
| 2117 |
| 2118 /** |
| 2119 * Handles mouse up events. |
| 2120 * @param {!Event} event Wheel event. |
| 2121 * @private |
| 2122 */ |
| 2123 TouchHandler.prototype.onMouseUp_ = function(event) { |
| 2124 if (event.button !== 0) |
| 2125 return; |
| 2126 this.clickStarted_ = false; |
| 2127 }; |
OLD | NEW |