implement basic support for smartphones

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")
     + '</style>');
-
-  if(L.Browser.mobile) {
-    $('head').append('<style>'
-      + '#sidebar, #updatestatus, #chatcontrols, #chat, #chatinput { background: #0B3351 !important }'
-      + '</style>');
-  }
 }
 
 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);
 

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,

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('<style>' +
+      [ '#largepreview.enl img { border:2px solid '+COLORS[TEAM_ENL]+'; } ',
+        '#largepreview.res img { border:2px solid '+COLORS[TEAM_RES]+'; } ',
+        '#largepreview.none img { border:2px solid '+COLORS[TEAM_NONE]+'; } '].join("\n")
+      + '</style>');
+  }
+
+  // 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 = $('<a>map</a>').click(function() {
+    $('#chat, #chatinput, #scrollwrapper').hide();
+    $('#map').css('visibility', 'visible');
+    $('#updatestatus').show();
+    $('.active').removeClass('active');
+    $(this).addClass('active');
+  });
+
+  window.smartphone.sideButton = $('<a>info</a>').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');
+}

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) {

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 = ''
   //~ + '<link rel="stylesheet" type="text/css" href="http://0.0.0.0:8000/style.css"/>'
   + '<title>Ingress Intel Map</title>'
   + (ir.indexOf('mainstyle') === -1
-      ? '<link rel="stylesheet" type="text/css" href="http://breunigs.github.com/ingress-intel-total-conversion/style.css?@@BUILDDATE@@"/>'
+      ? '<link rel="stylesheet" type="text/css" href="'+mainstyle+'"/>'
       : '')
   + (ir.indexOf('leafletcss') === -1
-      ? '<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css"/>'
+      ? '<link rel="stylesheet" type="text/css" href="'+leaflet+'"/>'
+      : '')
+  // this navigator check is also used in code/smartphone.js
+  + (ir.indexOf('smartphonecss') === -1 && navigator.userAgent.match(/Android.*Mobile/)
+      ? '<link rel="stylesheet" type="text/css" href="'+smartphone+'"/>'
       : '')
   + (ir.indexOf('codafont') === -1
-      ? '<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Coda"/>'
+      ? '<link rel="stylesheet" type="text/css" href="'+coda+'"/>'
       : '');
 
 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';

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 {
+
+}