0x2620/pandora
2
1
Fork 1
Code Issues 1.3k Pull requests Releases Wiki Activity

update embed dialog

Browse source
This commit is contained in:
rolux 2014-02-16 11:02:30 +00:00
parent 5905336eac
commit 25fc27850e
1 changed files with 104 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

196
static/js/embedDialog.js
View file

@ -18,11 +18,11 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
labelWidth = 192, labelWidth = 192,
dialogWidth = listWidth + formWidth + 32 + Ox.UI.SCROLLBAR_SIZE, dialogWidth = listWidth + formWidth + 32 + Ox.UI.SCROLLBAR_SIZE,
dialogHeight = 384, dialogHeight = 384,
linkPlaceholder = '...',
positionPlaceholder = '00:00:00.000', positionPlaceholder = '00:00:00.000',
sites = [pandora.site.site].concat(pandora.site.sites).map(function(site) { sites = [pandora.site.site].concat(pandora.site.sites).map(function(site) {
return {id: site.url, title: site.url, https: site.https}; return {id: site.url, title: site.url, https: site.https};
}), }),
textPlaceholder = '...',
ui = pandora.user.ui, ui = pandora.user.ui,
videoRatio, videoRatio,
@ -124,8 +124,6 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
} }
}), }),
$form,
$input = { $input = {
advanced: Ox.Checkbox({ advanced: Ox.Checkbox({
title: Ox._('Show Advanced Options'), title: Ox._('Show Advanced Options'),
@ -140,6 +138,8 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
}) })
}, },
$form = getForm(),
$panel = Ox.SplitPanel({ $panel = Ox.SplitPanel({
elements: [ elements: [
{element: $list, size: 128 + Ox.UI.SCROLLBAR_SIZE}, {element: $list, size: 128 + Ox.UI.SCROLLBAR_SIZE},
@ -148,8 +148,6 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
orientation: 'horizontal' orientation: 'horizontal'
}), }),
$loading = Ox.loadingScreen().start(),
that = Ox.Dialog({ that = Ox.Dialog({
buttons: [ buttons: [
Ox.Button({ Ox.Button({
@ -175,7 +173,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
}) })
], ],
closeButton: true, closeButton: true,
content: $loading, content: $panel,
fixedSize: true, fixedSize: true,
height: dialogHeight, height: dialogHeight,
removeOnClose: true, removeOnClose: true,
@ -186,11 +184,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
$($input.advanced.find('.OxButton')[0]).css({margin: 0}); $($input.advanced.find('.OxButton')[0]).css({margin: 0});
$(that.find('.OxBar')[1]).append($input.advanced); $(that.find('.OxBar')[1]).append($input.advanced);
updateAPI(function() { updateAPI();
$form = getForm();
$loadingScreen.stop();
that.options({content: $panel})
});
function formatHTML() { function formatHTML() {
var type = $input.type.value(); var type = $input.type.value();
@ -263,7 +257,13 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
.attr({id: 'form'}) .attr({id: 'form'})
.css({padding: '16px', overflowY: 'auto'}); .css({padding: '16px', overflowY: 'auto'});
space().html(Ox.getObjectById(views, view).description).appendTo($form); $input.description = Ox.Label({
textAlign: 'center',
title: '',
width: formWidth
})
.css(css)
.appendTo($form);
space().appendTo($form); space().appendTo($form);
@ -277,8 +277,8 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
.css(css) .css(css)
.bindEvent({ .bindEvent({
change: function() { change: function() {
updateHTML();
updateForm(); updateForm();
updateHTML();
} }
}) })
.appendTo($form); .appendTo($form);
@ -296,17 +296,17 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
}) })
.appendTo($form); .appendTo($form);
$input.text = Ox.Input({ $input.link = Ox.Input({
label: Ox._('Link Text'), label: Ox._('Link Text'),
labelWidth: labelWidth, labelWidth: labelWidth,
width: formWidth, width: formWidth,
value: textPlaceholder value: linkPlaceholder
}) })
.css(css) .css(css)
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
$input.text.options({ $input.link.options({
value: Ox.sanitizeHTML(data.value).trim() || textPlaceholder value: Ox.sanitizeHTML(data.value).trim() || linkPlaceholder
}); });
updateHTML(); updateHTML();
} }
@ -400,7 +400,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
label: Ox._(pandora.site.itemName.singular), label: Ox._(pandora.site.itemName.singular),
labelWidth: labelWidth, labelWidth: labelWidth,
width: formWidth, width: formWidth,
value: 'XYZ' value: ''
}) })
.css(css) .css(css)
.bindEvent({ .bindEvent({
@ -415,7 +415,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
label: Ox._('List'), label: Ox._('List'),
labelWidth: labelWidth, labelWidth: labelWidth,
width: formWidth, width: formWidth,
value: 'foo:bar' value: ''
}) })
.css(css) .css(css)
.bindEvent({ .bindEvent({
@ -430,7 +430,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
label: Ox._('Document'), label: Ox._('Document'),
labelWidth: labelWidth, labelWidth: labelWidth,
width: formWidth, width: formWidth,
value: 'XYZ' value: ''
}) })
.css(css) .css(css)
.bindEvent({ .bindEvent({
@ -445,7 +445,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
label: Ox._('Edit{noun}'), label: Ox._('Edit{noun}'),
labelWidth: labelWidth, labelWidth: labelWidth,
width: formWidth, width: formWidth,
value: 'foo:bar' value: ''
}) })
.css(css) .css(css)
.bindEvent({ .bindEvent({
@ -460,7 +460,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
label: Ox._('Text'), label: Ox._('Text'),
labelWidth: labelWidth, labelWidth: labelWidth,
width: formWidth, width: formWidth,
value: 'foo:bar' value: ''
}) })
.css(css) .css(css)
.bindEvent({ .bindEvent({
@ -480,18 +480,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
.css(css) .css(css)
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
var hasInAndOut = $input['in'] validatePosition('position');
&& $input['in'].options('value') !== '';
if (data.value) {
$input.position.options({
value: limitPoint(
data.value,
hasInAndOut ? $input['in'].options('value') : 0,
hasInAndOut ? $input.out.options('value') : duration
)
});
}
$input.annotation && $input.annotation.options({value: ''});
updateHTML() updateHTML()
} }
}) })
@ -506,20 +495,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
.css(css) .css(css)
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
if (data.value) { validatePosition('in');
$input['in'].options({
value: limitPoint(data.value, 0, duration)
});
if ($input.out.options('value') === '') {
$input.out.options({value: Ox.formatDuration(duration)});
} else if (
Ox.parseDuration($input.out.options('value'))
< Ox.parseDuration(data.value)
) {
$input.out.options({value: data.value});
}
$input.annotation && $input.annotation.options({value: ''});
}
updateHTML(); updateHTML();
} }
}) })
@ -534,20 +510,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
.css(css) .css(css)
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
if (data.value) { validatePosition('out');
$input.out.options({
value: limitPoint(data.value, 0, duration)
});
if ($input['in'].options('value') === '') {
$input['in'].options({value: Ox.formatDuration(0)});
} else if (
Ox.parseDuration($input['in'].options('value'))
> Ox.parseDuration(data.value)
) {
$input['in'].options({value: data.value});
}
$input.annotation && $input.annotation.options({value: ''});
}
updateHTML(); updateHTML();
} }
}) })
@ -561,9 +524,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
.css(css) .css(css)
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
['position', 'in', 'out'].forEach(function(key) { validatePosition('annotation');
$input[key].options({value: ''});
});
updateHTML(); updateHTML();
} }
}) })
@ -839,49 +800,38 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
document: 'A', document: 'A',
edit: 'foo:bar', edit: 'foo:bar',
editDuration: 3600, editDuration: 3600,
editRatio: 16/9, item: 'B',
item: 'A',
itemDuration: 7200, itemDuration: 7200,
itemRatio: 4/3, itemRatio: 4/3,
list: 'bar:baz', list: 'bar:baz',
text: 'baz:foo', text: 'baz:foo',
videoResoltion: 480 videoRatio: 16/9,
videoResolution: 480
} }
}); });
}; };
api.getEmbedDefaults(function(result) { api.getEmbedDefaults(function(result) {
defaults = result.data; defaults = result.data;
$input.width.options({value: Math.round(defaults.videoResolution * defaults.videoRatio)});
$input.height.options({value: defaults.videoResolution});
['item', 'document', 'list', 'edit', 'text'].forEach(function(key) {
$input[key].options({value: defaults[key]});
});
['position', 'in', 'out'].forEach(function(key) {
validatePosition(key);
});
updateHTML();
callback && callback(); callback && callback();
}); });
}); });
} }
function updateEditDefaults(callback) {
api.getEdit({
id: $input.edit.value(),
keys: ['duration']
}, function(result) {
duration = result.data.duration;
callback();
});
}
function updateItemDefaults(callback) {
api.get({
id: $input.item.value(),
keys: ['aspectratio', 'duration']
}, function(result) {
duration = result.data.duration;
videoRatio = result.data.aspectratio;
callback();
});
}
function updateForm() { function updateForm() {
var advanced = $input.advanced.value(), var advanced = $input.advanced.value(),
type = $input.type.value(), type = $input.type.value(),
view = $list.options('selected')[0]; view = $list.options('selected')[0];
$input.text[type == 'link' ? 'show' : 'hide'](); $input.description.options({title: Ox.getObjectById(views, view).description});
$input.link[type == 'link' ? 'show' : 'hide']();
$input.size[type == 'iframe' ? 'show' : 'hide'](); $input.size[type == 'iframe' ? 'show' : 'hide']();
$input.site[advanced ? 'show' : 'hide'](); $input.site[advanced ? 'show' : 'hide']();
viewInputs.forEach(function(key) { viewInputs.forEach(function(key) {
@ -917,15 +867,77 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
function validateId(key) { function validateId(key) {
// key can be item, document, list, edit, text // key can be item, document, list, edit, text
pandora.api['get' + (key == 'item' ? '' : Ox.toTitleCase(key))]({ pandora.api['get' + (key == 'item' ? '' : Ox.toTitleCase(key))]({
id: $input[key].value(); id: $input[key].value(),
keys: key == 'item' ? ['aspectratio', 'duration']
: key == 'edit' ? ['duration']
: []
}, function(result) { }, function(result) {
if (result.data.status == 404) { if (result.status == 200) {
if (key == 'item' || key == 'edit') {
duration = result.data.duration;
['position', 'in', 'out'].forEach(function(key) {
validatePosition(key);
});
}
if (key == 'item') {
videoRatio = result.data.aspectratio;
// ...
}
} else {
$input[key].value(defaults[key]); $input[key].value(defaults[key]);
updateHTML(); updateHTML();
} }
}); });
} }
function validatePosition(key) {
// key can be position, in, out, annotation
var hasInAndOut = $input['in'].options('value') !== '';
if ($input[key].value()) {
if (key == 'position') {
$input.position.options({
value: limitPoint(
data.value,
hasInAndOut ? $input['in'].options('value') : 0,
hasInAndOut ? $input.out.options('value') : duration
)
});
$input.annotation.options({value: ''});
} else if (key == 'in') {
$input['in'].options({
value: limitPoint(data.value, 0, duration)
});
if ($input.out.options('value') === '') {
$input.out.options({value: Ox.formatDuration(duration)});
} else if (
Ox.parseDuration($input.out.options('value'))
< Ox.parseDuration(data.value)
) {
$input.out.options({value: data.value});
}
$input.annotation.options({value: ''});
} else if (key == 'out') {
$input.out.options({
value: limitPoint(data.value, 0, duration)
});
if ($input['in'].options('value') === '') {
$input['in'].options({value: Ox.formatDuration(0)});
} else if (
Ox.parseDuration($input['in'].options('value'))
> Ox.parseDuration(data.value)
) {
$input['in'].options({value: data.value});
}
$input.annotation.options({value: ''});
} else if (key == 'annotation') {
// TODO: validate
['position', 'in', 'out'].forEach(function(key) {
$input[key].options({value: ''});
});
}
}
}
return that; return that;
}; };