383 lines
12 KiB
JavaScript
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;
|
|
|
|
};
|