From c284ee3323e7d38a743ae6f3e30d8144851f983e Mon Sep 17 00:00:00 2001 From: fkloft Date: Thu, 5 Feb 2015 15:58:57 +0100 Subject: [PATCH] [link-show-direction] disable plugin without reloading, more highlighting styles --- plugins/link-show-direction.user.js | 155 +++++++++++++++++++++++----- style.css | 2 +- 2 files changed, 129 insertions(+), 28 deletions(-) diff --git a/plugins/link-show-direction.user.js b/plugins/link-show-direction.user.js index 446991fc..37470e94 100644 --- a/plugins/link-show-direction.user.js +++ b/plugins/link-show-direction.user.js @@ -2,7 +2,7 @@ // @id iitc-plugin-link-show-direction // @name IITC plugin: Show the direction of links on the map // @category Tweaks -// @version 0.1.0.@@DATETIMEVERSION@@ +// @version 0.2.0.@@DATETIMEVERSION@@ // @namespace https://github.com/jonatkins/ingress-intel-total-conversion // @updateURL @@UPDATEURL@@ // @downloadURL @@DOWNLOADURL@@ @@ -21,60 +21,161 @@ // use own namespace for plugin window.plugin.linkShowDirection = function() {}; +window.plugin.linkShowDirection.ANIMATE_UPDATE_TIME = 1000; // 1000ms = 1s -window.plugin.linkShowDirection.ANIMATE_UPDATE_TIME=1; -window.plugin.linkShowDirection.frames = [ - '10,5,5,5,5,5,5,5,100%', -// '11,5,5,5,5,5,5,4,100%', - '12,5,5,5,5,5,5,3,100%', -// '13,5,5,5,5,5,5,2,100%', - '14,5,5,5,5,5,5,1,100%', -// '15,5,5,5,5,5,100%', - '10,1,5,5,5,5,5,5,100%', -// '10,2,5,5,5,5,5,5,100%', - '10,3,5,5,5,5,5,5,100%', -// '10,4,5,5,5,5,5,5,100%', -]; - +window.plugin.linkShowDirection.styles = { + 'Disabled': [null], + 'Static *': ['30,5,15,5,15,5,2,5,2,5,2,5,2,5,30,0'], + 'Animate near origin': [ + '10,5,5,5,5,5,5,5,100%', + '12,5,5,5,5,5,5,3,100%', + '14,5,5,5,5,5,5,1,100%', + '10,1,5,5,5,5,5,5,100%', + '10,3,5,5,5,5,5,5,100%', + ], + 'Animate full link': [ + '4,6,4,6,4,6,4,6', + '0,2,4,6,4,6,4,4', + '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() { - if (!window.plugin.linkShowDirection.moving) { - window.plugin.linkShowDirection.frame ++; - window.plugin.linkShowDirection.frame %= window.plugin.linkShowDirection.frames.length; + var frames = window.plugin.linkShowDirection.styles[window.plugin.linkShowDirection.mode]; + if(!frames) frames = [null]; - $.each(links,function(guid,link) { window.plugin.linkShowDirection.addLinkStyle(link); }); + if(!window.plugin.linkShowDirection.moving) { + var frame = window.plugin.linkShowDirection.frame; + frame = (frame + 1) % frames.length; + window.plugin.linkShowDirection.frame = frame; + + window.plugin.linkShowDirection.dashArray = frames[frame]; + window.plugin.linkShowDirection.addAllLinkStyles(); } + 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 - setTimeout ( function() { setTimeout (window.plugin.linkShowDirection.animateLinks, window.plugin.linkShowDirection.ANIMATE_UPDATE_TIME*1000); }, 10); + 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); + }, 10); +}; -} +window.plugin.linkShowDirection.addAllLinkStyles = function() { + $.each(links,function(guid,link) { window.plugin.linkShowDirection.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); + }); + } +}; window.plugin.linkShowDirection.addLinkStyle = function(link) { - link.setStyle ({dashArray: window.plugin.linkShowDirection.frames[window.plugin.linkShowDirection.frame]}); -} + link.setStyle({dashArray: window.plugin.linkShowDirection.dashArray}); +}; + +window.plugin.linkShowDirection.removeDrawToolsStyle = function() { + if(!window.plugin.drawTools) return; + + window.plugin.drawTools.drawnItems.eachLayer(function(layer) { + if(layer instanceof L.GeodesicPolyline) + layer.setStyle({dashArray: null}); + }); +}; + +window.plugin.linkShowDirection.showDialog = function() { + var div = document.createElement('div'); + + $.each(window.plugin.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) { + input.checked = true; + } + + input.addEventListener('click', function() { + window.plugin.linkShowDirection.mode = style; + localStorage['plugin-linkshowdirection-mode'] = style; + window.plugin.linkShowDirection.animateLinks(); + }, false); + + label.appendChild(document.createTextNode(' ' + style)); + + div.appendChild(document.createElement('br')); + }); + + div.appendChild(document.createTextNode( + ' * Static: 5 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) { + 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); + + label.appendChild(document.createTextNode(' Apply to DrawTools')); + } + + dialog({ + id: 'plugin-link-show-direction', + html: div, + title: 'Show link direction', + }); +}; window.plugin.linkShowDirection.setup = function() { + $('#toolbox').append(' link direction'); - addHook ('linkAdded', function(data) { window.plugin.linkShowDirection.addLinkStyle (data.link); }); + addHook('linkAdded', function(data) { window.plugin.linkShowDirection.addLinkStyle(data.link); }); + + try { + window.plugin.linkShowDirection.mode = localStorage['plugin-linkshowdirection-mode']; + } catch(e) { + console.warn(e); + window.plugin.linkShowDirection.mode = 'Disabled'; + } // only start the animation timer of the paths support SVG - if (L.Path.SVG) { - setTimeout (window.plugin.linkShowDirection.animateLinks, window.plugin.linkShowDirection.ANIMATE_UPDATE_TIME*1000); + if(L.Path.SVG) { + window.plugin.linkShowDirection.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; }); - + } else { + console.warn('link-show-direction: not using SVG, visualization of link direction is not supported!'); } }; diff --git a/style.css b/style.css index 0f41e85f..23dc75fc 100644 --- a/style.css +++ b/style.css @@ -486,7 +486,7 @@ h2 sup, h2 sub { /* geosearch input, and others */ -input { +input:not([type]), input[type="text"] { background-color: rgba(0, 0, 0, 0.3); color: #ffce00; height: 24px;