Document Navigation

groupdocs-viewer · Jul 24, 2017 · b7bdfd7 · b7bdfd7
1 parent 5a725ae
commit b7bdfd7
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 20 deletions.
diff --git a/Showcases/GroupDocs.Viewer-for-.NET-Modern-UI/Viewer-Modren-UI/Content/app.js b/Showcases/GroupDocs.Viewer-for-.NET-Modern-UI/Viewer-Modren-UI/Content/app.js
@@ -2,7 +2,7 @@
 
 var ngApp = angular.module('GroupDocsViewer', ['ngMaterial', 'ngResource']);
 
-ngApp.constant('FilePath', 'http://groupdocs.com/images/banner/carousel2/signature.png');
+ngApp.constant('FilePath', '');
 
 ngApp.constant('Watermark', {
         Text: "Watermark Text",
@@ -30,7 +30,7 @@ ngApp.factory('DocumentPagesFactory', function ($resource) {
     });
 });
 
-ngApp.controller('ToolbarController', function ToolbarController($rootScope, $scope, $mdSidenav, Watermark) {
+ngApp.controller('ToolbarController', function ToolbarController($rootScope, $scope, $mdSidenav, Watermark, FilePath) {
     $scope.toggleLeft = function () {
         $mdSidenav('left').toggle().then(function () {
             $rootScope.$broadcast('md-sidenav-toggle-complete', $mdSidenav('left'));
@@ -44,24 +44,39 @@ ngApp.controller('ToolbarController', function ToolbarController($rootScope, $sc
         Opacity: Watermark.Opacity
     };
     $scope.$on('selected-file-changed', function ($event, selectedFile) {
-        $scope.selectedFile = selectedFile;
+        $rootScope.selectedFile = selectedFile;
     });
 
-
+    $scope.nextDocument = function () {
+        if ($rootScope.list.indexOf($rootScope.selectedFile) + 1 == $rootScope.list.length) {
+            $rootScope.$broadcast('selected-file-changed', $rootScope.list[0]);
+        }
+        else {
+            $rootScope.$broadcast('selected-file-changed', $rootScope.list[$rootScope.list.indexOf($rootScope.selectedFile) + 1]);
+        }      
+    };
+    $scope.previousDocument = function () {
+        if ($rootScope.list.indexOf($rootScope.selectedFile) - 1 == -1) {
+            $rootScope.$broadcast('selected-file-changed', $rootScope.list[$rootScope.list.length-1]);
+        }
+        else {
+            $rootScope.$broadcast('selected-file-changed', $rootScope.list[$rootScope.list.indexOf($rootScope.selectedFile) - 1]);
+        }
+    };
 });
 
 ngApp.controller('ThumbnailsController',
     function ThumbnailsController($rootScope, $scope, $sce, $mdSidenav, DocumentPagesFactory, FilePath, Watermark) {
         $scope.isLeftSidenavVislble = false;
         if (FilePath) {
-            $scope.selectedFile = FilePath;
+            $rootScope.selectedFile = FilePath;
             $scope.docInfo = DocumentPagesFactory.query({
                 filename: FilePath
             });
 
         }
         $scope.$on('selected-file-changed', function (event, selectedFile) {
-            $scope.selectedFile = selectedFile;
+            $rootScope.selectedFile = selectedFile;
             $scope.docInfo = DocumentPagesFactory.query({
                 filename: selectedFile
             });
@@ -111,16 +126,16 @@ ngApp.controller('ThumbnailsController',
 );
 
 ngApp.controller('PagesController',
-    function ThumbnailsController($scope, $sce, $document, DocumentPagesFactory, FilePath, Watermark) {
+    function ThumbnailsController($rootScope, $scope, $sce, $document, DocumentPagesFactory, FilePath, Watermark) {
         if (FilePath) {
-            $scope.selectedFile = FilePath;
+            $rootScope.selectedFile = FilePath;
             $scope.docInfo = DocumentPagesFactory.query({
                 filename: FilePath
             });
 
         }
         $scope.$on('selected-file-changed', function (event, selectedFile) {
-            $scope.selectedFile = selectedFile;
+            $rootScope.selectedFile = selectedFile;
             $scope.docInfo = DocumentPagesFactory.query({
                 filename: selectedFile
             });
@@ -151,21 +166,25 @@ ngApp.controller('PagesController',
     }
 );
 
-ngApp.controller('AvailableFilesController', function AvailableFilesController($rootScope, $scope, FilesFactory,DocumentPagesFactory, FilePath) {
+ngApp.controller('AvailableFilesController', function AvailableFilesController($rootScope, $scope, FilesFactory, DocumentPagesFactory, FilePath) {
+    $rootScope.list = FilesFactory.query();
     if (FilePath) {
-        $scope.selectedFile = FilePath;
+        $rootScope.list = [FilePath];
+        $rootScope.selectedFile =  $rootScope.list[0];
+        $rootScope.$broadcast('selected-file-changed', $rootScope.selectedFile);
         $scope.docInfo = DocumentPagesFactory.query({
             filename: FilePath
         });
-    }
+    } 
+
     $scope.onOpen = function () {
-        $scope.list = FilesFactory.query();
+        $rootScope.list = FilesFactory.query();
+
     };
-
-    $scope.onChange = function ($event) {
-        $rootScope.$broadcast('selected-file-changed', $scope.selectedFile);
+    $scope.onChange = function (item) {
+        $rootScope.$broadcast('selected-file-changed', item);
     };
-
+    
 });
 
 

diff --git a/Showcases/GroupDocs.Viewer-for-.NET-Modern-UI/Viewer-Modren-UI/Views/Home/Index.cshtml b/Showcases/GroupDocs.Viewer-for-.NET-Modern-UI/Viewer-Modren-UI/Views/Home/Index.cshtml
@@ -29,6 +29,18 @@
             </md-button>
             <h1 hide-xs>GroupDocs.Viewer for .NET</h1>
             <span flex></span>
+            <md-button ng-click="previousDocument()"
+                        class="md-icon-button"
+                        ng-disabled="!selectedFile">
+                <md-icon>navigate_before</md-icon>
+                <md-tooltip>Previous Document</md-tooltip>
+            </md-button>
+            <md-button ng-click="nextDocument()"
+                        class="md-icon-button"
+                        ng-disabled="!selectedFile">
+                <md-icon>navigate_next</md-icon>
+                <md-tooltip>Next Document</md-tooltip>
+            </md-button>
             <md-button ng-href="/download/original?file={{ selectedFile }}"
                        class="md-icon-button"
                        ng-disabled="!selectedFile">
@@ -44,10 +56,9 @@
             </md-button>
             <div ng-controller="AvailableFilesController">
                 <md-select ng-model="selectedFile" placeholder="Please select a file"
-                           md-on-open="onOpen()"
-                           ng-change="onChange($event)">
+                           md-on-open="onOpen()">
                     <md-optgroup label="Available files">
-                        <md-option ng-value="item" ng-repeat="item in list">{{ item }}</md-option>
+                        <md-option ng-value="item" ng-click="onChange(item)" ng-repeat="item in list">{{ item }}</md-option>
                     </md-optgroup>
                 </md-select>
             </div>