* quran#372 colon separated surah/ayah

* quran#372 colon separated surah/ayah

* quran#372 colon separated surah/ayah

Re-output fonts with Apple option enabled

This probably doesn't matter for web, but it may matter for apps in the
future, plus wanted to keep in sync with the versions of the fonts used
by quran/quran.com-images.

Tooltip options for translation and transliteration (quran#376)

Reading mode single line (quran#377)

Author: thabti

src/components/Ayah/index.js

@@ -20,6 +20,7 @@ export default class Ayah extends Component {
     ayah: PropTypes.object.isRequired,
     match: PropTypes.array,
     isSearch: PropTypes.bool,
+    tooltip: PropTypes.string,
     currentWord: PropTypes.any, // gets passed in an integer, null by default
     onWordClick: PropTypes.func.isRequired
   };
@@ -32,6 +33,7 @@ export default class Ayah extends Component {
   shouldComponentUpdate(nextProps) {
     const conditions = [
       this.props.ayah !== nextProps.ayah,
+      this.props.tooltip !== nextProps.tooltip,
       this.props.currentWord !== nextProps.currentWord
     ];
 
@@ -73,7 +75,7 @@ export default class Ayah extends Component {
   }
 
   renderText() {
-    const { ayah, onWordClick } = this.props;
+    const { ayah, onWordClick, tooltip } = this.props;
 
     if (!ayah.words[0].code) {
       return false;
@@ -92,8 +94,8 @@ export default class Ayah extends Component {
         id = `${word.className}-${word.codeDec}`; // just don't include id
       }
 
-      if (word.translation) {
-        let tooltip = word.translation;
+      if (word.translation || word.transliteration) {
+        let tooltipContent = word[tooltip];
 
         return (
           <b
@@ -104,7 +106,9 @@ export default class Ayah extends Component {
             className={`${className} pointer`}
             data-toggle="tooltip"
             data-trigger="hover"
-            data-placement="top" title={tooltip}
+            data-placement="top"
+            data-original-title={tooltipContent}
+            title={tooltipContent}
             dangerouslySetInnerHTML={{__html: word.code}}
           />
         );

src/components/Ayah/style.scss

@@ -103,6 +103,7 @@
   .line{
     b{
       float: none;
+      display: inline;
     }
   }
 

src/components/Line/index.js

@@ -1,23 +1,24 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import debug from '../../helpers/debug';
 
 const styles = require('../Ayah/style.scss');
 
 export default class Line extends React.Component {
   static propTypes = {
-    line: React.PropTypes.array.isRequired
+    line: PropTypes.array.isRequired,
+    tooltip: PropTypes.string
   };
 
   renderText() {
-    const { line } = this.props;
+    const { line, tooltip } = this.props;
 
     if (!line[0].code) { // TODO shouldn't be possible, remove this clause
       return false;
     }
 
     let text = line.map(word => {
       if (word.translation) {
-        let tooltip = word.translation;
+        let tooltipContent = word[tooltip];
 
         return (
           <b
@@ -28,7 +29,9 @@ export default class Line extends React.Component {
             data-line={word.lineNun}
             data-page={word.pageNum}
             data-position={word.position}
-            data-placement="top" title={tooltip}
+            data-placement="top"
+            data-origin-title={tooltipContent}
+            title={tooltipContent}
             dangerouslySetInnerHTML={{__html: word.code}}
           />
         );

src/components/ReadingModeToggle/index.js

@@ -5,7 +5,12 @@ import SwitchToggle from '../SwitchToggle';
 const ReadingModeToggle = ({ onReadingModeToggle, isToggled }) => (
   <div>
     Reading:{' '}
-    <SwitchToggle checked={isToggled} onToggle={onReadingModeToggle} flat />
+    <SwitchToggle
+      checked={isToggled}
+      onToggle={onReadingModeToggle}
+      id="reading-mode-toggle"
+      flat
+    />
   </div>
 );
 

src/components/SwitchToggle/index.js

@@ -23,7 +23,6 @@ SwitchToggle.propTypes = {
 };
 
 SwitchToggle.defaultProps = {
-  id: 'toggle',
   flat: false,
   checked: false
 };

src/components/SwitchToggle/style.scss

@@ -21,6 +21,7 @@ $width: 50px;
   cursor: pointer;
   outline: none;
   user-select: none;
+  margin-bottom: 0px;
 }
 
 .toggleRound + .label {

src/components/TooltipDropdown/index.js

@@ -0,0 +1,60 @@
+import React, { Component, PropTypes } from 'react';
+
+import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import Popover from 'react-bootstrap/lib/Popover';
+import Row from 'react-bootstrap/lib/Row';
+import Col from 'react-bootstrap/lib/Col';
+
+import SwitchToggle from '../SwitchToggle';
+
+const style = require('./style.scss');
+
+export default class TooltipDropdown extends Component {
+  static propTypes = {
+    onOptionChange: PropTypes.func,
+    options: PropTypes.object
+  }
+
+  handleOptionSelected = ({ target: { checked } }) => {
+    const { onOptionChange } = this.props;
+
+    return onOptionChange({
+      tooltip: checked ? 'transliteration' : 'translation'
+    });
+  }
+
+  renderPopup() {
+    const { options: { tooltip }} = this.props;
+
+    return (
+      <Popover id="TooltipDropdown" title="Tooltip display" className={style.popover}>
+        <Row>
+          <Col xs={12}>
+            Translation{' '}
+            <SwitchToggle
+              checked={tooltip === 'transliteration'}
+              onToggle={this.handleOptionSelected}
+              id="tooltip-toggle"
+              flat
+            />
+            {' '}Transliteration
+          </Col>
+        </Row>
+      </Popover>
+    );
+  }
+
+  render() {
+    return (
+      <OverlayTrigger trigger="click" placement="bottom" overlay={this.renderPopup()} rootClose>
+        <a
+          href="#"
+          className="text-color"
+          data-metrics-event-name="TooltipDropdown"
+        >
+          Tooltip
+        </a>
+      </OverlayTrigger>
+    );
+  }
+}

src/components/TooltipDropdown/style.scss

@@ -0,0 +1,18 @@
+@import '../../styles/variables.scss';
+
+:local .popover{
+  :global(.popover-title){
+    font-family: $font-montserrat;
+    text-transform: uppercase;
+    color: $cream;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    font-size: 0.75em;
+  }
+
+  :global(.popover-content){
+    :global(a){
+      font-size: 0.8em;
+    }
+  }
+}

src/containers/Surah/index.js

@@ -16,6 +16,7 @@ import ReciterDropdown from 'components/ReciterDropdown';
 import SurahsDropdown from 'components/SurahsDropdown';
 import VersesDropdown from 'components/VersesDropdown';
 import FontSizeDropdown from 'components/FontSizeDropdown';
+import TooltipDropdown from 'components/TooltipDropdown';
 import InformationToggle from 'components/InformationToggle';
 import SurahInfo from 'components/SurahInfo';
 import Header from './Header';
@@ -186,18 +187,6 @@ export default class Surah extends Component {
     return loadAyahs(surah.id, from, to, Object.assign({}, options, payload));
   }
 
-  handleFontSizeChange = (payload) => {
-    const { setOption } = this.props; // eslint-disable-line no-shadow
-
-    return setOption(payload);
-  }
-
-  handleSurahInfoToggle = (payload) => {
-    const { setOption } = this.props; // eslint-disable-line no-shadow
-
-    return setOption(payload);
-  }
-
   handleNavbar = () => {
     // TODO: This should be done with react!
     if (window.pageYOffset > lastScroll) {
@@ -338,19 +327,20 @@ export default class Surah extends Component {
   }
 
   renderAyahs() {
-    const { ayahs, setCurrentWord } = this.props; // eslint-disable-line no-shadow
+    const { ayahs, setCurrentWord, options } = this.props; // eslint-disable-line no-shadow
 
     return Object.values(ayahs).map(ayah => (
       <Ayah
         ayah={ayah}
+        tooltip={options.tooltip}
         onWordClick={setCurrentWord}
         key={`${ayah.surahId}-${ayah.ayahNum}-ayah`}
       />
     ));
   }
 
   renderLines() {
-    const { lines } = this.props;
+    const { lines, options } = this.props;
     const keys = Object.keys(lines);
 
     return keys.map((lineNum, index) => {
@@ -360,33 +350,45 @@ export default class Surah extends Component {
 
       if (index + 1 !== keys.length && pageNum !== nextNum.split('-')[0]) {
         return [
-          <Line line={line} key={lineNum} />,
+          <Line line={line} key={lineNum} tooltip={options.tooltip} />,
           <PageBreak pageNum={parseInt(pageNum, 10) + 1} />
         ];
       }
 
-      return <Line line={line} key={lineNum} />;
+      return <Line line={line} key={lineNum} tooltip={options.tooltip} />;
     });
   }
 
   renderTopOptions() {
-    const { toggleReadingMode, options, surah } = this.props; // eslint-disable-line no-shadow
+    const {
+      toggleReadingMode, // eslint-disable-line no-shadow
+      options,
+      surah,
+      setOption // eslint-disable-line no-shadow
+    } = this.props;
 
     return (
       <Row>
         <Col md={6} mdOffset={6} className="text-right">
           <ul className="list-inline">
             <li>
               <InformationToggle
-                onToggle={this.handleSurahInfoToggle}
+                onToggle={setOption}
                 isShowingSurahInfo={options.isShowingSurahInfo}
               />
             </li>
             <li>|</li>
             <li>
               <FontSizeDropdown
                 options={options}
-                onOptionChange={this.handleFontSizeChange}
+                onOptionChange={setOption}
+              />
+            </li>
+            <li>|</li>
+            <li>
+              <TooltipDropdown
+                options={options}
+                onOptionChange={setOption}
               />
             </li>
             <li>|</li>

src/redux/modules/options.js

@@ -9,6 +9,7 @@ const initialState = {
   audio: 8,
   quran: 1,
   content: [19],
+  tooltip: 'translation',
   fontSize: {
     arabic: 3.5,
     translation: 2