-
Notifications
You must be signed in to change notification settings - Fork 4
MasjidTimes JavaScript Library
As mentioned in the readme, Masjid Times includes a full JavaScript library that makes use of the Prayer Times API.
Features:
- Event-based, easy-setup API
- Asynchronous timer service
- Easy access to the Prayer Times web service (MasjidTimes.ajax)
Make sure you have an instance of the Prayer Times web service running. For now, if you can't set it up, you can use the one here.
The MasjidTimes library requires jQuery and the jStorage jQuery plugin.
A sample index.html is shown below:
<!DOCTYPE html>
<head>
<title>MasjidTimes :)</title>
</head>
<body>
<h1>Peace!</h1>
<script src="path/to/jquery.js"></script>
<script src"path/to/jStorage.jquery.js></script>
<script src="js/masjidtimes.js"></script>
<script src="js/main.js"></script>
</body>
</html>We will include our source code in main.js.
We create a MasjidTimes object by calling newMasjidTimes and passing in our configuration object.
var masjidConfig = {url: 'path/to/webservice'};
var mt = newMasjidTimes(masjidConfig);From now on, the mt object will give us access to the library. We can now make use of the event-driven interface.
To start using the event driven library, we must first register event listeners by using masjidtimes.on. There are many events that we can register listeners to, but it is most important to register a ready event.
We can do this using mt.on('ready', callback) or using a shortcut mt.ready(callback). After registering this and other listeners, we finally call mt.init() to bootstrap and kick off our application. Here's an example we can put in main.js:
$(document).ready(function(){
var mt, masjidConfig;
masjidConfig = {url: 'path/to/webservice'};
mt = newMasjidTimes(masjidConfig);
// NOTE: Event handlers should be called first before init.
// Get the nearest mosques
mt.on('mosques', function(nearestMosques){
//Do something here with the array of nearest mosques
});
mt.on('tick', function(next){
// Do something here every second
});
mt.on('day', function(){
// It's a new day :) Do something
});
mt.on('prayer', function(prayerTimes){
setTimeout(function(){
//A prayer has just passed. Do something.
}, 1000);
});
mt.ready(function(){
// MasjidTimes has finished loading resources etc. Do something
});
mt.init();
});