Merge pull request #4823 from Snuffleupagus/overlay-manager
Simplify the interaction with overlays by adding an OverlayManager
This commit is contained in:
Tim van der Meij
commit
03dff83a60
@ -202,21 +202,66 @@ limitations under the License.
|
||||
</div> <!-- mainContainer -->
|
||||
|
||||
<div id="overlayContainer" class="hidden">
|
||||
<div id="promptContainer">
|
||||
<div id="passwordContainer" class="prompt doorHanger">
|
||||
<div id="passwordOverlay" class="container hidden">
|
||||
<div class="dialog">
|
||||
<div class="row">
|
||||
<p id="passwordText" data-l10n-id="password_label">Enter the password to open this PDF file:</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<input type="password" id="password" class="toolbarField" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<button id="passwordCancel" class="promptButton"><span data-l10n-id="password_cancel">Cancel</span></button>
|
||||
<button id="passwordSubmit" class="promptButton"><span data-l10n-id="password_ok">OK</span></button>
|
||||
<div class="buttonRow">
|
||||
<button id="passwordCancel" class="overlayButton"><span data-l10n-id="password_cancel">Cancel</span></button>
|
||||
<button id="passwordSubmit" class="overlayButton"><span data-l10n-id="password_ok">OK</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="documentPropertiesOverlay" class="container hidden">
|
||||
<div class="dialog">
|
||||
<div class="row">
|
||||
<span data-l10n-id="document_properties_file_name">File name:</span> <p id="fileNameField">-</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span data-l10n-id="document_properties_file_size">File size:</span> <p id="fileSizeField">-</p>
|
||||
</div>
|
||||
<div class="separator"></div>
|
||||
<div class="row">
|
||||
<span data-l10n-id="document_properties_title">Title:</span> <p id="titleField">-</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span data-l10n-id="document_properties_author">Author:</span> <p id="authorField">-</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span data-l10n-id="document_properties_subject">Subject:</span> <p id="subjectField">-</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span data-l10n-id="document_properties_keywords">Keywords:</span> <p id="keywordsField">-</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span data-l10n-id="document_properties_creation_date">Creation Date:</span> <p id="creationDateField">-</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span data-l10n-id="document_properties_modification_date">Modification Date:</span> <p id="modificationDateField">-</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span data-l10n-id="document_properties_creator">Creator:</span> <p id="creatorField">-</p>
|
||||
</div>
|
||||
<div class="separator"></div>
|
||||
<div class="row">
|
||||
<span data-l10n-id="document_properties_producer">PDF Producer:</span> <p id="producerField">-</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span data-l10n-id="document_properties_version">PDF Version:</span> <p id="versionField">-</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span data-l10n-id="document_properties_page_count">Page Count:</span> <p id="pageCountField">-</p>
|
||||
</div>
|
||||
<div class="buttonRow">
|
||||
<button id="documentPropertiesClose" class="overlayButton"><span data-l10n-id="document_properties_close">Close</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- overlayContainer -->
|
||||
|
||||
<div id="printContainer"></div>
|
||||
</div>
|
||||
|
||||
@ -14,15 +14,14 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
/* globals PDFView, Promise, mozL10n, getPDFFileNameFromURL */
|
||||
/* globals PDFView, Promise, mozL10n, getPDFFileNameFromURL, OverlayManager */
|
||||
|
||||
'use strict';
|
||||
|
||||
var DocumentProperties = {
|
||||
overlayContainer: null,
|
||||
overlayName: null,
|
||||
fileName: '',
|
||||
fileSize: '',
|
||||
visible: false,
|
||||
|
||||
// Document property fields (in the viewer).
|
||||
fileNameField: null,
|
||||
@ -39,7 +38,7 @@ var DocumentProperties = {
|
||||
pageCountField: null,
|
||||
|
||||
initialize: function documentPropertiesInitialize(options) {
|
||||
this.overlayContainer = options.overlayContainer;
|
||||
this.overlayName = options.overlayName;
|
||||
|
||||
// Set the document property fields.
|
||||
this.fileNameField = options.fileNameField;
|
||||
@ -57,24 +56,18 @@ var DocumentProperties = {
|
||||
|
||||
// Bind the event listener for the Close button.
|
||||
if (options.closeButton) {
|
||||
options.closeButton.addEventListener('click', this.hide.bind(this));
|
||||
options.closeButton.addEventListener('click', this.close.bind(this));
|
||||
}
|
||||
|
||||
this.dataAvailablePromise = new Promise(function (resolve) {
|
||||
this.resolveDataAvailable = resolve;
|
||||
}.bind(this));
|
||||
|
||||
// Bind the event listener for the Esc key (to close the dialog).
|
||||
window.addEventListener('keydown',
|
||||
function (e) {
|
||||
if (e.keyCode === 27) { // Esc key
|
||||
this.hide();
|
||||
}
|
||||
}.bind(this));
|
||||
OverlayManager.register(this.overlayName, this.close.bind(this));
|
||||
},
|
||||
|
||||
getProperties: function documentPropertiesGetProperties() {
|
||||
if (!this.visible) {
|
||||
if (!OverlayManager.active) {
|
||||
// If the dialog was closed before dataAvailablePromise was resolved,
|
||||
// don't bother updating the properties.
|
||||
return;
|
||||
@ -136,26 +129,15 @@ var DocumentProperties = {
|
||||
}
|
||||
},
|
||||
|
||||
show: function documentPropertiesShow() {
|
||||
if (this.visible) {
|
||||
return;
|
||||
}
|
||||
this.visible = true;
|
||||
this.overlayContainer.classList.remove('hidden');
|
||||
this.overlayContainer.lastElementChild.classList.remove('hidden');
|
||||
|
||||
this.dataAvailablePromise.then(function () {
|
||||
open: function documentPropertiesOpen() {
|
||||
Promise.all([OverlayManager.open(this.overlayName),
|
||||
this.dataAvailablePromise]).then(function () {
|
||||
this.getProperties();
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
hide: function documentPropertiesClose() {
|
||||
if (!this.visible) {
|
||||
return;
|
||||
}
|
||||
this.visible = false;
|
||||
this.overlayContainer.classList.add('hidden');
|
||||
this.overlayContainer.lastElementChild.classList.add('hidden');
|
||||
close: function documentPropertiesClose() {
|
||||
OverlayManager.close(this.overlayName);
|
||||
},
|
||||
|
||||
parseDate: function documentPropertiesParseDate(inputDate) {
|
||||
|
||||
145
web/overlay_manager.js
Normal file
145
web/overlay_manager.js
Normal file
@ -0,0 +1,145 @@
|
||||
/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
|
||||
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
|
||||
/* Copyright 2014 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 Promise */
|
||||
|
||||
'use strict';
|
||||
|
||||
var OverlayManager = {
|
||||
overlays: {},
|
||||
active: null,
|
||||
|
||||
/**
|
||||
* @param {string} name The name of the overlay that is registered. This must
|
||||
* be the equal to the ID of the overlay's DOM element.
|
||||
* @param {function} callerCloseMethod (optional) The method that, if present,
|
||||
* will call OverlayManager.close from the Object
|
||||
* registering the overlay. Access to this method is
|
||||
* necessary in order to run cleanup code when e.g.
|
||||
* the overlay is force closed. The default is null.
|
||||
* @param {boolean} canForceClose (optional) Indicates if opening the overlay
|
||||
* will close an active overlay. The default is false.
|
||||
* @returns {Promise} A promise that is resolved when the overlay has been
|
||||
* registered.
|
||||
*/
|
||||
register: function overlayManagerRegister(name,
|
||||
callerCloseMethod, canForceClose) {
|
||||
return new Promise(function (resolve) {
|
||||
var element, container;
|
||||
if (!name || !(element = document.getElementById(name)) ||
|
||||
!(container = element.parentNode)) {
|
||||
throw new Error('Not enough parameters.');
|
||||
} else if (this.overlays[name]) {
|
||||
throw new Error('The overlay is already registered.');
|
||||
}
|
||||
this.overlays[name] = { element: element,
|
||||
container: container,
|
||||
callerCloseMethod: (callerCloseMethod || null),
|
||||
canForceClose: (canForceClose || false) };
|
||||
resolve();
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {string} name The name of the overlay that is unregistered.
|
||||
* @returns {Promise} A promise that is resolved when the overlay has been
|
||||
* unregistered.
|
||||
*/
|
||||
unregister: function overlayManagerUnregister(name) {
|
||||
return new Promise(function (resolve) {
|
||||
if (!this.overlays[name]) {
|
||||
throw new Error('The overlay does not exist.');
|
||||
} else if (this.active === name) {
|
||||
throw new Error('The overlay cannot be removed while it is active.');
|
||||
}
|
||||
delete this.overlays[name];
|
||||
|
||||
resolve();
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {string} name The name of the overlay that should be opened.
|
||||
* @returns {Promise} A promise that is resolved when the overlay has been
|
||||
* opened.
|
||||
*/
|
||||
open: function overlayManagerOpen(name) {
|
||||
return new Promise(function (resolve) {
|
||||
if (!this.overlays[name]) {
|
||||
throw new Error('The overlay does not exist.');
|
||||
} else if (this.active) {
|
||||
if (this.overlays[name].canForceClose) {
|
||||
this._closeThroughCaller();
|
||||
} else if (this.active === name) {
|
||||
throw new Error('The overlay is already active.');
|
||||
} else {
|
||||
throw new Error('Another overlay is currently active.');
|
||||
}
|
||||
}
|
||||
this.active = name;
|
||||
this.overlays[this.active].element.classList.remove('hidden');
|
||||
this.overlays[this.active].container.classList.remove('hidden');
|
||||
|
||||
window.addEventListener('keydown', this._keyDown);
|
||||
resolve();
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {string} name The name of the overlay that should be closed.
|
||||
* @returns {Promise} A promise that is resolved when the overlay has been
|
||||
* closed.
|
||||
*/
|
||||
close: function overlayManagerClose(name) {
|
||||
return new Promise(function (resolve) {
|
||||
if (!this.overlays[name]) {
|
||||
throw new Error('The overlay does not exist.');
|
||||
} else if (!this.active) {
|
||||
throw new Error('The overlay is currently not active.');
|
||||
} else if (this.active !== name) {
|
||||
throw new Error('Another overlay is currently active.');
|
||||
}
|
||||
this.overlays[this.active].container.classList.add('hidden');
|
||||
this.overlays[this.active].element.classList.add('hidden');
|
||||
this.active = null;
|
||||
|
||||
window.removeEventListener('keydown', this._keyDown);
|
||||
resolve();
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_keyDown: function overlayManager_keyDown(evt) {
|
||||
var self = OverlayManager;
|
||||
if (self.active && evt.keyCode === 27) { // Esc key.
|
||||
self._closeThroughCaller();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_closeThroughCaller: function overlayManager_closeThroughCaller() {
|
||||
if (this.overlays[this.active].callerCloseMethod) {
|
||||
this.overlays[this.active].callerCloseMethod();
|
||||
}
|
||||
if (this.active) {
|
||||
this.close(this.active);
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -14,22 +14,21 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
/* globals PDFJS, mozL10n */
|
||||
/* globals PDFJS, mozL10n, OverlayManager */
|
||||
|
||||
'use strict';
|
||||
|
||||
var PasswordPrompt = {
|
||||
visible: false,
|
||||
overlayName: null,
|
||||
updatePassword: null,
|
||||
reason: null,
|
||||
overlayContainer: null,
|
||||
passwordField: null,
|
||||
passwordText: null,
|
||||
passwordSubmit: null,
|
||||
passwordCancel: null,
|
||||
|
||||
initialize: function secondaryToolbarInitialize(options) {
|
||||
this.overlayContainer = options.overlayContainer;
|
||||
this.overlayName = options.overlayName;
|
||||
this.passwordField = options.passwordField;
|
||||
this.passwordText = options.passwordText;
|
||||
this.passwordSubmit = options.passwordSubmit;
|
||||
@ -39,57 +38,43 @@ var PasswordPrompt = {
|
||||
this.passwordSubmit.addEventListener('click',
|
||||
this.verifyPassword.bind(this));
|
||||
|
||||
this.passwordCancel.addEventListener('click', this.hide.bind(this));
|
||||
this.passwordCancel.addEventListener('click', this.close.bind(this));
|
||||
|
||||
this.passwordField.addEventListener('keydown',
|
||||
function (e) {
|
||||
if (e.keyCode === 13) { // Enter key
|
||||
this.verifyPassword();
|
||||
}
|
||||
}.bind(this));
|
||||
this.passwordField.addEventListener('keydown', function (e) {
|
||||
if (e.keyCode === 13) { // Enter key
|
||||
this.verifyPassword();
|
||||
}
|
||||
}.bind(this));
|
||||
|
||||
window.addEventListener('keydown',
|
||||
function (e) {
|
||||
if (e.keyCode === 27) { // Esc key
|
||||
this.hide();
|
||||
}
|
||||
}.bind(this));
|
||||
OverlayManager.register(this.overlayName, this.close.bind(this), true);
|
||||
},
|
||||
|
||||
show: function passwordPromptShow() {
|
||||
if (this.visible) {
|
||||
return;
|
||||
}
|
||||
this.visible = true;
|
||||
this.overlayContainer.classList.remove('hidden');
|
||||
this.overlayContainer.firstElementChild.classList.remove('hidden');
|
||||
this.passwordField.focus();
|
||||
open: function passwordPromptOpen() {
|
||||
OverlayManager.open(this.overlayName).then(function () {
|
||||
this.passwordField.focus();
|
||||
|
||||
var promptString = mozL10n.get('password_label', null,
|
||||
'Enter the password to open this PDF file.');
|
||||
var promptString = mozL10n.get('password_label', null,
|
||||
'Enter the password to open this PDF file.');
|
||||
|
||||
if (this.reason === PDFJS.PasswordResponses.INCORRECT_PASSWORD) {
|
||||
promptString = mozL10n.get('password_invalid', null,
|
||||
'Invalid password. Please try again.');
|
||||
}
|
||||
if (this.reason === PDFJS.PasswordResponses.INCORRECT_PASSWORD) {
|
||||
promptString = mozL10n.get('password_invalid', null,
|
||||
'Invalid password. Please try again.');
|
||||
}
|
||||
|
||||
this.passwordText.textContent = promptString;
|
||||
this.passwordText.textContent = promptString;
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
hide: function passwordPromptClose() {
|
||||
if (!this.visible) {
|
||||
return;
|
||||
}
|
||||
this.visible = false;
|
||||
this.passwordField.value = '';
|
||||
this.overlayContainer.classList.add('hidden');
|
||||
this.overlayContainer.firstElementChild.classList.add('hidden');
|
||||
close: function passwordPromptClose() {
|
||||
OverlayManager.close(this.overlayName).then(function () {
|
||||
this.passwordField.value = '';
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
verifyPassword: function passwordPromptVerifyPassword() {
|
||||
var password = this.passwordField.value;
|
||||
if (password && password.length > 0) {
|
||||
this.hide();
|
||||
this.close();
|
||||
return this.updatePassword(password);
|
||||
}
|
||||
}
|
||||
|
||||
@ -114,7 +114,7 @@ var SecondaryToolbar = {
|
||||
},
|
||||
|
||||
documentPropertiesClick: function secondaryToolbarDocumentPropsClick(evt) {
|
||||
this.documentProperties.show();
|
||||
this.documentProperties.open();
|
||||
this.close();
|
||||
},
|
||||
|
||||
|
||||
@ -77,10 +77,11 @@ http://sourceforge.net/adobe/cmap/wiki/License/
|
||||
<script src="pdf_find_controller.js"></script>
|
||||
<script src="pdf_history.js"></script>
|
||||
<script src="secondary_toolbar.js"></script>
|
||||
<script src="password_prompt.js"></script>
|
||||
<script src="presentation_mode.js"></script>
|
||||
<script src="grab_to_pan.js"></script>
|
||||
<script src="hand_tool.js"></script>
|
||||
<script src="overlay_manager.js"></script>
|
||||
<script src="password_prompt.js"></script>
|
||||
<script src="document_properties.js"></script>
|
||||
<!--#endif-->
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
Preferences, SidebarView, ViewHistory, PageView, ThumbnailView, URL,
|
||||
noContextMenuHandler, SecondaryToolbar, PasswordPrompt,
|
||||
PresentationMode, HandTool, Promise, DocumentProperties,
|
||||
DocumentOutlineView, DocumentAttachmentsView */
|
||||
DocumentOutlineView, DocumentAttachmentsView, OverlayManager */
|
||||
|
||||
'use strict';
|
||||
|
||||
@ -100,9 +100,10 @@ var currentPageNumber = 1;
|
||||
//#include pdf_find_controller.js
|
||||
//#include pdf_history.js
|
||||
//#include secondary_toolbar.js
|
||||
//#include password_prompt.js
|
||||
//#include presentation_mode.js
|
||||
//#include hand_tool.js
|
||||
//#include overlay_manager.js
|
||||
//#include password_prompt.js
|
||||
//#include document_properties.js
|
||||
|
||||
var PDFView = {
|
||||
@ -183,14 +184,6 @@ var PDFView = {
|
||||
documentPropertiesButton: document.getElementById('documentProperties')
|
||||
});
|
||||
|
||||
PasswordPrompt.initialize({
|
||||
overlayContainer: document.getElementById('overlayContainer'),
|
||||
passwordField: document.getElementById('password'),
|
||||
passwordText: document.getElementById('passwordText'),
|
||||
passwordSubmit: document.getElementById('passwordSubmit'),
|
||||
passwordCancel: document.getElementById('passwordCancel')
|
||||
});
|
||||
|
||||
PresentationMode.initialize({
|
||||
container: container,
|
||||
secondaryToolbar: SecondaryToolbar,
|
||||
@ -200,8 +193,16 @@ var PDFView = {
|
||||
pageRotateCcw: document.getElementById('contextPageRotateCcw')
|
||||
});
|
||||
|
||||
PasswordPrompt.initialize({
|
||||
overlayName: 'passwordOverlay',
|
||||
passwordField: document.getElementById('password'),
|
||||
passwordText: document.getElementById('passwordText'),
|
||||
passwordSubmit: document.getElementById('passwordSubmit'),
|
||||
passwordCancel: document.getElementById('passwordCancel')
|
||||
});
|
||||
|
||||
DocumentProperties.initialize({
|
||||
overlayContainer: document.getElementById('overlayContainer'),
|
||||
overlayName: 'documentPropertiesOverlay',
|
||||
closeButton: document.getElementById('documentPropertiesClose'),
|
||||
fileNameField: document.getElementById('fileNameField'),
|
||||
fileSizeField: document.getElementById('fileSizeField'),
|
||||
@ -626,7 +627,7 @@ var PDFView = {
|
||||
var passwordNeeded = function passwordNeeded(updatePassword, reason) {
|
||||
PasswordPrompt.updatePassword = updatePassword;
|
||||
PasswordPrompt.reason = reason;
|
||||
PasswordPrompt.show();
|
||||
PasswordPrompt.open();
|
||||
};
|
||||
|
||||
function getDocumentProgress(progressData) {
|
||||
@ -2165,7 +2166,7 @@ window.addEventListener('click', function click(evt) {
|
||||
}, false);
|
||||
|
||||
window.addEventListener('keydown', function keydown(evt) {
|
||||
if (PasswordPrompt.visible) {
|
||||
if (OverlayManager.active) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user