Angularjs: linking to phone's mapping app - ios

I have a webapp that wants to offload walking / driving directions to a phone's native apps. This would be Google Maps app and maps.apple.com for Android and iOS respectively. I can detect the phone from the user agent presumably, but I can't work out how to configure the link.
<li><a href ng-click="geoHandler()"> Directions</a></li>
This is what I have in the relevant controller.
$scope.geoHandler = function() {
// user agent sniffing here
var path = "geo:0,0?q="+$scope.resto.lat+","+$scope.resto.lng+"("+$scope.resto.rname+")";
// var path = http://maps.apple.com/?ll=$scope.resto.lat+","+$scope.resto.lng
return $location.path(path);
}
When I had the geo link as the href in the html, the phone did the right thing, but now this code is taking me simply to the home page of my SPA.
So, my questions are:
is ng-click the right way to go (I can't use a function with ng-href I think);
how do I launch an intent via $location?

OK, I moved to a different and simpler approach. Not sure whether it is the most elegant, but it works.
View
<a ng-href="{{geoPath}}">Directions</a>
Controller
if ( /iPhone/.test(navigator.userAgent))
path = "http://maps.apple.com/?ll="+$scope.resto.lat+","+$scope.resto.lng";
else path = "geo:0,0?q="+$scope.resto.lat+","+$scope.resto.lng+"("+$scope.resto.rname+")";
$scope.geoPath = path;

Related

Google Script to open URL in same window as Spreadsheet

I'm trying to work around the lack of API for Google Spreahsheet's Filter Views, by passing the filter view's URL into a hyperlink displayed in a sidebar.
Importantly: I want the filter view URL to open in the same window as, and thus replace, the spreadsheet. The hyperlink target should then be _self
function listFilterViews(){
var uiInstance = UiApp.createApplication()
.setTitle('Teacher Views');
var panel = uiInstance.createVerticalPanel();
panel.setSpacing(5)
var scroll = uiInstance.createScrollPanel();
scroll.setHeight("100%")
var url = "https://docs.google.com/blablabla"
var link = uiInstance.createAnchor("click me", url)
link.setTarget("_self")
panel.add(link);
scroll.add(panel)
uiInstance.add(scroll);
SpreadsheetApp.getUi().showSidebar(uiInstance);
}
However, the URL doesn't open in the same window as expected but in an other window instead. How can I fix this?
According to the setTarget documentation:
"(setting a target to _self) will only work if the app is being shown as a standalone service. It will have no effect when called inside a dialog, such as in a Google Spreadsheet."
Apps Script intentionally prevents scripts from being able to switch the view of the current window, as a security measure.

Caching visited page in Jquery Mobile

I work on Jquery Mobile/Phonegap app for android.
I´d like my app to "remember" that(if) the user has visited one of my pages. For example if he once visits "page1.html", this action should be cached in the phone memory, so that when the user opens the app again there should be possibility to navigate to this "page2.html" directly from "index.thml".
Please, if you have a code suggestion, tell me also how/where do I use it, because sometimes for starters like me it is realy hard to understand what to do with a little piece code.
Thank you very much!
You can use HTML5 local storage for this purpose.
Each time when a page is shown you can save/update the current page URL to a local storage variable, say 'lastVisit', as below:
$(document).on('pageshow', function (event, data) {
var currentPage = $('.ui-page-active').data('url');
localStorage.setItem("lastVisit", currentPage);
});
If you are not getting $('.ui-page-active').data('url'), then you can use $.mobile.activePage.attr('id') which will give you the current page id.
So next time, when the user opens the app again, you can check whether this local storage variable is set and can action accordingly.
The code will look like as below:
$(document).on('mobileinit', function(){
var lastVisit = '';
if(localStorage.getItem("lastVisit") != null){
lastVisit = localStorage.getItem("lastVisit");
}
if(lastVisit){
document.location.href = lastVisit;
}
});
You can use these codes in the header section scripts.

ms-webview src property points to "local-stream:///" not "ms-appdata:///"

I have some code that loads an html file in a ms-webview within a Windows 8 store app (winJS) and I'm having an issue checking the URL src of the ms-webview. Basically, the user is able to navigate within the local html files, but I want to detect when they are back on the "home" screen...
var home = "ms-appdata://local/somefile.html";
myWebView.addEventListener("MSWebViewContentLoading", function(e) {
console.log(myWebView.src); // something like: ms-local-stream://[app_key]/somefile.html
console.log(e.uri); // same as above
if (myWebView.src === home) {
// nope...
}
});
myWebView.navigate(home);
As you can see above, the webview doesn't seem to give me a way to get the URL that I actually navigated to... Thoughts?
And yes, I could inspect the ms-local-stream URL path for the file I'm looking for, but surely there's a way to get the URL that was navigate to from the webview??

Info Window URL needs to be prefixed with http NOT the default https

I am using the following code in the fusion tables 'customize info window' to create hyperlinked URL's from a column in my table:
"{URL}"
This works fine in returning the clickable hyperlink in the info box except fusion maps by default tacks on https: instead of http: when the link is clicked. This causes problems when the user clicks the hyperlink and it tries to take them to a secure site when in fact it is not secure. The browsers throw up all sorts of warnings that will scare the pants off a lot of users who don't know what is happening.
Does anybody know how to remedy this and have the default be http and not the current https?
Thanks, Shep
You may want to abandon the "{URL}" approach and display the hyperlink with some simple HTML. This example from Google shows how to modify the info window's HTML in Javascript:
google.maps.event.addListener(layer, 'click', function(e) {
// Change the content of the InfoWindow
e.infoWindowHtml = e.row['Store Name'].value + "<br>";
// If the delivery == yes, add content to the window
if (e.row['delivery'].value == 'yes') {
e.infoWindowHtml += "Delivers!";
}
});
Changing the e.row['Store Name'] to your URL column name (maybe, e.row['URL']) and surrounding by a couple of hyperlink tags <a> should do the trick:
e.infoWindowHtml = "<a href='" + e.row['URL'].value + "'>Click here!</a>";
There are three ways:
Specify a full URL including protocol in your data
Use Link here in a custom info window layout
Completely override the content as in the answer above
I would recommend #1 because you can choose the right protocol for every link. However #2 is probably easier in that you can leave your data the way it is.

Photoswipe Custom Hashtag Immediately Closes Slideshow

Testing on the desktop with JQM doesn't produce this issue, so it's difficult to pinpoint.
Backstory: I have created server side code (php) to accept a query string and open a gallery straight to a picture. But if a user wants to share a link while surfing a gallery on a mobile device, and in particular a certain photo; most Mobile Browsers share the core link and not the actual photo. It's easy in the events when swiping to create a URL hashtag modifier for the URL with the photo id ( For example #photoID=987), but only if the gallery is originally started with no hashtags. It's then easy to share with a Phone's Native methods.
(function(window, $, PhotoSwipe){
$(document).ready(function(){
//More Code is here but not needed fro this question
$(photoSwipeInstance).bind(PhotoSwipe.EventTypes.onDisplayImage, function(e){
var pid = codeThatGetsPhotoIDFromDisplayedIMGURL();
window.location.hash = '&pid='+pid[0];
});
if(getUrlVars()["pid"]!=null || getUrlVars()["pid"]!=undefined)
{
console.log(getUrlVars()["pid"]);
var photopid= getPhoto(getUrlVars()["pid"]);
photoSwipeInstance.show(photopid);
}
});//End Documentstrong text
}(window, window.jQuery, window.Code.PhotoSwipe));
function getUrlVars()
{
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
Issue: If a gallery is loaded with a hashtag the gallery will pop up the proper image but then immediately closes the slide show. And every photo past this point performs in the same manner, slideshow opens then closes.
I have turned off all AJAX, and hashtag anchor functions JQM utilizes. This hashtag url functions works as intended when using a Desktop browser but not when using any Mobile browser.
Has someone else tried this functionality?
I probably made this much more confusing then it is in my description.
Answer: JQM's hashtag handlers did not need to be turned off instead. Photoswipe needed this handler added to the options: backButtonHideEnabled: false
JQM's hashtag handlers did not need to be turned off instead. Photoswipe needed this handler added to the options: backButtonHideEnabled: false

Resources