openmedialibrary/static/js/editDialog.js

291 lines
9 KiB
JavaScript
Raw Normal View History

2016-01-05 08:34:07 +00:00
'use strict';
oml.ui.editDialog = function() {
2016-01-05 14:43:57 +00:00
var arrayKeys = [
'author', 'place', 'publisher', 'language'
],
ids = oml.user.ui.listSelection,
2016-01-05 08:34:07 +00:00
keys = [
'title', 'author', 'place', 'publisher', 'date',
'edition', 'language', 'pages', 'description'
],
mixed = ' ',
separator = '; ',
tooltip = Ox._('Doubleclick to edit'),
$info = Ox.Element()
.addClass('OxSelectable')
.css({padding: '16px'});
var that = Ox.Dialog({
buttons: [
Ox.Button({
title: Ox._('Done')
})
.bindEvent({
click: function() {
that.close();
}
})
],
closeButton: true,
content: Ox.LoadingScreen().start(),
2016-01-05 14:43:57 +00:00
height: 256,
2016-01-05 08:34:07 +00:00
removeOnClose: true,
title: Ox._('Edit Metadata for {0}', [
Ox.formatNumber(ids.length) + ' ' + (
ids.length == 1 ? 'Book' : 'Books'
)
]),
width: 512
});
getMetadata(renderMetadata);
function editMetadata(key, value) {
var edit = {id: ids};
if (Ox.contains(['author', 'place'], key)) {
edit[key] = value ? value.split(separator) : [];
} else {
edit[key] = value;
}
oml.api.edit(edit, function(result) {
2016-01-05 17:21:35 +00:00
Ox.Request.clearCache();
2016-01-05 18:06:57 +00:00
oml.$ui.info.updateElement();
2016-01-05 14:43:57 +00:00
oml.$ui.filters.forEach(function($filter) {
$filter.reloadList();
});
2016-01-05 17:45:20 +00:00
oml.$ui.list.reloadList(true);
2016-01-05 08:34:07 +00:00
});
}
function formatLight(string) {
return '<span class="OxLight">' + string + '</span>';
}
function formatKey(key) {
var item = Ox.getObjectById(oml.config.itemKeys, key);
return '<span style="font-weight: bold">'
+ Ox._(Ox.toTitleCase(key)) + ':</span>&nbsp;';
}
function formatValue(value, key) {
2016-01-05 14:43:57 +00:00
var isMixed = value === mixed || (
Ox.isArray(value) && value.length == 1 && value[0] === mixed
);
return isMixed ? formatLight(Ox._(
2016-01-05 08:34:07 +00:00
key == 'title' ? 'Mixed Title'
: key == 'author' ? 'Mixed Author'
2016-01-05 14:43:57 +00:00
: key == 'description' ? 'Mixed Description'
2016-01-05 08:34:07 +00:00
: 'mixed'
)) : value ? (Ox.isArray(value) ? value : [value]).map(function(value) {
return key == 'date' && value ? value.slice(0, 4) : value;
}).join(separator) : '';
}
function getMetadata(callback) {
oml.api.find({
keys: keys,
query: {
conditions: ids.map(function(id) {
return {
key: 'id',
operator: '==',
value: id
};
}),
operator: '|'
}
}, function(result) {
var data = {},
items = result.data.items;
keys.forEach(function(key) {
2016-01-05 18:06:57 +00:00
var isArray = Ox.contains(arrayKeys, key),
values = items.map(function(item) {
return item[key];
});
2016-01-05 08:34:07 +00:00
if (isArray) {
values = values.map(function(value) {
2016-01-05 18:13:35 +00:00
return (value || []).join(separator);
2016-01-05 08:34:07 +00:00
});
}
data[key] = Ox.unique(values).length == 1
? (isArray ? values[0].split(separator) : values[0])
2016-01-05 10:28:18 +00:00
: isArray ? [mixed] : mixed;
2016-01-05 08:34:07 +00:00
});
callback(data);
});
}
function renderMetadata(data) {
var $div;
// Title
$('<div>')
.css({
marginTop: '-2px'
})
.append(
Ox.EditableContent({
editable: true,
format: function(value) {
return formatValue(value, 'title');
},
placeholder: formatLight(Ox._('No Title')),
tooltip: tooltip,
value: data.title || ''
})
.css({
fontWeight: 'bold',
fontSize: '13px'
})
.bindEvent({
submit: function(event) {
editMetadata('title', event.value);
}
})
)
.appendTo($info);
// Author
$('<div>')
.css({
marginTop: '2px'
})
.append(
Ox.EditableContent({
editable: true,
format: function(value) {
return formatValue(value.split(separator), 'author');
},
placeholder: formatLight(Ox._('Unknown Author')),
tooltip: tooltip,
value: data.author ? data.author.join(separator) : ''
})
.css({
marginBottom: '-3px',
fontWeight: 'bold',
fontSize: '13px'
})
.bindEvent({
submit: function(event) {
editMetadata('author', event.value);
}
})
)
.appendTo($info);
// Place, Publisher, Date
2016-01-05 10:28:18 +00:00
$div = $('<div>')
2016-01-05 08:34:07 +00:00
.css({
marginTop: '4px'
})
.appendTo($info);
['place', 'publisher', 'date'].forEach(function(key, index) {
if (index) {
$('<span>').html(', ').appendTo($div);
}
$('<span>')
.html(formatKey(key))
.appendTo($div);
Ox.EditableContent({
editable: true,
format: function(value) {
2016-01-05 14:43:57 +00:00
return formatValue(
key == 'place' ? value.split(separator) : value,
key
);
2016-01-05 08:34:07 +00:00
},
placeholder: formatLight(Ox._('unknown')),
tooltip: tooltip,
2016-01-05 14:43:57 +00:00
value: data[key] ? (
Ox.contains(arrayKeys, key) && Ox.isArray(data[key])
? data[key].join('; ') : data[key]
) : ''
2016-01-05 08:34:07 +00:00
})
.bindEvent({
submit: function(event) {
editMetadata(key, event.value);
}
})
.appendTo($div);
});
2016-01-05 14:43:57 +00:00
// Edition, Language, Pages
$div = $('<div>')
.css({
marginTop: '4px'
})
.appendTo($info);
['edition', 'language', 'pages'].forEach(function(key, index) {
if (index) {
$('<span>').html(', ').appendTo($div);
}
$('<span>')
.html(formatKey(key))
.appendTo($div);
Ox.EditableContent({
editable: true,
format: function(value) {
return formatValue(
key == 'language' ? value.split(separator) : value,
key
);
},
placeholder: formatLight(Ox._('unknown')),
tooltip: tooltip,
value: data[key] ? (
Ox.contains(arrayKeys, key) && Ox.isArray(data[key])
? data[key].join(separator) : data[key]
) : ''
})
.bindEvent({
submit: function(event) {
editMetadata(key, event.value);
}
})
.appendTo($div);
});
// Description
$('<div>')
.css({
marginTop: '8px',
textAlign: 'justify'
}).append(
Ox.EditableContent({
editable: true,
format: function(value) {
2016-01-05 14:45:09 +00:00
return formatValue(
Ox.encodeHTMLEntities(value), 'description'
);
2016-01-05 14:43:57 +00:00
},
placeholder: formatLight('No Description'),
tooltip: tooltip,
type: 'textarea',
value: data.description || ''
})
.bindEvent({
submit: function(event) {
editMetadata('description', event.value);
}
})
).appendTo($info);
$('<div>').css({height: '16px'}).appendTo($info);
2016-01-05 08:34:07 +00:00
that.options({content: $info});
}
return that;
2016-01-05 10:28:18 +00:00
};