diff --git a/README.md b/README.md index 11222f5..c4d7271 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ that images, translations and such are being loaded from the `web` folder.
@@ -56,9 +56,29 @@ that images, translations and such are being loaded from the `web` folder. The `scale` attribute can be used to obtain the current scale (zoom level) of the PDF. This is read only. -The directive takes the following optional attributes to modify the toolbar +The directive takes the `buttons` optional attribute to allow show and hide toolbar buttons. - download="false" print="false" open="false" +The following lists available buttons do show/hide +``` +buttons: { + sidebarToggle : true, + viewFind : true, + previous : true, + next : true, + pageNumberLabel : true, + pageNumber : true, + numPages : true, + zoomOut : true, + zoomIn : true, + scaleSelectContainer : true, + presentationMode : true, + openFile : true, + print : true, + download : true, + viewBookmark : true, + secondaryToolbarToggle : true +} +``` Omitting these attributes will by default show the options in the toolbar. @@ -74,6 +94,12 @@ angular.module('app').controller('AppCtrl', function($scope) { $scope.pdf = { src: 'example.pdf', }; + + $scope.buttons = { + previous : false, + next : false, + print : true + }; $scope.$watch('scale', function() { ... @@ -123,6 +149,13 @@ negative effect on the runtime performance. pdfjsViewerConfigProvider.disableWorker(); pdfjsViewerConfigProvider.setVerbosity("infos"); // "errors", "warnings" or "infos" + + pdfjsViewerConfigProvider.setButtonsVisibility({ + openFile : true, + print : false, + download : false, + viewBookmark : true, + }); }); Note that a number of images used in the PDF.js viewer are loaded by the `viewer.css`. You can't configure these @@ -130,3 +163,18 @@ through JavaScript. Instead you need to compile the `viewer.less` file as lessc --global-var='pdfjsImagePath=/assets/pdf.js-viewer/images' viewer.less viewer.css +If you use *Grunt* you can compile `viewer.less` with `modifyVar` attribute: + + less: { + options: { + modifyVars: { + pdfjsImagePath: '"../pdfviewer/images"' + }, + files: { + "css/app.css": [ + "pdf.js-viewer/viewer.less" + ] + } + } + } + diff --git a/demo/app.js b/demo/app.js index 761cc20..e100271 100644 --- a/demo/app.js +++ b/demo/app.js @@ -1,7 +1,21 @@ angular.module('app', ['pdfjsViewer']); +angular.module('app').config(function(pdfjsViewerConfigProvider) { + pdfjsViewerConfigProvider.setButtonsVisibility({ + openFile : true, + print : true, + download : false, + viewBookmark : true + }); +}); + angular.module('app').controller('AppCtrl', function($scope) { $scope.pdf = { src: 'example.pdf' }; + + $scope.buttons = { + print : false, + download: true + } }); diff --git a/dist/angular-pdfjs-viewer.js b/dist/angular-pdfjs-viewer.js index 6f46933..a481335 100644 --- a/dist/angular-pdfjs-viewer.js +++ b/dist/angular-pdfjs-viewer.js @@ -15,7 +15,8 @@ cmapDir: null, imageResourcesPath: null, disableWorker: false, - verbosity: null + verbosity: null, + buttons: {} }; this.setWorkerSrc = function(src) { @@ -33,11 +34,17 @@ this.disableWorker = function(value) { if (typeof value === 'undefined') value = true; config.disableWorker = value; - } + }; this.setVerbosity = function(level) { config.verbosity = level; }; + + this.setButtonsVisibility = function(buttons) { + for (var key in buttons) { + config.buttons[key] = (buttons[key] === true); + } + }; this.$get = function() { return config; @@ -64,11 +71,11 @@ if (pdfjsViewerConfig.verbosity !== null) { var level = pdfjsViewerConfig.verbosity; if (typeof level === 'string') level = PDFJS.VERBOSITY_LEVELS[level]; - PDFJS.verbosity = level; + PDFJS.verbosity = level; } }]); - module.directive('pdfjsViewer', ['$interval', function ($interval) { + module.directive('pdfjsViewer', ['$interval', 'pdfjsViewerConfig', function ($interval, pdfjsViewerConfig) { return { template: '\n' + '
\n' + @@ -445,6 +452,7 @@ onInit: '&', onPageLoad: '&', scale: '=?', + buttons: '=?' }, link: function ($scope, $element, $attrs) { $element.children().wrap('
'); @@ -513,21 +521,32 @@ }, function () { if (!$attrs.src) return; - if ($attrs.open === 'false') { - document.getElementById('openFile').setAttribute('hidden', 'true'); - document.getElementById('secondaryOpenFile').setAttribute('hidden', 'true'); + // Restored for backward compatibility + if ($attrs.open){ + if(!$scope.buttons){ + $scope.buttons = {}; + } + $scope.buttons.openFile = ($attrs.open === 'true'); } - - if ($attrs.download === 'false') { - document.getElementById('download').setAttribute('hidden', 'true'); - document.getElementById('secondaryDownload').setAttribute('hidden', 'true'); + + // Restored for backward compatibility + if ($attrs.download) { + if(!$scope.buttons){ + $scope.buttons = {}; + } + $scope.buttons.download = ($attrs.download === 'true'); } - if ($attrs.print === 'false') { - document.getElementById('print').setAttribute('hidden', 'true'); - document.getElementById('secondaryPrint').setAttribute('hidden', 'true'); + // Restored for backward compatibility + if ($attrs.print) { + if(!$scope.buttons){ + $scope.buttons = {}; + } + $scope.buttons.print = ($attrs.print === 'true'); } + setButtonsVisibility(pdfjsViewerConfig.buttons, $scope.buttons); + if ($attrs.width) { document.getElementById('outerContainer').style.width = $attrs.width; } @@ -542,5 +561,46 @@ }; }]); + function setButtonsVisibility(defaultButtons, customButtons) { + + // Merge default provider's buttons and custom directive's buttons + var allButtons = angular.merge({}, defaultButtons, customButtons); + var key; + var keyValue; + var button; + var buttonSecond; + + for (key in allButtons) { + keyValue = null; + if (allButtons && allButtons.hasOwnProperty(key)) { + keyValue = allButtons[key]; + } + else { + // Default shows + keyValue = true; + } + + button = document.getElementById(key); + if (button !== null) { + if (keyValue === false) { + button.setAttribute('hidden', 'true'); + } + else { + button.removeAttribute('hidden'); + } + } + + buttonSecond = document.getElementById('secondary' + (key.charAt(0).toUpperCase() + key.slice(1))); + if (buttonSecond !== null) { + if (keyValue === false) { + buttonSecond.setAttribute('hidden', 'true'); + } + else { + button.removeAttribute('hidden'); + } + } + } + } + // }(); diff --git a/src/angular-pdfjs-viewer.js b/src/angular-pdfjs-viewer.js index 030e048..8579dcb 100644 --- a/src/angular-pdfjs-viewer.js +++ b/src/angular-pdfjs-viewer.js @@ -15,7 +15,8 @@ cmapDir: null, imageResourcesPath: null, disableWorker: false, - verbosity: null + verbosity: null, + buttons: {} }; this.setWorkerSrc = function(src) { @@ -33,11 +34,17 @@ this.disableWorker = function(value) { if (typeof value === 'undefined') value = true; config.disableWorker = value; - } + }; this.setVerbosity = function(level) { config.verbosity = level; }; + + this.setButtonsVisibility = function(buttons) { + for (var key in buttons) { + config.buttons[key] = (buttons[key] === true); + } + }; this.$get = function() { return config; @@ -64,11 +71,11 @@ if (pdfjsViewerConfig.verbosity !== null) { var level = pdfjsViewerConfig.verbosity; if (typeof level === 'string') level = PDFJS.VERBOSITY_LEVELS[level]; - PDFJS.verbosity = pdfjsViewerConfig.verbosity; + PDFJS.verbosity = level; } }]); - module.directive('pdfjsViewer', ['$interval', function ($interval) { + module.directive('pdfjsViewer', ['$interval', 'pdfjsViewerConfig', function ($interval, pdfjsViewerConfig) { return { templateUrl: file.folder + '../../pdf.js-viewer/viewer.html', restrict: 'E', @@ -76,6 +83,7 @@ onInit: '&', onPageLoad: '&', scale: '=?', + buttons: '=?' }, link: function ($scope, $element, $attrs) { $element.children().wrap('
'); @@ -144,21 +152,32 @@ }, function () { if (!$attrs.src) return; - if ($attrs.open === 'false') { - document.getElementById('openFile').setAttribute('hidden', 'true'); - document.getElementById('secondaryOpenFile').setAttribute('hidden', 'true'); + // Restored for backward compatibility + if ($attrs.open){ + if(!$scope.buttons){ + $scope.buttons = {}; + } + $scope.buttons.openFile = ($attrs.open === 'true'); } - - if ($attrs.download === 'false') { - document.getElementById('download').setAttribute('hidden', 'true'); - document.getElementById('secondaryDownload').setAttribute('hidden', 'true'); + + // Restored for backward compatibility + if ($attrs.download) { + if(!$scope.buttons){ + $scope.buttons = {}; + } + $scope.buttons.download = ($attrs.download === 'true'); } - if ($attrs.print === 'false') { - document.getElementById('print').setAttribute('hidden', 'true'); - document.getElementById('secondaryPrint').setAttribute('hidden', 'true'); + // Restored for backward compatibility + if ($attrs.print) { + if(!$scope.buttons){ + $scope.buttons = {}; + } + $scope.buttons.print = ($attrs.print === 'true'); } + setButtonsVisibility(pdfjsViewerConfig.buttons, $scope.buttons); + if ($attrs.width) { document.getElementById('outerContainer').style.width = $attrs.width; } @@ -173,6 +192,47 @@ }; }]); + function setButtonsVisibility(defaultButtons, customButtons) { + + // Merge default provider's buttons and custom directive's buttons + var allButtons = angular.merge({}, defaultButtons, customButtons); + var key; + var keyValue; + var button; + var buttonSecond; + + for (key in allButtons) { + keyValue = null; + if (allButtons && allButtons.hasOwnProperty(key)) { + keyValue = allButtons[key]; + } + else { + // Default shows + keyValue = true; + } + + button = document.getElementById(key); + if (button !== null) { + if (keyValue === false) { + button.setAttribute('hidden', 'true'); + } + else { + button.removeAttribute('hidden'); + } + } + + buttonSecond = document.getElementById('secondary' + (key.charAt(0).toUpperCase() + key.slice(1))); + if (buttonSecond !== null) { + if (keyValue === false) { + buttonSecond.setAttribute('hidden', 'true'); + } + else { + button.removeAttribute('hidden'); + } + } + } + } + // === get current script file === var file = {}; file.scripts = document.querySelectorAll('script[src]');