Compare commits
No commits in common. "fe9b0618edb176eb1871191c77ce9d32cdc86816" and "b4c4372394f63cac8c0f688070158ae7ab9590fa" have entirely different histories.
fe9b0618ed
...
b4c4372394
6 changed files with 38 additions and 148 deletions
|
|
@ -9,10 +9,3 @@
|
||||||
.OMLAnnotation.selected .OMLQuote {
|
.OMLAnnotation.selected .OMLQuote {
|
||||||
background-color: rgb(128, 192, 255);
|
background-color: rgb(128, 192, 255);
|
||||||
}
|
}
|
||||||
|
|
||||||
.OMLAnnotation .OxPlaceholder {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.OMLAnnotation.selected .OxPlaceholder {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -14,17 +14,21 @@ oml.ui.annotation = function(annotation, $iframe) {
|
||||||
var notes = annotation.notes.length ? annotation.notes.map(function(note) {
|
var notes = annotation.notes.length ? annotation.notes.map(function(note) {
|
||||||
note.editable = !note.user
|
note.editable = !note.user
|
||||||
return note
|
return note
|
||||||
}) : []
|
}) : [{
|
||||||
var $notes = Ox.ArrayEditable({
|
id: 'A',
|
||||||
|
placeholder: 'Add Note',
|
||||||
|
value: '',
|
||||||
|
editable: true
|
||||||
|
}];
|
||||||
|
console.log(annotation.notes)
|
||||||
|
var $note = Ox.ArrayEditable({
|
||||||
editing: true,
|
editing: true,
|
||||||
items: notes,
|
items: notes,
|
||||||
placeholder: 'Add note',
|
|
||||||
type: 'textarea'
|
type: 'textarea'
|
||||||
}).css({
|
}).css({
|
||||||
margin: '2px',
|
margin: '2px',
|
||||||
minHeight: '12px'
|
minHeight: '12px'
|
||||||
}).bindEvent({
|
}).bindEvent({
|
||||||
doubleclick: addNote,
|
|
||||||
submit: function(data) {
|
submit: function(data) {
|
||||||
var note = Ox.getObjectById(annotation.notes, data.id)
|
var note = Ox.getObjectById(annotation.notes, data.id)
|
||||||
if (note) {
|
if (note) {
|
||||||
|
|
@ -54,26 +58,11 @@ oml.ui.annotation = function(annotation, $iframe) {
|
||||||
id: annotation.id
|
id: annotation.id
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}).append($quote).append($notes);
|
}).append($quote).append($note);
|
||||||
|
|
||||||
|
|
||||||
function addNote() {
|
|
||||||
if (!$notes.options('items').length) {
|
|
||||||
that.select()
|
|
||||||
$notes.addItem(0, {
|
|
||||||
id: 'A',
|
|
||||||
value: '',
|
|
||||||
editable: true
|
|
||||||
}).options({
|
|
||||||
selected: 'A'
|
|
||||||
}).editItem()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
that.annotate = function() {
|
that.annotate = function() {
|
||||||
if (oml.user.ui.showAnnotations) {
|
var item = {
|
||||||
addNote()
|
id: 'note', value: '', editable: true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
that.deselect = function() {
|
that.deselect = function() {
|
||||||
|
|
@ -81,9 +70,6 @@ oml.ui.annotation = function(annotation, $iframe) {
|
||||||
that.loseFocus()
|
that.loseFocus()
|
||||||
}
|
}
|
||||||
that.select = function () {
|
that.select = function () {
|
||||||
$iframe.postMessage('selectAnnotation', {
|
|
||||||
id: annotation.id
|
|
||||||
})
|
|
||||||
let selected = document.querySelector('.OMLAnnotation.selected')
|
let selected = document.querySelector('.OMLAnnotation.selected')
|
||||||
selected && selected.classList.remove('selected')
|
selected && selected.classList.remove('selected')
|
||||||
that.addClass('selected')
|
that.addClass('selected')
|
||||||
|
|
|
||||||
|
|
@ -10,10 +10,6 @@ oml.ui.annotationPanel = function() {
|
||||||
title: 'add',
|
title: 'add',
|
||||||
tooltip: Ox._('Add Quote'),
|
tooltip: Ox._('Add Quote'),
|
||||||
type: 'image'
|
type: 'image'
|
||||||
}).bindEvent({
|
|
||||||
click: function() {
|
|
||||||
oml.$ui.viewer.postMessage('addAnnotation', {})
|
|
||||||
}
|
|
||||||
}).appendTo($bar);
|
}).appendTo($bar);
|
||||||
|
|
||||||
var $menuButton = Ox.MenuButton({
|
var $menuButton = Ox.MenuButton({
|
||||||
|
|
@ -54,12 +50,6 @@ oml.ui.annotationPanel = function() {
|
||||||
orientation: 'vertical'
|
orientation: 'vertical'
|
||||||
});
|
});
|
||||||
|
|
||||||
that.updateSelection = function(selection) {
|
|
||||||
$button.options({
|
|
||||||
disabled: !selection
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -95,6 +95,7 @@ oml.ui.viewer = function() {
|
||||||
height: '100%',
|
height: '100%',
|
||||||
border: 0
|
border: 0
|
||||||
}).onMessage(function(data, event) {
|
}).onMessage(function(data, event) {
|
||||||
|
console.log('got', event, data)
|
||||||
if (event == 'addAnnotation') {
|
if (event == 'addAnnotation') {
|
||||||
console.log('adding', data.id)
|
console.log('adding', data.id)
|
||||||
saveAnnotations(data);
|
saveAnnotations(data);
|
||||||
|
|
@ -106,14 +107,11 @@ oml.ui.viewer = function() {
|
||||||
removeAnnotation(data.id)
|
removeAnnotation(data.id)
|
||||||
} else if (event == 'selectAnnotation') {
|
} else if (event == 'selectAnnotation') {
|
||||||
var $annotation = oml.$ui.annotationFolder.find('#a-' + data.id)
|
var $annotation = oml.$ui.annotationFolder.find('#a-' + data.id)
|
||||||
$annotation && $annotation.select()
|
$annotation.select()
|
||||||
} else if (event == 'deselectAnnotation') {
|
} else if (event == 'deselectAnnotation') {
|
||||||
var $annotation = oml.$ui.annotationFolder.find('#a-' + data.id)[0]
|
var $annotation = oml.$ui.annotationFolder.find('#a-' + data.id)
|
||||||
$annotation && $annotation.deselect()
|
$annotation.deselect()
|
||||||
} else if (event == 'selection') {
|
|
||||||
oml.$ui.annotationPanel.updateSelection(data)
|
|
||||||
} else {
|
} else {
|
||||||
console.log('got', event, data)
|
|
||||||
that.triggerEvent(event, data);
|
that.triggerEvent(event, data);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -18,8 +18,6 @@ Ox.load({
|
||||||
if (annotation) {
|
if (annotation) {
|
||||||
reader.rendition.display(annotation.cfiRange)
|
reader.rendition.display(annotation.cfiRange)
|
||||||
}
|
}
|
||||||
} else if (event == 'addAnnotation') {
|
|
||||||
createAnnotation()
|
|
||||||
} else if (event == 'addAnnotations') {
|
} else if (event == 'addAnnotations') {
|
||||||
data.annotations.forEach(function(annotation) {
|
data.annotations.forEach(function(annotation) {
|
||||||
annotations.push(annotation)
|
annotations.push(annotation)
|
||||||
|
|
@ -31,29 +29,6 @@ Ox.load({
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
function createAnnotation() {
|
|
||||||
console.log('createAnnotation', currentSelection)
|
|
||||||
if (currentSelection) {
|
|
||||||
/*
|
|
||||||
var range = currentSelection.contents.window.getSelection().getRangeAt(0)
|
|
||||||
console.log(
|
|
||||||
currentSelection.cfiRange,
|
|
||||||
reader.rendition.book.section().cfiFromRange(range).toString()
|
|
||||||
)
|
|
||||||
//currentSelection.cfiRange = reader.rendition.book.section().cfiFromRange(range).toString()
|
|
||||||
*/
|
|
||||||
renderAnnotation(currentSelection)
|
|
||||||
currentSelection.contents.window.getSelection().removeAllRanges();
|
|
||||||
delete currentSelection.contents
|
|
||||||
addAnnotation(currentSelection)
|
|
||||||
document.querySelectorAll('.epubjs-hl.selected').forEach(function(other) {
|
|
||||||
other.classList.remove('selected')
|
|
||||||
})
|
|
||||||
currentSelection = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function addAnnotation(annotation) {
|
function addAnnotation(annotation) {
|
||||||
annotations.push(annotation)
|
annotations.push(annotation)
|
||||||
Ox.$parent.postMessage('addAnnotation', annotation)
|
Ox.$parent.postMessage('addAnnotation', annotation)
|
||||||
|
|
@ -74,18 +49,6 @@ function deselectAnnotation(id) {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function deselectAllAnnotations() {
|
|
||||||
var ids = []
|
|
||||||
document.querySelectorAll('.epubjs-hl.selected').forEach(function(g) {
|
|
||||||
g.classList.remove('selected')
|
|
||||||
if (!Ox.contains(ids, id)) {
|
|
||||||
ids.push(id)
|
|
||||||
Ox.$parent.postMessage('deselectAnnotation', {id: id})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeAnnotation(id) {
|
function removeAnnotation(id) {
|
||||||
var a = annotations.filter(function(a) { return a.id == id })[0]
|
var a = annotations.filter(function(a) { return a.id == id })[0]
|
||||||
if (a) {
|
if (a) {
|
||||||
|
|
@ -120,7 +83,6 @@ function onHighlightClicked(e) {
|
||||||
other.classList.remove('selected')
|
other.classList.remove('selected')
|
||||||
})
|
})
|
||||||
e.target.classList.add('selected')
|
e.target.classList.add('selected')
|
||||||
Ox.$parent.postMessage('selectAnnotation', {id: e.target.dataset.id})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -144,16 +106,24 @@ document.onreadystatechange = function () {
|
||||||
removeAnnotation(a.dataset.id)
|
removeAnnotation(a.dataset.id)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
if (event.key == 'n' || event.keyCode == 13) {
|
if (event.key == 'n') {
|
||||||
var selected = document.querySelector('.epubjs-hl.selected')
|
|
||||||
if (currentSelection) {
|
if (currentSelection) {
|
||||||
if (selected) {
|
/*
|
||||||
deselectAllAnnotations()
|
var range = currentSelection.contents.window.getSelection().getRangeAt(0)
|
||||||
}
|
console.log(
|
||||||
createAnnotation()
|
currentSelection.cfiRange,
|
||||||
} else if (selected) {
|
reader.rendition.book.section().cfiFromRange(range).toString()
|
||||||
console.log('editNote?', selected.dataset.id)
|
)
|
||||||
|
//currentSelection.cfiRange = reader.rendition.book.section().cfiFromRange(range).toString()
|
||||||
|
*/
|
||||||
|
renderAnnotation(currentSelection)
|
||||||
|
currentSelection.contents.window.getSelection().removeAllRanges();
|
||||||
|
delete currentSelection.contents
|
||||||
|
addAnnotation(currentSelection)
|
||||||
|
document.querySelectorAll('.epubjs-hl.selected').forEach(function(other) {
|
||||||
|
other.classList.remove('selected')
|
||||||
|
})
|
||||||
|
currentSelection = null
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (event.keyCode == 61 && event.shiftKey) {
|
if (event.keyCode == 61 && event.shiftKey) {
|
||||||
|
|
@ -172,16 +142,7 @@ document.onreadystatechange = function () {
|
||||||
localStorage.epubFontSize = fontSize
|
localStorage.epubFontSize = fontSize
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
}
|
}
|
||||||
}).on('mouseup', function(event) {
|
console.log(fontSize)
|
||||||
if (currentSelection) {
|
|
||||||
var selection = window.getSelection()
|
|
||||||
if (selection.isCollapsed) {
|
|
||||||
currentSelection = null
|
|
||||||
}
|
|
||||||
if (!currentSelection) {
|
|
||||||
Ox.$parent.postMessage('selection', false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
rendition.on("mark", function(cfiRange, contents) {
|
rendition.on("mark", function(cfiRange, contents) {
|
||||||
console.log('!! mark', cfiRange)
|
console.log('!! mark', cfiRange)
|
||||||
|
|
@ -194,7 +155,6 @@ document.onreadystatechange = function () {
|
||||||
text: text,
|
text: text,
|
||||||
contents: contents
|
contents: contents
|
||||||
}
|
}
|
||||||
Ox.$parent.postMessage('selection', text ? true : false)
|
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -27,8 +27,6 @@ Ox.load({
|
||||||
}
|
}
|
||||||
}, delay)
|
}, delay)
|
||||||
selectAnnotation(data.id)
|
selectAnnotation(data.id)
|
||||||
} else if (event == 'addAnnotation') {
|
|
||||||
createAnnotation()
|
|
||||||
} else if (event == 'addAnnotations') {
|
} else if (event == 'addAnnotations') {
|
||||||
data.annotations.forEach(function(annotation) {
|
data.annotations.forEach(function(annotation) {
|
||||||
annotations.push(annotation)
|
annotations.push(annotation)
|
||||||
|
|
@ -46,25 +44,17 @@ window.addEventListener('keydown', function(event) {
|
||||||
if (selected) {
|
if (selected) {
|
||||||
removeAnnotation(selected.dataset.id)
|
removeAnnotation(selected.dataset.id)
|
||||||
}
|
}
|
||||||
} else if (event.key == 'n' || event.keyCode == 13) {
|
} else if (event.key == 'n') {
|
||||||
var selected = document.querySelector('.oml-annotation.selected')
|
|
||||||
if (!window.getSelection().isCollapsed) {
|
if (!window.getSelection().isCollapsed) {
|
||||||
createAnnotation()
|
var annot = getHighlight()
|
||||||
} else if (selected) {
|
renderAnnotation(annot)
|
||||||
console.log('editNote?', selected.dataset.id)
|
addAnnotation(annot)
|
||||||
|
window.getSelection().removeAllRanges();
|
||||||
}
|
}
|
||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
window.addEventListener('mouseup', function(event) {
|
|
||||||
var selection = window.getSelection()
|
|
||||||
if (selection.isCollapsed) {
|
|
||||||
Ox.$parent.postMessage('selection', false)
|
|
||||||
} else {
|
|
||||||
Ox.$parent.postMessage('selection', true)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
function bindEvents() {
|
function bindEvents() {
|
||||||
if (!window.PDFViewerApplication || !window.PDFViewerApplication.eventBus) {
|
if (!window.PDFViewerApplication || !window.PDFViewerApplication.eventBus) {
|
||||||
|
|
@ -99,18 +89,6 @@ function getHighlight() {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function createAnnotation() {
|
|
||||||
var selected = document.querySelector('.oml-annotation.selected')
|
|
||||||
if (selected) {
|
|
||||||
deselectAllAnnotations()
|
|
||||||
}
|
|
||||||
var annot = getHighlight()
|
|
||||||
renderAnnotation(annot)
|
|
||||||
addAnnotation(annot)
|
|
||||||
window.getSelection().removeAllRanges();
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function renderAnnotation(annotation) {
|
function renderAnnotation(annotation) {
|
||||||
var pageIndex = annotation.page - 1;
|
var pageIndex = annotation.page - 1;
|
||||||
var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex);
|
var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex);
|
||||||
|
|
@ -161,7 +139,6 @@ function selectAnnotation(id) {
|
||||||
g.style.backgroundColor = 'blue'
|
g.style.backgroundColor = 'blue'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function deselectAnnotation(id) {
|
function deselectAnnotation(id) {
|
||||||
document.querySelectorAll('.oml-annotation.a' + id).forEach(function(g) {
|
document.querySelectorAll('.oml-annotation.a' + id).forEach(function(g) {
|
||||||
g.classList.remove('selected')
|
g.classList.remove('selected')
|
||||||
|
|
@ -169,20 +146,6 @@ function deselectAnnotation(id) {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function deselectAllAnnotations() {
|
|
||||||
var ids = []
|
|
||||||
document.querySelectorAll('.oml-annotation.selected').forEach(function(g) {
|
|
||||||
g.classList.remove('selected')
|
|
||||||
g.style.backgroundColor = 'yellow'
|
|
||||||
var id = $(g).parents('.oml-annotation').data('id')
|
|
||||||
console.log('deselect', g, id)
|
|
||||||
if (!Ox.contains(ids, id)) {
|
|
||||||
ids.push(id)
|
|
||||||
Ox.$parent.postMessage('deselectAnnotation', {id: id})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeAnnotation(id) {
|
function removeAnnotation(id) {
|
||||||
document.querySelectorAll('.oml-annotation.a' + id).forEach(function(a) {
|
document.querySelectorAll('.oml-annotation.a' + id).forEach(function(a) {
|
||||||
a.remove()
|
a.remove()
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue