From 34e29608d0ce0d934c284090e14bba343d5d927b Mon Sep 17 00:00:00 2001 From: Luca Caprini Date: Mon, 13 Feb 2017 17:38:45 +0100 Subject: [PATCH 1/6] =?UTF-8?q?Added=20default=20button=E2=80=99s=20visibi?= =?UTF-8?q?lity=20=20on=20pdfjsViewerConfigProvider=20Added=20button?= =?UTF-8?q?=E2=80=99s=20visibility=20override=20in=20directive?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 36 +++++++++++++--- dist/angular-pdfjs-viewer.js | 84 ++++++++++++++++++++++++++++-------- src/angular-pdfjs-viewer.js | 82 ++++++++++++++++++++++++++++------- 3 files changed, 164 insertions(+), 38 deletions(-) diff --git a/README.md b/README.md index 11222f5..80d84ef 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ allows you to scroll through the pdf. ## Installation - bower install angular-pdfjs-viewer --save + bower install https://github.com/lcaprini/angular-pdfjs-viewer --save ## Usage @@ -46,7 +46,7 @@ that images, translations and such are being loaded from the `web` folder.
@@ -56,9 +56,7 @@ 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 - - download="false" print="false" open="false" +The directive takes the `buttons` optional attribute to allow show and hide toolbar buttons. Omitting these attributes will by default show the options in the toolbar. @@ -74,6 +72,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 +127,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 +141,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/dist/angular-pdfjs-viewer.js b/dist/angular-pdfjs-viewer.js index 6f46933..a043790 100644 --- a/dist/angular-pdfjs-viewer.js +++ b/dist/angular-pdfjs-viewer.js @@ -15,7 +15,25 @@ cmapDir: null, imageResourcesPath: null, disableWorker: false, - verbosity: null + verbosity: null, + 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 + } }; this.setWorkerSrc = function(src) { @@ -38,6 +56,19 @@ this.setVerbosity = function(level) { config.verbosity = level; }; + + this.setButtonsVisibility = function(buttons) { + for (var key in buttons) { + if (config.buttons.hasOwnProperty(key)) { + if (buttons[key] === false) { + config.buttons[key] = false; + } + else { + config.buttons[key] = true; + } + } + } + }; this.$get = function() { return config; @@ -64,11 +95,11 @@ if (pdfjsViewerConfig.verbosity !== null) { var level = pdfjsViewerConfig.verbosity; if (typeof level === 'string') level = PDFJS.VERBOSITY_LEVELS[level]; - PDFJS.verbosity = level; + PDFJS.verbosity = pdfjsViewerConfig.verbosity; } }]); - module.directive('pdfjsViewer', ['$interval', function ($interval) { + module.directive('pdfjsViewer', ['$interval', 'pdfjsViewerConfig', function ($interval, pdfjsViewerConfig) { return { template: '\n' + '
\n' + @@ -445,6 +476,7 @@ onInit: '&', onPageLoad: '&', scale: '=?', + buttons: '=?' }, link: function ($scope, $element, $attrs) { $element.children().wrap('
'); @@ -513,20 +545,7 @@ }, function () { if (!$attrs.src) return; - if ($attrs.open === 'false') { - document.getElementById('openFile').setAttribute('hidden', 'true'); - document.getElementById('secondaryOpenFile').setAttribute('hidden', 'true'); - } - - if ($attrs.download === 'false') { - document.getElementById('download').setAttribute('hidden', 'true'); - document.getElementById('secondaryDownload').setAttribute('hidden', 'true'); - } - - if ($attrs.print === 'false') { - document.getElementById('print').setAttribute('hidden', 'true'); - document.getElementById('secondaryPrint').setAttribute('hidden', 'true'); - } + setButtonsVisibility(pdfjsViewerConfig.buttons, $scope.buttons); if ($attrs.width) { document.getElementById('outerContainer').style.width = $attrs.width; @@ -542,5 +561,36 @@ }; }]); + function setButtonsVisibility(defaultButtons, buttons) { + for (var key in defaultButtons) { + var keyValue = null; + if (buttons.hasOwnProperty(key)) { + keyValue = buttons[key]; + } + else { + keyValue = defaultButtons[key]; + } + + var button = document.getElementById(key); + if (button !== null) { + if (keyValue === false) { + button.setAttribute('hidden', 'true'); + } + else { + button.removeAttribute('hidden'); + } + } + var 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..ad70579 100644 --- a/src/angular-pdfjs-viewer.js +++ b/src/angular-pdfjs-viewer.js @@ -15,7 +15,25 @@ cmapDir: null, imageResourcesPath: null, disableWorker: false, - verbosity: null + verbosity: null, + 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 + } }; this.setWorkerSrc = function(src) { @@ -38,6 +56,19 @@ this.setVerbosity = function(level) { config.verbosity = level; }; + + this.setButtonsVisibility = function(buttons) { + for (var key in buttons) { + if (config.buttons.hasOwnProperty(key)) { + if (buttons[key] === false) { + config.buttons[key] = false; + } + else { + config.buttons[key] = true; + } + } + } + }; this.$get = function() { return config; @@ -68,7 +99,7 @@ } }]); - 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 +107,7 @@ onInit: '&', onPageLoad: '&', scale: '=?', + buttons: '=?' }, link: function ($scope, $element, $attrs) { $element.children().wrap('
'); @@ -144,20 +176,7 @@ }, function () { if (!$attrs.src) return; - if ($attrs.open === 'false') { - document.getElementById('openFile').setAttribute('hidden', 'true'); - document.getElementById('secondaryOpenFile').setAttribute('hidden', 'true'); - } - - if ($attrs.download === 'false') { - document.getElementById('download').setAttribute('hidden', 'true'); - document.getElementById('secondaryDownload').setAttribute('hidden', 'true'); - } - - if ($attrs.print === 'false') { - document.getElementById('print').setAttribute('hidden', 'true'); - document.getElementById('secondaryPrint').setAttribute('hidden', 'true'); - } + setButtonsVisibility(pdfjsViewerConfig.buttons, $scope.buttons); if ($attrs.width) { document.getElementById('outerContainer').style.width = $attrs.width; @@ -173,6 +192,37 @@ }; }]); + function setButtonsVisibility(defaultButtons, buttons) { + for (var key in defaultButtons) { + var keyValue = null; + if (buttons.hasOwnProperty(key)) { + keyValue = buttons[key]; + } + else { + keyValue = defaultButtons[key]; + } + + var button = document.getElementById(key); + if (button !== null) { + if (keyValue === false) { + button.setAttribute('hidden', 'true'); + } + else { + button.removeAttribute('hidden'); + } + } + var 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]'); From 985f328120d1c970a746d98e5b7f3d3fd9117bea Mon Sep 17 00:00:00 2001 From: Luca Caprini Date: Mon, 13 Feb 2017 17:40:17 +0100 Subject: [PATCH 2/6] Revert bower install command --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 80d84ef..58b4b77 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ allows you to scroll through the pdf. ## Installation - bower install https://github.com/lcaprini/angular-pdfjs-viewer --save + bower install angular-pdfjs-viewer --save ## Usage From 298301eaeb514c14be93914e017e4e616b8a7b7e Mon Sep 17 00:00:00 2001 From: Luca Caprini Date: Mon, 13 Feb 2017 17:58:01 +0100 Subject: [PATCH 3/6] FIX check buttons object exists in directive --- dist/angular-pdfjs-viewer.js | 2 +- src/angular-pdfjs-viewer.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/angular-pdfjs-viewer.js b/dist/angular-pdfjs-viewer.js index a043790..a099606 100644 --- a/dist/angular-pdfjs-viewer.js +++ b/dist/angular-pdfjs-viewer.js @@ -564,7 +564,7 @@ function setButtonsVisibility(defaultButtons, buttons) { for (var key in defaultButtons) { var keyValue = null; - if (buttons.hasOwnProperty(key)) { + if (buttons && buttons.hasOwnProperty(key)) { keyValue = buttons[key]; } else { diff --git a/src/angular-pdfjs-viewer.js b/src/angular-pdfjs-viewer.js index ad70579..813932a 100644 --- a/src/angular-pdfjs-viewer.js +++ b/src/angular-pdfjs-viewer.js @@ -195,7 +195,7 @@ function setButtonsVisibility(defaultButtons, buttons) { for (var key in defaultButtons) { var keyValue = null; - if (buttons.hasOwnProperty(key)) { + if (buttons && buttons.hasOwnProperty(key)) { keyValue = buttons[key]; } else { From a2d1c0dd26739e1e8061eec63f6d7ea6ecb1d4d8 Mon Sep 17 00:00:00 2001 From: Luca Caprini Date: Thu, 16 Feb 2017 09:12:52 +0100 Subject: [PATCH 4/6] Restored open, print and download attributes to avoid BC break --- dist/angular-pdfjs-viewer.js | 17 ++++++++++++++++- src/angular-pdfjs-viewer.js | 17 ++++++++++++++++- 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/dist/angular-pdfjs-viewer.js b/dist/angular-pdfjs-viewer.js index a099606..17c18cc 100644 --- a/dist/angular-pdfjs-viewer.js +++ b/dist/angular-pdfjs-viewer.js @@ -95,7 +95,7 @@ if (pdfjsViewerConfig.verbosity !== null) { var level = pdfjsViewerConfig.verbosity; if (typeof level === 'string') level = PDFJS.VERBOSITY_LEVELS[level]; - PDFJS.verbosity = pdfjsViewerConfig.verbosity; + PDFJS.verbosity = level; } }]); @@ -545,6 +545,21 @@ }, function () { if (!$attrs.src) return; + // Restored for backward compatibility + if ($attrs.open){ + $scope.buttons.openFile = ($attrs.open === 'true'); + } + + // Restored for backward compatibility + if ($attrs.download) { + $scope.buttons.download = ($attrs.download === 'true'); + } + + // Restored for backward compatibility + if ($attrs.print) { + $scope.buttons.print = ($attrs.print === 'true'); + } + setButtonsVisibility(pdfjsViewerConfig.buttons, $scope.buttons); if ($attrs.width) { diff --git a/src/angular-pdfjs-viewer.js b/src/angular-pdfjs-viewer.js index 813932a..9728487 100644 --- a/src/angular-pdfjs-viewer.js +++ b/src/angular-pdfjs-viewer.js @@ -95,7 +95,7 @@ if (pdfjsViewerConfig.verbosity !== null) { var level = pdfjsViewerConfig.verbosity; if (typeof level === 'string') level = PDFJS.VERBOSITY_LEVELS[level]; - PDFJS.verbosity = pdfjsViewerConfig.verbosity; + PDFJS.verbosity = level; } }]); @@ -176,6 +176,21 @@ }, function () { if (!$attrs.src) return; + // Restored for backward compatibility + if ($attrs.open){ + $scope.buttons.openFile = ($attrs.open === 'true'); + } + + // Restored for backward compatibility + if ($attrs.download) { + $scope.buttons.download = ($attrs.download === 'true'); + } + + // Restored for backward compatibility + if ($attrs.print) { + $scope.buttons.print = ($attrs.print === 'true'); + } + setButtonsVisibility(pdfjsViewerConfig.buttons, $scope.buttons); if ($attrs.width) { From 085fc5c72357bd6ceb90904c88ce52a01b1d5652 Mon Sep 17 00:00:00 2001 From: Luca Caprini Date: Thu, 16 Feb 2017 09:48:15 +0100 Subject: [PATCH 5/6] FIX for not created buttons list --- dist/angular-pdfjs-viewer.js | 13 +++++++++++-- src/angular-pdfjs-viewer.js | 13 +++++++++++-- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/dist/angular-pdfjs-viewer.js b/dist/angular-pdfjs-viewer.js index 17c18cc..5c1a060 100644 --- a/dist/angular-pdfjs-viewer.js +++ b/dist/angular-pdfjs-viewer.js @@ -547,16 +547,25 @@ // Restored for backward compatibility if ($attrs.open){ + if(!$scope.buttons){ + $scope.buttons = {}; + } $scope.buttons.openFile = ($attrs.open === 'true'); } // Restored for backward compatibility - if ($attrs.download) { + if ($attrs.download) { + if(!$scope.buttons){ + $scope.buttons = {}; + } $scope.buttons.download = ($attrs.download === 'true'); } // Restored for backward compatibility - if ($attrs.print) { + if ($attrs.print) { + if(!$scope.buttons){ + $scope.buttons = {}; + } $scope.buttons.print = ($attrs.print === 'true'); } diff --git a/src/angular-pdfjs-viewer.js b/src/angular-pdfjs-viewer.js index 9728487..a892efc 100644 --- a/src/angular-pdfjs-viewer.js +++ b/src/angular-pdfjs-viewer.js @@ -178,16 +178,25 @@ // Restored for backward compatibility if ($attrs.open){ + if(!$scope.buttons){ + $scope.buttons = {}; + } $scope.buttons.openFile = ($attrs.open === 'true'); } // Restored for backward compatibility - if ($attrs.download) { + if ($attrs.download) { + if(!$scope.buttons){ + $scope.buttons = {}; + } $scope.buttons.download = ($attrs.download === 'true'); } // Restored for backward compatibility - if ($attrs.print) { + if ($attrs.print) { + if(!$scope.buttons){ + $scope.buttons = {}; + } $scope.buttons.print = ($attrs.print === 'true'); } From ac03ba8c5b752da4aee51c1e7ee2a1bcad390ba3 Mon Sep 17 00:00:00 2001 From: Luca Caprini Date: Mon, 3 Apr 2017 18:19:22 +0200 Subject: [PATCH 6/6] Removed default buttons list; now default shows Updated demo with buttons example --- README.md | 22 ++++++++++++++ demo/app.js | 14 +++++++++ dist/angular-pdfjs-viewer.js | 56 ++++++++++++++---------------------- src/angular-pdfjs-viewer.js | 56 ++++++++++++++---------------------- 4 files changed, 78 insertions(+), 70 deletions(-) diff --git a/README.md b/README.md index 58b4b77..c4d7271 100644 --- a/README.md +++ b/README.md @@ -58,6 +58,28 @@ The `scale` attribute can be used to obtain the current scale (zoom level) of th The directive takes the `buttons` optional attribute to allow show and hide toolbar buttons. +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. The `on-init` function is called when PDF.JS is fully loaded. The `on-page-load` function is each time a page is 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 5c1a060..a481335 100644 --- a/dist/angular-pdfjs-viewer.js +++ b/dist/angular-pdfjs-viewer.js @@ -16,24 +16,7 @@ imageResourcesPath: null, disableWorker: false, verbosity: null, - 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 - } + buttons: {} }; this.setWorkerSrc = function(src) { @@ -51,7 +34,7 @@ this.disableWorker = function(value) { if (typeof value === 'undefined') value = true; config.disableWorker = value; - } + }; this.setVerbosity = function(level) { config.verbosity = level; @@ -59,14 +42,7 @@ this.setButtonsVisibility = function(buttons) { for (var key in buttons) { - if (config.buttons.hasOwnProperty(key)) { - if (buttons[key] === false) { - config.buttons[key] = false; - } - else { - config.buttons[key] = true; - } - } + config.buttons[key] = (buttons[key] === true); } }; @@ -585,17 +561,26 @@ }; }]); - function setButtonsVisibility(defaultButtons, buttons) { - for (var key in defaultButtons) { - var keyValue = null; - if (buttons && buttons.hasOwnProperty(key)) { - keyValue = buttons[key]; + 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 { - keyValue = defaultButtons[key]; + // Default shows + keyValue = true; } - var button = document.getElementById(key); + button = document.getElementById(key); if (button !== null) { if (keyValue === false) { button.setAttribute('hidden', 'true'); @@ -604,7 +589,8 @@ button.removeAttribute('hidden'); } } - var buttonSecond = document.getElementById('secondary' + (key.charAt(0).toUpperCase() + key.slice(1))); + + buttonSecond = document.getElementById('secondary' + (key.charAt(0).toUpperCase() + key.slice(1))); if (buttonSecond !== null) { if (keyValue === false) { buttonSecond.setAttribute('hidden', 'true'); diff --git a/src/angular-pdfjs-viewer.js b/src/angular-pdfjs-viewer.js index a892efc..8579dcb 100644 --- a/src/angular-pdfjs-viewer.js +++ b/src/angular-pdfjs-viewer.js @@ -16,24 +16,7 @@ imageResourcesPath: null, disableWorker: false, verbosity: null, - 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 - } + buttons: {} }; this.setWorkerSrc = function(src) { @@ -51,7 +34,7 @@ this.disableWorker = function(value) { if (typeof value === 'undefined') value = true; config.disableWorker = value; - } + }; this.setVerbosity = function(level) { config.verbosity = level; @@ -59,14 +42,7 @@ this.setButtonsVisibility = function(buttons) { for (var key in buttons) { - if (config.buttons.hasOwnProperty(key)) { - if (buttons[key] === false) { - config.buttons[key] = false; - } - else { - config.buttons[key] = true; - } - } + config.buttons[key] = (buttons[key] === true); } }; @@ -216,17 +192,26 @@ }; }]); - function setButtonsVisibility(defaultButtons, buttons) { - for (var key in defaultButtons) { - var keyValue = null; - if (buttons && buttons.hasOwnProperty(key)) { - keyValue = buttons[key]; + 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 { - keyValue = defaultButtons[key]; + // Default shows + keyValue = true; } - var button = document.getElementById(key); + button = document.getElementById(key); if (button !== null) { if (keyValue === false) { button.setAttribute('hidden', 'true'); @@ -235,7 +220,8 @@ button.removeAttribute('hidden'); } } - var buttonSecond = document.getElementById('secondary' + (key.charAt(0).toUpperCase() + key.slice(1))); + + buttonSecond = document.getElementById('secondary' + (key.charAt(0).toUpperCase() + key.slice(1))); if (buttonSecond !== null) { if (keyValue === false) { buttonSecond.setAttribute('hidden', 'true');