Merge pull request #1807 from grzesiek2010/imageMap

Select one and select multiple widgets using SVG image maps. Include with appearance image-map.

Uses javascript in a webview because Android SVG support is limited. Requires Android 5.0+.

collect_app/src/main/assets/svg_map_helper.js

@@ -0,0 +1,70 @@
+/*
+ * Copyright 2018 Nafundi
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+* JavaScript class which contains methods used for managing svg maps
+*/
+var selectedAreas = new Set();
+var originalColors = new Map();
+var lastSelectedAreaId;
+var isSingleSelect;
+
+function selectArea(areaId) {
+    imageMapInterface.selectArea(areaId);
+}
+
+function unselectArea(areaId) {
+    imageMapInterface.unselectArea(areaId);
+}
+
+function notifyChanges() {
+    imageMapInterface.notifyChanges();
+}
+
+function addSelectedArea(selectedAreaId) {
+    selectedAreas.add(selectedAreaId);
+    document.getElementById(selectedAreaId).setAttribute('style', 'fill: #E65100');
+    if (Boolean(isSingleSelect)) {
+        lastSelectedAreaId = selectedAreaId;
+    }
+}
+
+function addArea(areaId) {
+    originalColors.set(areaId, document.getElementById(areaId).style.color);
+}
+
+function setSelectMode(isSingleSelect) {
+    this.isSingleSelect = isSingleSelect;
+}
+
+function clickOnArea(areaId) {
+    if (selectedAreas.has(areaId)) {
+        document.getElementById(areaId).setAttribute('style', 'fill: ' + originalColors.get(areaId));
+        selectedAreas.delete(areaId);
+        unselectArea(areaId);
+    } else {
+        if (Boolean(isSingleSelect) && !!lastSelectedAreaId) {
+            document.getElementById(lastSelectedAreaId).setAttribute('style', 'fill: ' + originalColors.get(lastSelectedAreaId));
+            selectedAreas.delete(lastSelectedAreaId);
+            unselectArea(lastSelectedAreaId);
+        }
+        document.getElementById(areaId).setAttribute('style', 'fill: #E65100');
+        selectedAreas.add(areaId);
+        selectArea(areaId);
+        lastSelectedAreaId = areaId;
+    }
+    notifyChanges();
+}

collect_app/src/main/java/org/odk/collect/android/views/CustomWebView.java

@@ -0,0 +1,48 @@
+/*
+ * Copyright 2018 Nafundi
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package org.odk.collect.android.views;
+
+import android.content.Context;
+import android.view.MotionEvent;
+import android.webkit.WebView;
+
+public class CustomWebView extends WebView {
+
+    public CustomWebView(Context context) {
+        super(context);
+    }
+
+    private boolean suppressFlingGesture;
+
+    @Override
+    public boolean onTouchEvent(MotionEvent event) {
+        requestDisallowInterceptTouchEvent(true);
+        switch (event.getAction()) {
+            case MotionEvent.ACTION_DOWN:
+                suppressFlingGesture = true;
+                break;
+            case MotionEvent.ACTION_UP:
+                suppressFlingGesture = false;
+                break;
+        }
+        return super.onTouchEvent(event);
+    }
+
+    public boolean suppressFlingGesture() {
+        return suppressFlingGesture;
+    }
+}

collect_app/src/main/java/org/odk/collect/android/widgets/QuestionWidget.java

@@ -152,7 +152,7 @@ private MediaLayout createQuestionMediaLayout(FormEntryPrompt prompt) {
             questionText.setVisibility(GONE);
         }
 
-        String imageURI = prompt.getImageText();
+        String imageURI = this instanceof SelectImageMapWidget ? null : prompt.getImageText();
         String audioURI = prompt.getAudioText();
         String videoURI = prompt.getSpecialFormQuestionText("video");