diff --git a/code/boot.js b/code/boot.js index beb9c2d4..14e6c22d 100644 --- a/code/boot.js +++ b/code/boot.js @@ -38,12 +38,6 @@ window.setupStyles = function() { '#scrollwrapper { width:'+(SIDEBAR_WIDTH + 2*HIDDEN_SCROLLBAR_ASSUMED_WIDTH)+'px; right:-'+(2*HIDDEN_SCROLLBAR_ASSUMED_WIDTH-2)+'px } ', '#sidebar > * { width:'+(SIDEBAR_WIDTH+1)+'px; }'].join("\n") + ''); - - if(L.Browser.mobile) { - $('head').append(''); - } } window.setupMap = function() { @@ -248,6 +242,7 @@ function boot() { window.debug.console.overwriteNativeIfRequired(); console.log('loading done, booting'); + window.runOnSmartphonesBeforeBoot(); window.setupStyles(); window.setupMap(); window.setupGeosearch(); @@ -276,6 +271,8 @@ function boot() { // it. $('#scrollwrapper').css('max-height', ($('#sidebar').get(0).scrollHeight+3) + 'px'); + window.runOnSmartphonesAfterBoot(); + // workaround for #129. Not sure why this is required. setTimeout('window.map.invalidateSize(false);', 500); diff --git a/code/map_data.js b/code/map_data.js index 32626856..468da61a 100644 --- a/code/map_data.js +++ b/code/map_data.js @@ -249,7 +249,7 @@ window.renderPortal = function(ent) { var lvRadius = Math.max(portalLevel + 3, 5); var p = L.circleMarker(latlng, { - radius: lvRadius, + radius: lvRadius + (L.Browser.mobile ? PORTAL_RADIUS_ENLARGE_MOBILE : 0), color: ent[0] == selectedPortal ? COLOR_SELECTED_PORTAL : COLORS[team], opacity: 1, weight: lvWeight, diff --git a/code/smartphone.js b/code/smartphone.js new file mode 100644 index 00000000..6a1231d1 --- /dev/null +++ b/code/smartphone.js @@ -0,0 +1,87 @@ +window.isSmartphone = function() { + // this check is also used in main.js. Note it should not detect + // tablets because their display is large enough to use the desktop + // version. + return true; + return navigator.userAgent.match(/Android.*Mobile/); +} + +window.smartphone = function() {}; + +window.runOnSmartphonesBeforeBoot = function() { + if(!isSmartphone()) return; + console.warn('running smartphone pre boot stuff'); + + // disable zoom buttons to see if they are really needed + window.localStorage['iitc.zoom.buttons'] = 'false'; + + // don’t need many of those + window.setupStyles = function() { + $('head').append(''); + } + + // this also matches the expand button, but it is hidden via CSS + $('#chatcontrols a').click(function() { + $('#scrollwrapper, #updatestatus').hide(); + // not displaying the map causes bugs in Leaflet + $('#map').css('visibility', 'hidden'); + $('#chat, #chatinput').show(); + }); + + window.smartphone.mapButton = $('map').click(function() { + $('#chat, #chatinput, #scrollwrapper').hide(); + $('#map').css('visibility', 'visible'); + $('#updatestatus').show(); + $('.active').removeClass('active'); + $(this).addClass('active'); + }); + + window.smartphone.sideButton = $('info').click(function() { + $('#chat, #chatinput, #updatestatus').hide(); + $('#map').css('visibility', 'hidden'); + $('#scrollwrapper').show(); + $('.active').removeClass('active'); + $(this).addClass('active'); + }); + + $('#chatcontrols').append(smartphone.mapButton).append(smartphone.sideButton); + + // add event to portals that allows long press to switch to sidebar + window.addHook('portalAdded', function(data) { + data.portal.on('dblclick', function() { + window.lastClickedPortal = this.options.guid; + }); + }); + + window.addHook('portalDetailsUpdated', function(data) { + var x = $('.imgpreview img').removeClass('hide'); + + if(!x.length) { + $('.fullimg').remove(); + return; + } + + if($('.fullimg').length) { + $('.fullimg').replaceWith(x.addClass('fullimg')); + } else { + x.addClass('fullimg').appendTo('#sidebar'); + } + }); +} + +window.runOnSmartphonesAfterBoot = function() { + if(!isSmartphone()) return; + console.warn('running smartphone post boot stuff'); + + chat.toggle(); + smartphone.mapButton.click(); + + // disable img full view + $('#portaldetails').off('click', '**'); + + $('.leaflet-right').addClass('leaflet-left').removeClass('leaflet-right'); +} diff --git a/code/utils_misc.js b/code/utils_misc.js index 6a5e7157..20f259e7 100644 --- a/code/utils_misc.js +++ b/code/utils_misc.js @@ -89,6 +89,8 @@ window.unixTimeToHHmm = function(time) { window.rangeLinkClick = function() { if(window.portalRangeIndicator) window.map.fitBounds(window.portalRangeIndicator.getBounds()); + if(window.isSmartphone) + window.smartphone.mapButton.click(); } window.reportPortalIssue = function(info) { diff --git a/main.js b/main.js index 04a6c0f7..f3939458 100644 --- a/main.js +++ b/main.js @@ -51,6 +51,11 @@ for(var i = 0; i < d.length; i++) { var ir = window.internalResources || []; +var mainstyle = 'http://breunigs.github.com/ingress-intel-total-conversion/style.css?@@BUILDDATE@@'; +var smartphone = 'http://breunigs.github.com/ingress-intel-total-conversion/smartphone.css?@@BUILDDATE@@'; +var leaflet = 'http://cdn.leafletjs.com/leaflet-0.5/leaflet.css'; +var coda = 'http://fonts.googleapis.com/css?family=Coda'; + // remove complete page. We only wanted the user-data and the page’s // security context so we can access the API easily. Setup as much as // possible without requiring scripts. @@ -58,13 +63,17 @@ document.getElementsByTagName('head')[0].innerHTML = '' //~ + '' + 'Ingress Intel Map' + (ir.indexOf('mainstyle') === -1 - ? '' + ? '' : '') + (ir.indexOf('leafletcss') === -1 - ? '' + ? '' + : '') + // this navigator check is also used in code/smartphone.js + + (ir.indexOf('smartphonecss') === -1 && navigator.userAgent.match(/Android.*Mobile/) + ? '' : '') + (ir.indexOf('codafont') === -1 - ? '' + ? '' : ''); document.getElementsByTagName('body')[0].innerHTML = '' @@ -160,7 +169,11 @@ window.OPTIONS_RESONATOR_LINE_NON_SELECTED = {opacity: 0.25, weight: 2}; // it and how far the portal reaches (i.e. how far links may be made // from this portal) window.ACCESS_INDICATOR_COLOR = 'orange'; -window.RANGE_INDICATOR_COLOR = 'red'; +window.RANGE_INDICATOR_COLOR = 'red' + +// by how much pixels should the portal range be expanded on mobile +// devices. This should make clicking them easier. +window.PORTAL_RADIUS_ENLARGE_MOBILE = 5; window.DEFAULT_PORTAL_IMG = 'http://commondatastorage.googleapis.com/ingress/img/default-portal-image.png'; diff --git a/smartphone.css b/smartphone.css new file mode 100644 index 00000000..b04c1b21 --- /dev/null +++ b/smartphone.css @@ -0,0 +1,110 @@ +body { + background: #000; + color: #fff; +} + +#sidebar, #updatestatus, #chatcontrols, #chat, #chatinput { + background: #0B3351 !important +} + + +.leaflet-control-layers { + margin-left: 0 !important; + margin-top: 40px !important; +} + +#chatcontrols { + height: 38px; +} + +/* hide shrink button */ +#chatcontrols a:first-child { + display: none; +} + +#chatcontrols a { + width: 50px; + height:36px; + overflow: hidden; + vertical-align: middle; + line-height: 36px; + text-decoration: none; +} + +#chat { + left:0; + right:0; + top:37px !important; + bottom:30px; + width: auto; +} + +#chatinput { + width: 100%; + height: 30px; +} + +#chat td:nth-child(2), #chatinput td:nth-child(2) { + width: 77px; +} + + + + +#sidebartoggle { + display: none !important; +} + +#scrollwrapper { + top: 36px; + bottom: 0; + max-height: none !important; + width: 100% !important; + right: 0; + left:0; +} + +#sidebar { + width: 100% !important; + min-height: 100%; + border:0; +} + +#sidebar > * { + width: 100%; +} + +#playerstat { + margin-top: 5px; +} + +#portaldetails { + min-height: 0; +} + +.fullimg { + width: 100%; +} + +.leaflet-control-layers-base { + float: left; +} + +.leaflet-control-layers-overlays { + float: left; + margin-left: 8px; + border-left: 1px solid #DDDDDD; + padding-left: 8px; +} + +.leaflet-control-layers-separator { + display: none; +} + +.leaflet-control-layers-list label { + padding: 6px 0; +} + +.leaflet-control-attribution { + +}