enter to add annotation
This commit is contained in:
parent
8ab9ac9588
commit
fedd0c7e80
4 changed files with 68 additions and 20 deletions
|
@ -15,7 +15,6 @@ oml.ui.annotation = function(annotation, $iframe) {
|
||||||
note.editable = !note.user
|
note.editable = !note.user
|
||||||
return note
|
return note
|
||||||
}) : []
|
}) : []
|
||||||
console.log(annotation.notes)
|
|
||||||
var $notes = Ox.ArrayEditable({
|
var $notes = Ox.ArrayEditable({
|
||||||
editing: true,
|
editing: true,
|
||||||
items: notes,
|
items: notes,
|
||||||
|
@ -25,17 +24,7 @@ oml.ui.annotation = function(annotation, $iframe) {
|
||||||
margin: '2px',
|
margin: '2px',
|
||||||
minHeight: '12px'
|
minHeight: '12px'
|
||||||
}).bindEvent({
|
}).bindEvent({
|
||||||
doubleclick: function(data) {
|
doubleclick: addNote,
|
||||||
if (!$notes.options('items').length) {
|
|
||||||
$notes.addItem(0, {
|
|
||||||
id: 'A',
|
|
||||||
value: '',
|
|
||||||
editable: true
|
|
||||||
}).options({
|
|
||||||
selected: 'A'
|
|
||||||
}).editItem()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
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) {
|
||||||
|
@ -67,9 +56,24 @@ oml.ui.annotation = function(annotation, $iframe) {
|
||||||
}
|
}
|
||||||
}).append($quote).append($notes);
|
}).append($quote).append($notes);
|
||||||
|
|
||||||
|
|
||||||
|
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() {
|
||||||
var item = {
|
if (oml.user.ui.showAnnotations) {
|
||||||
id: 'note', value: '', editable: true
|
addNote()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
that.deselect = function() {
|
that.deselect = function() {
|
||||||
|
@ -77,6 +81,9 @@ 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')
|
||||||
|
|
|
@ -95,7 +95,6 @@ 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);
|
||||||
|
@ -107,11 +106,12 @@ 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.select()
|
$annotation && $annotation.select()
|
||||||
} else if (event == 'deselectAnnotation') {
|
} else if (event == 'deselectAnnotation') {
|
||||||
var $annotation = oml.$ui.annotationFolder.find('#a-' + data.id)
|
var $annotation = oml.$ui.annotationFolder.find('#a-' + data.id)[0]
|
||||||
$annotation.deselect()
|
$annotation && $annotation.deselect()
|
||||||
} else {
|
} else {
|
||||||
|
console.log('got', event, data)
|
||||||
that.triggerEvent(event, data);
|
that.triggerEvent(event, data);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -49,6 +49,18 @@ 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) {
|
||||||
|
@ -83,6 +95,7 @@ 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})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -106,8 +119,12 @@ document.onreadystatechange = function () {
|
||||||
removeAnnotation(a.dataset.id)
|
removeAnnotation(a.dataset.id)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
if (event.key == 'n') {
|
if (event.key == 'n' || event.keyCode == 13) {
|
||||||
|
var selected = document.querySelector('.epubjs-hl.selected')
|
||||||
if (currentSelection) {
|
if (currentSelection) {
|
||||||
|
if (selected) {
|
||||||
|
deselectAllAnnotations()
|
||||||
|
}
|
||||||
/*
|
/*
|
||||||
var range = currentSelection.contents.window.getSelection().getRangeAt(0)
|
var range = currentSelection.contents.window.getSelection().getRangeAt(0)
|
||||||
console.log(
|
console.log(
|
||||||
|
@ -124,6 +141,9 @@ document.onreadystatechange = function () {
|
||||||
other.classList.remove('selected')
|
other.classList.remove('selected')
|
||||||
})
|
})
|
||||||
currentSelection = null
|
currentSelection = null
|
||||||
|
} else if (selected) {
|
||||||
|
console.log('editNote?', selected.dataset.id)
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (event.keyCode == 61 && event.shiftKey) {
|
if (event.keyCode == 61 && event.shiftKey) {
|
||||||
|
|
|
@ -44,12 +44,18 @@ window.addEventListener('keydown', function(event) {
|
||||||
if (selected) {
|
if (selected) {
|
||||||
removeAnnotation(selected.dataset.id)
|
removeAnnotation(selected.dataset.id)
|
||||||
}
|
}
|
||||||
} else if (event.key == 'n') {
|
} else if (event.key == 'n' || event.keyCode == 13) {
|
||||||
|
var selected = document.querySelector('.oml-annotation.selected')
|
||||||
if (!window.getSelection().isCollapsed) {
|
if (!window.getSelection().isCollapsed) {
|
||||||
|
if (selected) {
|
||||||
|
deselectAllAnnotations()
|
||||||
|
}
|
||||||
var annot = getHighlight()
|
var annot = getHighlight()
|
||||||
renderAnnotation(annot)
|
renderAnnotation(annot)
|
||||||
addAnnotation(annot)
|
addAnnotation(annot)
|
||||||
window.getSelection().removeAllRanges();
|
window.getSelection().removeAllRanges();
|
||||||
|
} else if (selected) {
|
||||||
|
console.log('editNote?', selected.dataset.id)
|
||||||
}
|
}
|
||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
|
@ -139,6 +145,7 @@ 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')
|
||||||
|
@ -146,6 +153,20 @@ 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…
Reference in a new issue