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

Expose RTLTextPluginStatus #8864

Merged
merged 9 commits into from
Oct 15, 2019
+65 −8
Merged

Expose RTLTextPluginStatus #8864

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1c0f56d
Begin implementing rtl plugin status and event listener
Oct 11, 2019
100f48a
Add debug page
Oct 11, 2019
a0bec9b
Expose method to get plugin status
Oct 11, 2019
2a6405e
Lint fix
Oct 11, 2019
6e1c883
Remove whitespace
Oct 11, 2019
56aec25
Remove logs
Oct 11, 2019
3009185
Remove pluginRequested
Oct 14, 2019
a45ec50
Update isLoaded function to use status
Oct 14, 2019
9806c3c
Fix lint/flow errors and improper equality check
Oct 15, 2019
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
35 changes: 35 additions & 0 deletions debug/rtl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<title>Mapbox GL JS debug page</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel='stylesheet' href='/dist/mapbox-gl.css' />
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
</style>
</head>

<body>
<div id='map'></div>

<script src='/dist/mapbox-gl-dev.js'></script>
<script src='/debug/access_token_generated.js'></script>
<script>
var map = window.map = new mapboxgl.Map({
container: 'map',
zoom: 16.5,
center: [44.355435, 33.258814],
style: 'mapbox://styles/mapbox/streets-v11',
hash: true
});

setTimeout(function() {
if (['loading', 'loaded'].indexOf(mapboxgl.getRTLTextPluginStatus()) === -1) {
mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.0/mapbox-gl-rtl-text.js');
}
}, 2000);
</script>
</body>
</html>
13 changes: 12 additions & 1 deletion src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,15 @@ import Point from '@mapbox/point-geometry';
import MercatorCoordinate from './geo/mercator_coordinate';
import {Evented} from './util/evented';
import config from './util/config';
import {setRTLTextPlugin} from './source/rtl_text_plugin';
import {setRTLTextPlugin, getRTLTextPluginStatus} from './source/rtl_text_plugin';
import WorkerPool from './util/worker_pool';
import {clearTileCache} from './util/tile_request_cache';

const exported = {
version,
supported,
setRTLTextPlugin,
getRTLTextPluginStatus,
Map,
NavigationControl,
GeolocateControl,
Expand Down Expand Up @@ -162,6 +163,16 @@ const exported = {
* @see [Add support for right-to-left scripts](https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-rtl-text/)
*/

/**
* Gets the map's [RTL text plugin](https://www.mapbox.com/mapbox-gl-js/plugins/#mapbox-gl-rtl-text) status.
* The status can be `unavailable` (i.e. not requested or removed), `loading`, `loaded` or `error`.
* If the status is `loaded` and the plugin is requested again, an error will be thrown.
*
* @function getRTLTextPluginStatus
* @example
* const pluginStatus = mapboxgl.getRTLTextPluginStatus();
*/

export default exported;

// canary assert: used to confirm that asserts have been removed from production build
Expand Down
20 changes: 16 additions & 4 deletions src/source/rtl_text_plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,13 @@
import {Event, Evented} from '../util/evented';
import browser from '../util/browser';

let pluginRequested = false;
const status = {
unavailable: 'unavailable',
loading: 'loading',
loaded: 'loaded',
error: 'error'
};
let pluginStatus = status.unavailable;
let pluginURL = null;
let foregroundLoadComplete = false;

Expand All @@ -14,6 +20,10 @@ type ErrorCallback = (error: Error) => void;

let _completionCallback;

export const getRTLTextPluginStatus = function () {
return pluginStatus;
};

export const registerForPluginAvailability = function(
callback: (args: {pluginURL: string, completionCallback: CompletionCallback}) => void
) {
Expand All @@ -26,20 +36,21 @@ export const registerForPluginAvailability = function(
};

export const clearRTLTextPlugin = function() {
pluginRequested = false;
pluginStatus = status.unavailable;
pluginURL = null;
};

export const setRTLTextPlugin = function(url: string, callback: ErrorCallback) {
if (pluginRequested) {
if (pluginStatus === status.loading || pluginStatus === status.loaded) {
throw new Error('setRTLTextPlugin cannot be called multiple times.');
}
pluginRequested = true;
pluginStatus = status.loading;
pluginURL = browser.resolveURL(url);
_completionCallback = (error?: Error) => {
if (error) {
// Clear loaded state to allow retries
clearRTLTextPlugin();
pluginStatus = status.error;
if (callback) {
callback(error);
}
Expand All @@ -48,6 +59,7 @@ export const setRTLTextPlugin = function(url: string, callback: ErrorCallback) {
foregroundLoadComplete = true;
}
};
pluginStatus = status.loaded;
arindam1993 marked this conversation as resolved.
Show resolved Hide resolved
evented.fire(new Event('pluginAvailable', {pluginURL, completionCallback: _completionCallback}));
};

Expand Down