pandora/static/js/insertEmbedDialog.js

552 lines
21 KiB
JavaScript
Raw Normal View History

'use strict';
pandora.ui.insertEmbedDialog = function(/*[url, ]callback*/) {
if (arguments.length == 1) {
var url, callback = arguments[0];
} else {
var url = arguments[0], callback = arguments[1];
}
var advanced = pandora.user.ui.showAdvancedEmbedOptions,
2013-02-24 09:17:18 +00:00
dialogHeight = 344,
2014-09-26 12:12:25 +00:00
dialogWidth = 416 + Ox.UI.SCROLLBAR_SIZE,
formWidth = dialogWidth - 32 - Ox.UI.SCROLLBAR_SIZE,
2013-02-23 14:33:04 +00:00
2013-02-24 09:17:18 +00:00
that = Ox.Dialog({
buttons: [
Ox.Button({
id: 'cancel',
2013-05-09 10:13:58 +00:00
title: Ox._('Cancel'),
2013-02-24 09:17:18 +00:00
width: 64
})
.bindEvent({
click: function() {
that.close();
}
2013-02-24 09:17:18 +00:00
}),
Ox.Button({
id: 'insert',
2013-05-09 10:13:58 +00:00
title: Ox._('Insert'),
2013-02-24 09:17:18 +00:00
width: 64
})
.bindEvent({
click: function() {
callback($input.url.options('value'));
that.close();
}
2013-02-24 09:17:18 +00:00
})
],
closeButton: true,
content: Ox.Element(),
height: dialogHeight,
keys: {enter: 'insert', escape: 'cancel'},
removeOnClose: true,
2013-05-09 10:13:58 +00:00
title: Ox._('Insert Embed'),
2013-02-24 09:17:18 +00:00
width: dialogWidth
}),
$input = {},
2013-02-24 09:17:18 +00:00
api = pandora.api,
duration,
item,
options = {
keys: ['id', 'duration'],
query: {conditions: [], operator: '&'},
range: [0, 1],
sort: [{key: 'id', operator: '+'}],
},
sites = [pandora.site.site].concat(pandora.site.sites).map(function(site) {
return {id: site.url, title: site.url, https: site.https};
});
2013-02-24 09:17:18 +00:00
api.find(options, function(result) {
2013-02-24 09:17:18 +00:00
duration = result.data.items[0].duration;
item = result.data.items[0].id;
2013-02-24 09:17:18 +00:00
var $panel = Ox.TabPanel({
content: function(id) {
if (id == 'video') {
var $content = Ox.TabPanel({
content: function(id_) {
pandora.UI.set({
showAdvancedEmbedOptions: id_ == 'advanced'
});
return getForm(id);
},
tabs: [
2013-05-09 10:13:58 +00:00
{id: 'basic', title: Ox._('Basic'), selected: !advanced},
{id: 'advanced', title: Ox._('Advanced'), selected: advanced}
2013-02-24 09:17:18 +00:00
]
});
} else {
// ...
}
return $content;
},
tabs: [
2013-05-09 10:13:58 +00:00
{id: 'video', title: Ox._('Video'), selected: true},
{id: 'map', title: Ox._('Map'), disabled: true},
{id: 'calendar', title: Ox._('Calendar'), disabled: true}
2013-02-24 09:17:18 +00:00
]
});
that.options({content: $panel});
});
function getForm(id) {
var $form;
if (id == 'video') {
$form = $('<div>')
.attr({id: 'form'})
.css({padding: '16px', overflowY: 'auto'});
$input.url = Ox.Input({
2013-05-09 10:13:58 +00:00
label: Ox._('URL'),
2013-02-24 09:17:18 +00:00
labelWidth: 128,
width: formWidth,
value: url
2013-02-24 09:17:18 +00:00
})
.bindEvent({
change: function(data) {
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', disabled: !pandora.site.site.https}
],
2013-05-09 10:13:58 +00:00
label: Ox._('Protocol'),
2013-02-24 09:17:18 +00:00
labelWidth: 128,
value: pandora.site.site.https ? 'https' : 'http',
width: formWidth
})
.bindEvent({
change: formatURL
})
.addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'})
.appendTo($form);
$input.site = Ox.SelectInput({
inputWidth: 128,
2013-05-09 10:13:58 +00:00
items: sites.concat([{id: 'other', title: Ox._('Other...')}]),
label: Ox._('Site'),
2013-02-24 09:17:18 +00:00
labelWidth: 128,
placeholder: 'example.com',
max: 1,
min: 1,
value: pandora.site.site.url,
width: formWidth
})
.bindEvent({
change: function(data) {
if (data.value) {
var site = Ox.getObjectById(sites, data.value);
$input.protocol[
!site || site.https ? 'enableItem' : 'disableItem'
]('https').options({
value: !site || !site.https ? 'http' : 'https'
});
updateAPI(data.value, formatURL);
}
2013-02-24 09:17:18 +00:00
}
})
.addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'})
.appendTo($form);
$input.item = Ox.Input({
2013-07-17 10:25:01 +00:00
label: Ox._(pandora.site.itemName.singular),
2013-02-24 09:17:18 +00:00
labelWidth: 128,
value: item,
width: formWidth
})
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({
change: function(data) {
api.get({
id: data.value,
keys: ['duration']
}, function(result) {
if (result.data) {
duration = result.data.duration;
} else {
$input.item.options({value: item});
}
});
formatURL();
}
})
.appendTo($form);
$input.link = Ox.Select({
items: [
2013-05-09 10:13:58 +00:00
{id: 'default', title: Ox._('Default')},
{id: 'player', title: Ox._('Player')},
{id: 'editor', title: Ox._('Editor')},
{id: 'timeline', title: Ox._('Timeline')}
2013-02-24 09:17:18 +00:00
],
2013-05-09 10:13:58 +00:00
label: Ox._('Link'),
2013-02-24 09:17:18 +00:00
labelWidth: 128,
value: 'default',
width: formWidth
})
.addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({
change: formatURL
})
.appendTo($form);
$input.position = Ox.Input({
2013-05-09 10:13:58 +00:00
label: Ox._('Position'),
2013-02-24 09:17:18 +00:00
labelWidth: 128,
2013-02-25 04:47:59 +00:00
placeholder: '00:00:00.000',
2013-02-24 09:17:18 +00:00
width: formWidth
})
.addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({
change: function(data) {
2013-02-25 04:47:59 +00:00
var hasInAndOut = $input['in'].options('value') !== '';
if (data.value) {
2013-02-24 09:17:18 +00:00
$input.position.options({
2013-02-25 04:47:59 +00:00
value: limitPoint(
data.value,
hasInAndOut ? $input['in'].options('value') : 0,
hasInAndOut ? $input.out.options('value') : duration
2013-02-24 09:17:18 +00:00
)
});
}
$input.annotation.options({value: ''});
formatURL();
}
})
.appendTo($form);
$input['in'] = Ox.Input({
2013-05-09 10:13:58 +00:00
label: Ox._('In Point'),
2013-02-24 09:17:18 +00:00
labelWidth: 128,
2013-02-25 04:47:59 +00:00
placeholder: '00:00:00.000',
2013-02-24 09:17:18 +00:00
width: formWidth
})
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({
change: function(data) {
2013-02-25 04:47:59 +00:00
if (data.value) {
$input['in'].options({
value: limitPoint(data.value, 0, duration)
2013-02-24 09:17:18 +00:00
});
2013-02-25 04:47:59 +00:00
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: ''});
2013-02-24 09:17:18 +00:00
}
formatURL();
}
})
.appendTo($form);
$input.out = Ox.Input({
2013-05-09 10:13:58 +00:00
label: Ox._('Out Point'),
2013-02-24 09:17:18 +00:00
labelWidth: 128,
2013-02-25 04:47:59 +00:00
placeholder: '00:00:00.000',
2013-02-24 09:17:18 +00:00
width: formWidth
})
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({
change: function(data) {
2013-02-25 04:47:59 +00:00
if (data.value) {
2013-02-24 09:17:18 +00:00
$input.out.options({
2013-02-25 04:47:59 +00:00
value: limitPoint(data.value, 0, duration)
2013-02-24 09:17:18 +00:00
});
2013-02-25 04:47:59 +00:00
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: ''});
2013-02-24 09:17:18 +00:00
}
formatURL();
}
})
.appendTo($form);
$input.annotation = Ox.Input({
2013-05-09 10:13:58 +00:00
label: Ox._('Annotation'),
2013-02-24 09:17:18 +00:00
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({
2013-05-09 10:13:58 +00:00
label: Ox._('Title'),
2013-02-24 09:17:18 +00:00
labelWidth: 128,
width: formWidth
})
.addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({
change: formatURL
})
.appendTo($form);
$input.showTimeline = Ox.Checkbox({
2013-05-09 10:13:58 +00:00
label: Ox._('Show Large Timeline'),
2013-02-24 09:17:18 +00:00
labelWidth: 128,
value: false,
width: formWidth
})
.addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({
change: function() {
updateForm();
formatURL();
}
2013-02-24 09:17:18 +00:00
})
.appendTo($form);
$input.timeline = Ox.Select({
items: [
2013-05-09 10:13:58 +00:00
{id: 'default', title: Ox._('Default')}
2013-02-24 09:17:18 +00:00
].concat(
pandora.site.timelines
),
2013-05-09 10:13:58 +00:00
label: Ox._('Timeline'),
2013-02-24 09:17:18 +00:00
labelWidth: 128,
value: 'default',
width: formWidth
})
.addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({
change: formatURL
})
.appendTo($form);
$input.showAnnotations = Ox.Checkbox({
2013-05-09 10:13:58 +00:00
label: Ox._('Show Annotations'),
2013-02-24 09:17:18 +00:00
labelWidth: 128,
value: false,
width: formWidth
})
.addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({
change: function() {
updateForm();
formatURL();
}
2013-02-24 09:17:18 +00:00
})
.appendTo($form);
var $showLayersLabel = Ox.Label({
2013-05-09 10:13:58 +00:00
title: Ox._('Show Layers'),
2013-02-24 09:17:18 +00:00
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};
}),
2013-02-24 09:17:18 +00:00
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);
2013-09-08 17:59:22 +00:00
url ? parseURL(url) : formatURL();
2013-02-24 09:17:18 +00:00
updateForm();
} else {
// ...
}
function formatURL() {
var data = Ox.map($input, function($element) {
2014-02-14 09:17:53 +00:00
return $element.options('value');
}),
options = Ox.serialize({
title: data.title || void 0,
showTimeline: data.showTimeline || void 0,
timeline: data.timeline && data.timeline != 'default' ? data.timeline : void 0,
showAnnotations: data.showAnnotations || void 0,
showLayers: data.showAnnotations && data.showLayers ? data.showLayers : void 0,
//matchRatio: true
}, true)
.replace(/_/g, '%09').replace(/\s/g, '_')
.replace(/"/g, '&quot;');
url = data.protocol + '://'
+ data.site + '/'
+ data.item + '/'
+ (data.link == 'default' ? '' : data.link + '/')
+ (data.position ? [data.position] : []).concat(
data['in'] || data.out
? [data['in'], data.out]
: []
).join(',')
+ (data.annotation || '')
2014-02-14 09:17:53 +00:00
+ '#embed'
+ (options ? '?' + options : '');
Ox.print('FU', url);
$input.url.options({value: url});
2013-02-24 09:17:18 +00:00
}
2013-02-25 04:47:59 +00:00
function limitPoint(value, min, max) {
2013-09-08 17:59:22 +00:00
if (Ox.typeOf(min) == 'number') {
min = Ox.formatDuration(min)
}
if (Ox.typeOf(max) == 'number') {
max = Ox.formatDuration(max)
}
2013-02-25 04:47:59 +00:00
return Ox.formatDuration(
Ox.limit(
Ox.parseDuration(value),
Ox.parseDuration(min),
Ox.parseDuration(max)
)
);
}
2013-02-24 09:17:18 +00:00
function parseURL(url) {
var parsed = Ox.parseURL(url),
protocol = parsed.protocol.replace(/:$/, ''),
site = parsed.hostname,
isSameSite = site == $input.site.options('value');
(isSameSite ? Ox.noop : updateAPI)(site, function() {
pandora.URL.parse(parsed.pathname + parsed.search + parsed.hash, function(state) {
var isSameItem = isSameSite && state.item == item,
id = (isSameSite ? state.item : url.split('/')[3]) || item,
query = {};
2013-09-08 17:59:22 +00:00
if (state.hash && state.hash.query) {
2013-02-24 09:17:18 +00:00
state.hash.query.forEach(function(condition) {
query[condition.key] = condition.value;
});
}
(isSameItem ? Ox.noop : api.get)({id: id, keys: ['duration']}, function(result) {
if (result && result.data) {
duration = result.data.duration;
item = id;
}
console.log('parse url', state);
2013-02-24 09:17:18 +00:00
Ox.forEach({
protocol: protocol,
site: site,
item: item,
link: state.view || 'default', // FIXME: wrong, user-dependent
2014-02-16 09:42:34 +00:00
position: Ox.isArray(state.span) && state.span.length == 3
2013-02-24 09:17:18 +00:00
? 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: query.title || '',
showTimeline: query.showTimeline || false,
timeline: query.timeline || 'default',
showAnnotations: query.showAnnotations || false,
showLayers: query.showLayers || pandora.site.layers.map(function(layer) {
return layer.id;
})
}, function(value, key) {
Ox.print('????', key, value);
$input[key].options({value: value});
});
});
});
});
}
function updateAPI(url, callback) {
api = Ox.API({
url: $input.protocol.options('value') + '://' + url + '/api/'
}, function() {
api.find(options, function(result) {
duration = result.data.items[0].duration;
item = result.data.items[0].id;
$input.item.options({value: item}); // fixme: move out
callback();
});
});
}
function updateForm() {
$form.find('.advanced')[
pandora.user.ui.showAdvancedEmbedOptions
? 'show' : 'hide'
]();
$input.timeline[
$input.showTimeline.options('value')
? 'show' : 'hide'
]();
$showLayersLabel[
$input.showAnnotations.options('value')
? 'show' : 'hide'
]();
$input.showLayers[
$input.showAnnotations.options('value')
? 'show' : 'hide'
]();
}
function space() {
return $('<div>').css({height: '16px', width: formWidth + 'px'});
}
return $form;
}
return that;
2013-05-09 10:13:58 +00:00
};