From 4a661e17353d231b81aa7e1b50eba2e840d26c79 Mon Sep 17 00:00:00 2001 From: Saebekassebil Date: Wed, 21 Dec 2011 23:22:07 +0100 Subject: [PATCH 1/4] Implemented Comment and Check annotation. Correcting some typos in last commit --- src/core.js | 18 +++++++++++++++--- web/images/check.svg | 3 +++ web/images/comment.svg | 3 +++ web/viewer.css | 33 +++++++++++++++++++++++++++++++++ web/viewer.js | 42 ++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 96 insertions(+), 3 deletions(-) create mode 100644 web/images/check.svg create mode 100644 web/images/comment.svg diff --git a/src/core.js b/src/core.js index 71c18f178..f78b4f7ec 100644 --- a/src/core.js +++ b/src/core.js @@ -323,10 +323,10 @@ var Page = (function PageClosure() { if (a) { switch (a.get('S').name) { case 'URI': - link.url = a.get('URI'); + item.url = a.get('URI'); break; case 'GoTo': - link.dest = a.get('D'); + item.dest = a.get('D'); break; default: TODO('other link types'); @@ -334,7 +334,7 @@ var Page = (function PageClosure() { } else if (annotation.has('Dest')) { // simple destination link var dest = annotation.get('Dest'); - link.dest = isName(dest) ? dest.name : dest; + item.dest = isName(dest) ? dest.name : dest; } break; case 'Widget': @@ -379,6 +379,18 @@ var Page = (function PageClosure() { item.textAlignment = getInheritableProperty(annotation, 'Q'); item.flags = getInheritableProperty(annotation, 'Ff') || 0; break; + + case 'Text': + var content = annotation.get('Contents'); + var title = annotation.get('T'); + item.content = (typeof content == 'string') ? stringToPDFString(content) : null; + item.title = (typeof title == 'string') ? stringToPDFString(title) : null; + item.name = annotation.get('Name').name; + break; + + default: + TODO('unimplemented annotation type: ' + subtype.name); + break; } items.push(item); } diff --git a/web/images/check.svg b/web/images/check.svg new file mode 100644 index 000000000..e0e1590a9 --- /dev/null +++ b/web/images/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/images/comment.svg b/web/images/comment.svg new file mode 100644 index 000000000..84feef1c8 --- /dev/null +++ b/web/images/comment.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/viewer.css b/web/viewer.css index a1ef92810..3cfb163b0 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -247,6 +247,39 @@ canvas { line-height:1.3; } +.annotComment > div { + position: absolute; +} + +.annotComment > .annotImageComment { + background: transparent url('./images/text.svg') no-repeat left top; + background-size: 75% 75%; +} + +.annotComment > .annotImageCheck { + background: transparent url('./images/check.svg') no-repeat left top; + background-size: 75% 75%; +} + +.annotComment > .annotImage:hover { + cursor: pointer; + opacity: 0.7; +} + +.annotComment > .annotDetails { + display: none; + padding: 0.2em; + max-width: 20em; + background-color: #F1E47B; +} + +.annotComment > .annotDetails > h1 { + font-weight: normal; + font-size: 1.2em; + border-bottom: 1px solid #000000; + margin: 0px; +} + /* TODO: file FF bug to support ::-moz-selection:window-inactive so we can override the opaque grey background when the window is inactive; see https://bugzilla.mozilla.org/show_bug.cgi?id=706209 */ diff --git a/web/viewer.js b/web/viewer.js index 32b3101c2..eba6d93e6 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -475,6 +475,41 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight, element.style.height = Math.ceil(item.height * scale) + 'px'; return element; } + function createCommentAnnotation(type, item) { + var annotContainer = document.createElement('section'); + annotContainer.className = 'annotComment'; + + var annotImage = createElementWithStyle('div', item); + annotImage.className = 'annotImage annotImage' + type; + var annotDetails = document.createElement('div'); + annotDetails.className = 'annotDetails'; + var annotTitle = document.createElement('h1'); + var annotContent = document.createElement('p'); + + annotDetails.style.left = (Math.floor(item.x - view.x + item.width) * scale) + 'px'; + annotDetails.style.top = (Math.floor(item.y - view.y) * scale) + 'px'; + annotTitle.textContent = item.title; + + if(!item.content) { + annotContent.style.display = 'none'; + } else { + annotContent.innerHTML = item.content.replace('\n', '
'); + annotImage.addEventListener('mouseover', function() { + this.nextSibling.style.display = 'block'; + }, true); + + annotImage.addEventListener('mouseout', function() { + this.nextSibling.style.display = 'none'; + }, true); + } + + annotDetails.appendChild(annotTitle); + annotDetails.appendChild(annotContent); + annotContainer.appendChild(annotImage); + annotContainer.appendChild(annotDetails); + + return annotContainer; + } var items = content.getAnnotations(); for (var i = 0; i < items.length; i++) { @@ -487,6 +522,13 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight, bindLink(link, ('dest' in item) ? item.dest : null); div.appendChild(link); break; + + case 'Text': + case 'Check': + var comment = createCommentAnnotation(item.name, item); + if(comment) + div.appendChild(comment); + break; } } } From c714c782cc0bae35ea33e5915ed714c9b2978e60 Mon Sep 17 00:00:00 2001 From: Saebekassebil Date: Wed, 21 Dec 2011 23:37:52 +0100 Subject: [PATCH 2/4] Lint nits --- src/core.js | 6 +++--- web/viewer.js | 13 +++++++------ 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/core.js b/src/core.js index f78b4f7ec..e28ec4d21 100644 --- a/src/core.js +++ b/src/core.js @@ -383,12 +383,12 @@ var Page = (function PageClosure() { case 'Text': var content = annotation.get('Contents'); var title = annotation.get('T'); - item.content = (typeof content == 'string') ? stringToPDFString(content) : null; - item.title = (typeof title == 'string') ? stringToPDFString(title) : null; + item.content = stringToPDFString(content || ''); + item.title = stringToPDFString(title || ''); item.name = annotation.get('Name').name; break; - default: + default: TODO('unimplemented annotation type: ' + subtype.name); break; } diff --git a/web/viewer.js b/web/viewer.js index eba6d93e6..533a84dc3 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -476,7 +476,7 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight, return element; } function createCommentAnnotation(type, item) { - var annotContainer = document.createElement('section'); + var annotContainer = document.createElement('section'); annotContainer.className = 'annotComment'; var annotImage = createElementWithStyle('div', item); @@ -486,20 +486,21 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight, var annotTitle = document.createElement('h1'); var annotContent = document.createElement('p'); - annotDetails.style.left = (Math.floor(item.x - view.x + item.width) * scale) + 'px'; + var offsetPos = Math.floor(item.x - view.x + item.width); + annotDetails.style.left = (offsetPos * scale) + 'px'; annotDetails.style.top = (Math.floor(item.y - view.y) * scale) + 'px'; annotTitle.textContent = item.title; - if(!item.content) { + if (!item.content) { annotContent.style.display = 'none'; } else { annotContent.innerHTML = item.content.replace('\n', '
'); annotImage.addEventListener('mouseover', function() { - this.nextSibling.style.display = 'block'; + this.nextSibling.style.display = 'block'; }, true); annotImage.addEventListener('mouseout', function() { - this.nextSibling.style.display = 'none'; + this.nextSibling.style.display = 'none'; }, true); } @@ -526,7 +527,7 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight, case 'Text': case 'Check': var comment = createCommentAnnotation(item.name, item); - if(comment) + if (comment) div.appendChild(comment); break; } From 12e2dcd775345c7c0909a8307e67ba87f7b8fa9f Mon Sep 17 00:00:00 2001 From: Saebekassebil Date: Thu, 22 Dec 2011 11:29:27 +0100 Subject: [PATCH 3/4] Addressing notmasteryet's comments --- src/core.js | 2 -- web/viewer.css | 20 ++++++++---------- web/viewer.js | 55 ++++++++++++++++++++++++-------------------------- 3 files changed, 34 insertions(+), 43 deletions(-) diff --git a/src/core.js b/src/core.js index e28ec4d21..93cbc72ac 100644 --- a/src/core.js +++ b/src/core.js @@ -379,7 +379,6 @@ var Page = (function PageClosure() { item.textAlignment = getInheritableProperty(annotation, 'Q'); item.flags = getInheritableProperty(annotation, 'Ff') || 0; break; - case 'Text': var content = annotation.get('Contents'); var title = annotation.get('T'); @@ -387,7 +386,6 @@ var Page = (function PageClosure() { item.title = stringToPDFString(title || ''); item.name = annotation.get('Name').name; break; - default: TODO('unimplemented annotation type: ' + subtype.name); break; diff --git a/web/viewer.css b/web/viewer.css index 3cfb163b0..0b64d9d86 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -251,29 +251,25 @@ canvas { position: absolute; } -.annotComment > .annotImageComment { - background: transparent url('./images/text.svg') no-repeat left top; - background-size: 75% 75%; -} - -.annotComment > .annotImageCheck { - background: transparent url('./images/check.svg') no-repeat left top; - background-size: 75% 75%; +.annotComment > img { + position: absolute; } -.annotComment > .annotImage:hover { +.annotComment > img:hover { cursor: pointer; opacity: 0.7; } -.annotComment > .annotDetails { - display: none; +.annotComment > div { padding: 0.2em; max-width: 20em; background-color: #F1E47B; + box-shadow: 0px 2px 10px #333; + -moz-box-shadow: 0px 2px 10px #333; + -webkit-box-shadow: 0px 2px 10px #333; } -.annotComment > .annotDetails > h1 { +.annotComment > div > h1 { font-weight: normal; font-size: 1.2em; border-bottom: 1px solid #000000; diff --git a/web/viewer.js b/web/viewer.js index 533a84dc3..1c8f6c03d 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -476,40 +476,39 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight, return element; } function createCommentAnnotation(type, item) { - var annotContainer = document.createElement('section'); - annotContainer.className = 'annotComment'; - - var annotImage = createElementWithStyle('div', item); - annotImage.className = 'annotImage annotImage' + type; - var annotDetails = document.createElement('div'); - annotDetails.className = 'annotDetails'; - var annotTitle = document.createElement('h1'); - var annotContent = document.createElement('p'); - + var container = document.createElement('section'); + container.className = 'annotComment'; + + var image = createElementWithStyle('img', item); + image.src = './images/' + type.toLowerCase() + '.svg'; + var content = document.createElement('div'); + content.setAttribute('hidden', true); + var title = document.createElement('h1'); + var text = document.createElement('p'); var offsetPos = Math.floor(item.x - view.x + item.width); - annotDetails.style.left = (offsetPos * scale) + 'px'; - annotDetails.style.top = (Math.floor(item.y - view.y) * scale) + 'px'; - annotTitle.textContent = item.title; + content.style.left = (offsetPos * scale) + 'px'; + content.style.top = (Math.floor(item.y - view.y) * scale) + 'px'; + title.textContent = item.title; if (!item.content) { - annotContent.style.display = 'none'; + content.setAttribute('hidden', true); } else { - annotContent.innerHTML = item.content.replace('\n', '
'); - annotImage.addEventListener('mouseover', function() { - this.nextSibling.style.display = 'block'; - }, true); - - annotImage.addEventListener('mouseout', function() { - this.nextSibling.style.display = 'none'; - }, true); + text.innerHTML = item.content.replace('\n', '
'); + image.addEventListener('mouseover', function annotationImageOver() { + this.nextSibling.removeAttribute('hidden'); + }, false); + + image.addEventListener('mouseout', function annotationImageOut() { + this.nextSibling.setAttribute('hidden', true); + }, false); } - annotDetails.appendChild(annotTitle); - annotDetails.appendChild(annotContent); - annotContainer.appendChild(annotImage); - annotContainer.appendChild(annotDetails); + content.appendChild(title); + content.appendChild(text); + container.appendChild(image); + container.appendChild(content); - return annotContainer; + return container; } var items = content.getAnnotations(); @@ -523,9 +522,7 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight, bindLink(link, ('dest' in item) ? item.dest : null); div.appendChild(link); break; - case 'Text': - case 'Check': var comment = createCommentAnnotation(item.name, item); if (comment) div.appendChild(comment); From 33e8d988c46bd9419f5a67b1ad8422802e7c5444 Mon Sep 17 00:00:00 2001 From: Saebekassebil Date: Thu, 22 Dec 2011 14:44:08 +0100 Subject: [PATCH 4/4] Image directory as a constant, adding myself to LICENSE file --- LICENSE | 1 + web/viewer.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/LICENSE b/LICENSE index f8a848205..db52dec8e 100644 --- a/LICENSE +++ b/LICENSE @@ -9,6 +9,7 @@ Yury Delendik Kalervo Kujala Adil Allawi <@ironymark> + Jakob Miland Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), diff --git a/web/viewer.js b/web/viewer.js index 1c8f6c03d..e2ffcef29 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -11,7 +11,7 @@ var kCssUnits = 96.0 / 72.0; var kScrollbarPadding = 40; var kMinScale = 0.25; var kMaxScale = 4.0; - +var kImageDirectory = './images/'; var Cache = function cacheCache(size) { var data = []; @@ -480,7 +480,7 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight, container.className = 'annotComment'; var image = createElementWithStyle('img', item); - image.src = './images/' + type.toLowerCase() + '.svg'; + image.src = kImageDirectory + type.toLowerCase() + '.svg'; var content = document.createElement('div'); content.setAttribute('hidden', true); var title = document.createElement('h1');