diff --git a/static/js/embedDialog.js b/static/js/embedDialog.js index 6dea86389..fb43d480b 100644 --- a/static/js/embedDialog.js +++ b/static/js/embedDialog.js @@ -18,11 +18,11 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { labelWidth = 192, dialogWidth = listWidth + formWidth + 32 + Ox.UI.SCROLLBAR_SIZE, dialogHeight = 384, + linkPlaceholder = '...', positionPlaceholder = '00:00:00.000', sites = [pandora.site.site].concat(pandora.site.sites).map(function(site) { return {id: site.url, title: site.url, https: site.https}; }), - textPlaceholder = '...', ui = pandora.user.ui, videoRatio, @@ -124,8 +124,6 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { } }), - $form, - $input = { advanced: Ox.Checkbox({ title: Ox._('Show Advanced Options'), @@ -140,6 +138,8 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { }) }, + $form = getForm(), + $panel = Ox.SplitPanel({ elements: [ {element: $list, size: 128 + Ox.UI.SCROLLBAR_SIZE}, @@ -148,8 +148,6 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { orientation: 'horizontal' }), - $loading = Ox.loadingScreen().start(), - that = Ox.Dialog({ buttons: [ Ox.Button({ @@ -175,7 +173,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { }) ], closeButton: true, - content: $loading, + content: $panel, fixedSize: true, height: dialogHeight, removeOnClose: true, @@ -186,11 +184,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { $($input.advanced.find('.OxButton')[0]).css({margin: 0}); $(that.find('.OxBar')[1]).append($input.advanced); - updateAPI(function() { - $form = getForm(); - $loadingScreen.stop(); - that.options({content: $panel}) - }); + updateAPI(); function formatHTML() { var type = $input.type.value(); @@ -263,7 +257,13 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { .attr({id: 'form'}) .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); @@ -277,8 +277,8 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { .css(css) .bindEvent({ change: function() { - updateHTML(); updateForm(); + updateHTML(); } }) .appendTo($form); @@ -296,17 +296,17 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { }) .appendTo($form); - $input.text = Ox.Input({ + $input.link = Ox.Input({ label: Ox._('Link Text'), labelWidth: labelWidth, width: formWidth, - value: textPlaceholder + value: linkPlaceholder }) .css(css) .bindEvent({ change: function(data) { - $input.text.options({ - value: Ox.sanitizeHTML(data.value).trim() || textPlaceholder + $input.link.options({ + value: Ox.sanitizeHTML(data.value).trim() || linkPlaceholder }); updateHTML(); } @@ -400,7 +400,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { label: Ox._(pandora.site.itemName.singular), labelWidth: labelWidth, width: formWidth, - value: 'XYZ' + value: '' }) .css(css) .bindEvent({ @@ -415,7 +415,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { label: Ox._('List'), labelWidth: labelWidth, width: formWidth, - value: 'foo:bar' + value: '' }) .css(css) .bindEvent({ @@ -430,7 +430,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { label: Ox._('Document'), labelWidth: labelWidth, width: formWidth, - value: 'XYZ' + value: '' }) .css(css) .bindEvent({ @@ -445,7 +445,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { label: Ox._('Edit{noun}'), labelWidth: labelWidth, width: formWidth, - value: 'foo:bar' + value: '' }) .css(css) .bindEvent({ @@ -460,7 +460,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { label: Ox._('Text'), labelWidth: labelWidth, width: formWidth, - value: 'foo:bar' + value: '' }) .css(css) .bindEvent({ @@ -480,18 +480,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { .css(css) .bindEvent({ change: function(data) { - var hasInAndOut = $input['in'] - && $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: ''}); + validatePosition('position'); updateHTML() } }) @@ -506,20 +495,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { .css(css) .bindEvent({ change: function(data) { - if (data.value) { - $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: ''}); - } + validatePosition('in'); updateHTML(); } }) @@ -534,20 +510,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { .css(css) .bindEvent({ change: function(data) { - if (data.value) { - $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: ''}); - } + validatePosition('out'); updateHTML(); } }) @@ -561,9 +524,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { .css(css) .bindEvent({ change: function(data) { - ['position', 'in', 'out'].forEach(function(key) { - $input[key].options({value: ''}); - }); + validatePosition('annotation'); updateHTML(); } }) @@ -839,49 +800,38 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { document: 'A', edit: 'foo:bar', editDuration: 3600, - editRatio: 16/9, - item: 'A', + item: 'B', itemDuration: 7200, itemRatio: 4/3, list: 'bar:baz', text: 'baz:foo', - videoResoltion: 480 + videoRatio: 16/9, + videoResolution: 480 } }); }; api.getEmbedDefaults(function(result) { 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(); }); }); } - 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() { var advanced = $input.advanced.value(), type = $input.type.value(), 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.site[advanced ? 'show' : 'hide'](); viewInputs.forEach(function(key) { @@ -917,15 +867,77 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { function validateId(key) { // key can be item, document, list, edit, text 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) { - 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]); 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; }; \ No newline at end of file