')
.css({marginBottom: '4px'})
.append(
@@ -448,7 +476,6 @@ pandora.ui.infoView = function(data) {
})
)
.appendTo($statistics);
-
}
$('
').css({height: '16px'}).appendTo($statistics);
@@ -486,17 +513,13 @@ pandora.ui.infoView = function(data) {
}
pandora.updateItemContext();
pandora.$ui.browser.value(result.data.id, key, result.data[key]);
- if (Ox.contains(['title', 'director', 'year'], key)) {
- if (ui.icons == 'posters') {
- pandora.$ui.browser.find('img[src*="/' + data.id + '/"]').each(function() {
- $(this).attr({
- src: '/' + data.id + '/poster128.jpg?' + Ox.uid()
- });
- });
- src = '/' + data.id + '/poster512.jpg?' + Ox.uid()
- $icon.attr({src: src});
- $reflectionIcon.attr({src: src});
- }
+ if (
+ Ox.contains(['title', 'director', 'year'], key)
+ && ui.icons == 'posters'
+ ) {
+ src = '/' + data.id + '/poster512.jpg?' + Ox.uid()
+ $icon.attr({src: src});
+ $reflectionIcon.attr({src: src});
}
if (Ox.contains(nameKeys, key)) {
data['namedescription'] = result.data['namedescription'];
@@ -516,7 +539,7 @@ pandora.ui.infoView = function(data) {
function formatKey(key, mode) {
var item = Ox.getObjectById(pandora.site.itemKeys, key);
key = Ox._(item ? item.title : key);
- mode = mode || 'text'
+ mode = mode || 'text';
if (key == 'alternativeTitles') {
key = 'alternative title' + (
data.alternativeTitles && data.alternativeTitles.length == 1 ? '' : 's'
@@ -541,7 +564,9 @@ pandora.ui.infoView = function(data) {
function formatLink(value, key) {
return (Ox.isArray(value) ? value : [value]).map(function(value) {
return key
- ? '
' + value + ''
+ ? '
' + value + ''
: value;
}).join(Ox.contains(specialListKeys, key) ? '; ' : ', ');
}
@@ -567,14 +592,11 @@ pandora.ui.infoView = function(data) {
ret = formatLink(value.split(', '), 'name');
} else if (listKeys.indexOf(key) > -1) {
ret = formatLink(value.split(', '), key);
- } else if (key == 'alternativeTitles') {
- ret = formatLink(
- Ox.decodeHTMLEntities(value).split('; ').map(Ox.encodeHTMLEntities),
- 'title');
} else if (specialListKeys.indexOf(key) > -1) {
ret = formatLink(
Ox.decodeHTMLEntities(value).split('; ').map(Ox.encodeHTMLEntities),
- key);
+ key
+ );
} else if (key == 'imdbId') {
ret = '
' + value + '';
@@ -1023,9 +1045,8 @@ pandora.ui.infoView = function(data) {
that.reload = function() {
var src = src = '/' + data.id + '/' + (
- ui.icons == 'posters'
- ? (ui.showSitePosters ? 'siteposter' : 'poster') : 'icon'
- ) + '512.jpg?' + Ox.uid()
+ ui.icons == 'posters' ? 'poster' : 'icon'
+ ) + '512.jpg?' + Ox.uid();
$icon.attr({src: src});
$reflectionIcon.attr({src: src});
iconSize = iconSize == 256 ? 512 : 256;
@@ -1034,11 +1055,6 @@ pandora.ui.infoView = function(data) {
toggleIconSize();
};
- that.resize = function() {
- var height = pandora.$ui.contentPanel.size(1);
- $data.css({height: height + 'px'});
- };
-
that.bindEvent({
pandora_icons: that.reload,
pandora_showsiteposters: function() {
diff --git a/static/js/pandora/infoView.js b/static/js/pandora/infoView.js
index 279af3432..ebafb43e0 100644
--- a/static/js/pandora/infoView.js
+++ b/static/js/pandora/infoView.js
@@ -5,6 +5,7 @@ pandora.ui.infoView = function(data) {
var ui = pandora.user.ui,
descriptions = [],
canEdit = pandora.site.capabilities.canEditMetadata[pandora.user.level] || data.editable,
+ canRemove = pandora.site.capabilities.canRemoveItems[pandora.user.level],
css = {
marginTop: '4px',
textAlign: 'justify',
@@ -19,27 +20,80 @@ pandora.ui.infoView = function(data) {
iconLeft = iconSize == 256 ? Math.floor((iconSize - iconWidth) / 2) : 0,
borderRadius = ui.icons == 'posters' ? 0 : iconSize / 8,
margin = 16,
+ nameKeys = ['director'],
+ listKeys = nameKeys.concat(['country', 'groups']),
statisticsWidth = 128,
- uid = Ox.uid(),
- that = Ox.Element(),
+ $bar = Ox.Bar({size: 16})
+ .bindEvent({
+ doubleclick: function(e) {
+ if ($(e.target).is('.OxBar')) {
+ $info.animate({scrollTop: 0}, 250);
+ }
+ }
+ }),
- $div,
- $list,
-
- $info = Ox.Element()
- .css({
- position: 'absolute',
- left: 0,
- top: 0,
- right: 0,
- bottom: 0,
- overflowY: 'auto'
+ $options = Ox.MenuButton({
+ items: [
+ {
+ id: 'delete',
+ title: Ox._('Delete {0}...', [pandora.site.itemName.singular]),
+ disabled: !canRemove
+ }
+ ],
+ style: 'square',
+ title: 'set',
+ tooltip: Ox._('Options'),
+ type: 'image',
})
- .appendTo(that),
+ .css({
+ float: 'left',
+ borderColor: 'rgba(0, 0, 0, 0)',
+ background: 'rgba(0, 0, 0, 0)'
+ })
+ .bindEvent({
+ click: function(data_) {
+ if (data_.id == 'delete') {
+ pandora.$ui.deleteItemDialog = pandora.ui.deleteItemDialog(data).open();
+ }
+ }
+ })
+ .appendTo($bar),
- $left = Ox.Element()
- .appendTo($info),
+ $edit = Ox.MenuButton({
+ items: [
+ {
+ id: 'insert',
+ title: Ox._('Insert HTML...'),
+ disabled: true
+ }
+ ],
+ style: 'square',
+ title: 'edit',
+ tooltip: Ox._('Edit'),
+ type: 'image',
+ })
+ .css({
+ float: 'right',
+ borderColor: 'rgba(0, 0, 0, 0)',
+ background: 'rgba(0, 0, 0, 0)'
+ })
+ .bindEvent({
+ click: function(data) {
+ // ...
+ }
+ })
+ .appendTo($bar),
+
+ $info = Ox.Element().css({overflowY: 'auto'}),
+
+ that = Ox.SplitPanel({
+ elements: [
+ {element: $bar, size: 16},
+ {element: $info}
+ ],
+ orientation: 'vertical'
+ }),
$icon = Ox.Element({
element: '
',
@@ -47,7 +101,7 @@ pandora.ui.infoView = function(data) {
.attr({
src: '/' + data.id + '/' + (
ui.icons == 'posters' ? 'poster' : 'icon'
- ) + '512.jpg?' + uid
+ ) + '512.jpg?' + data.modified
})
.css({
position: 'absolute',
@@ -61,7 +115,7 @@ pandora.ui.infoView = function(data) {
.bindEvent({
singleclick: toggleIconSize
})
- .appendTo($left),
+ .appendTo($info),
$reflection = $('
')
.addClass('OxReflection')
@@ -73,13 +127,13 @@ pandora.ui.infoView = function(data) {
height: iconSize / 2 + 'px',
overflow: 'hidden'
})
- .appendTo($left),
+ .appendTo($info),
$reflectionIcon = $('
')
.attr({
src: '/' + data.id + '/' + (
ui.icons == 'posters' ? 'poster' : 'icon'
- ) + '512.jpg?' + uid
+ ) + '512.jpg?' + data.modified
})
.css({
position: 'absolute',
@@ -98,16 +152,7 @@ pandora.ui.infoView = function(data) {
})
.appendTo($reflection),
- $data = $('
')
- .css({
- position: 'absolute',
- left: margin + 'px',
- top: margin + iconHeight + margin + 'px',
- width: iconSize + 'px',
- })
- .appendTo($left),
-
- $center = Ox.Element()
+ $text = Ox.Element()
.addClass('OxTextPage')
.css({
position: 'absolute',
@@ -117,7 +162,7 @@ pandora.ui.infoView = function(data) {
})
.appendTo($info),
- $right = $('
')
+ $statistics = $('
')
.css({
position: 'absolute',
width: statisticsWidth + 'px',
@@ -128,15 +173,18 @@ pandora.ui.infoView = function(data) {
$capabilities;
+ [$options, $edit].forEach(function($element) {
+ $element.find('input').css({
+ borderWidth: 0,
+ borderRadius: 0,
+ padding: '3px'
+ });
+ });
+
if (!canEdit) {
pandora.createLinks($info);
}
- var listKeys = [
- 'country', 'language', 'director', 'featuring',
- 'groups'
- ];
-
// Title -------------------------------------------------------------------
$('
')
@@ -144,13 +192,12 @@ pandora.ui.infoView = function(data) {
marginTop: '-2px',
})
.append(
- Ox.Editable({
+ Ox.EditableContent({
editable: canEdit,
tooltip: canEdit ? pandora.getEditTooltip() : '',
value: data.title || ''
})
.css({
- display: 'inline-block',
marginBottom: '-3px',
fontWeight: 'bold',
fontSize: '13px',
@@ -163,120 +210,44 @@ pandora.ui.infoView = function(data) {
}
})
)
- .appendTo($center);
+ .appendTo($text);
- // Year, Country, Language and Duration -----------------------------------
+ // Director, Year and Country ----------------------------------------------
- if (canEdit) {
- $div = $('
').css(css).css({marginTop: '12px'}).appendTo($center);
- ['year', 'country', 'language', 'duration'].forEach(function(key, i) {
- i && $('
').css({float: 'left'}).html('; ').appendTo($div);
- $('
')
- .css({float: 'left'})
- .html(formatKey(key).replace('', ' '))
- .appendTo($div);
- Ox.Editable({
- clickLink: pandora.clickLink,
- editable: key != 'duration',
- format: function(value) {
- return formatValue(listKeys.indexOf(key) >= 0
- ? value.split(', ') : value, key);
- },
- placeholder: formatLight(Ox._('unknown')),
- tooltip: pandora.getEditTooltip(),
- value: listKeys.indexOf(key) >= 0
- ? (data[key] || []).join(', ')
- : data[key] || ''
- })
- .css({float: 'left'})
- .bindEvent({
- submit: function(event) {
- editMetadata(key, event.value);
- }
- })
- .appendTo($div);
- });
- $('
').appendTo($center);
- } else {
- html = [];
- ['year', 'country', 'language', 'duration'].forEach(function(key) {
- if (data[key]) {
- html.push(formatKey(key) + formatValue(data[key], key));
- }
- });
- $('
').css(css).html(html.join('; ')).appendTo($center);
- }
+ renderGroup(['director', 'year', 'country']);
- // Director, Cinematographer and Featuring ---------------------------------
+ // Summary -----------------------------------------------------------------
- if (canEdit) {
- $div = $('
').css(css).css('clear', 'both').appendTo($center);
- ['director', 'featuring'].forEach(function(key, i) {
- i && $('
').css({float: 'left'}).html('; ').appendTo($div);
- $('
')
- .css({float: 'left'})
- .html(formatKey(key).replace('', ' '))
- .appendTo($div);
- Ox.Editable({
- clickLink: pandora.clickLink,
- format: function(value) {
- return formatValue(value.split(', '), 'name');
- },
- placeholder: formatLight(Ox._('unknown')),
- tooltip: pandora.getEditTooltip(),
- value: listKeys.indexOf(key) >= 0
- ? (data[key] || []).join(', ')
- : data[key] || ''
- })
- .css({float: 'left'})
- .bindEvent({
- submit: function(event) {
- editMetadata(key, event.value);
- }
- })
- .appendTo($div);
- });
- $('
').appendTo($center);
- } else if (data.director || data.cinematographer || data.featuring) {
- html = [];
- ['director', 'featuring'].forEach(function(key) {
- if (data[key] && data[key].length) {
- html.push(
- formatKey(key)
- + formatValue(data[key], key)
- );
- }
- });
- $('
').css(css).html(html.join('; ')).appendTo($center);
- }
-
- // Summary -------------------------------------------------------------
- $div = $('
').css(css).css('clear', 'both').appendTo($center);
-
- if (canEdit) {
+ if (canEdit || data.summary) {
$('
')
- .css({marginTop: '16px'})
.append(
- Ox.Editable({
+ Ox.EditableContent({
clickLink: pandora.clickLink,
editable: canEdit,
+ format: function(value) {
+ return value.replace(
+ /
').css(css).html(data.summary).appendTo($center);
+ .appendTo($text);
}
// Duration, Aspect Ratio --------------------------------------------------
@@ -286,7 +257,7 @@ pandora.ui.infoView = function(data) {
value = data[key] || 0;
$('
')
.css({marginBottom: '4px'})
- .append(formatKey(itemKey.title, true))
+ .append(formatKey(itemKey.title, 'statistics'))
.append(
Ox.Theme.formatColor(null, 'gradient')
.css({textAlign: 'right'})
@@ -295,7 +266,7 @@ pandora.ui.infoView = function(data) {
.apply(null, [value].concat(itemKey.format.args))
)
)
- .appendTo($right);
+ .appendTo($statistics);
});
// Hue, Saturation, Lightness, Volume --------------------------------------
@@ -303,88 +274,58 @@ pandora.ui.infoView = function(data) {
['hue', 'saturation', 'lightness', 'volume'].forEach(function(key) {
$('
')
.css({marginBottom: '4px'})
- .append(formatKey(key, true))
+ .append(formatKey(key, 'statistics'))
.append(
Ox.Theme.formatColor(
data[key] || 0, key == 'volume' ? 'lightness' : key
).css({textAlign: 'right'})
)
- .appendTo($right);
+ .appendTo($statistics);
});
// Cuts per Minute ---------------------------------------------------------
$('
')
.css({marginBottom: '4px'})
- .append(formatKey('cuts per minute', true))
+ .append(formatKey('cuts per minute', 'statistics'))
.append(
Ox.Theme.formatColor(null, 'gradient')
.css({textAlign: 'right'})
.html(Ox.formatNumber(data['cutsperminute'] || 0, 3))
)
- .appendTo($right);
-
- // User and Groups ---------------------------------------------------------
-
- ['user', 'groups'].forEach(function(key) {
- (canEdit || data[key] && data[key].length) && $('
')
- .css({marginBottom: '4px'})
- .append(formatKey(key, true))
- .append(
- $('
')
- .css({margin: '2px 0 0 -1px'}) // fixme: weird
- .append(
- Ox.Editable({
- placeholder: key == 'groups' ? formatLight('No Groups') : '',
- editable: canEdit,
- tooltip: canEdit ? pandora.getEditTooltip() : '',
- value: key == 'user' ? data[key] : data[key].join(', ')
- })
- .bindEvent({
- submit: function(event) {
- editMetadata(key, event.value);
- }
- })
- )
- )
- .appendTo($right);
- });
-
- // Created and Modified ----------------------------------------------------
-
- ['created', 'modified'].forEach(function(key) {
- $('
')
- .css({marginBottom: '4px'})
- .append(formatKey(key, true))
- .append(
- $('
').html(Ox.formatDate(data[key], '%B %e, %Y'))
- )
- .appendTo($right);
- });
+ .appendTo($statistics);
// Rights Level ------------------------------------------------------------
- if (canEdit) {
- var $rightsLevel = $('
');
- $('
')
- .css({marginBottom: '4px'})
- .append(formatKey('Rights Level', true))
- .append($rightsLevel)
- .appendTo($right);
- renderRightsLevel();
- }
+ var $rightsLevel = $('
');
+ $('
')
+ .css({marginBottom: '4px'})
+ .append(formatKey('Rights Level', 'statistics'))
+ .append($rightsLevel)
+ .appendTo($statistics);
+ renderRightsLevel();
// Notes --------------------------------------------------------------------
if (canEdit) {
-
$('
')
.css({marginBottom: '4px'})
- .append(formatKey('Notes', true))
.append(
- Ox.Editable({
+ formatKey('Notes', 'statistics').options({
+ tooltip: Ox._('Only {0} can see and edit these comments', [
+ Object.keys(pandora.site.capabilities.canEditMetadata).map(function(level, i) {
+ return (
+ i == 0 ? ''
+ : i < Ox.len(pandora.site.capabilities.canEditMetadata) - 1 ? ', '
+ : ' ' + Ox._('and') + ' '
+ ) + Ox.toTitleCase(level)
+ }).join('')])
+ })
+ )
+ .append(
+ Ox.EditableContent({
height: 128,
- placeholder: formatLight('No notes'),
+ placeholder: formatLight(Ox._('No notes')),
tooltip: pandora.getEditTooltip(),
type: 'textarea',
value: data.notes || '',
@@ -396,11 +337,10 @@ pandora.ui.infoView = function(data) {
}
})
)
- .appendTo($right);
-
+ .appendTo($statistics);
}
- $('
').css({height: '16px'}).appendTo($right);
+ $('
').css({height: '16px'}).appendTo($statistics);
function editMetadata(key, value) {
if (value != data[key]) {
@@ -413,22 +353,18 @@ pandora.ui.infoView = function(data) {
edit[key] = value ? value : null;
}
pandora.api.edit(edit, function(result) {
- data[key] = value;
+ var src;
+ data[key] = result.data[key];
descriptions[key] && descriptions[key].options({
value: result.data[key + 'description']
});
-
Ox.Request.clearCache(); // fixme: too much? can change filter/list etc
if (result.data.id != data.id) {
pandora.UI.set({item: result.data.id});
pandora.$ui.browser.value(data.id, 'id', result.data.id);
}
pandora.updateItemContext();
- // FIXME: value function should accept {k: v, ...}
- pandora.$ui.browser.value(result.data.id, 'title', result.data.title);
- pandora.$ui.browser.value(result.data.id, 'director', result.data.director);
- pandora.$ui.browser.value(result.data.id, 'country', result.data.country);
- pandora.$ui.browser.value(result.data.id, 'year', result.data.year);
+ pandora.$ui.browser.value(result.data.id, key, result.data[key]);
pandora.$ui.itemTitle
.options({
title: '
' + result.data.title
@@ -437,38 +373,58 @@ pandora.ui.infoView = function(data) {
: '')
+ (result.data.year ? ' ' + result.data.year : '') + ''
});
- //pandora.$ui.contentPanel.replaceElement(0, pandora.$ui.browser = pandora.ui.browser());
+ if (
+ Ox.contains(['title', 'director', 'year'], key)
+ && ui.icons == 'posters'
+ ) {
+ src = '/' + data.id + '/poster512.jpg?' + Ox.uid()
+ $icon.attr({src: src});
+ $reflectionIcon.attr({src: src});
+ }
});
}
}
- function formatKey(key, isStatistics) {
- return isStatistics
- ? $('
').css({marginBottom: '4px', fontWeight: 'bold'})
- .html(Ox.toTitleCase(key).replace(' Per ', ' per '))
- : '
' + Ox.toTitleCase(key) + ': ';
+ function formatKey(key, mode) {
+ var item = Ox.getObjectById(pandora.site.itemKeys, key);
+ key = Ox._(item ? item.title : key);
+ mode = mode || 'text';
+ return mode == 'text'
+ ? '
' + Ox.toTitleCase(key) + ': '
+ : mode == 'description'
+ ? Ox.toTitleCase(key)
+ : Ox.Element()
+ .css({marginBottom: '4px', fontWeight: 'bold'})
+ .html(Ox.toTitleCase(key)
+ .replace(' Per ', ' per '));
}
function formatLight(str) {
- return '
' + str + '';
+ return '
' + str + '';
}
- function formatValue(value, key) {
- if (key == 'date') {
- return value ? Ox.formatDate(value,
- ['', '%Y', '%B %Y', '%B %e, %Y'][value.split('-').length]
- ) : '';
- } else if (key == 'duration') {
- return value < 60 ? Math.round(value) + ' sec'
- : Math.round(value / 60) + ' min';
- }
+ function formatLink(value, key) {
return (Ox.isArray(value) ? value : [value]).map(function(value) {
- return key ?
- '
' + value + ''
+ return key
+ ? '
' + value + ''
: value;
}).join(', ');
}
+ function formatValue(key, value) {
+ var ret;
+ if (key == 'year') {
+ ret = formatLink(value, 'year');
+ } else if (nameKeys.indexOf(key) > -1) {
+ ret = formatLink(value.split(', '), 'name');
+ } else if (listKeys.indexOf(key) > -1) {
+ ret = formatLink(value.split(', '), key);
+ } else {
+ ret = value;
+ }
+ return ret;
+ }
+
function getRightsLevelElement(rightsLevel) {
return Ox.Theme.formatColorLevel(
rightsLevel,
@@ -478,6 +434,12 @@ pandora.ui.infoView = function(data) {
);
}
+ function getValue(key, value) {
+ return !value ? ''
+ : Ox.contains(listKeys, key) ? value.join(', ')
+ : value;
+ }
+
function renderCapabilities(rightsLevel) {
var capabilities = [].concat(
canEdit ? [{name: 'canSeeItem', symbol: 'Find'}] : [],
@@ -553,6 +515,39 @@ pandora.ui.infoView = function(data) {
});
}
+ function renderGroup(keys) {
+ var $element;
+ if (canEdit || keys.filter(function(key) {
+ return data[key];
+ }).length) {
+ $element = $('
').css(css);
+ keys.forEach(function(key, i) {
+ if (canEdit || data[key]) {
+ if ($element.children().length) {
+ $('
').html('; ').appendTo($element);
+ }
+ $('').html(formatKey(key)).appendTo($element);
+ Ox.EditableContent({
+ clickLink: pandora.clickLink,
+ format: function(value) {
+ return formatValue(key, value);
+ },
+ placeholder: formatLight('unknown'),
+ tooltip: canEdit ? pandora.getEditTooltip() : '',
+ value: getValue(key, data[key])
+ })
+ .bindEvent({
+ submit: function(data) {
+ editMetadata(key, data.value);
+ }
+ })
+ .appendTo($element);
+ }
+ });
+ $element.appendTo($text);
+ }
+ }
+
function renderRightsLevel() {
var $rightsLevelElement = getRightsLevelElement(data.rightslevel),
$rightsLevelSelect;
@@ -623,11 +618,7 @@ pandora.ui.infoView = function(data) {
width: iconSize + 'px',
height: iconSize / 2 + 'px'
}, 250);
- $data.animate({
- top: margin + iconHeight + margin + 'px',
- width: iconSize + 'px',
- }, 250);
- $center.animate({
+ $text.animate({
left: margin + (iconSize == 256 ? 256 : iconWidth) + margin + 'px',
}, 250);
pandora.UI.set({infoIconSize: iconSize});
@@ -645,10 +636,6 @@ pandora.ui.infoView = function(data) {
toggleIconSize();
};
- that.resize = function() {
-
- };
-
that.bindEvent({
pandora_icons: that.reload,
pandora_showsiteposters: function() {
@@ -658,4 +645,4 @@ pandora.ui.infoView = function(data) {
return that;
-}
+};
diff --git a/static/js/pandora/infoView.padma.js b/static/js/pandora/infoView.padma.js
index 7d9634443..ae8f72c26 100644
--- a/static/js/pandora/infoView.padma.js
+++ b/static/js/pandora/infoView.padma.js
@@ -4,6 +4,7 @@ pandora.ui.infoView = function(data) {
var ui = pandora.user.ui,
canEdit = pandora.site.capabilities.canEditMetadata[pandora.user.level] || data.editable,
+ canRemove = pandora.site.capabilities.canRemoveItems[pandora.user.level],
css = {
marginTop: '4px',
textAlign: 'justify',
@@ -23,21 +24,76 @@ pandora.ui.infoView = function(data) {
listKeys = nameKeys.concat(['language', 'topic', 'license', 'groups']),
statisticsWidth = 128,
- that = Ox.Element(),
+ $bar = Ox.Bar({size: 16})
+ .bindEvent({
+ doubleclick: function(e) {
+ if ($(e.target).is('.OxBar')) {
+ $info.animate({scrollTop: 0}, 250);
+ }
+ }
+ }),
- $div,
- $list,
-
- $info = Ox.Element()
- .css({
- position: 'absolute',
- left: 0,
- top: 0,
- right: 0,
- bottom: 0,
- overflowY: 'auto'
+ $options = Ox.MenuButton({
+ items: [
+ {
+ id: 'delete',
+ title: Ox._('Delete {0}...', [pandora.site.itemName.singular]),
+ disabled: !canRemove
+ }
+ ],
+ style: 'square',
+ title: 'set',
+ tooltip: Ox._('Options'),
+ type: 'image',
})
- .appendTo(that),
+ .css({
+ float: 'left',
+ borderColor: 'rgba(0, 0, 0, 0)',
+ background: 'rgba(0, 0, 0, 0)'
+ })
+ .bindEvent({
+ click: function(data_) {
+ if (data_.id == 'delete') {
+ pandora.$ui.deleteItemDialog = pandora.ui.deleteItemDialog(data).open();
+ }
+ }
+ })
+ .appendTo($bar),
+
+ $edit = Ox.MenuButton({
+ items: [
+ {
+ id: 'insert',
+ title: Ox._('Insert HTML...'),
+ disabled: true
+ }
+ ],
+ style: 'square',
+ title: 'edit',
+ tooltip: Ox._('Edit'),
+ type: 'image',
+ })
+ .css({
+ float: 'right',
+ borderColor: 'rgba(0, 0, 0, 0)',
+ background: 'rgba(0, 0, 0, 0)'
+ })
+ .bindEvent({
+ click: function(data) {
+ // ...
+ }
+ })
+ .appendTo($bar),
+
+ $info = Ox.Element().css({overflowY: 'auto'}),
+
+ that = Ox.SplitPanel({
+ elements: [
+ {element: $bar, size: 16},
+ {element: $info}
+ ],
+ orientation: 'vertical'
+ }),
$left = Ox.Element()
.css({
@@ -118,7 +174,7 @@ pandora.ui.infoView = function(data) {
})
.appendTo($left),
- $center = Ox.Element()
+ $text = Ox.Element()
.addClass('OxTextPage')
.css({
position: 'absolute',
@@ -128,7 +184,7 @@ pandora.ui.infoView = function(data) {
})
.appendTo($info),
- $right = $('')
+ $statistics = $('
')
.css({
position: 'absolute',
width: statisticsWidth + 'px',
@@ -139,6 +195,14 @@ pandora.ui.infoView = function(data) {
$capabilities;
+ [$options, $edit].forEach(function($element) {
+ $element.find('input').css({
+ borderWidth: 0,
+ borderRadius: 0,
+ padding: '3px'
+ });
+ });
+
if (!canEdit) {
pandora.createLinks($info);
}
@@ -147,7 +211,7 @@ pandora.ui.infoView = function(data) {
['source', 'project'].forEach(function(key) {
if (canEdit || data[key]) {
- $div = $('
').css(css).css({margin: 0}).appendTo($data);
+ var $div = $('
').css(css).css({margin: 0}).appendTo($data);
$('
')
.html(
formatKey({
@@ -158,7 +222,7 @@ pandora.ui.infoView = function(data) {
Ox.EditableContent({
clickLink: pandora.clickLink,
format: function(value) {
- return formatValue(value, key);
+ return formatValue(key, value);
},
placeholder: formatLight(Ox._('unknown')),
editable: canEdit,
@@ -208,7 +272,8 @@ pandora.ui.infoView = function(data) {
$('')
.css({
- margin: '-2px 0 12px 0',
+ marginTop: '-2px',
+ marginBottom: '12px'
})
.append(
Ox.EditableContent({
@@ -217,7 +282,6 @@ pandora.ui.infoView = function(data) {
value: data.title
})
.css({
- //marginBottom: '-3px',
fontWeight: 'bold',
fontSize: '13px',
MozUserSelect: 'text',
@@ -229,7 +293,7 @@ pandora.ui.infoView = function(data) {
}
})
)
- .appendTo($center);
+ .appendTo($text);
// Groups ------------------------------------------------------------------
@@ -243,6 +307,10 @@ pandora.ui.infoView = function(data) {
if (canEdit || data.summary) {
$('
')
+ .css({
+ marginTop: '12px',
+ marginBottom: '12px'
+ })
.append(
Ox.EditableContent({
clickLink: pandora.clickLink,
@@ -260,25 +328,24 @@ pandora.ui.infoView = function(data) {
value: data.summary || ''
})
.css(css)
- // margin gets doubled in the editable -- does it?
- .css({margin: '16px 0 12px 0'})
+ .css({
+ overflow: 'hidden'
+ })
.bindEvent({
submit: function(event) {
editMetadata('summary', event.value);
}
})
)
- .appendTo($center);
- $('
').css({width: '1px', height: 0, clear: 'both'}).appendTo($center);
+ .appendTo($text);
+ $('
').css({width: '1px', height: 0, clear: 'both'}).appendTo($text);
}
// License -----------------------------------------------------------------
renderGroup(['license']);
- // Space -------------------------------------------------------------------
-
- $('
').css(css).css({width: '1px', height: '16px'}).appendTo($center);
+ $('
').css(css).css({height: '16px'}).appendTo($text);
// Duration, Aspect Ratio --------------------------------------------------
@@ -287,7 +354,7 @@ pandora.ui.infoView = function(data) {
value = data[key] || 0;
$('
')
.css({marginBottom: '4px'})
- .append(formatKey(itemKey.title, true))
+ .append(formatKey(itemKey.title, 'statistics'))
.append(
Ox.Theme.formatColor(null, 'gradient')
.css({textAlign: 'right'})
@@ -296,7 +363,7 @@ pandora.ui.infoView = function(data) {
.apply(null, [value].concat(itemKey.format.args))
)
)
- .appendTo($right);
+ .appendTo($statistics);
});
// Hue, Saturation, Lightness, Volume --------------------------------------
@@ -304,33 +371,43 @@ pandora.ui.infoView = function(data) {
['hue', 'saturation', 'lightness', 'volume'].forEach(function(key) {
$('
')
.css({marginBottom: '4px'})
- .append(formatKey(key, true))
+ .append(formatKey(key, 'statistics'))
.append(
Ox.Theme.formatColor(
data[key] || 0, key == 'volume' ? 'lightness' : key
).css({textAlign: 'right'})
)
- .appendTo($right);
+ .appendTo($statistics);
});
// Cuts per Minute ---------------------------------------------------------
$('
')
.css({marginBottom: '4px'})
- .append(formatKey('cuts per minute', true))
+ .append(formatKey('cuts per minute', 'statistics'))
.append(
Ox.Theme.formatColor(null, 'gradient')
.css({textAlign: 'right'})
.html(Ox.formatNumber(data['cutsperminute'] || 0, 3))
)
- .appendTo($right);
+ .appendTo($statistics);
+
+ // Rights Level ------------------------------------------------------------
+
+ var $rightsLevel = $('
');
+ $('
')
+ .css({marginBottom: '4px'})
+ .append(formatKey(Ox._('Rights Level'), 'statistics'))
+ .append($rightsLevel)
+ .appendTo($statistics);
+ renderRightsLevel();
// User and Groups ---------------------------------------------------------
['user', 'groups'].forEach(function(key) {
(canEdit || data[key] && data[key].length) && $('
')
.css({marginBottom: '4px'})
- .append(formatKey(key, true))
+ .append(formatKey(key, 'statistics'))
.append(
$('
')
.css({margin: '2px 0 0 -1px'}) // fixme: weird
@@ -348,7 +425,7 @@ pandora.ui.infoView = function(data) {
})
)
)
- .appendTo($right);
+ .appendTo($statistics);
});
// Created and Modified ----------------------------------------------------
@@ -356,31 +433,30 @@ pandora.ui.infoView = function(data) {
['created', 'modified'].forEach(function(key) {
$('
')
.css({marginBottom: '4px'})
- .append(formatKey(key, true))
+ .append(formatKey(key, 'statistics'))
.append(
$('
').html(Ox.formatDate(data[key], '%B %e, %Y'))
)
- .appendTo($right);
+ .appendTo($statistics);
});
- // Rights Level ------------------------------------------------------------
-
- if (canEdit) {
- var $rightsLevel = $('
');
- $('
')
- .css({marginBottom: '4px'})
- .append(formatKey(Ox._('Rights Level'), true))
- .append($rightsLevel)
- .appendTo($right);
- renderRightsLevel();
- }
-
// Notes --------------------------------------------------------------------
if (canEdit) {
$('
')
.css({marginBottom: '4px'})
- .append(formatKey('Notes', true))
+ .append(
+ formatKey('Notes', 'statistics').options({
+ tooltip: Ox._('Only {0} can see and edit these comments', [
+ Object.keys(pandora.site.capabilities.canEditMetadata).map(function(level, i) {
+ return (
+ i == 0 ? ''
+ : i < Ox.len(pandora.site.capabilities.canEditMetadata) - 1 ? ', '
+ : ' ' + Ox._('and') + ' '
+ ) + Ox.toTitleCase(level)
+ }).join('')])
+ })
+ )
.append(
Ox.EditableContent({
height: 128,
@@ -396,10 +472,10 @@ pandora.ui.infoView = function(data) {
}
})
)
- .appendTo($right);
+ .appendTo($statistics);
}
- $('
').css({height: '16px'}).appendTo($right);
+ $('
').css({height: '16px'}).appendTo($statistics);
function editMetadata(key, value) {
if (value != data[key]) {
@@ -412,7 +488,7 @@ pandora.ui.infoView = function(data) {
edit[key] = value ? value : null;
}
pandora.api.edit(edit, function(result) {
- data[key] = value;
+ data[key] = result.data[key];
descriptions[key] && descriptions[key].options({
value: result.data[key + 'description']
});
@@ -422,11 +498,7 @@ pandora.ui.infoView = function(data) {
pandora.$ui.browser.value(data.id, 'id', result.data.id);
}
pandora.updateItemContext();
- // FIXME: value function should accept {k: v, ...}
- pandora.$ui.browser.value(result.data.id, 'title', result.data.title);
- pandora.$ui.browser.value(result.data.id, 'director', result.data.director);
- pandora.$ui.browser.value(result.data.id, 'country', result.data.country);
- pandora.$ui.browser.value(result.data.id, 'year', result.data.year);
+ pandora.$ui.browser.value(result.data.id, key, result.data[key]);
pandora.$ui.itemTitle
.options({
title: '
' + result.data.title
@@ -440,29 +512,33 @@ pandora.ui.infoView = function(data) {
}
}
- function formatKey(key, isStatistics) {
+ function formatKey(key, mode) {
var item = Ox.getObjectById(pandora.site.itemKeys, key);
key = Ox._(item ? item.title : key);
- return isStatistics
- ? $('').css({marginBottom: '4px', fontWeight: 'bold'})
- .html(Ox._(Ox.toTitleCase(key).replace(' Per ', ' per ')))
- : '
' + Ox._(Ox.toTitleCase(key))
- + ': ';
+ mode = mode || 'text';
+ return mode == 'text'
+ ? '
' + Ox.toTitleCase(key) + ': '
+ : mode == 'description'
+ ? Ox.toTitleCase(key)
+ : Ox.Element()
+ .css({marginBottom: '4px', fontWeight: 'bold'})
+ .html(Ox.toTitleCase(key)
+ .replace(' Per ', ' per '));
}
function formatLight(str) {
- return '
' + str + '';
+ return '
' + str + '';
}
- function formatLink(value, key) {
+ function formatLink(key, value) {
return (Ox.isArray(value) ? value : [value]).map(function(value) {
- return key ?
- '
' + value + ''
+ return key
+ ? '
' + value + ''
: value;
}).join(', ');
}
- function formatValue(value, key) {
+ function formatValue(key, value) {
var ret;
if (key == 'date') {
ret = value ? Ox.formatDate(value,
@@ -476,7 +552,7 @@ pandora.ui.infoView = function(data) {
if (nameKeys.indexOf(key) > -1) {
key = 'name';
}
- return formatLink(ret, key);
+ return formatLink(key, ret);
}
function getRightsLevelElement(rightsLevel) {
@@ -584,7 +660,7 @@ pandora.ui.infoView = function(data) {
Ox.EditableContent({
clickLink: pandora.clickLink,
format: function(value) {
- return formatValue(value, key);
+ return formatValue(key, value);
},
placeholder: formatLight('unknown'),
tooltip: canEdit ? pandora.getEditTooltip() : '',
@@ -598,7 +674,7 @@ pandora.ui.infoView = function(data) {
.appendTo($element);
}
});
- $element.appendTo($center);
+ $element.appendTo($text);
}
}
@@ -676,7 +752,7 @@ pandora.ui.infoView = function(data) {
top: margin + iconHeight + margin + 'px',
width: iconSize + 'px',
}, 250);
- $center.animate({
+ $text.animate({
left: margin + (iconSize == 256 ? 256 : iconWidth) + margin + 'px',
}, 250);
pandora.UI.set({infoIconSize: iconSize});
@@ -694,10 +770,6 @@ pandora.ui.infoView = function(data) {
toggleIconSize();
};
- that.resize = function() {
-
- };
-
that.bindEvent({
pandora_icons: that.reload,
pandora_showsiteposters: function() {
@@ -707,4 +779,4 @@ pandora.ui.infoView = function(data) {
return that;
-}
+};