{ this.container = container; }}
- className={styles.container}
+ {
+ this.container = container;
+ }}
onClick={this.handleClick}
>
-
-
+
+
);
}
}
diff --git a/src/components/Audioplayer/Track/style.scss b/src/components/Audioplayer/Track/style.scss
deleted file mode 100644
index 621e934b5..000000000
--- a/src/components/Audioplayer/Track/style.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@import '../../../styles/variables.scss';
-
-.container{
- height: 6px;
- width: 100%;
- background-color: #f7f7f7;
- cursor: pointer;
- margin-bottom: 5px;
-}
-
-.progress{
- height: 100%;
- background-color: $brand-primary;
- position: relative;
- padding-left: 12px;
-
-
- &:after{
- content: '';
- height: 12px;
- width: 12px;
- border-radius: 10px;
- position: absolute;
- right: 0px;
- display: block;
- background: #fff;
- top: -3px;
- box-shadow: 0 1px 2px rgba(0,0,0,0.45);
- transition: height 0.5s;
- }
-}
diff --git a/src/components/Audioplayer/index.js b/src/components/Audioplayer/index.js
index 44620c0f4..08678bfec 100644
--- a/src/components/Audioplayer/index.js
+++ b/src/components/Audioplayer/index.js
@@ -1,6 +1,7 @@
/* global document */
// TODO: This file is too too large.
import React, { Component, PropTypes } from 'react';
+import styled from 'styled-components';
import * as customPropTypes from 'customPropTypes';
import { connect } from 'react-redux';
import { camelize } from 'humps';
@@ -27,9 +28,28 @@ const RepeatDropdown = Loadable({
LoadingComponent: ComponentLoader
});
+const Wrapper = styled.div`
+ width: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 10%;
+`;
+
+const ControlItem = styled.li`
+ vertical-align: middle;
+ padding-right: 20px;
+ color: #939598;
+`;
+
export class Audioplayer extends Component {
+ state = {
+ loadingFile: false
+ };
+
componentDidMount() {
- const { currentFile } = this.props; // eslint-disable-line no-shadow, max-len
+ const { currentFile, currentVerse, audio, verses, load } = this.props; // eslint-disable-line no-shadow, max-len
+ const nextVerse = verses[this.getNext()];
debug('component:Audioplayer', 'componentDidMount');
@@ -37,7 +57,19 @@ export class Audioplayer extends Component {
return this.handleAddFileListeners(currentFile);
}
- console.error('Audioplayer mounted but no file available');
+ load({
+ chapterId: currentVerse.chapterId,
+ verseId: currentVerse.id,
+ verseKey: currentVerse.verseKey,
+ audio
+ });
+
+ load({
+ chapterId: nextVerse.chapterId,
+ verseId: nextVerse.id,
+ verseKey: nextVerse.verseKey,
+ audio
+ });
return false;
}
@@ -58,7 +90,7 @@ export class Audioplayer extends Component {
}
// Change verse
- if (this.props.currentVerse !== nextProps.currentVerse) {
+ if (this.props.currentVerse.verseKey !== nextProps.currentVerse.verseKey) {
if (this.props.currentFile) {
this.handleRemoveFileListeners(this.props.currentFile);
}
@@ -66,11 +98,42 @@ export class Audioplayer extends Component {
return this.handleAddFileListeners(nextProps.currentFile);
}
+ if (this.props.audio !== nextProps.audio) {
+ Object.keys(this.props.files).forEach(key =>
+ this.props.load({
+ chapterId: this.props.verses[key].chapterId,
+ verseId: this.props.verses[key].id,
+ verseKey: this.props.verses[key].verseKey,
+ audio: nextProps.audio
+ })
+ );
+ }
+
return false;
}
- componentDidUpdate() {
- const { currentFile, isPlaying } = this.props;
+ componentDidUpdate(previousProps) {
+ const {
+ currentFile,
+ isPlaying,
+ verses,
+ audio,
+ currentVerse,
+ load
+ } = this.props;
+
+ if (
+ currentVerse.verseKey !== previousProps.currentVerse.verseKey &&
+ verses[this.getNext()]
+ ) {
+ const verse = verses[this.getNext()];
+ load({
+ chapterId: verse.chapterId,
+ verseId: verse.id,
+ verseKey: verse.verseKey,
+ audio
+ });
+ }
if (!currentFile) return false;
@@ -95,30 +158,28 @@ export class Audioplayer extends Component {
}
getPrevious() {
- const { currentVerse, files } = this.props;
- const ayahIds = Object.keys(files);
- const index = ayahIds.findIndex(id => id === currentVerse);
+ const { currentVerse, verseIds } = this.props;
+ const index = verseIds.findIndex(id => id === currentVerse.verseKey);
- return ayahIds[index - 1];
+ return verseIds[index - 1];
}
getNext() {
- const { currentVerse, chapter, files, onLoadAyahs } = this.props;
- const ayahIds = Object.keys(files);
- const ayahNum = currentVerse.split(':')[1];
- const index = ayahIds.findIndex(id => id === currentVerse);
+ const { currentVerse, chapter, onLoadAyahs, verseIds } = this.props;
+ const ayahNum = currentVerse.verseKey.split(':')[1];
+ const index = verseIds.findIndex(id => id === currentVerse.verseKey);
if (chapter.versesCount === ayahNum + 1) {
// We are at the end of the chapter!
return false;
}
- if (ayahIds.length - 3 <= index + 1) {
+ if (verseIds.length - 3 <= index + 1) {
// Need to load the next set of ayahs!
onLoadAyahs();
}
- return ayahIds[index + 1];
+ return verseIds[index + 1];
}
handleAyahChange = (direction = 'next') => {
@@ -130,7 +191,7 @@ export class Audioplayer extends Component {
const nextVerse = this[camelize(`get_${direction}`)]();
if (!nextVerse) return pause();
- this.props[direction](currentVerse);
+ this.props[direction](currentVerse.verseKey);
this.handleScrollTo(nextVerse);
@@ -141,7 +202,7 @@ export class Audioplayer extends Component {
return false;
};
- scrollToVerse = (ayahNum = this.props.currentVerse) => {
+ scrollToVerse = (ayahNum = this.props.currentVerse.verseKey) => {
scroller.scrollTo(`verse:${ayahNum}`, -45);
};
@@ -163,7 +224,7 @@ export class Audioplayer extends Component {
preloadNext() {
const { currentVerse, files } = this.props;
const ayahIds = Object.keys(files);
- const index = ayahIds.findIndex(id => id === currentVerse) + 1;
+ const index = ayahIds.findIndex(id => id === currentVerse.verseKey) + 1;
for (let id = index; id <= index + 2; id += 1) {
if (ayahIds[id]) {
@@ -183,7 +244,7 @@ export class Audioplayer extends Component {
setRepeat, // eslint-disable-line no-shadow
setAyah // eslint-disable-line no-shadow
} = this.props;
- const [chapter, ayah] = currentVerse
+ const [chapter, ayah] = currentVerse.verseKey
.split(':')
.map(val => parseInt(val, 10));
@@ -244,7 +305,7 @@ export class Audioplayer extends Component {
if (!shouldScroll) {
// we use the inverse (!) here because we're toggling, so false is true
- this.scrollToVerse(currentVerse);
+ this.scrollToVerse(currentVerse.verseKey);
}
this.props.toggleScroll();
@@ -254,7 +315,7 @@ export class Audioplayer extends Component {
// NOTE: if no file, just wait.
if (!file) return false;
- const { update, currentTime } = this.props; // eslint-disable-line no-shadow
+ const { update } = this.props; // eslint-disable-line no-shadow
debug('component:Audioplayer', `Attaching listeners to ${file.src}`);
// Preload file
@@ -262,8 +323,8 @@ export class Audioplayer extends Component {
const onLoadeddata = () => {
// Default current time to zero. This will change
- file.currentTime = // eslint-disable-line no-param-reassign
- file.currentTime || currentTime || 0;
+ file.currentTime = 0; // eslint-disable-line
+ // file.currentTime || currentTime || 0;
return update({
duration: file.duration,
@@ -345,7 +406,9 @@ export class Audioplayer extends Component {
renderPreviousButton() {
const { currentVerse, files } = this.props;
if (!files) return false;
- const index = Object.keys(files).findIndex(id => id === currentVerse);
+ const index = Object.keys(files).findIndex(
+ id => id === currentVerse.verseKey
+ );
return (
-
+
{currentFile &&
}
{segments &&
- segments[currentVerse] &&
+ segments[currentVerse.verseKey] &&
- -
-
-
+
+
-
+
: {' '} - {currentVerse.split(':')[1]} -
- -
+ {currentVerse.verseKey.split(':')[1]}
+
+
{this.renderPreviousButton()} -
- -
+
+
{this.renderPlayStopButtons()} -
- -
+
+
{this.renderNextButton()} -
- -
+
+
-
- -
+
+
-
+
-
-
- Sitemap +
- + + Sitemap + +
-
(
.
- © 2016 Quran.com. + © { new Date().getFullYear() } Quran.com. {' '}
- + ); } diff --git a/src/components/GlobalSidebar/style.scss b/src/components/GlobalSidebar/style.scss index 84c586496..07a6ae30a 100644 --- a/src/components/GlobalSidebar/style.scss +++ b/src/components/GlobalSidebar/style.scss @@ -1,68 +1,37 @@ @import '../../styles/variables.scss'; - $width: 280px; - -.container{ +.container { position: fixed; left: $width * -1; - top: 0px; - bottom: 0px; + top: 0; + bottom: 0; background: #fff; z-index: 1031; - box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.2); + box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); visibility: hidden; - background: #fff; width: $width; - transition: left 0.35s cubic-bezier(0.24,1,0.32,1), visibility 0.2s; - - &.open{ - left: 0px; - visibility: visible;; + transition: left 0.35s cubic-bezier(0.24, 1, 0.32, 1), visibility 0.2s; + &.open { + left: 0; + visibility: visible; + ; } - - :global(.navbar-text){ - margin-left: 0px; - .backToHome { - margin-right: 23px; - font-size: 17px; - } + :global(.navbar-text) { + margin-left: 0; + .backToHome { + margin-right: 23px; + font-size: 17px; + } } - @media(max-width: $screen-sm) { width: $width; left: -1 * $width; - - &.open{ - left: 0px; + &.open { + left: 0; } - - :global(.navbar-text){ + :global(.navbar-text) { padding-left: 15px; } } } - -.list{ - padding-left: 0px; - - :global(li){ - color: #777; - - :global(a){ - color: #777; - padding: 10px 15px; - display: block; - - :global(.ss-icon){ - font-size: 18px; - margin-right: 20px; - } - - &:hover{ - background: #f5f5f5; - color: #333; - } - } - } -} \ No newline at end of file diff --git a/src/components/Home/JuzList/index.js b/src/components/Home/JuzList/index.js new file mode 100644 index 000000000..f61832bcc --- /dev/null +++ b/src/components/Home/JuzList/index.js @@ -0,0 +1,60 @@ +import React, { Component } from 'react'; +import * as customPropTypes from 'customPropTypes'; +import debug from 'helpers/debug'; +import Link from 'react-router/lib/Link'; + +const styles = require('./styles.scss'); + +class JuzList extends Component { + renderJuz(juz) { + const { chapters } = this.props; + const juzzChapters = Object.keys(juz.verseMapping); + + const list = juzzChapters.map(chapter => ( +{ - const { chapter, setOption, options, versesIds } = this.props; - - setOption(payload); - - if (chapter) { - const from = [...versesIds][0]; - const to = [...versesIds][[...versesIds].length - 1]; - const paging = { offset: from - 1, limit: to - from + 1 }; - this.props.load(chapter.chapterNumber, paging, { - ...options, - ...payload - }); - } - }; - handleVerseDropdownClick = (verseNum) => { const { versesIds, chapter } = this.props; // eslint-disable-line no-shadow @@ -54,9 +28,9 @@ class GlobalNavSurah extends Component { return false; } - return this.props.replace( - `/${chapter.chapterNumber}/${verseNum}-${verseNum + 10}` - ); + const to = Math.min(...[verseNum + 10, chapter.versesCount]); + + return this.props.replace(`/${chapter.chapterNumber}/${verseNum}-${to}`); }; handleDrawerToggle = (open) => { @@ -82,14 +56,7 @@ class GlobalNavSurah extends Component { } render() { - const { - chapter, - chapters, - setOption, - versesIds, - options, - ...props - } = this.props; + const { chapter, chapters, versesIds, options, ...props } = this.props; return ( } > - + ]} rightControls={[this.renderDrawerToggle()]} @@ -190,7 +126,6 @@ GlobalNavSurah.propTypes = { chapter: customPropTypes.surahType.isRequired, chapters: customPropTypes.chapters.isRequired, options: customPropTypes.optionsType.isRequired, - setOption: PropTypes.func.isRequired, versesIds: PropTypes.instanceOf(Set), load: PropTypes.func.isRequired, setCurrentVerse: PropTypes.func.isRequired, @@ -198,7 +133,6 @@ GlobalNavSurah.propTypes = { }; export default connect(mapStateToProps, { - ...OptionsActions, load, replace, setCurrentVerse diff --git a/src/components/GlobalNav/style.scss b/src/components/GlobalNav/style.scss index 1edb57884..1fff5993b 100644 --- a/src/components/GlobalNav/style.scss +++ b/src/components/GlobalNav/style.scss @@ -18,7 +18,3 @@ margin-right: 5px; } } - -.title{ - padding: 10px 15px; -} diff --git a/src/components/GlobalSidebar/index.js b/src/components/GlobalSidebar/index.js index a282a79a4..09861650e 100644 --- a/src/components/GlobalSidebar/index.js +++ b/src/components/GlobalSidebar/index.js @@ -1,5 +1,6 @@ /* global document */ import React, { PropTypes, Component } from 'react'; +import styled from 'styled-components'; import Link from 'react-router/lib/Link'; import Navbar from 'react-bootstrap/lib/Navbar'; import LocaleFormattedMessage from 'components/LocaleFormattedMessage'; @@ -8,6 +9,30 @@ const styles = require('./style.scss'); const NavbarHeader = Navbar.Header; +const List = styled.ul` + padding-left: 0; + + li{ + color: #777; + + a{ + color: #777; + padding: 10px 15px; + display: block; + + .ss-icon{ + font-size: 18px; + margin-right: 20px; + } + + &:hover{ + background: #f5f5f5; + color: #333; + } + } + } +`; + class GlobalSidebar extends Component { state = { settingsModalOpen: false @@ -53,7 +78,7 @@ class GlobalSidebar extends Component { + + {chapters[chapter].nameSimple} + + + + {juz.verseMapping[chapter]} + + ++ )); + + return list; + } + + render() { + debug('component:JuzList', 'render'); + const { juzs } = this.props; + + return ( +-
+ {juzs.map(juz => (
+
-
+ + {juz.juzNumber} +++ {juz.nameArabic} + {juz.nameSimple} ++ {this.renderJuz(juz)} +
+ ))}
+
-); }; diff --git a/src/components/Home/QuickSurahs/index.js b/src/components/Home/QuickSurahs/index.js index 55c555dfe..8b377ca13 100644 --- a/src/components/Home/QuickSurahs/index.js +++ b/src/components/Home/QuickSurahs/index.js @@ -1,71 +1,77 @@ import React from 'react'; -import debug from 'helpers/debug'; import Link from 'react-router/lib/Link'; +import styled from 'styled-components'; import LocaleFormattedMessage from 'components/LocaleFormattedMessage'; +import { Title } from 'containers/Home'; -const styles = require('containers/Home/style.scss'); +const Span = styled.span` + &:after { + content: '|'; + } + &:first-child, &:last-child { + &:after { + content: none; + } + } +`; -export default () => { - debug('component:Index', 'QuickSurahs'); +const isFriday = new Date().getDay() === 5; - const isFriday = new Date().getDay() === 5; - - return ( --
{' '} + + <LocaleFormattedMessage + id="surah.index.continue" + defaultMessage="Continue" + /> + {' '} <Link to={`/${props.chapter.chapterNumber}/${props.verse}`}> <span> - {props.chapter.nameSimple} ({props.chapter.chapterNumber}:{props.verse}) + {props.chapter.nameSimple} + {' '} + ( + {props.chapter.chapterNumber} + : + {props.verse} + ) </span> </Link> - </h4> + --
- {isFriday && - - - Surah Al-Kahf - - } - +export default () => ( + ++); diff --git a/src/components/Home/SurahsList/index.js b/src/components/Home/SurahsList/index.js index 9f6f9a9a2..cf8439f5d 100644 --- a/src/components/Home/SurahsList/index.js +++ b/src/components/Home/SurahsList/index.js @@ -1,43 +1,56 @@ import React from 'react'; +import styled from 'styled-components'; import * as customPropTypes from 'customPropTypes'; -import debug from 'helpers/debug'; import Link from 'react-router/lib/Link'; -const styles = require('./style.scss'); - -const SurahsList = (props) => { - debug('component:Index', 'SurahsList'); - - return ( -+ <LocaleFormattedMessage + id="surah.index.quickLinks" + defaultMessage="Quick links" + /> + {isFriday && + <Span> <Link - to="/36" + to="/18" data-metrics-event-name="QuickLinks:Click" - data-metrics-surah-id="36" + data-metrics-surah-id="18" > - Surah Yasin (Yaseen) + Surah Al-Kahf </Link> - </span> - <span> - <Link - to="/55" - data-metrics-event-name="QuickLinks:Click" - data-metrics-surah-id="55" - > - Surah Ar-Rahman - </Link> - </span> + </Span>} + <Span> + <Link + to="/36" + data-metrics-event-name="QuickLinks:Click" + data-metrics-surah-id="36" + > + Surah Yasin (Yaseen) + </Link> + </Span> + <Span> + <Link + to="/55" + data-metrics-event-name="QuickLinks:Click" + data-metrics-surah-id="55" + > + Surah Ar-Rahman + </Link> + </Span> - <span> - <Link - to="/67" - data-metrics-event-name="QuickLinks:Click" - data-metrics-surah-id="67" - > - Surah Al Mulk - </Link> - </span> - <span> - <Link - to="/ayatul-kursi" - data-metrics-event-name="QuickLinks:Click" - data-metrics-surah-id="ayatul-kursi" - > - Ayatul Kursi - </Link> - </span> - </h4> - </div> - ); -}; + <Span> + <Link + to="/67" + data-metrics-event-name="QuickLinks:Click" + data-metrics-surah-id="67" + > + Surah Al Mulk + </Link> + </Span> + <Span> + <Link + to="/ayatul-kursi" + data-metrics-event-name="QuickLinks:Click" + data-metrics-surah-id="ayatul-kursi" + > + Ayatul Kursi + </Link> + </Span> + +-
- {props.chapters.map(chapter => (
-
-
-
- - {chapter.chapterNumber} --- {chapter.nameSimple} --- -- -props.theme.brandPrimary}; + + &:hover { + background: #f1f1f1; + } +`; + +const Arabic = styled.div` + font-size: 14px; +`; + +const Translated = styled.div` + font-size: 10px; +`; + +const StyledLink = styled(Link)` + display: block; + padding: 10px 10px; +`; + +const SurahsList = props => ( +- -
-
+ {props.chapters.map(chapter => (
+
-
+
+ + {chapter.chapterNumber} +++ {chapter.nameSimple} +++ + + ++ - - {chapter.translatedName.name} - -
- ))}
- -
+
- ); - } - - render() { - debug('component:IndexHeader', 'Render'); - - return ( - - --+const StyledLink = styled(Link)` + display: inline-block; + width: 30%; + margin-top: 35px; +`; + +const Logo = styled.img` + padding-top: 10px; + padding-bottom: 10px; + height: auto; + width: 100%; +`; + +const Title = styled.h4` + color: ${props => props.theme.brandPrimary}; + font-size: 160%; + padding-bottom: 3.5%; +`; + +const IndexHeader = props => ( +- --- -
THE NOBLE QUR'AN
- {this.renderSearch()} -+ +); IndexHeader.propTypes = { noSearch: PropTypes.bool diff --git a/src/components/IndexHeader/style.scss b/src/components/IndexHeader/style.scss deleted file mode 100644 index 2211ac9df..000000000 --- a/src/components/IndexHeader/style.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import '../../styles/variables.scss'; - -.link{ - display: inline-block; - width: 30%; - margin-top: 35px; -} -.logo{ - padding-top: 10px; - padding-bottom: 10px; - height: auto; - width: 100%; -} -.title{ - color: lighten($brand-primary, 30%); - font-size: 160%; - padding-bottom: 3.5%; -} diff --git a/src/components/LazyLoad/index.js b/src/components/LazyLoad/index.js index 028c0d55c..4d77f4ad1 100644 --- a/src/components/LazyLoad/index.js +++ b/src/components/LazyLoad/index.js @@ -5,7 +5,6 @@ import ReactDOM from 'react-dom'; import debug from 'helpers/debug'; class LazyLoad extends Component { - componentDidMount() { if (__CLIENT__) { window.removeEventListener('scroll', this.onScroll, true); @@ -23,15 +22,17 @@ class LazyLoad extends Component { const { isLoading, isEnd, offset, onLazyLoad } = this.props; // TODO: Remove ReactDOM! const dom = ReactDOM.findDOMNode(this); // eslint-disable-line - const componentOffset = (dom.offsetParent || dom).offsetTop - (window.pageYOffset + window.innerHeight); // eslint-disable-line max-len + const componentOffset = + (dom.offsetParent || dom).offsetTop - + (window.pageYOffset + window.innerHeight); // eslint-disable-line max-len - if ((!isLoading && !isEnd) && componentOffset < offset) { + if (!isLoading && !isEnd && componentOffset < offset) { debug('component:LazyLoad', 'onLazyLoad called'); return onLazyLoad(); } return false; - } + }; render() { const { isEnd, loadingComponent, endComponent } = this.props; diff --git a/src/components/Line/index.js b/src/components/Line/index.js index 861de1cf7..146ead95e 100644 --- a/src/components/Line/index.js +++ b/src/components/Line/index.js @@ -32,7 +32,7 @@ class Line extends Component { // NOTE: Some 'word's are glyphs (jeem). Not words and should not be clicked for audio let wordAudioPosition = -1; - const text = line.map((word) => ( // eslint-disable-line + const text = line.map(word => // eslint-disable-line+++++- - - ); - } -} ++ ++ THE NOBLE QURAN + {!props.noSearch &&} - )); + ); return ( @@ -59,14 +59,15 @@ class Line extends Component { debug( 'component:Line', - `Page: ${line[0].pageNum} - Line: ${line[0].lineNum} - Ayah: ${line[0].verseKey}` + `Page: ${line[0].pageNum} - Line: ${line[0].lineNum} - Ayah: ${line[0] + .verseKey}` ); return ( )); @@ -165,8 +181,16 @@ class SearchAutocomplete extends Component { render() { return ( -{this.renderText()}diff --git a/src/components/LocaleSwitcher/index.js b/src/components/LocaleSwitcher/index.js index 863dd4118..cfb93e117 100644 --- a/src/components/LocaleSwitcher/index.js +++ b/src/components/LocaleSwitcher/index.js @@ -2,21 +2,27 @@ import React, { PropTypes, Component } from 'react'; import cookie from 'react-cookie'; import NavDropdown from 'react-bootstrap/lib/NavDropdown'; -import MenuItem from 'react-bootstrap/lib/MenuItem'; +import Menu, { MenuItem } from 'quran-components/lib/Menu'; + +import Icon from 'quran-components/lib/Icon'; +import LocaleFormattedMessage from 'components/LocaleFormattedMessage'; + import config from '../../config'; const { locales, defaultLocale } = config; class LocaleSwitcher extends Component { - state = { - currentLocale: defaultLocale, + currentLocale: defaultLocale }; componentDidMount() { if (__CLIENT__) { // TODO: This should be passed in as a prop! - this.setState({ currentLocale: cookie.load('currentLocale') || defaultLocale }); // eslint-disable-line + // eslint-disable-next-line + this.setState({ + currentLocale: cookie.load('currentLocale') || defaultLocale + }); } } @@ -29,7 +35,7 @@ class LocaleSwitcher extends Component { cookie.save('currentLocale', locale, { path: '/', - expires: new Date(expireDate), + expires: new Date(expireDate) }); window.location.reload(); @@ -50,7 +56,7 @@ class LocaleSwitcher extends Component { )); } - render() { + renderAsDropdown() { const { className } = this.props; return ( @@ -64,10 +70,43 @@ class LocaleSwitcher extends Component { ); } + + renderAsMenu() { + return ( + } + menu={ + + } + > ++ + ); + } + + render() { + const { renderAs } = this.props; + + if (renderAs === 'dropdown') { + return this.renderAsDropdown(); + } + + return this.renderAsMenu(); + } } LocaleSwitcher.propTypes = { - className: PropTypes.string + className: PropTypes.string, + renderAs: PropTypes.string +}; + +LocaleSwitcher.defaultProps = { + renderAs: 'dropdown' }; export default LocaleSwitcher; diff --git a/src/components/LocaleSwitcher/style.scss b/src/components/LocaleSwitcher/style.scss deleted file mode 100644 index bcaf01b53..000000000 --- a/src/components/LocaleSwitcher/style.scss +++ /dev/null @@ -1,7 +0,0 @@ -.local-switcher{ - color: red; -} - -.local-switch-link-active{ - color: #2CA4AB; -} diff --git a/src/components/NoScript/style.scss b/src/components/NoScript/style.scss deleted file mode 100644 index edd0d5113..000000000 --- a/src/components/NoScript/style.scss +++ /dev/null @@ -1,11 +0,0 @@ -.noscript_warning { - position: fixed; - top: 0; - left: 0; - width: 100%; - z-index: 1201; - text-align: center; - color: #FFF; - background-color: #AE0000; - padding: 5px 0 5px 0; -} diff --git a/src/components/PageBreak/style.scss b/src/components/PageBreak/style.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/components/SearchAutocomplete/index.js b/src/components/SearchAutocomplete/index.js index 1392cf8b1..4737eb171 100644 --- a/src/components/SearchAutocomplete/index.js +++ b/src/components/SearchAutocomplete/index.js @@ -10,9 +10,11 @@ const styles = require('./style.scss'); const ayahRegex = /^(\d+)(?::(\d+))?$/; class SearchAutocomplete extends Component { - componentDidMount() { - this.props.input.addEventListener('keydown', this.handleInputKeyDown.bind(this)); + this.props.input.addEventListener( + 'keydown', + this.handleInputKeyDown.bind(this) + ); } componentWillReceiveProps(nextProps) { @@ -51,13 +53,18 @@ class SearchAutocomplete extends Component { const chapterId = captures[1]; const ayahNum = captures[2]; const chapter = this.props.chapters[chapterId]; - matches.push([chapter.nameSimple, chapter.chapterNumber + (ayahNum ? `/${ayahNum}` : '')]); + matches.push([ + chapter.nameSimple, + chapter.chapterNumber + (ayahNum ? `/${ayahNum}` : '') + ]); } else if (value.length >= 2) { const escaped = value.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&'); Object.keys(this.props.chapters).forEach((chapterId) => { const chapter = this.props.chapters[chapterId]; - if (RegExp(escaped, 'i').test(chapter.nameSimple.replace(/['-]/g, ''))) { + if ( + RegExp(escaped, 'i').test(chapter.nameSimple.replace(/['-]/g, '')) + ) { matches.push([chapter.nameSimple, chapter.chapterNumber]); } else if (RegExp(escaped, 'i').test(chapter.nameArabic)) { matches.push([chapter.nameArabic, chapter.chapterNumber]); @@ -65,11 +72,13 @@ class SearchAutocomplete extends Component { }); } - return matches.map(match => ({ - text: `${match[0]}`, - href: `/${match[1]}` - })).slice(0, 5); - } + return matches + .map(match => ({ + text: `${match[0]}`, + href: `/${match[1]}` + })) + .slice(0, 5); + }; suggest = (query) => { const { lang } = this.props; @@ -77,10 +86,12 @@ class SearchAutocomplete extends Component { if (!query || ayahRegex.test(query)) return false; return this.props.suggest(query, lang); - } + }; handleInputKeyDown = (event) => { - if (!(event.keyCode === 9 || event.keyCode === 40 || event.keyCode === 27)) { + if ( + !(event.keyCode === 9 || event.keyCode === 40 || event.keyCode === 27) + ) { return; } @@ -104,7 +115,7 @@ class SearchAutocomplete extends Component { return; } event.preventDefault(); - } + }; handleItemKeyDown(event, item) { const items = this.menu.getElementsByTagName('li'); @@ -123,7 +134,8 @@ class SearchAutocomplete extends Component { // TODO if open closeMenu() break; case 38: // up - if (event.target === items[0]) { // we're on the first item, so focus the input + if (event.target === items[0]) { + // we're on the first item, so focus the input this.props.input.focus(); } else { event.target.previousSibling.focus(); @@ -157,7 +169,11 @@ class SearchAutocomplete extends Component { {item.ayah} -@@ -176,7 +187,7 @@ SmartBanner.propTypes = { price: customPropTypes.storeText, force: PropTypes.string, title: PropTypes.string, - author: PropTypes.string, + author: PropTypes.string }; SmartBanner.defaultProps = { @@ -188,17 +199,17 @@ SmartBanner.defaultProps = { ios: 'On the App Store', android: 'In Google Play', windows: 'In Windows Store', - kindle: 'In the Amazon Appstore', + kindle: 'In the Amazon Appstore' }, price: { ios: 'Free', android: 'Free', windows: 'Free', - kindle: 'Free', + kindle: 'Free' }, force: '', title: '', - author: '', + author: '' }; export default SmartBanner; diff --git a/src/components/SurahInfo/index.js b/src/components/SurahInfo/index.js index 16d13b1b4..666b07ca1 100644 --- a/src/components/SurahInfo/index.js +++ b/src/components/SurahInfo/index.js @@ -7,20 +7,16 @@ const style = require('./style.scss'); const SurahInfo = ({ chapter, info, isShowingSurahInfo, onClose }) => { // So we don't need to load images and files unless needed if (!isShowingSurahInfo) return ; - if (!info) { - return- { this.menu = ref; }}>
+
-
+
-
+
- this.handleOptionSelected('arabic', -1)} @@ -34,10 +45,13 @@ class FontSizeDropdown extends Component { -
-
-
+ -
+
- +
- this.handleOptionSelected('arabic', 1)} @@ -48,8 +62,8 @@ class FontSizeDropdown extends Component {
--
-
-
+
-
+
- this.handleOptionSelected('translation', -1)} @@ -58,10 +72,13 @@ class FontSizeDropdown extends Component { -
-
-
+ -
+
- +
-
this.handleOptionSelected('translation', 1)}
@@ -75,18 +92,36 @@ class FontSizeDropdown extends Component {
);
}
+ renderTitle() {
+ return (
+ ++ ); + } render() { return ( -
+ + - - {this.renderPopup()} -
++ {this.renderTitle()} +); } } -FontSizeDropdown.propTypes = { +FontSizeOptions.propTypes = { onOptionChange: PropTypes.func, fontSize: customPropTypes.fontSize.isRequired }; -export default FontSizeDropdown; +export default FontSizeOptions; diff --git a/src/components/FontSizeDropdown/style.scss b/src/components/Settings/FontSizeOptions/styles.scss similarity index 58% rename from src/components/FontSizeDropdown/style.scss rename to src/components/Settings/FontSizeOptions/styles.scss index eedffe1ab..c534829e1 100644 --- a/src/components/FontSizeDropdown/style.scss +++ b/src/components/Settings/FontSizeOptions/styles.scss @@ -1,9 +1,9 @@ -@import '../../styles/variables.scss'; +@import '../../../styles/variables.scss'; .list{ display: table; width: 100%; - padding: 15px 0px; + padding: 15px 0; } .item{ @@ -18,3 +18,12 @@ cursor: pointer; color: #777; } + +.title{ + padding: 10px 15px; +} + +.reset{ + float: right; + cursor: pointer; +} diff --git a/src/components/NightModeToggle/index.js b/src/components/Settings/NightModeToggle/index.js similarity index 89% rename from src/components/NightModeToggle/index.js rename to src/components/Settings/NightModeToggle/index.js index 5addc28ef..ae63a1470 100644 --- a/src/components/NightModeToggle/index.js +++ b/src/components/Settings/NightModeToggle/index.js @@ -4,7 +4,6 @@ import LocaleFormattedMessage from 'components/LocaleFormattedMessage'; import { MenuItem } from 'quran-components/lib/Menu'; class NightModeToggle extends Component { - componentDidMount() { const { isNightMode } = this.props; @@ -23,7 +22,7 @@ class NightModeToggle extends Component { } onToggle({ isNightMode: !isNightMode }); - } + }; render() { return ( @@ -31,7 +30,10 @@ class NightModeToggle extends Component { icon={} onClick={this.toggleNightMode} > -- + {this.renderOptions()} +
++ ); } diff --git a/src/components/ReadingModeToggle/index.js b/src/components/Settings/ReadingModeToggle/index.js similarity index 84% rename from src/components/ReadingModeToggle/index.js rename to src/components/Settings/ReadingModeToggle/index.js index 76146bdaa..84d057e9e 100644 --- a/src/components/ReadingModeToggle/index.js +++ b/src/components/Settings/ReadingModeToggle/index.js @@ -7,7 +7,10 @@ const ReadingModeToggle = ({ onToggle, isToggled }) => ( icon={} onClick={() => onToggle({ isReadingMode: !isToggled })} > - + ); diff --git a/src/components/ReciterDropdown/index.js b/src/components/Settings/ReciterDropdown/index.js similarity index 100% rename from src/components/ReciterDropdown/index.js rename to src/components/Settings/ReciterDropdown/index.js diff --git a/src/components/ReciterDropdown/style.scss b/src/components/Settings/ReciterDropdown/style.scss similarity index 100% rename from src/components/ReciterDropdown/style.scss rename to src/components/Settings/ReciterDropdown/style.scss diff --git a/src/components/TooltipDropdown/index.js b/src/components/Settings/TooltipOptions/index.js similarity index 60% rename from src/components/TooltipDropdown/index.js rename to src/components/Settings/TooltipOptions/index.js index 0f9d407be..f6c1e37e0 100644 --- a/src/components/TooltipDropdown/index.js +++ b/src/components/Settings/TooltipOptions/index.js @@ -4,10 +4,11 @@ import Radio from 'quran-components/lib/Radio'; import Icon from 'quran-components/lib/Icon'; import LocaleFormattedMessage from 'components/LocaleFormattedMessage'; -const TooltipDropdown = ({ tooltip, onOptionChange }) => { - const handleOptionChange = type => onOptionChange({ - tooltip: type - }); +const TooltipOptions = ({ tooltip, onOptionChange }) => { + const handleOptionChange = type => + onOptionChange({ + tooltip: type + }); const list = ['translation', 'transliteration'].map(type => ( )); @@ -31,14 +35,17 @@ const TooltipDropdown = ({ tooltip, onOptionChange }) => { } > - + ); }; -TooltipDropdown.propTypes = { +TooltipOptions.propTypes = { onOptionChange: PropTypes.func, - tooltip: PropTypes.string.isRequired, + tooltip: PropTypes.string.isRequired }; -export default TooltipDropdown; +export default TooltipOptions; diff --git a/src/components/TooltipDropdown/style.scss b/src/components/Settings/TooltipOptions/style.scss similarity index 87% rename from src/components/TooltipDropdown/style.scss rename to src/components/Settings/TooltipOptions/style.scss index 298b6cf11..60cf22804 100644 --- a/src/components/TooltipDropdown/style.scss +++ b/src/components/Settings/TooltipOptions/style.scss @@ -1,4 +1,4 @@ -@import '../../styles/variables.scss'; +@import '../../../styles/variables.scss'; :local .popover{ :global(.popover-title){ diff --git a/src/components/ContentDropdown/index.js b/src/components/Settings/TranslationsDropdown/index.js similarity index 54% rename from src/components/ContentDropdown/index.js rename to src/components/Settings/TranslationsDropdown/index.js index 04472f855..b034f13e9 100644 --- a/src/components/ContentDropdown/index.js +++ b/src/components/Settings/TranslationsDropdown/index.js @@ -10,30 +10,28 @@ import Icon from 'quran-components/lib/Icon'; const style = require('./style.scss'); -const compareAlphabetically = property => - (previous, next) => { - const previousText = previous[property].toUpperCase(); - const nextText = next[property].toUpperCase(); +const compareAlphabetically = property => (previous, next) => { + const previousText = previous[property].toUpperCase(); + const nextText = next[property].toUpperCase(); - if (previousText < nextText) { - return -1; - } - - if (previousText > nextText) { - return 1; - } + if (previousText < nextText) { + return -1; + } - return 0; - }; + if (previousText > nextText) { + return 1; + } + return 0; +}; -class ContentDropdown extends Component { +const TRANSLATIONS_SELECTION_LIMIT = 10; +class TranslationsDropdown extends Component { componentDidMount() { if (!this.props.translationOptions.length) { return this.props.loadTranslations(); } - return false; } @@ -41,13 +39,14 @@ class ContentDropdown extends Component { const { onOptionChange } = this.props; onOptionChange({ translations: [] }); - } + }; handleOptionSelected(id) { const { onOptionChange, translations } = this.props; - if (translations.find(option => option === id)) { - onOptionChange({ translations: translations.filter(option => option !== id) }); + onOptionChange({ + translations: translations.filter(option => option !== id) + }); } else { onOptionChange({ translations: [...translations, id] }); } @@ -65,6 +64,9 @@ class ContentDropdown extends Component { id={translation.id + translation.languageName} name="translation" checked={checked || false} + disabled={ + !checked && translations.length >= TRANSLATIONS_SELECTION_LIMIT + } handleChange={() => this.handleOptionSelected(translation.id)} > {render(translation)} @@ -76,62 +78,78 @@ class ContentDropdown extends Component { renderEnglishList() { const list = this.props.translationOptions - .filter(translation => translation.languageName === 'English') - .sort(compareAlphabetically('authorName')); + .filter(translation => translation.languageName === 'English') + .sort(compareAlphabetically('authorName')); return this.renderItems(list, translation => translation.authorName); } renderLanguagesList() { const list = this.props.translationOptions - .filter(translation => translation.languageName !== 'English') - .sort(compareAlphabetically('languageName')); + .filter(translation => translation.languageName !== 'English') + .sort(compareAlphabetically('languageName')); - return this.renderItems(list, translation => `${translation.languageName} - ${translation.authorName}`); + return this.renderItems( + list, + translation => `${translation.languageName} - ${translation.authorName}` + ); } render() { const { translations, translationOptions } = this.props; - return ( } menu={ - translationOptions.length ? - + : } > - + ); } } -ContentDropdown.propTypes = { +TranslationsDropdown.propTypes = { onOptionChange: PropTypes.func.isRequired, translations: PropTypes.arrayOf(PropTypes.number).isRequired, translationOptions: customPropTypes.translationOptions, loadTranslations: PropTypes.func.isRequired }; -export default connect(state => ({ - translationOptions: state.options.options.translations, - loadingTranslations: state.options.loadingTranslations, - translations: state.options.translations -}), { loadTranslations })(ContentDropdown); +export default connect( + state => ({ + translationOptions: state.options.options.translations, + loadingTranslations: state.options.loadingTranslations, + translations: state.options.translations + }), + { loadTranslations } +)(TranslationsDropdown); diff --git a/src/components/ContentDropdown/spec.js b/src/components/Settings/TranslationsDropdown/spec.js similarity index 77% rename from src/components/ContentDropdown/spec.js rename to src/components/Settings/TranslationsDropdown/spec.js index b6a377767..8710c93db 100644 --- a/src/components/ContentDropdown/spec.js +++ b/src/components/Settings/TranslationsDropdown/spec.js @@ -1,20 +1,19 @@ import React from 'react'; -import { mountWithIntl } from '../../../tests/helpers/intl-enzyme-test-helper.js'; +import { + mountWithIntl +} from '../../../tests/helpers/intl-enzyme-test-helper.js'; -import ContentDropdown, { slugs } from './index'; +import Translations, { slugs } from './index'; let wrapper; let onOptionChange = sinon.stub(); const defaultOption = 19; -describe(' ', () => { +describe(' ', () => { beforeEach(() => { onOptionChange = sinon.stub(); wrapper = mountWithIntl( - + ); }); @@ -29,7 +28,9 @@ describe(' ', () => { }); it('should show chosen content option', () => { - expect(wrapper.find(`#${defaultOption}en`).prop('checked')).to.equal(defaultOption); + expect(wrapper.find(`#${defaultOption}en`).prop('checked')).to.equal( + defaultOption + ); }); it('should add option when clicked', () => { @@ -37,7 +38,9 @@ describe(' ', () => { wrapper.find(`#${id}en`).simulate('change'); expect(onOptionChange).to.have.been.called; // eslint-disable-line - expect(onOptionChange).to.have.been.calledWith({ content: [defaultOption, id] }); + expect(onOptionChange).to.have.been.calledWith({ + content: [defaultOption, id] + }); }); it('should remove option when clicked', () => { diff --git a/src/components/ContentDropdown/style.scss b/src/components/Settings/TranslationsDropdown/style.scss similarity index 98% rename from src/components/ContentDropdown/style.scss rename to src/components/Settings/TranslationsDropdown/style.scss index 2936f0d65..9d6dbea3c 100644 --- a/src/components/ContentDropdown/style.scss +++ b/src/components/Settings/TranslationsDropdown/style.scss @@ -1,4 +1,4 @@ -@import '../../styles/variables.scss'; +@import '../../../styles/variables.scss'; .dropdown{ & + :global(.dropdown-menu){ diff --git a/src/components/Settings/index.js b/src/components/Settings/index.js new file mode 100644 index 000000000..b3e3808f5 --- /dev/null +++ b/src/components/Settings/index.js @@ -0,0 +1,86 @@ +import React, { PropTypes, Component } from 'react'; +import * as OptionsActions from 'redux/actions/options.js'; +import { connect } from 'react-redux'; +import Menu from 'quran-components/lib/Menu'; +import { load } from 'redux/actions/verses.js'; + +import * as customPropTypes from 'customPropTypes'; +import LocaleSwitcher from 'components/LocaleSwitcher'; + +import FontSizeOptions from './FontSizeOptions'; + +import ReadingModeToggle from './ReadingModeToggle'; +import NightModeToggle from './NightModeToggle'; +import ChapterInfoToggle from './ChapterInfoToggle'; +import ReciterDropdown from './ReciterDropdown'; +import TranslationsDropdown from './TranslationsDropdown'; +import TooltipOptions from './TooltipOptions'; + +class Settings extends Component { + handleOptionChange = (payload) => { + const { chapter, setOption, options, versesIds } = this.props; + + setOption(payload); + + if (chapter) { + const from = [...versesIds][0]; + const to = [...versesIds][[...versesIds].length - 1]; + const paging = { offset: from - 1, limit: to - from + 1 }; + this.props.load(chapter.chapterNumber, paging, { + ...options, + ...payload + }); + } + }; + + render() { + const { setOption, options } = this.props; + + return ( + + ); + } +} + +Settings.propTypes = { + setOption: PropTypes.func.isRequired, + load: PropTypes.func.isRequired, + chapter: customPropTypes.surahType.isRequired, + options: customPropTypes.optionsType.isRequired, + versesIds: PropTypes.instanceOf(Set) +}; + +function mapStateToProps(state) { + return { + options: state.options + }; +} + +export default connect(mapStateToProps, { + ...OptionsActions, + load +})(Settings); diff --git a/src/components/SmartBanner/index.js b/src/components/SmartBanner/index.js index 3dd954306..db6e3f9fc 100644 --- a/src/components/SmartBanner/index.js +++ b/src/components/SmartBanner/index.js @@ -5,7 +5,6 @@ import useragent from 'express-useragent'; import cookie from 'react-cookie'; class SmartBanner extends Component { - state = { settings: {}, deviceType: '', @@ -30,7 +29,10 @@ class SmartBanner extends Component { (agent.isChrome ? osVersion < 44 : true) ) { deviceType = 'android'; - } else if ((agent.isiPad || agent.isiPhone) && (agent.isSafari ? osVersion < 6 : true)) { + } else if ( + (agent.isiPad || agent.isiPhone) && + (agent.isSafari ? osVersion < 6 : true) + ) { deviceType = 'ios'; } @@ -46,13 +48,12 @@ class SmartBanner extends Component { icon: 'app-banner-ios.jpg', appMeta: 'apple-itunes-app', getStoreLink: () => - `https://itunes.apple.com/${this.props.appStoreLanguage}/app/id`, + `https://itunes.apple.com/${this.props.appStoreLanguage}/app/id` }, android: { icon: 'app-banner-android.png', appMeta: 'google-play-app', - getStoreLink: () => - 'http://play.google.com/store/apps/details?id=', + getStoreLink: () => 'http://play.google.com/store/apps/details?id=' } }; @@ -67,36 +68,40 @@ class SmartBanner extends Component { parseAppId = (metaName) => { const meta = window.document.querySelector(`meta[name="${metaName}"]`); return /app-id=([^\s,]+)/.exec(meta.getAttribute('content'))[1]; - } + }; hide = () => { window.document.querySelector('html').classList.remove('smartbanner-show'); - } + }; show = () => { window.document.querySelector('html').classList.add('smartbanner-show'); - } + }; close() { this.hide(); let expireDate = new Date(); - expireDate = new Date(expireDate.setDate(expireDate.getDate() + this.props.daysHidden)); + expireDate = new Date( + expireDate.setDate(expireDate.getDate() + this.props.daysHidden) + ); cookie.save('smartbanner-closed', 'true', { path: '/', - expires: expireDate, + expires: expireDate }); } install() { let expireDate = new Date(); - expireDate = new Date(expireDate.setDate(expireDate.getDate() + this.props.daysReminder)); + expireDate = new Date( + expireDate.setDate(expireDate.getDate() + this.props.daysReminder) + ); this.hide(); cookie.save('smartbanner-installed', 'true', { path: '/', - expires: expireDate, + expires: expireDate }); } @@ -109,11 +114,10 @@ class SmartBanner extends Component { return { icon, link, - inStore, + inStore }; } - render() { // Don't show banner when: // 1) if device isn't iOS or Android @@ -121,10 +125,12 @@ class SmartBanner extends Component { // 3) user dismissed banner, // 4) or we have no app id in meta - if (!this.state.deviceType - || window.navigator.standalone - || cookie.load('smartbanner-closed') - || cookie.load('smartbanner-installed')) { + if ( + !this.state.deviceType || + window.navigator.standalone || + cookie.load('smartbanner-closed') || + cookie.load('smartbanner-installed') + ) { return null; } @@ -137,7 +143,7 @@ class SmartBanner extends Component { const { icon, link, inStore } = this.retrieveInfo(); const wrapperClassName = `smartbanner smartbanner-${this.state.deviceType}`; const iconStyle = { - backgroundImage: `url(${icon})`, + backgroundImage: `url(${icon})` }; return ( @@ -158,7 +164,12 @@ class SmartBanner extends Component { {inStore}
+@@ -180,7 +204,11 @@ function mapStateToProps(state, ownProps) { const suggestions = state.suggestResults.results[ownProps.value]; let lang = 'en'; - if (state.verses && state.verses.entities && state.verses.entities[chapterId]) { + if ( + state.verses && + state.verses.entities && + state.verses.entities[chapterId] + ) { const ayahs = state.verses.entities[chapterId]; const verseKey = Object.keys(ayahs)[0]; @@ -209,7 +237,7 @@ SearchAutocomplete.propTypes = { suggest: PropTypes.func.isRequired, suggestions: customPropTypes.suggestions, lang: PropTypes.string, - delay: PropTypes.number, + delay: PropTypes.number }; SearchAutocomplete.defaultProps = { diff --git a/src/components/SearchInput/index.js b/src/components/SearchInput/index.js index df9885d4a..e423170eb 100644 --- a/src/components/SearchInput/index.js +++ b/src/components/SearchInput/index.js @@ -9,7 +9,6 @@ import SearchAutocomplete from 'components/SearchAutocomplete'; import debug from 'helpers/debug'; class SearchInput extends Component { - static contextTypes = { metrics: MetricsPropTypes.metrics }; @@ -24,7 +23,11 @@ class SearchInput extends Component { const shortcutSearch = /\d[\.,\:,\,,\\,//]/g; // eslint-disable-line no-useless-escape const splitSearch = /[\.,\:,\,,\\,//]/g; // eslint-disable-line no-useless-escape - if (event.key === 'Enter' || event.keyCode === 13 || event.type === 'click') { + if ( + event.key === 'Enter' || + event.keyCode === 13 || + event.type === 'click' + ) { const inputEl = this.input; const searching = inputEl.value.trim(); let ayah; @@ -40,14 +43,8 @@ class SearchInput extends Component { const pattern = new RegExp(shortcutSearch); if (pattern.test(searching)) { - surah = parseInt( - searching.split(splitSearch)[0], - 10 - ); - ayah = parseInt( - searching.split(splitSearch)[1], - 10 - ); + surah = parseInt(searching.split(splitSearch)[0], 10); + ayah = parseInt(searching.split(splitSearch)[1], 10); if (isNaN(ayah)) { ayah = 1; @@ -55,10 +52,10 @@ class SearchInput extends Component { this.context.metrics.track('Search', { action: 'surah', - label: `/${surah}/${ayah}-${(ayah + 10)}` + label: `/${surah}/${ayah}-${ayah + 10}` }); - return this.props.push(`/${surah}/${ayah}-${(ayah + 10)}`); + return this.props.push(`/${surah}/${ayah}-${ayah + 10}`); } this.context.metrics.track('Search', { @@ -82,30 +79,35 @@ class SearchInput extends Component { } return false; - } + }; render() { const { showAutocomplete } = this.state; const { className, intl } = this.props; - const placeholder = intl.formatMessage({ id: 'search.placeholder', defaultMessage: 'Search' }); + const placeholder = intl.formatMessage({ + id: 'search.placeholder', + defaultMessage: 'Search' + }); debug('component:SearchInput', 'Render'); return (- {
+ this.menu = ref;
+ }}
+ >
{this.renderList()}
- + + + { this.input = input; }} + ref={(input) => { + this.input = input; + }} onFocus={() => this.setState({ showAutocomplete: true })} // onBlur={() => this.setState({ showAutocomplete: false })} onKeyUp={this.search} /> - { - showAutocomplete && -); } diff --git a/src/components/InformationToggle/index.js b/src/components/Settings/ChapterInfoToggle/index.js similarity index 100% rename from src/components/InformationToggle/index.js rename to src/components/Settings/ChapterInfoToggle/index.js diff --git a/src/components/FontSizeDropdown/index.js b/src/components/Settings/FontSizeOptions/index.js similarity index 50% rename from src/components/FontSizeDropdown/index.js rename to src/components/Settings/FontSizeOptions/index.js index 9129ba028..edeefc285 100644 --- a/src/components/FontSizeDropdown/index.js +++ b/src/components/Settings/FontSizeOptions/index.js @@ -1,11 +1,11 @@ import React, { Component, PropTypes } from 'react'; import * as customPropTypes from 'customPropTypes'; import LocaleFormattedMessage from 'components/LocaleFormattedMessage'; +import Icon from 'quran-components/lib/Icon'; -const style = require('./style.scss'); - -class FontSizeDropdown extends Component { +const styles = require('./styles.scss'); +class FontSizeOptions extends Component { handleOptionSelected = (type, direction) => { const { onOptionChange, fontSize } = this.props; const changeFactor = { @@ -16,16 +16,27 @@ class FontSizeDropdown extends Component { return onOptionChange({ fontSize: { ...fontSize, - [type]: fontSize[type] + (changeFactor[type] * direction) + [type]: fontSize[type] + changeFactor[type] * direction } }); - } + }; + + resetFontSize = () => { + const { onOptionChange } = this.props; + + return onOptionChange({ + fontSize: { + arabic: 3.5, + translation: 2 + } + }); + }; - renderPopup() { + renderOptions() { return (- } + {showAutocomplete && + } -- this.install()} className="smartbanner-button" data-metrics-event-name="SmartBanner:InstallAapp"> + this.install()} + className="smartbanner-button" + data-metrics-event-name="SmartBanner:InstallAapp" + > {this.props.button}-
-
; - } + if (!info) return ; return ( - { - onClose && + {onClose && -
+