Skip to content

Commit

Permalink
Tooltips for coloured dates
Browse files Browse the repository at this point in the history
  • Loading branch information
@AbdullahM0hamed
AbdullahM0hamed committed Jun 14, 2024
1 parent f461271 commit 2b23f56
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 14 deletions.
36 changes: 31 additions & 5 deletions assets/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ function highlight(day, start) {
let before = [...cells].slice(0, day);
before.forEach(element => {
element.classList.add('adjacent');
explain(element);
});
let end = 29;
if (has_thirty) {
Expand All @@ -128,46 +129,59 @@ function highlight(day, start) {
let after = [...cells].slice(end + day, 42);
after.forEach(element => {
element.classList.add('adjacent');
explain(element);
});
let offset = getHijriOffset(day, start);
if (offset !== -1) {
let today = cells[offset];
let tomorrow = cells[offset + 1];
today.classList.add('today');
tomorrow.classList.add('tomorrow');
explain(today);
explain(tomorrow);
cells[day + 28].classList.add('observe');
explain(cells[day + 28]);
}

let tom_offset = getTomorrowOffset(day, start);
if (offset === -1 && tom_offset !== -1) {
let tomorrow = cells[tom_offset];
tomorrow.classList.add('tomorrow');
explain(tomorrow);
if (tom_offset > 0) {
cells[tom_offset - 1].classList.add('today');
explain(cells[tom_offset - 1]);
}
}

let white_days = [...cells].slice(day + 12, day + 15);
white_days.forEach(white_day => {
white_day.classList.add('white_day');
explain(white_day);
});

removeInline();
switch(curr_month) {
case month_names[9]:
cells[day].classList.add('eid');
explain(cells[day]);
showIndicator('#eid');
break;
case month_names[11]:
cells[day + 8].classList.add('arafah');
cells[day + 9].classList.add('eid');
explain(cells[day + 8]);
explain(cells[day + 9]);
showIndicator('#arafah');
showIndicator('#eid');
break;
case month_names[0]:
cells[day + 9].classList.add('ashura');
cells[day + 8].classList.add('ashura_adjacent');
cells[day + 10].classList.add('ashura_adjacent');
explain(cells[day + 8]);
explain(cells[day + 9]);
explain(cells[day + 10]);
showIndicator('#ashura');
break;
}
Expand Down Expand Up @@ -323,6 +337,22 @@ function getRows(first, day) {
return [row_one, row_two, row_three, row_four, row_five, row_six];
}

function explain(td) {
let explainable = ['today', 'tomorrow', 'white_day', 'observe', 'arafah', 'eid', 'ashura', 'ashura_adjacent'];
let intersect = explainable.filter(Set.prototype.has, new Set(td.classList));

let explanation = '';
for (let i = 0; i < intersect.length; i++) {
let cls = intersect[i];
let exp = document.querySelector(`.${cls}_exp`).innerText;
explanation += `${exp} `;
}

if (explanation !== null && explanation.match(/^ *$/) === null) {
tippy(td, {'content': explanation, 'placement': 'bottom'});
}
}

let grid = null;
function createGrid(day, start) {
let rows = getRows(start, day);
Expand Down Expand Up @@ -354,6 +384,7 @@ function createGrid(day, start) {
}
}

//grid.on('cellClick', (e, cell, column, row) => explain(cell["data"]["__e"].parentElement));
grid.config.store.subscribe(tableStatesListener);
}

Expand Down Expand Up @@ -503,11 +534,6 @@ function getExtremes() {
}

function setupMonths() {
//let year_select = document.querySelector('select.year');
//let year = year_select.value;
//let options = [...year_select.options];
//let latest = options[0].value;
//let earliest = options[options.length - 1].value;
const [year, earliest, latest] = getExtremes();
let month_select = document.querySelector('select.month');
month_select.options.length = 0;
Expand Down
19 changes: 10 additions & 9 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/assets/style.css" type="text/css">
<script src="/assets/script.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script src="https://unpkg.com/[email protected]/dist/gridjs.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" type="text/css">
<link rel="icon" href="/favicon.png" />
Expand Down Expand Up @@ -76,35 +78,34 @@ <h2>Gregorian to Hijri</h2>
<div class="keys">
<span class="today_key key">00</span>
<span>&nbsp;-&nbsp;</span>
<span>Today: post-midnight, pre-sunset</span>
<span class="today_exp">Today: post-midnight, pre-sunset</span>
<span>&nbsp;&nbsp;</span>
<span class="tomorrow_key key">00</span>
<span>&nbsp;-&nbsp;</span>
<span>Today: pre-midnight, post-sunset</span>
<span class="tomorrow_exp">Today: pre-midnight, post-sunset</span>
<span>&nbsp;&nbsp;</span>
<span class="white_day key">&nbsp;x&nbsp;</span>
<span>&nbsp;-&nbsp;</span>
<span>White day: recommended to fast</span>
<span class="white_day_exp">White day: recommended to fast</span>
<span>&nbsp;&nbsp;</span>
<span class="observe key">00</span>
<span>&nbsp;-&nbsp;</span>
<span>The new crescent should be observed after sunset</span>
<span class="observe_exp">The new crescent should be observed after sunset</span>
<span id="arafah" style="display: none;">&nbsp;&nbsp;</span>
<span id="arafah" class="arafah key" style="display: none;">00</span>
<span id="arafah" style="display: none;">&nbsp;-&nbsp;</span>
<span id="arafah" style="display: none;">Day of Arafah: Fasting recommended</span>
<span id="arafah" class="arafah_exp" style="display: none;">Day of Arafah: Fasting recommended</span>
<span id="eid">&nbsp;&nbsp;</span>
<span id="eid" class="eid key" style="display: none;">00</span>
<span id="eid" style="display: none;">&nbsp;-&nbsp;</span>
<span id="eid" style="display: none;">Eid</span>
<!--<span id="ashura" style="display: none;">&nbsp;&nbsp;</span>-->
<span id="eid" class="eid_exp" style="display: none;">Eid</span>
<span id="ashura" class="ashura key" style="display: none;">00</span>
<span id="ashura" style="display: none;">&nbsp;-&nbsp;</span>
<span id="ashura" style="display: none;">The day of 'Ashura: Fasting recommended</span>
<span id="ashura" class="ashura_exp" style="display: none;">The day of 'Ashura: Fasting recommended</span>
<span id="ashura" style="display: none;">&nbsp;&nbsp;</span>
<span id="ashura" class="ashura_adjacent key" style="display: none;">00</span>
<span id="ashura" style="display: none;">&nbsp;-&nbsp;</span>
<span id="ashura" style="display: none;">The day before/after 'Ashura: fast one of these along with the day of 'Ashura</span>
<span id="ashura" class="ashura_adjacent_exp" style="display: none;">The day before/after 'Ashura: fast one of these along with the day of 'Ashura</span>
</div>
<p style="font-size: 0.6em;">*Due to the hijri calendar starting at sunset, and the gregorian calendar starting at midnight, calculating the current day's change without location data is difficult, and as such 2 days are highlighted as 'today' depending on whether it is before or after sunset.</p>
<p style="font-size: 0.6em;">**Where today is a highlighted day, the background will be a gradient with the top colour indicating that it is today, and the bottom colour being the colour of the highlighted day show its significance - with the exception of the white days wherein the text colour is changed to reflect that it is today</p>
Expand Down

0 comments on commit 2b23f56

Please sign in to comment.