Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Correct rtl again #2136

Merged
merged 3 commits into from
Nov 3, 2013
Merged

Correct rtl again #2136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b987f0c
Test pages for rtl support.
danzel Oct 29, 2013
0c7e7eb
Delete ltr/rtl code as its not needed any more, wtf?
danzel Oct 29, 2013
80c48c5
Re-add ltr/rtl detection and make getMousePosition work correctly wit…
danzel Oct 30, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions debug/tests/rtl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<title>Leaflet debug page</title>

<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="../css/screen.css" />

<script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script>
<style>
body {
direction: rtl;
}
</style>
</head>
<body>

<p>Click the map to place a popup at the mouse location</p>
<div id="map"></div>

<script type="text/javascript">

var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/997/256/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
key: 'd4fc77ea4a63471cab2423e66626cbb6'
});

var map = L.map('map')
.setView([50.5, 30.51], 15)
.addLayer(cloudmade);

map.on('click', function(e) {
L.popup().setLatLng(e.latlng).setContent('Hello').openOn(map);
});
</script>
</body>
</html>
28 changes: 28 additions & 0 deletions debug/tests/rtl2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<html dir="rtl">
<head>

<link rel="stylesheet" href="../../dist/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="../../dist/leaflet.ie.css" /><![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="../css/mobile.css" />

<script type="text/javascript" src="../../build/deps.js"></script>
<script src="../leaflet-include.js"></script>
<style>
#map { height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
map.on('click', function(e) {
L.popup().setLatLng(e.latlng).setContent('Hello').openOn(map);
});

</script>
</body>
</html>
7 changes: 0 additions & 7 deletions spec/suites/dom/DomUtilSpec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,13 +53,6 @@ describe('DomUtil', function() {
});
});

describe('#documentIsLtr', function () {
it('returns true if doc direction is ltr', function () {
expect(L.DomUtil.documentIsLtr()).to.eql(true);
expect(L.DomUtil.documentIsLtr()).to.eql(true); // cached
});
});

describe('#getViewportOffset', function () {
it('calculates the viewport offset of an element', function () {
var div = document.createElement('div');
Expand Down
2 changes: 2 additions & 0 deletions src/core/Browser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
phantomjs = ua.indexOf('phantom') !== -1,
android = ua.indexOf('android') !== -1,
android23 = ua.search('android [23]') !== -1,
gecko = ua.indexOf('gecko') !== -1,

mobile = typeof orientation !== undefined + '',
msPointer = window.navigator && window.navigator.msPointerEnabled &&
Expand Down Expand Up @@ -72,6 +73,7 @@
ie7: ie7,
ielt9: ielt9,
webkit: webkit,
gecko: gecko && !webkit && !window.opera && !ie,

android: android,
android23: android23,
Expand Down
24 changes: 7 additions & 17 deletions src/dom/DomEvent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,11 +143,14 @@ L.DomEvent = {
},

getMousePosition: function (e, container) {

var ie7 = L.Browser.ie7,
body = document.body,
var body = document.body,
docEl = document.documentElement,
x = e.pageX ? e.pageX - body.scrollLeft - docEl.scrollLeft: e.clientX,
//gecko makes scrollLeft more negative as you scroll in rtl, other browsers don't
//ref: https://code.google.com/p/closure-library/source/browse/closure/goog/style/bidi.js
x = L.DomUtil.documentIsLtr() ?
(e.pageX ? e.pageX - body.scrollLeft - docEl.scrollLeft : e.clientX) :
(L.Browser.gecko ? e.pageX - body.scrollLeft - docEl.scrollLeft :
e.pageX ? e.pageX - body.scrollLeft + docEl.scrollLeft : e.clientX),
y = e.pageY ? e.pageY - body.scrollTop - docEl.scrollTop: e.clientY,
pos = new L.Point(x, y);

Expand All @@ -159,19 +162,6 @@ L.DomEvent = {
left = rect.left - container.clientLeft,
top = rect.top - container.clientTop;

// webkit (and ie <= 7) handles RTL scrollLeft different to everyone else
// https://code.google.com/p/closure-library/source/browse/trunk/closure/goog/style/bidi.js
if (!L.DomUtil.documentIsLtr() && (L.Browser.webkit || ie7)) {
left += container.scrollWidth - container.clientWidth;

// ie7 shows the scrollbar by default and provides clientWidth counting it, so we
// need to add it back in if it is visible; scrollbar is on the left as we are RTL
if (ie7 && L.DomUtil.getStyle(container, 'overflow-y') !== 'hidden' &&
L.DomUtil.getStyle(container, 'overflow') !== 'hidden') {
left += 17;
}
}

return pos._subtract(new L.Point(left, top));
},

Expand Down
16 changes: 1 addition & 15 deletions src/dom/DomUtil.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,7 @@ L.DomUtil = {
el = element,
docBody = document.body,
docEl = document.documentElement,
pos,
ie7 = L.Browser.ie7;
pos;

do {
top += el.offsetTop || 0;
Expand Down Expand Up @@ -78,19 +77,6 @@ L.DomUtil = {
top -= el.scrollTop || 0;
left -= el.scrollLeft || 0;

// webkit (and ie <= 7) handles RTL scrollLeft different to everyone else
// https://code.google.com/p/closure-library/source/browse/trunk/closure/goog/style/bidi.js
if (!L.DomUtil.documentIsLtr() && (L.Browser.webkit || ie7)) {
left += el.scrollWidth - el.clientWidth;

// ie7 shows the scrollbar by default and provides clientWidth counting it, so we
// need to add it back in if it is visible; scrollbar is on the left as we are RTL
if (ie7 && L.DomUtil.getStyle(el, 'overflow-y') !== 'hidden' &&
L.DomUtil.getStyle(el, 'overflow') !== 'hidden') {
left += 17;
}
}

el = el.parentNode;
} while (el);

Expand Down