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_) |
2053 return; | 2072 return; |
2073 | |
2054 this.stopOperation(); | 2074 this.stopOperation(); |
2075 this.lastZoom_ = viewport.getZoom(); | |
2076 var zoom = this.lastZoom_; | |
2077 if (event.wheelDeltaY > 0) { | |
2078 zoom = zoom * TouchHandler.WHEEL_ZOOM_FACTOR; | |
2079 } else { | |
2080 zoom = 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_) | |
2108 return; | |
2055 viewport.setOffset( | 2109 viewport.setOffset( |
hirono
2016/02/10 02:06:53
Please call this.stopOperation() before setting of
ryoh
2016/02/10 03:51:56
Done.
| |
2056 viewport.getOffsetX() + event.wheelDeltaX, | 2110 viewport.getOffsetX() + |
2057 viewport.getOffsetY() + event.wheelDeltaY); | 2111 (/** @type {{movementX: number}} */(event)).movementX, |
2058 this.slideMode_.applyViewportChange(); | 2112 viewport.getOffsetY() + |
2113 (/** @type {{movementY: number}} */(event)).movementY); | |
2114 this.slideMode_.imageView_.applyViewportChange(); | |
2059 }; | 2115 }; |
2116 | |
2117 /** | |
2118 * Handles mouse up events. | |
2119 * @param {!Event} event Wheel event. | |
2120 * @private | |
2121 */ | |
2122 TouchHandler.prototype.onMouseUp_ = function(event) { | |
2123 this.clickStarted_ = false; | |
hirono
2016/02/10 02:06:53
I think you also need to check event.button here.
ryoh
2016/02/10 03:51:56
That's right!
| |
2124 }; | |
OLD | NEW |