unify annotations local storage
This commit is contained in:
parent
3905ddb9fc
commit
d4b89137db
4 changed files with 61 additions and 40 deletions
|
@ -1,7 +1,6 @@
|
|||
'use strict';
|
||||
|
||||
oml.ui.annotation = function(data, $iframe) {
|
||||
data.created = data.created || (new Date).toISOString();
|
||||
var $arrayEditable = Ox.ArrayEditable({
|
||||
editing: true,
|
||||
type: 'textarea'
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
oml.ui.viewer = function() {
|
||||
|
||||
var ui = oml.user.ui,
|
||||
annotations = [],
|
||||
|
||||
frame = Ox.Element(),
|
||||
that = Ox.Element()
|
||||
|
@ -38,6 +39,24 @@ oml.ui.viewer = function() {
|
|||
.appendTo(that),
|
||||
$iframe, item;
|
||||
|
||||
function loadAnnotations(callback) {
|
||||
annotations = JSON.parse(localStorage[item + '.annotations'] || '[]')
|
||||
callback && callback(annotations)
|
||||
}
|
||||
function saveAnnotations(data) {
|
||||
if (data) {
|
||||
data.created = data.created || (new Date).toISOString();
|
||||
annotations.push(data);
|
||||
}
|
||||
localStorage[item + '.annotations'] = JSON.stringify(annotations)
|
||||
}
|
||||
function removeAnnotation(id) {
|
||||
annotations = annotations.filter(function(annotation) {
|
||||
return annotation.id != id
|
||||
})
|
||||
saveAnnotations()
|
||||
}
|
||||
|
||||
that.updateElement = function() {
|
||||
item = ui.item;
|
||||
if (item && item.length) {
|
||||
|
@ -55,18 +74,36 @@ oml.ui.viewer = function() {
|
|||
console.log('got', event, data)
|
||||
if (event == 'addAnnotation') {
|
||||
console.log('adding', data.id)
|
||||
saveAnnotations(data);
|
||||
var $annotation = oml.ui.annotation(data, $iframe)
|
||||
oml.$ui.annotationFolder.append($annotation);
|
||||
$annotation.annotate();
|
||||
} else if (event == 'removeAnnotation') {
|
||||
console.log('do it ...', data)
|
||||
oml.$ui.annotationFolder.find('#a-' + data.id).remove()
|
||||
removeAnnotation(data.id)
|
||||
} else if (event == 'selectAnnotation') {
|
||||
console.log('select', data)
|
||||
} else if (event == 'deselectAnnotation') {
|
||||
console.log('deselect', data)
|
||||
} else {
|
||||
that.triggerEvent(event, data);
|
||||
}
|
||||
|
||||
}).bindEvent({
|
||||
init: function() {
|
||||
loadAnnotations(function(annotations) {
|
||||
annotations.forEach(function(data) {
|
||||
var $annotation = oml.ui.annotation(data, $iframe)
|
||||
oml.$ui.annotationFolder.append($annotation);
|
||||
})
|
||||
// fixme: trigger loaded event from reader instead?
|
||||
setTimeout(function() {
|
||||
that.postMessage('addAnnotations', {
|
||||
annotations: annotations
|
||||
})
|
||||
}, 500)
|
||||
})
|
||||
}
|
||||
that.triggerEvent(event, data);
|
||||
}).appendTo(frame);
|
||||
$iframe.attr({
|
||||
src: '/' + item + '/reader/'
|
||||
|
@ -77,7 +114,7 @@ oml.ui.viewer = function() {
|
|||
return that;
|
||||
};
|
||||
that.postMessage = function(event, data) {
|
||||
$iframe && $iframe.postMesage(event, data)
|
||||
$iframe && $iframe.postMessage(event, data)
|
||||
};
|
||||
|
||||
return that.updateElement();
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
"use strict";
|
||||
var reader;
|
||||
var id = document.location.pathname.split('/')[1];
|
||||
var annotations = JSON.parse(localStorage[id + '.annotations'] || '[]')
|
||||
var annotations = [];
|
||||
var currentSelection;
|
||||
var fontSize = parseInt(localStorage.epubFontSize || '100', 10)
|
||||
|
||||
|
@ -18,23 +18,18 @@ Ox.load({
|
|||
if (annotation) {
|
||||
reader.rendition.display(annotation.cfiRange)
|
||||
}
|
||||
} else if (event == 'addAnnotations') {
|
||||
data.annotations.forEach(function(annotation) {
|
||||
annotations.push(annotation)
|
||||
renderAnnotation(annotation)
|
||||
})
|
||||
}
|
||||
})
|
||||
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) {
|
||||
|
@ -57,7 +52,11 @@ function removeAnnotation(a) {
|
|||
return annotation.cfiRange != a.dataset.epubcfi
|
||||
})
|
||||
reader.rendition.annotations.remove(a.dataset.epubcfi)
|
||||
saveAnnotations()
|
||||
Ox.$parent.postMessage('removeAnnotation', {id: a.dataset.id})
|
||||
}
|
||||
|
||||
function renderAnnotation(annotation) {
|
||||
reader.rendition.annotations.highlight(annotation.cfiRange, {id: annotation.id}, onHighlightClicked);
|
||||
}
|
||||
|
||||
function getText(book, cfiRange, cb) {
|
||||
|
@ -95,16 +94,11 @@ document.onreadystatechange = function () {
|
|||
book = reader.book;
|
||||
|
||||
rendition.themes.fontSize(fontSize + "%");
|
||||
annotations.forEach(function(a) {
|
||||
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) {
|
||||
removeAnnotation(a)
|
||||
Ox.$parent.postMessage('removeAnnotation', {id: a.dataset.id})
|
||||
})
|
||||
}
|
||||
if (event.key == 'n') {
|
||||
|
@ -117,8 +111,7 @@ document.onreadystatechange = function () {
|
|||
)
|
||||
//currentSelection.cfiRange = reader.rendition.book.section().cfiFromRange(range).toString()
|
||||
*/
|
||||
|
||||
rendition.annotations.highlight(currentSelection.cfiRange, {id: currentSelection.id}, onHighlightClicked);
|
||||
renderAnnotation(currentSelection)
|
||||
currentSelection.contents.window.getSelection().removeAllRanges();
|
||||
delete currentSelection.contents
|
||||
addAnnotation(currentSelection)
|
||||
|
@ -153,7 +146,6 @@ document.onreadystatechange = function () {
|
|||
getText(book, cfiRange, function(text) {
|
||||
currentSelection = {
|
||||
id: Ox.SHA1(cfiRange),
|
||||
created: (new Date).toISOString(),
|
||||
cfiRange: cfiRange,
|
||||
text: text,
|
||||
contents: contents
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
var id = document.location.pathname.split('/')[1];
|
||||
var annotations = JSON.parse(localStorage[id + '.annotations'] || '[]')
|
||||
var annotations = [];
|
||||
var currentPage = 1, rendered = false
|
||||
|
||||
Ox.load({
|
||||
|
@ -20,13 +20,13 @@ Ox.load({
|
|||
PDFViewerApplication.pdfViewer.currentPageNumber = annotation.page;
|
||||
}
|
||||
selectAnnotation(data.id)
|
||||
} else if (event == 'addAnnotations') {
|
||||
data.annotations.forEach(function(annotation) {
|
||||
annotations.push(annotation)
|
||||
renderAnnotation(annotation)
|
||||
})
|
||||
}
|
||||
})
|
||||
setTimeout(function() {
|
||||
annotations.forEach(function(a) {
|
||||
Ox.$parent.postMessage('addAnnotation', a)
|
||||
})
|
||||
}, 1000)
|
||||
})
|
||||
|
||||
window.addEventListener('keydown', function(event) {
|
||||
|
@ -34,7 +34,6 @@ window.addEventListener('keydown', function(event) {
|
|||
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) {
|
||||
|
@ -74,7 +73,6 @@ function getHighlight() {
|
|||
});
|
||||
var text = selection.toString();
|
||||
return {
|
||||
created: (new Date).toISOString(),
|
||||
page: pageNumber,
|
||||
coords: selected,
|
||||
text: text,
|
||||
|
@ -85,10 +83,10 @@ function getHighlight() {
|
|||
function renderAnnotation(annotation) {
|
||||
var pageIndex = annotation.page - 1;
|
||||
var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex);
|
||||
if (!page.canvas) {
|
||||
if (!page || !page.canvas) {
|
||||
setTimeout(function() {
|
||||
renderAnnotation(annotation)
|
||||
}, 10)
|
||||
}, 50)
|
||||
return
|
||||
}
|
||||
var pageElement = page.canvas.parentElement.parentElement;
|
||||
|
@ -120,7 +118,6 @@ function renderAnnotation(annotation) {
|
|||
function addAnnotation(annotation) {
|
||||
annotations.push(annotation)
|
||||
Ox.$parent.postMessage('addAnnotation', annotation)
|
||||
saveAnnotations()
|
||||
}
|
||||
|
||||
function selectAnnotation(id) {
|
||||
|
@ -147,11 +144,7 @@ function removeAnnotation(id) {
|
|||
annotations = annotations.filter(function(annotation) {
|
||||
return annotation.id != id
|
||||
})
|
||||
saveAnnotations()
|
||||
}
|
||||
|
||||
function saveAnnotations() {
|
||||
localStorage[id + '.annotations'] = JSON.stringify(annotations)
|
||||
Ox.$parent.postMessage('removeAnnotation', {id: selected.dataset.id})
|
||||
}
|
||||
|
||||
function loadAnnotations(page) {
|
||||
|
|
Loading…
Reference in a new issue