TWEAKS refactoring

plugins/fix-china-map-offset.js

@@ -4,7 +4,8 @@
 // @version        0.3.1
 // @description    Show correct maps for China user by applying offset tweaks.
 
-
+/* exported setup --eslint */
+/* global L */
 // use own namespace for plugin
 var fixChinaMapOffset = {};
 window.plugin.fixChinaMapOffset = fixChinaMapOffset;
@@ -16,7 +17,6 @@ window.plugin.fixChinaMapOffset = fixChinaMapOffset;
 //
 // Example: basemap-gaode.user.js
 
-
 // Before understanding how this plugin works, you should know 3 points:
 //
 //   Point1.
@@ -65,7 +65,8 @@ window.plugin.fixChinaMapOffset = fixChinaMapOffset;
 // https://github.com/Artoria2e5/PRCoords
 // (more info: https://github.com/iitc-project/ingress-intel-total-conversion/pull/1188)
 
-var insane_is_in_china = (function () { // adapted from https://github.com/Artoria2e5/PRCoords/blob/master/js/misc/insane_is_in_china.js
+// adapted from https://github.com/Artoria2e5/PRCoords/blob/master/js/misc/insane_is_in_china.js
+var insane_is_in_china = (function () {
 /* eslint-disable */
   'use strict';
 
@@ -164,12 +165,13 @@ var insane_is_in_china = (function () { // adapted from https://github.com/Artor
   }
 
   return { isInChina: isInChina };
-/* eslint-enable */
+  /* eslint-enable */
 })();
 
 fixChinaMapOffset.isInChina = insane_is_in_china.isInChina;
 
-var PRCoords = (function () { // adapted from https://github.com/Artoria2e5/PRCoords/blob/master/js/PRCoords.js
+// adapted from https://github.com/Artoria2e5/PRCoords/blob/master/js/PRCoords.js
+var PRCoords = (function () {
 /* eslint-disable */
   'use strict';
 
@@ -212,7 +214,7 @@ var PRCoords = (function () { // adapted from https://github.com/Artoria2e5/PRCo
   }
 
   return { wgs_gcj: wgs_gcj };
-/* eslint-enable */
+  /* eslint-enable */
 })();
 
 fixChinaMapOffset.wgs_gcj = PRCoords.wgs_gcj;
@@ -221,12 +223,14 @@ fixChinaMapOffset.wgs_gcj = PRCoords.wgs_gcj;
 var fixChinaOffset = {
   _inChina: false,
 
-  _inChinaLastChecked: [0,0],
+  _inChinaLastChecked: [0, 0],
 
   _inChinaValidRadius: 100000,
 
   _isInChina: function (latlng) {
-    if (latlng._notChina) { return false; } // do not check twice same latlng
+    if (latlng._notChina) {
+      return false;
+    } // do not check twice same latlng
 
     if (latlng.distanceTo(this._inChinaLastChecked) > this._inChinaValidRadius) {
       // recheck only when beyond of specified radius, otherwise keep last known value
@@ -238,10 +242,12 @@ var fixChinaOffset = {
   },
 
   _fixChinaOffset: function (latlng) {
-    if (!this.options.needFixChinaOffset) { return latlng; }
-    if (!latlng._gcj) { // do not calculate twice same latlng
-      latlng._gcj = this._isInChina(latlng) &&
-        fixChinaMapOffset.wgs_gcj(latlng);
+    if (!this.options.needFixChinaOffset) {
+      return latlng;
+    }
+    // do not calculate twice same latlng
+    if (!latlng._gcj) {
+      latlng._gcj = this._isInChina(latlng) && fixChinaMapOffset.wgs_gcj(latlng);
     }
     return latlng._gcj || latlng;
   },
@@ -254,11 +260,11 @@ var fixChinaOffset = {
   _setZoomTransform: function (level, center, zoom) {
     center = this._fixChinaOffset(center);
     return L.GridLayer.prototype._setZoomTransform.call(this, level, center, zoom);
-  }
+  },
 };
 
 // redefine L.GridLayer.GoogleMutant methods
-function fixGoogleMutant (_update, style) {
+function fixGoogleMutant(_update, style) {
   return function (wgs) {
     wgs = wgs || this._map.getCenter();
     _update.call(this, wgs);
@@ -268,8 +274,7 @@ function fixGoogleMutant (_update, style) {
         wgs._gcj = wgs._gcj || fixChinaMapOffset.wgs_gcj(wgs);
         if (o.type === 'hybrid') {
           var zoom = this._map.getZoom();
-          var offset = this._map.project(wgs, zoom)
-            .subtract(this._map.project(wgs._gcj, zoom));
+          var offset = this._map.project(wgs, zoom).subtract(this._map.project(wgs._gcj, zoom));
           style.transform = L.Util.template('translate3d({x}px, {y}px, 0px)', offset);
         } else {
           this._mutant.setCenter(wgs._gcj);
@@ -279,15 +284,15 @@ function fixGoogleMutant (_update, style) {
   };
 }
 
-function setup () {
+function setup() {
   // add support of `needFixChinaOffset` property to any TileLayer
   L.TileLayer.include(fixChinaOffset);
 
   // GoogleMutant needs additional support
   var styleEl = document.createElement('style');
   var css = document.body.appendChild(styleEl).sheet;
   var cssrule = css.cssRules[css.insertRule('.google-mutant .leaflet-tile img:nth-child(2) {}')];
-
+  // prettier-ignore
   L.GridLayer.GoogleMutant
     .mergeOptions({className: 'google-mutant'})
     .include(fixChinaOffset)

plugins/link-show-direction.js

@@ -1,17 +1,21 @@
 // @author         jonatkins
 // @name           Direction of links on map
 // @category       Tweaks
-// @version        0.2.1
+// @version        0.2.2
 // @description    Show the direction of links on the map by adding short dashes to the line at the origin portal.
 
-
+/* exported setup --eslint */
+/* global L, dialog, addHook, map, links */
 // use own namespace for plugin
-window.plugin.linkShowDirection = function() {};
-window.plugin.linkShowDirection.ANIMATE_UPDATE_TIME = 1000; // 1000ms = 1s
+var linkShowDirection = {};
+window.plugin.linkShowDirection = linkShowDirection;
+
+var ANIMATE_UPDATE_TIME = 1000; // 1000ms = 1s
 
 // Hack:
 // 100000 - a large enough number to be the equivalent of 100%, which is not supported Leaflet when displaying with canvas
-window.plugin.linkShowDirection.styles = {
+// prettier-ignore
+linkShowDirection.styles = {
   'Disabled': [null],
   'Static *': [
     '30,5,15,5,15,5,2,5,2,5,2,5,2,5,30,0',
@@ -32,111 +36,127 @@ window.plugin.linkShowDirection.styles = {
     '0,4,4,6,4,6,4,2',
     '0,6,4,6,4,6,4,0',
     '2,6,4,6,4,6,2,0',
-  ],
+  ]
 };
-window.plugin.linkShowDirection.dashArray = null;
-window.plugin.linkShowDirection.frame = 0;
-window.plugin.linkShowDirection.moving = false;
-
-
-window.plugin.linkShowDirection.animateLinks = function() {
-  var frames = window.plugin.linkShowDirection.styles[window.plugin.linkShowDirection.mode];
-  if(!frames) frames = [null];
-
-  if(!window.plugin.linkShowDirection.moving) {
-    var frame = window.plugin.linkShowDirection.frame;
+var dashArray = null;
+var activeFrame = 0;
+var moving = false;
+var timer = 0;
+var activeStyle = '';
+
+function animateLinks() {
+  var frames = linkShowDirection.styles[activeStyle];
+  if (!frames) frames = [null];
+
+  if (!moving) {
+    var frame = activeFrame;
     frame = (frame + 1) % frames.length;
-    window.plugin.linkShowDirection.frame = frame;
+    activeFrame = frame;
 
-    window.plugin.linkShowDirection.dashArray = frames[frame];
-    window.plugin.linkShowDirection.addAllLinkStyles();
+    dashArray = frames[frame];
+    addAllLinkStyles();
   }
 
-  if(frames.length < 2) return; // no animation needed
+  if (frames.length < 2) return; // no animation needed
 
   // browsers don't render the SVG style changes until after the timer function has finished.
   // this means if we start the next timeout in here a lot of the delay time will be taken by the browser itself
   // re-rendering the screen. in the worst case, the timer will run out before the render completes, and fire immediately
   // this would mean the user has no chance to interact with IITC
   // to prevent this, create a short timer that then sets the timer for the next frame. if the browser is slow to render,
   // the short timer should fire later, at which point the desired ANIMATE_UPDATE_TIME timer is started
-  clearTimeout(window.plugin.linkShowDirection.timer);
-  window.plugin.linkShowDirection.timer = setTimeout(function() {
-    clearTimeout(window.plugin.linkShowDirection.timer);
-    window.plugin.linkShowDirection.timer = setTimeout(
-      window.plugin.linkShowDirection.animateLinks,
-      window.plugin.linkShowDirection.ANIMATE_UPDATE_TIME);
+  clearTimeout(timer);
+  linkShowDirection.timer = setTimeout(function () {
+    clearTimeout(timer);
+    timer = setTimeout(animateLinks, ANIMATE_UPDATE_TIME);
   }, 10);
-};
+}
 
-window.plugin.linkShowDirection.addAllLinkStyles = function() {
-  $.each(links,function(guid,link) { window.plugin.linkShowDirection.addLinkStyle(link); });
+function addAllLinkStyles() {
+  $.each(links, function (guid, link) {
+    addLinkStyle(link);
+  });
 
-  if(window.plugin.drawTools && localStorage['plugin-linkshowdirection-drawtools'] == "true") {
-    window.plugin.drawTools.drawnItems.eachLayer(function(layer) {
-      if(layer instanceof L.GeodesicPolyline)
-        window.plugin.linkShowDirection.addLinkStyle(layer);
+  if (window.plugin.drawTools && localStorage['plugin-linkshowdirection-drawtools'] === 'true') {
+    window.plugin.drawTools.drawnItems.eachLayer(function (layer) {
+      if (layer instanceof L.GeodesicPolyline) {
+        addLinkStyle(layer);
+      }
     });
   }
-};
+}
 
-window.plugin.linkShowDirection.addLinkStyle = function(link) {
-  link.setStyle({dashArray: window.plugin.linkShowDirection.dashArray});
-};
+function addLinkStyle(link) {
+  link.setStyle({ dashArray: dashArray });
+}
 
-window.plugin.linkShowDirection.removeDrawToolsStyle = function() {
-  if(!window.plugin.drawTools) return;
+function removeDrawToolsStyle() {
+  if (!window.plugin.drawTools) return;
 
-  window.plugin.drawTools.drawnItems.eachLayer(function(layer) {
-    if(layer instanceof L.GeodesicPolyline)
-      layer.setStyle({dashArray: null});
+  window.plugin.drawTools.drawnItems.eachLayer(function (layer) {
+    if (layer instanceof L.GeodesicPolyline) {
+      layer.setStyle({
+        dashArray: null,
+      });
+    }
   });
-};
+}
 
-window.plugin.linkShowDirection.showDialog = function() {
+function showDialog() {
   var div = document.createElement('div');
 
-  $.each(window.plugin.linkShowDirection.styles, function(style) {
+  $.each(linkShowDirection.styles, function (style) {
     var label = div.appendChild(document.createElement('label'));
     var input = label.appendChild(document.createElement('input'));
     input.type = 'radio';
     input.name = 'plugin-link-show-direction';
     input.value = style;
-    if(style == window.plugin.linkShowDirection.mode) {
+    if (style === activeStyle) {
       input.checked = true;
     }
 
-    input.addEventListener('click', function() {
-      window.plugin.linkShowDirection.mode = style;
-      localStorage['plugin-linkshowdirection-mode'] = style;
-      window.plugin.linkShowDirection.animateLinks();
-    }, false);
+    input.addEventListener(
+      'click',
+      function () {
+        activeStyle = style;
+        localStorage['plugin-linkshowdirection-mode'] = style;
+        animateLinks();
+      },
+      false
+    );
 
     label.appendChild(document.createTextNode(' ' + style));
 
     div.appendChild(document.createElement('br'));
   });
 
-  div.appendChild(document.createTextNode(
-    ' * Static: six segments will indicate each link\'s direction. ' +
-    'Two long segments are on the origin\'s side, follow by four short segments on the destination\'s side.'));
+  div.appendChild(
+    document.createTextNode(
+      " * Static: six segments will indicate each link's direction. " +
+        "Two long segments are on the origin's side, follow by four short segments on the destination's side."
+    )
+  );
 
-  if(window.plugin.drawTools) {
+  if (window.plugin.drawTools) {
     div.appendChild(document.createElement('br'));
 
     var label = div.appendChild(document.createElement('label'));
     var input = label.appendChild(document.createElement('input'));
     input.type = 'checkbox';
-    input.checked = localStorage['plugin-linkshowdirection-drawtools'] == "true";
-
-    input.addEventListener('click', function() {
-      localStorage['plugin-linkshowdirection-drawtools'] = input.checked.toString();
-
-      if(input.checked)
-        window.plugin.linkShowDirection.animateLinks();
-      else
-        window.plugin.linkShowDirection.removeDrawToolsStyle();
-    }, false);
+    input.checked = localStorage['plugin-linkshowdirection-drawtools'] === 'true';
+
+    input.addEventListener(
+      'click',
+      function () {
+        localStorage['plugin-linkshowdirection-drawtools'] = input.checked.toString();
+        if (input.checked) {
+          animateLinks();
+        } else {
+          removeDrawToolsStyle();
+        }
+      },
+      false
+    );
 
     label.appendChild(document.createTextNode(' Apply to DrawTools'));
   }
@@ -148,23 +168,30 @@ window.plugin.linkShowDirection.showDialog = function() {
   });
 };
 
-window.plugin.linkShowDirection.setup  = function() {
-  $('#toolbox').append(' <a onclick="window.plugin.linkShowDirection.showDialog()">LinkDirection Opt</a>');
-
-  addHook('linkAdded', function(data) { window.plugin.linkShowDirection.addLinkStyle(data.link); });
+function setup() {
+  $('<a>', {
+    title: 'Change LinkDirection settings',
+    click: showDialog,
+    html: 'LinkDirection Opt',
+  }).appendTo('#toolbox');
+  addHook('linkAdded', function (data) {
+    addLinkStyle(data.link);
+  });
 
   try {
-    window.plugin.linkShowDirection.mode = localStorage['plugin-linkshowdirection-mode'];
-  } catch(e) {
+    activeStyle = localStorage['plugin-linkshowdirection-mode'];
+  } catch (e) {
     console.warn(e);
-    window.plugin.linkShowDirection.mode = 'Disabled';
+    activeStyle = 'Disabled';
   }
 
-  window.plugin.linkShowDirection.animateLinks();
-
+  animateLinks();
   // set up move start/end handlers to pause animations while moving
-  map.on('movestart', function() { window.plugin.linkShowDirection.moving = true; });
-  map.on('moveend', function() { window.plugin.linkShowDirection.moving = false; });
-};
+  map.on('movestart', function () {
+    moving = true;
+  });
+  map.on('moveend', function () {
+    moving = false;
+  });
+}
 
-var setup =  window.plugin.linkShowDirection.setup;