67a1dfcfb5
The sidebar code has, except for minor fixes/additions (such as attachments), been largely untouch for years. To avoid having a bunch of sidebar code sprinkled throughout viewer.js, this patch moves the sidebar code into a separate file (pdf_sidebar.js), similar to how most other functionality has been moved in the last few years. Besides simply moving code around, this patch also has the added benefit that we now keep track of the sidebar state (not just opened/closed). This now makes it possible to handle both `Preferences` *and* `ViewHistory` settings for the sidebar state in a cleaner way, preventing strange and confusing interactions between the two.
325 lines
10 KiB
JavaScript
325 lines
10 KiB
JavaScript
/* Copyright 2016 Mozilla Foundation
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
/* globals RenderingStates */
|
|
|
|
'use strict';
|
|
|
|
var SidebarView = {
|
|
NONE: 0,
|
|
THUMBS: 1,
|
|
OUTLINE: 2,
|
|
ATTACHMENTS: 3
|
|
};
|
|
|
|
/**
|
|
* @typedef {Object} PDFSidebarOptions
|
|
* @property {PDFViewer} - The document viewer.
|
|
* @property {PDFThumbnailViewer} - The thumbnail viewer.
|
|
* @property {PDFOutlineViewer} - The outline viewer.
|
|
* @property {HTMLDivElement} mainContainer - The main container
|
|
* (in which the viewer element is placed).
|
|
* @property {HTMLDivElement} outerContainer - The outer container
|
|
* (encasing both the viewer and sidebar elements).
|
|
* @property {HTMLButtonElement} toggleButton - The button used for
|
|
* opening/closing the sidebar.
|
|
* @property {HTMLButtonElement} thumbnailButton - The button used to show
|
|
* the thumbnail view.
|
|
* @property {HTMLButtonElement} outlineButton - The button used to show
|
|
* the outline view.
|
|
* @property {HTMLButtonElement} attachmentsButton - The button used to show
|
|
* the attachments view.
|
|
* @property {HTMLDivElement} thumbnailView - The container in which
|
|
* the thumbnails are placed.
|
|
* @property {HTMLDivElement} outlineView - The container in which
|
|
* the outline is placed.
|
|
* @property {HTMLDivElement} attachmentsView - The container in which
|
|
* the attachments are placed.
|
|
*/
|
|
|
|
/**
|
|
* @class
|
|
*/
|
|
var PDFSidebar = (function PDFSidebarClosure() {
|
|
/**
|
|
* @constructs PDFSidebar
|
|
* @param {PDFSidebarOptions} options
|
|
*/
|
|
function PDFSidebar(options) {
|
|
this.isOpen = false;
|
|
this.active = SidebarView.THUMBS;
|
|
this.isInitialViewSet = false;
|
|
|
|
/**
|
|
* Callback used when the sidebar has been opened/closed, to ensure that
|
|
* the viewers (PDFViewer/PDFThumbnailViewer) are updated correctly.
|
|
*/
|
|
this.onToggled = null;
|
|
|
|
this.pdfViewer = options.pdfViewer;
|
|
this.pdfThumbnailViewer = options.pdfThumbnailViewer;
|
|
this.pdfOutlineViewer = options.pdfOutlineViewer;
|
|
|
|
this.mainContainer = options.mainContainer;
|
|
this.outerContainer = options.outerContainer;
|
|
this.toggleButton = options.toggleButton;
|
|
|
|
this.thumbnailButton = options.thumbnailButton;
|
|
this.outlineButton = options.outlineButton;
|
|
this.attachmentsButton = options.attachmentsButton;
|
|
|
|
this.thumbnailView = options.thumbnailView;
|
|
this.outlineView = options.outlineView;
|
|
this.attachmentsView = options.attachmentsView;
|
|
|
|
this._addEventListeners();
|
|
}
|
|
|
|
PDFSidebar.prototype = {
|
|
reset: function PDFSidebar_reset() {
|
|
this.isInitialViewSet = false;
|
|
|
|
this.close();
|
|
this.switchView(SidebarView.THUMBS);
|
|
|
|
this.outlineButton.disabled = false;
|
|
this.attachmentsButton.disabled = false;
|
|
},
|
|
|
|
/**
|
|
* @returns {number} One of the values in {SidebarView}.
|
|
*/
|
|
get visibleView() {
|
|
return (this.isOpen ? this.active : SidebarView.NONE);
|
|
},
|
|
|
|
get isThumbnailViewVisible() {
|
|
return (this.isOpen && this.active === SidebarView.THUMBS);
|
|
},
|
|
|
|
get isOutlineViewVisible() {
|
|
return (this.isOpen && this.active === SidebarView.OUTLINE);
|
|
},
|
|
|
|
get isAttachmentsViewVisible() {
|
|
return (this.isOpen && this.active === SidebarView.ATTACHMENTS);
|
|
},
|
|
|
|
/**
|
|
* @param {number} view - The sidebar view that should become visible,
|
|
* must be one of the values in {SidebarView}.
|
|
*/
|
|
setInitialView: function PDFSidebar_setInitialView(view) {
|
|
if (this.isInitialViewSet) {
|
|
return;
|
|
}
|
|
this.isInitialViewSet = true;
|
|
|
|
if (this.isOpen && view === SidebarView.NONE) {
|
|
// If the user has already manually opened the sidebar,
|
|
// immediately closing it would be bad UX.
|
|
return;
|
|
}
|
|
this.switchView(view, true);
|
|
},
|
|
|
|
/**
|
|
* @param {number} view - The sidebar view that should be switched to,
|
|
* must be one of the values in {SidebarView}.
|
|
* @param {boolean} forceOpen - Ensure that the sidebar is opened.
|
|
* The default value is false.
|
|
*/
|
|
switchView: function PDFSidebar_switchView(view, forceOpen) {
|
|
if (view === SidebarView.NONE) {
|
|
this.close();
|
|
return;
|
|
}
|
|
if (forceOpen) {
|
|
this.open();
|
|
}
|
|
var shouldForceRendering = false;
|
|
|
|
switch (view) {
|
|
case SidebarView.THUMBS:
|
|
this.thumbnailButton.classList.add('toggled');
|
|
this.outlineButton.classList.remove('toggled');
|
|
this.attachmentsButton.classList.remove('toggled');
|
|
|
|
this.thumbnailView.classList.remove('hidden');
|
|
this.outlineView.classList.add('hidden');
|
|
this.attachmentsView.classList.add('hidden');
|
|
|
|
if (this.isOpen && view !== this.active) {
|
|
this._updateThumbnailViewer();
|
|
shouldForceRendering = true;
|
|
}
|
|
break;
|
|
case SidebarView.OUTLINE:
|
|
if (this.outlineButton.disabled) {
|
|
return;
|
|
}
|
|
this.thumbnailButton.classList.remove('toggled');
|
|
this.outlineButton.classList.add('toggled');
|
|
this.attachmentsButton.classList.remove('toggled');
|
|
|
|
this.thumbnailView.classList.add('hidden');
|
|
this.outlineView.classList.remove('hidden');
|
|
this.attachmentsView.classList.add('hidden');
|
|
break;
|
|
case SidebarView.ATTACHMENTS:
|
|
if (this.attachmentsButton.disabled) {
|
|
return;
|
|
}
|
|
this.thumbnailButton.classList.remove('toggled');
|
|
this.outlineButton.classList.remove('toggled');
|
|
this.attachmentsButton.classList.add('toggled');
|
|
|
|
this.thumbnailView.classList.add('hidden');
|
|
this.outlineView.classList.add('hidden');
|
|
this.attachmentsView.classList.remove('hidden');
|
|
break;
|
|
default:
|
|
console.error('PDFSidebar_switchView: "' + view +
|
|
'" is an unsupported value.');
|
|
return;
|
|
}
|
|
// Update the active view *after* it has been validated above,
|
|
// in order to prevent setting it to an invalid state.
|
|
this.active = view | 0;
|
|
|
|
if (shouldForceRendering) {
|
|
this._forceRendering();
|
|
}
|
|
},
|
|
|
|
open: function PDFSidebar_open() {
|
|
if (this.isOpen) {
|
|
return;
|
|
}
|
|
this.isOpen = true;
|
|
this.toggleButton.classList.add('toggled');
|
|
|
|
this.outerContainer.classList.add('sidebarMoving');
|
|
this.outerContainer.classList.add('sidebarOpen');
|
|
|
|
if (this.active === SidebarView.THUMBS) {
|
|
this._updateThumbnailViewer();
|
|
}
|
|
this._forceRendering();
|
|
},
|
|
|
|
close: function PDFSidebar_close() {
|
|
if (!this.isOpen) {
|
|
return;
|
|
}
|
|
this.isOpen = false;
|
|
this.toggleButton.classList.remove('toggled');
|
|
|
|
this.outerContainer.classList.add('sidebarMoving');
|
|
this.outerContainer.classList.remove('sidebarOpen');
|
|
|
|
this._forceRendering();
|
|
},
|
|
|
|
toggle: function PDFSidebar_toggle() {
|
|
if (this.isOpen) {
|
|
this.close();
|
|
} else {
|
|
this.open();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_forceRendering: function PDFSidebar_forceRendering() {
|
|
if (this.onToggled) {
|
|
this.onToggled();
|
|
} else { // Fallback
|
|
this.pdfViewer.forceRendering();
|
|
this.pdfThumbnailViewer.forceRendering();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_updateThumbnailViewer: function PDFSidebar_updateThumbnailViewer() {
|
|
var pdfViewer = this.pdfViewer;
|
|
var thumbnailViewer = this.pdfThumbnailViewer;
|
|
|
|
// Use the rendered pages to set the corresponding thumbnail images.
|
|
var pagesCount = pdfViewer.pagesCount;
|
|
for (var pageIndex = 0; pageIndex < pagesCount; pageIndex++) {
|
|
var pageView = pdfViewer.getPageView(pageIndex);
|
|
if (pageView && pageView.renderingState === RenderingStates.FINISHED) {
|
|
var thumbnailView = thumbnailViewer.getThumbnail(pageIndex);
|
|
thumbnailView.setImage(pageView);
|
|
}
|
|
}
|
|
thumbnailViewer.scrollThumbnailIntoView(pdfViewer.currentPageNumber);
|
|
},
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
_addEventListeners: function PDFSidebar_addEventListeners() {
|
|
var self = this;
|
|
|
|
self.mainContainer.addEventListener('transitionend', function(evt) {
|
|
if (evt.target === /* mainContainer */ this) {
|
|
self.outerContainer.classList.remove('sidebarMoving');
|
|
}
|
|
});
|
|
|
|
// Buttons for switching views.
|
|
self.thumbnailButton.addEventListener('click', function() {
|
|
self.switchView(SidebarView.THUMBS);
|
|
});
|
|
|
|
self.outlineButton.addEventListener('click', function() {
|
|
self.switchView(SidebarView.OUTLINE);
|
|
});
|
|
self.outlineButton.addEventListener('dblclick', function() {
|
|
self.pdfOutlineViewer.toggleOutlineTree();
|
|
});
|
|
|
|
self.attachmentsButton.addEventListener('click', function() {
|
|
self.switchView(SidebarView.ATTACHMENTS);
|
|
});
|
|
|
|
// Disable/enable views.
|
|
self.outlineView.addEventListener('outlineloaded', function(evt) {
|
|
var outlineCount = evt.detail.outlineCount;
|
|
|
|
self.outlineButton.disabled = !outlineCount;
|
|
if (!outlineCount && self.active === SidebarView.OUTLINE) {
|
|
self.switchView(SidebarView.THUMBS);
|
|
}
|
|
});
|
|
|
|
self.attachmentsView.addEventListener('attachmentsloaded', function(evt) {
|
|
var attachmentsCount = evt.detail.attachmentsCount;
|
|
|
|
self.attachmentsButton.disabled = !attachmentsCount;
|
|
if (!attachmentsCount && self.active === SidebarView.ATTACHMENTS) {
|
|
self.switchView(SidebarView.THUMBS);
|
|
}
|
|
});
|
|
},
|
|
};
|
|
|
|
return PDFSidebar;
|
|
})();
|