diff --git a/config.json b/config.json index 0f4e28e..d32e59e 100644 --- a/config.json +++ b/config.json @@ -361,7 +361,9 @@ "showAnnotations": false, "showBrowser": true, "showDebugMenu": false, - "showFolder": {}, + "showFolder": { + "": true + }, "showFilters": true, "showIconInfo": true, "showInfo": true, diff --git a/static/css/oml.css b/static/css/oml.css index b4abb47..382cccd 100644 --- a/static/css/oml.css +++ b/static/css/oml.css @@ -1,5 +1,9 @@ .OMLQuote { + color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); + font-family: Georgia, Palatino, DejaVu Serif, Book Antiqua, Palatino Linotype, Times New Roman, serif; + font-size: 14px; + line-height: 21px; } .OMLAnnotation.selected .OMLQuote { diff --git a/static/html/oml.html b/static/html/oml.html index 2bb4f9e..5c40f80 100644 --- a/static/html/oml.html +++ b/static/html/oml.html @@ -4,7 +4,6 @@ Open Media Library - diff --git a/static/js/UI.js b/static/js/UI.js index 82e3386..47409d6 100644 --- a/static/js/UI.js +++ b/static/js/UI.js @@ -17,7 +17,8 @@ oml.UI = (function() { var ui = oml.user.ui; function reload() { - ui = oml.config.user.ui; + Ox.Request.clearCache() + oml.user.ui = ui = oml.config.user.ui; ui._list = oml.getListState(ui.find); ui._filterState = oml.getFilterState(ui.find); ui._findState = oml.getFindState(ui.find); diff --git a/static/js/annotation.js b/static/js/annotation.js index 8003e73..98066ea 100644 --- a/static/js/annotation.js +++ b/static/js/annotation.js @@ -2,11 +2,6 @@ oml.ui.annotation = function(annotation, $iframe) { var $quote = Ox.Element().addClass('OxSelectable OMLQuote').css({ - backgroundColor: 'white', - color: 'black', - fontFamily: 'Georgia, Palatino, DejaVu Serif, Book Antiqua, Palatino Linotype, Times New Roman, serif', - fontSize: '14px', - lineHeight: '21px', padding: '8px' }).html(Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '
')).on({ click: function(event) { @@ -16,27 +11,35 @@ oml.ui.annotation = function(annotation, $iframe) { }) } }) + var notes = annotation.notes.length ? annotation.notes.map(function(note) { + note.editable = note.user == '' + return note + }) : [{ + id: 'A', + placeholder: 'Add Note', + value: '', + editable: true + }]; + console.log(annotation.notes) var $note = Ox.ArrayEditable({ editing: true, - items: (annotation.comments || []).map(function(comment) { - comment.editable = true - return comment - }), + items: notes, type: 'textarea' }).css({ margin: '2px', minHeight: '12px' }).bindEvent({ submit: function(data) { - var comment = Ox.getObjectById(annotation.comments, data.id) - if (comment) { - comment.value = data.value - comment.modified = (new Date).toISOString() + var note = Ox.getObjectById(annotation.notes, data.id) + if (note) { + note.value = data.value + note.modified = (new Date).toISOString() } else { - annotation.comments.push({ + annotation.notes.push({ created: data.created || (new Date).toISOString(), modified: (new Date).toISOString(), id: data.id, + user: '', value: data.value }) } @@ -49,6 +52,12 @@ oml.ui.annotation = function(annotation, $iframe) { 'OxSelectable OMLAnnotation' ).css({ borderBottom: '1px solid rgb(208, 208, 208)', + }).bindEvent({ + key_delete: function() { + that.triggerEvent('delete', { + id: annotation.id + }) + } }).append($quote).append($note); that.annotate = function() { @@ -58,11 +67,13 @@ oml.ui.annotation = function(annotation, $iframe) { } that.deselect = function() { that.removeClass('selected') + that.loseFocus() } that.select = function () { let selected = document.querySelector('.OMLAnnotation.selected') selected && selected.classList.remove('selected') that.addClass('selected') + that.gainFocus() } return that; }; diff --git a/static/js/oml.js b/static/js/oml.js index 07be0e2..182c825 100644 --- a/static/js/oml.js +++ b/static/js/oml.js @@ -226,7 +226,9 @@ data.browserSupported = browserSupported; oml.ui = {}; loadOMLFiles(function() { - initOML(data); + Ox.getFile('/static/css/oml.css', function() { + initOML(data); + }) }); }, updatestatus: function(data) { diff --git a/static/js/utils.js b/static/js/utils.js index bdbdb27..94a1003 100644 --- a/static/js/utils.js +++ b/static/js/utils.js @@ -988,7 +988,7 @@ oml.resizeListFolders = function() { // FIXME: does this have to be here? var width = oml.getListFoldersWidth(), columnWidth = width - 16 - 48; - oml.$ui.librariesList + oml.$ui.librariesList && oml.$ui.librariesList .css({width: width + 'px'}) .resizeColumn('name', columnWidth); Ox.forEach(oml.$ui.folder, function($folder, index) { diff --git a/static/js/viewer.js b/static/js/viewer.js index 848364a..98a3598 100644 --- a/static/js/viewer.js +++ b/static/js/viewer.js @@ -41,12 +41,23 @@ oml.ui.viewer = function() { function loadAnnotations(callback) { annotations = JSON.parse(localStorage[item + '.annotations'] || '[]') + annotations.forEach(function(data) { + if (data.comments && !data.notes) { + data.notes = data.comments + delete data.comments + } + data.notes = data.notes || []; + }) callback && callback(annotations) } function saveAnnotations(data) { if (data) { data.created = data.created || (new Date).toISOString(); - data.comments = data.comments || []; + if (data.comments && !data.notes) { + data.notes = data.comments + delete data.comments + } + data.notes = data.notes || []; annotations.push(data); } localStorage[item + '.annotations'] = JSON.stringify(annotations) @@ -63,6 +74,10 @@ oml.ui.viewer = function() { console.log('change...') console.log(annotations) saveAnnotations() + }, + 'delete': function(data) { + oml.$ui.annotationFolder.find('#a-' + data.id).remove() + that.postMessage('removeAnnotation', data) } } @@ -91,9 +106,11 @@ oml.ui.viewer = function() { oml.$ui.annotationFolder.find('#a-' + data.id).remove() removeAnnotation(data.id) } else if (event == 'selectAnnotation') { - console.log('select', data) + var $annotation = oml.$ui.annotationFolder.find('#a-' + data.id) + $annotation.select() } else if (event == 'deselectAnnotation') { - console.log('deselect', data) + var $annotation = oml.$ui.annotationFolder.find('#a-' + data.id) + $annotation.deselect() } else { that.triggerEvent(event, data); } diff --git a/static/reader/epub.js b/static/reader/epub.js index f3a56ad..1372628 100644 --- a/static/reader/epub.js +++ b/static/reader/epub.js @@ -23,6 +23,8 @@ Ox.load({ annotations.push(annotation) renderAnnotation(annotation) }) + } else if (event == 'removeAnnotation') { + removeAnnotation(data.id) } }) }) @@ -47,12 +49,15 @@ function deselectAnnotation(id) { }) } -function removeAnnotation(a) { - annotations = annotations.filter(function(annotation) { - return annotation.cfiRange != a.dataset.epubcfi - }) - reader.rendition.annotations.remove(a.dataset.epubcfi) - Ox.$parent.postMessage('removeAnnotation', {id: a.dataset.id}) +function removeAnnotation(id) { + var a = annotations.filter(function(a) { return a.id == id })[0] + if (a) { + annotations = annotations.filter(function(annotation) { + return annotation.id != id + }) + reader.rendition.annotations.remove(a.cfiRange) + } + Ox.$parent.postMessage('removeAnnotation', {id: id}) } function renderAnnotation(annotation) { @@ -98,7 +103,7 @@ document.onreadystatechange = function () { reader.rendition.on('keydown', function(event) { if (event.key == 'Delete') { document.querySelectorAll('.epubjs-hl.selected').forEach(function(a) { - removeAnnotation(a) + removeAnnotation(a.dataset.id) }) } if (event.key == 'n') { diff --git a/static/reader/pdf.js b/static/reader/pdf.js index 15b4487..44ae07b 100644 --- a/static/reader/pdf.js +++ b/static/reader/pdf.js @@ -32,6 +32,8 @@ Ox.load({ annotations.push(annotation) renderAnnotation(annotation) }) + } else if (event == 'removeAnnotation') { + removeAnnotation(data.id) } }) })