12 changed files with 284 additions and 318 deletions
@ -0,0 +1,252 @@
@@ -0,0 +1,252 @@
|
||||
/* -*- 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 PDFJS, Util, AnnotationType */ |
||||
|
||||
'use strict'; |
||||
|
||||
var HIGHLIGHT_OFFSET = 4; // px
|
||||
var ANNOT_MIN_SIZE = 10; // px
|
||||
|
||||
var AnnotationUtils = (function AnnotationUtilsClosure() { |
||||
// TODO(mack): This dupes some of the logic in CanvasGraphics.setFont()
|
||||
function setTextStyles(element, item, fontObj) { |
||||
|
||||
var style = element.style; |
||||
style.fontSize = item.fontSize + 'px'; |
||||
style.direction = item.fontDirection < 0 ? 'rtl': 'ltr'; |
||||
|
||||
if (!fontObj) { |
||||
return; |
||||
} |
||||
|
||||
style.fontWeight = fontObj.black ? |
||||
(fontObj.bold ? 'bolder' : 'bold') : |
||||
(fontObj.bold ? 'bold' : 'normal'); |
||||
style.fontStyle = fontObj.italic ? 'italic' : 'normal'; |
||||
|
||||
var fontName = fontObj.loadedName; |
||||
var fontFamily = fontName ? '"' + fontName + '", ' : ''; |
||||
// Use a reasonable default font if the font doesn't specify a fallback
|
||||
var fallbackName = fontObj.fallbackName || 'Helvetica, sans-serif'; |
||||
style.fontFamily = fontFamily + fallbackName; |
||||
} |
||||
|
||||
// TODO(mack): Remove this, it's not really that helpful.
|
||||
function getEmptyContainer(tagName, rect, borderWidth) { |
||||
var bWidth = borderWidth || 0; |
||||
var element = document.createElement(tagName); |
||||
element.style.borderWidth = bWidth + 'px'; |
||||
var width = rect[2] - rect[0] - 2 * bWidth; |
||||
var height = rect[3] - rect[1] - 2 * bWidth; |
||||
element.style.width = width + 'px'; |
||||
element.style.height = height + 'px'; |
||||
return element; |
||||
} |
||||
|
||||
function initContainer(item) { |
||||
var container = getEmptyContainer('section', item.rect, item.borderWidth); |
||||
container.style.backgroundColor = item.color; |
||||
|
||||
var color = item.color; |
||||
var rgb = []; |
||||
for (var i = 0; i < 3; ++i) { |
||||
rgb[i] = Math.round(color[i] * 255); |
||||
} |
||||
item.colorCssRgb = Util.makeCssRgb(rgb); |
||||
|
||||
var highlight = document.createElement('div'); |
||||
highlight.className = 'annotationHighlight'; |
||||
highlight.style.left = highlight.style.top = -HIGHLIGHT_OFFSET + 'px'; |
||||
highlight.style.right = highlight.style.bottom = -HIGHLIGHT_OFFSET + 'px'; |
||||
highlight.setAttribute('hidden', true); |
||||
|
||||
item.highlightElement = highlight; |
||||
container.appendChild(item.highlightElement); |
||||
|
||||
return container; |
||||
} |
||||
|
||||
function getHtmlElementForTextWidgetAnnotation(item, commonObjs) { |
||||
var element = getEmptyContainer('div', item.rect, 0); |
||||
element.style.display = 'table'; |
||||
|
||||
var content = document.createElement('div'); |
||||
content.textContent = item.fieldValue; |
||||
var textAlignment = item.textAlignment; |
||||
content.style.textAlign = ['left', 'center', 'right'][textAlignment]; |
||||
content.style.verticalAlign = 'middle'; |
||||
content.style.display = 'table-cell'; |
||||
|
||||
var fontObj = item.fontRefName ? |
||||
commonObjs.getData(item.fontRefName) : null; |
||||
setTextStyles(content, item, fontObj); |
||||
|
||||
element.appendChild(content); |
||||
|
||||
return element; |
||||
} |
||||
|
||||
function getHtmlElementForTextAnnotation(item, commonObjs) { |
||||
var rect = item.rect; |
||||
|
||||
// sanity check because of OOo-generated PDFs
|
||||
if ((rect[3] - rect[1]) < ANNOT_MIN_SIZE) { |
||||
rect[3] = rect[1] + ANNOT_MIN_SIZE; |
||||
} |
||||
if ((rect[2] - rect[0]) < ANNOT_MIN_SIZE) { |
||||
rect[2] = rect[0] + (rect[3] - rect[1]); // make it square
|
||||
} |
||||
|
||||
var container = initContainer(item); |
||||
container.className = 'annotText'; |
||||
|
||||
var image = document.createElement('img'); |
||||
image.style.height = container.style.height; |
||||
image.style.width = container.style.width; |
||||
var iconName = item.name; |
||||
image.src = PDFJS.imageResourcesPath + 'annotation-' + |
||||
iconName.toLowerCase() + '.svg'; |
||||
image.alt = '[{{type}} Annotation]'; |
||||
image.dataset.l10nId = 'text_annotation_type'; |
||||
image.dataset.l10nArgs = JSON.stringify({type: iconName}); |
||||
|
||||
var contentWrapper = document.createElement('div'); |
||||
contentWrapper.className = 'annotTextContentWrapper'; |
||||
contentWrapper.style.left = Math.floor(rect[2] - rect[0] + 5) + 'px'; |
||||
contentWrapper.style.top = '-10px'; |
||||
|
||||
var content = document.createElement('div'); |
||||
content.className = 'annotTextContent'; |
||||
content.setAttribute('hidden', true); |
||||
|
||||
var i, ii; |
||||
if (item.hasBgColor) { |
||||
var color = item.color; |
||||
var rgb = []; |
||||
for (i = 0; i < 3; ++i) { |
||||
// Enlighten the color (70%)
|
||||
var c = Math.round(color[i] * 255); |
||||
rgb[i] = Math.round((255 - c) * 0.7) + c; |
||||
} |
||||
content.style.backgroundColor = Util.makeCssRgb(rgb); |
||||
} |
||||
|
||||
var title = document.createElement('h1'); |
||||
var text = document.createElement('p'); |
||||
title.textContent = item.title; |
||||
|
||||
if (!item.content && !item.title) { |
||||
content.setAttribute('hidden', true); |
||||
} else { |
||||
var e = document.createElement('span'); |
||||
var lines = item.content.split(/(?:\r\n?|\n)/); |
||||
for (i = 0, ii = lines.length; i < ii; ++i) { |
||||
var line = lines[i]; |
||||
e.appendChild(document.createTextNode(line)); |
||||
if (i < (ii - 1)) { |
||||
e.appendChild(document.createElement('br')); |
||||
} |
||||
} |
||||
text.appendChild(e); |
||||
|
||||
var pinned = false; |
||||
|
||||
var showAnnotation = function showAnnotation(pin) { |
||||
if (pin) { |
||||
pinned = true; |
||||
} |
||||
if (content.hasAttribute('hidden')) { |
||||
container.style.zIndex += 1; |
||||
content.removeAttribute('hidden'); |
||||
} |
||||
}; |
||||
|
||||
var hideAnnotation = function hideAnnotation(unpin) { |
||||
if (unpin) { |
||||
pinned = false; |
||||
} |
||||
if (!content.hasAttribute('hidden') && !pinned) { |
||||
container.style.zIndex -= 1; |
||||
content.setAttribute('hidden', true); |
||||
} |
||||
}; |
||||
|
||||
var toggleAnnotation = function toggleAnnotation() { |
||||
if (pinned) { |
||||
hideAnnotation(true); |
||||
} else { |
||||
showAnnotation(true); |
||||
} |
||||
}; |
||||
|
||||
image.addEventListener('click', function image_clickHandler() { |
||||
toggleAnnotation(); |
||||
}, false); |
||||
image.addEventListener('mouseover', function image_mouseOverHandler() { |
||||
showAnnotation(); |
||||
}, false); |
||||
image.addEventListener('mouseout', function image_mouseOutHandler() { |
||||
hideAnnotation(); |
||||
}, false); |
||||
|
||||
content.addEventListener('click', function content_clickHandler() { |
||||
hideAnnotation(true); |
||||
}, false); |
||||
} |
||||
|
||||
content.appendChild(title); |
||||
content.appendChild(text); |
||||
contentWrapper.appendChild(content); |
||||
container.appendChild(image); |
||||
container.appendChild(contentWrapper); |
||||
|
||||
return container; |
||||
} |
||||
|
||||
function getHtmlElementForLinkAnnotation(item, commonObjs) { |
||||
|
||||
var container = initContainer(item); |
||||
container.className = 'annotLink'; |
||||
|
||||
container.style.borderColor = item.colorCssRgb; |
||||
container.style.borderStyle = 'solid'; |
||||
|
||||
var link = document.createElement('a'); |
||||
link.href = link.title = item.url || ''; |
||||
|
||||
container.appendChild(link); |
||||
|
||||
return container; |
||||
} |
||||
|
||||
function getHtmlElement(data, objs) { |
||||
switch (data.annotationType) { |
||||
case AnnotationType.WIDGET: |
||||
return getHtmlElementForTextWidgetAnnotation(data, objs); |
||||
case AnnotationType.TEXT: |
||||
return getHtmlElementForTextAnnotation(data, objs); |
||||
case AnnotationType.LINK: |
||||
return getHtmlElementForLinkAnnotation(data, objs); |
||||
default: |
||||
throw new Error('Unsupported annotationType: ' + data.annotationType); |
||||
} |
||||
} |
||||
|
||||
return { |
||||
getHtmlElement: getHtmlElement |
||||
}; |
||||
})(); |
Loading…
Reference in new issue