enter to add annotation

This commit is contained in:
j 2019-02-01 00:12:52 +05:30
parent 8ab9ac9588
commit fedd0c7e80
4 changed files with 68 additions and 20 deletions

View file

@ -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')

View file

@ -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);
} }

View file

@ -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) {

View file

@ -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()