20 | * if there is no image url.
21 | *
22 | * @param {string} url - absolute URL to image
23 | * @return {React.Component}
24 | */
25 | function getImageElement(url) {
26 | if (url) {
27 | // Alt text is blank because the display name will also be displayed by the image.
28 | return (
);
33 | }
34 |
35 | return
;
36 | }
37 |
38 | export default function UserAvatar(props) {
39 | const user = props.user;
40 | const displayName = getDisplayName(user.nickname, user.email);
41 | const imageElement = getImageElement(user.avatar);
42 | const adminStarElement = (user.admin === true) ?
43 |
★ :
44 | null;
45 |
46 | return (
47 |
48 | {imageElement}
49 | {displayName}
50 | {adminStarElement}
51 |
52 | );
53 | }
54 |
55 | UserAvatar.propTypes = {
56 | user: PropTypes.shape({
57 | nickname: PropTypes.string,
58 | email: PropTypes.string,
59 | avatar: PropTypes.string,
60 | admin: PropTypes.bool,
61 | }).isRequired,
62 | };
63 |
64 | UserAvatar.defaultProps = {
65 | user: {
66 | nickname: '',
67 | email: '',
68 | avatar: '',
69 | admin: false,
70 | },
71 | };
72 |
--------------------------------------------------------------------------------
/src/js/components/event-emitter.js:
--------------------------------------------------------------------------------
1 | const EventEmitter = {
2 | // Never access the `events` property directly.
3 | events: {},
4 | dispatch(event, data) {
5 | if (!this.events[event]) {
6 | return; // no one is listening to this event
7 | }
8 | for (let i = 0; i < this.events[event].length; i++) {
9 | this.events[event][i](data);
10 | }
11 | },
12 | subscribe(event, callback) {
13 | if (!this.events[event]) {
14 | this.events[event] = []; // new event
15 | }
16 | this.events[event].push(callback);
17 | },
18 | unsubscribe(event, callback) {
19 | if (!this.events[event]) {
20 | return; // unsubscribing from an event that doesn't exist
21 | }
22 | for (let i = 0; i < this.events[event].length; i++) {
23 | if (this.events[event][i] === callback) {
24 | this.events[event].splice(i, 1); // removes it from event stack
25 | }
26 | }
27 | },
28 | };
29 |
30 | export default EventEmitter;
31 |
--------------------------------------------------------------------------------
/src/js/components/textmarkers/BooleanMarker.jsx:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React from 'react';
3 | import Checkbox from 'react-bootstrap/lib/Checkbox';
4 | import { setCodeMirrorValue } from '../../editor/editor';
5 |
6 | export default class BooleanMarker extends React.Component {
7 | constructor(props) {
8 | super(props);
9 |
10 | this.state = {
11 | // Incoming prop is a string, cast it to boolean
12 | isChecked: (this.props.value === 'true'),
13 |
14 | // TODO: disable the checkbox if the value is not a true/false,
15 | // to prevent this from overwriting other values
16 | };
17 |
18 | this.onChange = this.onChange.bind(this);
19 | }
20 |
21 | onChange(event) {
22 | const value = event.target.checked;
23 | this.setState({ isChecked: value });
24 | this.setEditorValue(value.toString());
25 | }
26 |
27 | /**
28 | * Communicates a value back to CodeMirror
29 | */
30 | setEditorValue(string) {
31 | setCodeMirrorValue(this.props.marker, string);
32 | }
33 |
34 | render() {
35 | return (
36 |
41 | );
42 | }
43 | }
44 |
45 | BooleanMarker.propTypes = {
46 | marker: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
47 | value: PropTypes.string.isRequired,
48 | };
49 |
50 | BooleanMarker.defaultProps = {
51 | value: false,
52 | };
53 |
--------------------------------------------------------------------------------
/src/js/components/textmarkers/color/ColorPicker.jsx:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | // Class essentially taken from 'react-color': https://github.com/casesandberg/react-color/blob/master/src/components/sketched/Sketch.js
3 | import React from 'react';
4 | import { Hue, Alpha, Checkboard } from 'react-color/lib/components/common';
5 | import ColorPickerSaturation from './ColorPickerSaturation';
6 | import ColorPickerInputFields from './ColorPickerInputFields';
7 | import Color from './color';
8 |
9 | export default class ColorPicker extends React.Component {
10 | constructor(props) {
11 | super(props);
12 |
13 | // tinycolor2 resets hue to zero when either saturation (s) or
14 | // brightness (v) is zero, so we maintain our own internal cache
15 | // of this. We also remember the alpha because sometimes it is
16 | // also reset. (TODO)
17 | const color = this.props.color.getHsv();
18 | this.state = {
19 | hue: color.h,
20 | alpha: color.a,
21 | };
22 |
23 | this.onChangeSaturation = this.onChangeSaturation.bind(this);
24 | this.onChangeHueAlpha = this.onChangeHueAlpha.bind(this);
25 | this.onChangeInputs = this.onChangeInputs.bind(this);
26 | }
27 |
28 | onChangeSaturation(data) {
29 | // Use cached hue and alpha value
30 | const color = new Color({
31 | h: this.state.hue,
32 | s: data.s,
33 | v: data.v,
34 | a: this.state.alpha,
35 | });
36 | this.props.onChange(color);
37 | }
38 |
39 | onChangeHueAlpha(data) {
40 | const color = new Color({ h: data.h, s: data.s, l: data.l, a: data.a });
41 | this.props.onChange(color);
42 | this.setState({ hue: data.h, alpha: data.a });
43 | }
44 |
45 | onChangeInputs(data) {
46 | let color;
47 |
48 | // If data comes as RGBA object
49 | if ({}.hasOwnProperty.call(data, 'r')) {
50 | color = new Color({ r: data.r, g: data.g, b: data.b, a: data.a });
51 | } else {
52 | // Else if its a hex string
53 | color = new Color(data);
54 | }
55 |
56 | this.props.onChange(color);
57 | this.setState({ hue: color.getHsv().h, alpha: data.a });
58 | }
59 |
60 | render() {
61 | const hsl = this.props.color.getHsl();
62 | const hueHslProp = {
63 | h: this.state.hue,
64 | s: hsl.s,
65 | l: hsl.l,
66 | a: hsl.a,
67 | };
68 |
69 | return (
70 |
71 |
76 |
77 |
101 |
102 |
106 |
107 | );
108 | }
109 | }
110 |
111 | ColorPicker.propTypes = {
112 | color: PropTypes.objectOf(PropTypes.any).isRequired,
113 | onChange: PropTypes.func,
114 | };
115 |
116 | ColorPicker.defaultProps = {
117 | onChange: function noop() {},
118 | };
119 |
--------------------------------------------------------------------------------
/src/js/components/textmarkers/color/ColorPickerInputFields.jsx:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | // Class essentially taken from 'react-color' https://github.com/casesandberg/react-color/blob/master/src/components/sketched/SketchFields.js
3 |
4 | import React from 'react';
5 | import { EditableInput } from 'react-color/lib/components/common';
6 |
7 | export default class ColorPickerInputFields extends React.PureComponent {
8 | constructor(props) {
9 | super(props);
10 | this.onChange = this.onChange.bind(this);
11 | }
12 |
13 | /**
14 | * Handle changes in input fields.
15 | * Signature of the `data` object passed in uses EditableInput's `label`
16 | * prop as the property name. e.g. `label='r'` becomes `data.r`. Do not
17 | * change these labels! (Use CSS to style these elements if necessary.)
18 | */
19 | onChange(data) {
20 | const color = this.props.color.getRgba();
21 |
22 | if (data.hex) {
23 | this.props.onChange(data.hex);
24 | } else if (data.r || data.g || data.b || data.a) {
25 | let a = parseFloat(data.a);
26 |
27 | // Clamp a between 0-1 range
28 | a = Math.max(Math.min(a, 1), 0);
29 |
30 | if (a === 0) {
31 | this.props.onChange({
32 | r: data.r || color.r,
33 | g: data.g || color.g,
34 | b: data.b || color.b,
35 | a: 0.0,
36 | });
37 | } else {
38 | this.props.onChange({
39 | r: data.r || color.r,
40 | g: data.g || color.g,
41 | b: data.b || color.b,
42 | a: a || color.a,
43 | });
44 | }
45 | }
46 | }
47 |
48 | render() {
49 | const color = this.props.color.getRgba();
50 | const hex = this.props.color.getHexString();
51 |
52 | return (
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 | );
71 | }
72 | }
73 |
74 | ColorPickerInputFields.propTypes = {
75 | color: PropTypes.objectOf(PropTypes.any).isRequired,
76 | onChange: PropTypes.func,
77 | };
78 |
79 | ColorPickerInputFields.defaultProps = {
80 | onChange: function noop() {},
81 | };
82 |
--------------------------------------------------------------------------------
/src/js/config.js:
--------------------------------------------------------------------------------
1 | const config = {
2 | // Nextzen key used exclusively by Tangram Play
3 | NEXTZEN_API_KEY: 'mHPUxCSaRgiJERj1lLDLew',
4 | MAPZEN_API: {
5 | ORIGIN: {
6 | DEVELOPMENT: 'http://localhost',
7 | STAGING: 'https://dev.mapzen.com',
8 | PRODUCTION: 'https://mapzen.com',
9 | },
10 | SCENE_API_PATH: '/api/scenes/',
11 | USER_API_PATH: '/api/developer.json',
12 | },
13 | TILES: {
14 | API_KEYS: {
15 | SUPPRESSED: [
16 | 'mHPUxCSaRgiJERj1lLDLew', // Matches NEXTZEN_API_KEY
17 | ],
18 | },
19 | },
20 | SEARCH: {
21 | HOST: 'api.geocode.earth',
22 | API_KEY: 'ge-3d066b6b1c398181',
23 | },
24 | };
25 |
26 | export default config;
27 |
--------------------------------------------------------------------------------
/src/js/editor/codemirror/glsl-tangram.js:
--------------------------------------------------------------------------------
1 | import CodeMirror from 'codemirror';
2 | import 'codemirror/mode/clike/clike';
3 |
4 | function wordsToObj(str) {
5 | const obj = {};
6 | const keys = str.split(' ');
7 | for (let i = 0; i < keys.length; ++i) {
8 | obj[keys[i]] = true;
9 | }
10 | return obj;
11 | }
12 |
13 | function cppHook(stream, state) {
14 | if (!state.startOfLine) {
15 | return false;
16 | }
17 | for (;;) {
18 | if (stream.skipTo('\\')) {
19 | stream.next();
20 | if (stream.eol()) {
21 | state.tokenize = cppHook;
22 | break;
23 | }
24 | } else {
25 | stream.skipToEnd();
26 | state.tokenize = null;
27 | break;
28 | }
29 | }
30 | return 'meta';
31 | }
32 |
33 | function def(mimes, mode) {
34 | if (typeof mimes === 'string') {
35 | mimes = [mimes];
36 | }
37 | const words = [];
38 |
39 | function add(obj) {
40 | if (obj) {
41 | Object.keys(obj).forEach((key) => {
42 | if ({}.hasOwnProperty.call(obj, key)) {
43 | words.push(key);
44 | }
45 | });
46 | }
47 | }
48 | add(mode.keywords);
49 | add(mode.builtin);
50 | add(mode.atoms);
51 | if (words.length) {
52 | mode.helperType = mimes[0];
53 | CodeMirror.registerHelper('hintWords', mimes[0], words);
54 | }
55 |
56 | for (let i = 0; i < mimes.length; ++i) {
57 | CodeMirror.defineMIME(mimes[i], mode);
58 | }
59 | }
60 |
61 | def(['glsl', 'x-shader/x-vertex', 'x-shader/x-fragment'], {
62 | name: 'clike',
63 | keywords: wordsToObj('float int bool void ' +
64 | 'vec2 vec3 vec4 ivec2 ivec3 ivec4 bvec2 bvec3 bvec4 ' +
65 | 'mat2 mat3 mat4 ' +
66 | 'sampler2D samplerCube ' +
67 | 'const attribute uniform varying ' +
68 | 'break continue discard return ' +
69 | 'for while do if else struct ' +
70 | 'in out inout'),
71 | blockKeywords: wordsToObj('for while do if else struct'),
72 | builtin: wordsToObj('radians degrees sin cos tan asin acos atan ' +
73 | 'pow exp log exp2 sqrt inversesqrt ' +
74 | 'abs sign floor ceil fract mod min max clamp mix step smoothstep ' +
75 | 'length distance dot cross normalize faceforward ' +
76 | 'reflect refract matrixCompMult ' +
77 | 'lessThan lessThanEqual greaterThan greaterThanEqual ' +
78 | 'equal notEqual any all not ' +
79 | 'texture2D textureCube'),
80 | atoms: wordsToObj('true false ' +
81 | 'u_time u_meters_per_pixel u_device_pixel_ratio u_map_position ' +
82 | 'u_tile_origin u_resolution ' +
83 | 'v_world_position v_texcoord ' +
84 | 'v_position position width v_color color v_normal normal material ' +
85 | 'light_accumulator_ambient light_accumulator_diffuse light_accumulator_specular ' +
86 | 'gl_FragColor gl_Position gl_PointSize gl_FragCoord '),
87 | hooks: { '#': cppHook },
88 | modeProps: {
89 | fold: ['brace', 'include'],
90 | },
91 | });
92 |
--------------------------------------------------------------------------------
/src/js/editor/codemirror/hint-tangram.js:
--------------------------------------------------------------------------------
1 | import CodeMirror from 'codemirror';
2 | import { hint } from '../suggest';
3 |
4 | CodeMirror.registerHelper('hint', 'yaml', hint);
5 |
--------------------------------------------------------------------------------
/src/js/editor/codemirror/yaml-parser.js:
--------------------------------------------------------------------------------
1 | import CodeMirror from 'codemirror';
2 | import YAML from 'yaml-ast-parser';
3 |
4 | function parseDoc(cm) {
5 | const doc = cm.getDoc();
6 | const content = doc.getValue();
7 | doc.yamlNodes = YAML.safeLoad(content);
8 | }
9 |
10 | function initYAMLParser(cm) {
11 | // Parse YAML abstract syntax tree when it's edited, or swapped in from elsewhere
12 | cm.on('changes', parseDoc);
13 | cm.on('swapDoc', parseDoc);
14 | }
15 |
16 | CodeMirror.defineInitHook(initYAMLParser);
17 |
--------------------------------------------------------------------------------
/src/js/editor/keymap.js:
--------------------------------------------------------------------------------
1 | import CodeMirror from 'codemirror';
2 | import { unfoldAll, foldByLevel } from './codemirror/tools';
3 | import { takeScreenshot } from '../map/screenshot';
4 | import { increaseEditorFontSize, decreaseEditorFontSize } from '../store/actions/settings';
5 |
6 | /**
7 | * Creates and exports additional keybinding functionality to CodeMirror.
8 | *
9 | * @returns {Object} extraKeysSettings - an object of extra key mappings to
10 | * provide to the settings object of CodeMirror.
11 | */
12 | export function getExtraKeyMap() {
13 | // Test for whether to use a Ctrl key (Windows) or Cmd key (Mac)
14 | const isMac = CodeMirror.keyMap.default === CodeMirror.keyMap.macDefault;
15 | const ctrlKey = isMac ? 'Cmd-' : 'Ctrl-';
16 |
17 | const extraKeysSettings = {
18 | 'Ctrl-Space': 'autocomplete',
19 | Tab(cm) {
20 | // If something is selected, particularly for selection of multiple
21 | // lines, tab inserts additional indentation, rather than replace
22 | // the selection with a tab character.
23 | if (cm.somethingSelected()) {
24 | cm.indentSelection('add');
25 | } else {
26 | // Maps the tab key to insert spaces instead of a tab character.
27 | // https://codemirror.net/doc/manual.html#keymaps
28 | cm.replaceSelection(Array(cm.getOption('indentUnit') + 1).join(' '));
29 | }
30 | },
31 | 'Alt-F': (cm) => {
32 | cm.foldCode(cm.getCursor(), cm.getOption('foldGutter').rangeFinder);
33 | },
34 | 'Alt-P': (cm) => {
35 | takeScreenshot();
36 | },
37 | 'Ctrl-0': (cm) => {
38 | unfoldAll(cm);
39 | },
40 | 'Ctrl-1': (cm) => {
41 | foldByLevel(cm, 0);
42 | },
43 | 'Ctrl-2': (cm) => {
44 | foldByLevel(cm, 1);
45 | },
46 | 'Ctrl-3': (cm) => {
47 | foldByLevel(cm, 2);
48 | },
49 | 'Ctrl-4': (cm) => {
50 | foldByLevel(cm, 3);
51 | },
52 | 'Ctrl-5': (cm) => {
53 | foldByLevel(cm, 4);
54 | },
55 | 'Ctrl-6': (cm) => {
56 | foldByLevel(cm, 5);
57 | },
58 | 'Ctrl-7': (cm) => {
59 | foldByLevel(cm, 6);
60 | },
61 | 'Ctrl-8': (cm) => {
62 | foldByLevel(cm, 7);
63 | },
64 | };
65 |
66 | // TODO: We might need to get around some commenting bugs by hijacking
67 | // the comment key and directing it to use different characters using
68 | // brute-force analysis of the line itself.
69 | extraKeysSettings[`${ctrlKey}/`] = (cm) => {
70 | cm.toggleComment({ indent: true });
71 | };
72 |
73 | // Set Ctrl- or Cmd- buttons depending on Mac or Windows devices.
74 | extraKeysSettings[`${ctrlKey}-`] = (cm) => {
75 | decreaseEditorFontSize();
76 | cm.refresh();
77 | };
78 | // Equal (=) maps to the Plus (+)
79 | extraKeysSettings[`${ctrlKey}=`] = (cm) => {
80 | increaseEditorFontSize();
81 | cm.refresh();
82 | };
83 |
84 | return extraKeysSettings;
85 | }
86 |
--------------------------------------------------------------------------------
/src/js/embedded.js:
--------------------------------------------------------------------------------
1 | // Polyfills
2 | import 'babel-polyfill';
3 | import 'whatwg-fetch';
4 | import 'url-search-params-polyfill';
5 |
6 | // React
7 | import React from 'react';
8 | import ReactDOM from 'react-dom';
9 |
10 | // Libraries
11 | import Raven from 'raven-js';
12 |
13 | // Components
14 | import AppEmbedded from './components/AppEmbedded';
15 |
16 | // Redux
17 | import store from './store';
18 | import { SET_APP_STATE } from './store/actions';
19 |
20 | // Miscellaneous
21 | import { getURLSearchParam } from './tools/url-state';
22 |
23 | // Error tracking
24 | // Load this before all other modules. Only load when run in production.
25 | // Requires `loose-envify` package in build process to set the correct `NODE_ENV`.
26 | if (process.env.NODE_ENV === 'production') {
27 | Raven.config('https://728949999d2a438ab006fed5829fb9c5@app.getsentry.com/78467', {
28 | whitelistUrls: [/mapzen\.com/, /www\.mapzen\.com/],
29 | environment: process.env.NODE_ENV,
30 | }).install();
31 | }
32 |
33 | // When hosted on production Mapzen, set document.domain to allow cross-origin
34 | // access across subdomains.
35 | if (document.domain.indexOf('mapzen.com') === 0) {
36 | document.domain = document.domain;
37 | }
38 |
39 | // Set some application state variables that control the view in embedded mode
40 | store.dispatch({
41 | type: SET_APP_STATE,
42 | debug: (getURLSearchParam('debug') === 'true'),
43 | isEmbedded: true,
44 | disableMapToolbar: true,
45 | disableMultiFile: true,
46 | showEditorTabBar: false,
47 | });
48 |
49 | // Mount React components
50 | ReactDOM.render(React.createElement(AppEmbedded), document.getElementById('root'));
51 |
--------------------------------------------------------------------------------
/src/js/map/SceneLoading.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Shows a loading indicator when Tangram is loading and building a new
3 | * scene. It is hidden when Tangram is done (after Tangram's `view_complete`
4 | * event callback, or on Tangram error.
5 | */
6 | import React from 'react';
7 | import PropTypes from 'prop-types';
8 | import { connect } from 'react-redux';
9 |
10 | function SceneLoading(props) {
11 | let classNames = 'map-loading';
12 | if (props.loading) {
13 | classNames += ' map-loading-show';
14 | }
15 |
16 | return
;
17 | }
18 |
19 | SceneLoading.propTypes = {
20 | loading: PropTypes.bool,
21 | };
22 |
23 | SceneLoading.defaultProps = {
24 | loading: false,
25 | };
26 |
27 | function mapStateToProps(state) {
28 | return {
29 | loading: state.app.tangramSceneLoading,
30 | };
31 | }
32 |
33 | export default connect(mapStateToProps)(SceneLoading);
34 |
--------------------------------------------------------------------------------
/src/js/map/actions.js:
--------------------------------------------------------------------------------
1 | // Redux
2 | import store from '../store';
3 | import { SET_APP_STATE } from '../store/actions';
4 |
5 | /**
6 | * Shows the scene loading indicator.
7 | */
8 | export function showSceneLoadingIndicator() {
9 | store.dispatch({
10 | type: SET_APP_STATE,
11 | tangramSceneLoading: true,
12 | });
13 | }
14 |
15 | /**
16 | * Hide the scene loading indicator.
17 | */
18 | export function hideSceneLoadingIndicator() {
19 | store.dispatch({
20 | type: SET_APP_STATE,
21 | tangramSceneLoading: false,
22 | });
23 | }
24 |
--------------------------------------------------------------------------------
/src/js/map/bookmarks.js:
--------------------------------------------------------------------------------
1 | import localforage from 'localforage';
2 | import { uniqWith, isEqualWith, reject } from 'lodash';
3 |
4 | const STORAGE_BOOKMARKS_KEY = 'bookmarks';
5 |
6 | /**
7 | * Gets location bookmarks.
8 | * This is asynchronous and returns a Promise.
9 | *
10 | * @returns {Promise} - resolved value is current bookmarks content
11 | */
12 | export function getLocationBookmarks() {
13 | return localforage.getItem(STORAGE_BOOKMARKS_KEY)
14 | // If not set previously, then this value is null, so return an
15 | // empty array.
16 | .then(bookmarks => bookmarks || []);
17 | }
18 |
19 | /**
20 | * Saves a new location bookmark to the list of bookmarks
21 | * This is asynchronous and returns a Promise.
22 | *
23 | * @param {Object} newBookmark - an object having the following signature:
24 | * {
25 | label, // String - name of the location.
26 | lat, // Number - latitude
27 | lng, // Number - longitude
28 | zoom, // Number - zoom level
29 | timestamp, // String - date string
30 | }
31 | * @returns {Promise} - resolved value is current bookmarks content after save
32 | */
33 | export function saveLocationBookmark(newBookmark) {
34 | return getLocationBookmarks()
35 | .then((bookmarks) => {
36 | bookmarks.push(newBookmark);
37 |
38 | // In case we try to add a bookmark that already exists, we
39 | // dedupe this array by performing a equality comparison between
40 | // the properities `label`, `lat`, `lng` and `zoom` of each object.
41 | // (Don't compare by unique id like `timestamp` which defeats the purpose)
42 | function eqWithCustomizer(objectValue, otherValue) {
43 | return (objectValue.label === otherValue.label &&
44 | objectValue.lat === otherValue.lat &&
45 | objectValue.lng === otherValue.lng &&
46 | objectValue.zoom === otherValue.zoom);
47 | }
48 |
49 | function uniqWithComparator(objectValue, otherValue) {
50 | return isEqualWith(objectValue, otherValue, eqWithCustomizer);
51 | }
52 |
53 | const uniqueBookmarks = uniqWith(bookmarks, uniqWithComparator);
54 |
55 | return localforage.setItem(STORAGE_BOOKMARKS_KEY, uniqueBookmarks);
56 | });
57 | }
58 |
59 | /**
60 | * Delete only one bookmark, given a unique identifier. We will use the `_date`
61 | * property as this unique id. Do not delete by array index, since there is no
62 | * guarantee that a React view's index value will match what's in the storage.
63 | *
64 | * @param {string} uid - unique identifier for bookmark.
65 | * @returns {Promise} - resolved value is current bookmarks content after delete
66 | */
67 | export function deleteLocationBookmark(uid) {
68 | return getLocationBookmarks()
69 | .then((bookmarks) => {
70 | // Reject the bookmark with this given uid
71 | const updatedBookmarks = reject(bookmarks, { timestamp: uid });
72 |
73 | return localforage.setItem(STORAGE_BOOKMARKS_KEY, updatedBookmarks);
74 | });
75 | }
76 |
77 | /**
78 | * Clear all current bookmarks by replacing it with an empty array.
79 | *
80 | * @returns {Promise} - resolved value is empty array
81 | */
82 | export function clearLocationBookmarks() {
83 | return localforage.setItem(STORAGE_BOOKMARKS_KEY, []);
84 | }
85 |
--------------------------------------------------------------------------------
/src/js/map/screenshot.js:
--------------------------------------------------------------------------------
1 | import { saveAs } from 'file-saver';
2 | import { map, tangramScene } from './map';
3 |
4 | /**
5 | * Utility function to generate a filename slug from current date and
6 | * current map view properties.
7 | *
8 | * @returns {string} - see format in comments, inline
9 | */
10 | function createFilenameSlug() {
11 | const date = new Date();
12 |
13 | // Get string values for each portion of the date, left-padding the
14 | // trailing 0 if necessary.
15 | /* eslint-disable prefer-template */
16 | const year = date.getFullYear().toString();
17 | const month = ('0' + (date.getMonth() + 1)).slice(-2); // 0-indexed, add 1
18 | const day = ('0' + date.getDate()).slice(-2);
19 | const hour = ('0' + date.getHours()).slice(-2); // 24-hour clock.
20 | const minute = ('0' + date.getMinutes()).slice(-2);
21 | const second = ('0' + date.getSeconds()).slice(-2);
22 | /* eslint-enable prefer-template */
23 |
24 | // Get map view
25 | const center = map.getCenter();
26 | const zoom = map.getZoom().toFixed(4).toString();
27 | const lat = center.lat.toFixed(4).toString();
28 | const lng = center.lng.toFixed(4).toString();
29 |
30 | // String format, eg.
31 | // @8.7067&76.2119&-60.8138_2016-07-29_12.59.16
32 | // @z&x&y is so that it can be pasted back into a hash in the URL.
33 | // (Unfortunately forward slashes are not file system friendly.)
34 | return `@${zoom}&${lat}&${lng}_${year}-${month}-${day}_${hour}.${minute}.${second}`;
35 | }
36 |
37 | /**
38 | * Uses Tangram's native screenshot functionality to download an image.
39 | *
40 | * @public
41 | * @requires FileSaver
42 | */
43 | export function takeScreenshot() {
44 | tangramScene.screenshot().then((result) => {
45 | const slug = createFilenameSlug();
46 |
47 | // uses FileSaver.js: https://github.com/eligrey/FileSaver.js/
48 | saveAs(result.blob, `tangram-${slug}.png`);
49 | });
50 | }
51 |
52 | /**
53 | * Uses Tangram's native screenshot functionality to return a Promise
54 | * whose resolve function passes in an object containing two properities:
55 | * blob - a Blob object representing the image binary
56 | * url - a string containing a base64 data-URI
57 | *
58 | * @public
59 | * @returns Promise
60 | */
61 | export function getScreenshotData() {
62 | return tangramScene.screenshot();
63 | }
64 |
--------------------------------------------------------------------------------
/src/js/map/video.js:
--------------------------------------------------------------------------------
1 | // Take a video capture and save to file
2 | import { saveAs } from 'file-saver';
3 | import { tangramLayer } from './map';
4 |
5 | let isCapturing = false;
6 |
7 | export function startVideoCapture() {
8 | if (!isCapturing) {
9 | if (tangramLayer.scene.startVideoCapture()) {
10 | isCapturing = true;
11 | }
12 | } else {
13 | tangramLayer.scene.stopVideoCapture().then((video) => {
14 | isCapturing = false;
15 | saveAs(video.blob, `tangram-video-${+new Date()}.webm`);
16 | });
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/js/modals/AboutModal.jsx:
--------------------------------------------------------------------------------
1 | import L from 'leaflet';
2 | import CodeMirror from 'codemirror';
3 | import React from 'react';
4 | import PropTypes from 'prop-types';
5 | import { connect } from 'react-redux';
6 | import Button from 'react-bootstrap/lib/Button';
7 | import VERSION from '../version.json';
8 |
9 | import Modal from './Modal';
10 |
11 | class AboutModal extends React.PureComponent {
12 | constructor(props) {
13 | super(props);
14 |
15 | this.onClickClose = this.onClickClose.bind(this);
16 | }
17 |
18 | onClickClose() {
19 | this.props.dispatch({
20 | type: 'HIDE_MODAL',
21 | id: this.props.modalId,
22 | });
23 | }
24 |
25 | render() {
26 | return (
27 |
31 |
32 |
About Tangram Play
33 |
34 |
35 | Tangram Play (beta) v{VERSION.v}
36 |
37 |
38 |
39 | {/* Get and display version numbers.
40 | Tangram version comes with its own "v" */}
41 | Tangram {window.Tangram.version}
42 | {/* Add "v" for Leaflet and CodeMirror */}
43 |
Leaflet {`v${L.version}`}
44 |
CodeMirror {`v${CodeMirror.version}`}
45 |
46 |
47 | Made with 💖 by Mapzen.
48 |
49 |
50 | View source on GitHub
51 |
52 |
55 |
56 |
57 |
58 | );
59 | }
60 | }
61 |
62 | AboutModal.propTypes = {
63 | dispatch: PropTypes.func.isRequired,
64 | modalId: PropTypes.number.isRequired,
65 | };
66 |
67 | export default connect()(AboutModal);
68 |
--------------------------------------------------------------------------------
/src/js/modals/ErrorModal.jsx:
--------------------------------------------------------------------------------
1 | import { noop } from 'lodash';
2 | import React from 'react';
3 | import ReactDOM from 'react-dom';
4 | import PropTypes from 'prop-types';
5 | import { connect } from 'react-redux';
6 | import Button from 'react-bootstrap/lib/Button';
7 | import Modal from './Modal';
8 | import Icon from '../components/Icon';
9 |
10 | import store from '../store';
11 | import { SHOW_MODAL } from '../store/actions';
12 |
13 | class ErrorModal extends React.Component {
14 | constructor(props) {
15 | super(props);
16 |
17 | this.onClickClose = this.onClickClose.bind(this);
18 | }
19 |
20 | componentDidMount() {
21 | // Focus on the continue button when it is shown.
22 | // This is not currently the default action for modals, but may be in
23 | // the future.
24 | ReactDOM.findDOMNode(this.continueButton).focus(); // eslint-disable-line react/no-find-dom-node
25 | }
26 |
27 | // Always execute the confirm function after unmounting (clicking the
28 | // "Confirm" button unmounts)
29 | componentWillUnmount() {
30 | this.props.confirmFunction();
31 | }
32 |
33 | onClickClose() {
34 | this.props.dispatch({
35 | type: 'HIDE_MODAL',
36 | id: this.props.modalId,
37 | });
38 | // After unmounting, `componentWillUnmount()` is called and the
39 | // `confirmFunction()` will be executed.
40 | }
41 |
42 | render() {
43 | return (
44 |
48 |
49 | {this.props.error.message || this.props.error}
50 |
51 |
52 |
53 |
61 |
62 |
63 | );
64 | }
65 | }
66 |
67 | ErrorModal.propTypes = {
68 | dispatch: PropTypes.func.isRequired,
69 | modalId: PropTypes.number.isRequired,
70 |
71 | // Error message might be an Error object or a string
72 | error: PropTypes.oneOfType([
73 | PropTypes.string,
74 | PropTypes.instanceOf(Error),
75 | ]).isRequired,
76 | confirmFunction: PropTypes.func,
77 | };
78 |
79 | ErrorModal.defaultProps = {
80 | confirmFunction: noop,
81 | };
82 |
83 | export default connect()(ErrorModal);
84 |
85 | /**
86 | * A convenience function for displaying the ErrorModal.
87 | *
88 | * @param {string} message - the message to display in the modal
89 | * @param {Function} callback - callback function to execute when the error
90 | * modal is unmounted. This is passed in to ErrorModal's props as
91 | * `confirmFunction`
92 | */
93 | export function showErrorModal(message, callback = noop) {
94 | store.dispatch({
95 | type: SHOW_MODAL,
96 | modalType: 'ERROR',
97 | modalProps: {
98 | error: message,
99 | confirmFunction: callback,
100 | },
101 | });
102 | }
103 |
--------------------------------------------------------------------------------
/src/js/modals/ExamplesModal.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import SceneSelectModal from './SceneSelectModal';
4 |
5 | import { load } from '../tangram-play';
6 | import EXAMPLES_DATA from './examples.json';
7 |
8 | function confirmHandler(selected) {
9 | if (!selected) return;
10 |
11 | load({
12 | url: selected.url,
13 | data: selected,
14 | source: 'EXAMPLES',
15 | });
16 | }
17 |
18 | export default function ExamplesModal(props) {
19 | return (
20 |
26 | );
27 | }
28 |
29 | ExamplesModal.propTypes = {
30 | modalId: PropTypes.number.isRequired,
31 | };
32 |
--------------------------------------------------------------------------------
/src/js/modals/LoadingSpinner.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import Icon from '../components/Icon';
4 |
5 | export default function LoadingSpinner(props) {
6 | let className = 'loading-spinner';
7 | if (props.on) {
8 | className += ' loading-spinner-on';
9 | }
10 |
11 | return (
12 |
13 |
14 | {props.msg}
15 |
16 | );
17 | }
18 |
19 | LoadingSpinner.propTypes = {
20 | on: PropTypes.bool,
21 | msg: PropTypes.string,
22 | };
23 |
24 | LoadingSpinner.defaultProps = {
25 | on: false,
26 | msg: 'Working...',
27 | };
28 |
--------------------------------------------------------------------------------
/src/js/modals/Modal.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { noop } from 'lodash';
4 |
5 | export default class Modal extends React.Component {
6 | constructor(props) {
7 | super(props);
8 |
9 | this.storeRefs = this.storeRefs.bind(this);
10 | this.onKeyDown = this.onKeyDown.bind(this);
11 | this.handleEscKey = this.handleEscKey.bind(this);
12 | this.handleEnterKey = this.handleEnterKey.bind(this);
13 | }
14 |
15 | componentDidMount() {
16 | // Add listeners for keys
17 | window.addEventListener('keydown', this.onKeyDown, false);
18 | }
19 |
20 | componentWillUnmount() {
21 | window.removeEventListener('keydown', this.onKeyDown, false);
22 | }
23 |
24 | onKeyDown(event) {
25 | const key = event.keyCode || event.which;
26 |
27 | switch (key) {
28 | case 13:
29 | this.handleEnterKey(event);
30 | break;
31 | case 27:
32 | this.handleEscKey(event);
33 | break;
34 | default:
35 | break;
36 | }
37 | }
38 |
39 | /**
40 | * Stores reference to this modal's DOM node locally, and sends to parent
41 | * component if a callback function is provided.
42 | */
43 | storeRefs(ref) {
44 | this.el = ref;
45 | this.props.setRef(ref);
46 | }
47 |
48 | /**
49 | * Handles when the Enter key is pressed.
50 | * Should be the same function as if you pressed the Confirm button.
51 | * Events are passed to the function as the first parameter.
52 | */
53 | handleEnterKey(event) {
54 | // By default, the confirmFunction prop is a no-op
55 | this.props.confirmFunction(event);
56 | }
57 |
58 | /**
59 | * Handles when the Escape key is pressed.
60 | * Should be the same function as if you pressed the Cancel button.
61 | * Events are passed to the function as the first parameter.
62 | */
63 | handleEscKey(event) {
64 | // Bail if escape disabled via props
65 | if (this.props.disableEsc === true) return;
66 |
67 | if (this.props.cancelFunction !== noop) {
68 | this.props.cancelFunction(event);
69 | }
70 | }
71 |
72 | render() {
73 | let classNames = 'modal';
74 |
75 | if (this.props.className) {
76 | classNames = `${classNames} ${this.props.className}`;
77 | }
78 |
79 | return (
80 |
81 |
82 | {this.props.children}
83 |
84 |
85 | );
86 | }
87 | }
88 |
89 | Modal.propTypes = {
90 | children: PropTypes.node.isRequired,
91 | className: PropTypes.string,
92 | disableEsc: PropTypes.bool,
93 | cancelFunction: PropTypes.func,
94 | confirmFunction: PropTypes.func,
95 | setRef: PropTypes.func,
96 | };
97 |
98 | Modal.defaultProps = {
99 | className: '',
100 | disableEsc: false,
101 | cancelFunction: noop,
102 | confirmFunction: noop,
103 | setRef: noop,
104 | };
105 |
--------------------------------------------------------------------------------
/src/js/modals/ModalRoot.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from 'react-redux';
4 |
5 | // Import all modals here
6 | import AboutModal from './AboutModal';
7 | import WelcomeModal from './WelcomeModal';
8 | import WhatsNewModal from './WhatsNewModal';
9 | import SupportModal from './SupportModal';
10 | import ConfirmDialogModal from './ConfirmDialogModal';
11 | import ErrorModal from './ErrorModal';
12 | import ExamplesModal from './ExamplesModal';
13 | import OpenFromCloudModal from './OpenFromCloudModal';
14 | import OpenGistModal from './OpenGistModal'; // LEGACY.
15 | import OpenUrlModal from './OpenUrlModal';
16 | import SaveToCloudModal from './SaveToCloudModal';
17 | import SaveExistingToCloudModal from './SaveExistingToCloudModal';
18 | import SaveGistModal from './SaveGistModal'; // LEGACY.
19 | import SaveGistSuccessModal from './SaveGistSuccessModal'; // LEGACY.
20 | import ShareHostedMapModal from './ShareHostedMapModal';
21 | import CodeSnippetModal from './CodeSnippetModal';
22 |
23 | const MODAL_COMPONENTS = {
24 | ABOUT: AboutModal,
25 | WELCOME: WelcomeModal,
26 | WHATS_NEW: WhatsNewModal,
27 | SUPPORT: SupportModal,
28 | CONFIRM_DIALOG: ConfirmDialogModal,
29 | ERROR: ErrorModal,
30 | OPEN_EXAMPLE: ExamplesModal,
31 | OPEN_FROM_CLOUD: OpenFromCloudModal,
32 | OPEN_GIST: OpenGistModal, // LEGACY.
33 | OPEN_URL: OpenUrlModal,
34 | SAVE_TO_CLOUD: SaveToCloudModal,
35 | SAVE_EXISTING_TO_CLOUD: SaveExistingToCloudModal,
36 | SAVE_GIST: SaveGistModal, // LEGACY.
37 | SAVE_GIST_SUCCESS: SaveGistSuccessModal, // LEGACY
38 | SHARE_HOSTED_MAP: ShareHostedMapModal,
39 | SHOW_CODE_SNIPPET: CodeSnippetModal,
40 | };
41 |
42 | const ModalRoot = ({ stack }) => {
43 | // Sort modals by priority value -- highest is displayed on top.
44 | const modalComponents = stack.sort((a, b) => a.priority - b.priority)
45 | .map(({ modalType, modalProps, id }) => {
46 | if (!modalType) return null;
47 |
48 | const SpecificModal = MODAL_COMPONENTS[modalType];
49 | return
;
50 | });
51 |
52 | return
{modalComponents}
;
53 | };
54 |
55 | ModalRoot.propTypes = {
56 | stack: PropTypes.arrayOf(PropTypes.object),
57 | };
58 |
59 | ModalRoot.defaultProps = {
60 | stack: [],
61 | };
62 |
63 | export default connect(
64 | state => state.modals
65 | )(ModalRoot);
66 |
--------------------------------------------------------------------------------
/src/js/modals/ModalShield.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from 'react-redux';
4 |
5 | function ModalShield(props) {
6 | const displayStyle = props.stack.length > 0 ?
7 | { display: 'block' } :
8 | { display: 'none' };
9 |
10 | return
;
11 | }
12 |
13 | ModalShield.propTypes = {
14 | stack: PropTypes.arrayOf(PropTypes.any),
15 | };
16 |
17 | ModalShield.defaultProps = {
18 | stack: [],
19 | };
20 |
21 | function mapStateToProps(state) {
22 | return {
23 | stack: state.modals.stack,
24 | };
25 | }
26 |
27 | export default connect(mapStateToProps)(ModalShield);
28 |
--------------------------------------------------------------------------------
/src/js/modals/OpenFromCloudModal.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import SceneSelectModal from './SceneSelectModal';
4 |
5 | import { load } from '../tangram-play';
6 | import { fetchSceneList, deleteScene } from '../storage/mapzen';
7 |
8 | function confirmHandler(selected) {
9 | if (!selected) return;
10 |
11 | load({
12 | url: selected.entrypoint_url,
13 | data: selected,
14 | source: 'MAPZEN',
15 | });
16 | }
17 |
18 | export default function OpenFromCloudModal(props) {
19 | return (
20 |
29 | );
30 | }
31 |
32 | OpenFromCloudModal.propTypes = {
33 | modalId: PropTypes.number.isRequired,
34 | };
35 |
--------------------------------------------------------------------------------
/src/js/modals/OpenGistModal.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import SceneSelectModal from './SceneSelectModal';
4 |
5 | import { showErrorModal } from './ErrorModal';
6 | import { load } from '../tangram-play';
7 | import { getSceneURLFromGistAPI } from '../tools/gist-url';
8 | import { getGists, removeNonexistentGistFromLocalStorage } from '../storage/gist';
9 |
10 | /**
11 | * If opening a URL is not successful
12 | *
13 | * @param {Error} error - thrown by something else
14 | * if error.message is a number, then it is a status code from Fetch
15 | * but status code numbers are converted to strings
16 | * there must be a better way of doing this
17 | * @param {string} url - the Gist URL that was attempted
18 | */
19 | function handleError(error, value) {
20 | let message = '';
21 |
22 | if (error.message === '404') {
23 | message = 'This Gist could not be found.';
24 | } else if (error.message === '403') {
25 | message = 'We exceeded the rate limit for GitHub’s non-authenticated request API.';
26 | } else if (Number.isInteger(window.parseInt(error.message, 10))) {
27 | message = `The Gist server gave us an error code of ${error.message}`;
28 | }
29 |
30 | showErrorModal(`Could not load the Gist! ${message}`);
31 |
32 | if (error.message === '404') {
33 | removeNonexistentGistFromLocalStorage(value);
34 | }
35 | }
36 |
37 | function confirmHandler(selected) {
38 | if (!selected) return;
39 |
40 | getSceneURLFromGistAPI(selected.url)
41 | .then((url) => {
42 | load({
43 | url,
44 | data: selected,
45 | source: 'GIST',
46 | });
47 | })
48 | .catch((error) => {
49 | handleError(error, selected.url);
50 | });
51 | }
52 |
53 | export default function OpenGistModal(props) {
54 | return (
55 |
62 | );
63 | }
64 |
65 | OpenGistModal.propTypes = {
66 | modalId: PropTypes.number.isRequired,
67 | };
68 |
--------------------------------------------------------------------------------
/src/js/modals/OpenUrlModal.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from 'react-redux';
4 | import Button from 'react-bootstrap/lib/Button';
5 | import Modal from './Modal';
6 | import Icon from '../components/Icon';
7 | import LoadingSpinner from './LoadingSpinner';
8 |
9 | import { load } from '../tangram-play';
10 |
11 | let lastAttemptedUrlInput;
12 |
13 | class OpenUrlModal extends React.Component {
14 | constructor(props) {
15 | super(props);
16 |
17 | this.state = {
18 | thinking: false,
19 | input: lastAttemptedUrlInput || '',
20 | };
21 |
22 | this.onClickConfirm = this.onClickConfirm.bind(this);
23 | this.onClickCancel = this.onClickCancel.bind(this);
24 | this.onChangeInput = this.onChangeInput.bind(this);
25 | this.unmountSelf = this.unmountSelf.bind(this);
26 | }
27 |
28 | componentDidMount() {
29 | this.input.select();
30 | this.input.focus();
31 | }
32 |
33 | onClickConfirm() {
34 | // Bail if no input
35 | if (!this.state.input) return;
36 |
37 | // Waiting state
38 | this.setState({
39 | thinking: true,
40 | });
41 |
42 | // Cache this
43 | lastAttemptedUrlInput = this.state.input;
44 |
45 | // We no longer check for valid URL signatures.
46 | // It is easier to attempt to fetch an input URL and see what happens.
47 | const url = this.state.input.trim();
48 | load({ url })
49 | .then(this.unmountSelf);
50 | }
51 |
52 | onClickCancel(event) {
53 | this.unmountSelf();
54 | }
55 |
56 | onChangeInput(event) {
57 | this.setState({ input: event.target.value });
58 | }
59 |
60 | unmountSelf() {
61 | this.props.dispatch({
62 | type: 'HIDE_MODAL',
63 | id: this.props.modalId,
64 | });
65 | }
66 |
67 | render() {
68 | return (
69 |
75 | Open a scene file from URL
76 |
77 |
78 | { this.input = ref; }}
85 | onChange={this.onChangeInput}
86 | />
87 |
88 |
89 |
90 |
91 |
98 |
105 |
106 |
107 | );
108 | }
109 | }
110 |
111 | OpenUrlModal.propTypes = {
112 | dispatch: PropTypes.func.isRequired,
113 | modalId: PropTypes.number.isRequired,
114 | };
115 |
116 | export default connect()(OpenUrlModal);
117 |
--------------------------------------------------------------------------------
/src/js/modals/SaveGistSuccessModal.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from 'react-redux';
4 | import ReactDOM from 'react-dom';
5 | import Button from 'react-bootstrap/lib/Button';
6 | import Clipboard from 'clipboard';
7 |
8 | import IconButton from '../components/IconButton';
9 | import Modal from './Modal';
10 |
11 | class SaveGistSuccessModal extends React.Component {
12 | constructor(props) {
13 | super(props);
14 |
15 | this.onClickConfirm = this.onClickConfirm.bind(this);
16 | }
17 |
18 | componentDidMount() {
19 | this.setupClipboard();
20 | this.urlInput.select();
21 | }
22 |
23 | componentWillUnmount() {
24 | // Clean up clipboard object
25 | this.clipboard.destroy();
26 | }
27 |
28 | onClickConfirm(event) {
29 | this.props.dispatch({
30 | type: 'HIDE_MODAL',
31 | id: this.props.modalId,
32 | });
33 | }
34 |
35 | // Sets up clipboard.js functionality. Not a React component.
36 | setupClipboard() {
37 | // eslint-disable-next-line react/no-find-dom-node
38 | const clipboardButtonEl = ReactDOM.findDOMNode(this.clipboardButton);
39 |
40 | // Initiate clipboard button
41 | this.clipboard = new Clipboard(clipboardButtonEl);
42 |
43 | this.clipboard.on('success', (e) => {
44 | console.info('Action:', e.action);
45 | console.info('Text:', e.text);
46 | console.info('Trigger:', e.trigger);
47 |
48 | e.clearSelection();
49 | });
50 |
51 | this.clipboard.on('error', (e) => {
52 | console.error('Action:', e.action);
53 | console.error('Trigger:', e.trigger);
54 | });
55 |
56 | clipboardButtonEl.focus();
57 | }
58 |
59 | render() {
60 | return (
61 |
65 |
66 |
67 | Your gist has been saved.
68 |
69 |
70 | Remember this URL!
71 |
72 |
73 | { this.urlInput = ref; }}
78 | defaultValue={this.props.urlValue}
79 | />
80 | { this.clipboardButton = ref; }}
86 | />
87 |
88 |
90 |
93 |
94 |
95 | );
96 | }
97 | }
98 |
99 | SaveGistSuccessModal.propTypes = {
100 | dispatch: PropTypes.func.isRequired,
101 | urlValue: PropTypes.string.isRequired,
102 | modalId: PropTypes.number.isRequired,
103 | };
104 |
105 | export default connect()(SaveGistSuccessModal);
106 |
--------------------------------------------------------------------------------
/src/js/modals/SceneItem.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | export default function SceneItem(props) {
5 | const date = (props.date) ? (
6 |
7 | {/* Show the date this was saved.
8 | TODO: better formatting; maybe use moment.js */}
9 | Saved on {new Date(props.date).toLocaleString()}
10 |
11 | ) : null;
12 |
13 | const children = (props.children) ? (
14 |
15 | {props.children}
16 |
17 | ) : null;
18 |
19 | return (
20 |
21 |
22 |
23 |
24 |
25 |
26 | {props.name}
27 |
28 |
29 | {props.description}
30 |
31 | {date}
32 |
33 | {children}
34 |
35 | );
36 | }
37 |
38 | SceneItem.propTypes = {
39 | thumbnail: PropTypes.string.isRequired,
40 | name: PropTypes.string.isRequired,
41 | description: PropTypes.string,
42 | date: PropTypes.string,
43 | children: PropTypes.node,
44 | };
45 |
46 | SceneItem.defaultProps = {
47 | description: 'No description provided.',
48 | date: '',
49 | children: null,
50 | };
51 |
--------------------------------------------------------------------------------
/src/js/modals/SupportModal.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from 'react-redux';
4 | import Button from 'react-bootstrap/lib/Button';
5 | import Modal from './Modal';
6 |
7 | class SupportModal extends React.PureComponent {
8 | constructor(props) {
9 | super(props);
10 |
11 | this.onClickClose = this.onClickClose.bind(this);
12 | }
13 |
14 | onClickClose() {
15 | this.props.dispatch({
16 | type: 'HIDE_MODAL',
17 | id: this.props.modalId,
18 | });
19 | }
20 |
21 | render() {
22 | return (
23 |
27 |
28 |
Tangram Play Support
29 |
30 |
31 | Learn more about using Tangram and Mapzen vector tiles on their documentation pages.
32 |
33 |
34 |
35 | Having a problem with Tangram Play? Do you have feedback to share? Contact Mapzen Support by emailing tangram@mapzen.com.
36 |
37 |
38 |
39 | Tangram Play is still in active development and you can have a role in it! Add bugs or feature requests as an issue on the project’s GitHub repository.
40 |
41 |
44 |
45 |
46 |
47 | );
48 | }
49 | }
50 |
51 | SupportModal.propTypes = {
52 | dispatch: PropTypes.func.isRequired,
53 | modalId: PropTypes.number.isRequired,
54 | };
55 |
56 | export default connect()(SupportModal);
57 |
--------------------------------------------------------------------------------
/src/js/modals/WelcomeModal.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from 'react-redux';
4 | import Button from 'react-bootstrap/lib/Button';
5 | import Modal from './Modal';
6 | import Icon from '../components/Icon';
7 | import { HIDE_MODAL, DISMISS_WELCOME_SCREEN } from '../store/actions';
8 |
9 | class WelcomeModal extends React.PureComponent {
10 | constructor(props) {
11 | super(props);
12 |
13 | this.onClickClose = this.onClickClose.bind(this);
14 | }
15 |
16 | onClickClose() {
17 | this.props.dispatch({
18 | type: HIDE_MODAL,
19 | id: this.props.modalId,
20 | });
21 |
22 | this.props.dispatch({ type: DISMISS_WELCOME_SCREEN });
23 | }
24 |
25 | onClickTangram() {
26 | window.open('https://mapzen.com/products/tangram/', '_blank');
27 | }
28 |
29 | onClickGetStarted() {
30 | window.open('./docs/', '_blank');
31 | }
32 |
33 | render() {
34 | return (
35 |
39 |
40 |
Welcome to Tangram Play!
41 |
42 |
43 | We’re excited to release the public beta of Tangram Play, a text
44 | editor for working with Tangram, our web map rendering library.
45 | Your use of Play during this phase will help us improve our tools
46 | for web map design.
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
58 |
59 |
61 | );
62 | }
63 | }
64 |
65 | WelcomeModal.propTypes = {
66 | dispatch: PropTypes.func.isRequired,
67 | modalId: PropTypes.number.isRequired,
68 | };
69 |
70 | export default connect()(WelcomeModal);
71 |
--------------------------------------------------------------------------------
/src/js/modals/WhatsNewModal.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from 'react-redux';
4 | import Button from 'react-bootstrap/lib/Button';
5 | import Modal from './Modal';
6 | import Icon from '../components/Icon';
7 |
8 | class WhatsNewModal extends React.PureComponent {
9 | constructor(props) {
10 | super(props);
11 |
12 | this.onClickClose = this.onClickClose.bind(this);
13 | }
14 |
15 | onClickClose() {
16 | this.props.dispatch({
17 | type: 'HIDE_MODAL',
18 | id: this.props.modalId,
19 | });
20 | }
21 |
22 | render() {
23 | return (
24 |
28 |
29 |
What’s new!
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
40 |
41 |
42 | );
43 | }
44 | }
45 |
46 | WhatsNewModal.propTypes = {
47 | dispatch: PropTypes.func.isRequired,
48 | modalId: PropTypes.number.isRequired,
49 | };
50 |
51 | export default connect()(WhatsNewModal);
52 |
--------------------------------------------------------------------------------
/src/js/modals/examples.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "category": "Mapzen basemaps",
4 | "scenes": [
5 | {
6 | "name": "Basic",
7 | "thumb": "./data/scenes/thumbnails/basic.png",
8 | "url": "./data/scenes/basic.yaml",
9 | "description":"A simple starter map."
10 | },
11 | {
12 | "name": "Refill",
13 | "thumb": "./data/scenes/thumbnails/refill.png",
14 | "url": "https://www.nextzen.org/carto/refill-style/refill-style.yaml",
15 | "description":"A light, minimalist map style designed for data visualization overlays."
16 | },
17 | {
18 | "name": "Cinnabar",
19 | "thumb": "./data/scenes/thumbnails/cinnabar.png",
20 | "url": "https://www.nextzen.org/carto/cinnabar-style/cinnabar-style.yaml",
21 | "description":"A classic web map style for general mapping applications."
22 | },
23 | {
24 | "name": "Bubble Wrap",
25 | "thumb": "./data/scenes/thumbnails/bubble-wrap.png",
26 | "url": "https://raw.githubusercontent.com/tangrams/bubble-wrap/gh-pages/bubble-wrap-style.yaml",
27 | "description":"A full-featured wayfinding style loaded with helpful icons for points of interest."
28 | },
29 | {
30 | "name": "Walkabout",
31 | "thumb": "./data/scenes/thumbnails/walkabout.png",
32 | "url": "https://raw.githubusercontent.com/tangrams/walkabout-style/gh-pages/walkabout-style.yaml",
33 | "description":"An outdoor style is perfect for hiking or getting out and about, with mountains, ski trails, biking paths, and transit stops."
34 | },
35 | {
36 | "name": "Tron",
37 | "thumb": "./data/scenes/thumbnails/tron.png",
38 | "url": "https://tangrams.github.io/tron-style/tron-style.yaml",
39 | "description":"An animated style pushing mapping to new extremes with lots of neon."
40 | },
41 | ]
42 | },
43 | ]
44 |
--------------------------------------------------------------------------------
/src/js/store/actions/app.js:
--------------------------------------------------------------------------------
1 | import { SET_APP_STATE } from './index';
2 |
3 | export function showGlobey(bool = true) {
4 | return {
5 | type: SET_APP_STATE,
6 | globey: bool,
7 | };
8 | }
9 |
--------------------------------------------------------------------------------
/src/js/store/actions/settings.js:
--------------------------------------------------------------------------------
1 | import store from '../index';
2 | import { SET_EDITOR_FONT_SIZE, EDITOR_INCREASE_FONT_SIZE, EDITOR_DECREASE_FONT_SIZE } from './index';
3 |
4 | export function setEditorFontSize(fontSize) {
5 | store.dispatch({
6 | type: SET_EDITOR_FONT_SIZE,
7 | editorFontSize: fontSize,
8 | });
9 | }
10 |
11 | export function increaseEditorFontSize() {
12 | store.dispatch({
13 | type: EDITOR_INCREASE_FONT_SIZE,
14 | });
15 | }
16 |
17 | export function decreaseEditorFontSize() {
18 | store.dispatch({
19 | type: EDITOR_DECREASE_FONT_SIZE,
20 | });
21 | }
22 |
--------------------------------------------------------------------------------
/src/js/store/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-underscore-dangle */
2 | // Initiate Redux store
3 | import { createStore } from 'redux';
4 |
5 | // This is where other Redux-related libs are added, e.g.
6 | // react-router-redux if we use it in the future.
7 |
8 | // Import the root reducer
9 | import reducers from './reducers';
10 |
11 | // For Redux devtools extension.
12 | // https://github.com/zalmoxisus/redux-devtools-extension
13 | const devtools = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
14 | const store = createStore(reducers, devtools);
15 |
16 | export default store;
17 |
--------------------------------------------------------------------------------
/src/js/store/reducers/app.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Record various properties related to app state.
3 | */
4 | import {
5 | APP_INITIALIZED,
6 | SET_APP_STATE,
7 | SHOW_SIGN_IN_OVERLAY,
8 | HIDE_SIGN_IN_OVERLAY,
9 | } from '../actions';
10 |
11 | const initialState = {
12 | // Set to `true` after Tangram Play has initialized - ready and waiting to
13 | // accept user input. The absence of the `initialized` prop in the `app`
14 | // state shall be treated the same as a `false` value.
15 | initialized: false,
16 |
17 | // Set to `true` for debug mode
18 | debug: false,
19 |
20 | // Set to `true` while Tangram is loading and rendering a scene.
21 | tangramSceneLoading: false,
22 |
23 | // When awaiting user sign-in
24 | // Set `signInOverlay` to `true` when sign-in overlay is displayed
25 | // Set `signInCallbackMethod` to a string value representing what to do after user signs in
26 | // Reset this to null if sign-in is canceled or action is complete.
27 | signInOverlay: false,
28 | signInCallbackMethod: null,
29 |
30 | recentScenes: [],
31 | showEditorHiddenTooltip: false,
32 |
33 | // Whether the application is running with the /embed path.
34 | isEmbedded: false,
35 | disableMapToolbar: false,
36 |
37 | // Whether editor should be allowed to handle multiple files.
38 | // This feature is experimental and should be disabled in production and in
39 | // embedded modes.
40 | disableMultiFile: true,
41 |
42 | // Whether editor should display the tab bar. This is view-only.
43 | showEditorTabBar: true,
44 |
45 | // Easter egg.
46 | globey: false,
47 | };
48 |
49 | const app = (state = initialState, action) => {
50 | switch (action.type) {
51 | case APP_INITIALIZED:
52 | return {
53 | ...state,
54 | initialized: true,
55 | };
56 | // The settings is an object with an arbitrary set of properties.
57 | // The only property we don't want to copy is `type`, which is
58 | // only used in the reducer, here. Make sure we combine incoming
59 | // properties with existing properties.
60 | case SET_APP_STATE: {
61 | const settingsObj = Object.assign({}, state, action);
62 | delete settingsObj.type;
63 |
64 | return { ...settingsObj };
65 | }
66 | case SHOW_SIGN_IN_OVERLAY:
67 | return {
68 | ...state,
69 | signInOverlay: true,
70 | };
71 | case HIDE_SIGN_IN_OVERLAY:
72 | return {
73 | ...state,
74 | signInOverlay: false,
75 | };
76 | case 'SET_SIGN_IN_CALLBACK_METHOD':
77 | return {
78 | ...state,
79 | signInCallbackMethod: action.method,
80 | };
81 | default:
82 | return state;
83 | }
84 | };
85 |
86 | export default app;
87 |
--------------------------------------------------------------------------------
/src/js/store/reducers/errors.js:
--------------------------------------------------------------------------------
1 | /**
2 | * For errors and warnings reported by Tangram
3 | */
4 | import { uniqWith, reject, isEqual } from 'lodash';
5 | import { ADD_ERROR, REMOVE_ERROR, CLEAR_ERRORS } from '../actions';
6 |
7 | const initialState = {
8 | errors: [],
9 | };
10 |
11 | const errors = (state = initialState, action) => {
12 | switch (action.type) {
13 | case ADD_ERROR: {
14 | // Append an error object the current list of errors.
15 | // Filter out identical errors.
16 | const errorsCollection = [...state.errors, action.error];
17 |
18 | return {
19 | ...state,
20 | errors: uniqWith(errorsCollection, isEqual),
21 | };
22 | }
23 | case REMOVE_ERROR: {
24 | return {
25 | ...state,
26 | errors: reject(state.errors, action.identity),
27 | };
28 | }
29 | case CLEAR_ERRORS:
30 | return {
31 | errors: [],
32 | };
33 | default:
34 | return state;
35 | }
36 | };
37 |
38 | export default errors;
39 |
--------------------------------------------------------------------------------
/src/js/store/reducers/index.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import app from './app';
3 | import errors from './errors';
4 | import map from './map';
5 | import modals from './modals';
6 | import persistence from './persistence';
7 | import scene from './scene';
8 | import settings from './settings';
9 | import system from './system';
10 | import user from './user';
11 |
12 | const reducers = combineReducers({
13 | app,
14 | errors,
15 | map,
16 | modals,
17 | persistence,
18 | scene,
19 | settings,
20 | system,
21 | user,
22 | });
23 |
24 | export default reducers;
25 |
--------------------------------------------------------------------------------
/src/js/store/reducers/map.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Record various properties related to map state.
3 | */
4 | import { UPDATE_MAP_LABEL } from '../actions';
5 |
6 | const initialState = {
7 | label: null,
8 | };
9 |
10 | const map = (state = initialState, action) => {
11 | switch (action.type) {
12 | case UPDATE_MAP_LABEL:
13 | {
14 | return {
15 | ...state,
16 | label: action.label,
17 | };
18 | }
19 | default:
20 | return state;
21 | }
22 | };
23 |
24 | export default map;
25 |
--------------------------------------------------------------------------------
/src/js/store/reducers/modals.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Modals
3 | */
4 | import { SHOW_MODAL, HIDE_MODAL, CLEAR_MODALS } from '../actions';
5 | import { uniqueInteger } from '../../tools/helpers';
6 |
7 | const initialState = {
8 | stack: [],
9 | };
10 |
11 | const modals = (state = initialState, action) => {
12 | switch (action.type) {
13 | case SHOW_MODAL: {
14 | const newModal = {
15 | modalType: action.modalType,
16 | modalProps: action.modalProps || {},
17 | priority: action.priority || 0,
18 | id: uniqueInteger(),
19 | };
20 | const stack = [...state.stack, newModal];
21 |
22 | return { stack };
23 | }
24 | // Hiding a modal removes its information from the modal stack.
25 | case HIDE_MODAL: {
26 | const stack = state.stack.slice(0).filter(modal => modal.id !== action.id);
27 | return { stack };
28 | }
29 | case CLEAR_MODALS:
30 | return initialState;
31 | default:
32 | return state;
33 | }
34 | };
35 |
36 | export default modals;
37 |
--------------------------------------------------------------------------------
/src/js/store/reducers/persistence.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Properties that persist across multiple sessions. Differs from "settings"
3 | * in that these are automatically saved to improve user's quality of life, but
4 | * are not explicitly editable. Persistence settings are stored in browser's
5 | * local storage when the browser tab is unloaded.
6 | */
7 | import { takeRight } from 'lodash';
8 | import { SET_PERSISTENCE, DISMISS_WELCOME_SCREEN, SET_RECENT_VERSION, ADD_RECENT_SCENE } from '../actions';
9 |
10 | const MAX_RECENT_SCENES = 10;
11 |
12 | /**
13 | * Retrieves the starting position of the divider: a number value, in pixels,
14 | * that the divider element's left edge should be offset from the left edge
15 | * of the viewport.
16 | *
17 | * @returns {Number} x - the position to place the divider.
18 | */
19 | function getDividerStartingPosition() {
20 | if (window.innerWidth > 1024) {
21 | return Math.floor(window.innerWidth * 0.6);
22 | }
23 |
24 | // If window.innerWidth <= 1024
25 | return Math.floor(window.innerWidth / 2);
26 | }
27 |
28 | const initialState = {
29 | // Position of the divider component.
30 | dividerPositionX: getDividerStartingPosition(),
31 |
32 | // Set to `true` after a user has dismissed the welcome screen.
33 | welcomeScreenDismissed: false,
34 |
35 | // Set this to the most recent version of Tangram Play. A "what's new" screen
36 | // is displayed when the version does not match.
37 | mostRecentVersion: '0.0.0',
38 |
39 | // A list of recent scenes. WIP
40 | recentScenes: [],
41 |
42 | // Recorded timestamp of the last time someone used this instance of Tangram Play
43 | lastSessionTimestamp: null,
44 | };
45 |
46 | const app = (state = initialState, action) => {
47 | switch (action.type) {
48 | case SET_PERSISTENCE: {
49 | // The settings is an object with an arbitrary set of properties.
50 | // The only property we don't want to copy is `type`, which is
51 | // only used in the reducer, here. Make sure we combine incoming
52 | // properties with existing properties.
53 | const persistenceObj = Object.assign({}, state, action);
54 | delete persistenceObj.type;
55 |
56 | return { ...persistenceObj };
57 | }
58 | case DISMISS_WELCOME_SCREEN:
59 | return {
60 | ...state,
61 | welcomeScreenDismissed: true,
62 | };
63 | case SET_RECENT_VERSION:
64 | return {
65 | ...state,
66 | mostRecentVersion: action.version,
67 | };
68 | case ADD_RECENT_SCENE:
69 | return {
70 | ...state,
71 | recentScenes: takeRight([...state.recentScenes, action.scene], MAX_RECENT_SCENES),
72 | };
73 | default:
74 | return state;
75 | }
76 | };
77 |
78 | export default app;
79 |
--------------------------------------------------------------------------------
/src/js/store/reducers/settings.js:
--------------------------------------------------------------------------------
1 | import {
2 | SET_SETTINGS,
3 | SET_EDITOR_FONT_SIZE,
4 | EDITOR_DECREASE_FONT_SIZE,
5 | EDITOR_INCREASE_FONT_SIZE,
6 | } from '../actions';
7 |
8 | const MINIMUM_FONT_SIZE = 8;
9 |
10 | const initialState = {
11 | editorFontSize: 14,
12 | };
13 |
14 | const settings = (state = initialState, action) => {
15 | switch (action.type) {
16 | case SET_SETTINGS: {
17 | // The settings is an object with an arbitrary set of properties.
18 | // The only property we don't want to copy is `type`, which is
19 | // only used in the reducer, here. Make sure we combine incoming
20 | // properties with existing properties.
21 | const settingsObj = Object.assign({}, state, action);
22 | delete settingsObj.type;
23 |
24 | return { ...settingsObj };
25 | }
26 | case SET_EDITOR_FONT_SIZE:
27 | return {
28 | ...state,
29 | editorFontSize: action.editorFontSize,
30 | };
31 | case EDITOR_DECREASE_FONT_SIZE:
32 | return {
33 | ...state,
34 | editorFontSize: Math.max(state.editorFontSize - 1, MINIMUM_FONT_SIZE),
35 | };
36 | case EDITOR_INCREASE_FONT_SIZE:
37 | return {
38 | ...state,
39 | editorFontSize: state.editorFontSize + 1,
40 | };
41 | default:
42 | return state;
43 | }
44 | };
45 |
46 | export default settings;
47 |
--------------------------------------------------------------------------------
/src/js/store/reducers/system.js:
--------------------------------------------------------------------------------
1 | import {
2 | SET_MAPZEN,
3 | SET_LOCALHOST,
4 | SET_SSL_ENABLED,
5 | } from '../actions';
6 |
7 | const initialState = {
8 | mapzen: false,
9 | localhost: false,
10 | ssl: false,
11 | };
12 |
13 | const settings = (state = initialState, action) => {
14 | switch (action.type) {
15 | case SET_MAPZEN:
16 | return {
17 | ...state,
18 | mapzen: true,
19 | };
20 | case SET_LOCALHOST:
21 | return {
22 | ...state,
23 | localhost: true,
24 | };
25 | case SET_SSL_ENABLED:
26 | return {
27 | ...state,
28 | ssl: true,
29 | };
30 | default:
31 | return state;
32 | }
33 | };
34 |
35 | export default settings;
36 |
--------------------------------------------------------------------------------
/src/js/store/reducers/user.js:
--------------------------------------------------------------------------------
1 | import { USER_SIGNED_IN, USER_SIGNED_OUT } from '../actions';
2 |
3 | const initialState = {
4 | signedIn: false,
5 | id: null,
6 | nickname: null,
7 | email: null,
8 | avatar: null,
9 | admin: false,
10 | };
11 |
12 | const user = (state = initialState, action) => {
13 | switch (action.type) {
14 | // If a user is signed in, we return the relevant properties from
15 | // Mapzen's user endpoint to the store.
16 | case USER_SIGNED_IN:
17 | return {
18 | signedIn: true,
19 | id: action.id,
20 | nickname: action.nickname,
21 | email: action.email,
22 | avatar: action.avatar,
23 | admin: action.admin || false,
24 | };
25 | // If a user is signed out, we clear all user data. Absense of this
26 | // information (in particular, the `nickname` property) is enough to
27 | // indicate that the user is signed out. We do not need to use a separate
28 | // `logged_in: true` (or similar) property to do this.
29 | case USER_SIGNED_OUT:
30 | // Ensure that the return object is a clone, not a reference
31 | return Object.assign({}, initialState);
32 | default:
33 | return state;
34 | }
35 | };
36 |
37 | export default user;
38 |
--------------------------------------------------------------------------------
/src/js/tangram-docs.json:
--------------------------------------------------------------------------------
1 | {
2 | "keys": [
3 | {
4 | "name": "sources",
5 | "address": "sources",
6 | "description": "The sources element is a required top-level element in a Tangram scene file. It declares the beginning of a sources block. It takes only one kind of parameter: the source name. Any number of source names can be declared.",
7 | "required": "yes",
8 | "keyword": "yes",
9 | "example": "sources",
10 | "children": [
11 | {
12 | "name": "Source Name",
13 | "address": "^sources:(\\w|\\_|\\-|\\/)+$",
14 | "description": "Specifies the beginning of a source block.",
15 | "required": "yes",
16 | "keyword": "no",
17 | "example": "sources:_mapzen",
18 | "children": [
19 | {
20 | "name": "type",
21 | "address": "^sources:(\\w|\\_|\\-|/)+:type$",
22 | "description": "Sets the type of the datasource. No default.",
23 | "required": "yes",
24 | "keyword": "yes",
25 | "example": "sources:_mapzen:type",
26 | "options": [
27 | "GeoJSON",
28 | "TopoJSON",
29 | "MVT",
30 | "Raster"
31 | ]
32 | },
33 | {
34 | "name": "url",
35 | "address": "^sources:(\\w|\\_|\\-|/)+:url$",
36 | "description": "Specifies the source’s URL. No default.",
37 | "required": "yes",
38 | "keyword": "yes",
39 | "example": "sources:_mapzen:url",
40 | "type": "string"
41 | }
42 | ]
43 | }
44 | ]
45 | },
46 | {
47 | "name": "layers",
48 | "address": "layers",
49 | "description": "The layers element is a required top-level element in the scene file. It has only one kind of sub-element: a layer name, which defines individual layers with a layer filter.",
50 | "required": "yes",
51 | "keyword": "yes",
52 | "example": "layers",
53 | "children": []
54 | },
55 | {
56 | "name": "cameras",
57 | "address": "cameras",
58 | "description": "The cameras element is a required top-level element in the scene file. Individual cameras are defined by a camera name under this element.",
59 | "required": "no",
60 | "keyword": "yes",
61 | "example": "cameras",
62 | "children": []
63 | }
64 | ]
65 | }
--------------------------------------------------------------------------------
/src/js/tools/analytics.js:
--------------------------------------------------------------------------------
1 | /* global ga */
2 | /**
3 | * Google Analytics event tracking documentation:
4 | * https://developers.google.com/analytics/devguides/collection/analyticsjs/events
5 | */
6 | export function trackGAEvent(category, action, label, value) {
7 | // Graceful return if Google Analytics is not loaded or is blocked by client.
8 | if (typeof ga === 'undefined') return;
9 | ga('send', 'event', category, action, label, value);
10 | }
11 |
--------------------------------------------------------------------------------
/src/js/tools/version.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Tools for working with version numbers
3 | */
4 | import VERSION from '../version.json';
5 | import store from '../store';
6 | import { SET_RECENT_VERSION } from '../store/actions';
7 |
8 | /**
9 | * Barebones parsing of a version string to an object representing SemVer values.
10 | * Assumes the version string is well-formed. Does not parse extensions (for
11 | * example, the `-beta.2` in a string like "1.0.0-beta.2". Does not account for
12 | * strings that include a `v` in the beginning. Like I said, this is barebones!
13 | *
14 | * @param {String} v - version string to parse
15 | * @returns {Object} obj - object containing semver parts
16 | */
17 | export function parseVersionString(v) {
18 | const s = v.split('.');
19 | return {
20 | major: Number(s[0]),
21 | minor: Number(s[1]),
22 | patch: Number(s[2]),
23 | };
24 | }
25 |
26 | /**
27 | * Returns true if current application minor version is greater than the
28 | * last minor version stored in persistent session settings.
29 | *
30 | * @param {string} currentVersion - the current version. Defaults to app version
31 | * stored in VERSION. Set this parameter for testing.
32 | * @param {string} lastVersion - the last stored version. Set this parameter for
33 | * testing.
34 | * @returns {Boolean}
35 | */
36 | export function isNewMinorVersion(currentVersion = VERSION.v, prevVersion) {
37 | const version = parseVersionString(currentVersion);
38 | let lastVersion;
39 | if (!prevVersion) {
40 | const persistence = store.getState().persistence;
41 | const lastVersionString = persistence.mostRecentVersion || '0.0.0';
42 | lastVersion = parseVersionString(lastVersionString);
43 | } else {
44 | lastVersion = parseVersionString(prevVersion);
45 | }
46 | return (version.major > lastVersion.major ||
47 | (version.major === lastVersion.major && version.minor > lastVersion.minor));
48 | }
49 |
50 | /**
51 | * Records the current application version in persistent session settings.
52 | *
53 | * @returns {undefined}
54 | */
55 | export function recordCurrentVersion() {
56 | store.dispatch({
57 | type: SET_RECENT_VERSION,
58 | version: VERSION.v,
59 | });
60 | }
61 |
--------------------------------------------------------------------------------
/src/js/ui/fullscreen.js:
--------------------------------------------------------------------------------
1 | // No browsers as of this writing implement Fullscreen API without prefixes
2 | // So we look for prefixed versions of each API feature.
3 | const fullscreenEnabled = document.fullscreenEnabled || // Spec - future
4 | document.webkitFullscreenEnabled || // (Blink/Webkit) Chrome/Opera/Edge/Safari
5 | document.mozFullScreenEnabled || // (Gecko) Firefox
6 | document.msFullscreenEnabled; // IE11
7 |
8 | export function isFullscreenEnabled() {
9 | return fullscreenEnabled;
10 | }
11 |
12 | function exitFullscreen() {
13 | // This cannot be reassigned to a common function or errors may appear, so each
14 | // vendor-prefixed API is checked individually and run if present.
15 | if (document.exitFullscreen) { // Spec
16 | document.exitFullscreen();
17 | } else if (document.webkitExitFullscreen) { // (Blink/Webkit) Chrome/Opera/Edge/Safari
18 | document.webkitExitFullscreen();
19 | } else if (document.mozCancelFullScreen) { // (Gecko) Firefox
20 | // Mozilla has its own syntax for this.
21 | document.mozCancelFullScreen();
22 | } else if (document.msExitFullscreen) { // IE11
23 | document.msExitFullscreen();
24 | }
25 | }
26 |
27 | // Wraps `element.requestFullscreen` in a cross-browser compatible function.
28 | function requestFullscreen(element) {
29 | if (element.requestFullscreen) { // Spec
30 | element.requestFullscreen();
31 | } else if (element.webkitRequestFullscreen) { // (Blink/Webkit) Chrome/Opera/Edge/Safari
32 | // Webkit-based browsers disables keyboard input in fullscreen for
33 | // some reason (security?) but it can be requested. However Safari
34 | // will refuse to allow keyboard input no matter what.
35 | element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
36 | } else if (element.mozRequestFullScreen) { // (Gecko) Firefox
37 | element.mozRequestFullScreen();
38 | } else if (element.msRequestFullscreen) { // IE11
39 | element.msRequestFullscreen();
40 | }
41 | }
42 |
43 | /**
44 | * Returns the element that is currently being presented in full-screen mode in
45 | * this document, or null if full-screen mode is not currently in use. Since
46 | * no browser implements this without a prefix, this function accounts for
47 | * different cross-browser implementations.
48 | *
49 | * @returns {Node|null} - a DOM element that is currently displayed in
50 | * full screen (usually equal to `document.documentElement`), or `null`
51 | * if no element is displayed in full screen.
52 | */
53 | export function getFullscreenElement() {
54 | return document.webkitFullscreenElement ||
55 | document.mozFullScreenElement ||
56 | document.msFullscreenElement;
57 | }
58 |
59 | export function toggleFullscreen() {
60 | // If fullscreen not enabled, ignore
61 | if (!fullscreenEnabled) return;
62 |
63 | // Is there a current fullscreen element?
64 | const fullscreenElement = getFullscreenElement();
65 |
66 | if (!fullscreenElement) {
67 | requestFullscreen(document.documentElement);
68 | } else if (exitFullscreen) {
69 | exitFullscreen();
70 | }
71 | }
72 |
73 | function logFullscreenError(error) {
74 | console.log(error);
75 | }
76 |
77 | document.addEventListener('fullscreenerror', logFullscreenError, false);
78 | document.addEventListener('mozfullscreenerror', logFullscreenError, false);
79 | document.addEventListener('webkitfullscreenerror', logFullscreenError, false);
80 | document.addEventListener('MSFullscreenError', logFullscreenError, false);
81 |
--------------------------------------------------------------------------------
/src/js/ui/welcome.js:
--------------------------------------------------------------------------------
1 | import { isNewMinorVersion, recordCurrentVersion } from '../tools/version';
2 |
3 | // Redux
4 | import store from '../store';
5 | import { SHOW_MODAL } from '../store/actions';
6 |
7 | export function showWelcomeScreen() {
8 | const persistence = store.getState().persistence;
9 |
10 | if (!persistence) return;
11 |
12 | if (persistence.welcomeScreenDismissed === false) {
13 | store.dispatch({
14 | type: SHOW_MODAL,
15 | modalType: 'WELCOME',
16 | priority: 100, // Display above error modals
17 | });
18 | } else if (isNewMinorVersion() === true) {
19 | store.dispatch({
20 | type: SHOW_MODAL,
21 | modalType: 'WHATS_NEW',
22 | priority: 100, // Display above error modals
23 | });
24 | }
25 |
26 | recordCurrentVersion();
27 | }
28 |
--------------------------------------------------------------------------------
/src/js/version.json:
--------------------------------------------------------------------------------
1 | {
2 | "v": "0.8.1"
3 | }
4 |
--------------------------------------------------------------------------------
/test/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "mocha": true
4 | },
5 | "rules": {
6 | // Test dependencies are allowed to be in devDependencies
7 | "import/no-extraneous-dependencies": [2, {
8 | "devDependencies": true
9 | }],
10 | // These are sometimes annoying
11 | "prefer-template": "warn",
12 | "arrow-body-style": "warn"
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/test/components/Icon.spec.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { assert } from 'chai';
3 | import { shallow } from 'enzyme';
4 |
5 | import Icon from '../../src/js/components/Icon';
6 |
7 | describe('
', () => {
8 | it('creates an
element', () => {
9 | assert.isTrue(shallow().is('i'));
10 | });
11 |
12 | it('passes through a class for the `type` prop', () => {
13 | assert.isTrue(shallow().contains());
14 | });
15 |
16 | it('set the active class when `active` is true', () => {
17 | assert.isTrue(shallow().contains());
18 | });
19 | });
20 |
--------------------------------------------------------------------------------
/test/helpers.spec.js:
--------------------------------------------------------------------------------
1 | import { assert } from 'chai';
2 | import { prependProtocolToUrl } from '../src/js/tools/helpers';
3 |
4 | describe('Helpers', () => {
5 | describe('prependProtocolToUrl()', () => {
6 | it('makes a protocol-less url protocol-relative', () => {
7 | const test1 = 'mapzen.com/carto/refill-style/2.0/refill-style.yaml';
8 | const test2 = 'api.github.com/gists/f00bar';
9 | const test3 = 'localhost:8000/scene.yaml';
10 |
11 | assert.strictEqual(prependProtocolToUrl(test1), `//${test1}`);
12 | assert.strictEqual(prependProtocolToUrl(test2), `//${test2}`);
13 | assert.strictEqual(prependProtocolToUrl(test3), `//${test3}`);
14 | });
15 |
16 | it('ignores urls that already have a scheme', () => {
17 | const test1 = '//mapzen.com/carto/refill-style/2.0/refill-style.yaml';
18 | const test2 = 'https://mapzen.com/carto/refill-style/2.0/refill-style.yaml';
19 | const test3 = 'http://api.github.com/gists/f00bar';
20 | const test4 = 'file:///Users/user/Downloads/refill-style.yaml';
21 |
22 | assert.strictEqual(prependProtocolToUrl(test1), test1);
23 | assert.strictEqual(prependProtocolToUrl(test2), test2);
24 | assert.strictEqual(prependProtocolToUrl(test3), test3);
25 | assert.strictEqual(prependProtocolToUrl(test4), test4);
26 | });
27 |
28 | it('ignores blob urls', () => {
29 | const test1 = 'blob:http://mapzen.com/98fb542f-f3ef-4c31-9b1e-e1d5d0bc52dc';
30 |
31 | assert.strictEqual(prependProtocolToUrl(test1), test1);
32 | });
33 |
34 | it('ignores urls that should be relative links', () => {
35 | const test1 = 'data/scenes/blank.yaml';
36 | const test2 = 'foo.yaml';
37 | const test3 = '/foo.yaml';
38 | const test4 = './foo.yaml';
39 | const test5 = '../foo/bar.yaml';
40 | const test6 = 'foo.yaml?bar'; // Filename with query string (e.g. for cache-busting)
41 |
42 | assert.strictEqual(prependProtocolToUrl(test1), test1);
43 | assert.strictEqual(prependProtocolToUrl(test2), test2);
44 | assert.strictEqual(prependProtocolToUrl(test3), test3);
45 | assert.strictEqual(prependProtocolToUrl(test4), test4);
46 | assert.strictEqual(prependProtocolToUrl(test5), test5);
47 | assert.strictEqual(prependProtocolToUrl(test6), test6);
48 | });
49 | });
50 | });
51 |
--------------------------------------------------------------------------------
/test/karma.spec.js:
--------------------------------------------------------------------------------
1 | // Polyfills ES2015 features, like Promises, globally.
2 | // This only needs to be done once for the entire test environment.
3 | import 'babel-polyfill';
4 |
5 | import chai, { assert } from 'chai';
6 | import chaiAsPromised from 'chai-as-promised';
7 |
8 | chai.use(chaiAsPromised);
9 |
10 | describe('Karma test with Chai', () => {
11 | it('exposes the Chai assert method', () => {
12 | assert.isOk('everything', 'everything is ok');
13 | });
14 |
15 | it('works with ES6 fat arrow function', () => {
16 | assert.ok(true, 'this is ok');
17 | });
18 |
19 | it('extends assert with support for Promises', () => {
20 | return assert.eventually.equal(Promise.resolve(2 + 2), 4, 'This had better be true, eventually');
21 | });
22 | });
23 |
--------------------------------------------------------------------------------
/test/url-state.spec.js:
--------------------------------------------------------------------------------
1 | import 'url-search-params-polyfill'; // Polyfill for test environment
2 | import { assert } from 'chai';
3 | import { getQueryStringObject, getURLSearchParam, mergeParamObjectToQueryString } from '../src/js/tools/url-state';
4 |
5 | /* eslint-disable import/first */
6 | if (!window.URLSearchParams) {
7 | window.URLSearchParams = URLSearchParams;
8 | }
9 |
10 | describe('URL query parameters management', () => {
11 | describe('getQueryStringObject()', () => {
12 | it('returns an empty object when page has no search params', () => {
13 | const search = '';
14 | const obj = getQueryStringObject(search);
15 | assert.isObject(obj);
16 | assert.deepEqual(obj, {});
17 | });
18 |
19 | it('returns an object for search params', () => {
20 | const search = '?scene=foo.yaml&debug=true';
21 | const obj = getQueryStringObject(search);
22 | assert.deepEqual(obj, {
23 | scene: 'foo.yaml',
24 | debug: 'true', // Expect string, not Boolean type
25 | });
26 | });
27 | });
28 |
29 | describe('getURLSearchParam()', () => {
30 | it('returns a string value when a requested param is present', () => {
31 | const search = '?scene=foo.yaml&debug=true';
32 | const value = getURLSearchParam('debug', search);
33 | assert.equal(value, 'true');
34 | });
35 |
36 | it('returns undefined when a requested param is not present', () => {
37 | const search = '?scene=foo.yaml';
38 | const value = getURLSearchParam('debug', search);
39 | assert.isNull(value);
40 | });
41 | });
42 |
43 | describe('mergeParamObjectToQueryString()', () => {
44 | it('merges an object to existing query string', () => {
45 | const search = '?scene=foo.yaml';
46 | const obj = {
47 | debug: 'true',
48 | };
49 | const result = mergeParamObjectToQueryString(obj, search);
50 | assert.equal(result, '?scene=foo.yaml&debug=true');
51 | });
52 |
53 | it('overwrites properties of existing query string', () => {
54 | const search = '?scene=foo.yaml&debug=true';
55 | const obj = {
56 | lib: 'tangram2.js',
57 | scene: 'bar.yaml',
58 | };
59 | const result = mergeParamObjectToQueryString(obj, search);
60 | // Test assumes property order is predictable
61 | assert.equal(result, '?scene=bar.yaml&debug=true&lib=tangram2.js');
62 | });
63 |
64 | it('creates a query string if previously empty', () => {
65 | const search = '';
66 | const obj = {
67 | lib: 'tangram2.js',
68 | scene: 'bar.yaml',
69 | };
70 | const result = mergeParamObjectToQueryString(obj, search);
71 | // Test assumes property order is predictable
72 | assert.equal(result, '?lib=tangram2.js&scene=bar.yaml');
73 | });
74 | });
75 | });
76 |
--------------------------------------------------------------------------------
/test/version.spec.js:
--------------------------------------------------------------------------------
1 | import { assert } from 'chai';
2 | import { parseVersionString, isNewMinorVersion } from '../src/js/tools/version';
3 |
4 | describe('Version tools', () => {
5 | describe('parseVersionString()', () => {
6 | it('returns an object for a version string (1)', () => {
7 | const obj = parseVersionString('0.5.0');
8 | const test = {
9 | major: 0,
10 | minor: 5,
11 | patch: 0,
12 | };
13 |
14 | assert.deepEqual(obj, test);
15 | });
16 |
17 | it('returns an object for a version string (2)', () => {
18 | const obj = parseVersionString('4.23.145');
19 | const test = {
20 | major: 4,
21 | minor: 23,
22 | patch: 145,
23 | };
24 |
25 | assert.deepEqual(obj, test);
26 | });
27 | });
28 |
29 | describe('isNewMinorVersion()', () => {
30 | it('returns true if current version is higher than previous version', () => {
31 | const bool1 = isNewMinorVersion('1.0.0', '0.5.0'); // Major higher, minor higher
32 | const bool2 = isNewMinorVersion('1.0.0', '0.0.10'); // Major higher, patch higher
33 | const bool3 = isNewMinorVersion('2.0.0', '1.0.0'); // Major higher only
34 | const bool4 = isNewMinorVersion('1.1.0', '1.0.0'); // Minor higher only
35 | assert.isTrue(bool1);
36 | assert.isTrue(bool2);
37 | assert.isTrue(bool3);
38 | assert.isTrue(bool4);
39 | });
40 |
41 | it('returns false if only patch version is newer', () => {
42 | const bool = isNewMinorVersion('1.1.5', '1.1.0');
43 | assert.isFalse(bool);
44 | });
45 |
46 | it('returns false if current version is equal to previous version', () => {
47 | const bool = isNewMinorVersion('1.2.0', '1.2.0');
48 | assert.isFalse(bool);
49 | });
50 |
51 | it('returns false if current version is less than previous version', () => {
52 | const bool1 = isNewMinorVersion('1.1.0', '2.1.0'); // Major only
53 | const bool2 = isNewMinorVersion('1.1.0', '1.2.0'); // Minor only
54 | const bool3 = isNewMinorVersion('1.1.0', '1.1.2'); // Patch only
55 | assert.isFalse(bool1);
56 | assert.isFalse(bool2);
57 | assert.isFalse(bool3);
58 | });
59 |
60 | it('reads version.json', () => {
61 | const bool1 = isNewMinorVersion();
62 | const bool2 = isNewMinorVersion(undefined, '0.4.9');
63 | const bool3 = isNewMinorVersion(undefined, '999.0.0');
64 | assert.isTrue(bool1);
65 | assert.isTrue(bool2);
66 | assert.isFalse(bool3);
67 | });
68 | });
69 | });
70 |
--------------------------------------------------------------------------------