Sunder gutka toolbar (#532)

* adds toolbar, overlay and sundergutka

* adds nitnem and popular banis tile

* fixes parsing of new bani object

* non presenter ui for sunder gutka toolbar

* adds sqlite support

* changes documentation comments for sqlite search

* add comments for loadBani operation

* adds some comments and cleans ui

* adds close button to overlay UI

* fixes shortcut key bug

* hides banis above id 10000

* hides bani id

* removes banis of id greater than 10000 sqlite

* adds analytics to Sunder Gutka Banis and tiles

* fixes minor bugs

* fixes notification box and adds support for translit

* removes toolbar.json

* adds sunder gutka length settings

* sunder gutka cleaned up

* Optimize spacebar

* fixes the custom lines bug for compiled banis

* fixes typo with token

* replaces sunder with sundar

* fixes bug regarding lineId

* removes bani groups.json

* removes extra line and removes .DS_Store

* adds .DS_Store to gitignore

* changes presenter view back to presenter-view

* fixes up arrow shortcut on sg banis

* changes comments for realm search

* changes comments for realm search

* fixes up arrow shortcut in anand sahib (and similar)

.gitignore

@@ -9,3 +9,5 @@ data.db
 *.provisionprofile
 npm-debug.log*
 .idea/
+.DS_Store/
+

www/index.html

@@ -53,9 +53,17 @@
     </ul>
   </div>
   <div id="app-frame">
-    <webview id="main-viewer" src="viewer.html" nodeintegration></webview>
+    <webview id="main-viewer" src="viewer.html" nodeintegration class="base-ui"></webview>
     <div id="navigator" class="noselect">
-      <div id="main-ui">
+      <div class="focus-overlay hidden overlay-ui common-overlay"> </div>
+      <div id="toolbar">
+        <div class="bani-list hidden overlay-ui sg-overlay"> 
+          <header class="navigator-header"> <span> Sundar Gutka </span> </header>
+        </div>
+        <div class="bani-extras hidden overlay-ui sg-overlay"> 
+        </div>
+      </div>
+      <div id="main-ui" class="base-ui">
         <div class="nav-page" id="search-page">
           <div class="navigator-header">
             <div class="preferences-open"> </div>
@@ -144,13 +152,13 @@
           </div>
         </div>
       </div>
-      <div id="footer">
+      <div id="footer" class="base-ui">
         <div class="menu-group">
           <div class="menu-group-left"></div>
           <div class="presenter-switch"> </div>
         </div>
       </div>
-      <section class="shortcut-tray"> </section>
+      <section class="shortcut-tray base-ui"> </section>
     </div>
   </div>
   <script src="assets/js/vendor/mousetrap.min.js"></script>

www/js/banidb/index.js

@@ -15,13 +15,25 @@ if (!search) {
   search = require('./realm-search');
 }
 
-const { query, loadShabad, loadCeremony, getAng, loadAng, getShabad, randomShabad } = search;
+const {
+  query,
+  loadShabad,
+  loadBanis,
+  loadBani,
+  loadCeremony,
+  getAng,
+  loadAng,
+  getShabad,
+  randomShabad,
+} = search;
 
 // Re-export CONSTS for use in other areas
 module.exports = {
   CONSTS,
   query,
   loadShabad,
+  loadBanis,
+  loadBani,
   loadCeremony,
   getAng,
   loadAng,

www/js/banidb/realm-search.js

@@ -161,6 +161,32 @@ const loadShabad = ShabadID => (
   })
 );
 
+/**
+ * Retrieve all lines from a Bani
+ *
+ * @param {number} BaniID The specific Bani to get
+ * @returns {object} Returns array of objects for each line
+ * @example
+ *
+ * loadBani(2);
+ * // => [{ Bani: { Gurmukhi: 'jpujI swihb', ID: 2,...},...}]
+ */
+const loadBani = BaniID => (
+  new Promise((resolve, reject) => {
+    if (!initialized) {
+      init();
+    }
+    Realm.open(realmConfig)
+      .then((realm) => {
+        const rows = realm.objects('Banis_Shabad').filtered('Bani.ID == $0', BaniID).sorted('Seq');
+        if (rows.length > 0) {
+          resolve(rows);
+        }
+      })
+      .catch(reject);
+  })
+);
+
 /**
  * Retrieve all lines from a Ceremony
  *
@@ -169,7 +195,7 @@ const loadShabad = ShabadID => (
  * @example
  *
  * loadCeremony(3);
- * // => [{ Gurmukhi: 'jo gurisK guru syvdy sy puMn prwxI ]', ID: 31057 },...]
+ * // => [{ Ceremony: { ID: 26106, Seq:2,...},...}]
  */
 
 const loadCeremony = ceremonyID => (
@@ -188,6 +214,21 @@ const loadCeremony = ceremonyID => (
   })
 );
 
+const loadBanis = () => (
+  new Promise((resolve, reject) => {
+    if (!initialized) {
+      init();
+    }
+    Realm.open(realmConfig)
+    .then((realm) => {
+      const rows = realm.objects('Banis').filtered('ID < 10000').sorted('ID');
+      if (rows.length > 0) {
+        resolve(rows);
+      }
+    })
+    .catch(reject);
+  })
+);
 /**
  * Retrieve the Ang number and source for any given ShabadID
  *
@@ -295,6 +336,8 @@ module.exports = {
   CONSTS,
   query,
   loadShabad,
+  loadBanis,
+  loadBani,
   loadCeremony,
   getAng,
   loadAng,

www/js/banidb/sqlite-search.js

@@ -199,6 +199,50 @@ const loadCeremony = CeremonyID => (
   })
 );
 
+/**
+ * Retrieve all banis from database
+ *
+ * @returns {object} Returns array of objects containing all banis
+ *
+ */
+
+const loadBanis = () => (
+  new Promise((resolve, reject) => {
+    if (!initialized) {
+      init();
+    }
+    db.all('SELECT ID, Token, Gurmukhi, GurmukhiUni, Transliteration FROM Banis WHERE ID < 10000 ORDER BY ID', (err, rows) => {
+      if (err) {
+        reject(err);
+      } else if (rows.length > 0) {
+        resolve(rows);
+      }
+    });
+  })
+);
+
+/**
+ * Retrieve all lines from a Bani
+ *
+ * @param {number} BaniID The specific Bani to get
+ * @returns {object} Returns array of objects for each line
+ *
+ */
+
+const loadBani = BaniID => (
+  new Promise((resolve, reject) => {
+    if (!initialized) {
+      init();
+    }
+    db.all(`SELECT v.ID, v.Gurmukhi, v.GurmukhiBisram, v.English, v.Transliteration, v.punjabiUni, v.SourceID, v.PageNo AS PageNo FROM Verse v LEFT JOIN Banis_Shabad b ON v.ID = b.VerseID WHERE b.Bani = ${BaniID} ORDER BY b.Seq`, (err, rows) => {
+      if (err) {
+        reject(err);
+      } else if (rows.length > 0) {
+        resolve(rows);
+      }
+    });
+  })
+);
 
 /**
  * Retrieve the Ang number and source for any given ShabadID
@@ -308,6 +352,8 @@ module.exports = {
   query,
   loadShabad,
   loadCeremony,
+  loadBanis,
+  loadBani,
   getAng,
   loadAng,
   getShabad,

www/js/defaults.json

@@ -35,6 +35,9 @@
       "autoplay-options": {
         "autoplayTimer": 10
       },
+      "sunder-gutka": {
+        "bani-length": 4
+      },
       "display-options": {
         "disable-akhandpaatt": false,
         "akhandpaatt": false,

www/js/desktop_index.js

@@ -7,6 +7,7 @@ global.core = require('./js/index');
 global.core.search.init();
 global.core.menu.init();
 global.core.shortcutTray.init();
+global.core.toolbar.init();
 global.core.themeEditor.init();
 // global.core.shareSync.init();
 global.platform.init();

www/js/index.js

@@ -5,6 +5,7 @@ const themeEditor = require('./theme_editor');
 const shareSync = require('./share-sync');
 const settings = require('../js/settings');
 const shortcutTray = require('./shortcut_tray');
+const toolbar = require('./toolbar');
 
 /* const Settings = require('../../js/settings');
 const settings = new Settings(platform.store); */
@@ -20,8 +21,9 @@ function hideSlide() {
   global.controller.sendText('');
 }
 
-function highlightLine(newLine) {
-  const $line = search.$shabad.querySelector(`#line${newLine}`);
+function highlightLine(newLine, nextLineCount = null) {
+  const nextLineSelector = nextLineCount ? `#li_${nextLineCount} a.panktee` : `#line${newLine}`;
+  const $line = search.$shabad.querySelector(nextLineSelector);
   $line.click();
   const curPankteeTop = $line.parentNode.offsetTop;
   const curPankteeHeight = $line.parentNode.offsetHeight;
@@ -46,13 +48,7 @@ function spaceBar(e) {
   let newLineId = mainLineID;
 
   if (mainLineID === currentLineId) {
-    let done = false;
-    search.$shabad.querySelectorAll('a.panktee').forEach((item) => {
-      if (!item.classList.contains(['seen_check']) && !done) {
-        newLineId = item.dataset.lineId;
-        done = true;
-      }
-    });
+    newLineId = search.$shabad.querySelector('a.panktee:not(.seen_check)').dataset.lineId;
   }
 
   highlightLine(newLineId);
@@ -61,18 +57,21 @@ function spaceBar(e) {
 
 function prevLine(e) {
   // Find position of current line in Shabad
-  const pos = search.currentShabad.indexOf(search.currentLine);
-  if (pos > 0) {
-    highlightLine(search.currentShabad[pos - 1]);
+  const $currentLine = search.$shabad.querySelector('a.panktee.current').parentNode;
+  const prevLineCount = parseInt($currentLine.dataset.lineCount, 10) - 1;
+  if (prevLineCount > 0) {
+    highlightLine(null, prevLineCount);
   }
   e.preventDefault();
 }
 
 function nextLine(e) {
   // Find position of current line in Shabad
   const pos = search.currentShabad.indexOf(search.currentLine);
+  const $currentLine = search.$shabad.querySelector('a.panktee.current').parentNode;
+  const nextLineCount = (parseInt($currentLine.dataset.lineCount, 10)) + 1;
   if (pos < search.currentShabad.length - 1) {
-    highlightLine(search.currentShabad[pos + 1]);
+    highlightLine(search.currentShabad[pos + 1], nextLineCount);
   }
   e.preventDefault();
 }
@@ -141,6 +140,7 @@ module.exports = {
   platformMethod,
   themeEditor,
   shortcutTray,
+  toolbar,
   'custom-theme': () => {
     themeEditor.init();
   },

www/js/search.js

@@ -663,6 +663,44 @@ module.exports = {
       });
   },
 
+  getLineId(rows) {
+    const baniLengthList = ['small', 'medium', 'large', 'extraLarge'];
+    const baniLength = store.getUserPref('slide-layout.sunder-gutka.bani-length');
+    const line = rows.find((row) => row.baniLength[baniLengthList[baniLength]]);
+    return line ? line.ID : null;
+  },
+
+  loadBani(BaniID) {
+    const $shabadList = this.$shabad || document.getElementById('shabad');
+    $shabadList.innerHTML = '';
+    currentShabad.splice(0, currentShabad.length);
+    banidb.loadBani(BaniID)
+      .then(rowsDb => {
+        const shabadID = rowsDb[0].Bani.Token;
+        const rows = rowsDb.map((rowDb) => {
+          let row = rowDb;
+          // when object from db is not a verse itself
+          if (rowDb.Verse) { row = rowDb.Verse; }
+          // when its a custom panktee (decorator, bani heading, etc)
+          if (rowDb.Custom) {
+            row = rowDb.Custom;
+            row.shabadID = rowDb.Bani.Token;
+          }
+
+          row.baniLength = {
+            small: rowDb.existsSGPC,
+            medium: rowDb.existsMedium,
+            large: rowDb.existsTaksal,
+            extraLarge: rowDb.existsBuddhaDal,
+          };
+
+          return row;
+        });
+        const lineID = this.getLineId(rows);
+        return this.printShabad(rows, shabadID, lineID);
+      });
+  },
+
   loadAng(PageNo, SourceID) {
     banidb.loadAng(PageNo, SourceID)
       .then(rows => this.printShabad(rows));
@@ -688,6 +726,7 @@ module.exports = {
       });
   },
 
+
   printShabad(rows, ShabadID, LineID) {
     const lineID = LineID || rows[0].ID;
     const shabadID = ShabadID || (rows[0].Shabads ? rows[0].Shabads[0].ShabadID : '');
@@ -702,22 +741,35 @@ module.exports = {
       }
     }
 
+    let lineCount = 0;
     rows.forEach((item) => {
+      lineCount += 1;
+
       if (parseInt(lineID, 10) === item.ID) {
         mainLine = item;
       }
+
+      const mainLineExists = !!document.querySelector('.main.seen_check');
+
+      let baniLengthClasses = 'noLength';
+      if (item.baniLength) {
+        baniLengthClasses = Object.keys(item.baniLength).filter((key) => item.baniLength[key]).join('.');
+      }
+
       const shabadLine = h(
-        'li',
-        {},
+        `li#li_${lineCount}.${baniLengthClasses}`,
+        {
+          'data-line-count': lineCount,
+        },
         h(
           `a#line${item.ID}.panktee${
-            parseInt(lineID, 10) === item.ID ? '.current.main.seen_check' : ''
+            (parseInt(lineID, 10) === item.ID) && !mainLineExists ? '.current.main.seen_check' : ''
           }`,
           {
             'data-line-id': item.ID,
             'data-main-letters': item.MainLetters,
             onclick: e => this.clickShabad(e, item.ShabadID || shabadID,
-                           item.ID, item, rows),
+                          item.ID, item, rows),
           },
           [
             h('i.fa.fa-fw.fa-check'),