{ "id": "165795", "key": "TIMOB-24375", "fields": { "issuetype": { "id": "2", "description": "A new feature of the product, which has yet to be developed.", "name": "New Feature", "subtask": false }, "project": { "id": "10153", "key": "TIMOB", "name": "Titanium SDK/CLI", "projectCategory": { "id": "10100", "description": "Titanium and related SDKs used in application development", "name": "Client" } }, "fixVersions": [ { "id": "18414", "description": "", "name": "Release 6.2.0", "archived": false, "released": true, "releaseDate": "2017-09-13" } ], "resolution": { "id": "1", "description": "A fix for this issue is checked into the tree and tested.", "name": "Fixed" }, "resolutiondate": "2017-08-17T12:46:15.000+0000", "created": "2017-02-06T20:04:43.000+0000", "priority": { "name": "Medium", "id": "3" }, "labels": [], "versions": [ { "id": "18154", "name": "Release 6.0.1", "archived": false, "released": true, "releaseDate": "2016-12-21" } ], "issuelinks": [ { "id": "55726", "type": { "id": "10000", "name": "Blocks", "inward": "is blocked by", "outward": "blocks" }, "inwardIssue": { "id": "169216", "key": "TIMOB-25046", "fields": { "summary": "iOS: Peek and Pop functionality not working with 6.1.0 G.A and above", "status": { "description": "The issue is considered finished, the resolution is correct. Issues which are closed can be reopened.", "name": "Closed", "id": "6", "statusCategory": { "id": 3, "key": "done", "colorName": "green", "name": "Done" } }, "priority": { "name": "Critical", "id": "1" }, "issuetype": { "id": "1", "description": "A problem which impairs or prevents the functions of the product.", "name": "Bug", "subtask": false } } } } ], "assignee": { "name": "vijaysingh", "key": "vijaysingh", "displayName": "Vijay Singh", "active": true, "timeZone": "America/Los_Angeles" }, "updated": "2017-08-23T20:37:47.000+0000", "status": { "description": "The issue is considered finished, the resolution is correct. Issues which are closed can be reopened.", "name": "Closed", "id": "6", "statusCategory": { "id": 3, "key": "done", "colorName": "green", "name": "Done" } }, "components": [ { "id": "10206", "name": "iOS", "description": "iOS Platform" } ], "description": "h5. Issue Description \r\n\r\nWhen the user \"force touch\" on the map view annotation right image, we should catch the peek event listener for that annotation view and display a custom view with some actions like show direction, call etc.\r\n\r\nUsecase:\r\nIn the application, customer is showing the addresses of the doctors available with in 25 km radius of the user selected location on a map view.\r\n\r\nThere can be 25 pins near by the user selected location, all these locations are shown as annotations. when the user taps on a particular annotation the info should be displayed as title and subtitle of the annotation. \r\n\r\nAlso there will be a right image in the annotation, below are the events expected to be performed on tap or force touch of the annotation.\r\n\r\nh5. Steps to Reproduce \r\n# Create a new classic app mobile project \r\n# Paste the code \r\n{code}\r\nvar MapModule = require('ti.map');\r\nvar win = Ti.UI.createWindow();\r\n \r\n \r\nvar left = Ti.UI.createView({\r\nheight: Ti.UI.SIZE,//90,\r\nwidth: Ti.UI.SIZE,//200,\r\nisCustom:true\r\n//layout: 'vertical'\r\n});\r\nvar img1= Ti.UI.createImageView({\r\nimage:'KS_nav_views.png'\r\n});\r\nvar button = Ti.UI.createLabel({\r\nheight: 30,\r\nwidth: Ti.UI.SIZE,\r\ntext: 'Button 1'\r\n});\r\nvar button1 = Ti.UI.createLabel({\r\nheight: 10,\r\n\r\nwidth: Ti.UI.SIZE,\r\ntext: 'Button 2'\r\n});\r\nvar button2 = Ti.UI.createLabel({\r\nheight: 20,\r\n\r\nwidth: Ti.UI.SIZE,\r\ntext: 'Button 3',\r\nbottom: 10\r\n});\r\n left.add(img1);\r\n//left.add(button);\r\n //left.add(button1);\r\n //left.add(button2);\r\n\r\nvar mainView=Ti.UI.createImageView({\r\n  height: 70,\r\nwidth: 200,\r\n//image: left.toImage() // uncommenting this line will render the UI correctly even though we are nopt adding this view any where\r\n});\r\n //mainView.backgroundImage = left.toImage();\r\nvar pin = MapModule.createAnnotation({\r\n    latitude:37.390749,\r\n    longitude:-122.081651,\r\n    title:\"Title1 \",\r\n    //subtitle:'Mountain View, CA',\r\n    pincolor:MapModule.ANNOTATION_RED,\r\n    animate:true,\r\n   // leftView: left,//mainView,\r\n   rightView:left\r\n    //rightButton : 'KS_nav_views.png'\r\n}); \r\n \r\nvar mapview = MapModule.createView({\r\n    mapType: MapModule.NORMAL_TYPE,\r\n    animate:true,\r\n    regionFit:true,\r\n    userLocation: false,\r\n    annotations: [pin]\r\n}); \r\n \r\nwin.add(mapview);\r\n
\r\nleft.previewContext = Ti.UI.iOS.createPreviewContext({\r\nactions:[],\r\npreview:Ti.UI.createView({\r\nwidth:120,\r\nheight:120,\r\nbackgroundColor:'red',\r\ncustom : left.isCustom,\r\nmyAnnotation:pin\r\n})\r\n}); \r\n
\r\n \r\n  left.previewContext.addEventListener(\"peek\", function(e) {\r\n        Ti.API.warn(\"The view was peeked - Update the preview here if you want to\");\r\n        alert(\"info>>>>>>\"+JSON.stringify(e));\r\n    });\r\n \r\n   left.previewContext.addEventListener(\"pop\", function() {\r\n        Ti.API.warn(\"The view was popped - Open the full context here\");\r\n    });\r\n
\r\nwin.open();\r\n\r\n{code}\r\n# Run \r\n# Try The \"Peek & pop\" \r\n\r\nh5. Expected Results\r\n\r\n1. When the user taps (click event of the map view annotation) on the annotation we should be displaying a view or optional dialog with different options like directions, call and profile.\r\n2.When the user \"force touch\" the map annotation on the devices which supports the peek & pop functionality (iPhone 6s and above), we should catch the peek event and display a custom preview view with options call, directions and profile.\r\n\r\nA. Tapping on the directions option should take the user to google maps with route plotted between the user current selected location and the doctor location.\r\nB. Tapping on the call option will place a call to doctors phone number.\r\nC . Tapping on the profile take the user where more detailed information of the doctor is shown.\r\n\r\nLimitations or Problems:\r\n\r\n1. There is no \" Preview Context\" property for the annotation directly. \r\n2. There is \"Preview context\" property for the map view, but we want to implement this feature only on the force touch of right image in annotation.\r\n3. Applying \"Preview Context\" for map view does not suffice our requirement as we are not getting the source in the map view peek event.\r\n4. Tried achieving this adding a custom right view to the annotation. But the right view is not rendered properly, there are some limitations. Below are some:\r\n\r\na) Unable to add a label or button or image view as right view to annotation.\r\nb) able to add only a plain view to the annotation right view. if we are creating a view and adding label, button or image view to that view and setting the view as right view of annotation, right view is not rendered.\r\n", "attachment": [], "flagged": false, "summary": "iOS: Implement \"Peek & Pop\" for Map view Annotation", "creator": { "name": "rramirez", "key": "rramirez", "displayName": " Ricardo Ramirez", "active": true, "timeZone": "America/Los_Angeles" }, "subtasks": [], "reporter": { "name": "rramirez", "key": "rramirez", "displayName": " Ricardo Ramirez", "active": true, "timeZone": "America/Los_Angeles" }, "environment": "iOS 10.2\r\n", "comment": { "comments": [ { "id": "406418", "author": { "name": "emerriman", "key": "emerriman", "displayName": "Eric Merriman ", "active": true, "timeZone": "America/Los_Angeles" }, "body": "[~rramirez] This should be a feature request, correct?", "updateAuthor": { "name": "emerriman", "key": "emerriman", "displayName": "Eric Merriman ", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2017-02-06T20:15:46.000+0000", "updated": "2017-02-06T20:15:46.000+0000" }, { "id": "426840", "author": { "name": "vijaysingh", "key": "vijaysingh", "displayName": "Vijay Singh", "active": true, "timeZone": "America/Los_Angeles" }, "body": "PR - https://github.com/appcelerator-modules/ti.map/pull/209\r\nTest Case 1.\r\n\r\n{code:js}\r\nvar MapModule = require('ti.map');\r\n\r\nif (!Ti.UI.iOS.forceTouchSupported) {\r\n alert('NOT SUPPORTED!');\r\n}\r\n\r\nvar actions = [];\r\n\r\nvar win = Ti.UI.createWindow({\r\n backgroundColor: \"white\"\r\n});\r\n\r\n// The actions to be added to the preview context.\r\nvar action = Ti.UI.iOS.createPreviewAction({\r\n title: \"Directions\",\r\n style: Ti.UI.iOS.PREVIEW_ACTION_STYLE_DEFAULT\r\n});\r\n\r\nvar actionCall = Ti.UI.iOS.createPreviewAction({\r\n title: \"Call\",\r\n style: Ti.UI.iOS.PREVIEW_ACTION_STYLE_DEFAULT\r\n});\r\n\r\naction.addEventListener(\"click\", function(e) {\r\n alert(\"Title: \" + e.title + \" / Style: \" + e.style + \" / Index: \" + e.index);\r\n});\r\n\r\nactionCall.addEventListener(\"click\", function(e) {\r\n alert(\"Title: \" + e.title + \" / Style: \" + e.style + \" / Index: \" + e.index);\r\n});\r\n\r\nvar actionProfile = Ti.UI.iOS.createPreviewAction({\r\n title: \"Call Profile\",\r\n style: Ti.UI.iOS.PREVIEW_ACTION_STYLE_DEFAULT\r\n});\r\n\r\nactionProfile.addEventListener(\"click\", function(e) {\r\n alert(\"Title: \" + e.title + \" / Style: \" + e.style + \" / Index: \" + e.index);\r\n});\r\n\r\nactions.push(action);\r\nactions.push(actionCall);\r\nactions.push(actionProfile);\r\n\r\nvar pview = Ti.UI.createView({\r\n height: 100,\r\n backgroundColor: 'white'\r\n});\r\n\r\npview.add(Ti.UI.createLabel({\r\n text: 'Address\\n Title',\r\n color: 'black'\r\n}));\r\n\r\n// Create the preview context\r\nvar context = Ti.UI.iOS.createPreviewContext({\r\n actions: actions, // Can have both Ti.UI.iOS.PreviewAction + Ti.UI.iOS.PreviewActionGroup\r\n contentHeight: 100, // When unspecified, we use the available height\r\n preview: pview\r\n});\r\n\r\nvar pin1 = MapModule.createAnnotation({  \r\n latitude: 37.390749,\r\n longitude: -122.081651,\r\n title: \"Title1 \",\r\n subtitle: 'Mountain View, CA',\r\n pincolor: MapModule.ANNOTATION_RED,\r\n animate: true,\r\n previewContext: context,\r\n}); \r\n\r\nvar pin2 = MapModule.createAnnotation({  \r\n latitude: 38.390749,\r\n longitude: -122.081651,\r\n title: \"Title2 \",\r\n subtitle: 'Mountain View, CA',\r\n pincolor: MapModule.ANNOTATION_RED,\r\n animate: true,\r\n previewContext: context,\r\n});\r\n\r\ncontext.addEventListener(\"peek\", function(e) {\r\n Ti.API.warn('in peek');\r\n});\r\n\r\ncontext.addEventListener(\"pop\", function(e) {\r\n Ti.API.warn('in pop');\r\n});\r\nvar mapview = MapModule.createView({  \r\n mapType: MapModule.NORMAL_TYPE,\r\n animate: true,\r\n regionFit: true,\r\n userLocation: false,\r\n annotations: [pin1, pin2]\r\n}); \r\nwin.add(mapview);\r\nwin.open();\r\n{code}\r\n\r\nTest Case 2.\r\n{code:js}\r\nvar Map = require('ti.map');\r\n\r\nif (!Ti.UI.iOS.forceTouchSupported) {\r\n alert('NOT SUPPORTED!');\r\n}\r\n\r\nTi.API.info('Initially even numbered annotations will be having force touch enabled');\r\n\r\nvar ann = [];\r\nvar actions = [];\r\n\r\nvar win = Titanium.UI.createWindow({\r\n fullscreen: true,\r\n});\r\n\r\n// The actions to be added to the preview context.\r\nvar action = Ti.UI.iOS.createPreviewAction({\r\n title: \"Enable force touch for 1\",\r\n style: Ti.UI.iOS.PREVIEW_ACTION_STYLE_DEFAULT\r\n});\r\n\r\nvar actionCall = Ti.UI.iOS.createPreviewAction({\r\n title: \"Enable force touch for 3\",\r\n style: Ti.UI.iOS.PREVIEW_ACTION_STYLE_DEFAULT\r\n});\r\n\r\naction.addEventListener(\"click\", function(e) {\r\n var annot = ann[1];\r\n annot.setPreviewContext(context);\r\n Ti.API.info('Force touch enabled for annotation numbered 1');\r\n});\r\n\r\nactionCall.addEventListener(\"click\", function(e) {\r\n var annot = ann[3];\r\n annot.setPreviewContext(context);\r\n Ti.API.info('Force touch enabled for annotation numbered 3');\r\n});\r\n\r\nvar actionProfile = Ti.UI.iOS.createPreviewAction({\r\n title: \"Enable force touch for 5\",\r\n style: Ti.UI.iOS.PREVIEW_ACTION_STYLE_DEFAULT\r\n});\r\n\r\nactionProfile.addEventListener(\"click\", function(e) {\r\n var annot = ann[5];\r\n annot.setPreviewContext(context);\r\n Ti.API.info('Force touch enabled for annotation numbered 5');\r\n});\r\n\r\nactions.push(action);\r\nactions.push(actionCall);\r\nactions.push(actionProfile);\r\n\r\nvar pview = Ti.UI.createView({\r\n height: 100,\r\n backgroundColor: 'white'\r\n});\r\n\r\npview.add(Ti.UI.createLabel({\r\n text: 'Address\\n Title',\r\n color: 'black'\r\n}));\r\n\r\n// Create the preview context\r\nvar context = Ti.UI.iOS.createPreviewContext({\r\n actions: actions, // Can have both Ti.UI.iOS.PreviewAction + Ti.UI.iOS.PreviewActionGroup\r\n contentHeight: 100, // When unspecified, we use the available height\r\n preview: pview\r\n});\r\n\r\nvar createMapIcon = function createMapIconFn(number) {\r\n\r\n var image = Ti.UI.createView({\r\n height: Ti.UI.SIZE,\r\n width: Ti.UI.SIZE,\r\n backgroundColor: 'transparent',\r\n\r\n });\r\n var imageBack = Ti.UI.createView({\r\n height: 50,\r\n width: 50,\r\n borderRadius: 17,\r\n backgroundColor: 'white',\r\n borderColor: 'black',\r\n top: 0,\r\n });\r\n\r\n imageBack.add(Ti.UI.createLabel({\r\n text: number,\r\n color: 'black',\r\n width: Ti.UI.SIZE,\r\n height: Ti.UI.SIZE,\r\n top: 5\r\n\r\n }));\r\n image.add(imageBack);\r\n return image;\r\n};\r\n\r\nfor (var i = 0; i < 6; i++) {\r\n\r\n var annotation = Map.createAnnotation({\r\n\r\n customView: createMapIcon(i),\r\n latitude: Math.random() * 10 + 40,\r\n longitude: Math.random() * 10,\r\n });\r\n if (i % 2 == 0) {\r\n annotation.setPreviewContext(context);\r\n }\r\n ann.push(annotation);\r\n};\r\n\r\nvar mapview = Map.createView({\r\n annotations: ann,\r\n bottom: 0,\r\n right: 0,\r\n width: Ti.UI.FILL,\r\n height: Ti.UI.FILL,\r\n rotateEnabled: false,\r\n compassEnabled: false,\r\n mapType: Map.HYBRID_TYPE,\r\n showsPointsOfInterest: false,\r\n userLocation: true,\r\n\r\n});\r\nwin.add(mapview);\r\nwin.open();\r\n{code}\r\n", "updateAuthor": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "created": "2017-08-17T10:10:59.000+0000", "updated": "2017-08-17T12:10:32.000+0000" }, { "id": "426845", "author": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "body": "Review passed, new release 2.12.0 available [here|https://github.com/appcelerator-modules/ti.map/releases/tag/ios-2.12.0]. Please not that I pushed one more commit that fixes a build issue when compiling the module. \r\n\r\nThe module can be used today and will also be pre-packaged in 6.2.0 as well.", "updateAuthor": { "name": "hknoechel", "key": "hansknoechel", "displayName": "Hans Knöchel", "active": true, "timeZone": "Europe/Berlin" }, "created": "2017-08-17T12:46:15.000+0000", "updated": "2017-08-17T12:46:15.000+0000" }, { "id": "427055", "author": { "name": "ewieber", "key": "ewieber", "displayName": "Eric Wieber", "active": false, "timeZone": "America/Los_Angeles" }, "body": "I encounter a crash when using the new module and performing two peek and pop actions in a row. I am able to reproduce this with either of the sample codes above.", "updateAuthor": { "name": "ewieber", "key": "ewieber", "displayName": "Eric Wieber", "active": false, "timeZone": "America/Los_Angeles" }, "created": "2017-08-22T21:24:20.000+0000", "updated": "2017-08-22T21:24:20.000+0000" }, { "id": "427080", "author": { "name": "vijaysingh", "key": "vijaysingh", "displayName": "Vijay Singh", "active": true, "timeZone": "America/Los_Angeles" }, "body": "[~ewieber], I assume you are verifying using SDK 6.1.x . This ticket was blocked by TIMOB-25046 as mentioned above. TIMOB-25046 is fixed in 6.2.0. So you have to test it on SDK 6.2.0 onwards or before SDK 6.0.3.GA .", "updateAuthor": { "name": "vijaysingh", "key": "vijaysingh", "displayName": "Vijay Singh", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2017-08-23T04:36:48.000+0000", "updated": "2017-08-23T04:36:48.000+0000" }, { "id": "427107", "author": { "name": "ewieber", "key": "ewieber", "displayName": "Eric Wieber", "active": false, "timeZone": "America/Los_Angeles" }, "body": "Thanks Vijay, you are correct. Tested and verified implemented, using:\r\nMacOS 10.12.6 (16G24b)\r\nStudio 4.9.0.201705302345\r\nTi SDK 6.2.0.v20170823024940\r\nAppc NPM 4.2.9\r\nAppc CLI 6.2.3\r\nAlloy 1.9.13\r\nXcode 8.3.3 (8E3004b)\r\n\r\nPeek and pop events are caught and can be addressed without error. A custom view can be displayed in response to the events.", "updateAuthor": { "name": "ewieber", "key": "ewieber", "displayName": "Eric Wieber", "active": false, "timeZone": "America/Los_Angeles" }, "created": "2017-08-23T20:37:47.000+0000", "updated": "2017-08-23T20:37:47.000+0000" } ], "maxResults": 11, "total": 11, "startAt": 0 } } }