Merge pull request #358 from grtjn/ui-themes

Fixing infoWindow, and improving display of random json in it

Author: grtjn

app/templates/rest-api/config/options/all.xml

@@ -126,9 +126,7 @@
   -->
 
   <!-- This will extract the latitude and longitude from the search. -->
-  <extract-document-data>
-    <extract-path>//location</extract-path>
+  <extract-document-data selected="all">
   </extract-document-data>
 
-
 </options>

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

@@ -0,0 +1,18 @@
+<dl class="dl-horizontal">
+  <span ng-repeat="(key,val) in parameter track by $index" ng-hide="key.startsWith('_')">
+    <dt>{{key}}</dt>
+    <!-- simple value -->
+    <dd ng-if="!(val | isObject)">{{ val !== '' ? val : '&#160;' }}</dd>
+    <!-- array or object -->
+    <span ng-if="(val | isObject)">
+      <!-- array with simple values -->
+      <dd ng-if="(val | isArray) && !(val[0] | isObject)">{{ val.join(', ') }}</dd>
+      <!-- add nbsp for better alignment of values -->
+      <dd ng-if="!(val | isArray) || (val[0] | isObject)">&#160;</dd>
+      <!-- object, recurse -->
+      <dd ng-if="!(val | isArray)" ng-init="parameter = val" ng-include="'app/map/infoWindow-details.html'"></dd>
+      <!-- array of object, repeat recurse -->
+      <dd ng-if="(val | isArray) && (val[0] | isObject)" ng-repeat="parameter in val track by $index" ng-include="'app/map/infoWindow-details.html'"></dd>
+    </span>
+  </span>
+</dl>

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

@@ -1,12 +1,9 @@
-  <div class="map-info-window" ng-class="{ isShown: parameter.showMe }">
-    <section class="heading">
-      <h4 class="window-title">{{ parameter.name || parameter.label }}</h4>
-    </section>
-    <section class="window-content">
-      <div class="photo" ng-if="parameter.photo"><img ng-src="images/photos/{{parameter.photo}}" ng-attr-alt="{{parameter.name}}"></div>
-      <div class="details">
-        <dl class="dl-horizontal">
-          <span ng-repeat="(key,val) in parameter"><dt>{{key}}</dt><dd>{{ val }}</dd>
-        </dl>
-      </div>
-    </section>
+<div class="map-info-window" ng-class="{ isShown: parameter.showMe }">
+  <section class="heading">
+    <h4 class="window-title">{{ parameter.name || parameter.label }}</h4>
+  </section>
+  <section class="window-content">
+    <div class="image" ng-if="parameter.picture || parameter.image || parameter.photo"><img ng-src="{{parameter.picture || parameter.image || parameter.photo}}" ng-attr-alt="{{parameter.name || parameter.label}}"></div>
+    <div class="details" ng-include="'app/map/infoWindow-details.html'"></div>
+  </section>
+</div>

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

@@ -3,7 +3,17 @@
 
   angular.module('app.root')
     .factory('rootUtils', RootUtilsFactory)
-    .controller('RootCtrl', RootCtrl);
+    .controller('RootCtrl', RootCtrl)
+    .filter('isObject', function() {
+      return function(val) {
+        return angular.isObject(val);
+      };
+    })
+    .filter('isArray', function() {
+      return function(val) {
+        return angular.isArray(val);
+      };
+    });
 
   function RootUtilsFactory() {
     var service = {}, width = window.innerWidth;