| 3845 |
idir |
1 |
/*
|
|
|
2 |
* * Leaflet Gesture Handling **
|
|
|
3 |
* * Version 1.1.8
|
|
|
4 |
*/
|
|
|
5 |
import LanguageContent from "./language-content";
|
|
|
6 |
|
|
|
7 |
L.Map.mergeOptions({
|
|
|
8 |
gestureHandlingOptions: {
|
|
|
9 |
text: {},
|
|
|
10 |
duration: 1000
|
|
|
11 |
}
|
|
|
12 |
});
|
|
|
13 |
|
|
|
14 |
var draggingMap = false;
|
|
|
15 |
|
|
|
16 |
export var GestureHandling = L.Handler.extend({
|
|
|
17 |
addHooks: function() {
|
|
|
18 |
this._handleTouch = this._handleTouch.bind(this);
|
|
|
19 |
|
|
|
20 |
this._setupPluginOptions();
|
|
|
21 |
this._setLanguageContent();
|
|
|
22 |
this._disableInteractions();
|
|
|
23 |
|
|
|
24 |
//Uses native event listeners instead of L.DomEvent due to issues with Android touch events
|
|
|
25 |
//turning into pointer events
|
|
|
26 |
this._map._container.addEventListener("touchstart", this._handleTouch);
|
|
|
27 |
this._map._container.addEventListener("touchmove", this._handleTouch);
|
|
|
28 |
this._map._container.addEventListener("touchend", this._handleTouch);
|
|
|
29 |
this._map._container.addEventListener("touchcancel", this._handleTouch);
|
|
|
30 |
this._map._container.addEventListener("click", this._handleTouch);
|
|
|
31 |
|
|
|
32 |
L.DomEvent.on(
|
|
|
33 |
this._map._container,
|
|
|
34 |
"wheel",
|
|
|
35 |
this._handleScroll,
|
|
|
36 |
this
|
|
|
37 |
);
|
|
|
38 |
L.DomEvent.on(this._map, "mouseover", this._handleMouseOver, this);
|
|
|
39 |
L.DomEvent.on(this._map, "mouseout", this._handleMouseOut, this);
|
|
|
40 |
|
|
|
41 |
// Listen to these events so will not disable dragging if the user moves the mouse out the boundary of the map container whilst actively dragging the map.
|
|
|
42 |
L.DomEvent.on(this._map, "movestart", this._handleDragging, this);
|
|
|
43 |
L.DomEvent.on(this._map, "move", this._handleDragging, this);
|
|
|
44 |
L.DomEvent.on(this._map, "moveend", this._handleDragging, this);
|
|
|
45 |
},
|
|
|
46 |
|
|
|
47 |
removeHooks: function() {
|
|
|
48 |
this._enableInteractions();
|
|
|
49 |
|
|
|
50 |
this._map._container.removeEventListener(
|
|
|
51 |
"touchstart",
|
|
|
52 |
this._handleTouch
|
|
|
53 |
);
|
|
|
54 |
this._map._container.removeEventListener(
|
|
|
55 |
"touchmove",
|
|
|
56 |
this._handleTouch
|
|
|
57 |
);
|
|
|
58 |
this._map._container.removeEventListener("touchend", this._handleTouch);
|
|
|
59 |
this._map._container.removeEventListener(
|
|
|
60 |
"touchcancel",
|
|
|
61 |
this._handleTouch
|
|
|
62 |
);
|
|
|
63 |
this._map._container.removeEventListener("click", this._handleTouch);
|
|
|
64 |
|
|
|
65 |
L.DomEvent.off(
|
|
|
66 |
this._map._container,
|
|
|
67 |
"wheel",
|
|
|
68 |
this._handleScroll,
|
|
|
69 |
this
|
|
|
70 |
);
|
|
|
71 |
L.DomEvent.off(this._map, "mouseover", this._handleMouseOver, this);
|
|
|
72 |
L.DomEvent.off(this._map, "mouseout", this._handleMouseOut, this);
|
|
|
73 |
|
|
|
74 |
L.DomEvent.off(this._map, "movestart", this._handleDragging, this);
|
|
|
75 |
L.DomEvent.off(this._map, "move", this._handleDragging, this);
|
|
|
76 |
L.DomEvent.off(this._map, "moveend", this._handleDragging, this);
|
|
|
77 |
},
|
|
|
78 |
|
|
|
79 |
_handleDragging: function(e) {
|
|
|
80 |
if (e.type == "movestart" || e.type == "move") {
|
|
|
81 |
draggingMap = true;
|
|
|
82 |
} else if (e.type == "moveend") {
|
|
|
83 |
draggingMap = false;
|
|
|
84 |
}
|
|
|
85 |
},
|
|
|
86 |
|
|
|
87 |
_disableInteractions: function() {
|
|
|
88 |
this._map.dragging.disable();
|
|
|
89 |
this._map.scrollWheelZoom.disable();
|
|
|
90 |
if (this._map.tap) {
|
|
|
91 |
this._map.tap.disable();
|
|
|
92 |
}
|
|
|
93 |
},
|
|
|
94 |
|
|
|
95 |
_enableInteractions: function() {
|
|
|
96 |
this._map.dragging.enable();
|
|
|
97 |
this._map.scrollWheelZoom.enable();
|
|
|
98 |
if (this._map.tap) {
|
|
|
99 |
this._map.tap.enable();
|
|
|
100 |
}
|
|
|
101 |
},
|
|
|
102 |
|
|
|
103 |
_setupPluginOptions: function() {
|
|
|
104 |
//For backwards compatibility, merge gestureHandlingText into the new options object
|
|
|
105 |
if (this._map.options.gestureHandlingText) {
|
|
|
106 |
this._map.options.gestureHandlingOptions.text = this._map.options.gestureHandlingText;
|
|
|
107 |
}
|
|
|
108 |
},
|
|
|
109 |
|
|
|
110 |
_setLanguageContent: function() {
|
|
|
111 |
var languageContent;
|
|
|
112 |
//If user has supplied custom language, use that
|
|
|
113 |
if (
|
|
|
114 |
this._map.options.gestureHandlingOptions &&
|
|
|
115 |
this._map.options.gestureHandlingOptions.text &&
|
|
|
116 |
this._map.options.gestureHandlingOptions.text.touch &&
|
|
|
117 |
this._map.options.gestureHandlingOptions.text.scroll &&
|
|
|
118 |
this._map.options.gestureHandlingOptions.text.scrollMac
|
|
|
119 |
) {
|
|
|
120 |
languageContent = this._map.options.gestureHandlingOptions.text;
|
|
|
121 |
} else {
|
|
|
122 |
//Otherwise auto set it from the language files
|
|
|
123 |
|
|
|
124 |
//Determine their language e.g fr or en-US
|
|
|
125 |
var lang = this._getUserLanguage();
|
|
|
126 |
|
|
|
127 |
//If we couldn't find it default to en
|
|
|
128 |
if (!lang) {
|
|
|
129 |
lang = "en";
|
|
|
130 |
}
|
|
|
131 |
|
|
|
132 |
//Lookup the appropriate language content
|
|
|
133 |
if (LanguageContent[lang]) {
|
|
|
134 |
languageContent = LanguageContent[lang];
|
|
|
135 |
}
|
|
|
136 |
|
|
|
137 |
//If no result, try searching by the first part only. e.g en-US just use en.
|
|
|
138 |
if (!languageContent && lang.indexOf("-") !== -1) {
|
|
|
139 |
lang = lang.split("-")[0];
|
|
|
140 |
languageContent = LanguageContent[lang];
|
|
|
141 |
}
|
|
|
142 |
|
|
|
143 |
if (!languageContent) {
|
|
|
144 |
// If still nothing, default to English
|
|
|
145 |
// console.log("No lang found for", lang);
|
|
|
146 |
lang = "en";
|
|
|
147 |
languageContent = LanguageContent[lang];
|
|
|
148 |
}
|
|
|
149 |
}
|
|
|
150 |
|
|
|
151 |
//TEST
|
|
|
152 |
// languageContent = LanguageContent["bg"];
|
|
|
153 |
|
|
|
154 |
//Check if they're on a mac for display of command instead of ctrl
|
|
|
155 |
var mac = false;
|
|
|
156 |
if (navigator.platform.toUpperCase().indexOf("MAC") >= 0) {
|
|
|
157 |
mac = true;
|
|
|
158 |
}
|
|
|
159 |
|
|
|
160 |
var scrollContent = languageContent.scroll;
|
|
|
161 |
if (mac) {
|
|
|
162 |
scrollContent = languageContent.scrollMac;
|
|
|
163 |
}
|
|
|
164 |
|
|
|
165 |
this._map._container.setAttribute(
|
|
|
166 |
"data-gesture-handling-touch-content",
|
|
|
167 |
languageContent.touch
|
|
|
168 |
);
|
|
|
169 |
this._map._container.setAttribute(
|
|
|
170 |
"data-gesture-handling-scroll-content",
|
|
|
171 |
scrollContent
|
|
|
172 |
);
|
|
|
173 |
},
|
|
|
174 |
|
|
|
175 |
_getUserLanguage: function() {
|
|
|
176 |
var lang = navigator.languages
|
|
|
177 |
? navigator.languages[0]
|
|
|
178 |
: navigator.language || navigator.userLanguage;
|
|
|
179 |
return lang;
|
|
|
180 |
},
|
|
|
181 |
|
|
|
182 |
_handleTouch: function(e) {
|
|
|
183 |
//Disregard touch events on the minimap if present
|
|
|
184 |
var ignoreList = [
|
|
|
185 |
"leaflet-control-minimap",
|
|
|
186 |
"leaflet-interactive",
|
|
|
187 |
"leaflet-popup-content",
|
|
|
188 |
"leaflet-popup-content-wrapper",
|
|
|
189 |
"leaflet-popup-close-button",
|
|
|
190 |
"leaflet-control-zoom-in",
|
|
|
191 |
"leaflet-control-zoom-out"
|
|
|
192 |
];
|
|
|
193 |
|
|
|
194 |
var ignoreElement = false;
|
|
|
195 |
for (var i = 0; i < ignoreList.length; i++) {
|
|
|
196 |
if (L.DomUtil.hasClass(e.target, ignoreList[i])) {
|
|
|
197 |
ignoreElement = true;
|
|
|
198 |
}
|
|
|
199 |
}
|
|
|
200 |
|
|
|
201 |
if (ignoreElement) {
|
|
|
202 |
if (
|
|
|
203 |
L.DomUtil.hasClass(e.target, "leaflet-interactive") &&
|
|
|
204 |
e.type === "touchmove" &&
|
|
|
205 |
e.touches.length === 1
|
|
|
206 |
) {
|
|
|
207 |
L.DomUtil.addClass(this._map._container,
|
|
|
208 |
"leaflet-gesture-handling-touch-warning"
|
|
|
209 |
);
|
|
|
210 |
this._disableInteractions();
|
|
|
211 |
} else {
|
|
|
212 |
L.DomUtil.removeClass(this._map._container,
|
|
|
213 |
"leaflet-gesture-handling-touch-warning"
|
|
|
214 |
);
|
|
|
215 |
}
|
|
|
216 |
return;
|
|
|
217 |
}
|
|
|
218 |
// screenLog(e.type+' '+e.touches.length);
|
|
|
219 |
if (e.type !== "touchmove" && e.type !== "touchstart") {
|
|
|
220 |
L.DomUtil.removeClass(this._map._container,
|
|
|
221 |
"leaflet-gesture-handling-touch-warning"
|
|
|
222 |
);
|
|
|
223 |
return;
|
|
|
224 |
}
|
|
|
225 |
if (e.touches.length === 1) {
|
|
|
226 |
L.DomUtil.addClass(this._map._container,
|
|
|
227 |
"leaflet-gesture-handling-touch-warning"
|
|
|
228 |
);
|
|
|
229 |
this._disableInteractions();
|
|
|
230 |
} else {
|
|
|
231 |
this._enableInteractions();
|
|
|
232 |
L.DomUtil.removeClass(this._map._container,
|
|
|
233 |
"leaflet-gesture-handling-touch-warning"
|
|
|
234 |
);
|
|
|
235 |
}
|
|
|
236 |
},
|
|
|
237 |
|
|
|
238 |
_isScrolling: false,
|
|
|
239 |
|
|
|
240 |
_handleScroll: function(e) {
|
|
|
241 |
if (e.metaKey || e.ctrlKey) {
|
|
|
242 |
e.preventDefault();
|
|
|
243 |
L.DomUtil.removeClass(this._map._container,
|
|
|
244 |
"leaflet-gesture-handling-scroll-warning"
|
|
|
245 |
);
|
|
|
246 |
this._map.scrollWheelZoom.enable();
|
|
|
247 |
} else {
|
|
|
248 |
L.DomUtil.addClass(this._map._container,
|
|
|
249 |
"leaflet-gesture-handling-scroll-warning"
|
|
|
250 |
);
|
|
|
251 |
this._map.scrollWheelZoom.disable();
|
|
|
252 |
|
|
|
253 |
clearTimeout(this._isScrolling);
|
|
|
254 |
|
|
|
255 |
// Set a timeout to run after scrolling ends
|
|
|
256 |
this._isScrolling = setTimeout(function() {
|
|
|
257 |
// Run the callback
|
|
|
258 |
var warnings = document.getElementsByClassName(
|
|
|
259 |
"leaflet-gesture-handling-scroll-warning"
|
|
|
260 |
);
|
|
|
261 |
for (var i = 0; i < warnings.length; i++) {
|
|
|
262 |
L.DomUtil.removeClass(warnings[i],
|
|
|
263 |
"leaflet-gesture-handling-scroll-warning"
|
|
|
264 |
);
|
|
|
265 |
}
|
|
|
266 |
}, this._map.options.gestureHandlingOptions.duration);
|
|
|
267 |
}
|
|
|
268 |
},
|
|
|
269 |
|
|
|
270 |
_handleMouseOver: function(e) {
|
|
|
271 |
this._enableInteractions();
|
|
|
272 |
},
|
|
|
273 |
|
|
|
274 |
_handleMouseOut: function(e) {
|
|
|
275 |
if (!draggingMap) {
|
|
|
276 |
this._disableInteractions();
|
|
|
277 |
}
|
|
|
278 |
}
|
|
|
279 |
|
|
|
280 |
});
|
|
|
281 |
|
|
|
282 |
L.Map.addInitHook("addHandler", "gestureHandling", GestureHandling);
|
|
|
283 |
|
|
|
284 |
export default GestureHandling;
|