Map theme fixes for mobile mode

Author: grtjn

app/templates/ui/app/root/root.html

@@ -3,6 +3,10 @@
 
   <nav class="navbar navbar-default navbar-fixed-top nav" role="navigation">
     <div class="navbar-header">
+      <button type="button" class="sidebar-toggle">
+        <span class="sr-only">Toggle sidebar</span>
+        <span class="fa fa-bars"></span>
+      </button>
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>

app/themes/map/ui/app/app.js

@@ -0,0 +1,35 @@
+(function () {
+  'use strict';
+
+  angular.module('app', [
+    'ml.common',
+    'ml.search',
+    'ml.search.tpls',
+    'ml.utils',
+    'ngJsonExplorer',
+    'app.create',
+    'app.detail',
+    'app.error',
+    'app.login',
+    'app.root',
+    'app.search',
+    'app.user',
+    'ui.bootstrap',
+    'ui.router',
+    'ui.tinymce',
+    'ngToast',
+    'uiGmapgoogle-maps'
+  ])
+  .config(['uiGmapGoogleMapApiProvider', function(uiGmapGoogleMapApiProvider) {
+    var libs = uiGmapGoogleMapApiProvider.options.libraries;
+    if (libs === '') {
+      libs = 'drawing';
+    } else {
+      libs = libs.split(',').push('drawing').join(',');
+    }
+    uiGmapGoogleMapApiProvider.configure({
+      libraries: libs
+    });
+  }]);
+
+}());

app/themes/map/ui/app/map/infoWindow.html

@@ -1,5 +1,6 @@
 <div class="map-info-window" ng-class="{ isShown: parameter.showMe }">
   <section class="heading">
+    <div class="info-close"><a ng-click="parameter.close()"><i class="fa fa-close"></i></a></div>
     <h4 class="window-title">{{ parameter.name || parameter.label }}</h4>
   </section>
   <section class="window-content">

app/themes/map/ui/app/root/root.controller.js

@@ -30,20 +30,6 @@
       return width < 992; // match bootrap sm
     };
 
-    service.controlsAreShown = !service.isMobile();
-
-    service.toggleControls = function() {
-      service.controlsAreShown = !service.controlsAreShown;
-    };
-
-    service.hideControls = function() {
-      service.controlsAreShown = false;
-    };
-
-    service.showControls = function() {
-      service.controlsAreShown = true;
-    };
-
     return service;
   }
 
@@ -61,9 +47,9 @@
       ctrl.currentUser = newValue;
     });
 
-    var miw = window.jQuery('#app-mobile-info-window').get(0); // FIXME: use angular.element?
+    var miw = window.jQuery('#map-mobile-info-window').get(0); // FIXME: use angular.element?
     var miwscope = $rootScope.$new(), mobileWin;
-    var pixelOffset,shownMarker;
+    var pixelOffset,shownMarker,shown;
     var $googleMaps = null;
 
     $googleMapsApi.then(function($gMaps) {
@@ -72,9 +58,8 @@
 
     ctrl.mapManager = mlMapManager;
 
-    ctrl.isMobile = rootUtils.isMobile();
-
-    if (ctrl.isMobile) {
+    if (rootUtils.isMobile()) {
+      ctrl.hideControls = true;
       // compile the info window template
       // FIXME: can we use ng-include somehow? or the compile directive?
       $templateRequest('app/map/infoWindow.html').then(function(html) {
@@ -102,6 +87,8 @@
 
       if (!marker.content) {
         inst.map.setCenter(position);
+        ctrl.infoWindow.shown = false;
+        delete ctrl.infoWindow.data;
       } else if (rootUtils.isMobile()) {
         if (!mobileWin) {
           mobileWin = new $googleMaps.InfoWindow({ content: '<span>' + marker.title + '</span>' });
@@ -113,23 +100,30 @@
         } else {
           mobileWin.setContent('<span>' + marker.title + '</span>');
         }
-        var shown = (shownMarker !== marker.title);
+        shown = (shownMarker === marker.title);
         if (shown) {
-          mobileWin.open(inst.getMap(), inst);
-        } else {
           mobileWin.close();
+        } else {
+          mobileWin.open(inst.getMap(), inst);
         }
         // for mobile we show our own window
         miwscope.parameter = marker.content;
         miwscope.parameter.showMe = shown;
+        miwscope.parameter.close = function() {
+          mobileWin.close();
+          miwscope.parameter.showMe = false;
+          shownMarker = null;
+        };
         shownMarker = marker.title;
         inst.map.setCenter(position);
 
       } else {
 
         // otherwise manipulate the google map infowindow
-        if (ctrl.infoWindow.shown) {
+        shown = (shownMarker === marker.title);
+        if (shown) {
           ctrl.infoWindow.shown = false;
+          shownMarker = null;
         } else {
           ctrl.infoWindow.coords = {
             latitude: marker.location.latitude,
@@ -138,6 +132,7 @@
           ctrl.infoWindow.shown = true;
           ctrl.infoWindow.data = marker.content;
           inst.map.setCenter(position);
+          shownMarker = marker.title;
         }
       }
     };

app/themes/map/ui/app/root/root.html

@@ -3,7 +3,11 @@
 
   <nav class="navbar navbar-default navbar-fixed-top nav" role="navigation">
     <div class="navbar-header">
-      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sidebar" ng-click="ctrl.toggleControls()">
+      <button type="button" class="controls-toggle btn btn-default pull-left" ng-click="ctrl.hideControls = !ctrl.hideControls">
+        <span class="sr-only">Toggle sidebar</span>
+        <span class="fa fa-bars"></span>
+      </button>
+      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
@@ -52,7 +56,9 @@
       </ui-gmap-drawing-manager>
     </ui-gmap-google-map>
 
-    <div id="sidebar">
+    <div id="map-mobile-info-window"></div>
+
+    <div id="sidebar" ng-show="!ctrl.hideControls">
       <div id="map-controls" class="container">
         <ui-view></ui-view>
       </div>

app/themes/map/ui/index.html

@@ -129,6 +129,10 @@ h1#logo {
   }
 }
 
+#map-mobile-info-window { display: none; }
+
+.map-info-window .info-close { display: none; }
+
 @media(max-width: 992px) {
   #logo {
     left: 25px;
@@ -144,6 +148,62 @@ h1#logo {
       margin-top: -25px;
     }
   }
+
+  #map-mobile-info-window {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 0;
+    display: block;
+
+    .map-info-window {
+      position: relative;
+      margin-top: -250px;
+      height: 250px;
+      background-color: #FFF;
+      width: 100%;
+      z-index: 600;
+      overflow: auto;
+      display: none;
+
+      &.isShown {
+        display: block;
+      }
+
+      .photo {
+        position: absolute;
+        right: 15px;
+        top: 65px;
+        z-index: 599;
+      }
+
+      .heading {
+        position: fixed;
+        bottom: 222px;
+        width: 100%;
+        z-index: 600;
+      }
+
+      .window-content {
+        padding-top: 31px;
+
+        .details { width: 100%; }
+        .dl-horizontal dt { width: 50%; }
+      }
+
+      .info-close {
+        display: block;
+        position: absolute;
+        right: 3px;
+        top: 2px;
+        i {
+          color: #971a25;
+        }
+      }
+
+    }
+  }
 }
 
 #map-controls {
@@ -181,18 +241,17 @@ a.navbar-brand {
 nav.navbar {
   padding: 5px 20px;
   min-height: 20px;
+
+  .controls-toggle {
+     margin-left: -12px;
+     margin-top: 2px;
+  }
 }
 
 nav > .navbar-collapse > .navbar-nav > li > a {
   padding: 5px;
 }
 
-.navbar-toggle {
-  display: block;
-  margin: 0px 5px;
-  padding: 6px;
-}
-
 nav .welcome {
   margin-top: 5px;
 }