add annotation panel
This commit is contained in:
parent
3edf3846a5
commit
4f3d5f5ee1
9 changed files with 201 additions and 36 deletions
|
|
@ -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
|
||||
}
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue