GroupDocsGists
10/24/2017 - 8:21 AM
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>GroupDocs.Viewer for Java</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons|Roboto+Condensed:400,700">
<link rel='stylesheet' href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-app="GroupDocsViewer" ng-cloak flex layout="column" style="height: 100%;">
<md-toolbar ng-controller="ToolbarController" layout="row" hide-print md-whiteframe="4"
class="md-toolbar-tools md-scroll-shrink">
<md-button class="md-icon-button" ng-click="toggleLeft()">
<md-icon>menu</md-icon>
</md-button>
<h1 hide-xs>GroupDocs.Viewer for Java</h1>
<span flex></span>
<md-button ng-href="/download/original?file={{ selectedFile }}&watermarkText={{watermark.Text}}&watermarkColor={{watermark.Color}}&watermarkPosition={{watermark.Position}}&watermarkWidth={{watermark.Width}}&watermarkOpacity={{watermark.Opacity}}"
class="md-icon-button"
ng-disabled="!selectedFile">
<md-icon>file_download</md-icon>
<md-tooltip>Download</md-tooltip>
</md-button>
<md-button ng-href="/download/pdf?file={{ selectedFile }}&watermarkText={{watermark.Text}}&watermarkColor={{watermark.Color}}&watermarkPosition={{watermark.Position}}&watermarkWidth={{watermark.Width}}&watermarkOpacity={{watermark.Opacity}}"
target="_blank"
class="md-icon-button"
ng-disabled="!selectedFile">
<md-icon>picture_as_pdf</md-icon>
<md-tooltip>Download as pdf</md-tooltip>
</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-optgroup label="Available files">
<md-option ng-value="item" ng-repeat="item in list">{{ item }}</md-option>
</md-optgroup>
</md-select>
</div>
<md-button class="md-icon-button">
<md-icon>more_vert</md-icon>
</md-button>
</md-toolbar>
<md-content flex layout="row" md-scroll-y>
<md-content flex id="content" class="md-padding" role="main">
<div ng-controller="PagesController">
<md-card ng-repeat="item in docInfo.pages">
<a name="page-view-{{ item.number }}"></a>
<iframe ng-src="{{ createPageUrl(item.number) }}"
onload="iframe_auto_height(this)"
></iframe>
</md-card>
<div ng-repeat="attachment in docInfo.attachments">
<md-card ng-repeat="number in attachment.count">
<a name="page-view-{{attachment.name}}-{{number}}"></a>
<iframe ng-src="{{ createAttachmentPageUrl(selectedFile,attachment.name,number) }}"
onload="iframe_auto_height(this)"></iframe>
</md-card>
</div>
</div>
</md-content>
<md-sidenav md-component-id="left" hide-print md-whiteframe="4" class="md-sidenav-left">
<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="Thumbnails">
<md-content role="navigation">
<div ng-controller="ThumbnailsController">
<md-card ng-repeat="item in docInfo.pages">
<img ng-src="{{createThumbnailUrl(item.number)}}"
ng-click="onThumbnailClick($event, item)"
class="md-card-image page-thumbnail"/>
</md-card>
<div ng-repeat="attachment in docInfo.attachments">
<md-card ng-repeat="number in attachment.count">
<img ng-src="{{ createAttachmentThumbnailPageUrl(selectedFile,attachment.name,number) }}"
ng-click="onAttachmentThumbnailClick($event,attachment.name,number)"
class="md-card-image page-thumbnail" />
</md-card>
</div>
</div>
</md-content>
</md-tab>
</md-tabs>
</md-sidenav>
</md-content>
</div>
</body>
</html>