collection icons
This commit is contained in:
parent
5eb7d8c99f
commit
5129b75650
4 changed files with 283 additions and 22 deletions
22
pandora/documentcollection/migrations/0004_jsonfield.py
Normal file
22
pandora/documentcollection/migrations/0004_jsonfield.py
Normal 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),
|
||||||
|
]
|
||||||
|
|
@ -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:
|
||||||
|
|
|
||||||
249
static/js/collectionIconPanel.js
Normal file
249
static/js/collectionIconPanel.js
Normal 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;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue