0x2620/openmedialibrary
1
0
Fork 0
Code Issues 131 Pull requests Releases Wiki Activity

add annotation panel

Browse source
This commit is contained in:
j 2019-01-23 20:44:59 +05:30
parent 3edf3846a5
commit 4f3d5f5ee1
9 changed files with 201 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
config.json
View file

@ -358,6 +358,7 @@
"help": "introduction"
},
"section": "books",
"showAnnotations": false,
"showBrowser": true,
"showDebugMenu": false,
"showFolder": {},

3
static/html/epub.html
View file

@ -92,6 +92,7 @@
}
</style>
<script src="/static/oxjs/min/Ox.js?3"></script>
<script src="/static/epub.js/js/libs/jquery.min.js?3"></script>
<script src="/static/epub.js/js/libs/zip.min.js?3"></script>
<script src="/static/reader/epub.js?3"></script>
@ -136,7 +137,7 @@
</div>
</div>
<div id="main">
<div id="titlebar">
<div id="opener">
<a id="slider" class="icon-menu">Menu</a>

16
static/js/annotation.js Normal file
View file

@ -0,0 +1,16 @@
'use strict';
oml.ui.annotation = function(data, $iframe) {
var that = Ox.Element().attr({
id: 'a-' + data.id
}).css({
padding: '16px'
}).html(data.text).on({
click: function(event) {
$iframe.postMessage('selectAnnotation', {
id: data.id
})
}
});
return that;
};

11
static/js/annotationPanel.js Normal file
View file

@ -0,0 +1,11 @@
'use strict';
oml.ui.annotationPanel = function() {
var ui = oml.user.ui,
that = Ox.Element().css({
overflowY: 'auto',
});
return that;
};

14
static/js/mainMenu.js
View file

@ -232,6 +232,12 @@ oml.ui.mainMenu = function() {
keyboard: 'shift b',
disabled: !ui.item
},
{
id: 'showannotations',
title: Ox._((ui.showAnnotations ? 'Hide' : 'Show') + ' Annotations'),
keyboard: 'shift a',
disabled: !ui.item
},
{},
{
id: 'preview',
@ -539,6 +545,8 @@ oml.ui.mainMenu = function() {
oml.UI.set({showFilters: !ui.showFilters});
} else if (id == 'showbrowser') {
oml.UI.set({showBrowser: !ui.showBrowser});
} else if (id == 'showannotations') {
oml.UI.set({showAnnotations: !ui.showAnnotations});
} else if (id == 'preview') {
that.setItemTitle(
'preview',
@ -613,6 +621,9 @@ oml.ui.mainMenu = function() {
oml_listview: function(data) {
that.checkItem('viewMenu_listviewSubmenu_' + data.value);
},
oml_showannotations: function(data) {
that.setItemTitle('showannotations', Ox._((data.value ? 'Hide' : 'Show') + ' Annotations'));
},
oml_showbrowser: function(data) {
that.setItemTitle('showbrowser', Ox._((data.value ? 'Hide' : 'Show') + ' Browser'));
},
@ -705,6 +716,9 @@ oml.ui.mainMenu = function() {
key_control_z: function() {
oml.undoHistory();
},
key_shift_a: function() {
ui.item && oml.UI.set({showAnnotations: !ui.showAnnotations});
},
key_shift_b: function() {
ui.item && oml.UI.set({showBrowser: !ui.showBrowser});
},

49
static/js/viewer.js
View file

@ -4,15 +4,36 @@ oml.ui.viewer = function() {
var ui = oml.user.ui,
frame = Ox.Element(),
that = Ox.Element()
.bindEvent({
oml_itemview: function(data) {
if (ui.item != item && ui.itemView == 'book') {
that.updateElement(ui.item);
}
},
oml_showannotations: function() {
panel.toggleElement(1);
}
}),
panel = Ox.SplitPanel({
elements: [
{
element: frame
},
{
collapsed: !ui.showAnnotations,
collapsible: true,
element: oml.$ui.annotationPanel = oml.ui.annotationPanel(),
size: 256,
tooltip: Ox._('Annotations')
+ ' <span class="OxBright">'
+ Ox.SYMBOLS.shift + 'A</span>'
}
],
orientation: 'horizontal'
})
.appendTo(that),
$iframe, item;
that.updateElement = function() {
@ -20,11 +41,29 @@ oml.ui.viewer = function() {
if (item && item.length) {
oml.api.get({id: item, keys: ['mediastate']}, function(result) {
if (result.data.mediastate == 'available') {
$iframe = $iframe || Ox.Element('<iframe>').css({
oml.$ui.annotationPanel.empty()
if ($iframe) {
$iframe.remove()
}
$iframe = Ox.Element('<iframe>').css({
width: '100%',
height: '100%',
border: 0
}).appendTo(that);
}).onMessage(function(data, event) {
console.log('got', event, data)
if (event == 'addAnnotation') {
console.log('adding', data.id)
oml.$ui.annotationPanel.append(oml.ui.annotation(data, $iframe));
} else if (event == 'removeAnnotation') {
console.log('do it ...', data)
oml.$ui.annotationPanel.find('#a-' + data.id).remove()
} else if (event == 'selectAnnotation') {
console.log('select', data)
} else if (event == 'deselectAnnotation') {
console.log('deselect', data)
}
that.triggerEvent(event, data);
}).appendTo(frame);
$iframe.attr({
src: '/' + item + '/reader/'
});
@ -33,7 +72,9 @@ oml.ui.viewer = function() {
}
return that;
};
that.postMessage = function(event, data) {
$iframe && $iframe.postMesage(event, data)
};
return that.updateElement();
};

2
static/json/js.json
View file

@ -3,6 +3,8 @@
"UI.js",
"URL.js",
"allItems.js",
"annotation.js",
"annotationPanel.js",
"appDialog.js",
"appPanel.js",
"backButton.js",

74
static/reader/epub.js
View file

@ -5,10 +5,61 @@ var annotations = JSON.parse(localStorage[id + '.annotations'] || '[]')
var currentSelection;
var fontSize = parseInt(localStorage.epubFontSize || '100', 10)
Ox.load({
'UI': {
loadCSS: false
}
}, function() {
Ox.$parent.bindMessage(function(data, event) {
console.log('got', event, 'data', data)
if (event == 'selectAnnotation') {
selectAnnotation(data.id)
var annotation = annotations.filter(function(a) { return a.id == data.id })[0]
if (annotation) {
reader.rendition.display(annotation.cfiRange)
}
}
})
setTimeout(function() {
annotations.forEach(function(a) {
Ox.$parent.postMessage('addAnnotation', a)
})
}, 1000)
})
function saveAnnotations() {
localStorage[id + '.annotations'] = JSON.stringify(annotations)
}
function addAnnotation(annotation) {
annotations.push(annotation)
Ox.$parent.postMessage('addAnnotation', annotation)
saveAnnotations()
}
function selectAnnotation(id) {
$('.epubjs-hl.selected').each(function(i, g) {
g.classList.remove('selected')
})
$('.epubjs-hl[data-id='+id+']').each(function(i, g) {
g.classList.add('selected')
})
}
function deselectAnnotation(id) {
$('.epubjs-hl[data-id='+id+']').each(function(i, g) {
g.classList.remove('selected')
})
}
function removeAnnotation(a) {
annotations = annotations.filter(function(annotation) {
return annotation.cfiRange != a.dataset.epubcfi
})
reader.rendition.annotations.remove(a.dataset.epubcfi)
saveAnnotations()
}
function getText(book, cfiRange, cb) {
book.getRange(cfiRange).then(function (range) {
var text;
@ -45,18 +96,15 @@ document.onreadystatechange = function () {
rendition.themes.fontSize(fontSize + "%");
annotations.forEach(function(a) {
rendition.annotations.highlight(a.cfiRange, a.data || {}, onHighlightClicked);
rendition.annotations.highlight(a.cfiRange, {id: a.id}, onHighlightClicked);
})
reader.rendition.on('keydown', function(event) {
if (event.key == 'Delete') {
document.querySelectorAll('.epubjs-hl.selected').forEach(function(a) {
annotations = annotations.filter(function(annotation) {
return annotation.cfiRange != a.dataset.epubcfi
})
rendition.annotations.remove(a.dataset.epubcfi)
saveAnnotations()
removeAnnotation(a)
Ox.$parent.postMessage('removeAnnotation', {id: a.dataset.id})
})
}
if (event.key == 'n') {
@ -70,11 +118,10 @@ document.onreadystatechange = function () {
//currentSelection.cfiRange = reader.rendition.book.section().cfiFromRange(range).toString()
*/
rendition.annotations.highlight(currentSelection.cfiRange, currentSelection.data, onHighlightClicked);
rendition.annotations.highlight(currentSelection.cfiRange, {id: currentSelection.id}, onHighlightClicked);
currentSelection.contents.window.getSelection().removeAllRanges();
delete currentSelection.contents
annotations.push(currentSelection)
saveAnnotations()
addAnnotation(currentSelection)
document.querySelectorAll('.epubjs-hl.selected').forEach(function(other) {
other.classList.remove('selected')
})
@ -103,13 +150,12 @@ document.onreadystatechange = function () {
console.log('!! mark', cfiRange)
})
rendition.on("selected", function(cfiRange, contents) {
console.log('!! selected', cfiRange)
getText(book, cfiRange, function(quote) {
getText(book, cfiRange, function(text) {
currentSelection = {
id: Ox.SHA1(cfiRange),
created: (new Date).toISOString(),
cfiRange: cfiRange,
data: {
quote: quote
},
text: text,
contents: contents
}
})

67
static/reader/pdf.js
View file

@ -2,21 +2,39 @@ var id = document.location.pathname.split('/')[1];
var annotations = JSON.parse(localStorage[id + '.annotations'] || '[]')
var currentPage = 1, rendered = false
function getID() {
var id = 0;
while (annotations.filter(function(a) {
return a.id == id
}).length) {
id++
Ox.load({
'UI': {
loadCSS: false
}
return id
}
}, function() {
Ox.$parent.bindMessage(function(data, event) {
console.log('got', event, 'data', data)
if (event == 'selectAnnotation') {
var annotation = annotations.filter(function(a) { return a.id == data.id })[0]
if (
annotation &&
annotation.page &&
PDFViewerApplication.pdfViewer.currentPageNumber != annotation.page
) {
//FIXME: scroll into view
PDFViewerApplication.pdfViewer.currentPageNumber = annotation.page;
}
selectAnnotation(data.id)
}
})
setTimeout(function() {
annotations.forEach(function(a) {
Ox.$parent.postMessage('addAnnotation', a)
})
}, 1000)
})
window.addEventListener('keydown', function(event) {
if (event.key == 'Delete') {
var selected = document.querySelector('.oml-annotation.selected')
if (selected) {
removeAnnotation(selected.dataset.id)
Ox.$parent.postMessage('removeAnnotation', {id: selected.dataset.id})
}
} else if (event.key == 'n') {
if (!window.getSelection().isCollapsed) {
@ -36,28 +54,36 @@ function bindEvents() {
return
}
PDFViewerApplication.eventBus.on('pagerendered', function(event) {
var pageIndex = event.pageNumber - 1
loadAnnotations(pageIndex)
loadAnnotations(event.pageNumber)
})
}
bindEvents()
function getHighlight() {
var pageIndex = PDFViewerApplication.pdfViewer.currentPageNumber - 1;
var pageNumber = PDFViewerApplication.pdfViewer.currentPageNumber;
var pageIndex = pageNumber - 1;
var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex);
var pageRect = page.canvas.getClientRects()[0];
var selectionRects = window.getSelection().getRangeAt(0).getClientRects();
var selection = window.getSelection()
var selectionRects = selection.getRangeAt(0).getClientRects();
var viewport = page.viewport;
var selected = Array.from(selectionRects).map(function (r) {
return viewport.convertToPdfPoint(r.left - pageRect.x, r.top - pageRect.y).concat(
viewport.convertToPdfPoint(r.right - pageRect.x, r.bottom - pageRect.y));
});
return {page: pageIndex, coords: selected, id: getID()};
var text = selection.toString();
return {
created: (new Date).toISOString(),
page: pageNumber,
coords: selected,
text: text,
id: Ox.SHA1(pageNumber.toString() + JSON.stringify(selected))
};
}
function renderAnnotation(annotation) {
var pageIndex = annotation.page;
var pageIndex = annotation.page - 1;
var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex);
if (!page.canvas) {
setTimeout(function() {
@ -81,8 +107,10 @@ function renderAnnotation(annotation) {
el.addEventListener('click', function() {
if (el.classList.contains('selected')) {
deselectAnnotation(annotation.id)
Ox.$parent.postMessage('deselectAnnotation', {id: annotation.id})
} else {
selectAnnotation(annotation.id)
Ox.$parent.postMessage('selectAnnotation', {id: annotation.id})
}
});
pageElement.appendChild(el);
@ -91,10 +119,15 @@ function renderAnnotation(annotation) {
function addAnnotation(annotation) {
annotations.push(annotation)
Ox.$parent.postMessage('addAnnotation', annotation)
saveAnnotations()
}
function selectAnnotation(id) {
document.querySelectorAll('.oml-annotation.selected').forEach(function(g) {
g.classList.remove('selected')
g.style.backgroundColor = 'yellow'
})
document.querySelectorAll('.oml-annotation.a' + id).forEach(function(g) {
g.classList.add('selected')
g.style.backgroundColor = 'blue'
@ -121,12 +154,12 @@ function saveAnnotations() {
localStorage[id + '.annotations'] = JSON.stringify(annotations)
}
function loadAnnotations(pageIndex) {
document.querySelectorAll('.oml-annotation.page' + pageIndex).forEach(function(e) {
function loadAnnotations(page) {
document.querySelectorAll('.oml-annotation.page' + page).forEach(function(e) {
e.remove()
})
annotations.filter(function(a) {
return a.page == pageIndex
return a.page == page
}).forEach(function(annot) {
renderAnnotation(annot)
})