update insertEmbedDialog

This commit is contained in:
rolux 2013-02-23 20:03:04 +05:30
parent 006e2e6f72
commit 432bcbdfa2

View file

@ -3,9 +3,9 @@
pandora.ui.insertEmbedDialog = function(callback) { pandora.ui.insertEmbedDialog = function(callback) {
var advanced = pandora.user.ui.showAdvancedEmbedOptions, var advanced = pandora.user.ui.showAdvancedEmbedOptions,
dialogWidth = 416 - Ox.UI.SCROLLBAR_SIZE,
dialogHeight = 416, dialogHeight = 416,
formWidth = dialogWidth - 32, dialogWidth = 416 + Ox.UI.SCROLLBAR_SIZE,
formWidth = dialogWidth - 32 - Ox.UI.SCROLLBAR_SIZE,
$input = {}, $input = {},
$panel = Ox.TabPanel({ $panel = Ox.TabPanel({
@ -13,307 +13,334 @@ pandora.ui.insertEmbedDialog = function(callback) {
if (id == 'video') { if (id == 'video') {
var $form = Ox.Element().attr({id: 'form'}); var $content = Ox.TabPanel({
content: function(id) {
$input.advanced = Ox.ButtonGroup({ pandora.UI.set({
buttons: [ showAdvancedEmbedOptions: id == 'advanced'
{id: 'basic', title: 'Basic'}, });
{id: 'advanced', title: 'Advanced'}
], var $form = $('<div>')
label: 'Show Advanced Options', .attr({id: 'form'})
labelWidth: 128, .css({padding: '16px', overflowY: 'auto'});
selectable: true,
value: pandora.user.ui.showAdvancedEmbedOptions $input.url = Ox.Input({
? 'advanced' : 'basic', label: 'URL',
width: formWidth labelWidth: 128,
}) width: formWidth
.bindEvent({ })
change: function(data) { .bindEvent({
pandora.UI.set({ change: function() {
showAdvancedEmbedOptions: data.value == 'advanced' parseURL(data.value);
}
})
.css({display: 'inline-block', margin: '4px 0'})
.appendTo($form);
space().appendTo($form);
$input.protocol = Ox.Select({
items: [
{id: 'http', title: 'http'},
{id: 'https', title: 'https'}
],
label: 'Protocol',
labelWidth: 128,
value: 'http',
width: formWidth
})
.bindEvent({
change: formatURL
})
.addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'})
.appendTo($form);
$input.site = Ox.SelectInput({
inputWidth: 128,
items: [pandora.site.site]
.concat(pandora.site.sites)
.map(function(site) {
return {id: site.url, title: site.name};
}),
label: 'Site',
labelWidth: 128,
max: 1,
min: 1,
value: pandora.site.site.url,
width: formWidth
})
.bindEvent({
change: formatURL
})
.addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'})
.appendTo($form);
$input.item = Ox.Input({
label: pandora.site.itemName.singular,
labelWidth: 128,
width: formWidth
})
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({
change: formatURL
})
.appendTo($form);
$input.link = Ox.Select({
items: [
{id: 'default', title: 'Default'},
{id: 'player', title: 'Player'},
{id: 'editor', title: 'Editor'},
{id: 'timeline', title: 'Timeline'}
],
label: 'Link',
labelWidth: 128,
value: 'default',
width: formWidth
})
.addClass('advanced')
.bindEvent({
change: formatURL
})
.appendTo($form);
$input.position = Ox.Input({
label: 'Position',
labelWidth: 128,
width: formWidth
})
.addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({
change: function(data) {
$input.annotation.options({value: ''});
formatURL();
}
})
.appendTo($form);
$input['in'] = Ox.Input({
label: 'In Point',
labelWidth: 128,
width: formWidth
})
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({
change: function(data) {
$input.annotation.options({value: ''});
formatURL();
}
})
.appendTo($form);
$input.out = Ox.Input({
label: 'Out Point',
labelWidth: 128,
width: formWidth
})
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({
change: function(data) {
$input.annotation.options({value: ''});
formatURL();
}
})
.appendTo($form);
$input.annotation = Ox.Input({
label: 'Annotation',
labelWidth: 128,
width: formWidth
})
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({
change: function(data) {
['position', 'in', 'out'].forEach(function(key) {
$input[key].options({value: ''});
});
formatURL();
}
})
.appendTo($form);
space().appendTo($form);
$input.title = Ox.Input({
label: 'Title',
labelWidth: 128,
width: formWidth
})
.addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({
change: formatURL
})
.appendTo($form);
$input.showTimeline = Ox.Checkbox({
label: 'Show Large Timeline',
labelWidth: 128,
value: false,
width: formWidth
})
.addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({
change: formatURL
})
.appendTo($form);
$input.timeline = Ox.Select({
items: [
{id: 'default', title: 'Default'}
].concat(
pandora.site.timelines
),
label: 'Timeline',
labelWidth: 128,
value: 'default',
width: formWidth
})
.addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({
change: formatURL
})
.appendTo($form);
$input.showAnnotations = Ox.Checkbox({
label: 'Show Annotations',
labelWidth: 128,
value: false,
width: formWidth
})
.addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({
change: formatURL
})
.appendTo($form);
var $showLayersLabel = Ox.Label({
title: 'Show Layers',
width: formWidth
})
.addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({
change: formatURL
})
.appendTo($form);
$input.showLayers = Ox.CheckboxGroup({
checkboxes: pandora.site.layers.map(function(layer) {
return {id: layer.id, title: layer.title};
}),
max: pandora.site.layers.length,
min: 0,
type: 'list',
value: pandora.site.layers.map(function(layer) {
return layer.id;
}),
width: formWidth - 128
})
.addClass('advanced')
.css({display: 'inline-block', margin: '4px 0 4px 128px'})
.bindEvent({
change: formatURL
})
.appendTo($form);
updateForm();
function formatURL() {
var data = Ox.map($input, function($element) {
return $element.options('value');
}); });
updateForm(); $input.url.value(
data.protocol + '://'
+ data.site + '/'
+ data.item + '/'
+ (data.link == 'default' ? '' : data.link + '/')
// ...
+ (data.annotation || '')
+ '#?embed=true'
+ (data.title ? '&title=' + JSON.stringify(data.title) : '')
+ (data.showTimeline ? '&showTimeline=true' : '')
+ (data.timeline != 'default' ? '&timeline=' + JSON.stringify(data.timeline) : '')
+ (data.showAnnotations ? '&showAnnotations=true' : '')
+ (data.showAnnotations && data.showLayers.length ? '&showLayers=' + JSON.stringify(data.showLayers) : '')
+ '&matchRatio=true'
);
} }
})
.appendTo($form);
space().appendTo($form); function parseURL(url) {
var parsed = Ox.parseURL(url);
$input.url = Ox.Input({ pandora.URL.parse(parsed.pathname + path.search + path.hash, function(state) {
label: 'URL', var query = {};
labelWidth: 128, state.hash.query.forEach(function(condition) {
width: formWidth query[condition.key] = condition.value;
}) });
.bindEvent({ Ox.forEach({
change: function() { protocol: parsed.protocol,
parseURL(data.value); site: parsed.hostname,
item: state.item || '',
link: state.view || 'default', // FIXME: wrong, user-dependent
position: Ox.isArray(state.span)
? Ox.formatDuration(state.span[0]) : '',
'in': Ox.isArray(state.span)
? Ox.formatDuration(state.span[state.span.length - 2]) : '',
out: Ox.isArray(state.span)
? Ox.formatDuration(state.span[state.span.length - 1]) : '',
annotation: Ox.isString(state.span) ? state.span : '',
title: hash.title || '',
showTimeline: hash.showTimeline || false,
timeline: hash.timeline || 'default',
showAnnotations: hash.showAnnotations || false,
showLayers: hash.showLayers || pandora.site.layers.map(function(layer) {
return layer.id;
})
}, function(value, key) {
$input[key].options({value: value});
});
});
} }
})
.appendTo($form);
space().appendTo($form); function updateForm() {
$form.find('.advanced')[
$input.protocol = Ox.Select({ pandora.user.ui.showAdvancedEmbedOptions
items: [ ? 'show' : 'hide'
{id: 'http', title: 'http'}, ]();
{id: 'https', title: 'https'} $input.timeline[
], $input.showTimeline.options('value')
label: 'Protocol', ? 'show' : 'hide'
labelWidth: 128, ]();
value: 'http', $showLayersLabel[
width: formWidth $input.showAnnotations.options('value')
}) ? 'show' : 'hide'
.bindEvent({ ]();
change: formatURL $input.showLayers[
}) $input.showAnnotations.options('value')
.addClass('advanced') ? 'show' : 'hide'
.appendTo($form); ]();
$input.site = Ox.SelectInput({
inputWidth: 128,
items: [pandora.site.site]
.concat(pandora.site.sites)
.map(function(site) {
return {id: site.url, title: site.name};
}),
label: 'Site',
labelWidth: 128,
max: 1,
min: 1,
value: site.url,
width: formWidth
})
.bindEvent({
change: formatURL
})
.addClass('advanced')
.appendTo($form);
$input.item = Ox.Input({
label: pandora.site.itemName.singular,
labelWidth: 128,
width: formWidth
})
.bindEvent({
change: formatURL
})
.appendTo($input);
$input.link = Ox.Select({
items: [
{id: 'default', title: 'Default'},
{id: 'player', title: 'Player'},
{id: 'editor', title: 'Editor'},
{id: 'timeline', title: 'Timeline'}
],
label: 'Site',
labelWidth: 128,
value: 'default',
width: formWidth
})
.addClass('advanced')
.bindEvent({
change: formatURL
})
.appendTo($form);
$input.position = Ox.Input({
label: 'Position',
labelWidth: 128,
width: formWidth
})
.addClass('advanced')
.bindEvent({
change: function(data) {
// ...
formatURL();
} }
})
.appendTo($form);
$input['in'] = Ox.Input({ return $form;
label: 'In Point',
labelWidth: 128,
width: formWidth
})
.bindEvent({
change: function(data) {
// ...
formatURL();
}
})
.appendTo($form);
$input.out = Ox.Input({ },
label: 'Out Point', tabs: [
labelWidth: 128, {id: 'basic', title: 'Basic', selected: !advanced},
width: formWidth {id: 'advanced', title: 'Advanced', selected: advanced}
}) ]
.bindEvent({
change: function(data) {
// ...
formatURL();
}
})
.appendTo($form);
$input.annotation = Ox.Input({
label: 'Annotation',
labelWidth: 128,
width: formWidth
})
.bindEvent({
change: formatURL
})
.appendTo($form);
space().appendTo($form);
$input.title = Ox.Input({
label: 'Title',
labelWidth: 128,
width: formWidth
})
.bindEvent({
change: formatURL
})
.addClass('advanced')
.appendTo($form);
$input.showTimeline = Ox.Checkbox({
label: 'Show Large Timeline',
labelWidth: 128,
value: false,
width: formWidth
})
.bindEvent({
change: formatURL
})
.addClass('advanced')
.appendTo($form);
$input.timeline = Ox.Select({
items: [
{id: 'default', title: 'Default'}
].concat(
pandora.site.timelines
),
label: 'Timeline',
labelWidth: 128,
value: 'default',
width: formWidth
})
.bindEvent({
change: formatURL
})
.addClass('advanced')
.appendTo($form);
$input.showAnnotations = Ox.Checkbox({
label: 'Show Annotations',
labelWidth: 128,
value: false,
width: formWidth
})
.bindEvent({
change: formatURL
})
.addClass('advanced')
.appendTo($form);
Ox.Label({
title: 'Show Layers',
width: formWidth
})
.bindEvent({
change: formatURL
})
.addClass('advanced')
.appendTo($form);
$input.showLayers = Ox.CheckboxGroup({
checkboxes: pandora.site.layers.map(function(layer) {
return {id: layer.id, title: layer.title};
}),
max: pandora.site.layers.length,
min: 0,
type: 'list',
value: pandora.site.layers.map(function(layer) {
return layer.id;
}),
width: formWidth
})
.bindEvent({
change: formatURL
})
.addClass('advanced')
.appendTo($form);
updateForm();
return $form;
}
function formatURL() {
var data = $input.map(function($element) {
return $element.options('value');
}); });
$url.value(
data.protocol + '://' } else {
+ data.site + '/' // ...
+ data.item + '/'
+ (data.link == 'default' ? '' : data.link + '/')
// ...
+ (data.annotation || '')
+ '#?embed=true'
+ (data.title ? '&title=' + JSON.stringify(data.title) : '')
+ (data.showTimeline ? '&showTimeline=true' : '')
+ (data.timeline ? '&timeline=' + JSON.stringify(data.timeline) : '')
+ (data.showAnnotations ? '&showAnnotations=true' : '')
+ (data.showLayers.length ? '&showLayers=' + JSON.stringify(data.showLayers) : '')
+ '&matchRatio=true'
);
} }
function parseURL(url) { return $content;
var parsed = Ox.parseURL(url);
pandora.URL.parse(parsed.pathname + path.search + path.hash, function(state) {
var query = {};
state.hash.query.forEach(function(condition) {
query[condition.key] = condition.value;
});
Ox.forEach({
protocol: parsed.protocol,
site: parsed.hostname,
item: state.item || '',
link: state.view || 'default', // FIXME: wrong, user-dependent
position: Ox.isArray(state.span)
? Ox.formatDuration(state.span[0]) : '',
'in': Ox.isArray(state.span)
? Ox.formatDuration(state.span[state.span.length - 2]) : '',
out: Ox.isArray(state.span)
? Ox.formatDuration(state.span[state.span.length - 1]) : '',
annotation: Ox.isString(state.span) ? state.span : '',
title: hash.title || '',
showTimeline: hash.showTimeline || false,
timeline: hash.timeline || 'default',
showAnnotations: hash.showAnnotations || false,
showLayers: hash.showLayers || pandora.site.layers.map(function(layer) {
return layer.id;
})
}, function(value, key) {
$input[key].options({value: value});
});
});
}
function updateForm() {
$form.find('.advanced')[
pandora.user.ui.showAdvancedEmbedOptions
? 'show' : 'hide'
]();
}
}, },
tabs: [ tabs: [
@ -349,11 +376,11 @@ pandora.ui.insertEmbedDialog = function(callback) {
], ],
closeButton: true, closeButton: true,
content: $panel, content: $panel,
height: 416, height: dialogHeight,
keys: {enter: 'insert', escape: 'cancel'}, keys: {enter: 'insert', escape: 'cancel'},
removeOnClose: true, removeOnClose: true,
title: 'Insert Embed', title: 'Insert Embed',
width: 416 + Ox.UI.SCROLLBAR_SIZE width: dialogWidth
}); });
function space() { function space() {