pandora/static/js/homeDialog.js

421 lines
14 KiB
JavaScript
Raw Normal View History

2017-01-26 18:15:00 +00:00
'use strict';
pandora.ui.homeDialog = function() {
2017-02-09 02:55:31 +00:00
var items = [];
2017-01-26 18:15:00 +00:00
2017-02-09 02:55:31 +00:00
var autocompleteData = {};
var $folders = $('<div>').css({overflowX: 'hidden', overflowY: 'auto'});
2017-02-15 17:44:59 +00:00
var $activeList, $inactiveList, $activeMenu, $inactiveMenu;
var $item = $('<div>').addClass('OxTextPage').css({overflow: 'auto'});
2017-02-09 02:55:31 +00:00
var $form = $('<div>');
2017-02-15 17:44:59 +00:00
var $statusSelect, $typeSelect, $imageInput, $linkInput, $nameInput;
2017-01-26 18:15:00 +00:00
var $dialogPanel = Ox.SplitPanel({
elements: [
2017-02-09 02:55:31 +00:00
{element: $folders, resizable: true, resize: [256], size: 256},
{element: $item},
{element: $form, resizable: true, resize: [256], size: 256}
2017-01-26 18:15:00 +00:00
],
orientation: 'horizontal'
})
var that = Ox.Dialog({
buttons: [
Ox.Button({
id: 'done',
title: Ox._('Done')
}).bindEvent({
click: function() {
that.close();
}
})
],
closeButton: true,
content: $dialogPanel,
2017-02-15 17:44:59 +00:00
height: Math.round((window.innerHeight - 48) * 0.9),
2017-01-26 18:15:00 +00:00
removeOnClose: true,
title: Ox._('Manage Home Screen'),
2017-02-15 17:44:59 +00:00
width: 1058 // 256 + 17 + 512 + 17 + 256
2017-01-26 18:15:00 +00:00
});
pandora.api.getHomeItems({}, function(result) {
2017-02-09 02:55:31 +00:00
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);
}
});
2017-02-09 03:50:27 +00:00
});
2017-01-26 18:15:00 +00:00
2017-02-15 17:44:59 +00:00
function addItem(active, callback) {
pandora.api.addHomeItem({
active: active,
}, function(response) {
items.push(response.data);
var selected = response.data.id;
renderFolders(items, selected);
var item = Ox.getObjectById(items, selected);
renderItem(item);
renderForm(item);
callback && callback();
});
}
function deleteItem(id, callback) {
pandora.api.removeHomeItem({
id: id
}, function() {
items = items.filter(function(item) {
return item.id != id;
});
var selected = items[0].id;
renderFolders(items, selected);
var item = Ox.getObjectById(items, selected);
renderItem(item);
renderForm(item);
callback && callback();
});
}
function editItem(id, key, value, callback) {
if (key == 'name') {
2017-02-09 03:50:27 +00:00
key = 'contentid';
2017-02-09 02:55:31 +00:00
}
2017-02-15 17:44:59 +00:00
var data = Ox.extend({id: id}, key, value);
if (key == 'type') {
Ox.extend(data, {'contentid': ''});
2017-02-09 03:50:27 +00:00
}
pandora.api.editHomeItem(data, function(result) {
2017-02-15 17:44:59 +00:00
Ox.Request.clearCache('Home');
var item = Ox.getObjectById(items, id);
Ox.unique(Object.keys(item).concat(Object.keys(result.data))).forEach(function(key) {
item[key] = result.data[key] || '';
2017-02-09 03:50:27 +00:00
});
2017-02-15 17:44:59 +00:00
renderFolders(items, item.id);
/*
console.log('1', item)
console.log('2', (item.status == 'active' ? $activeList : $inactiveList).value(id));
(item.status == 'active' ? $activeList : $inactiveList).value(id, {
image: item.image,
title: item.title,
text: item.text,
link: item.link
});
*/
renderItem(item);
renderForm(item);
callback && callback();
2017-02-09 02:55:31 +00:00
});
}
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) {
2017-02-15 17:44:59 +00:00
autocompleteData[value] = [''].concat(result.data.items.map(function(item) {
2017-02-09 02:55:31 +00:00
return item.id;
2017-02-15 17:44:59 +00:00
}));
2017-02-09 02:55:31 +00:00
callback();
});
},
callback
);
}
2017-02-15 17:44:59 +00:00
function renderFolder(status, items, selected) {
2017-02-09 02:55:31 +00:00
var extras = [
Ox.MenuButton({
items: [
{id: 'newitem', title: Ox._(
2017-02-15 17:44:59 +00:00
'New ' + (status == 'active' ? 'Active' : 'Inactive') + ' Item'
2017-02-09 02:55:31 +00:00
)},
2017-02-15 17:44:59 +00:00
{id: 'deleteitem', title: Ox._('Delete Selected Item'), disabled: !selected}
2017-02-09 02:55:31 +00:00
],
title: 'edit',
tooltip: Ox._('Manage Items'),
type: 'image'
}).bindEvent({
click: function(data) {
if (data.id == 'newitem') {
2017-02-15 17:44:59 +00:00
addItem(status == 'active');
2017-02-09 02:55:31 +00:00
} else if (data.id == 'deleteitem') {
2017-02-15 17:44:59 +00:00
var id = (
status == 'active' ? $activeList : $inactiveList
).options('selected')[0];
id && deleteItem(id);
2017-02-09 02:55:31 +00:00
}
2017-02-15 17:44:59 +00:00
},
2017-02-09 02:55:31 +00:00
})
];
2017-02-15 17:44:59 +00:00
if (status == 'active') {
$activeMenu = extras[0];
} else {
$inactiveMenu = extras[0];
}
2017-02-09 02:55:31 +00:00
var $folder = Ox.CollapsePanel({
collapsed: false,
extras: extras,
size: 16,
2017-02-15 17:44:59 +00:00
title: Ox._((status == 'active' ? 'Active' : 'Inactive') + ' Items')
2017-02-09 02:55:31 +00:00
}).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) {
2017-02-15 17:44:59 +00:00
return item.active == (status == 'active');
2017-02-09 02:55:31 +00:00
}), selected).bindEventOnce({
init: function(data) {
2017-02-15 17:44:59 +00:00
updateMenu(status, $list.options('selected').length);
2017-02-09 02:55:31 +00:00
$placeholder[data.items ? 'hide' : 'show']();
$folder.$content.css({
height: (data.items || 1) * 16 + 'px'
});
}
2017-02-15 17:44:59 +00:00
}).bindEvent({
add: function(event) {
addItem(status == 'active');
},
'delete': function(data) {
data.ids.length && deleteItem(data.ids[0]);
}
2017-02-09 02:55:31 +00:00
}).appendTo($folder.$content);
2017-02-15 17:44:59 +00:00
if (status == 'active') {
$activeList = $list;
} else {
$inactiveList = $list;
}
2017-02-09 02:55:31 +00:00
return $folder;
}
function renderFolders(items, selected) {
$folders.empty();
2017-02-15 17:44:59 +00:00
['active', 'inactive'].forEach(function(status) {
var $folder = renderFolder(status, items, selected).appendTo($folders);
2017-02-09 02:55:31 +00:00
});
}
function renderForm(data, focus) {
$form.empty();
2017-02-15 17:44:59 +00:00
if (!data) {
return;
}
$statusSelect = Ox.Select({
items: [
{id: 'active', title: Ox._('Active')},
{id: 'inactive', title: Ox._('Inactive')}
],
label: Ox._('Status'),
labelWidth: 80,
value: data.active ? 'active' : 'inactive',
width: 240
}).css({
margin: '8px'
}).bindEvent({
change: function(data_) {
editItem(data.id, 'active', data_.value == 'active');
}
}).appendTo($form);
2017-02-09 02:55:31 +00:00
$typeSelect = Ox.Select({
2017-01-26 18:15:00 +00:00
items: [
{id: 'custom', title: Ox._('Custom')},
2017-02-15 17:44:59 +00:00
{},
2017-01-26 18:15:00 +00:00
{id: 'list', title: Ox._('List')},
{id: 'edit', title: Ox._('Edit')},
{id: 'collection', title: Ox._('Collection')}
],
label: Ox._('Type'),
2017-02-09 02:55:31 +00:00
labelWidth: 80,
value: data.type,
width: 240
2017-01-26 18:15:00 +00:00
}).css({
2017-02-09 02:55:31 +00:00
margin: '8px'
2017-01-26 18:15:00 +00:00
}).bindEvent({
2017-02-09 03:50:27 +00:00
change: function(data_) {
2017-02-15 17:44:59 +00:00
editItem(data.id, 'type', data_.value, function() {
(data.type == 'custom' ? $imageInput : $nameInput).focusInput();
});
2017-01-26 18:15:00 +00:00
}
}).appendTo($form);
if (data.type == 'custom') {
2017-02-09 02:55:31 +00:00
$imageInput = Ox.Input({
2017-01-26 18:15:00 +00:00
label: Ox._('Image URL'),
2017-02-09 02:55:31 +00:00
labelWidth: 80,
value: data.image || '',
width: 240
2017-01-26 18:15:00 +00:00
}).css({
2017-02-09 02:55:31 +00:00
margin: '8px'
}).bindEvent({
2017-02-09 03:50:27 +00:00
change: function(data_) {
editItem(data.id, 'image', data_.value);
2017-02-09 02:55:31 +00:00
}
2017-01-26 18:15:00 +00:00
}).appendTo($form);
2017-02-09 02:55:31 +00:00
$linkInput = Ox.Input({
2017-01-26 18:15:00 +00:00
label: Ox._('Link URL'),
2017-02-09 02:55:31 +00:00
labelWidth: 80,
value: data.link || '',
width: 240
2017-01-26 18:15:00 +00:00
}).css({
2017-02-09 02:55:31 +00:00
margin: '8px'
}).bindEvent({
2017-02-09 03:50:27 +00:00
change: function(data_) {
editItem(data.id, 'link', data_.value);
2017-02-09 02:55:31 +00:00
}
2017-01-26 18:15:00 +00:00
}).appendTo($form);
} else {
2017-02-09 02:55:31 +00:00
$nameInput = Ox.Input({
autocomplete: autocompleteData[data.type],
2017-02-15 17:44:59 +00:00
autocompleteReplace: true,
autocompleteReplaceCorrect: true,
2017-02-09 02:55:31 +00:00
autocompleteSelect: true,
autocompleteSelectMaxWidth: 256,
label: Ox._('Name'),
labelWidth: 80,
value: data.contentid || '',
width: 240
2017-01-26 18:15:00 +00:00
}).css({
2017-02-09 02:55:31 +00:00
margin: '8px'
}).bindEvent({
2017-02-09 03:50:27 +00:00
change: function(data_) {
editItem(data.id, 'name', data_.value);
2017-02-09 02:55:31 +00:00
}
2017-01-26 18:15:00 +00:00
}).appendTo($form);
}
2017-02-09 02:55:31 +00:00
}
function renderItem(data) {
2017-02-15 17:44:59 +00:00
$item.empty().append(
pandora.renderHomeItem({
data: data,
editItem: editItem
2017-01-26 18:15:00 +00:00
}).css({
2017-02-15 17:44:59 +00:00
margin: '16px'
})
);
2017-01-26 18:15:00 +00:00
}
2017-02-09 02:55:31 +00:00
function renderList(items, selected) {
2017-01-26 18:15:00 +00:00
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,
2017-02-09 03:50:27 +00:00
width: 16,
2017-01-26 18:15:00 +00:00
},
{
id: 'title',
visible: true,
width: 224
},
{
2017-02-15 17:44:59 +00:00
id: 'text',
visible: false,
width: 0
},
{
id: 'link',
visible: false,
width: 0
},
{
id: 'complete',
format: function(value, data) {
console.log('##', data);
return pandora.isCompleteHomeItem(data) ? $('<img>').attr({
2017-01-26 18:15:00 +00:00
src: Ox.UI.getImageURL('symbolCheck')
}).css({
width: '10px',
height: '10px',
padding: '3px'
}) : ''
},
visible: true,
width: 16
}
],
items: items,
max: 1,
2017-02-09 02:55:31 +00:00
selected: [selected],
2017-01-26 18:15:00 +00:00
sort: [{key: 'index', operator: '+'}],
sortable: true,
unique: 'id'
})
.bindEvent({
2017-02-09 02:55:31 +00:00
select: function(data) {
2017-02-15 17:44:59 +00:00
var item = Ox.getObjectById($list.options('items'), data.ids[0]),
status = $list == $activeList ? 'active' : 'inactive';
2017-02-09 02:55:31 +00:00
if (data.ids.length) {
2017-02-15 17:44:59 +00:00
(
status == 'active' ? $inactiveList : $activeList
).options({selected: []});
}
updateMenu(status, data.ids.length);
if (item || $activeList.options('selected').length + $inactiveList.options('selected').length == 0) {
2017-02-09 02:55:31 +00:00
renderItem(item);
renderForm(item);
}
},
selectafter: function() {
// ...
},
selectbefore: function() {
// ...
2017-02-09 03:50:27 +00:00
},
move: function(data) {
pandora.api.sortHomeItems({
ids: data.ids
}, function() {
Ox.Request.clearCache('HomeItems');
});
2017-01-26 18:15:00 +00:00
}
})
.css({
width: '256px'
});
return $list;
}
2017-02-15 17:44:59 +00:00
function updateMenu(status, value) {
(
status == 'active' ? $activeMenu : $inactiveMenu
)[value ? 'enableItem' : 'disableItem']('deleteitem');
}
2017-01-26 18:15:00 +00:00
return that;
2017-02-09 03:50:27 +00:00
};