Merge branch 'master' of https://github.com/quran/quran.com-frontend

quran · May 4, 2017 · 93fd5cc · 93fd5cc
2 parents 103ceb5 + cb27a41
commit 93fd5cc
Show file tree

Hide file tree

Showing 26 changed files with 1,063 additions and 326 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -5,8 +5,11 @@
     "comma-dangle": 0,
     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "import/no-extraneous-dependencies": 0,
+    "import/prefer-default-export": 1,
     "import/extensions": 0,
     "import/no-unresolved": 0,
+    "property": 0,
+    "no-mixed-operators": 0,
     "strict": 0
   },
   "ecmaFeatures": {
@@ -38,7 +41,9 @@
     mixpanel: true,
     "expect": true,
     "browser": true,
+    "import": true,
     "FB": true,
+    "window": true,
     sinon: true
   },
   "env": {

diff --git a/package.json b/package.json
@@ -12,14 +12,28 @@
     "test:dev:lint": "./node_modules/eslint/bin/eslint.js ./src",
     "test:stylelint": "stylelint './src/**/*.scss' --config ./webpack/.stylelintrc",
     "dev-old": "env NODE_PATH='./src' PORT=8000 UV_THREADPOOL_SIZE=100 node ./webpack/webpack-dev-server.js & env NODE_PATH='./src' PORT=8000 node ./bin/server.js",
-    "dev": "env NODE_PATH='./src' PORT=8000 UV_THREADPOOL_SIZE=100 node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config ./webpack/dev.config.js & env NODE_PATH='./src' PORT=8000 node ./bin/server.js",
+    "dev": "env NODE_PATH='./src' PORT=8000 UV_THREADPOOL_SIZE=100 node --expose-gc ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config ./webpack/dev.config.js & env NODE_PATH='./src' PORT=8000 node --expose-gc ./bin/server.js",
     "start": "NODE_PATH='src' node ./start",
     "build": "npm run build:client & npm run build:server",
     "build:server": "babel ./src -d ./dist -D",
     "build:client": "webpack --config ./webpack/prod.config.js",
     "validate": "npm ls",
     "analyze:build": "env NODE_ENV=production webpack --json --config ./webpack/prod.config.js  > bundle-stats.json",
-    "analyze:json": "webpack-bundle-size-analyzer bundle-stats.json"
+    "analyze:json": "webpack-bundle-size-analyzer bundle-stats.json",
+    "lint:fix": "npm run test:dev:lint -- --fix",
+    "prettier": "prettier --single-quote --write",
+    "precommit": "lint-staged"
+  },
+  "pre-commit": [
+    "test:stylelint",
+    "precommit"
+  ],
+  "lint-staged": {
+    "*.js": [
+      "npm run prettier",
+      "npm run lint:fix",
+      "git add"
+    ]
   },
   "engines": {
     "node": ">= 6.3.0"
@@ -72,6 +86,7 @@
     "file-loader": "0.8.5",
     "fontfaceobserver": "1.7.3",
     "history": "^3.0.0",
+    "html-pdf": "^2.1.0",
     "html-webpack-plugin": "1.7.0",
     "http-proxy": "1.14.0",
     "humps": "2.0.0",
@@ -100,7 +115,7 @@
     "react-hot-loader": "3.0.0-beta.6",
     "react-inlinesvg": "0.5.4",
     "react-intl": "2.1.5",
-    "react-loadable": "^3.0.1",
+    "react-loadable": "^3.3.1",
     "react-metrics": "1.2.1",
     "react-paginate": "4.1.0",
     "react-redux": "5.0.1",
@@ -158,13 +173,15 @@
     "karma-sinon": "1.0.4",
     "karma-sourcemap-loader": "0.3.7",
     "karma-webpack": "1.8.0",
+    "lint-staged": "^3.4.0",
     "mocha": "2.2.5",
     "nodemon": "1.7.1",
     "path": "0.11.14",
     "phantomjs": "1.9.20",
     "phantomjs-polyfill": "0.0.1",
     "piping": "0.3.0",
     "pre-commit": "1.1.3",
+    "prettier": "^1.2.2",
     "react-addons-test-utils": "15.4.1",
     "react-transform-catch-errors": "1.0.0",
     "react-transform-hmr": "1.0.1",
@@ -179,9 +196,5 @@
     "webpack-bundle-analyzer": "2.2.1",
     "webpack-dev-server": "2.1.0-beta.0",
     "webpack-hot-middleware": "2.12.2"
-  },
-  "pre-commit": [
-    "test:dev:lint",
-    "test:stylelint"
-  ]
+  }
 }
diff --git a/src/components/ComponentLoader/index.js b/src/components/ComponentLoader/index.js
@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react';
 
 const ComponentLoader = ({ isLoading, error, pastDelay }) => {
   if (isLoading) {
-    return pastDelay ? <div>Loading...</div> : null;
+    return pastDelay ? <noscript /> : null;
   } else if (error) {
     return <div>Error! Component failed to load</div>;
   }

diff --git a/src/components/ContentDropdown/style.scss b/src/components/ContentDropdown/style.scss
@@ -19,6 +19,7 @@
     height: 315px;
     overflow-x: hidden;
     overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
 
     li {
       padding-right: 20px;

diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
@@ -28,12 +28,12 @@ const Footer = () => (
                   </Link>
                 </li>
                 <li>
-                  <Link to="/contact">
+                  <a href="https://quran.zendesk.com/hc/en-us/requests/new">
                     <LocaleFormattedMessage
                       id="nav.contactUs"
                       defaultMessage="Contact Us"
                     />
-                  </Link>
+                  </a>
                 </li>
                 <li>
                   <a

diff --git a/src/components/Home/SurahsList/index.js b/src/components/Home/SurahsList/index.js
@@ -23,15 +23,20 @@ const SurahsList = (props) => {
               <span className={`icon-surah${chapter.id}`} />
             </div>
 
-            <div className={`col-md-12 col-xs-push-2 col-sm-push-2 col-md-push-2 col-lg-push-2 col-xl-push-2 ${styles.translated_name}`}>
-              <span className={`text-uppercase ${chapter.translatedName.languageName}`}>
+            <div
+              className={`col-xs-10 col-xs-offset-2 ${styles.translated_name}`}
+            >
+              <span
+                className={`text-uppercase ${chapter.translatedName.languageName}`}
+              >
                 {chapter.translatedName.name}
               </span>
             </div>
           </Link>
         </li>
       ))}
-    </ul>);
+    </ul>
+  );
 };
 
 SurahsList.propTypes = {

diff --git a/src/components/SurahInfo/style.scss b/src/components/SurahInfo/style.scss
@@ -54,6 +54,7 @@ $transition-speed: 0.75s;
   .info{
     height: 100%;
     overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
     padding-top: 15px;
     padding-bottom: 15px;
     font-size: 16px;

diff --git a/src/components/SurahsDropdown/style.scss b/src/components/SurahsDropdown/style.scss
@@ -4,6 +4,7 @@
     max-height: 60vh;
     overflow-y: scroll;
     overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
   }
 }
 

diff --git a/src/components/Verse/index.js b/src/components/Verse/index.js
@@ -89,64 +89,73 @@ class Verse extends Component {
     const array = match || verse.translations || [];
 
     return array.map(translation => (
-      <Translation translation={translation} index={translation.id} key={translation.id} />
+      <Translation
+        translation={translation}
+        index={translation.id}
+        key={translation.id}
+      />
     ));
   }
 
   renderMedia() {
-    const { verse, mediaActions, isSearched } = this.props;
+    const { verse, mediaActions, isSearched, isPdf } = this.props;
 
     if (isSearched || !verse.mediaContents) return false;
+    if (isPdf) return false;
 
     return (
       <div>
-        {
-          verse.mediaContents.map((content, index) => (
-            <div
-              className={`${styles.translation} translation`}
-              key={index}
-            >
-              <h2 className="text-translation times-new">
-                <small>
-                  <a
-                    tabIndex="-1"
-                    className="pointer"
-                    onClick={() => mediaActions.setMedia(content)}
-                    data-metrics-event-name="Media Click"
-                    data-metrics-media-content-url={content.url}
-                    data-metrics-media-content-id={content.id}
-                    data-metrics-media-content-verse-key={verse.verseKey}
-                  >
-                    <LocaleFormattedMessage
-                      id="verse.media.lectureFrom"
-                      defaultMessage="Watch lecture by {from}"
-                      values={{ from: content.authorName }}
-                    />
-                  </a>
-                </small>
-              </h2>
-            </div>
-          ))
-        }
+        {verse.mediaContents.map((content, index) => (
+          <div className={`${styles.translation} translation`} key={index}>
+            <h2 className="text-translation times-new">
+              <small>
+                <a
+                  tabIndex="-1"
+                  className="pointer"
+                  onClick={() => mediaActions.setMedia(content)}
+                  data-metrics-event-name="Media Click"
+                  data-metrics-media-content-url={content.url}
+                  data-metrics-media-content-id={content.id}
+                  data-metrics-media-content-verse-key={verse.verseKey}
+                >
+                  <LocaleFormattedMessage
+                    id="verse.media.lectureFrom"
+                    defaultMessage="Watch lecture by {from}"
+                    values={{ from: content.authorName }}
+                  />
+                </a>
+              </small>
+            </h2>
+          </div>
+        ))}
       </div>
     );
   }
 
   renderText() {
-    const { verse, tooltip, currentVerse, isPlaying, audioActions, isSearched } = this.props; // eslint-disable-line max-len
+    const {
+      verse,
+      tooltip,
+      currentVerse,
+      isPlaying,
+      audioActions,
+      isSearched
+    } = this.props; // eslint-disable-line max-len
     // NOTE: Some 'word's are glyphs (jeem). Not words and should not be clicked for audio
     let wordAudioPosition = -1;
     const renderText = false; // userAgent.isBot;
 
-    const text = verse.words.map(word => ( // eslint-disable-line
+    const text = verse.words.map((word) => ( // eslint-disable-line
       <Word
         word={word}
         key={`${word.position}-${word.code}-${word.lineNum}`}
         currentVerse={currentVerse}
         tooltip={tooltip}
         isPlaying={isPlaying}
         audioActions={audioActions}
-        audioPosition={word.charType === 'word' ? wordAudioPosition += 1 : null}
+        audioPosition={
+          word.charType === 'word' ? (wordAudioPosition += 1) : null
+        }
         isSearched={isSearched}
         useTextFont={renderText}
       />
@@ -162,17 +171,22 @@ class Verse extends Component {
   }
 
   renderPlayLink() {
-    const { isSearched, verse, currentVerse, isPlaying } = this.props;
+    const { isSearched, verse, currentVerse, isPlaying, isPdf } = this.props;
     const playing = verse.verseKey === currentVerse && isPlaying;
 
+    if (isPdf) return false;
+
     if (!isSearched) {
       return (
         <a
           tabIndex="-1"
           onClick={() => this.handlePlay(verse)}
           className="text-muted"
         >
-          <i className={`ss-icon ${playing ? 'ss-pause' : 'ss-play'} vertical-align-middle`} />{' '}
+          <i
+            className={`ss-icon ${playing ? 'ss-pause' : 'ss-play'} vertical-align-middle`}
+          />
+          {' '}
           <LocaleFormattedMessage
             id={playing ? 'actions.pause' : 'actions.play'}
             defaultMessage={playing ? 'Pause' : 'Play'}
@@ -185,19 +199,25 @@ class Verse extends Component {
   }
 
   renderCopyLink() {
-    const { isSearched, verse } = this.props;
+    const { isSearched, verse, isPdf } = this.props;
+
+    if (isPdf) return false;
 
     if (!isSearched) {
-      return (
-        <Copy text={verse.textMadani} verseKey={verse.verseKey} />
-      );
+      return <Copy text={verse.textMadani} verseKey={verse.verseKey} />;
     }
 
     return false;
   }
 
   renderBookmark() {
-    const { verse, bookmarked, isAuthenticated, bookmarkActions, isSearched } = this.props;
+    const {
+      verse,
+      bookmarked,
+      isAuthenticated,
+      bookmarkActions,
+      isSearched
+    } = this.props;
 
     if (isSearched || !isAuthenticated) return false;
 
@@ -226,10 +246,7 @@ class Verse extends Component {
         className="text-muted"
       >
         <i className="ss-icon ss-bookmark vertical-align-middle" />{' '}
-        <LocaleFormattedMessage
-          id="verse.bookmark"
-          defaultMessage="Bookmark"
-        />
+        <LocaleFormattedMessage id="verse.bookmark" defaultMessage="Bookmark" />
       </a>
     );
   }
@@ -271,13 +288,15 @@ class Verse extends Component {
   }
 
   renderControls() {
+    const { isPdf } = this.props;
+
     return (
       <div className={`col-md-1 col-sm-1 ${styles.controls}`}>
         {this.renderAyahBadge()}
         {this.renderPlayLink()}
         {this.renderCopyLink()}
         {this.renderBookmark()}
-        {this.renderShare()}
+        {!isPdf && this.renderShare()}
       </div>
     );
   }
@@ -319,12 +338,14 @@ Verse.propTypes = {
   currentVerse: PropTypes.string,
   userAgent: PropTypes.object, // eslint-disable-line
   audio: PropTypes.number.isRequired,
-  loadAudio: PropTypes.func.isRequired
+  loadAudio: PropTypes.func.isRequired,
+  isPdf: PropTypes.bool
 };
 
 Verse.defaultProps = {
   currentWord: null,
-  isSearched: false
+  isSearched: false,
+  isPdf: false
 };
 
 export default connect(() => ({}), { loadAudio })(Verse);
diff --git a/src/components/Verse/style.scss b/src/components/Verse/style.scss
@@ -75,10 +75,10 @@
   float: left;
 
   b, span{
-    float: right;
     border-color: transparent;
     border-width: 0px 0px 1px 0px;
     border-style: solid;
+    float: right;
     &.active {
       color: $brand-primary-darker-5;
       border-color: $brand-primary-darker-15;
@@ -87,7 +87,7 @@
 
   .line{
     direction: rtl;
-    b{
+    b, span{
       float: none;
       display: inline-block;
     }