Release 1.1.14 (#718)

* Shows sharing links on text select * fixes 404 page in embed view * Changes background color to lightgrey * adds event listeners on react component instead of a loop * Fixes scroll position in sundar gutka * Fixes object object error (#704) * Adds the scroll to top inside condition * renames the previous location * Separates selection logic from share div logic * Reset Center Align & Reposition option (#698) * Adds makeSelection function to util file * Adds a self destroying service worker * Enables service worker * Renames file name to sw-self-destroy.js * uses a source variable for generating service worker
KhalisFoundation · Jun 21, 2019 · 626ad0e · 626ad0e
1 parent 3c20334
commit 626ad0e
Show file tree

Hide file tree

Showing 15 changed files with 144 additions and 48 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sttm/web",
-  "version": "1.1.13",
+  "version": "1.1.14",
   "description": "Sevadaars are currently working hard to build a newer version of SikhiToTheMax website using modern web technologies.",
   "main": "index.js",
   "scripts": {
@@ -28,11 +28,11 @@
     "deploy:prod": "npm-run-all deploy:prod:*",
     "deploy:prod:build": "NODE_ENV=production npm run build",
     "deploy:prod:clean": "rm -rf .editorconfig .gitignore .github .stylelintrc .vscode stats.json webpack.config.js src LICENSE CONTRIBUTING.md README.md jest",
-    "deploy:prod:pm2": "kill_service_worker=1 pm2 start server --update-env --name=\"sttm-prod\" --node-args=\"-r esm\"",
+    "deploy:prod:pm2": "kill_service_worker=0 pm2 start server --update-env --name=\"sttm-prod\" --node-args=\"-r esm\"",
     "deploy:dev": "npm-run-all deploy:dev:*",
     "deploy:dev:build": "npm run deploy:prod:build",
     "deploy:dev:clean": "npm run deploy:prod:clean",
-    "deploy:dev:pm2": "kill_service_worker=1 pm2 start server --update-env --name=\"sttm-dev\" --node-args=\"-r esm\""
+    "deploy:dev:pm2": "kill_service_worker=0 pm2 start server --update-env --name=\"sttm-dev\" --node-args=\"-r esm\""
   },
   "repository": {
     "type": "git",

diff --git a/public/embed.js b/public/embed.js
@@ -3,14 +3,14 @@ Array.prototype.forEach.call(
   document.querySelectorAll('[data-sttm-id],[data-sttm-ang]'),
   function(node) {
     var attributes = node.dataset.sttmId
-      ? 'id=' + node.dataset.sttmId
-      : 'ang=' +
+      ? 'shabad?id=' + node.dataset.sttmId
+      : 'ang?ang=' +
         node.dataset.sttmAng +
         '&source=' +
         (node.dataset.sttmSource || 'G');
 
     node.innerHTML =
-      '<iframe src="https://sttm.co/embed?id=' +
+      '<iframe src="https://sttm.co/' +
       attributes +
       '"frameBorder="0" height="' +
       (node.dataset.sttmHeight || 500) +

diff --git a/public/sw-self-destroy.js b/public/sw-self-destroy.js
@@ -0,0 +1,14 @@
+self.addEventListener('install', e => {
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', e => {
+  self.registration
+    .unregister()
+    .then(function() {
+      return self.clients.matchAll();
+    })
+    .then(function(clients) {
+      clients.forEach(client => client.navigate(client.url));
+    });
+});
diff --git a/scripts/generate-sw.js b/scripts/generate-sw.js
@@ -3,8 +3,11 @@ const fs = require('fs');
 const package = require('../package.json');
 const manifest = require('../public/assets/js/manifest.json');
 
+// Change source to service-worker-template.js for activating the original service worker
+const source = 'sw-self-destroy.js';
+
 const template = fs.readFileSync(
-  resolve(__dirname, '..', 'public', 'service-worker-template.js'),
+  resolve(__dirname, '..', 'public', source),
   'utf-8'
 );
 

diff --git a/src/js/components/Baani.js b/src/js/components/Baani.js
@@ -6,7 +6,7 @@ import Transliteration from './Transliteration';
 import BaaniLine from './BaaniLine';
 import { clickEvent, ACTIONS } from '../util/analytics';
 import { TEXTS, SHABAD_CONTENT_CLASSNAME } from '.././constants';
-import { copyToClipboard, showToast, shortenURL } from '../util';
+import { copyToClipboard, showToast, shortenURL, makeSelection } from '../util';
 
 const transliterationMap = {
   english: shabad => shabad.transliteration,
@@ -116,6 +116,23 @@ export default class Baani extends React.PureComponent {
     }
   };
 
+  showShare = e => {
+    const currentShare = document.querySelector('.showShare');
+    if (currentShare) {
+      currentShare.classList.remove('showShare');
+    }
+    const selectedDiv = e.currentTarget;
+    if (window.getSelection().toString()) {
+      makeSelection(selectedDiv);
+      const shareDiv = selectedDiv.querySelector('.share');
+      shareDiv.classList.add('showShare');
+    }
+  };
+
+  removeSelection = () => {
+    window.getSelection().removeAllRanges();
+  };
+
   componentDidMount() {
     this._scrollToHiglight();
   }
@@ -153,6 +170,8 @@ export default class Baani extends React.PureComponent {
             key={shabad.id}
             id={`line-${shabad.id}`}
             className="line"
+            onMouseUp={this.showShare}
+            onMouseDown={this.removeSelection}
             ref={node =>
               highlight === parseInt(shabad.id, 10)
                 ? (this.$highlightedBaaniLine = node)
@@ -193,8 +212,6 @@ export default class Baani extends React.PureComponent {
               onFacebookClick={this.onFacebookClick(shabad)}
               onCopyClick={this.onCopyClick(shabad)}
             />
-
-            <br />
           </div>
         ))}
       </div>

diff --git a/src/js/components/GenericError.js b/src/js/components/GenericError.js
@@ -29,7 +29,11 @@ export default class GenericError extends React.PureComponent {
       <div className="error-message">
         <div>
           <h3>{title}</h3>
-          <section dangerouslySetInnerHTML={{ __html: description }} />
+          {typeof description === 'string' ? (
+            <section dangerouslySetInnerHTML={{ __html: description }} />
+          ) : (
+            <section>{description}</section>
+          )}
         </div>
         <div>
           <img src={url} alt={alt} />

diff --git a/src/js/components/ShabadContent/ShabadContent.js b/src/js/components/ShabadContent/ShabadContent.js
@@ -206,9 +206,13 @@ class Shabad extends React.PureComponent {
     ].join(' ');
 
     Promise.resolve(
-      `<div ${attrs}><a href="https://sttm.co/embed?id=${
-        info.id
-      }">SikhiToTheMax</a></div><script async src="https://sttm.co/embed.js"></script>`
+      `<div ${attrs}><a href="https://sttm.co/${
+        type === 'ang'
+          ? 'ang?ang=' + info.source.pageno + '&source=' + info.source.id
+          : 'shabad?id=' + info.id
+      }">SikhiToTheMax</a></div><script async src="${
+        window.location.origin
+      }/embed.js"></script>`
     )
       .then(copyToClipboard)
       .then(() => showToast(TEXTS.EMBED_COPIED))

diff --git a/src/js/components/ShabadControls.js b/src/js/components/ShabadControls.js
@@ -23,6 +23,7 @@ export default class ShabadControls extends React.PureComponent {
     larivaar: PropTypes.bool.isRequired,
     unicode: PropTypes.bool.isRequired,
     darkMode: PropTypes.bool.isRequired,
+    hideAlignOption: PropTypes.bool,
     fontSize: PropTypes.number.isRequired,
     fontFamily: PropTypes.string.isRequired,
     disableSplitView: PropTypes.bool.isRequired,
@@ -71,6 +72,7 @@ export default class ShabadControls extends React.PureComponent {
       toggleLarivaarOption,
       toggleSplitViewOption,
       changeFont,
+      hideAlignOption,
     } = this.props;
     return (
       <React.Fragment>
@@ -184,6 +186,22 @@ export default class ShabadControls extends React.PureComponent {
                 </a>
               </div>
             </div>
+
+            {!hideAlignOption && (
+              <div className="display-option-type">
+                <div className="display-option-header">{TEXTS.CENTERALIGN}</div>
+                <div className="display-option-content">
+                  <a
+                    className={`display-option-toggle
+                          ${centerAlignGurbani ? ' active' : ''}`}
+                    onClick={toggleCenterAlignOption}
+                  >
+                    {centerAlignGurbani ? 'Disable' : 'Enable'}
+                  </a>
+                </div>
+              </div>
+            )}
+
             <div className="display-option-type">
               <div className="display-option-header">
                 {TEXTS.RESET} {TEXTS.DISPLAY}
@@ -197,18 +215,6 @@ export default class ShabadControls extends React.PureComponent {
                 </a>
               </div>
             </div>
-            <div className="display-option-type">
-              <div className="display-option-header">{TEXTS.CENTERALIGN}</div>
-              <div className="display-option-content">
-                <a
-                  className={`display-option-toggle
-                      ${centerAlignGurbani ? ' active' : ''}`}
-                  onClick={toggleCenterAlignOption}
-                >
-                  {centerAlignGurbani ? 'Disable' : 'Enable'}
-                </a>
-              </div>
-            </div>
           </div>
         )}
         {showFontOptions && (

diff --git a/src/js/features/actions/index.js b/src/js/features/actions/index.js
@@ -5,6 +5,7 @@ import {
   DEFAULT_UNICODE,
   DEFAULT_FONT_SIZE,
   DEFAULT_FONT_FAMILY,
+  DEFAULT_CENTER_ALIGN_GURBANI,
 } from '../../constants';
 
 export const createAction = (type, meta) => payload => ({
@@ -71,6 +72,7 @@ export const resetDisplayOptions = () => dispatch => {
   dispatch(setTransliterationLanguages(DEFAULT_TRANSLITERATION_LANGUAGES));
   dispatch(setTranslationLanguages(DEFAULT_TRANSLATION_LANGUAGES));
   dispatch(setDarkMode(DEFAULT_DARK_MODE));
+  dispatch(setCenterAlignOption(DEFAULT_CENTER_ALIGN_GURBANI));
 };
 
 export const CHANGE_FONT = 'CHANGE_FONT';
@@ -82,5 +84,10 @@ export const resetFontOptions = () => dispatch => {
   dispatch(changeFont(DEFAULT_FONT_FAMILY));
 };
 
-export const TOGGLE_CENTER_ALIGN_OPTION = 'TOGGLE_CENTER_ALIGN_OPTION';
-export const toggleCenterAlignOption = createAction(TOGGLE_CENTER_ALIGN_OPTION);
+export const SET_CENTER_ALIGN_OPTION = 'SET_CENTER_ALIGN_OPTION';
+export const setCenterAlignOption = createAction(SET_CENTER_ALIGN_OPTION);
+
+export const toggleCenterAlignOption = () => (dispatch, getState) => {
+  const state = getState();
+  dispatch(setCenterAlignOption(!state.centerAlignGurbani));
+};
diff --git a/src/js/features/reducers/index.js b/src/js/features/reducers/index.js
@@ -8,7 +8,7 @@ import {
   TOGGLE_UNICODE_OPTION,
   TOGGLE_DARK_MODE,
   TOGGLE_SPLIT_VIEW_OPTION,
-  TOGGLE_CENTER_ALIGN_OPTION,
+  SET_CENTER_ALIGN_OPTION,
   SET_UNICODE,
   SET_FONT_SIZE,
   SET_TRANSLATION_LANGUAGES,
@@ -27,6 +27,7 @@ import {
   LOCAL_STORAGE_KEY_FOR_FONT_FAMILY,
   LOCAL_STORAGE_KEY_FOR_TRANSLATION_LANGUAGES,
   LOCAL_STORAGE_KEY_FOR_TRANSLITERATION_LANGUAGES,
+  LOCAL_STORAGE_KEY_FOR_CENTER_ALIGN_VIEW,
 } from '../../constants';
 import { saveToLocalStorage } from '../../util';
 import { clickEvent } from '../../util/analytics';
@@ -223,14 +224,13 @@ export default function reducer(state, action) {
         darkMode,
       };
     }
-    case TOGGLE_CENTER_ALIGN_OPTION: {
-      const centerAlignGurbani = !state.centerAlignGurbani;
-      clickEvent({
-        action: TOGGLE_CENTER_ALIGN_OPTION,
-        label: centerAlignGurbani ? 1 : 0,
-      });
+    case SET_CENTER_ALIGN_OPTION: {
+      const centerAlignGurbani = action.payload;
 
-      saveToLocalStorage(LOCAL_STORAGE_KEY_FOR_SPLIT_VIEW, centerAlignGurbani);
+      saveToLocalStorage(
+        LOCAL_STORAGE_KEY_FOR_CENTER_ALIGN_VIEW,
+        centerAlignGurbani
+      );
       return {
         ...state,
         centerAlignGurbani,

diff --git a/src/js/pages/Search/Layout.js b/src/js/pages/Search/Layout.js
@@ -83,7 +83,7 @@ class Layout extends React.PureComponent {
 
     return (
       <div className="row" id="content-root">
-        <Controls media={[]} disableSplitView />
+        <Controls media={[]} disableSplitView hideAlignOption />
         <SearchResults
           q={q}
           type={type}

diff --git a/src/js/pages/SundarGutka/index.js b/src/js/pages/SundarGutka/index.js
@@ -13,7 +13,10 @@ import AppleiOS from '../../components/Icons/AppleiOS';
 class SundarGutka extends React.PureComponent {
   static propTypes = {
     transliterationLanguages: PropTypes.array.isRequired,
-    location: PropTypes.shape({ hash: PropTypes.string }),
+    location: PropTypes.shape({
+      hash: PropTypes.string,
+      pathname: PropTypes.string,
+    }),
     match: PropTypes.object.isRequired,
   };
 
@@ -127,10 +130,16 @@ class SundarGutka extends React.PureComponent {
 
   handleSearch = e => this.setState({ q: e.currentTarget.value });
 
-  componentDidUpdate({ match: { isExact: wasExact } }) {
+  componentDidUpdate({
+    match: { isExact: wasExact },
+    location: { pathname: prevLocation },
+  }) {
     if (wasExact === false && this.props.match.isExact) {
       pageView('/sundar-gutka');
     }
+    if (prevLocation !== this.props.location.pathname) {
+      window.scrollTo(0, 0);
+    }
   }
 
   componentDidMount() {

diff --git a/src/js/util/index.js b/src/js/util/index.js
@@ -365,3 +365,15 @@ export function toNavURL({ type, info }) {
       return `ang?source=${info.source.id}&ang=`;
   }
 }
+
+/**
+ * Removes any previous text selection &
+ * Selects the contents of given div
+ * @param {object} selectedDiv
+ */
+export const makeSelection = selectedDiv => {
+  window.getSelection().removeAllRanges();
+  var range = document.createRange();
+  range.selectNode(selectedDiv);
+  window.getSelection().addRange(range);
+};
diff --git a/src/scss/_display-controls.scss b/src/scss/_display-controls.scss
@@ -50,12 +50,26 @@
 .font-options {
   align-content: flex-start;
   animation: flip-open 0.25s;
-  background-color: $sttm-white;
+  background-color: $sttm-lighter-grey;
   display: flex;
   flex-wrap: wrap;
   margin: 0 auto;
   width: calc(100% - 2rem);
 
+  input[type='range'] {
+    --webkit-appearance: none;
+  }
+
+  input[type='range']::-webkit-slider-runnable-track {
+    background: $sttm-white;
+    border-radius: 4px;
+    height: 4px;
+  }
+
+  input[type='range']::-webkit-slider-thumb {
+    margin-top: -8px;
+  }
+
   .dark-mode & {
     background-color: $sttm-lighter-black;
   }
@@ -94,6 +108,7 @@
 .display-option-toggle,
 .font-option-toggle {
   align-items: center;
+  background-color: $sttm-white;
   border: 1px solid $sttm-light-grey;
   border-radius: 2px;
   color: $sttm-lighter-black;