diff --git a/src/components/Audioplayer/index.js b/src/components/Audioplayer/index.js
index cfac5abd2..b7065fb48 100644
--- a/src/components/Audioplayer/index.js
+++ b/src/components/Audioplayer/index.js
@@ -249,6 +249,9 @@ export class Audioplayer extends Component {
}
handleAddFileListeners(file) {
+ // NOTE: if no file, just wait.
+ if (!file) return false;
+
const { update, currentTime } = this.props; // eslint-disable-line no-shadow
debug('component:Audioplayer', `Attaching listeners to ${file.src}`);
diff --git a/src/components/GlobalNav/Surah/index.js b/src/components/GlobalNav/Surah/index.js
index 5c5957a6b..508c643d9 100644
--- a/src/components/GlobalNav/Surah/index.js
+++ b/src/components/GlobalNav/Surah/index.js
@@ -2,6 +2,7 @@ import React, { PropTypes, Component } from 'react';
import * as customPropTypes from 'customPropTypes';
import * as OptionsActions from 'redux/actions/options.js';
import { connect } from 'react-redux';
+import { replace } from 'react-router-redux';
import Link from 'react-router/lib/Link';
import Drawer from 'quran-components/lib/Drawer';
import Menu from 'quran-components/lib/Menu';
@@ -15,16 +16,15 @@ import ReciterDropdown from 'components/ReciterDropdown';
import ContentDropdown from 'components/ContentDropdown';
import TooltipDropdown from 'components/TooltipDropdown';
import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
-// TODO: import VersesDropdown from 'components/VersesDropdown';
+import VersesDropdown from 'components/VersesDropdown';
-import { load } from 'redux/actions/verses.js';
+import { load, setCurrentVerse } from 'redux/actions/verses.js';
import GlobalNav from '../index';
const styles = require('../style.scss');
class GlobalNavSurah extends Component {
-
state = {
drawerOpen: false
}
@@ -42,6 +42,18 @@ class GlobalNavSurah extends Component {
}
};
+ handleVerseDropdownClick = (verseNum) => {
+ const { versesIds, chapter } = this.props; // eslint-disable-line no-shadow
+
+ this.props.setCurrentVerse(`${chapter.chapterNumber}:${verseNum}`);
+
+ if (versesIds.has(verseNum)) {
+ return false;
+ }
+
+ return this.props.replace(`/${chapter.chapterNumber}/${verseNum}-${verseNum + 10}`);
+ }
+
handleDrawerToggle = (open) => {
this.setState({ drawerOpen: open });
}
@@ -62,13 +74,19 @@ class GlobalNavSurah extends Component {
}
render() {
- const { chapter, chapters, setOption, options, ...props } = this.props;
+ const { chapter, chapters, setOption, versesIds, options, ...props } = this.props;
return (
,
+ ,
+ ,
,
@@ -152,7 +170,12 @@ GlobalNavSurah.propTypes = {
options: customPropTypes.optionsType.isRequired,
setOption: PropTypes.func.isRequired,
versesIds: PropTypes.instanceOf(Set),
- load: PropTypes.func.isRequired
+ load: PropTypes.func.isRequired,
+ setCurrentVerse: PropTypes.func.isRequired,
+ replace: PropTypes.func.isRequired
};
-export default connect(mapStateToProps, { ...OptionsActions, load })(GlobalNavSurah);
+export default connect(
+ mapStateToProps,
+ { ...OptionsActions, load, replace, setCurrentVerse }
+)(GlobalNavSurah);
diff --git a/src/components/SurahsDropdown/index.js b/src/components/SurahsDropdown/index.js
index 5cb04bd7d..9f3b37d94 100644
--- a/src/components/SurahsDropdown/index.js
+++ b/src/components/SurahsDropdown/index.js
@@ -1,4 +1,4 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
import * as customPropTypes from 'customPropTypes';
import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
import NavDropdown from 'react-bootstrap/lib/NavDropdown';
@@ -8,7 +8,6 @@ import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
const styles = require('./style.scss');
class SurahsDropdown extends Component {
-
shouldComponentUpdate(nextProps) {
return this.props.chapters !== nextProps.chapters;
}
@@ -40,14 +39,14 @@ class SurahsDropdown extends Component {
}
render() {
- const { title } = this.props;
+ const { chapter } = this.props;
return (
}
+ title={chapter.nameSimple || }
>
{this.renderList()}
@@ -57,7 +56,7 @@ class SurahsDropdown extends Component {
SurahsDropdown.propTypes = {
chapters: customPropTypes.chapters.isRequired,
- title: PropTypes.string,
+ chapter: customPropTypes.chapters.isRequired,
};
export default SurahsDropdown;
diff --git a/src/components/VersesDropdown/index.js b/src/components/VersesDropdown/index.js
index e619f2b28..2c62b61f7 100644
--- a/src/components/VersesDropdown/index.js
+++ b/src/components/VersesDropdown/index.js
@@ -1,6 +1,6 @@
import React, { Component, PropTypes } from 'react';
import * as customPropTypes from 'customPropTypes';
-import DropdownButton from 'react-bootstrap/lib/DropdownButton';
+import NavDropdown from 'react-bootstrap/lib/NavDropdown';
import MenuItem from 'react-bootstrap/lib/MenuItem';
import { Link } from 'react-scroll';
import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
@@ -8,17 +8,16 @@ import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
const style = require('./style.scss');
class VersesDropdown extends Component {
-
renderItem = (ayah, index) => {
- const { chapter, loadedAyahs, isReadingMode, onClick } = this.props;
- const ayahNum = index + 1;
+ const { chapter, loadedVerses, isReadingMode, onClick } = this.props;
+ const number = index + 1;
- if (loadedAyahs.has(ayahNum) && !isReadingMode) {
+ if (loadedVerses.has(number) && !isReadingMode) {
return (
onClick(ayahNum)}
- to={`ayah:${chapter.chapterNumber}:${ayahNum}`}
+ onClick={() => onClick(number)}
+ to={`verse:${chapter.chapterNumber}:${number}`}
smooth
spy
offset={-120}
@@ -26,18 +25,22 @@ class VersesDropdown extends Component {
duration={500}
className="pointer"
>
- {ayahNum}
+ {number}
);
}
- return ;
+ return (
+
+ );
}
renderMenu() {
- const { ayat } = this.props;
- const array = Array(ayat).join().split(',');
+ const { chapter } = this.props;
+ const array = Array(chapter.versesCount).join().split(',');
return array.map((ayah, index) => this.renderItem(ayah, index));
}
@@ -50,20 +53,20 @@ class VersesDropdown extends Component {
);
return (
-
{this.renderMenu()}
-
+
);
}
}
VersesDropdown.propTypes = {
- ayat: PropTypes.number.isRequired,
- loadedAyahs: PropTypes.instanceOf(Set).isRequired,
+ loadedVerses: PropTypes.instanceOf(Set).isRequired,
chapter: customPropTypes.surahType.isRequired, // Set
onClick: PropTypes.func.isRequired,
isReadingMode: PropTypes.bool,
@@ -71,7 +74,7 @@ VersesDropdown.propTypes = {
};
VersesDropdown.defaultProps = {
- className: 'col-md-3'
+ className: ''
};
export default VersesDropdown;
diff --git a/src/components/VersesDropdown/style.scss b/src/components/VersesDropdown/style.scss
index 52101888d..6d9fbf80b 100644
--- a/src/components/VersesDropdown/style.scss
+++ b/src/components/VersesDropdown/style.scss
@@ -1,5 +1,5 @@
.dropdown{
- & + :global(.dropdown-menu){
+ :global(.dropdown-menu){
max-height: 400px;
max-height: 60vh;
overflow-y: scroll;
diff --git a/src/containers/Surah/index.js b/src/containers/Surah/index.js
index 9e207c39d..8cf81268b 100644
--- a/src/containers/Surah/index.js
+++ b/src/containers/Surah/index.js
@@ -19,9 +19,6 @@ import ComponentLoader from 'components/ComponentLoader';
import Bismillah from 'components/Bismillah';
import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
-// utils
-import scroller from 'utils/scroller';
-
// Helpers
import makeHeadTags from 'helpers/makeHeadTags';
import debug from 'helpers/debug';
@@ -114,27 +111,6 @@ class Surah extends Component {
return Object.keys(this.props.verses).length;
}
- handleVerseDropdownClick = (verseNum) => {
- const { verseIds, chapter, actions } = this.props; // eslint-disable-line no-shadow
-
- actions.verse.setcurrentVerse(`${chapter.chapterNumber}:${verseNum}`);
-
- if (verseIds.has(verseNum)) {
- return false;
- }
-
- if (verseNum > (this.getLast() + 10) || verseNum < this.getFirst()) {
- // This is beyond lazy loading next page.
- if (actions.push) {
- return actions.push.push(`/${chapter.chapterNumber}/${verseNum}-${verseNum + 10}`);
- }
- }
-
- return this.handleLazyLoadAyahs(() => setTimeout(() =>
- scroller.scrollTo(`verse:${chapter.chapterNumber}:${verseNum}`),
- 1000)); // then scroll to it
- }
-
handleLazyLoadAyahs = (callback) => {
const { verseIds, chapter, isEndOfSurah, options, actions } = this.props; // eslint-disable-line no-shadow, max-len
const range = [this.getFirst(), this.getLast()];
diff --git a/src/redux/actions/spec.js b/src/redux/actions/spec.js
index 98e0f55fc..9c1e36b2c 100644
--- a/src/redux/actions/spec.js
+++ b/src/redux/actions/spec.js
@@ -25,7 +25,7 @@ describe('action tests', () => {
expect(ayahsActions.load(1, 2, 4).types.length).to.equal(3);
expect(ayahsActions.clearCurrent().type).to.equal(ayahsConstants.CLEAR_CURRENT);
expect(ayahsActions.clearCurrentWord(1).type).to.equal(ayahsConstants.CLEAR_CURRENT_WORD);
- expect(ayahsActions.setcurrentVerse(1).type).to.equal(ayahsConstants.SET_CURRENT_VERSE);
+ expect(ayahsActions.setCurrentVerse(1).type).to.equal(ayahsConstants.SET_CURRENT_VERSE);
expect(ayahsActions.setCurrentWord(1).type).to.equal(ayahsConstants.SET_CURRENT_WORD);
});
diff --git a/src/redux/actions/verses.js b/src/redux/actions/verses.js
index bbba19628..be6b256b3 100644
--- a/src/redux/actions/verses.js
+++ b/src/redux/actions/verses.js
@@ -50,7 +50,7 @@ export function clearCurrentWord() {
};
}
-export function setcurrentVerse(id) {
+export function setCurrentVerse(id) {
return {
type: SET_CURRENT_VERSE,
id
diff --git a/src/styles/partials/_dropdown.scss b/src/styles/partials/_dropdown.scss
index 23e4a4edc..389277d68 100644
--- a/src/styles/partials/_dropdown.scss
+++ b/src/styles/partials/_dropdown.scss
@@ -36,13 +36,4 @@
white-space: nowrap;
margin-bottom: 0px;
}
-
- & > li > a {
- &:hover,
- &.active{
- background: $beige;
- color: $olive;
- cursor: pointer;
- }
- }
}
diff --git a/src/styles/partials/_search-input.scss b/src/styles/partials/_search-input.scss
index e14140d72..1412781c9 100644
--- a/src/styles/partials/_search-input.scss
+++ b/src/styles/partials/_search-input.scss
@@ -1,7 +1,7 @@
.right-inner-addon.search-input{
padding: 0px;
margin-bottom: 0px;
- width: 50vw;
+ width: auto;
input{
padding: 10px 15px;