render search result highlights as images and show in pages view
This commit is contained in:
parent
57d3fc0d32
commit
48e6d4af6f
8 changed files with 273 additions and 12 deletions
|
|
@ -153,7 +153,8 @@ pandora.ui.collection = function() {
|
|||
id: data.id,
|
||||
pages: data.pages,
|
||||
query: ui.findDocuments,
|
||||
ratio: data.ratio
|
||||
ratio: data.ratio,
|
||||
title: data.title
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -164,7 +165,7 @@ pandora.ui.collection = function() {
|
|||
}), callback);
|
||||
return Ox.clone(data, true);
|
||||
},
|
||||
keys: ['id', 'pages', 'title', 'ratio', 'modified'],
|
||||
keys: ['pages'].concat(keys),
|
||||
selected: ui.listSelection,
|
||||
size: 192,
|
||||
sort: ui.collectionSort.concat([
|
||||
|
|
|
|||
|
|
@ -25,8 +25,12 @@ pandora.ui.documentPages = function(options) {
|
|||
self.width = self.options.ratio > 1 ? self.size : Math.round(self.size * self.options.ratio);
|
||||
self.height = self.options.ratio > 1 ? Math.round(self.size / self.options.ratio) : self.size;
|
||||
|
||||
function renderPage(page) {
|
||||
function renderPage(page, query) {
|
||||
self.pages.push(page)
|
||||
var url = `/documents/${self.options.id}/${self.size}p${page}.jpg`
|
||||
if (query) {
|
||||
url += '?q=' + encodeURIComponent(query)
|
||||
}
|
||||
var $item = Ox.IconItem({
|
||||
imageHeight: self.height,
|
||||
imageWidth: self.width,
|
||||
|
|
@ -45,12 +49,11 @@ pandora.ui.documentPages = function(options) {
|
|||
that.append($item);
|
||||
}
|
||||
|
||||
function renderPages(pages) {
|
||||
console.log('renderPages', pages, self.options.pages)
|
||||
function renderPages(pages, query) {
|
||||
self.pages = []
|
||||
if (pages) {
|
||||
console.log('renderPages', pages)
|
||||
pages.forEach(page => {
|
||||
renderPage(page.page)
|
||||
renderPage(page.page, query)
|
||||
})
|
||||
} else {
|
||||
if (self.options.pages > 1) {
|
||||
|
|
@ -78,7 +81,7 @@ pandora.ui.documentPages = function(options) {
|
|||
range: [0, 100],
|
||||
keys: ['page']
|
||||
}, function(result) {
|
||||
renderPages(result.data.items)
|
||||
renderPages(result.data.items, pandora.getFulltextQuery())
|
||||
})
|
||||
} else {
|
||||
renderPages()
|
||||
|
|
@ -97,7 +100,31 @@ pandora.ui.documentPages = function(options) {
|
|||
}
|
||||
|
||||
function singleclick(data) {
|
||||
// ..
|
||||
var $item, $target = $(data.target), annotation, item, points, set;
|
||||
if ($target.parent().parent().is('.OxSpecialTarget')) {
|
||||
$target = $target.parent().parent();
|
||||
}
|
||||
if ($target.is('.OxSpecialTarget')) {
|
||||
$item = $target.parent().parent();
|
||||
var page = $item.data('page')
|
||||
if (!pandora.$ui.pageDialog) {
|
||||
pandora.$ui.pageDialog = pandora.ui.pageDialog({
|
||||
document: self.options.id,
|
||||
page: page,
|
||||
pages: self.pages,
|
||||
query: pandora.getFulltextQuery(),
|
||||
dimensions: [self.width, self.height],
|
||||
title: self.options.title,
|
||||
size: self.size
|
||||
});
|
||||
pandora.$ui.pageDialog.open()
|
||||
} else {
|
||||
pandora.$ui.pageDialog.update({
|
||||
page: page,
|
||||
pages: self.pages,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return that;
|
||||
|
|
|
|||
167
static/js/pageDialog.js
Normal file
167
static/js/pageDialog.js
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
'use strict';
|
||||
|
||||
|
||||
pandora.ui.pageDialog = function(options, self) {
|
||||
self = self || {}
|
||||
self.options = Ox.extend({
|
||||
}, options);
|
||||
|
||||
console.log(options)
|
||||
|
||||
var dialogHeight = Math.round((window.innerHeight - 48) * 0.9) - 24,
|
||||
dialogWidth = Math.round(window.innerWidth * 0.9) - 48,
|
||||
isItemView = !pandora.$ui.documentsDialog,
|
||||
|
||||
$content = Ox.Element(),
|
||||
|
||||
that = Ox.Dialog({
|
||||
closeButton: true,
|
||||
content: $content,
|
||||
focus: false,
|
||||
height: dialogHeight,
|
||||
maximizeButton: true,
|
||||
minHeight: 256,
|
||||
minWidth: 512,
|
||||
padding: 0,
|
||||
removeOnClose: true,
|
||||
title: '',
|
||||
width: dialogWidth
|
||||
})
|
||||
.bindEvent({
|
||||
close: function() {
|
||||
delete pandora.$ui.pageDialog;
|
||||
},
|
||||
resize: function(data) {
|
||||
dialogHeight = data.height;
|
||||
dialogWidth = data.width;
|
||||
$content.options({
|
||||
height: dialogHeight,
|
||||
width: dialogWidth
|
||||
});
|
||||
},
|
||||
}),
|
||||
|
||||
$infoButton = Ox.Button({
|
||||
title: 'info',
|
||||
tooltip: Ox._('Open PDF'),
|
||||
type: 'image'
|
||||
})
|
||||
.css({
|
||||
position: 'absolute',
|
||||
right: '24px',
|
||||
top: '4px'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function(data) {
|
||||
that.close();
|
||||
pandora.URL.push(`/documents/${self.options.document}/${self.options.page}`);
|
||||
}
|
||||
}),
|
||||
|
||||
$selectButton = Ox.ButtonGroup({
|
||||
buttons: [
|
||||
{id: 'previous', title: 'left', tooltip: Ox._('Previous')},
|
||||
{id: 'next', title: 'right', tooltip: Ox._('Next')}
|
||||
],
|
||||
type: 'image'
|
||||
})
|
||||
.css({
|
||||
position: 'absolute',
|
||||
right: '44px',
|
||||
top: '4px'
|
||||
})
|
||||
[self.options.pages.length > 1 ? 'show' : 'hide']()
|
||||
.bindEvent({
|
||||
click: function(data) {
|
||||
var pageIdx = self.options.pages.indexOf(self.options.page)
|
||||
if (data.id == 'previous') {
|
||||
pageIdx--
|
||||
} else {
|
||||
pageIdx++
|
||||
}
|
||||
if (pageIdx < 0) {
|
||||
pageIdx = self.options.pages.length - 1
|
||||
} else if (pageIdx >= self.options.pages.length) {
|
||||
pageIdx = 0
|
||||
}
|
||||
that.update({
|
||||
page: self.options.pages[pageIdx]
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
$(that.find('.OxBar')[0])
|
||||
.append($infoButton)
|
||||
.append($selectButton);
|
||||
// fixme: why is this needed?
|
||||
$(that.find('.OxContent')[0]).css({overflow: 'hidden'});
|
||||
|
||||
setTitle();
|
||||
setContent();
|
||||
|
||||
function setContent() {
|
||||
var url = `/documents/${self.options.document}/1024p${self.options.page}.jpg`
|
||||
if (self.options.query) {
|
||||
url += '?q=' + encodeURIComponent(self.options.query)
|
||||
}
|
||||
$content.replaceWith(
|
||||
$content = (
|
||||
Ox.ImageViewer({
|
||||
area: [],
|
||||
height: dialogHeight,
|
||||
imageHeight: self.options.dimensions[1],
|
||||
imagePreviewURL: url.replace('/1024p', `/${self.options.size}p`),
|
||||
imageURL: url,
|
||||
imageWidth: self.options.dimensions[0],
|
||||
width: dialogWidth
|
||||
})
|
||||
)
|
||||
.bindEvent({
|
||||
center: function(data) {
|
||||
/*
|
||||
pandora.UI.set(
|
||||
'documents.' + item.id,
|
||||
{position: $content.getArea().map(Math.round)}
|
||||
);
|
||||
*/
|
||||
},
|
||||
key_escape: function() {
|
||||
pandora.$ui.pageDialog.close();
|
||||
},
|
||||
page: function(data) {
|
||||
/*
|
||||
pandora.UI.set(
|
||||
'documents.' + item.id,
|
||||
{position: data.page}
|
||||
);
|
||||
*/
|
||||
},
|
||||
zoom: function(data) {
|
||||
/*
|
||||
pandora.UI.set(
|
||||
'documents.' + item.id,
|
||||
{position: $content.getArea().map(Math.round)}
|
||||
);
|
||||
*/
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
function setTitle() {
|
||||
that.options({
|
||||
title: (self.options.title || "") + " Page " + self.options.page
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
that.update = function(options) {
|
||||
self.options = Ox.extend(self.options, options)
|
||||
setTitle();
|
||||
setContent();
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
||||
|
|
@ -1470,6 +1470,17 @@ pandora.getFindLayer = function() {
|
|||
return key
|
||||
};
|
||||
|
||||
pandora.getFulltextQuery = function() {
|
||||
if (pandora.user.ui.findDocuments) {
|
||||
var conditions = pandora.user.ui.findDocuments.conditions.filter(condition => {
|
||||
return condition.key == 'fulltext'
|
||||
})
|
||||
if (conditions.length) {
|
||||
return conditions[0].value
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
pandora.getHash = function(state, callback) {
|
||||
// FIXME: remove this
|
||||
var embedKeys = [
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue