From d36c46b2c9b0dc526804aacea97609f2fdd49dad Mon Sep 17 00:00:00 2001 From: Tim van der Meij Date: Sun, 31 Dec 2017 13:51:51 +0100 Subject: [PATCH] Remove the `CustomStyle` class It is only used in a few places to handle prefixing style properties if necessary. However, we used it only for `transform`, `transformOrigin` and `borderRadius`, which according to Can I Use are supported natively (unprefixed) in the browsers that PDF.js 2.0 supports. Therefore, we can remove this class, which should help performance too since this avoids extra function calls in parts of the code that are called often. --- src/display/annotation_layer.js | 21 ++++++------- src/display/dom_utils.js | 55 --------------------------------- src/display/global.js | 3 +- src/display/text_layer.js | 9 +++--- src/pdf.js | 1 - web/pdf_page_view.js | 16 +++++----- 6 files changed, 22 insertions(+), 83 deletions(-) diff --git a/src/display/annotation_layer.js b/src/display/annotation_layer.js index 8c3212fa4..ef3c106d3 100644 --- a/src/display/annotation_layer.js +++ b/src/display/annotation_layer.js @@ -14,8 +14,8 @@ */ import { - addLinkAttributes, CustomStyle, DOMSVGFactory, getDefaultSetting, - getFilenameFromUrl, LinkTarget + addLinkAttributes, DOMSVGFactory, getDefaultSetting, getFilenameFromUrl, + LinkTarget } from './dom_utils'; import { AnnotationBorderStyleType, AnnotationType, stringToPDFString, unreachable, @@ -153,10 +153,8 @@ class AnnotationElement { page.view[3] - data.rect[3] + page.view[1] ]); - CustomStyle.setProp('transform', container, - 'matrix(' + viewport.transform.join(',') + ')'); - CustomStyle.setProp('transformOrigin', container, - -rect[0] + 'px ' + -rect[1] + 'px'); + container.style.transform = 'matrix(' + viewport.transform.join(',') + ')'; + container.style.transformOrigin = -rect[0] + 'px ' + -rect[1] + 'px'; if (!ignoreBorder && data.borderStyle.width > 0) { container.style.borderWidth = data.borderStyle.width + 'px'; @@ -172,7 +170,7 @@ class AnnotationElement { let verticalRadius = data.borderStyle.verticalCornerRadius; if (horizontalRadius > 0 || verticalRadius > 0) { let radius = horizontalRadius + 'px / ' + verticalRadius + 'px'; - CustomStyle.setProp('borderRadius', container, radius); + container.style.borderRadius = radius; } switch (data.borderStyle.style) { @@ -652,9 +650,8 @@ class PopupAnnotationElement extends AnnotationElement { // PDF viewers ignore a popup annotation's rectangle. let parentLeft = parseFloat(parentElement.style.left); let parentWidth = parseFloat(parentElement.style.width); - CustomStyle.setProp('transformOrigin', this.container, - -(parentLeft + parentWidth) + 'px -' + - parentElement.style.top); + this.container.style.transformOrigin = + -(parentLeft + parentWidth) + 'px -' + parentElement.style.top; this.container.style.left = (parentLeft + parentWidth) + 'px'; this.container.appendChild(popup.render()); @@ -1235,8 +1232,8 @@ class AnnotationLayer { let element = parameters.div.querySelector( '[data-annotation-id="' + data.id + '"]'); if (element) { - CustomStyle.setProp('transform', element, - 'matrix(' + parameters.viewport.transform.join(',') + ')'); + element.style.transform = + 'matrix(' + parameters.viewport.transform.join(',') + ')'; } } parameters.div.removeAttribute('hidden'); diff --git a/src/display/dom_utils.js b/src/display/dom_utils.js index 894addde7..9c12d3c32 100644 --- a/src/display/dom_utils.js +++ b/src/display/dom_utils.js @@ -261,60 +261,6 @@ class SimpleXMLParser { } } -/** - * Optimised CSS custom property getter/setter. - * @class - */ -var CustomStyle = (function CustomStyleClosure() { - - // As noted on: http://www.zachstronaut.com/posts/2009/02/17/ - // animate-css-transforms-firefox-webkit.html - // in some versions of IE9 it is critical that ms appear in this list - // before Moz - var prefixes = ['ms', 'Moz', 'Webkit', 'O']; - var _cache = Object.create(null); - - function CustomStyle() {} - - CustomStyle.getProp = function get(propName, element) { - // check cache only when no element is given - if (arguments.length === 1 && typeof _cache[propName] === 'string') { - return _cache[propName]; - } - - element = element || document.documentElement; - var style = element.style, prefixed, uPropName; - - // test standard property first - if (typeof style[propName] === 'string') { - return (_cache[propName] = propName); - } - - // capitalize - uPropName = propName.charAt(0).toUpperCase() + propName.slice(1); - - // test vendor specific properties - for (var i = 0, l = prefixes.length; i < l; i++) { - prefixed = prefixes[i] + uPropName; - if (typeof style[prefixed] === 'string') { - return (_cache[propName] = prefixed); - } - } - - // If all fails then set to undefined. - return (_cache[propName] = 'undefined'); - }; - - CustomStyle.setProp = function set(propName, element, str) { - var prop = this.getProp(propName); - if (prop !== 'undefined') { - element.style[prop] = str; - } - }; - - return CustomStyle; -})(); - var RenderingCancelledException = (function RenderingCancelledException() { function RenderingCancelledException(msg, type) { this.message = msg; @@ -543,7 +489,6 @@ class DummyStatTimer { } export { - CustomStyle, RenderingCancelledException, addLinkAttributes, isExternalLinkTargetSet, diff --git a/src/display/global.js b/src/display/global.js index a09b7be1a..885781cd6 100644 --- a/src/display/global.js +++ b/src/display/global.js @@ -14,7 +14,7 @@ */ import { - addLinkAttributes, CustomStyle, DEFAULT_LINK_REL, getFilenameFromUrl, + addLinkAttributes, DEFAULT_LINK_REL, getFilenameFromUrl, isExternalLinkTargetSet, isValidUrl, LinkTarget } from './dom_utils'; import { @@ -243,7 +243,6 @@ PDFJS.LoopbackPort = LoopbackPort; PDFJS.PDFDataRangeTransport = PDFDataRangeTransport; PDFJS.PDFWorker = PDFWorker; -PDFJS.CustomStyle = CustomStyle; PDFJS.LinkTarget = LinkTarget; PDFJS.addLinkAttributes = addLinkAttributes; PDFJS.getFilenameFromUrl = getFilenameFromUrl; diff --git a/src/display/text_layer.js b/src/display/text_layer.js index ddd9b6917..4362fa7b4 100644 --- a/src/display/text_layer.js +++ b/src/display/text_layer.js @@ -14,7 +14,7 @@ */ import { AbortException, createPromiseCapability, Util } from '../shared/util'; -import { CustomStyle, getDefaultSetting } from './dom_utils'; +import { getDefaultSetting } from './dom_utils'; /** * Text layer render parameters. @@ -547,7 +547,7 @@ var renderTextLayer = (function renderTextLayerClosure() { } if (transform !== '') { textDivProperties.originalTransform = transform; - CustomStyle.setProp('transform', textDiv, transform); + textDiv.style.transform = transform; } this._textDivProperties.set(textDiv, textDivProperties); textLayerFrag.appendChild(textDiv); @@ -653,12 +653,11 @@ var renderTextLayer = (function renderTextLayerClosure() { div.setAttribute('style', divProperties.style + padding); } if (transform !== '') { - CustomStyle.setProp('transform', div, transform); + div.style.transform = transform; } } else { div.style.padding = 0; - CustomStyle.setProp('transform', div, - divProperties.originalTransform || ''); + div.style.transform = divProperties.originalTransform || ''; } } }, diff --git a/src/pdf.js b/src/pdf.js index 2f8728ae7..0d7ed0ca3 100644 --- a/src/pdf.js +++ b/src/pdf.js @@ -53,7 +53,6 @@ exports.PDFDataRangeTransport = pdfjsDisplayAPI.PDFDataRangeTransport; exports.PDFWorker = pdfjsDisplayAPI.PDFWorker; exports.renderTextLayer = pdfjsDisplayTextLayer.renderTextLayer; exports.AnnotationLayer = pdfjsDisplayAnnotationLayer.AnnotationLayer; -exports.CustomStyle = pdfjsDisplayDOMUtils.CustomStyle; exports.createPromiseCapability = pdfjsSharedUtil.createPromiseCapability; exports.PasswordResponses = pdfjsSharedUtil.PasswordResponses; exports.InvalidPDFException = pdfjsSharedUtil.InvalidPDFException; diff --git a/web/pdf_page_view.js b/web/pdf_page_view.js index 18c4cf848..50e1ac1a3 100644 --- a/web/pdf_page_view.js +++ b/web/pdf_page_view.js @@ -18,8 +18,7 @@ import { RendererType, roundToDivide } from './ui_utils'; import { - createPromiseCapability, CustomStyle, PDFJS, RenderingCancelledException, - SVGGraphics + createPromiseCapability, PDFJS, RenderingCancelledException, SVGGraphics } from 'pdfjs-lib'; import { getGlobalEventBus } from './dom_events'; import { RenderingStates } from './pdf_rendering_queue'; @@ -280,7 +279,7 @@ class PDFPageView { } let cssTransform = 'rotate(' + relativeRotation + 'deg) ' + 'scale(' + scaleX + ',' + scaleY + ')'; - CustomStyle.setProp('transform', target, cssTransform); + target.style.transform = cssTransform; if (this.textLayer) { // Rotating the text layer is more complicated since the divs inside the @@ -317,11 +316,12 @@ class PDFPageView { console.error('Bad rotation value.'); break; } - CustomStyle.setProp('transform', textLayerDiv, - 'rotate(' + textAbsRotation + 'deg) ' + - 'scale(' + scale + ', ' + scale + ') ' + - 'translate(' + transX + ', ' + transY + ')'); - CustomStyle.setProp('transformOrigin', textLayerDiv, '0% 0%'); + + textLayerDiv.style.transform = + 'rotate(' + textAbsRotation + 'deg) ' + + 'scale(' + scale + ', ' + scale + ') ' + + 'translate(' + transX + ', ' + transY + ')'; + textLayerDiv.style.transformOrigin = '0% 0%'; } if (redrawAnnotations && this.annotationLayer) {