ngx-extended-pdf-viewer
Version:
Embedding PDF files in your Angular application. Highly configurable viewer including the toolbar, sidebar, and all the features you're used to.
65 lines • 10.5 kB
JavaScript
import { pdfDefaultOptions } from '../options/pdf-default-options';
export class PositioningService {
static DOORHANGER_OFFSET = 17;
static TOOLBAR_MARGIN = 4;
positionPopupBelowItsButton(buttonId, popupId) {
if (!pdfDefaultOptions.positionPopupDialogsWithJavaScript) {
return;
}
setTimeout(() => {
const button = this.findVisibleButton(buttonId);
const popup = this.getPopupElement(popupId);
if (!button || !popup)
return;
this.applyPopupPositioning(button, popup);
});
}
findVisibleButton(buttonId) {
const findVisible = (selector) => Array.from(document.querySelectorAll(`#${selector}`)).find((el) => el.offsetParent !== null);
return findVisible(buttonId) || findVisible('secondaryToolbarToggle') || null;
}
getPopupElement(popupId) {
const popup = document.querySelector(`#${popupId}`);
return popup?.offsetParent ? popup : null;
}
applyPopupPositioning(button, popup) {
const popupContainer = popup.offsetParent;
const buttonRect = button.getBoundingClientRect();
const containerRect = popupContainer.getBoundingClientRect();
const isRTL = document.documentElement.getAttribute('dir') === 'rtl';
let isRightAligned = isRTL;
if (popup.classList.contains('doorHangerRight')) {
isRightAligned = !isRTL;
}
this.setBasicPopupStyles(popup, isRightAligned);
this.setHorizontalPosition(popup, buttonRect, containerRect, isRightAligned);
this.setVerticalPosition(popup, containerRect);
}
setBasicPopupStyles(popup, isRightAligned) {
Object.assign(popup.style, {
position: 'absolute',
display: 'block',
transformOrigin: isRightAligned ? 'top right' : 'top left',
});
}
setHorizontalPosition(popup, buttonRect, containerRect, isRightAligned) {
const centerOffset = buttonRect.width / 2 - PositioningService.DOORHANGER_OFFSET;
if (!isRightAligned) {
popup.style.left = `${buttonRect.left - containerRect.left + centerOffset}px`;
popup.style.right = '';
}
else {
popup.style.right = `${containerRect.right - buttonRect.right + centerOffset}px`;
popup.style.left = '';
}
}
setVerticalPosition(popup, containerRect) {
const toolbarContainer = document.querySelector('#toolbarContainer');
if (!toolbarContainer)
return;
const toolbarRect = toolbarContainer.getBoundingClientRect();
const top = toolbarRect.bottom - containerRect.top + PositioningService.TOOLBAR_MARGIN;
popup.style.top = `${top}px`;
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicG9zaXRpb25pbmcuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1leHRlbmRlZC1wZGYtdmlld2VyL3NyYy9saWIvZHluYW1pYy1jc3MvcG9zaXRpb25pbmcuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUVuRSxNQUFNLE9BQU8sa0JBQWtCO0lBQ3JCLE1BQU0sQ0FBVSxpQkFBaUIsR0FBRyxFQUFFLENBQUM7SUFDdkMsTUFBTSxDQUFVLGNBQWMsR0FBRyxDQUFDLENBQUM7SUFFcEMsMkJBQTJCLENBQUMsUUFBZ0IsRUFBRSxPQUFlO1FBQ2xFLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxrQ0FBa0MsRUFBRTtZQUN6RCxPQUFPO1NBQ1I7UUFFRCxVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsTUFBTSxNQUFNLEdBQUcsSUFBSSxDQUFDLGlCQUFpQixDQUFDLFFBQVEsQ0FBQyxDQUFDO1lBQ2hELE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxlQUFlLENBQUMsT0FBTyxDQUFDLENBQUM7WUFFNUMsSUFBSSxDQUFDLE1BQU0sSUFBSSxDQUFDLEtBQUs7Z0JBQUUsT0FBTztZQUU5QixJQUFJLENBQUMscUJBQXFCLENBQUMsTUFBTSxFQUFFLEtBQUssQ0FBQyxDQUFDO1FBQzVDLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVPLGlCQUFpQixDQUFDLFFBQWdCO1FBQ3hDLE1BQU0sV0FBVyxHQUFHLENBQUMsUUFBZ0IsRUFBRSxFQUFFLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsZ0JBQWdCLENBQWMsSUFBSSxRQUFRLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsRUFBRSxFQUFFLEVBQUUsQ0FBQyxFQUFFLENBQUMsWUFBWSxLQUFLLElBQUksQ0FBQyxDQUFD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QUksQ0FBQztJQUMvQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgcGRmRGVmYXVsdE9wdGlvbnMgfSBmcm9tICcuLi9vcHRpb25zL3BkZi1kZWZhdWx0LW9wdGlvbnMnO1xuXG5leHBvcnQgY2xhc3MgUG9zaXRpb25pbmdTZXJ2aWNlIHtcbiAgcHJpdmF0ZSBzdGF0aWMgcmVhZG9ubHkgRE9PUkhBTkdFUl9PRkZTRVQgPSAxNztcbiAgcHJpdmF0ZSBzdGF0aWMgcmVhZG9ubHkgVE9PTEJBUl9NQVJHSU4gPSA0O1xuXG4gIHB1YmxpYyBwb3NpdGlvblBvcHVwQmVsb3dJdHNCdXR0b24oYnV0dG9uSWQ6IHN0cmluZywgcG9wdXBJZDogc3RyaW5nKTogdm9pZCB7XG4gICAgaWYgKCFwZGZEZWZhdWx0T3B0aW9ucy5wb3NpdGlvblBvcHVwRGlhbG9nc1dpdGhKYXZhU2NyaXB0KSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICBjb25zdCBidXR0b24gPSB0aGlzLmZpbmRWaXNpYmxlQnV0dG9uKGJ1dHRvbklkKTtcbiAgICAgIGNvbnN0IHBvcHVwID0gdGhpcy5nZXRQb3B1cEVsZW1lbnQocG9wdXBJZCk7XG5cbiAgICAgIGlmICghYnV0dG9uIHx8ICFwb3B1cCkgcmV0dXJuO1xuXG4gICAgICB0aGlzLmFwcGx5UG9wdXBQb3NpdGlvbmluZyhidXR0b24sIHBvcHVwKTtcbiAgICB9KTtcbiAgfVxuXG4gIHByaXZhdGUgZmluZFZpc2libGVCdXR0b24oYnV0dG9uSWQ6IHN0cmluZyk6IEhUTUxFbGVtZW50IHwgbnVsbCB7XG4gICAgY29uc3QgZmluZFZpc2libGUgPSAoc2VsZWN0b3I6IHN0cmluZykgPT4gQXJyYXkuZnJvbShkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsPEhUTUxFbGVtZW50PihgIyR7c2VsZWN0b3J9YCkpLmZpbmQoKGVsKSA9PiBlbC5vZmZzZXRQYXJlbnQgIT09IG51bGwpO1xuXG4gICAgcmV0dXJuIGZpbmRWaXNpYmxlKGJ1dHRvbklkKSB8fCBmaW5kVmlzaWJsZSgnc2Vjb25kYXJ5VG9vbGJhclRvZ2dsZScpIHx8IG51bGw7XG4gIH1cblxuICBwcml2YXRlIGdldFBvcHVwRWxlbWVudChwb3B1cElkOiBzdHJpbmcpOiBIVE1MRWxlbWVudCB8IG51bGwge1xuICAgIGNvbnN0IHBvcHVwID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcjxIVE1MRWxlbWVudD4oYCMke3BvcHVwSWR9YCk7XG4gICAgcmV0dXJuIHBvcHVwPy5vZmZzZXRQYXJlbnQgPyBwb3B1cCA6IG51bGw7XG4gIH1cblxuICBwcml2YXRlIGFwcGx5UG9wdXBQb3NpdGlvbmluZyhidXR0b246IEhUTUxFbGVtZW50LCBwb3B1cDogSFRNTEVsZW1lbnQpOiB2b2lkIHtcbiAgICBjb25zdCBwb3B1cENvbnRhaW5lciA9IHBvcHVwLm9mZnNldFBhcmVudCBhcyBIVE1MRWxlbWVudDtcbiAgICBjb25zdCBidXR0b25SZWN0ID0gYnV0dG9uLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xuICAgIGNvbnN0IGNvbnRhaW5lclJlY3QgPSBwb3B1cENvbnRhaW5lci5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTtcblxuICAgIGNvbnN0IGlzUlRMID0gZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LmdldEF0dHJpYnV0ZSgnZGlyJykgPT09ICdydGwnO1xuICAgIGxldCBpc1JpZ2h0QWxpZ25lZCA9IGlzUlRMO1xuICAgIGlmIChwb3B1cC5jbGFzc0xpc3QuY29udGFpbnMoJ2Rvb3JIYW5nZXJSaWdodCcpKSB7XG4gICAgICBpc1JpZ2h0QWxpZ25lZCA9ICFpc1JUTDtcbiAgICB9XG5cbiAgICB0aGlzLnNldEJhc2ljUG9wdXBTdHlsZXMocG9wdXAsIGlzUmlnaHRBbGlnbmVkKTtcbiAgICB0aGlzLnNldEhvcml6b250YWxQb3NpdGlvbihwb3B1cCwgYnV0dG9uUmVjdCwgY29udGFpbmVyUmVjdCwgaXNSaWdodEFsaWduZWQpO1xuICAgIHRoaXMuc2V0VmVydGljYWxQb3NpdGlvbihwb3B1cCwgY29udGFpbmVyUmVjdCk7XG4gIH1cblxuICBwcml2YXRlIHNldEJhc2ljUG9wdXBTdHlsZXMocG9wdXA6IEhUTUxFbGVtZW50LCBpc1JpZ2h0QWxpZ25lZDogYm9vbGVhbik6IHZvaWQge1xuICAgIE9iamVjdC5hc3NpZ24ocG9wdXAuc3R5bGUsIHtcbiAgICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgICAgZGlzcGxheTogJ2Jsb2NrJyxcbiAgICAgIHRyYW5zZm9ybU9yaWdpbjogaXNSaWdodEFsaWduZWQgPyAndG9wIHJpZ2h0JyA6ICd0b3AgbGVmdCcsXG4gICAgfSk7XG4gIH1cblxuICBwcml2YXRlIHNldEhvcml6b250YWxQb3NpdGlvbihwb3B1cDogSFRNTEVsZW1lbnQsIGJ1dHRvblJlY3Q6IERPTVJlY3QsIGNvbnRhaW5lclJlY3Q6IERPTVJlY3QsIGlzUmlnaHRBbGlnbmVkOiBib29sZWFuKTogdm9pZCB7XG4gICAgY29uc3QgY2VudGVyT2Zmc2V0ID0gYnV0dG9uUmVjdC53aWR0aCAvIDIgLSBQb3NpdGlvbmluZ1NlcnZpY2UuRE9PUkhBTkdFUl9PRkZTRVQ7XG5cbiAgICBpZiAoIWlzUmlnaHRBbGlnbmVkKSB7XG4gICAgICBwb3B1cC5zdHlsZS5sZWZ0ID0gYCR7YnV0dG9uUmVjdC5sZWZ0IC0gY29udGFpbmVyUmVjdC5sZWZ0ICsgY2VudGVyT2Zmc2V0fXB4YDtcbiAgICAgIHBvcHVwLnN0eWxlLnJpZ2h0ID0gJyc7XG4gICAgfSBlbHNlIHtcbiAgICAgIHBvcHVwLnN0eWxlLnJpZ2h0ID0gYCR7Y29udGFpbmVyUmVjdC5yaWdodCAtIGJ1dHRvblJlY3QucmlnaHQgKyBjZW50ZXJPZmZzZXR9cHhgO1xuICAgICAgcG9wdXAuc3R5bGUubGVmdCA9ICcnO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgc2V0VmVydGljYWxQb3NpdGlvbihwb3B1cDogSFRNTEVsZW1lbnQsIGNvbnRhaW5lclJlY3Q6IERPTVJlY3QpOiB2b2lkIHtcbiAgICBjb25zdCB0b29sYmFyQ29udGFpbmVyID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcjxIVE1MRWxlbWVudD4oJyN0b29sYmFyQ29udGFpbmVyJyk7XG4gICAgaWYgKCF0b29sYmFyQ29udGFpbmVyKSByZXR1cm47XG5cbiAgICBjb25zdCB0b29sYmFyUmVjdCA9IHRvb2xiYXJDb250YWluZXIuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XG4gICAgY29uc3QgdG9wID0gdG9vbGJhclJlY3QuYm90dG9tIC0gY29udGFpbmVyUmVjdC50b3AgKyBQb3NpdGlvbmluZ1NlcnZpY2UuVE9PTEJBUl9NQVJHSU47XG4gICAgcG9wdXAuc3R5bGUudG9wID0gYCR7dG9wfXB4YDtcbiAgfVxufVxuIl19