Added arrows to metadata at top and added pagination to shabad container

src/js/ang.js

@@ -8,8 +8,9 @@ $(function() {
     dataType: "json",
     success: function(data) {
       $shabad.innerHTML = '';
-      metaData(data);
-      renderShabad(data.page);
+      data.navigation.type = 'ang';
+      metaData(data, data.navigation);
+      renderShabad(data.page, data.navigation);
     },
     error: showError
   });

src/js/renderShabad.js

@@ -1,6 +1,20 @@
-function renderShabad(gurbani) {
+function renderShabad(gurbani, nav) {
   document.body.classList.remove("loading");
-  $shabad.appendChild(h('div', { class: 'shabad-container' }, [ baani(gurbani), ]));
+  let footnav = '';
+  if(typeof nav != "undefined") {
+    let link        = navLink(nav);
+    let pagination  = [];
+    if (typeof nav.previous != "undefined") {
+      pagination.push(h('a', { href: link + nav.previous }, '«'));
+    }
+
+    if (typeof nav.next != "undefined") {
+      pagination.push(h('a', { href: link + nav.next }, '»'));
+    }
+    footnav = h('div', { class: 'pagination'}, pagination);
+  }
+
+  $shabad.appendChild(h('div', { class: 'shabad-container' }, [ baani(gurbani), footnav, ]));
   $.each(prefs.displayOptions, function(index, option) {
     document.getElementById(option).click();
   });
@@ -10,7 +24,14 @@ function renderShabad(gurbani) {
   $controls.classList.remove('hidden');
 }
 
-function metaData(data) {
+function navLink(nav, source) {
+    switch (nav.type) {
+      case 'shabad': return 'shabad?id=';
+      case 'ang': return 'ang?source=' + source + '&ang=';
+    }
+}
+
+function metaData(data, nav) {
   let page_type_gurmukhi  = data.source.id == 'G' ? 'AMg' : 'pMnw';
   let page_type_english   = data.source.id == 'G' ? 'Ang' : 'Pannaa';
   let gurmukhi_meta       = [];
@@ -29,6 +50,18 @@ function metaData(data) {
   gurmukhi_meta.push('<a href="/ang?ang=' + data.source.pageno + '&amp;source=' + data.source.id + '">' + page_type_gurmukhi + ' ' + data.source.pageno + '</a>');
   english_meta.push('<a href="/ang?ang=' + data.source.pageno + '&amp;source=' + data.source.id + '">' + page_type_english + ' ' + data.source.pageno + '</a>');0
 
+  if(typeof nav != "undefined") {
+    let link = navLink(nav,data.source.id);
+
+    if (typeof nav.previous != "undefined") {
+      $meta.appendChild(h('div', { class: 'shabad-nav left'}, h('a', { href: link + nav.previous }, '&lt;')));
+    }
+
+    if (typeof nav.next != "undefined") {
+      $meta.appendChild(h('div', { class: 'shabad-nav right'}, h('a', { href: link + nav.next }, '&gt;'));
+    }
+  }
+
   $meta.appendChild(h('h4', { class: 'gurbani-font' }, gurmukhi_meta.join(' - ')));
   $meta.appendChild(h('h4', {}, english_meta.join(' - ')));
 

src/js/shabad.js

@@ -9,8 +9,9 @@ $(function() {
     dataType: "json",
     success: function(data) {
       $shabad.innerHTML = '';
-      metaData(data.shabadinfo);
-      renderShabad(data.gurbani);
+      data.navigation.type = 'shabad';
+      metaData(data.shabadinfo, data.navigation);
+      renderShabad(data.gurbani, data.navigation);
     },
     error: showError
   });

src/scss/_shabad-page.scss

@@ -17,6 +17,46 @@ blockquote {
   text-align: center;
 }
 
+.shabad-nav, .shabad-nav a {
+  margin: 0 0 0 0;
+  height: 100%;
+  font-size: 30px;
+  transform: scaleY(6);
+  color: #D3D3D3;
+  font-weight: 300;
+}
+
+.shabad-nav a:hover:not(.active) {
+   color: #797979;
+}
+
+.shabad-nav.right {
+  float: right;
+}
+
+.shabad-nav.left {
+  float: left;
+}
+
+.pagination {
+    display: inline-block;
+}
+
+.pagination a {
+    color: black;
+    float: left;
+    padding: 8px 16px;
+    text-decoration: none;
+    transition: background-color .3s;
+    border: 1px solid #ddd;
+}
+
+.pagination a.active {
+    background-color: #4CAF50;
+    color: white;
+    border: 1px solid #4CAF50;
+}
+
 .shabad {
   display: flex;
   justify-content: center;