From 31c44685ed47602272471a6823c8801020f39eb9 Mon Sep 17 00:00:00 2001 From: Colleen Date: Fri, 7 Oct 2016 00:17:01 -0700 Subject: [PATCH 01/13] create fullscreen example and control --- debug/index.html | 89 +++++++++++++++++++ dist/mapbox-gl.css | 5 +- .../examples/3400-01-28-fullscreen.html | 22 +++++ js/ui/control/fullscreen.js | 41 +++++++++ src/index.js | 1 + 5 files changed, 157 insertions(+), 1 deletion(-) create mode 100644 docs/_posts/examples/3400-01-28-fullscreen.html create mode 100644 js/ui/control/fullscreen.js diff --git a/debug/index.html b/debug/index.html index 9c7f3bb641c..b1257ba65d7 100644 --- a/debug/index.html +++ b/debug/index.html @@ -26,6 +26,95 @@ hash: true }); +map.addControl(new mapboxgl.NavigationControl()); +map.addControl(new mapboxgl.GeolocateControl()); +map.addControl(new mapboxgl.ScaleControl()); + +map.on('load', function() { + map.addSource('geojson', { + "type": "geojson", + "data": "/node_modules/mapbox-gl-test-suite/data/linestring.geojson" + }); + + map.addLayer({ + "id": "route", + "type": "line", + "source": "geojson", + "paint": { + "line-color": "#EC8D8D", + "line-width": { + "base": 1.5, + "stops": [ + [ + 5, + 0.75 + ], + [ + 18, + 32 + ] + ] + } + } + }, 'country-label-lg'); + + var bufferTimes = {}; + map.on('tile.stats', function(bufferTimes) { + var _stats = []; + for (var name in bufferTimes) { + var value = Math.round(bufferTimes[name]); + if (isNaN(value)) continue; + var width = value; + _stats.push({name: name, value: value, width: width}); + } + _stats = _stats.sort(function(a, b) { return b.value - a.value }).slice(0, 10); + + var html = ''; + for (var i in _stats) { + html += '
' + _stats[i].value + 'ms - ' + _stats[i].name + '
'; + } + + document.getElementById('buffer').innerHTML = html; + }); +}); + +map.on('click', function(e) { + if (e.originalEvent.shiftKey) return; + (new mapboxgl.Popup()) + .setLngLat(map.unproject(e.point)) + .setHTML("

Hello World!

") + .addTo(map); +}); + +document.getElementById('show-tile-boundaries-checkbox').onclick = function() { + map.showTileBoundaries = !!this.checked; +}; + +document.getElementById('show-symbol-collision-boxes-checkbox').onclick = function() { + map.showCollisionBoxes = !!this.checked; +}; + +document.getElementById('show-overdraw-checkbox').onclick = function() { + map.showOverdrawInspector = !!this.checked; +}; + +document.getElementById('buffer-checkbox').onclick = function() { + document.getElementById('buffer').style.display = this.checked ? 'block' : 'none'; +}; + +document.getElementById('pitch-checkbox').onclick = function() { + map.dragRotate._pitchWithRotate = !!this.checked; +}; + +// keyboard shortcut for comparing rendering with Mapbox GL native +document.onkeypress = function(e) { + if (e.charCode === 111 && !e.shiftKey && !e.metaKey && !e.altKey) { + var center = map.getCenter(); + location.href = "mapboxgl://?center=" + center.lat + "," + center.lng + "&zoom=" + map.getZoom() + "&bearing=" + map.getBearing(); + return false; + } +}; + diff --git a/dist/mapbox-gl.css b/dist/mapbox-gl.css index f8306088edb..bad688366c0 100644 --- a/dist/mapbox-gl.css +++ b/dist/mapbox-gl.css @@ -85,7 +85,10 @@ .mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.watching { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0D%0A%20%20%3Cpath%20style%3D%27fill%3A%2300f%3B%27%20d%3D%27M10%204C9%204%209%205%209%205L9%205.1A5%205%200%200%200%205.1%209L5%209C5%209%204%209%204%2010%204%2011%205%2011%205%2011L5.1%2011A5%205%200%200%200%209%2014.9L9%2015C9%2015%209%2016%2010%2016%2011%2016%2011%2015%2011%2015L11%2014.9A5%205%200%200%200%2014.9%2011L15%2011C15%2011%2016%2011%2016%2010%2016%209%2015%209%2015%209L14.9%209A5%205%200%200%200%2011%205.1L11%205C11%205%2011%204%2010%204zM10%206.5A3.5%203.5%200%200%201%2013.5%2010%203.5%203.5%200%200%201%2010%2013.5%203.5%203.5%200%200%201%206.5%2010%203.5%203.5%200%200%201%2010%206.5zM10%208.3A1.8%201.8%200%200%200%208.3%2010%201.8%201.8%200%200%200%2010%2011.8%201.8%201.8%200%200%200%2011.8%2010%201.8%201.8%200%200%200%2010%208.3z%27%20%2F%3E%0D%0A%3C%2Fsvg%3E"); } - +.mapboxgl-ctrl-icon.mapboxgl-ctrl-fullscreen { + padding: 5px; + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%%3Cpath%20d=%27M%205%204%20C%204.5%204%204%204.5%204%205%20L%204%206%20L%204%209%20L%204.5%209%20L%205.7773438%207.296875%20C%206.7771319%208.0602131%207.835765%208.9565728%208.890625%2010%20C%207.8257121%2011.0633%206.7761791%2011.951675%205.78125%2012.707031%20L%204.5%2011%20L%204%2011%20L%204%2015%20C%204%2015.5%204.5%2016%205%2016%20L%209%2016%20L%209%2015.5%20L%207.2734375%2014.205078%20C%208.0428931%2013.187886%208.9395441%2012.133481%209.9609375%2011.068359%20C%2011.042371%2012.14699%2011.942093%2013.2112%2012.707031%2014.21875%20L%2011%2015.5%20L%2011%2016%20L%2014%2016%20L%2015%2016%20C%2015.5%2016%2016%2015.5%2016%2015%20L%2016%2014%20L%2016%2011%20L%2015.5%2011%20L%2014.205078%2012.726562%20C%2013.177985%2011.949617%2012.112718%2011.043577%2011.037109%2010.009766%20C%2012.151856%208.981061%2013.224345%208.0798624%2014.228516%207.3046875%20L%2015.5%209%20L%2016%209%20L%2016%205%20C%2016%204.5%2015.5%204%2015%204%20L%2011%204%20L%2011%204.5%20L%2012.703125%205.7773438%20C%2011.932647%206.7864834%2011.026693%207.8554712%209.9707031%208.9199219%20C%208.9584739%207.8204943%208.0698767%206.7627188%207.3046875%205.7714844%20L%209%204.5%20L%209%204%20L%206%204%20L%205%204%20z%20%27%2F%3E%3C%2Fsvg%3E"); +} .mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > span.arrow { width: 20px; height: 20px; diff --git a/docs/_posts/examples/3400-01-28-fullscreen.html b/docs/_posts/examples/3400-01-28-fullscreen.html new file mode 100644 index 00000000000..8e75aedbc8d --- /dev/null +++ b/docs/_posts/examples/3400-01-28-fullscreen.html @@ -0,0 +1,22 @@ +--- +layout: example +category: example +title: View a fullscreen map +description: Toggle between current view and fullscreen mode +tags: + - controls-and-overlays +--- + +
+ + diff --git a/js/ui/control/fullscreen.js b/js/ui/control/fullscreen.js new file mode 100644 index 00000000000..07f52db24a2 --- /dev/null +++ b/js/ui/control/fullscreen.js @@ -0,0 +1,41 @@ +'use strict'; + +var Control = require('./control'); +var browser = require('../../util/browser'); +var DOM = require('../../util/dom'); +var util = require('../../util/util'); +var window = require('../../util/window'); + +module.exports = Fullscreen; + +function Fullscreen(options) { + util.setOptions(this, options); +} + +Fullscreen.prototype = util.inherit(Control, { + options: { + position: 'top-left' + }, + + onAdd: function(map) { + var className = 'mapboxgl-ctrl'; + var container = this._container = DOM.create('div', className + '-group', map.getContainer()); + + this._fullscreenButton = DOM.create('button', (className + '-icon ' + className + '-fullscreen'), this._container); + this._fullscreenButton.type = 'button'; + this._fullscreenButton.addEventListener('click', this._onClickFullscreen.bind(this)); + return container; + }, + + _onClickFullscreen: function() { + var mapContainer = map.getContainer(); + if (mapContainer.requestFullscreen) { + mapContainer.requestFullscreen(); + } else if (mapContainer.mozRequestFullScreen) { + mapContainer.mozRequestFullScreen(); + } else if (mapContainer.webkitRequestFullscreen) { + mapContainer.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); + } else { + } + } +}); diff --git a/src/index.js b/src/index.js index 9d254b6c6a7..dcdf5fadabf 100644 --- a/src/index.js +++ b/src/index.js @@ -15,6 +15,7 @@ mapboxgl.AttributionControl = require('./ui/control/attribution_control'); mapboxgl.ScaleControl = require('./ui/control/scale_control'); mapboxgl.Popup = require('./ui/popup'); mapboxgl.Marker = require('./ui/marker'); +mapboxgl.Fullscreen = require('./ui/control/fullscreen'); mapboxgl.Style = require('./style/style'); From 610970c2c739ee5e9a6517f0b1921edade1f2929 Mon Sep 17 00:00:00 2001 From: Colleen Date: Mon, 17 Oct 2016 14:19:26 -0700 Subject: [PATCH 02/13] add fullscreen control --- dist/mapbox-gl.css | 8 ++++++++ docs/_posts/examples/3400-01-28-fullscreen.html | 1 + js/ui/control/fullscreen.js | 4 ++++ 3 files changed, 13 insertions(+) diff --git a/dist/mapbox-gl.css b/dist/mapbox-gl.css index bad688366c0..b3157a36f1f 100644 --- a/dist/mapbox-gl.css +++ b/dist/mapbox-gl.css @@ -309,3 +309,11 @@ a.mapboxgl-ctrl-logo { display:none; } } +.pseudo-fullscreen { + position:fixed!important; + width:100%!important; + height:100%!important; + top:0!important; + left:0!important; + z-index:99999; +} diff --git a/docs/_posts/examples/3400-01-28-fullscreen.html b/docs/_posts/examples/3400-01-28-fullscreen.html index 8e75aedbc8d..2b1a5372548 100644 --- a/docs/_posts/examples/3400-01-28-fullscreen.html +++ b/docs/_posts/examples/3400-01-28-fullscreen.html @@ -20,3 +20,4 @@ var fullscreen = new mapboxgl.Fullscreen({position: 'top-left' }); map.addControl(fullscreen); + diff --git a/js/ui/control/fullscreen.js b/js/ui/control/fullscreen.js index 07f52db24a2..8a1834471b7 100644 --- a/js/ui/control/fullscreen.js +++ b/js/ui/control/fullscreen.js @@ -36,6 +36,10 @@ Fullscreen.prototype = util.inherit(Control, { } else if (mapContainer.webkitRequestFullscreen) { mapContainer.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); } else { + // mapContainer.addClass('pseudo-fullscreen'); + // this.invalidateSize(); + // this._isFullscreen = true; + // this.fire('fullscreenchange'); } } }); From 42055053d8c08d7b61dd8a69a0ab1d0afe005f96 Mon Sep 17 00:00:00 2001 From: Colleen Date: Mon, 17 Oct 2016 19:19:11 -0700 Subject: [PATCH 03/13] toggle fullscreen --- dist/mapbox-gl.css | 6 ++- .../examples/3400-01-28-fullscreen.html | 4 +- js/ui/control/fullscreen.js | 40 +++++++++++++------ 3 files changed, 35 insertions(+), 15 deletions(-) diff --git a/dist/mapbox-gl.css b/dist/mapbox-gl.css index b3157a36f1f..6ecb128bfe2 100644 --- a/dist/mapbox-gl.css +++ b/dist/mapbox-gl.css @@ -87,7 +87,11 @@ } .mapboxgl-ctrl-icon.mapboxgl-ctrl-fullscreen { padding: 5px; - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%%3Cpath%20d=%27M%205%204%20C%204.5%204%204%204.5%204%205%20L%204%206%20L%204%209%20L%204.5%209%20L%205.7773438%207.296875%20C%206.7771319%208.0602131%207.835765%208.9565728%208.890625%2010%20C%207.8257121%2011.0633%206.7761791%2011.951675%205.78125%2012.707031%20L%204.5%2011%20L%204%2011%20L%204%2015%20C%204%2015.5%204.5%2016%205%2016%20L%209%2016%20L%209%2015.5%20L%207.2734375%2014.205078%20C%208.0428931%2013.187886%208.9395441%2012.133481%209.9609375%2011.068359%20C%2011.042371%2012.14699%2011.942093%2013.2112%2012.707031%2014.21875%20L%2011%2015.5%20L%2011%2016%20L%2014%2016%20L%2015%2016%20C%2015.5%2016%2016%2015.5%2016%2015%20L%2016%2014%20L%2016%2011%20L%2015.5%2011%20L%2014.205078%2012.726562%20C%2013.177985%2011.949617%2012.112718%2011.043577%2011.037109%2010.009766%20C%2012.151856%208.981061%2013.224345%208.0798624%2014.228516%207.3046875%20L%2015.5%209%20L%2016%209%20L%2016%205%20C%2016%204.5%2015.5%204%2015%204%20L%2011%204%20L%2011%204.5%20L%2012.703125%205.7773438%20C%2011.932647%206.7864834%2011.026693%207.8554712%209.9707031%208.9199219%20C%208.9584739%207.8204943%208.0698767%206.7627188%207.3046875%205.7714844%20L%209%204.5%20L%209%204%20L%206%204%20L%205%204%20z%20%27%2F%3E%3C%2Fsvg%3E"); + background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4KCjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0iTGF5ZXJfMSIKICAgeD0iMHB4IgogICB5PSIwcHgiCiAgIHZpZXdCb3g9IjAgMCAyMCAyMCIKICAgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAgMjA7IgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxIHIxMzcyNSIKICAgc29kaXBvZGk6ZG9jbmFtZT0iZnVsbHNjcmVlbi5zdmciPjxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTQxODUiPjxyZGY6UkRGPjxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj48ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD48ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PGRjOnRpdGxlPjwvZGM6dGl0bGU+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxkZWZzCiAgICAgaWQ9ImRlZnM0MTgzIiAvPjxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiCiAgICAgYm9yZGVyb3BhY2l0eT0iMSIKICAgICBvYmplY3R0b2xlcmFuY2U9IjEwIgogICAgIGdyaWR0b2xlcmFuY2U9IjEwIgogICAgIGd1aWRldG9sZXJhbmNlPSIxMCIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMCIKICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTQ3MSIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSI2OTUiCiAgICAgaWQ9Im5hbWVkdmlldzQxODEiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGlua3NjYXBlOnpvb209IjExLjMxMzcwOCIKICAgICBpbmtzY2FwZTpjeD0iMTQuNjk4MjgiCiAgICAgaW5rc2NhcGU6Y3k9IjEwLjUyNjY4OSIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iNjk3IgogICAgIGlua3NjYXBlOndpbmRvdy15PSIyOTgiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMCIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJMYXllcl8xIgogICAgIGlua3NjYXBlOnNuYXAtYmJveD0idHJ1ZSIKICAgICBpbmtzY2FwZTpiYm94LXBhdGhzPSJ0cnVlIgogICAgIGlua3NjYXBlOm9iamVjdC1wYXRocz0idHJ1ZSIKICAgICBpbmtzY2FwZTpiYm94LW5vZGVzPSJ0cnVlIgogICAgIGlua3NjYXBlOm9iamVjdC1ub2Rlcz0idHJ1ZSI+PGlua3NjYXBlOmdyaWQKICAgICAgIHR5cGU9Inh5Z3JpZCIKICAgICAgIGlkPSJncmlkNjA3NiIgLz48L3NvZGlwb2RpOm5hbWVkdmlldz48cGF0aAogICAgIGQ9Ik0gNSA0IEMgNC41IDQgNCA0LjUgNCA1IEwgNCA2IEwgNCA5IEwgNC41IDkgTCA1Ljc3NzM0MzggNy4yOTY4NzUgQyA2Ljc3NzEzMTkgOC4wNjAyMTMxIDcuODM1NzY1IDguOTU2NTcyOCA4Ljg5MDYyNSAxMCBDIDcuODI1NzEyMSAxMS4wNjMzIDYuNzc2MTc5MSAxMS45NTE2NzUgNS43ODEyNSAxMi43MDcwMzEgTCA0LjUgMTEgTCA0IDExIEwgNCAxNSBDIDQgMTUuNSA0LjUgMTYgNSAxNiBMIDkgMTYgTCA5IDE1LjUgTCA3LjI3MzQzNzUgMTQuMjA1MDc4IEMgOC4wNDI4OTMxIDEzLjE4Nzg4NiA4LjkzOTU0NDEgMTIuMTMzNDgxIDkuOTYwOTM3NSAxMS4wNjgzNTkgQyAxMS4wNDIzNzEgMTIuMTQ2OTkgMTEuOTQyMDkzIDEzLjIxMTIgMTIuNzA3MDMxIDE0LjIxODc1IEwgMTEgMTUuNSBMIDExIDE2IEwgMTQgMTYgTCAxNSAxNiBDIDE1LjUgMTYgMTYgMTUuNSAxNiAxNSBMIDE2IDE0IEwgMTYgMTEgTCAxNS41IDExIEwgMTQuMjA1MDc4IDEyLjcyNjU2MiBDIDEzLjE3Nzk4NSAxMS45NDk2MTcgMTIuMTEyNzE4IDExLjA0MzU3NyAxMS4wMzcxMDkgMTAuMDA5NzY2IEMgMTIuMTUxODU2IDguOTgxMDYxIDEzLjIyNDM0NSA4LjA3OTg2MjQgMTQuMjI4NTE2IDcuMzA0Njg3NSBMIDE1LjUgOSBMIDE2IDkgTCAxNiA1IEMgMTYgNC41IDE1LjUgNCAxNSA0IEwgMTEgNCBMIDExIDQuNSBMIDEyLjcwMzEyNSA1Ljc3NzM0MzggQyAxMS45MzI2NDcgNi43ODY0ODM0IDExLjAyNjY5MyA3Ljg1NTQ3MTIgOS45NzA3MDMxIDguOTE5OTIxOSBDIDguOTU4NDczOSA3LjgyMDQ5NDMgOC4wNjk4NzY3IDYuNzYyNzE4OCA3LjMwNDY4NzUgNS43NzE0ODQ0IEwgOSA0LjUgTCA5IDQgTCA2IDQgTCA1IDQgeiAiCiAgICAgaWQ9InBhdGg0MTY5IiAvPjwvc3ZnPg=="); +} +.mapboxgl-ctrl-icon.mapboxgl-ctrl-shrink { + padding: 5px; + background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4KCjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0iTGF5ZXJfMSIKICAgeD0iMHB4IgogICB5PSIwcHgiCiAgIHZpZXdCb3g9IjAgMCAyMCAyMCIKICAgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAgMjA7IgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxIHIxMzcyNSIKICAgc29kaXBvZGk6ZG9jbmFtZT0ic2hyaW5rLnN2ZyI+PG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhMTkiPjxyZGY6UkRGPjxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj48ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD48ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PGRjOnRpdGxlPjwvZGM6dGl0bGU+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxkZWZzCiAgICAgaWQ9ImRlZnMxNyIgLz48c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICAgIGJvcmRlcm9wYWNpdHk9IjEiCiAgICAgb2JqZWN0dG9sZXJhbmNlPSIxMCIKICAgICBncmlkdG9sZXJhbmNlPSIxMCIKICAgICBndWlkZXRvbGVyYW5jZT0iMTAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjIwMjEiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iOTA4IgogICAgIGlkPSJuYW1lZHZpZXcxNSIKICAgICBzaG93Z3JpZD0iZmFsc2UiCiAgICAgaW5rc2NhcGU6em9vbT0iMSIKICAgICBpbmtzY2FwZTpjeD0iNC45NTAxMDgyIgogICAgIGlua3NjYXBlOmN5PSIxMC44NTQ3NDciCiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMCIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJMYXllcl8xIgogICAgIGlua3NjYXBlOnNuYXAtYmJveD0idHJ1ZSIKICAgICBpbmtzY2FwZTpiYm94LXBhdGhzPSJ0cnVlIgogICAgIGlua3NjYXBlOnNuYXAtYmJveC1lZGdlLW1pZHBvaW50cz0idHJ1ZSIKICAgICBpbmtzY2FwZTpiYm94LW5vZGVzPSJ0cnVlIgogICAgIGlua3NjYXBlOnNuYXAtYmJveC1taWRwb2ludHM9InRydWUiCiAgICAgaW5rc2NhcGU6b2JqZWN0LXBhdGhzPSJ0cnVlIgogICAgIGlua3NjYXBlOm9iamVjdC1ub2Rlcz0idHJ1ZSI+PGlua3NjYXBlOmdyaWQKICAgICAgIHR5cGU9Inh5Z3JpZCIKICAgICAgIGlkPSJncmlkNDE0NyIgLz48L3NvZGlwb2RpOm5hbWVkdmlldz48cGF0aAogICAgIHN0eWxlPSJmaWxsOiMwMDAwMDAiCiAgICAgZD0iTSA0LjI0MjE4NzUgMy40OTIxODc1IEEgMC43NTAwNzUgMC43NTAwNzUgMCAwIDAgMy43MTg3NSA0Ljc4MTI1IEwgNS45NjQ4NDM4IDcuMDI3MzQzOCBMIDQgOC41IEwgNCA5IEwgOCA5IEMgOC41MDAwMDEgOC45OTk5OTg4IDkgOC40OTk5OTkyIDkgOCBMIDkgNCBMIDguNSA0IEwgNy4wMTc1NzgxIDUuOTU1MDc4MSBMIDQuNzgxMjUgMy43MTg3NSBBIDAuNzUwMDc1IDAuNzUwMDc1IDAgMCAwIDQuMjQyMTg3NSAzLjQ5MjE4NzUgeiBNIDE1LjczNDM3NSAzLjQ5MjE4NzUgQSAwLjc1MDA3NSAwLjc1MDA3NSAwIDAgMCAxNS4yMTg3NSAzLjcxODc1IEwgMTIuOTg0Mzc1IDUuOTUzMTI1IEwgMTEuNSA0IEwgMTEgNCBMIDExIDggQyAxMSA4LjQ5OTk5OTIgMTEuNDk5OTk5IDguOTk5OTk4OCAxMiA5IEwgMTYgOSBMIDE2IDguNSBMIDE0LjAzNTE1NiA3LjAyNzM0MzggTCAxNi4yODEyNSA0Ljc4MTI1IEEgMC43NTAwNzUgMC43NTAwNzUgMCAwIDAgMTUuNzM0Mzc1IDMuNDkyMTg3NSB6IE0gNCAxMSBMIDQgMTEuNSBMIDUuOTY0ODQzOCAxMi45NzI2NTYgTCAzLjcxODc1IDE1LjIxODc1IEEgMC43NTEzMDA5NiAwLjc1MTMwMDk2IDAgMSAwIDQuNzgxMjUgMTYuMjgxMjUgTCA3LjAyNzM0MzggMTQuMDM1MTU2IEwgOC41IDE2IEwgOSAxNiBMIDkgMTIgQyA5IDExLjUwMDAwMSA4LjUwMDAwMSAxMS4wMDAwMDEgOCAxMSBMIDQgMTEgeiBNIDEyIDExIEMgMTEuNDk5OTk5IDExLjAwMDAwMSAxMSAxMS41MDAwMDEgMTEgMTIgTCAxMSAxNiBMIDExLjUgMTYgTCAxMi45NzI2NTYgMTQuMDM1MTU2IEwgMTUuMjE4NzUgMTYuMjgxMjUgQSAwLjc1MTMwMDk2IDAuNzUxMzAwOTYgMCAxIDAgMTYuMjgxMjUgMTUuMjE4NzUgTCAxNC4wMzUxNTYgMTIuOTcyNjU2IEwgMTYgMTEuNSBMIDE2IDExIEwgMTIgMTEgeiAiCiAgICAgaWQ9InBhdGg3IiAvPjwvc3ZnPg=="); } .mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > span.arrow { width: 20px; diff --git a/docs/_posts/examples/3400-01-28-fullscreen.html b/docs/_posts/examples/3400-01-28-fullscreen.html index 2b1a5372548..0dc9f50182e 100644 --- a/docs/_posts/examples/3400-01-28-fullscreen.html +++ b/docs/_posts/examples/3400-01-28-fullscreen.html @@ -13,8 +13,8 @@ var map = new mapboxgl.Map({ container: 'map', // container id style: 'mapbox://styles/mapbox/outdoors-v9', //stylesheet location - center: [11.294,43.807], // starting position - zoom: 12 // starting zoom + center: [11.255,43.77], // starting position + zoom: 13 // starting zoom }); var fullscreen = new mapboxgl.Fullscreen({position: 'top-left' }); diff --git a/js/ui/control/fullscreen.js b/js/ui/control/fullscreen.js index 8a1834471b7..0c0d3f9f02e 100644 --- a/js/ui/control/fullscreen.js +++ b/js/ui/control/fullscreen.js @@ -20,26 +20,42 @@ Fullscreen.prototype = util.inherit(Control, { onAdd: function(map) { var className = 'mapboxgl-ctrl'; var container = this._container = DOM.create('div', className + '-group', map.getContainer()); - - this._fullscreenButton = DOM.create('button', (className + '-icon ' + className + '-fullscreen'), this._container); + var button = this._fullscreenButton = DOM.create('button', (className + '-icon ' + className + '-fullscreen'), this._container); + button.id = 'fullscreen-button' this._fullscreenButton.type = 'button'; this._fullscreenButton.addEventListener('click', this._onClickFullscreen.bind(this)); return container; }, + isFullscreen: function () { + return this._isFullscreen || false; + }, + _onClickFullscreen: function() { var mapContainer = map.getContainer(); - if (mapContainer.requestFullscreen) { - mapContainer.requestFullscreen(); - } else if (mapContainer.mozRequestFullScreen) { - mapContainer.mozRequestFullScreen(); - } else if (mapContainer.webkitRequestFullscreen) { - mapContainer.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); + var button = document.getElementById('fullscreen-button'); + var className = 'mapboxgl-ctrl'; + if (window.innerHeight == screen.height) { + button.classList.remove(className + '-shrink'); + button.classList.add(className + '-fullscreen'); + if (document.exitFullscreen) { + document.exitFullscreen(); + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen(); + } else { + document.webkitCancelFullScreen(); + } } else { - // mapContainer.addClass('pseudo-fullscreen'); - // this.invalidateSize(); - // this._isFullscreen = true; - // this.fire('fullscreenchange'); + button.classList.remove(className + '-fullscreen'); + button.classList.add(className + '-shrink'); + if (mapContainer.requestFullscreen) { + mapContainer.requestFullscreen(); + } else if (mapContainer.mozRequestFullScreen) { + mapContainer.mozRequestFullScreen(); + } else { + mapContainer.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); + } } + } }); From f242685559aea415e9005e76dbdc58da82d10467 Mon Sep 17 00:00:00 2001 From: Colleen Date: Mon, 17 Oct 2016 20:40:27 -0700 Subject: [PATCH 04/13] clean up code --- docs/_posts/examples/3400-01-28-fullscreen.html | 2 +- js/ui/control/fullscreen.js | 12 +++++------- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/docs/_posts/examples/3400-01-28-fullscreen.html b/docs/_posts/examples/3400-01-28-fullscreen.html index 0dc9f50182e..5593ccc9612 100644 --- a/docs/_posts/examples/3400-01-28-fullscreen.html +++ b/docs/_posts/examples/3400-01-28-fullscreen.html @@ -13,7 +13,7 @@ var map = new mapboxgl.Map({ container: 'map', // container id style: 'mapbox://styles/mapbox/outdoors-v9', //stylesheet location - center: [11.255,43.77], // starting position + center: [11.255, 43.77], // starting position zoom: 13 // starting zoom }); diff --git a/js/ui/control/fullscreen.js b/js/ui/control/fullscreen.js index 0c0d3f9f02e..d492a8f86ec 100644 --- a/js/ui/control/fullscreen.js +++ b/js/ui/control/fullscreen.js @@ -1,7 +1,6 @@ 'use strict'; var Control = require('./control'); -var browser = require('../../util/browser'); var DOM = require('../../util/dom'); var util = require('../../util/util'); var window = require('../../util/window'); @@ -21,7 +20,7 @@ Fullscreen.prototype = util.inherit(Control, { var className = 'mapboxgl-ctrl'; var container = this._container = DOM.create('div', className + '-group', map.getContainer()); var button = this._fullscreenButton = DOM.create('button', (className + '-icon ' + className + '-fullscreen'), this._container); - button.id = 'fullscreen-button' + button.id = 'fullscreen-button'; this._fullscreenButton.type = 'button'; this._fullscreenButton.addEventListener('click', this._onClickFullscreen.bind(this)); return container; @@ -35,16 +34,16 @@ Fullscreen.prototype = util.inherit(Control, { var mapContainer = map.getContainer(); var button = document.getElementById('fullscreen-button'); var className = 'mapboxgl-ctrl'; - if (window.innerHeight == screen.height) { + if (window.innerHeight === screen.height) { button.classList.remove(className + '-shrink'); button.classList.add(className + '-fullscreen'); - if (document.exitFullscreen) { + if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else { document.webkitCancelFullScreen(); - } + } } else { button.classList.remove(className + '-fullscreen'); button.classList.add(className + '-shrink'); @@ -56,6 +55,5 @@ Fullscreen.prototype = util.inherit(Control, { mapContainer.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); } } - } -}); +}); From 367662f3072ddec3d3b57e9ad99bf782569dddba Mon Sep 17 00:00:00 2001 From: Colleen Date: Fri, 11 Nov 2016 12:06:04 -0800 Subject: [PATCH 05/13] set height and width --- docs/_posts/examples/3400-01-28-fullscreen.html | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/docs/_posts/examples/3400-01-28-fullscreen.html b/docs/_posts/examples/3400-01-28-fullscreen.html index 5593ccc9612..a3ee4a12714 100644 --- a/docs/_posts/examples/3400-01-28-fullscreen.html +++ b/docs/_posts/examples/3400-01-28-fullscreen.html @@ -6,6 +6,12 @@ tags: - controls-and-overlays --- +
@@ -20,4 +26,3 @@ var fullscreen = new mapboxgl.Fullscreen({position: 'top-left' }); map.addControl(fullscreen); - From 6fefdbe141f7a1d1cf262b80eef1e129cbea979e Mon Sep 17 00:00:00 2001 From: Colleen Date: Mon, 23 Jan 2017 18:52:20 -0800 Subject: [PATCH 06/13] change icon on esc --- dist/mapbox-gl.css | 8 --- .../examples/3400-01-28-fullscreen.html | 11 +--- js/ui/control/fullscreen.js | 59 ----------------- js/ui/control/fullscreen_control.js | 65 +++++++++++++++++++ package.json | 2 +- src/index.js | 2 +- 6 files changed, 70 insertions(+), 77 deletions(-) delete mode 100644 js/ui/control/fullscreen.js create mode 100644 js/ui/control/fullscreen_control.js diff --git a/dist/mapbox-gl.css b/dist/mapbox-gl.css index 6ecb128bfe2..ff717384bc4 100644 --- a/dist/mapbox-gl.css +++ b/dist/mapbox-gl.css @@ -313,11 +313,3 @@ a.mapboxgl-ctrl-logo { display:none; } } -.pseudo-fullscreen { - position:fixed!important; - width:100%!important; - height:100%!important; - top:0!important; - left:0!important; - z-index:99999; -} diff --git a/docs/_posts/examples/3400-01-28-fullscreen.html b/docs/_posts/examples/3400-01-28-fullscreen.html index a3ee4a12714..ced2878701f 100644 --- a/docs/_posts/examples/3400-01-28-fullscreen.html +++ b/docs/_posts/examples/3400-01-28-fullscreen.html @@ -6,16 +6,11 @@ tags: - controls-and-overlays --- -
diff --git a/js/ui/control/fullscreen.js b/js/ui/control/fullscreen.js deleted file mode 100644 index d492a8f86ec..00000000000 --- a/js/ui/control/fullscreen.js +++ /dev/null @@ -1,59 +0,0 @@ -'use strict'; - -var Control = require('./control'); -var DOM = require('../../util/dom'); -var util = require('../../util/util'); -var window = require('../../util/window'); - -module.exports = Fullscreen; - -function Fullscreen(options) { - util.setOptions(this, options); -} - -Fullscreen.prototype = util.inherit(Control, { - options: { - position: 'top-left' - }, - - onAdd: function(map) { - var className = 'mapboxgl-ctrl'; - var container = this._container = DOM.create('div', className + '-group', map.getContainer()); - var button = this._fullscreenButton = DOM.create('button', (className + '-icon ' + className + '-fullscreen'), this._container); - button.id = 'fullscreen-button'; - this._fullscreenButton.type = 'button'; - this._fullscreenButton.addEventListener('click', this._onClickFullscreen.bind(this)); - return container; - }, - - isFullscreen: function () { - return this._isFullscreen || false; - }, - - _onClickFullscreen: function() { - var mapContainer = map.getContainer(); - var button = document.getElementById('fullscreen-button'); - var className = 'mapboxgl-ctrl'; - if (window.innerHeight === screen.height) { - button.classList.remove(className + '-shrink'); - button.classList.add(className + '-fullscreen'); - if (document.exitFullscreen) { - document.exitFullscreen(); - } else if (document.mozCancelFullScreen) { - document.mozCancelFullScreen(); - } else { - document.webkitCancelFullScreen(); - } - } else { - button.classList.remove(className + '-fullscreen'); - button.classList.add(className + '-shrink'); - if (mapContainer.requestFullscreen) { - mapContainer.requestFullscreen(); - } else if (mapContainer.mozRequestFullScreen) { - mapContainer.mozRequestFullScreen(); - } else { - mapContainer.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); - } - } - } -}); diff --git a/js/ui/control/fullscreen_control.js b/js/ui/control/fullscreen_control.js new file mode 100644 index 00000000000..41ae1addc5b --- /dev/null +++ b/js/ui/control/fullscreen_control.js @@ -0,0 +1,65 @@ +'use strict'; + +const DOM = require('../../util/dom'); +const util = require('../../util/util'); +const window = require('../../util/window'); + +class FullscreenControl { + + constructor() { + this._fullscreen = false; + util.bindAll([ + '_isFullscreen', + '_onClickFullscreen', + '_onKeyDown', + '_changeIcon' + ], this); + } + + onAdd(map) { + const className = 'mapboxgl-ctrl'; + const container = this._container = DOM.create('div', `${className} mapboxgl-ctrl-group`); + const button = this._fullscreenButton = DOM.create('button', (`${className}-icon ${className}-fullscreen`), this._container); + button.setAttribute("aria-label", "Toggle fullscreen"); + this._fullscreenButton.addEventListener('click', this._onClickFullscreen); + this._mapContainer = map.getContainer(); + window.document.addEventListener('webkitfullscreenchange', this._changeIcon); + return container; + } + + onRemove() { + this._container.parentNode.removeChild(this._container); + this._map = null; + } + + _isFullscreen() { + return this._fullscreen; + } + + _changeIcon() { + this._fullscreen = !this._fullscreen; + const className = 'mapboxgl-ctrl'; + this._fullscreenButton.classList.toggle(`${className}-shrink`); + this._fullscreenButton.classList.toggle(`${className}-fullscreen`); + } + + _onClickFullscreen() { + if (this._isFullscreen()) { + if (window.document.exitFullscreen) { + window.document.exitFullscreen(); + } else if (window.document.mozCancelFullScreen) { + window.document.mozCancelFullScreen(); + } else { + window.document.webkitCancelFullScreen(); + } + } else if (this._mapContainer.requestFullscreen) { + this._mapContainer.requestFullscreen(); + } else if (this._mapContainer.mozRequestFullScreen) { + this._mapContainer.mozRequestFullScreen(); + } else { + this._mapContainer.webkitRequestFullscreen(); + } + } +} + +module.exports = FullscreenControl; diff --git a/package.json b/package.json index a6ad10e92b2..a1d431cf01b 100644 --- a/package.json +++ b/package.json @@ -112,7 +112,7 @@ "build-docs": "flow-node docs/style-spec/_generate/generate.js && documentation build --github --format html --config documentation.yml --theme ./docs/_theme --output docs/api/", "build": "npm run build-docs # invoked by publisher when publishing docs on the mb-pages branch", "start-docs": "npm run build-min && npm run build-docs && jekyll serve --watch", - "lint": "eslint --ignore-path .gitignore js test bench docs/_posts/examples/*.html debug/*.html", + "lint": "eslint --fix --ignore-path .gitignore js test bench docs/_posts/examples/*.html debug/*.html", "lint-docs": "documentation lint", "open-changed-examples": "git diff --name-only mb-pages HEAD -- docs/_posts/examples/*.html | awk '{print \"http://127.0.0.1:4000/mapbox-gl-js/example/\" substr($0,33,length($0)-37)}' | xargs open", "plugin-deploy": "set -e; node plugins/exists.js; aws s3 sync --exclude *.DS_Store --acl public-read plugins/src s3://mapbox-gl-js/plugins/; echo ' -- DEPLOYED --'", diff --git a/src/index.js b/src/index.js index dcdf5fadabf..20ecc385f25 100644 --- a/src/index.js +++ b/src/index.js @@ -13,9 +13,9 @@ mapboxgl.NavigationControl = require('./ui/control/navigation_control'); mapboxgl.GeolocateControl = require('./ui/control/geolocate_control'); mapboxgl.AttributionControl = require('./ui/control/attribution_control'); mapboxgl.ScaleControl = require('./ui/control/scale_control'); +mapboxgl.FullscreenControl = require('./ui/control/fullscreen_control'); mapboxgl.Popup = require('./ui/popup'); mapboxgl.Marker = require('./ui/marker'); -mapboxgl.Fullscreen = require('./ui/control/fullscreen'); mapboxgl.Style = require('./style/style'); From 2e79e810dc691af773b47555fcfef5e277528dd8 Mon Sep 17 00:00:00 2001 From: Colleen Date: Mon, 23 Jan 2017 18:57:41 -0800 Subject: [PATCH 07/13] add fullscreen to debug --- debug/index.html | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/debug/index.html b/debug/index.html index b1257ba65d7..ce48bd6646d 100644 --- a/debug/index.html +++ b/debug/index.html @@ -7,12 +7,18 @@
+
+
+
+
+
+
@@ -29,6 +35,7 @@ map.addControl(new mapboxgl.NavigationControl()); map.addControl(new mapboxgl.GeolocateControl()); map.addControl(new mapboxgl.ScaleControl()); +map.addControl(new mapboxgl.FullscreenControl()); map.on('load', function() { map.addSource('geojson', { @@ -67,7 +74,7 @@ var width = value; _stats.push({name: name, value: value, width: width}); } - _stats = _stats.sort(function(a, b) { return b.value - a.value }).slice(0, 10); + _stats = _stats.sort(function(a, b) { return b.value - a.value; }).slice(0, 10); var html = ''; for (var i in _stats) { From b205de08f485669a6daf60e6c6d300180686f735 Mon Sep 17 00:00:00 2001 From: Colleen Date: Fri, 27 Jan 2017 17:32:05 -0800 Subject: [PATCH 08/13] address merp comments --- debug/index.html | 100 +--------------------------- dist/mapbox-gl.css | 2 - documentation.yml | 1 + js/ui/control/fullscreen_control.js | 9 +++ package.json | 2 +- 5 files changed, 13 insertions(+), 101 deletions(-) diff --git a/debug/index.html b/debug/index.html index ce48bd6646d..e97d51c01f8 100644 --- a/debug/index.html +++ b/debug/index.html @@ -7,18 +7,12 @@
-
-
-
-
-
-
@@ -32,96 +26,6 @@ hash: true }); -map.addControl(new mapboxgl.NavigationControl()); -map.addControl(new mapboxgl.GeolocateControl()); -map.addControl(new mapboxgl.ScaleControl()); -map.addControl(new mapboxgl.FullscreenControl()); - -map.on('load', function() { - map.addSource('geojson', { - "type": "geojson", - "data": "/node_modules/mapbox-gl-test-suite/data/linestring.geojson" - }); - - map.addLayer({ - "id": "route", - "type": "line", - "source": "geojson", - "paint": { - "line-color": "#EC8D8D", - "line-width": { - "base": 1.5, - "stops": [ - [ - 5, - 0.75 - ], - [ - 18, - 32 - ] - ] - } - } - }, 'country-label-lg'); - - var bufferTimes = {}; - map.on('tile.stats', function(bufferTimes) { - var _stats = []; - for (var name in bufferTimes) { - var value = Math.round(bufferTimes[name]); - if (isNaN(value)) continue; - var width = value; - _stats.push({name: name, value: value, width: width}); - } - _stats = _stats.sort(function(a, b) { return b.value - a.value; }).slice(0, 10); - - var html = ''; - for (var i in _stats) { - html += '
' + _stats[i].value + 'ms - ' + _stats[i].name + '
'; - } - - document.getElementById('buffer').innerHTML = html; - }); -}); - -map.on('click', function(e) { - if (e.originalEvent.shiftKey) return; - (new mapboxgl.Popup()) - .setLngLat(map.unproject(e.point)) - .setHTML("

Hello World!

") - .addTo(map); -}); - -document.getElementById('show-tile-boundaries-checkbox').onclick = function() { - map.showTileBoundaries = !!this.checked; -}; - -document.getElementById('show-symbol-collision-boxes-checkbox').onclick = function() { - map.showCollisionBoxes = !!this.checked; -}; - -document.getElementById('show-overdraw-checkbox').onclick = function() { - map.showOverdrawInspector = !!this.checked; -}; - -document.getElementById('buffer-checkbox').onclick = function() { - document.getElementById('buffer').style.display = this.checked ? 'block' : 'none'; -}; - -document.getElementById('pitch-checkbox').onclick = function() { - map.dragRotate._pitchWithRotate = !!this.checked; -}; - -// keyboard shortcut for comparing rendering with Mapbox GL native -document.onkeypress = function(e) { - if (e.charCode === 111 && !e.shiftKey && !e.metaKey && !e.altKey) { - var center = map.getCenter(); - location.href = "mapboxgl://?center=" + center.lat + "," + center.lng + "&zoom=" + map.getZoom() + "&bearing=" + map.getBearing(); - return false; - } -}; - - + \ No newline at end of file diff --git a/dist/mapbox-gl.css b/dist/mapbox-gl.css index ff717384bc4..f1e09ab8d23 100644 --- a/dist/mapbox-gl.css +++ b/dist/mapbox-gl.css @@ -86,11 +86,9 @@ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0D%0A%20%20%3Cpath%20style%3D%27fill%3A%2300f%3B%27%20d%3D%27M10%204C9%204%209%205%209%205L9%205.1A5%205%200%200%200%205.1%209L5%209C5%209%204%209%204%2010%204%2011%205%2011%205%2011L5.1%2011A5%205%200%200%200%209%2014.9L9%2015C9%2015%209%2016%2010%2016%2011%2016%2011%2015%2011%2015L11%2014.9A5%205%200%200%200%2014.9%2011L15%2011C15%2011%2016%2011%2016%2010%2016%209%2015%209%2015%209L14.9%209A5%205%200%200%200%2011%205.1L11%205C11%205%2011%204%2010%204zM10%206.5A3.5%203.5%200%200%201%2013.5%2010%203.5%203.5%200%200%201%2010%2013.5%203.5%203.5%200%200%201%206.5%2010%203.5%203.5%200%200%201%2010%206.5zM10%208.3A1.8%201.8%200%200%200%208.3%2010%201.8%201.8%200%200%200%2010%2011.8%201.8%201.8%200%200%200%2011.8%2010%201.8%201.8%200%200%200%2010%208.3z%27%20%2F%3E%0D%0A%3C%2Fsvg%3E"); } .mapboxgl-ctrl-icon.mapboxgl-ctrl-fullscreen { - padding: 5px; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4KCjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0iTGF5ZXJfMSIKICAgeD0iMHB4IgogICB5PSIwcHgiCiAgIHZpZXdCb3g9IjAgMCAyMCAyMCIKICAgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAgMjA7IgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxIHIxMzcyNSIKICAgc29kaXBvZGk6ZG9jbmFtZT0iZnVsbHNjcmVlbi5zdmciPjxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTQxODUiPjxyZGY6UkRGPjxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj48ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD48ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PGRjOnRpdGxlPjwvZGM6dGl0bGU+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxkZWZzCiAgICAgaWQ9ImRlZnM0MTgzIiAvPjxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiCiAgICAgYm9yZGVyb3BhY2l0eT0iMSIKICAgICBvYmplY3R0b2xlcmFuY2U9IjEwIgogICAgIGdyaWR0b2xlcmFuY2U9IjEwIgogICAgIGd1aWRldG9sZXJhbmNlPSIxMCIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMCIKICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTQ3MSIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSI2OTUiCiAgICAgaWQ9Im5hbWVkdmlldzQxODEiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGlua3NjYXBlOnpvb209IjExLjMxMzcwOCIKICAgICBpbmtzY2FwZTpjeD0iMTQuNjk4MjgiCiAgICAgaW5rc2NhcGU6Y3k9IjEwLjUyNjY4OSIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iNjk3IgogICAgIGlua3NjYXBlOndpbmRvdy15PSIyOTgiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMCIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJMYXllcl8xIgogICAgIGlua3NjYXBlOnNuYXAtYmJveD0idHJ1ZSIKICAgICBpbmtzY2FwZTpiYm94LXBhdGhzPSJ0cnVlIgogICAgIGlua3NjYXBlOm9iamVjdC1wYXRocz0idHJ1ZSIKICAgICBpbmtzY2FwZTpiYm94LW5vZGVzPSJ0cnVlIgogICAgIGlua3NjYXBlOm9iamVjdC1ub2Rlcz0idHJ1ZSI+PGlua3NjYXBlOmdyaWQKICAgICAgIHR5cGU9Inh5Z3JpZCIKICAgICAgIGlkPSJncmlkNjA3NiIgLz48L3NvZGlwb2RpOm5hbWVkdmlldz48cGF0aAogICAgIGQ9Ik0gNSA0IEMgNC41IDQgNCA0LjUgNCA1IEwgNCA2IEwgNCA5IEwgNC41IDkgTCA1Ljc3NzM0MzggNy4yOTY4NzUgQyA2Ljc3NzEzMTkgOC4wNjAyMTMxIDcuODM1NzY1IDguOTU2NTcyOCA4Ljg5MDYyNSAxMCBDIDcuODI1NzEyMSAxMS4wNjMzIDYuNzc2MTc5MSAxMS45NTE2NzUgNS43ODEyNSAxMi43MDcwMzEgTCA0LjUgMTEgTCA0IDExIEwgNCAxNSBDIDQgMTUuNSA0LjUgMTYgNSAxNiBMIDkgMTYgTCA5IDE1LjUgTCA3LjI3MzQzNzUgMTQuMjA1MDc4IEMgOC4wNDI4OTMxIDEzLjE4Nzg4NiA4LjkzOTU0NDEgMTIuMTMzNDgxIDkuOTYwOTM3NSAxMS4wNjgzNTkgQyAxMS4wNDIzNzEgMTIuMTQ2OTkgMTEuOTQyMDkzIDEzLjIxMTIgMTIuNzA3MDMxIDE0LjIxODc1IEwgMTEgMTUuNSBMIDExIDE2IEwgMTQgMTYgTCAxNSAxNiBDIDE1LjUgMTYgMTYgMTUuNSAxNiAxNSBMIDE2IDE0IEwgMTYgMTEgTCAxNS41IDExIEwgMTQuMjA1MDc4IDEyLjcyNjU2MiBDIDEzLjE3Nzk4NSAxMS45NDk2MTcgMTIuMTEyNzE4IDExLjA0MzU3NyAxMS4wMzcxMDkgMTAuMDA5NzY2IEMgMTIuMTUxODU2IDguOTgxMDYxIDEzLjIyNDM0NSA4LjA3OTg2MjQgMTQuMjI4NTE2IDcuMzA0Njg3NSBMIDE1LjUgOSBMIDE2IDkgTCAxNiA1IEMgMTYgNC41IDE1LjUgNCAxNSA0IEwgMTEgNCBMIDExIDQuNSBMIDEyLjcwMzEyNSA1Ljc3NzM0MzggQyAxMS45MzI2NDcgNi43ODY0ODM0IDExLjAyNjY5MyA3Ljg1NTQ3MTIgOS45NzA3MDMxIDguOTE5OTIxOSBDIDguOTU4NDczOSA3LjgyMDQ5NDMgOC4wNjk4NzY3IDYuNzYyNzE4OCA3LjMwNDY4NzUgNS43NzE0ODQ0IEwgOSA0LjUgTCA5IDQgTCA2IDQgTCA1IDQgeiAiCiAgICAgaWQ9InBhdGg0MTY5IiAvPjwvc3ZnPg=="); } .mapboxgl-ctrl-icon.mapboxgl-ctrl-shrink { - padding: 5px; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4KCjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0iTGF5ZXJfMSIKICAgeD0iMHB4IgogICB5PSIwcHgiCiAgIHZpZXdCb3g9IjAgMCAyMCAyMCIKICAgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAgMjA7IgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxIHIxMzcyNSIKICAgc29kaXBvZGk6ZG9jbmFtZT0ic2hyaW5rLnN2ZyI+PG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhMTkiPjxyZGY6UkRGPjxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj48ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD48ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+PGRjOnRpdGxlPjwvZGM6dGl0bGU+PC9jYzpXb3JrPjwvcmRmOlJERj48L21ldGFkYXRhPjxkZWZzCiAgICAgaWQ9ImRlZnMxNyIgLz48c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICAgIGJvcmRlcm9wYWNpdHk9IjEiCiAgICAgb2JqZWN0dG9sZXJhbmNlPSIxMCIKICAgICBncmlkdG9sZXJhbmNlPSIxMCIKICAgICBndWlkZXRvbGVyYW5jZT0iMTAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjIwMjEiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iOTA4IgogICAgIGlkPSJuYW1lZHZpZXcxNSIKICAgICBzaG93Z3JpZD0iZmFsc2UiCiAgICAgaW5rc2NhcGU6em9vbT0iMSIKICAgICBpbmtzY2FwZTpjeD0iNC45NTAxMDgyIgogICAgIGlua3NjYXBlOmN5PSIxMC44NTQ3NDciCiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMCIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJMYXllcl8xIgogICAgIGlua3NjYXBlOnNuYXAtYmJveD0idHJ1ZSIKICAgICBpbmtzY2FwZTpiYm94LXBhdGhzPSJ0cnVlIgogICAgIGlua3NjYXBlOnNuYXAtYmJveC1lZGdlLW1pZHBvaW50cz0idHJ1ZSIKICAgICBpbmtzY2FwZTpiYm94LW5vZGVzPSJ0cnVlIgogICAgIGlua3NjYXBlOnNuYXAtYmJveC1taWRwb2ludHM9InRydWUiCiAgICAgaW5rc2NhcGU6b2JqZWN0LXBhdGhzPSJ0cnVlIgogICAgIGlua3NjYXBlOm9iamVjdC1ub2Rlcz0idHJ1ZSI+PGlua3NjYXBlOmdyaWQKICAgICAgIHR5cGU9Inh5Z3JpZCIKICAgICAgIGlkPSJncmlkNDE0NyIgLz48L3NvZGlwb2RpOm5hbWVkdmlldz48cGF0aAogICAgIHN0eWxlPSJmaWxsOiMwMDAwMDAiCiAgICAgZD0iTSA0LjI0MjE4NzUgMy40OTIxODc1IEEgMC43NTAwNzUgMC43NTAwNzUgMCAwIDAgMy43MTg3NSA0Ljc4MTI1IEwgNS45NjQ4NDM4IDcuMDI3MzQzOCBMIDQgOC41IEwgNCA5IEwgOCA5IEMgOC41MDAwMDEgOC45OTk5OTg4IDkgOC40OTk5OTkyIDkgOCBMIDkgNCBMIDguNSA0IEwgNy4wMTc1NzgxIDUuOTU1MDc4MSBMIDQuNzgxMjUgMy43MTg3NSBBIDAuNzUwMDc1IDAuNzUwMDc1IDAgMCAwIDQuMjQyMTg3NSAzLjQ5MjE4NzUgeiBNIDE1LjczNDM3NSAzLjQ5MjE4NzUgQSAwLjc1MDA3NSAwLjc1MDA3NSAwIDAgMCAxNS4yMTg3NSAzLjcxODc1IEwgMTIuOTg0Mzc1IDUuOTUzMTI1IEwgMTEuNSA0IEwgMTEgNCBMIDExIDggQyAxMSA4LjQ5OTk5OTIgMTEuNDk5OTk5IDguOTk5OTk4OCAxMiA5IEwgMTYgOSBMIDE2IDguNSBMIDE0LjAzNTE1NiA3LjAyNzM0MzggTCAxNi4yODEyNSA0Ljc4MTI1IEEgMC43NTAwNzUgMC43NTAwNzUgMCAwIDAgMTUuNzM0Mzc1IDMuNDkyMTg3NSB6IE0gNCAxMSBMIDQgMTEuNSBMIDUuOTY0ODQzOCAxMi45NzI2NTYgTCAzLjcxODc1IDE1LjIxODc1IEEgMC43NTEzMDA5NiAwLjc1MTMwMDk2IDAgMSAwIDQuNzgxMjUgMTYuMjgxMjUgTCA3LjAyNzM0MzggMTQuMDM1MTU2IEwgOC41IDE2IEwgOSAxNiBMIDkgMTIgQyA5IDExLjUwMDAwMSA4LjUwMDAwMSAxMS4wMDAwMDEgOCAxMSBMIDQgMTEgeiBNIDEyIDExIEMgMTEuNDk5OTk5IDExLjAwMDAwMSAxMSAxMS41MDAwMDEgMTEgMTIgTCAxMSAxNiBMIDExLjUgMTYgTCAxMi45NzI2NTYgMTQuMDM1MTU2IEwgMTUuMjE4NzUgMTYuMjgxMjUgQSAwLjc1MTMwMDk2IDAuNzUxMzAwOTYgMCAxIDAgMTYuMjgxMjUgMTUuMjE4NzUgTCAxNC4wMzUxNTYgMTIuOTcyNjU2IEwgMTYgMTEuNSBMIDE2IDExIEwgMTIgMTEgeiAiCiAgICAgaWQ9InBhdGg3IiAvPjwvc3ZnPg=="); } .mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > span.arrow { diff --git a/documentation.yml b/documentation.yml index 7f68be195cf..1252011e254 100644 --- a/documentation.yml +++ b/documentation.yml @@ -18,6 +18,7 @@ toc: - GeolocateControl - AttributionControl - ScaleControl + - FullscreenControl - name: Handlers description: | Handlers add different kinds of interactivity to the map - diff --git a/js/ui/control/fullscreen_control.js b/js/ui/control/fullscreen_control.js index 41ae1addc5b..673d2249651 100644 --- a/js/ui/control/fullscreen_control.js +++ b/js/ui/control/fullscreen_control.js @@ -4,6 +4,15 @@ const DOM = require('../../util/dom'); const util = require('../../util/util'); const window = require('../../util/window'); +/** + * A `FullscreenControl` control contains a button for toggling the map in and out of fullscreen mode. + * + * @implements {IControl} + * @example + * map.addControl(new mapboxgl.FullscreenControl()); + * @see [View a fullscreen map](https://www.mapbox.com/mapbox-gl-js/example/fullscreen/) + */ + class FullscreenControl { constructor() { diff --git a/package.json b/package.json index a1d431cf01b..a6ad10e92b2 100644 --- a/package.json +++ b/package.json @@ -112,7 +112,7 @@ "build-docs": "flow-node docs/style-spec/_generate/generate.js && documentation build --github --format html --config documentation.yml --theme ./docs/_theme --output docs/api/", "build": "npm run build-docs # invoked by publisher when publishing docs on the mb-pages branch", "start-docs": "npm run build-min && npm run build-docs && jekyll serve --watch", - "lint": "eslint --fix --ignore-path .gitignore js test bench docs/_posts/examples/*.html debug/*.html", + "lint": "eslint --ignore-path .gitignore js test bench docs/_posts/examples/*.html debug/*.html", "lint-docs": "documentation lint", "open-changed-examples": "git diff --name-only mb-pages HEAD -- docs/_posts/examples/*.html | awk '{print \"http://127.0.0.1:4000/mapbox-gl-js/example/\" substr($0,33,length($0)-37)}' | xargs open", "plugin-deploy": "set -e; node plugins/exists.js; aws s3 sync --exclude *.DS_Store --acl public-read plugins/src s3://mapbox-gl-js/plugins/; echo ' -- DEPLOYED --'", From 36c17db494cd32c0eb0ab90c1b93b1ee7a0c2530 Mon Sep 17 00:00:00 2001 From: Colleen Date: Wed, 1 Feb 2017 14:42:21 -0800 Subject: [PATCH 09/13] remove _onKeyDown and _isFullscreen --- js/ui/control/fullscreen_control.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/js/ui/control/fullscreen_control.js b/js/ui/control/fullscreen_control.js index 673d2249651..0da060b1c0c 100644 --- a/js/ui/control/fullscreen_control.js +++ b/js/ui/control/fullscreen_control.js @@ -18,9 +18,7 @@ class FullscreenControl { constructor() { this._fullscreen = false; util.bindAll([ - '_isFullscreen', '_onClickFullscreen', - '_onKeyDown', '_changeIcon' ], this); } From b64e67d12d47ef4f9079af0cb0d0fe068552f2e1 Mon Sep 17 00:00:00 2001 From: Colleen Date: Mon, 20 Feb 2017 15:26:47 -0800 Subject: [PATCH 10/13] address johns comments --- js/ui/control/fullscreen_control.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/js/ui/control/fullscreen_control.js b/js/ui/control/fullscreen_control.js index 0da060b1c0c..8b9ba6332fc 100644 --- a/js/ui/control/fullscreen_control.js +++ b/js/ui/control/fullscreen_control.js @@ -21,6 +21,15 @@ class FullscreenControl { '_onClickFullscreen', '_changeIcon' ], this); + if ('onfullscreenchange' in document) { + this._fullscreenchange = 'fullscreenchange'; + } else if ('onmozfullscreenchange' in document) { + this._fullscreenchange = 'mozfullscreenchange'; + } else if ('onwebkitfullscreenchange' in document) { + this._fullscreenchange = 'webkitfullscreenchange'; + } else if ('onmsfullscreenchange' in document) { + this._fullscreenchange = 'MSFullscreenChange'; + } } onAdd(map) { @@ -30,20 +39,22 @@ class FullscreenControl { button.setAttribute("aria-label", "Toggle fullscreen"); this._fullscreenButton.addEventListener('click', this._onClickFullscreen); this._mapContainer = map.getContainer(); - window.document.addEventListener('webkitfullscreenchange', this._changeIcon); + window.document.addEventListener(this._fullscreenchange, this._changeIcon); return container; } onRemove() { this._container.parentNode.removeChild(this._container); this._map = null; + window.document.removeEventListener(this._fullscreenchange); } _isFullscreen() { return this._fullscreen; } - _changeIcon() { + _changeIcon(e) { + console.log(e); this._fullscreen = !this._fullscreen; const className = 'mapboxgl-ctrl'; this._fullscreenButton.classList.toggle(`${className}-shrink`); From 945b0478711d254219c85341a305da00911fe019 Mon Sep 17 00:00:00 2001 From: Colleen Date: Mon, 20 Feb 2017 16:01:08 -0800 Subject: [PATCH 11/13] move file to src folder and add case for IE11 --- {js => src}/ui/control/fullscreen_control.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) rename {js => src}/ui/control/fullscreen_control.js (79%) diff --git a/js/ui/control/fullscreen_control.js b/src/ui/control/fullscreen_control.js similarity index 79% rename from js/ui/control/fullscreen_control.js rename to src/ui/control/fullscreen_control.js index 8b9ba6332fc..5160c7968d0 100644 --- a/js/ui/control/fullscreen_control.js +++ b/src/ui/control/fullscreen_control.js @@ -54,11 +54,12 @@ class FullscreenControl { } _changeIcon(e) { - console.log(e); - this._fullscreen = !this._fullscreen; - const className = 'mapboxgl-ctrl'; - this._fullscreenButton.classList.toggle(`${className}-shrink`); - this._fullscreenButton.classList.toggle(`${className}-fullscreen`); + if (e.target === this._mapContainer) { + this._fullscreen = !this._fullscreen; + const className = 'mapboxgl-ctrl'; + this._fullscreenButton.classList.toggle(`${className}-shrink`); + this._fullscreenButton.classList.toggle(`${className}-fullscreen`); + } } _onClickFullscreen() { @@ -67,14 +68,18 @@ class FullscreenControl { window.document.exitFullscreen(); } else if (window.document.mozCancelFullScreen) { window.document.mozCancelFullScreen(); - } else { + } else if (window.document.msExitFullscreen) { + window.document.msExitFullscreen(); + } else if (window.document.webkitCancelFullScreen) { window.document.webkitCancelFullScreen(); } } else if (this._mapContainer.requestFullscreen) { this._mapContainer.requestFullscreen(); } else if (this._mapContainer.mozRequestFullScreen) { this._mapContainer.mozRequestFullScreen(); - } else { + } else if (this._mapContainer.msRequestFullscreen) { + this._mapContainer.msRequestFullscreen(); + } else if (this._mapContainer.webkitRequestFullscreen) { this._mapContainer.webkitRequestFullscreen(); } } From 8d785fcf9303c4dd558afb28d4b2dc6e80d7fbb9 Mon Sep 17 00:00:00 2001 From: Colleen Date: Mon, 20 Feb 2017 16:08:37 -0800 Subject: [PATCH 12/13] add newline to debug page --- debug/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/debug/index.html b/debug/index.html index e97d51c01f8..9c7f3bb641c 100644 --- a/debug/index.html +++ b/debug/index.html @@ -28,4 +28,4 @@ - \ No newline at end of file + From 1b0fecca30289570aef28cf36f4d4953f5ab2281 Mon Sep 17 00:00:00 2001 From: Colleen Date: Fri, 24 Feb 2017 15:18:13 -0800 Subject: [PATCH 13/13] add second argument --- src/ui/control/fullscreen_control.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/control/fullscreen_control.js b/src/ui/control/fullscreen_control.js index 5160c7968d0..889c4d92e92 100644 --- a/src/ui/control/fullscreen_control.js +++ b/src/ui/control/fullscreen_control.js @@ -46,7 +46,7 @@ class FullscreenControl { onRemove() { this._container.parentNode.removeChild(this._container); this._map = null; - window.document.removeEventListener(this._fullscreenchange); + window.document.removeEventListener(this._fullscreenchange, this._changeIcon); } _isFullscreen() {