Skip to content

Instantly share code, notes, and snippets.

@atmin
Last active Aug 29, 2015
Embed
What would you like to do?
http://ihi.im/app.js rewrite using jtmpl
// This is a remake concept of http://ihi.im/app.js using [jtmpl](http://jtmpl.com) as only dependency
(function () {
var model = {
// Route: share
'#share': function () {
this.route = '#share-template'
// Original code, copy/pasted
function initialize() {
var mapOptions = {
zoom: 15
};
map = new google.maps.Map(document.querySelector('#map'),
mapOptions);
// Try HTML5 geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
processLinks(position.coords);
var marker = new google.maps.Marker({
position: pos,
map: map,
title: 'Found you!'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
var content = (errorFlag) ? 'Maybe next time, yeah?' : 'Error: Your browser doesn\'t support geolocation.',
options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
},
infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
setTimeout(initialize, 750);
},
// Route: location
'#location,data=([\S\s]+)': function (json) {
this.route = '#view-template';
var data = JSON.parse(json);
// And the other block of original code
window.directionsService = new google.maps.DirectionsService();
function initialize() {
window.directionsDisplay = new google.maps.DirectionsRenderer();
var them = new google.maps.LatLng(data.latitude, data.longitude);
var mapOptions = {
zoom: 15,
center: them
};
window.map = new google.maps.Map(document.getElementById('map'), mapOptions);
window.marker = new google.maps.Marker({
position: them,
map: window.map,
title: 'Your friend!'
});
window.directionsDisplay.setMap(window.map);
}
function calcRoute() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var start = data.latitude + "," + data.longitude;
var end = pos;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.WALKING
};
window.directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
window.directionsDisplay.setDirections(response);
window.marker.setMap(null);
}
});
});
}
}
initialize();
},
// Current route, a dynamic partial: {{>route}}
// That's a cheat, as right now (not for long) jtmpl supports only literal partials, like {{>"#start-template"}}
route: '#start-template',
// Event handlers
// Template: <a onclick="{{addMapUser}}" ....
addMapUserClick: function (e) {
e.preventDefault();
calcRoute();
this.setAttribute('hidden', true);
}
} // end model
// jtmpl handles requests, as well
var processLinks = function(data) {
var linkVal = 'http://' + window.location.host + '/%23location,data=' + JSON.stringify({
longitude: data.longitude,
latitude: data.latitude
});
var url = "http://api.bit.ly/v3/shorten?login=<<<LOGIN>>>&apiKey=<<<API_KEY>>>&longUrl=" + linkVal + "&format=json";
jtmpl('GET', url, function (json) {
// jtmpl detects JSON responses and parses them
// In the templates, bitlyLink is referenced like:
// <a class="btn foundiconsocial-twitter" href={{bitlyLink}}> ....
// no id attribute required
this.bitlyLink = json.data.url;
// A classical Mustache condition is expected in your template:
// {{#sharingLinks}} .... {{/sharingLinks}}
this.sharingLinks = true;
});
};
// jtmpl(targetNode, template, model)
jtmpl('#content', '{{>route}}', model);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment