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