A Pen by abdurraufahmad on CodePen.
Created
August 31, 2019 15:37
-
-
Save abdurraufahmad/5b54f2a9c6e7fa4df47aaec8c089492c to your computer and use it in GitHub Desktop.
Quran React
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id='app'></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var surahsNames = ['asl']; | |
function arabicDigits(num){ | |
num = num.toString().split(''); | |
var final =[]; | |
var arabnums = ['۰','۱','۲','۳','۴','۵','۶','۷','۸','۹']; | |
for(var i = 0; i < num.length; i++){ | |
final.push(arabnums[parseInt(num[i])]); | |
} | |
return final.join(''); | |
} | |
class SurahLayout extends React.Component { | |
constructor(props) { | |
super(props); | |
this.state = { | |
surs : [], | |
surstrans: [] | |
} | |
} | |
goDown(){ | |
$('html, body, .surahscroll').animate({scrollTop: 0}, 300); | |
$('.surah').animate({height: '0%',opacity: 0}); | |
} | |
componentDidMount() { | |
var _this = this; | |
var suras = surahsNames; | |
axios | |
.get('https://api.alquran.cloud/quran/quran-uthmani') | |
.then(function(result) { | |
var surs = result.data.data.surahs; | |
console.log(( result.data.data.surahs[1].ayahs[0].text).replace(/بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ/,'')); | |
_this.setState({surs:surs}); | |
surahsNames = surs; | |
}); | |
axios | |
.get('https://api.alquran.cloud/quran/en.asad') | |
.then(function(result) { | |
var surstrans = result.data.data.surahs; | |
_this.setState({surstrans:surstrans}); | |
}); | |
} | |
render(){ | |
return ( | |
<div className='surah'> | |
<div className='surahscroll'> | |
{this.state.surs.map( | |
(x,index)=><div className='ayahs' id={x.englishName}><h2>CH. {x.number}: {x.englishName} ({x.englishNameTranslation})</h2><h1>{x.name}</h1> | |
<h3>Revelation: {x.revelationType}</h3> | |
{(x.englishName!="Al-Faatiha") ? <div className='ayah'>بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</div>:null} | |
{x.ayahs.map((y,ind)=>(y.sajda) ? <div className='ayah' >{(y.text).replace(/بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ/,'')}<span className='ayahnum'>{arabicDigits(y.numberInSurah)}</span><div className='ayahtr'>{y.numberInSurah}. {this.state.surstrans[index].ayahs[ind].text}(sujjud)</div></div>:<div className='ayah' >{(index!=0)?(y.text).replace(/بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ/,''):y.text}<span className='ayahnum'>{arabicDigits(y.numberInSurah)}</span><div className='ayahtr'>{y.numberInSurah}. {this.state.surstrans[index].ayahs[ind].text}</div></div>)}</div> | |
)} | |
<button onClick={this.goDown}>Back to Index</button> | |
</div> | |
</div> | |
) | |
} | |
} | |
class PlayerLayout extends React.Component { | |
constructor(props) { | |
super(props); | |
this.state = { | |
surahs : [] | |
} | |
} | |
componentDidMount() { | |
var _this = this; | |
axios | |
.get('https://api.alquran.cloud/quran/quran-uthmani') | |
.then(function(result) { | |
var sur = result.data.data.surahs; | |
var array = sur.map(x=>x.englishName); | |
console.log(array); | |
var ed = result.data.data.edition.englishName; | |
_this.setState({surahs : sur}); | |
$(".surahscroll").scroll(function(){ | |
for(var i=0; i < array.length; i++){ | |
//console.log($("#"+array[i]+" h2").offset().top); | |
if($("#"+array[i]).offset().top<0){ $("#"+array[i]).css({'padding-top': '50px'}); | |
$("#"+array[i]+" h2").css({'position':'fixed','top':0,'box-shadow':'0px 20px 60px -10px'}) | |
}else if($("#"+array[i]+" h2").offset().top==0){ | |
$("#"+array[i]+"").css({'padding-top': '0px'}); | |
$("#"+array[i]+" h2").css({'position':'relative','top':'auto','box-shadow':'none'}) | |
} | |
} | |
}) | |
}); | |
} | |
handleClick(e, data){ | |
$('html, body').animate({scrollTop: 0}, 300); | |
$('.surah').animate({height: '100%',opacity: 1}); | |
var clickedSurah = $(e.currentTarget).children()[2].innerHTML; | |
setTimeout( | |
function() | |
{ | |
$('.surahscroll').animate({scrollTop: $("#"+clickedSurah).offset().top}, 'fast'); }, 1000); | |
} | |
render(){ | |
return ( | |
<table> | |
<tr id='headingrow'> | |
<th>Chapter</th> | |
<th>Surah</th> | |
<th>English Name</th> | |
<th>English Name Translation</th> | |
<th>Juz (Book)</th> | |
<th>Ayahs ({this.state.surahs.map(x=>x.ayahs.length).reduce((a, b) => a + b, 0)} Verses)</th> | |
</tr> | |
{this.state.surahs.map(x => (x.ayahs[0].juz != x.ayahs[x.ayahs.length-1].juz) ? <tr onClick={this.handleClick}><td>{x.number}</td><td>{x.name}</td><td className='surahName'>{x.englishName}</td><td>{x.englishNameTranslation}</td><td>{x.ayahs[0].juz}-{x.ayahs[x.ayahs.length-1].juz}</td><td>{x.ayahs.length}</td></tr> : <tr onClick={this.handleClick}><td>{x.number}</td><td>{x.name}</td><td className='surahName'>{x.englishName}</td><td>{x.englishNameTranslation}</td><td>{x.ayahs[0].juz}</td><td>{x.ayahs.length}</td></tr>)} | |
</table> | |
) | |
} | |
} | |
class Finesse extends React.Component { | |
constructor(props) { | |
super(props); | |
this.state = { | |
error: null, | |
isLoaded: false, | |
items: [], | |
edition: '' | |
} | |
this.handleChange = this.handleChange.bind(this); | |
} | |
handleChange(event){ | |
$('tr').hide(); | |
$('#headingrow').show(); | |
$('tr').filter(":contains('" + event.target.value + "')").show(); | |
} | |
componentDidMount() { | |
var _this = this; | |
axios | |
.get('https://api.alquran.cloud/quran/quran-uthmani') | |
.then(function(result) { | |
var ed = result.data.data.edition.englishName; | |
_this.setState({edition : ed}); | |
}); | |
} | |
render() { | |
return ( | |
<div> | |
<h1>Al-Quran Majeed</h1> | |
<h3>The Holy Recitation</h3> | |
<h4>{this.state.edition} Edition</h4> | |
<div id='searchdiv'> | |
<input id='search' type='search' onChange={this.handleChange}/> </div> | |
<PlayerLayout /> | |
<SurahLayout /> | |
</div> | |
); | |
} | |
}; | |
React.render(<Finesse />, document.getElementById('app')) | |
$(document).ready(function(){ | |
var array = []; | |
$('.ayahs').each(function(){ | |
var id = $(this).attr('id'); | |
array.push(id); | |
console.log(id); | |
}); | |
console.log(array); | |
$('#searchdiv').append('<i class="fas fa-search"></i>'); | |
}) | |
var lastscroll; | |
var newscroll; | |
console.log(surahsNames); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$main-fonts: Arial, sans-serif; | |
$headings-color: green; | |
body{ | |
background-color: beige; | |
} | |
h1,h3,h4{ | |
font-family: $main-fonts; | |
text-align: center; | |
} | |
a{ | |
text-decoration: none; | |
color: $headings-color; | |
} | |
table{ | |
font-size: 25px; | |
margin:auto; | |
margin-bottom: 50px; | |
text-align:center; | |
tr{ | |
height: 100px; | |
cursor: pointer; | |
border-radius: 50px; | |
} | |
tr:hover{ | |
cursor: pointer; | |
box-shadow: 0px 0px 100px 5px; | |
transition: box-shadow 300ms ease; | |
} | |
th{ | |
width: 300px; | |
border-right: 2px solid; | |
} | |
th:last-child{ | |
border:none; | |
} | |
tr:first-child:hover{ | |
box-shadow:none; | |
cursor: initial; | |
} | |
} | |
.ayahs{ | |
position:relative; | |
font-size:50px; | |
text-align: center; | |
width: 100%; | |
margin-top: 200px; | |
} | |
.ayah{ | |
max-width: max-content; | |
margin:auto; | |
margin-top:80px; | |
border-bottom: 1px solid; | |
padding-bottom: 20px; | |
transition: border-width 0.3s ease; | |
} | |
.ayah:hover{ | |
border-width: thick; | |
transition: border-width 0.3s ease; | |
} | |
.surah{ | |
position:fixed; | |
bottom: 0; | |
height: 0px; | |
overflow:hidden; | |
opacity: 0; | |
background: beige; | |
transition: all 0.3s ease; | |
} | |
.surahscroll{ | |
position:relative; | |
overflow: scroll; | |
height: 100%; | |
} | |
.ayahnum{ | |
text-align:center; | |
font-size: 15px; | |
position: relative; | |
left: 36px; | |
top: -12px; | |
text-align:center; | |
} | |
.ayahtr{ | |
font-size: 20px; | |
} | |
button{ | |
position: fixed; | |
z-index:3; | |
bottom: 0; | |
width: 100%; | |
background: #00000079; | |
border: none; | |
height: 50px; | |
color: white; | |
cursor: pointer; | |
outline: none; | |
transition: all 0.3s ease; | |
} | |
button:focus{ | |
outline:none; | |
} | |
button:hover{ | |
height: 75px; | |
background: #00bfffde; | |
transition: all 0.3s ease; | |
} | |
.ayahs h2{ | |
position:relative; | |
background: beige; | |
width:100%; | |
border-top: 5px solid; | |
transition: all 1s ease; | |
z-index: 2; | |
} | |
#search{ | |
margin-left: 30%; | |
width: 40%; | |
margin-top: 20px; | |
height: 40px; | |
outline: none; | |
font-size: 32px; | |
margin-bottom: 20px; | |
border: none; | |
text-align: center; | |
background: transparent; | |
border-bottom: 2px solid black; | |
} | |
.fa-search{ | |
font-size: 32px; | |
position: relative; | |
left: -38px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment