Tooltip options for translation and transliteration (quran#376)

Author: mmahalwy

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/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