Skip to content

Commit 314247d

Browse files
author
shahed.nasser
committedApr 12, 2021
added prayer times UI
·
2.1.42.1.2
1 parent 1cd0efd commit 314247d

12 files changed

+307
-28
lines changed
 

‎_locales/en/messages.json

+15
Original file line numberDiff line numberDiff line change
@@ -332,5 +332,20 @@
332332
},
333333
"contact_developer": {
334334
"message": "Contact developer"
335+
},
336+
"prayer_times": {
337+
"message": "Prayer Times"
338+
},
339+
"show_prayer_times": {
340+
"message": "Show Prayer Times"
341+
},
342+
"show_prayer_times_description": {
343+
"message": "Show Prayer Times. Prayer Times can be sometimes inaccurate."
344+
},
345+
"prayer_times_method": {
346+
"message": "Prayer Times Method"
347+
},
348+
"prayer_times_method_description": {
349+
"message": "Since prayer times can be inaccurate, you can try adjusting the method to achieve the best result."
335350
}
336351
}

‎assets/asr.svg

+132
Loading

‎assets/dhuhr.svg

+1
Loading

‎assets/fajr.svg

+1
Loading

‎assets/isha.svg

+1
Loading

‎assets/maghrib.svg

+1
Loading

‎css/styles.css

+50-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ body {
3535
filter: brightness(50%);
3636
}
3737

38-
.verse, .bismillah, .athkar-container {
38+
.verse, .bismillah, .athkar-container, .prayer-times-container {
3939
font-family: QuranFont, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
4040
}
4141

@@ -420,6 +420,55 @@ body {
420420
text-decoration: none;
421421
}
422422

423+
.prayer-times-container {
424+
position: absolute;
425+
left: 10px;
426+
top: 35%;
427+
background-color: rgba(255, 255, 255, .7);
428+
padding: 10px;
429+
border-radius: 10px;
430+
color: #333;
431+
}
432+
433+
.prayer-time {
434+
padding-__MSG_@@bidi_start_edge__: 30px;
435+
position: relative;
436+
}
437+
438+
.prayer-time:not(:last-child) {
439+
margin-bottom: 15px;
440+
}
441+
442+
.prayer-time:before {
443+
content: '';
444+
height: 24px;
445+
width: 24px;
446+
background-repeat: no-repeat;
447+
position: absolute;
448+
left: 0;
449+
top: 0;
450+
}
451+
452+
.prayer-time.fajr:before {
453+
background-image: url(../assets/fajr.svg);
454+
}
455+
456+
.prayer-time.dhuhr:before {
457+
background-image: url(../assets/dhuhr.svg);
458+
}
459+
460+
.prayer-time.asr:before {
461+
background-image: url(../assets/asr.svg);
462+
}
463+
464+
.prayer-time.maghrib:before {
465+
background-image: url(../assets/maghrib.svg);
466+
}
467+
468+
.prayer-time.isha:before {
469+
background-image: url(../assets/isha.svg);
470+
}
471+
423472
@media screen and (min-width: 992px) {
424473
.calendar {
425474
width: 70%;

‎js/main.js

+46
Original file line numberDiff line numberDiff line change
@@ -261,6 +261,14 @@ $(document).ready(function(){
261261
$(".athkar-container").remove();
262262
showRandomThikr();
263263
}
264+
265+
// if (!result.hasOwnProperty('prayerTimesCalendar') || !result.prayerTimesCalendar || !result.prayerTimesCalendar.hasOwnProperty('month') ||
266+
// !result.prayerTimesCalendar.hasOwnProperty('calendar') || result.prayerTimesCalendar.month != (new Date()).getMonth()) {
267+
getPrayerTimesCalendar();
268+
//}
269+
270+
//getPrayerTimes();
271+
264272
});
265273
});
266274

@@ -680,4 +688,42 @@ $(document).ready(function(){
680688
}).show()
681689
})
682690
}
691+
692+
function getPrayerTimesCalendar () {
693+
navigator.geolocation.getCurrentPosition((position) => {
694+
const date = new Date();
695+
$.get('http://api.aladhan.com/v1/calendar?longitude=' + position.coords.longitude + '&latitude=' + position.coords.latitude +
696+
'&month=' + (date.getMonth() + 1) + '&year=' + date.getFullYear() + '&method=2', function (data) {
697+
//store it in storage for the entire month
698+
chrome.storage.local.set({prayerTimesCalendar: {month: date.getMonth(), calendar: data.data}}, function () {
699+
getPrayerTimes();
700+
});
701+
});
702+
});
703+
}
704+
705+
function getPrayerTimes() {
706+
chrome.storage.local.get(['prayerTimesCalendar'], function(result) {
707+
console.log(result)
708+
if (result.hasOwnProperty('prayerTimesCalendar') && result.prayerTimesCalendar.hasOwnProperty('calendar')) {
709+
//get today's prayer times
710+
const today = new Date();
711+
result.prayerTimesCalendar.calendar.forEach((dateData) => {
712+
if (parseInt(dateData.date.gregorian.day) == today.getDate()) {
713+
//show prayer times
714+
const prayerTimesContainer = $(".prayer-times-container");
715+
prayerTimesContainer.append(`<div class="prayer-time fajr">${formatTime(dateData.timings.Fajr)}</div>`);
716+
prayerTimesContainer.append(`<div class="prayer-time dhuhr">${formatTime(dateData.timings.Dhuhr)}</div>`);
717+
prayerTimesContainer.append(`<div class="prayer-time asr">${formatTime(dateData.timings.Asr)}</div>`);
718+
prayerTimesContainer.append(`<div class="prayer-time maghrib">${formatTime(dateData.timings.Maghrib)}</div>`);
719+
prayerTimesContainer.append(`<div class="prayer-time isha">${formatTime(dateData.timings.Isha)}</div>`);
720+
}
721+
});
722+
}
723+
})
724+
}
725+
726+
function formatTime (time) {
727+
return time.split(" ")[0];
728+
}
683729
});

‎js/options.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ $(document).ready(function(){
2121
"show_athkar",
2222
"show_date",
2323
"calendar_start_day",
24-
"send_fasting_notification"], function(result){
24+
"send_fasting_notification",
25+
"show_prayer_times"], function(result){
2526
if(result.hasOwnProperty('show_translation') && result.show_translation){
2627
showTranslationElement.prop('checked', true);
2728
translationLanguagesElement.prop('disabled', false);

‎manifest.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
{
22
"name": "Quran In New Tab",
3-
"version": "2.1.1",
3+
"version": "2.1.2",
44
"description": "View Quran verses on the new tab page.",
55
"permissions": [
66
"storage",
77
"topSites",
88
"alarms",
9-
"notifications"
9+
"notifications",
10+
"geolocation"
1011
],
1112
"default_locale": "en",
1213
"chrome_url_overrides" : {

‎newtab.html

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
<img src="assets/reload.svg" alt="Reload" />
1515
<div class="loader"></div>
1616
</div>
17+
<div class="prayer-times-container"></div>
1718
<a href="https://chrome.google.com/webstore/detail/quran-in-new-tab/hggkcijghhpkdjeokpfgbhnpecliiijg"
1819
data-toggle="tooltip" title="__MSG_rate_extension__" class="rate-link toolbar-link">
1920
<img src="assets/star.svg" alt="Rate This Extension" />

‎options.html

+54-24
Original file line numberDiff line numberDiff line change
@@ -14,29 +14,29 @@ <h1 class="display-4 text-center">__MSG_settings__</h1>
1414
</header>
1515
<div class="form-container">
1616
<h2 class="mb-4">__MSG_general__</h2>
17-
<div class="form-group">
18-
<div class="custom-control custom-switch">
19-
<input type="checkbox" class="custom-control-input" id="show_top_sites" name="show_top_sites">
20-
<label class="custom-control-label" for="show_top_sites">__MSG_show_top_sites__</label>
17+
<div class="form-group mb-4">
18+
<div class="form-check form-switch">
19+
<input type="checkbox" class="form-check-input" id="show_top_sites" name="show_top_sites">
20+
<label class="form-check-label" for="show_top_sites">__MSG_show_top_sites__</label>
2121
</div>
2222
<small class="text-secondary">__MSG_show_top_sites_description__</small>
2323
</div>
24-
<div class="form-group">
25-
<div class="custom-control custom-switch">
26-
<input type="checkbox" class="custom-control-input" id="show_date" name="show_date">
27-
<label class="custom-control-label" for="show_date">__MSG_show_hijri_date__</label>
24+
<div class="form-group mb-4">
25+
<div class="form-check form-switch">
26+
<input type="checkbox" class="form-check-input" id="show_date" name="show_date">
27+
<label class="form-check-label" for="show_date">__MSG_show_hijri_date__</label>
2828
</div>
2929
<small class="text-secondary">__MSG_show_hijri_date_description__</small>
3030
</div>
3131
<hr />
3232
<h2 class="mb-4">__MSG_quran__</h2>
33-
<div class="form-group">
34-
<div class="custom-control custom-switch">
35-
<input type="checkbox" class="custom-control-input" id="show_translation" name="show_translation">
36-
<label class="custom-control-label" for="show_translation">__MSG_show_translation__</label>
33+
<div class="form-group mb-4">
34+
<div class="form-check form-switch">
35+
<input type="checkbox" class="form-check-input" id="show_translation" name="show_translation">
36+
<label class="form-check-label" for="show_translation">__MSG_show_translation__</label>
3737
</div>
3838
</div>
39-
<div class="form-group">
39+
<div class="form-group mb-4">
4040
<label>__MSG_translation_language__:</label>
4141
<select name="translation_language" class="form-control" disabled>
4242
<option value="none" selected>
@@ -152,7 +152,7 @@ <h2 class="mb-4">__MSG_quran__</h2>
152152
</option>
153153
</select>
154154
</div>
155-
<div class="form-group">
155+
<div class="form-group mb-4">
156156
<label>__MSG_recitation__</label>
157157
<select name="recitation" class="form-control">
158158
<option value="ar.alafasy" selected>
@@ -207,27 +207,57 @@ <h2 class="mb-4">__MSG_quran__</h2>
207207
</div>
208208
<hr />
209209
<h2 class="mb-4">__MSG_athkar__</h2>
210-
<div class="form-group">
211-
<div class="custom-control custom-switch">
212-
<input type="checkbox" class="custom-control-input" id="show_athkar" name="show_athkar">
213-
<label class="custom-control-label" for="show_athkar">__MSG_show_random_athkar__</label>
210+
<div class="form-group mb-4">
211+
<div class="form-check form-switch">
212+
<input type="checkbox" class="form-check-input" id="show_athkar" name="show_athkar">
213+
<label class="form-check-label" for="show_athkar">__MSG_show_random_athkar__</label>
214214
</div>
215215
</div>
216+
<hr />
216217
<h2 class="mb-4">__MSG_calendar__</h2>
217-
<div class="form-group">
218-
<label>__MSG_week_start_date__</label>
218+
<div class="form-group mb-4">
219+
<label class="mb-2">__MSG_week_start_date__</label>
219220
<select class="form-control" id="calendar_start_day" name="calendar_start_day">
220221
<option value="Monday">__MSG_Monday__</option>
221222
<option value="Sunday">__MSG_Sunday__</option>
222223
</select>
223224
</div>
224-
<div class="form-group">
225-
<div class="custom-control custom-switch">
226-
<input type="checkbox" class="custom-control-input" id="send_fasting_notification" name="send_fasting_notification">
227-
<label class="custom-control-label" for="send_fasting_notification">__MSG_notification_setting__</label>
225+
<div class="form-group mb-4">
226+
<div class="form-check form-switch">
227+
<input type="checkbox" class="form-check-input" id="send_fasting_notification" name="send_fasting_notification">
228+
<label class="form-check-label" for="send_fasting_notification">__MSG_notification_setting__</label>
228229
</div>
229230
</div>
230231
<div>
232+
<hr />
233+
<h2 class="mb-4">__MSG_prayer_times__</h2>
234+
<div class="form-group mb-4">
235+
<div class="form-check form-switch">
236+
<input type="checkbox" class="form-check-input" id="show_prayer_times" name="show_prayer_times">
237+
<label class="form-check-label" for="show_prayer_times">__MSG_show_prayer_times__</label>
238+
</div>
239+
<small class="text-secondary">__MSG_show_prayer_times_description__</small>
240+
</div>
241+
<div class="form-group mb-4">
242+
<label class="mb-2">__MSG_prayer_times_method__</label>
243+
<select class="form-control" id="prayer_times_method" name="prayer_times_method">
244+
<option value="0">Shia Ithna-Ansari</option>
245+
<option value="1">University of Islamic Sciences, Karachi</option>
246+
<option value="2">Islamic Society of North America</option>
247+
<option value="3">Muslim World League</option>
248+
<option value="4">Umm Al-Qura University, Makkah</option>
249+
<option value="5">Egyptian General Authority of Survey</option>
250+
<option value="7">Institute of Geophysics, University of Tehran</option>
251+
<option value="8">Gulf Region</option>
252+
<option value="9">Kuwait</option>
253+
<option value="10">Qatar</option>
254+
<option value="11">Majlis Ugama Islam Singapura, Singapore</option>
255+
<option value="12">Union Organization islamic de France</option>
256+
<option value="13">Diyanet İşleri Başkanlığı, Turkey</option>
257+
<option value="14">Spiritual Administration of Muslims of Russia</option>
258+
</select>
259+
<small class="text-secondary">__MSG_prayer_times_method_description__</small>
260+
</div>
231261
<button type="button" class="btn btn-dark" id="save">
232262
__MSG_save__
233263
</button>

0 commit comments

Comments
 (0)
Please sign in to comment.