pandora/static/js/homeDialog.js
2017-02-09 03:50:27 +00:00

383 lines
12 KiB
JavaScript

'use strict';
pandora.ui.homeDialog = function() {
var items = [];
var autocompleteData = {};
var $folders = $('<div>').css({overflowX: 'hidden', overflowY: 'auto'});
var $item = $('<div>').addClass('OxTextPage');
var $form = $('<div>');
var $title, $text, $typeSelect, $imageInput, $linkInput, $nameInput;
var $dialogPanel = Ox.SplitPanel({
elements: [
{element: $folders, resizable: true, resize: [256], size: 256},
{element: $item},
{element: $form, resizable: true, resize: [256], size: 256}
],
orientation: 'horizontal'
})
var that = Ox.Dialog({
buttons: [
Ox.Button({
id: 'done',
title: Ox._('Done')
}).bindEvent({
click: function() {
that.close();
}
})
],
closeButton: true,
content: $dialogPanel,
height: 256, //576,
removeOnClose: true,
title: Ox._('Manage Home Screen'),
width: 1050 // 256 + 17 + 512 + 17 + 256
});
pandora.api.getHomeItems({}, function(result) {
getAutocompleteData(function() {
items = result.data.items;
var selected = items.length ? items[0].id : null;
renderFolders(result.data.items, selected);
if (selected) {
var item = Ox.getObjectById(items, selected)
renderItem(item);
renderForm(item);
}
});
});
function editItem(id, key, value) {
var title = $title.value();
var text = $text.value();
var type = $typeSelect.value();
if (type == 'custom') {
var image = $imageInput.value();
var link = $linkInput.value();
} else {
var name = $nameInput.value();
title = true;
text = true;
key = 'contentid';
}
if (
!title || !text
|| (type == 'custom' && (!image || !link))
|| (type != 'custom' && !name)
) {
return;
}
Ox.print('id', id, 'k', key, 'v', value);
var data = {id: id};
data[key] = value;
if (key == 'contentid') {
data.type = type;
}
pandora.api.editHomeItem(data, function(result) {
Ox.Request.clearCache(); // FIXME: too much?
items.some(function(item) {
if (item.id == id) {
item[key] = value;
if (key == 'contentid') {
item.image = result.data.image;
item.text = result.data.text;
item.title = result.data.title;
renderItem(item);
}
return true;
};
});
});
}
function getAutocompleteData(callback) {
Ox.parallelForEach(
['list', 'edit', 'collection'],
function(value, index, array, callback) {
pandora.api['find' + Ox.toTitleCase(value) + 's']({
keys: ['id'],
query: {
conditions: [
{key: 'status', operator: '!=', value: 'private'}
],
operator: '&'
},
range: [0, 1000]
}, function(result) {
autocompleteData[value] = result.data.items.map(function(item) {
return item.id;
});
callback();
});
},
callback
);
}
function renderFolder(type, items, selected) {
var extras = [
Ox.MenuButton({
items: [
{id: 'newitem', title: Ox._(
'New ' + (type == 'active' ? 'Active' : 'Inactive') + ' Item'
)},
{id: 'deleteitem', title: Ox._('Delete Selected Item')}
],
title: 'edit',
tooltip: Ox._('Manage Items'),
type: 'image'
}).bindEvent({
click: function(data) {
if (data.id == 'newitem') {
// ...
} else if (data.id == 'deleteitem') {
// ...
}
}
})
];
var $folder = Ox.CollapsePanel({
collapsed: false,
extras: extras,
size: 16,
title: Ox._((type == 'active' ? 'Active' : 'Inactive') + ' Items')
}).bindEvent({
toggle: function(data) {
data.collapsed && $list.loseFocus();
}
});
var $placeholder = Ox.Element().addClass('OxLight').css({
height: '14px',
padding: '1px 4px',
}).html(Ox._('No items')).hide().appendTo($folder.$content)
var $list = renderList(items.filter(function(item) {
return item.active == (type == 'active');
}), selected).bindEventOnce({
init: function(data) {
$placeholder[data.items ? 'hide' : 'show']();
$folder.$content.css({
height: (data.items || 1) * 16 + 'px'
});
}
}).appendTo($folder.$content);
return $folder;
}
function renderFolders(items, selected) {
$folders.empty();
['active', 'inactive'].forEach(function(type) {
var $folder = renderFolder(type, items, selected).appendTo($folders);
});
}
function renderForm(data, focus) {
$form.empty();
$typeSelect = Ox.Select({
items: [
{id: 'custom', title: Ox._('Custom')},
{id: 'list', title: Ox._('List')},
{id: 'edit', title: Ox._('Edit')},
{id: 'collection', title: Ox._('Collection')}
],
label: Ox._('Type'),
labelWidth: 80,
value: data.type,
width: 240
}).css({
margin: '8px'
}).bindEvent({
change: function(data_) {
var item = {id: data.id, type: data_.value};
renderItem(item);
renderForm(item, true);
}
}).appendTo($form);
if (data.type == 'custom') {
$imageInput = Ox.Input({
label: Ox._('Image URL'),
labelWidth: 80,
value: data.image || '',
width: 240
}).css({
margin: '8px'
}).bindEvent({
change: function(data_) {
editItem(data.id, 'image', data_.value);
}
}).appendTo($form);
$linkInput = Ox.Input({
label: Ox._('Link URL'),
labelWidth: 80,
value: data.link || '',
width: 240
}).css({
margin: '8px'
}).bindEvent({
change: function(data_) {
editItem(data.id, 'link', data_.value);
}
}).appendTo($form);
} else {
$nameInput = Ox.Input({
autocomplete: autocompleteData[data.type],
autocompleteSelect: true,
autocompleteSelectMaxWidth: 256,
label: Ox._('Name'),
labelWidth: 80,
value: data.contentid || '',
width: 240
}).css({
margin: '8px'
}).bindEvent({
change: function(data_) {
editItem(data.id, 'name', data_.value);
}
}).appendTo($form);
}
if (focus) {
(data.type == 'custom' ? $imageInput : $nameInput).focusInput();
}
}
function renderItem(data) {
$item.empty();
if (data.image) {
var $image = $('<img>').attr({
src: data.image
}).css({
borderRadius: '32px',
float: 'left',
height: '128px',
margin: '12px',
width: '128px'
}).appendTo($item)
} else {
var $placeholder = $('<div>').css({
border: 'dotted 1px rgb(0, 0, 0)', // FIXME: make themes
borderRadius: '32px',
height: '128px',
margin: '8px',
width: '128px'
}).appendTo($item);
}
var $container = $('<div>').css({
margin: '10px 12px 8px 0'
}).appendTo($item);
var title = data.title ? (
(
data.type == 'custom' ? ''
: Ox._('Featured ' + Ox.toTitleCase(data.type) + ': ')
) + data.title
) : '';
$title = Ox.EditableContent({
editable: data.type == 'custom',
placeholder: '<span class="OxLight">' + Ox._('Title') + '</span>',
value: title
}).css({
fontSize: '13px',
fontWeight: 'bold'
}).bindEvent({
submit: function(data_) {
editItem(data.id, 'title', data_.value);
//fixme: update list
}
}).appendTo($container);
$text = Ox.EditableContent({
editable: data.type == 'custom',
placeholder: '<span class="OxLight">' + Ox._('Text') + '</span>',
type: 'textarea',
value: data.text || ''
}).css({
margin: '0 12px 0 0'
}).bindEvent({
submit: function(data_) {
editItem(data.id, 'text', data_.value);
}
}).appendTo($item);
}
function renderList(items, selected) {
var $list = Ox.TableList({
columns: [
{
id: 'image',
format: function(value) {
return $('<img>').attr({
src: value
}).css({
borderRadius: '4px',
height: '14px',
margin: '0 0 0 -2px',
width: '14px',
})
},
visible: true,
width: 16,
},
{
id: 'title',
visible: true,
width: 224
},
{
id: 'active',
format: function(value) {
return value ? $('<img>').attr({
src: Ox.UI.getImageURL('symbolCheck')
}).css({
width: '10px',
height: '10px',
padding: '3px'
}) : ''
},
visible: true,
width: 16
}
],
items: items,
max: 1,
selected: [selected],
sort: [{key: 'index', operator: '+'}],
sortable: true,
unique: 'id'
})
.bindEvent({
select: function(data) {
if (data.ids.length) {
var item = Ox.getObjectById(items, data.ids[0])
renderItem(item);
renderForm(item);
}
},
selectafter: function() {
// ...
},
selectbefore: function() {
// ...
},
move: function(data) {
pandora.api.sortHomeItems({
ids: data.ids
}, function() {
Ox.Request.clearCache('HomeItems');
});
}
})
.css({
width: '256px'
});
return $list;
}
return that;
};