v5: PhotoBrowser: new navbarShowCount param

framework7io · Aug 18, 2019 · 32b32df · 32b32df
1 parent 758af18
commit 32b32df
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/core/components/photo-browser/photo-browser-class.js b/src/core/components/photo-browser/photo-browser-class.js
@@ -73,8 +73,10 @@ class PhotoBrowser extends Framework7Class {
         $totalEl = $(navbarEl).find('.photo-browser-total');
       }
     }
-    $currentEl.text(current);
-    $totalEl.text(total);
+    if ($currentEl.length && $totalEl.length) {
+      $currentEl.text(current);
+      $totalEl.text(total);
+    }
 
     // Update captions
     if (pb.captions.length > 0) {
@@ -167,6 +169,8 @@ class PhotoBrowser extends Framework7Class {
 
     const backLinkText = (pb.app.theme === 'ios' || pb.app.theme === 'aurora') && pb.params.backLinkText ? pb.params.backLinkText : '';
 
+    const renderNavbarCount = typeof pb.params.navbarShowCount === 'undefined' ? pb.params.photos.length > 0 : pb.params.navbarShowCount;
+
     const isPopup = pb.params.type !== 'page';
     const navbarHtml = `
       <div class="navbar navbar-photo-browser ${pb.params.theme === 'dark' ? 'navbar-photo-browser-dark' : ''}">
@@ -178,11 +182,13 @@ class PhotoBrowser extends Framework7Class {
               ${backLinkText ? `<span>${backLinkText}</span>` : ''}
             </a>
           </div>
+          ${renderNavbarCount ? `
           <div class="title">
             <span class="photo-browser-current"></span>
             <span class="photo-browser-of">${pb.params.navbarOfText}</span>
             <span class="photo-browser-total"></span>
           </div>
+          ` : ''}
           <div class="right"></div>
         </div>
       </div>

diff --git a/src/core/components/photo-browser/photo-browser.d.ts b/src/core/components/photo-browser/photo-browser.d.ts
@@ -40,6 +40,8 @@ export namespace PhotoBrowser {
     backLinkText?: string
     /** Text of "of" in photos counter: "3 of 5" (default "of") */
     navbarOfText?: string
+    /** Defines should it display "3 of 5" text in navbar title or not. If not specified (undefined) then it will show this text if there is more than 1 item  */
+    navbarShowCount?: boolean | undefined
     /** One of the default colors */
     iconsColor?: string
     /** Swiper parameters */

diff --git a/src/core/components/photo-browser/photo-browser.js b/src/core/components/photo-browser/photo-browser.js
@@ -17,6 +17,7 @@ export default {
       swipeToClose: true,
       backLinkText: 'Close',
       navbarOfText: 'of',
+      navbarShowCount: undefined,
       view: undefined,
       url: 'photos/',
       routableModals: true,