collection icons

This commit is contained in:
j 2019-07-13 16:32:23 +01:00
parent 5eb7d8c99f
commit 5129b75650
4 changed files with 283 additions and 22 deletions

View file

@ -0,0 +1,22 @@
# -*- coding: utf-8 -*-
# Generated by Django 1.9.4 on 2018-06-19 17:23
from __future__ import unicode_literals
import django.contrib.postgres.fields.jsonb
from django.db import migrations, models
def remove_posterframes(apps, schema_editor):
Collection = apps.get_model("documentcollection", "Collection")
for c in Collection.objects.exclude(poster_frames=None):
c.poster_frames = []
c.save()
class Migration(migrations.Migration):
dependencies = [
('documentcollection', '0003_jsonfield'),
]
operations = [
migrations.RunPython(remove_posterframes),
]

View file

@ -265,38 +265,23 @@ class Collection(models.Model):
def update_icon(self): def update_icon(self):
frames = [] frames = []
#fixme
'''
if not self.poster_frames: if not self.poster_frames:
documents = self.get_documents(self.user) documents = self.get_documents(self.user).all()
if documents.count(): if documents.count():
poster_frames = [] poster_frames = []
for i in range(0, documents.count(), max(1, int(documents.count()/4))): for i in range(0, documents.count(), max(1, int(documents.count()/4))):
poster_frames.append({ poster_frames.append({
'document': documents[int(i)].id, 'document': documents[int(i)].get_id(),
'position': documents[int(i)].poster_frame #'page': documents[int(i)]
}) })
self.poster_frames = tuple(poster_frames) self.poster_frames = tuple(poster_frames)
self.save() self.save()
for i in self.poster_frames: for i in self.poster_frames:
from document.models import Document from document.models import Document
qs = Document.objects.filter(id=i['document']) qs = Document.objects.filter(id=ox.fromAZ(i['document']))
if qs.count() > 0: if qs.count() > 0:
if i.get('position'): frame = qs[0].thumbnail(size=1024, page=i.get('page'))
frame = qs[0].frame(i['position'])
if frame:
frames.append(frame) frames.append(frame)
'''
from item.models import Item
for i in self.poster_frames:
try:
qs = Item.objects.filter(public_id=i['item'])
if qs.count() > 0:
frame = qs[0].frame(i['position'])
if frame:
frames.append(frame)
except:
pass
self.icon.name = self.path('icon.jpg') self.icon.name = self.path('icon.jpg')
icon = self.icon.path icon = self.icon.path
if frames: if frames:

View file

@ -0,0 +1,249 @@
'use strict';
pandora.ui.collectionIconPanel = function(listData) {
var quarter = 0,
quarters = ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
ui = pandora.user.ui,
folderItems = pandora.getFolderItems(ui.section),
folderItem = folderItems.slice(0, -1),
$iconPanel = Ox.Element(),
$icon = $('<img>')
.attr({
src: pandora.getListIcon(ui.section, listData.id, 256)
})
.css({position: 'absolute', borderRadius: '64px', margin: '16px'})
.appendTo($iconPanel),
$previewPanel = Ox.Element(),
$preview,
$list = Ox.Element(),
ui = pandora.user.ui,
that = Ox.SplitPanel({
elements: [
{
element: $iconPanel,
size: 280
},
{
element: $previewPanel
},
{
element: $list,
size: 144 + Ox.UI.SCROLLBAR_SIZE
}
],
orientation: 'horizontal'
});
pandora.api['find' + folderItems]({
query: {
conditions: [{key: 'id', value: listData.id, operator: '=='}],
operator: '&'
},
keys: ['posterFrames']
}, function(result) {
var posterFrames = result.data.items[0].posterFrames,
posterFrame = posterFrames[quarter],
$interface = Ox.Element({
tooltip: function(e) {
var quarterName = ($(e.target).attr('id') || '').replace('-', ' ');
return quarterName ? Ox._('Edit ' + quarterName + ' image') : null;
}
})
.css({
position: 'absolute',
width: '256px',
height: '256px',
marginLeft: '16px',
marginTop: '16px',
cursor: 'pointer'
})
.on({
click: function(e) {
clickIcon(e);
},
dblclick: function(e) {
clickIcon(e, true);
}
})
.appendTo($iconPanel);
renderQuarters();
$list = Ox.IconList({
borderRadius: 16,
item: function(data, sort) {
var infoKey = ['title', 'author'].indexOf(sort[0].key) > -1
? pandora.site.documentKeys.filter(function(key) {
return ['year', 'date'].indexOf(key.id) > -1
}).map(function(key) {
return key.id;
})[0] : sort[0],key,
size = 128;
return {
height: size,
id: data.id,
info: data[infoKey] || '',
title: data.title,
url: pandora.getMediaURL('/documents/' + data.id + '/' + size + 'p.jpg?' + data.modified),
width: size
};
},
items: function(data, callback) {
var listData = pandora.getListData();
pandora.api.findDocuments(Ox.extend(data, {
query: {
conditions: [{key: 'collection', value: listData.id, operator: '=='}],
operator: '&'
}
}), callback);
},
keys: ['duration', 'id', 'modified', 'title'],
max: 1,
min: 1,
//orientation: 'vertical',
selected: posterFrame ? [posterFrame.document] : [],
size: 128,
sort: ui.collectionSort,
unique: 'id'
})
//.css({width: '144px'})
.bindEvent({
open: function(data) {
setPosterFrame(data.ids[0], $list.value(data.ids[0], 'posterFrame'))
},
select: function(data) {
renderPreview($list.value(data.ids[0]));
}
})
.bindEventOnce({
load: function() {
var itemData;
if (!posterFrame) {
itemData = $list.value(0);
$list.options({selected: [itemData.id]});
} else {
itemData = $list.value(posterFrame.item);
}
itemData && renderPreview(itemData);
}
})
.gainFocus();
that.replaceElement(2, $list);
function clickIcon(e, isDoubleClick) {
quarter = quarters.indexOf($(e.target).attr('id'));
renderQuarters();
if (isDoubleClick && posterFrames.length) {
var item = posterFrames[quarter].item;
$list.options({selected: [item]});
renderPreview($list.value(item), posterFrames[quarter].page);
}
}
function renderPreview(itemData, page) {
var size = 256;
if (itemData.id) {
$preview = Ox.Element('<img>').attr({
src: pandora.getMediaURL('/documents/' + itemData.id + '/' + size + 'p.jpg?' + itemData.modified),
})
.css({
width: size + 'px',
height: size + 'px',
marginLeft: '8px', marginTop: '16px', overflow: 'hidden'
})
.on({
click: function(d) {
setPosterFrame(itemData.id);
}
});
} else {
$preview = Ox.Element()
}
$previewPanel.empty().append($preview);
}
function renderQuarters() {
$interface.empty();
quarters.forEach(function(q, i) {
$interface.append(
$('<div>')
.attr({id: q})
.css({
float: 'left',
width: '126px',
height: '126px',
border: '1px solid rgba(255, 255, 255, ' + (i == quarter ? 0.75 : 0) + ')',
background: 'rgba(0, 0, 0, ' + (i == quarter ? 0 : 0.75) + ')'
})
.css('border-' + q + '-radius', '64px')
);
});
}
function setPosterFrame(document, page) {
var posterFrame = {document: document, page: page};
if (posterFrames.length) {
posterFrames[quarter] = posterFrame;
} else {
posterFrames = Ox.range(4).map(function() { return Ox.clone(posterFrame); } );
}
pandora.api['edit' + folderItem]({
id: listData.id,
posterFrames: posterFrames
}, function() {
$icon.attr({
src: pandora.getListIcon(ui.section, listData.id, 256)
});
pandora.$ui.folderList[listData.folder].$element
.find('img[src*="'
+ pandora.getMediaURL('/' + encodeURIComponent(listData.id))
+ '/"]'
)
.attr({
src: pandora.getListIcon(ui.section, listData.id, 256)
});
pandora.$ui.info.updateListInfo();
});
$preview.options({page: page});
}
});
function renderFrame() {
$frame.css({borderRadius: 0});
$frame.css('border-' + quarters[quarter] + '-radius', '128px');
}
that.updateQuery = function(key, value) {
$list.options({
items: function(data, callback) {
pandora.api.find(Ox.extend(data, {
query: {
conditions: [{key: 'collection', value: listData.id, operator: '=='}].concat(
value !== ''
? [{key: key, value: value, operator: '='}]
: []
),
operator: '&'
}
}), callback);
}
});
};
return that;
}

View file

@ -22,7 +22,12 @@ pandora.ui.listDialog = function(section) {
if (id == 'general') { if (id == 'general') {
return pandora.ui.listGeneralPanel(listData); return pandora.ui.listGeneralPanel(listData);
} else if (id == 'icon') { } else if (id == 'icon') {
return pandora.$ui.listIconPanel = pandora.ui.listIconPanel(listData); if (pandora.user.ui.section == 'documents') {
pandora.$ui.listIconPanel = pandora.ui.collectionIconPanel(listData);
} else {
pandora.$ui.listIconPanel = pandora.ui.listIconPanel(listData);
}
return pandora.$ui.listIconPanel
} else if (id == 'query') { } else if (id == 'query') {
return pandora.$ui.filterForm = (pandora.user.ui.section == 'documents' return pandora.$ui.filterForm = (pandora.user.ui.section == 'documents'
? pandora.ui.documentFilterForm ? pandora.ui.documentFilterForm