This commit is contained in:
rlx 2019-01-29 16:12:46 +05:30
commit 760494dd6d
57 changed files with 224 additions and 155 deletions

View file

@ -1,34 +1,56 @@
'use strict';
oml.ui.annotation = function(data, $iframe) {
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(data.text).replace(/\n/g, '<br/>')).on({
}).html(Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '<br/>')).on({
click: function(event) {
that.select()
$iframe.postMessage('selectAnnotation', {
id: data.id
id: annotation.id
})
}
})
var $note = Ox.Editable({
var $note = Ox.ArrayEditable({
editing: true,
items: (annotation.comments || []).map(function(comment) {
comment.editable = true
return comment
}),
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()
} else {
annotation.comments.push({
created: data.created || (new Date).toISOString(),
modified: (new Date).toISOString(),
id: data.id,
value: data.value
})
}
that.triggerEvent('change')
}
});
var that = Ox.Element().attr({
id: 'a-' + data.id
id: 'a-' + annotation.id
}).addClass(
'OxSelectable OMLAnnotation'
).css({
borderBottom: '1px solid rgb(208, 208, 208)',
}).append($quote).append($note);
that.annotate = function() {
var item = {
id: 'note', value: '', editable: true

View file

@ -3,8 +3,9 @@ oml.ui.annotationFolder = function() {
var ui = oml.user.ui,
that = Ox.Element().css({
overflowY: 'auto',
overflowX: 'hidden',
});
return that;
};
};

View file

@ -13,7 +13,7 @@ oml.ui.folderList = function(options) {
src: Ox.UI.getImageURL(
value == 'libraries' ? 'symbolData'
: value == 'library' ? 'symbolUser'
: data.name == 'Public' ? 'symbolPublish'
: data.name == 'Inbox' ? 'symbolPublish'
: value == 'static' ? 'symbolClick'
: 'symbolFind'
)

View file

@ -42,7 +42,7 @@ oml.ui.folders = function() {
}).indexOf(list.user) : null;
return list.id == '' ? oml.$ui.librariesList
: Ox.endsWith(list.id, ':') ? oml.$ui.libraryList[index]
: Ox.endsWith(list.id, ':Public') ? oml.$ui.publicList[index]
: Ox.endsWith(list.id, ':Inbox') ? oml.$ui.inboxList[index]
: oml.$ui.folderList[index];
}
@ -66,7 +66,7 @@ oml.ui.folders = function() {
!list ? 'libraryList'
: 'folderList'
][index]
: list == 'Public' ? oml.$ui.publicList[index]
: list == 'Inbox' ? oml.$ui.inboxList[index]
: oml.$ui.folderList[index];
$lists.forEach(function($list) {
if ($list == $selectedList) {
@ -87,7 +87,7 @@ oml.ui.folders = function() {
oml.$ui.folder = [];
oml.$ui.libraryList = [];
oml.$ui.folderList = [];
oml.$ui.publicList = [];
oml.$ui.inboxList = [];
getUsersAndLists(function(users, lists) {
@ -120,10 +120,11 @@ oml.ui.folders = function() {
var $content,
items = lists.filter(function(list) {
return list.user === user.name
&& list.type != 'library' && list.name != 'Public';
&& list.type != 'library' && list.name != 'Inbox';
}),
libraryId = user.name + ':',
publicId = user.name + ':Public';
inboxId = user.name + ':Inbox',
offset = 16;
userIndex[user.name] = index;
@ -175,7 +176,8 @@ oml.ui.folders = function() {
$content = oml.$ui.folder[index].$content
.css({
height: (2 + items.length) * 16 + 'px'
// user also has inbox
height: ((index ? 1 : 2) + items.length) * 16 + 'px'
});
$lists.push(
@ -193,7 +195,7 @@ oml.ui.folders = function() {
oml.UI.set({find: getFind(data.ids[0])});
},
selectnext: function() {
oml.UI.set({find: getFind(publicId)});
oml.UI.set({find: getFind(inboxId)});
},
selectprevious: function() {
// FIXME: ugly
@ -216,27 +218,29 @@ oml.ui.folders = function() {
})
.appendTo($content)
);
$lists.push(
oml.$ui.publicList[index] = oml.ui.folderList({
items: lists.filter(function(list) {
return list.user == user.name && list.name == 'Public';
if (user.name == '') {
$lists.push(
oml.$ui.inboxList[index] = oml.ui.folderList({
items: lists.filter(function(list) {
return list.user == user.name && list.name == 'Inbox';
})
})
})
.bindEvent({
select: function(data) {
oml.UI.set({find: getFind(data.ids[0])});
},
selectnext: function() {
oml.UI.set({find: getFind(items[0].id)});
},
selectprevious: function() {
oml.UI.set({find: getFind(libraryId)});
}
})
.appendTo($content)
);
oml.$ui.publicList[index].$body.css({top: '16px'});
.bindEvent({
select: function(data) {
oml.UI.set({find: getFind(data.ids[0])});
},
selectnext: function() {
oml.UI.set({find: getFind(items[0].id)});
},
selectprevious: function() {
oml.UI.set({find: getFind(libraryId)});
}
})
.appendTo($content)
);
oml.$ui.inboxList[index].$body.css({top: offset + 'px'});
offset += 16;
}
$lists.push(
oml.$ui.folderList[index] = oml.ui.folderList({
@ -258,7 +262,7 @@ oml.ui.folders = function() {
}
},
'delete': function(data) {
!index && !Ox.contains(data.ids, ':Public') && oml.ui.deleteListDialog().open();
!index && !Ox.contains(data.ids, ':Inbox') && oml.ui.deleteListDialog().open();
},
key_control_d: function() {
oml.addList(ui._list);
@ -275,7 +279,7 @@ oml.ui.folders = function() {
});
},
open: function(data) {
!index && !Ox.contains(data.ids, ':Public') && oml.ui.listDialog().open();
!index && !Ox.contains(data.ids, ':Inbox') && oml.ui.listDialog().open();
},
select: function(data) {
oml.UI.set({find: getFind(data.ids[0])});
@ -290,14 +294,14 @@ oml.ui.folders = function() {
}
},
selectprevious: function() {
oml.UI.set({find: getFind(publicId)});
oml.UI.set({find: getFind(inboxId)});
}
})
.css({height: items.length * 16 + 'px'})
.appendTo($content)
);
oml.$ui.folderList[index].$body.css({top: '32px'});
oml.$ui.folderList[index].$body.css({top: offset + 'px'});
});
@ -353,7 +357,7 @@ oml.ui.folders = function() {
oml.$ui.folder[index].options({title: Ox.encodeHTMLEntities(name)});
oml.getLists(function(lists) {
var items = lists.filter(function(list) {
return list.user == name && list.type != 'library' && list.name != 'Public';
return list.user == name && list.type != 'library' && list.name != 'Inbox';
}),
library = lists.filter(function(list) {
return list.user == name && list.type == 'library';
@ -362,8 +366,9 @@ oml.ui.folders = function() {
oml.$ui.libraryList[index].options({
items: library
});
// library + inbox + lists
oml.$ui.folder[index].$content
.css({height: 16 + items.length * 16 + 'px'});
.css({height: (index ? 16 : 32) + items.length * 16 + 'px'});
oml.$ui.folderList[index].options({
items: items
})

View file

@ -601,6 +601,7 @@ oml.ui.mainMenu = function() {
that[data.value ? 'enableItem' : 'disableItem']('book');
that[data.value ? 'disableItem' : 'enableItem']('showfilters');
that[data.value ? 'enableItem' : 'disableItem']('showbrowser');
that[data.value ? 'enableItem' : 'disableItem']('showannotations');
}
},
oml_itemview: function(data) {
@ -955,7 +956,7 @@ oml.ui.mainMenu = function() {
isLibrary = Ox.endsWith(ui._list, ':'),
isList = !isLibraries && !isLibrary,
isOwnList = ui._list[0] == ':',
isPublic = ui._list == ':Public';
isInbox = ui._list == ':Inbox';
if (oml.readOnly) {
return {
@ -1019,13 +1020,13 @@ oml.ui.mainMenu = function() {
id: 'editlist',
title: Ox._('Edit List...'),
keyboard: 'return',
disabled: !isList || !isOwnList || isPublic
disabled: !isList || !isOwnList || isInbox
},
{
id: 'deletelist',
title: Ox._('Delete List...'),
keyboard: 'delete',
disabled: !isList || !isOwnList || isPublic
disabled: !isList || !isOwnList || isInbox
}
])
};

View file

@ -316,7 +316,7 @@ oml.enableDragAndDrop = function($list, canMove) {
$list.bindEvent({
draganddropstart: function(data) {
var $lists = oml.$ui.libraryList.concat(oml.$ui.publicList).concat(oml.$ui.folderList);
var $lists = oml.$ui.libraryList.concat(oml.$ui.inboxList).concat(oml.$ui.folderList);
drag.action = 'copy';
drag.ids = $list.options('selected');
drag.item = drag.ids.length == 1
@ -335,9 +335,9 @@ oml.enableDragAndDrop = function($list, canMove) {
&& drag.source.user != ''
&& data.user == ''
) || (
data.type == 'static'
&& data.name == 'Public'
data.type == 'library'
&& drag.source.user == ''
&& data.user != ''
),
selected: data.id == ui._list
}, data);
@ -492,8 +492,12 @@ oml.enableDragAndDrop = function($list, canMove) {
text = Ox._('You cannot move books<br>out of a smart list.');
}
} else if (drag.target) {
console.log(drag.target)
targetText = drag.target.type == 'libraries' ? Ox._('a library')
: drag.target.type == 'library' ? Ox._('your library')
: drag.target.type == 'library' ?
drag.target.user == ''
? Ox._('your library')
: Ox._('{0}\'s library', [Ox.encodeHTMLEntities(Ox.truncate(drag.target.user, 32))])
: Ox._('the list "{0}"', [Ox.encodeHTMLEntities(Ox.truncate(drag.target.name, 32))]);
if (
(
@ -507,7 +511,7 @@ oml.enableDragAndDrop = function($list, canMove) {
Ox._(itemText[0] == '"' ? '' : 'These ') + itemText,
targetText
]);
} else if (drag.target.user != '' && drag.target.name != 'Public') {
} else if (drag.target.user != '' && drag.target.type != 'library') {
text = Ox._(
'You can only {0} books<br>to your own {1}.',
[actionText, drag.target.type == 'library' ? 'library' : 'lists']
@ -992,7 +996,7 @@ oml.resizeListFolders = function() {
oml.$ui.libraryList[index]
.css({width: width + 'px'})
.resizeColumn('name', columnWidth);
oml.$ui.publicList[index]
oml.$ui.inboxList[index] && oml.$ui.inboxList[index]
.css({width: width + 'px'})
.resizeColumn('name', columnWidth);
oml.$ui.folderList[index]

View file

@ -46,6 +46,7 @@ oml.ui.viewer = function() {
function saveAnnotations(data) {
if (data) {
data.created = data.created || (new Date).toISOString();
data.comments = data.comments || [];
annotations.push(data);
}
localStorage[item + '.annotations'] = JSON.stringify(annotations)
@ -57,6 +58,14 @@ oml.ui.viewer = function() {
saveAnnotations()
}
var annotationEvents = {
change: function() {
console.log('change...')
console.log(annotations)
saveAnnotations()
}
}
that.updateElement = function() {
item = ui.item;
if (item && item.length) {
@ -75,7 +84,7 @@ oml.ui.viewer = function() {
if (event == 'addAnnotation') {
console.log('adding', data.id)
saveAnnotations(data);
var $annotation = oml.ui.annotation(data, $iframe)
var $annotation = oml.ui.annotation(data, $iframe).bindEvent(annotationEvents)
oml.$ui.annotationFolder.append($annotation);
$annotation.annotate();
} else if (event == 'removeAnnotation') {
@ -93,7 +102,7 @@ oml.ui.viewer = function() {
init: function() {
loadAnnotations(function(annotations) {
annotations.forEach(function(data) {
var $annotation = oml.ui.annotation(data, $iframe)
var $annotation = oml.ui.annotation(data, $iframe).bindEvent(annotationEvents)
oml.$ui.annotationFolder.append($annotation);
})
// fixme: trigger loaded event from reader instead?

View file

@ -11,14 +11,21 @@ Ox.load({
console.log('got', event, 'data', data)
if (event == 'selectAnnotation') {
var annotation = annotations.filter(function(a) { return a.id == data.id })[0]
var delay = 0
if (
annotation &&
annotation.page &&
PDFViewerApplication.pdfViewer.currentPageNumber != annotation.page
) {
//FIXME: scroll into view
PDFViewerApplication.pdfViewer.currentPageNumber = annotation.page;
delay = 250
}
setTimeout(function() {
var el = document.querySelector('.a' + annotation.id);
if (el) {
document.querySelector('#viewerContainer').scrollTop = el.offsetTop + el.parentElement.offsetTop - 64;
}
}, delay)
selectAnnotation(data.id)
} else if (event == 'addAnnotations') {
data.annotations.forEach(function(annotation) {
@ -144,7 +151,7 @@ function removeAnnotation(id) {
annotations = annotations.filter(function(annotation) {
return annotation.id != id
})
Ox.$parent.postMessage('removeAnnotation', {id: selected.dataset.id})
Ox.$parent.postMessage('removeAnnotation', {id: id})
}
function loadAnnotations(page) {