Skip to content

Commit

Permalink
make tajweedlegend less obtrusive
Browse files Browse the repository at this point in the history
  • Loading branch information
@noureddin
noureddin committed Aug 11, 2024
1 parent f609d5e commit f20e878
Show file tree
Hide file tree
Showing 6 changed files with 33 additions and 31 deletions.
20 changes: 10 additions & 10 deletions .index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,17 +181,17 @@
</div>

<!-- tajweed legend -->
<svg id="tl" aria-expanded="false" viewBox="0 0 140 400" xmlns="http://www.w3.org/2000/svg">
<svg id="tl" aria-expanded="false" viewBox="0 0 155 400" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="140" height="400" />
<line x1="505" y1="0" x2="505" y2="400" style="visibility: hidden; opacity: 0" />
<circle cx="35" cy="50" r="35" id="N" /><text x="380" y="50" style="visibility: hidden; opacity: 0">الإخفاء والغنة (حركتين)</text>
<circle cx="35" cy="150" r="35" id="X" /><text x="380" y="150" style="visibility: hidden; opacity: 0">الإدغام وما لا ينطق</text>
<circle cx="35" cy="250" r="35" id="R" /><text x="380" y="250" style="visibility: hidden; opacity: 0">تفخيم الراء</text>
<circle cx="35" cy="350" r="35" id="Q" /><text x="380" y="350" style="visibility: hidden; opacity: 0">القلقلة</text>
<circle cx="105" cy="50" r="35" id="L" /><text x="880" y="50" style="visibility: hidden; opacity: 0">مد ست (٦) حركات</text>
<circle cx="105" cy="150" r="35" id="W" /><text x="880" y="150" style="visibility: hidden; opacity: 0">مد أربع (٤) حركات</text>
<circle cx="105" cy="250" r="35" id="J" /><text x="880" y="250" style="visibility: hidden; opacity: 0">مد حركتين أو أربع أو ست</text>
<circle cx="105" cy="350" r="35" id="T" /><text x="880" y="350" style="visibility: hidden; opacity: 0">مد حركتين</text>
<line x1="450" y1="0" x2="450" y2="400" style="visibility: hidden; opacity: 0" />
<circle cx="45" cy="50" r="25" id="N" /><text x="350" y="50" style="visibility: hidden; opacity: 0">الإخفاء والغنة (حركتين)</text>
<circle cx="45" cy="150" r="25" id="X" /><text x="350" y="150" style="visibility: hidden; opacity: 0">الإدغام وما لا ينطق</text>
<circle cx="45" cy="250" r="25" id="R" /><text x="350" y="250" style="visibility: hidden; opacity: 0">تفخيم الراء</text>
<circle cx="45" cy="350" r="25" id="Q" /><text x="350" y="350" style="visibility: hidden; opacity: 0">القلقلة</text>
<circle cx="125" cy="50" r="25" id="L" /><text x="825" y="50" style="visibility: hidden; opacity: 0">مد ست (٦) حركات</text>
<circle cx="125" cy="150" r="25" id="W" /><text x="825" y="150" style="visibility: hidden; opacity: 0">مد أربع (٤) حركات</text>
<circle cx="125" cy="250" r="25" id="J" /><text x="825" y="250" style="visibility: hidden; opacity: 0">مد حركتين أو أربع أو ست</text>
<circle cx="125" cy="350" r="25" id="T" /><text x="825" y="350" style="visibility: hidden; opacity: 0">مد حركتين</text>
</svg>

<div id="tvc" class="popup"><!-- tafsir-view container -->
Expand Down
2 changes: 1 addition & 1 deletion .scripts.gen.min.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions index.html
View file

Large diffs are not rendered by default.

13 changes: 6 additions & 7 deletions javascript.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,24 +30,23 @@ document.body.addEventListener('click', (ev) => {
})

el_tl.onclick = (ev) => {
if (ev.target === el_tl) { return } // if clicked on the transparent part of a closed legend
if (el_tl.getAttribute('aria-expanded') === 'true') {
el_tl.setAttribute('aria-expanded', false)
el_tl.Qall('circle').forEach(c =>
c.setAttribute('cx', c.getAttribute('cx') == 950 ? 105 : 35))
c.setAttribute('cx', c.getAttribute('cx') == 875 ? 125 : 45))
el_tl.Qall('text').forEach(t => hide_el(t))
hide_el(el_tl.Q('line'))
el_tl.Q('rect').setAttribute('width', 140)
setTimeout(() => el_tl.setAttribute('viewBox', '0 0 140 400'), 500)
el_tl.Q('rect').setAttribute('width', 155)
setTimeout(() => el_tl.setAttribute('viewBox', '0 0 155 400'), 500)
}
else {
el_tl.setAttribute('viewBox', '0 0 1000 400')
el_tl.setAttribute('viewBox', '0 0 925 400')
el_tl.setAttribute('aria-expanded', true)
el_tl.Qall('circle').forEach(c =>
c.setAttribute('cx', c.getAttribute('cx') < 50 ? 450 : 950))
c.setAttribute('cx', c.getAttribute('cx') < 50 ? 400 : 875))
el_tl.Qall('text').forEach(t => show_el(t))
show_el(el_tl.Q('line'))
el_tl.Q('rect').setAttribute('width', 1000)
el_tl.Q('rect').setAttribute('width', 925)
}
}

Expand Down
23 changes: 13 additions & 10 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -419,16 +419,18 @@ label.disabled {
#dark:checked ~ #body select { filter: invert(1) hue-rotate(180deg) }

/* begin: svg#tl -- tajweed legend */
svg #L { fill: var(--L) }
svg #W { fill: var(--W) }
svg #J { fill: var(--J) }
svg #T { fill: var(--T) }
svg #N { fill: var(--N) }
svg #X { fill: var(--X) }
svg #R { fill: var(--R) }
svg #Q { fill: var(--Q) }

#tl * {
svg #L { stroke: var(--L) }
svg #W { stroke: var(--W) }
svg #J { stroke: var(--J) }
svg #T { stroke: var(--T) }
svg #N { stroke: var(--N) }
svg #X { stroke: var(--X) }
svg #R { stroke: var(--R) }
svg #Q { stroke: var(--Q) }

#tl[aria-expanded="false"] { opacity: 0.25 }

#tl, #tl * {
transition: 0.5s;
cursor: pointer;
}
Expand All @@ -438,6 +440,7 @@ text {
font-size: 38px; /* available width is 400px */
}

#tl circle { stroke-width: 10px }
#tl line { stroke: var(--txt); stroke-width: 2px }

#tl {
Expand Down
Loading

0 comments on commit f20e878

Please sign in to comment.