mapbox-gl-compare - npm Package Compare versions

Comparing version 0.0.3 to 0.1.0

CHANGELOG.md

@@ -0,1 +1,6 @@
+v0.1.0
+---
+
+- Added compare on `mousemove` [#4](https://github.com/mapbox/mapbox-gl-compare/issues/4)
+
 v0.0.3
@@ -2,0 +7,0 @@ ---

dist/mapbox-gl-compare.js

@@ -1,1 +0,1 @@
-!function t(n,e,o){function i(r,u){if(!e[r]){if(!n[r]){var c="function"==typeof require&&require;if(!u&&c)return c(r,!0);if(s)return s(r,!0);var h=new Error("Cannot find module '"+r+"'");throw h.code="MODULE_NOT_FOUND",h}var d=e[r]={exports:{}};n[r][0].call(d.exports,function(t){var e=n[r][1][t];return i(e?e:t)},d,d.exports,t,n,e,o)}return e[r].exports}for(var s="function"==typeof require&&require,r=0;r<o.length;r++)i(o[r]);return i}({1:[function(t,n,e){"use strict";function o(t,n){this._onDown=this._onDown.bind(this),this._onMove=this._onMove.bind(this),this._onMouseUp=this._onMouseUp.bind(this),this._onTouchEnd=this._onTouchEnd.bind(this);var e=document.createElement("div");e.className="compare-swiper",e.addEventListener("mousedown",this._onDown),e.addEventListener("touchstart",this._onDown),this._container=document.createElement("div"),this._container.className="mapboxgl-compare",this._container.appendChild(e),t.getContainer().appendChild(this._container),this._clippedMap=n,this._bounds=n.getContainer().getBoundingClientRect(),this._setPosition(this._bounds.width/2),i(t,n),n.on("resize",function(){this._bounds=n.getContainer().getBoundingClientRect(),this._x&&this._setPosition(this._x)}.bind(this))}var i=t("mapbox-gl-sync-move");o.prototype={_onDown:function(t){t.touches?(document.addEventListener("touchmove",this._onMove),document.addEventListener("touchend",this._onTouchEnd)):(document.addEventListener("mousemove",this._onMove),document.addEventListener("mouseup",this._onMouseUp))},_setPosition:function(t){var n="translate("+t+"px, 0)";this._container.style.transform=n,this._container.style.WebkitTransform=n,this._clippedMap.getContainer().style.clip="rect(0, 999em, "+this._bounds.height+"px,"+t+"px)",this._x=t},_onMove:function(t){this._setPosition(this._getX(t))},_onMouseUp:function(){document.removeEventListener("mousemove",this._onMove),document.removeEventListener("mouseup",this._onMouseUp)},_onTouchEnd:function(){document.removeEventListener("touchmove",this._onMove),document.removeEventListener("touchend",this._onTouchEnd)},_getX:function(t){t=t.touches?t.touches[0]:t;var n=t.clientX-this._bounds.left;return n<0&&(n=0),n>this._bounds.width&&(n=this._bounds.width),n}},window.mapboxgl?mapboxgl.Compare=o:"undefined"!=typeof n&&(n.exports=o)},{"mapbox-gl-sync-move":2}],2:[function(t,n,e){function o(t,n){n.jumpTo({center:t.getCenter(),zoom:t.getZoom(),bearing:t.getBearing(),pitch:t.getPitch()})}function i(t,n){function e(){t.on("move",s),n.on("move",r)}function i(){t.off("move",s),n.off("move",r)}function s(){i(),o(t,n),e()}function r(){i(),o(n,t),e()}e()}n.exports=i},{}]},{},[1]);
+!function t(e,n,o){function i(r,u){if(!n[r]){if(!e[r]){var h="function"==typeof require&&require;if(!u&&h)return h(r,!0);if(s)return s(r,!0);var c=new Error("Cannot find module '"+r+"'");throw c.code="MODULE_NOT_FOUND",c}var d=n[r]={exports:{}};e[r][0].call(d.exports,function(t){var n=e[r][1][t];return i(n?n:t)},d,d.exports,t,e,n,o)}return n[r].exports}for(var s="function"==typeof require&&require,r=0;r<o.length;r++)i(o[r]);return i}({1:[function(t,e,n){"use strict";function o(t,e,n){this.options=n?n:{},this._onDown=this._onDown.bind(this),this._onMove=this._onMove.bind(this),this._onMouseUp=this._onMouseUp.bind(this),this._onTouchEnd=this._onTouchEnd.bind(this),this._swiper=document.createElement("div"),this._swiper.className="compare-swiper",this._container=document.createElement("div"),this._container.className="mapboxgl-compare",this._container.appendChild(this._swiper),t.getContainer().appendChild(this._container),this._clippedMap=e,this._bounds=e.getContainer().getBoundingClientRect(),this._setPosition(this._bounds.width/2),i(t,e),e.on("resize",function(){this._bounds=e.getContainer().getBoundingClientRect(),this._x&&this._setPosition(this._x)}.bind(this)),this.options&&this.options.mousemove&&(t.getContainer().addEventListener("mousemove",this._onMove),e.getContainer().addEventListener("mousemove",this._onMove)),this._swiper.addEventListener("mousedown",this._onDown),this._swiper.addEventListener("touchstart",this._onDown)}var i=t("mapbox-gl-sync-move");o.prototype={_setPointerEvents:function(t){this._container.style.pointerEvents=t,this._swiper.style.pointerEvents=t},_onDown:function(t){t.touches?(document.addEventListener("touchmove",this._onMove),document.addEventListener("touchend",this._onTouchEnd)):(document.addEventListener("mousemove",this._onMove),document.addEventListener("mouseup",this._onMouseUp))},_setPosition:function(t){var e="translate("+t+"px, 0)";this._container.style.transform=e,this._container.style.WebkitTransform=e,this._clippedMap.getContainer().style.clip="rect(0, 999em, "+this._bounds.height+"px,"+t+"px)",this._x=t},_onMove:function(t){this.options&&this.options.mousemove&&this._setPointerEvents(t.touches?"auto":"none"),this._setPosition(this._getX(t))},_onMouseUp:function(){document.removeEventListener("mousemove",this._onMove),document.removeEventListener("mouseup",this._onMouseUp)},_onTouchEnd:function(){document.removeEventListener("touchmove",this._onMove),document.removeEventListener("touchend",this._onTouchEnd)},_getX:function(t){t=t.touches?t.touches[0]:t;var e=t.clientX-this._bounds.left;return 0>e&&(e=0),e>this._bounds.width&&(e=this._bounds.width),e}},window.mapboxgl?mapboxgl.Compare=o:"undefined"!=typeof e&&(e.exports=o)},{"mapbox-gl-sync-move":2}],2:[function(t,e,n){function o(t,e){e.jumpTo({center:t.getCenter(),zoom:t.getZoom(),bearing:t.getBearing(),pitch:t.getPitch()})}function i(t,e){function n(){t.on("move",s),e.on("move",r)}function i(){t.off("move",s),e.off("move",r)}function s(){i(),o(t,e),n()}function r(){i(),o(e,t),n()}n()}e.exports=i},{}]},{},[1]);

example/index.js

@@ -9,5 +9,3 @@ 'use strict';
   container: 'before',
-  style: 'mapbox://styles/mapbox/light-v8',
-  center: [0, 0],
-  zoom: 0
+  style: 'mapbox://styles/mapbox/light-v8'
 });
@@ -17,7 +15,7 @@
   container: 'after',
-  style: 'mapbox://styles/mapbox/dark-v8',
-  center: [0, 0],
-  zoom: 0
+  style: 'mapbox://styles/mapbox/dark-v8'
 });
 
-new mapboxgl.Compare(before, after);
+new mapboxgl.Compare(before, after, {
+  // mousemove: true
+});

index.js

@@ -6,3 +6,4 @@ 'use strict';
 
-function Compare(a, b) {
+function Compare(a, b, options) {
+  this.options = options ? options : {};
   this._onDown = this._onDown.bind(this);
@@ -13,10 +14,8 @@ this._onMove = this._onMove.bind(this);
 
-  var swiper = document.createElement('div');
-  swiper.className = 'compare-swiper';
-  swiper.addEventListener('mousedown', this._onDown);
-  swiper.addEventListener('touchstart', this._onDown);
+  this._swiper = document.createElement('div');
+  this._swiper.className = 'compare-swiper';
 
   this._container = document.createElement('div');
   this._container.className = 'mapboxgl-compare';
-  this._container.appendChild(swiper);
+  this._container.appendChild(this._swiper);
 
@@ -34,5 +33,18 @@ a.getContainer().appendChild(this._container);
   }.bind(this));
+
+  if (this.options && this.options.mousemove) {
+    a.getContainer().addEventListener('mousemove', this._onMove);
+    b.getContainer().addEventListener('mousemove', this._onMove);
+  }
+
+  this._swiper.addEventListener('mousedown', this._onDown);
+  this._swiper.addEventListener('touchstart', this._onDown);
 }
 
 Compare.prototype = {
+  _setPointerEvents: function(v) {
+    this._container.style.pointerEvents = v;
+    this._swiper.style.pointerEvents = v;
+  },
+
   _onDown: function(e) {
@@ -57,2 +69,6 @@ if (e.touches) {
   _onMove: function(e) {
+    if (this.options && this.options.mousemove) {
+      this._setPointerEvents(e.touches ? 'auto' : 'none');
+    }
+
     this._setPosition(this._getX(e));
@@ -59,0 +75,0 @@ },

package.json

 {
   "name": "mapbox-gl-compare",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "description": "Swipe and sync between two maps",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -10,5 +10,25 @@ mapbox-gl-compare
 
+### Usage
+
+```js
+var before = new mapboxgl.Map({
+  container: 'before', // Container ID
+  style: 'mapbox://styles/mapbox/light-v9'
+});
+
+var after = new mapboxgl.Map({
+  container: 'after', // Container ID
+  style: 'mapbox://styles/mapbox/dark-v9'
+});
+
+new mapboxgl.Compare(before, after, {
+  mousemove: true // Optional. Set to true to enable swiping during cursor movement.
+});
+```
+
+Demo: https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-compare/
+
 ### Developing
 
-    npm install & npm start & open http://localhost:9966/example/
+    npm install & npm start & open http://localhost:9966
 
@@ -15,0 +35,0 @@ You'll need a [Mapbox access token](https://www.mapbox.com/help/create-api-access-token/) stored in localstorage. Set it via

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18505

8.47%

Lines of code

208

5.58%

Number of lines in readme file

59

51.28%

Number of medium supply chain risk alerts

0

-100%

No dependency changes