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

update insertEmbedDialog

Browse source
This commit is contained in:
rolux 2013-02-24 14:47:18 +05:30
parent 47aee099b1
commit 9a26a72a73
1 changed files with 499 additions and 376 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

299
static/js/pandora/insertEmbedDialog.js
View file

@ -3,24 +3,100 @@
pandora.ui.insertEmbedDialog = function(callback) { pandora.ui.insertEmbedDialog = function(callback) {
var advanced = pandora.user.ui.showAdvancedEmbedOptions, var advanced = pandora.user.ui.showAdvancedEmbedOptions,
dialogHeight = 416, dialogHeight = 344,
dialogWidth = 416 + Ox.UI.SCROLLBAR_SIZE, dialogWidth = 416 + Ox.UI.SCROLLBAR_SIZE,
formWidth = dialogWidth - 32 - Ox.UI.SCROLLBAR_SIZE, formWidth = dialogWidth - 32 - Ox.UI.SCROLLBAR_SIZE,
that = Ox.Dialog({
buttons: [
Ox.Button({
id: 'cancel',
title: 'Cancel',
width: 64
})
.bindEvent({
click: function() {
that.close();
}
}),
Ox.Button({
id: 'insert',
title: 'Insert',
width: 64
})
.bindEvent({
click: function() {
callback($input.url.options('value'));
that.close();
}
})
],
closeButton: true,
content: Ox.Element(),
height: dialogHeight,
keys: {enter: 'insert', escape: 'cancel'},
removeOnClose: true,
title: 'Insert Embed',
width: dialogWidth
}),
$input = {}, $input = {},
$panel = Ox.TabPanel({ 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};
});
api.find(options, function(result) {
duration = result.data.items[0].duration;
item = result.data.items[0].id;
var $panel = Ox.TabPanel({
content: function(id) { content: function(id) {
if (id == 'video') {
var $content = Ox.TabPanel({
content: function(id_) {
pandora.UI.set({
showAdvancedEmbedOptions: id_ == 'advanced'
});
return getForm(id);
},
tabs: [
{id: 'basic', title: 'Basic', selected: !advanced},
{id: 'advanced', title: 'Advanced', selected: advanced}
]
});
} else {
// ...
}
return $content;
},
tabs: [
{id: 'video', title: 'Video', selected: true},
{id: 'map', title: 'Map', disabled: true},
{id: 'calendar', title: 'Calendar', disabled: true}
]
});
that.options({content: $panel});
});
function getForm(id) {
var $form;
if (id == 'video') { if (id == 'video') {
var $content = Ox.TabPanel({ $form = $('<div>')
content: function(id) {
pandora.UI.set({
showAdvancedEmbedOptions: id == 'advanced'
});
var $form = $('<div>')
.attr({id: 'form'}) .attr({id: 'form'})
.css({padding: '16px', overflowY: 'auto'}); .css({padding: '16px', overflowY: 'auto'});
@ -30,7 +106,7 @@ pandora.ui.insertEmbedDialog = function(callback) {
width: formWidth width: formWidth
}) })
.bindEvent({ .bindEvent({
change: function() { change: function(data) {
parseURL(data.value); parseURL(data.value);
} }
}) })
@ -42,11 +118,11 @@ pandora.ui.insertEmbedDialog = function(callback) {
$input.protocol = Ox.Select({ $input.protocol = Ox.Select({
items: [ items: [
{id: 'http', title: 'http'}, {id: 'http', title: 'http'},
{id: 'https', title: 'https'} {id: 'https', title: 'https', disabled: !pandora.site.site.https}
], ],
label: 'Protocol', label: 'Protocol',
labelWidth: 128, labelWidth: 128,
value: 'http', value: pandora.site.site.https ? 'https' : 'http',
width: formWidth width: formWidth
}) })
.bindEvent({ .bindEvent({
@ -58,20 +134,27 @@ pandora.ui.insertEmbedDialog = function(callback) {
$input.site = Ox.SelectInput({ $input.site = Ox.SelectInput({
inputWidth: 128, inputWidth: 128,
items: [pandora.site.site] items: sites.concat([{id: 'other', title: 'Other...'}]),
.concat(pandora.site.sites)
.map(function(site) {
return {id: site.url, title: site.name};
}),
label: 'Site', label: 'Site',
labelWidth: 128, labelWidth: 128,
placeholder: 'example.com',
max: 1, max: 1,
min: 1, min: 1,
value: pandora.site.site.url, value: pandora.site.site.url,
width: formWidth width: formWidth
}) })
.bindEvent({ .bindEvent({
change: formatURL 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);
}
}
}) })
.addClass('advanced') .addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'}) .css({display: 'inline-block', margin: '4px 0'})
@ -80,11 +163,24 @@ pandora.ui.insertEmbedDialog = function(callback) {
$input.item = Ox.Input({ $input.item = Ox.Input({
label: pandora.site.itemName.singular, label: pandora.site.itemName.singular,
labelWidth: 128, labelWidth: 128,
value: item,
width: formWidth width: formWidth
}) })
.css({display: 'inline-block', margin: '4px 0'}) .css({display: 'inline-block', margin: '4px 0'})
.bindEvent({ .bindEvent({
change: formatURL 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); .appendTo($form);
@ -101,6 +197,7 @@ pandora.ui.insertEmbedDialog = function(callback) {
width: formWidth width: formWidth
}) })
.addClass('advanced') .addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({ .bindEvent({
change: formatURL change: formatURL
}) })
@ -109,12 +206,24 @@ pandora.ui.insertEmbedDialog = function(callback) {
$input.position = Ox.Input({ $input.position = Ox.Input({
label: 'Position', label: 'Position',
labelWidth: 128, labelWidth: 128,
placeholder: '00:00:00',
width: formWidth width: formWidth
}) })
.addClass('advanced') .addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'}) .css({display: 'inline-block', margin: '4px 0'})
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
if ($input['in'].options('value')) {
$input.position.options({
value: Ox.formatDuration(
Ox.limit(
Ox.parseDuration($input.position.options('value')),
Ox.parseDuration($input['in'].options('value')),
Ox.parseDuration($input.out.options('value'))
)
)
});
}
$input.annotation.options({value: ''}); $input.annotation.options({value: ''});
formatURL(); formatURL();
} }
@ -124,11 +233,21 @@ pandora.ui.insertEmbedDialog = function(callback) {
$input['in'] = Ox.Input({ $input['in'] = Ox.Input({
label: 'In Point', label: 'In Point',
labelWidth: 128, labelWidth: 128,
placeholder: '00:00:00',
width: formWidth width: formWidth
}) })
.css({display: 'inline-block', margin: '4px 0'}) .css({display: 'inline-block', margin: '4px 0'})
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
var min = Ox.parseDuration(data.value) + 1;
if (
$input.out.options('value') === ''
|| input.out.options('value') < min
) {
$input.out.options({
value: Ox.formatDuration(min)
});
}
$input.annotation.options({value: ''}); $input.annotation.options({value: ''});
formatURL(); formatURL();
} }
@ -138,11 +257,25 @@ pandora.ui.insertEmbedDialog = function(callback) {
$input.out = Ox.Input({ $input.out = Ox.Input({
label: 'Out Point', label: 'Out Point',
labelWidth: 128, labelWidth: 128,
placeholder: '00:00:00',
width: formWidth width: formWidth
}) })
.css({display: 'inline-block', margin: '4px 0'}) .css({display: 'inline-block', margin: '4px 0'})
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
if (Ox.parseDuration(data.value) < 1) {
$input.out.options({value: 1});
data.value = 1
}
var max = Ox.parseDuration(data.value) - 1;
if (
!input['in'].options('value') === ''
|| input['in'].options > max
) {
$input.out.options({
value: Ox.formatDuration(max)
});
}
$input.annotation.options({value: ''}); $input.annotation.options({value: ''});
formatURL(); formatURL();
} }
@ -253,8 +386,17 @@ pandora.ui.insertEmbedDialog = function(callback) {
}) })
.appendTo($form); .appendTo($form);
formatURL();
updateForm(); updateForm();
pandora.$$$input = $input
} else {
// ...
}
function formatURL() { function formatURL() {
var data = Ox.map($input, function($element) { var data = Ox.map($input, function($element) {
return $element.options('value'); return $element.options('value');
@ -264,7 +406,11 @@ pandora.ui.insertEmbedDialog = function(callback) {
+ data.site + '/' + data.site + '/'
+ data.item + '/' + data.item + '/'
+ (data.link == 'default' ? '' : data.link + '/') + (data.link == 'default' ? '' : data.link + '/')
// ... + ([data.position] || []).concat(
data['in'] || data.out
? [data['in'], data.out]
: []
).join(','),
+ (data.annotation || '') + (data.annotation || '')
+ '#?embed=true' + '#?embed=true'
+ (data.title ? '&title=' + JSON.stringify(data.title) : '') + (data.title ? '&title=' + JSON.stringify(data.title) : '')
@ -277,16 +423,29 @@ pandora.ui.insertEmbedDialog = function(callback) {
} }
function parseURL(url) { function parseURL(url) {
var parsed = Ox.parseURL(url); var parsed = Ox.parseURL(url),
pandora.URL.parse(parsed.pathname + path.search + path.hash, function(state) { protocol = parsed.protocol.replace(/:$/, ''),
var query = {}; 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 = {};
if (state.hash) {
state.hash.query.forEach(function(condition) { state.hash.query.forEach(function(condition) {
query[condition.key] = condition.value; 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;
}
Ox.forEach({ Ox.forEach({
protocol: parsed.protocol, protocol: protocol,
site: parsed.hostname, site: site,
item: state.item || '', item: item,
link: state.view || 'default', // FIXME: wrong, user-dependent link: state.view || 'default', // FIXME: wrong, user-dependent
position: Ox.isArray(state.span) position: Ox.isArray(state.span)
? Ox.formatDuration(state.span[0]) : '', ? Ox.formatDuration(state.span[0]) : '',
@ -295,17 +454,33 @@ pandora.ui.insertEmbedDialog = function(callback) {
out: Ox.isArray(state.span) out: Ox.isArray(state.span)
? Ox.formatDuration(state.span[state.span.length - 1]) : '', ? Ox.formatDuration(state.span[state.span.length - 1]) : '',
annotation: Ox.isString(state.span) ? state.span : '', annotation: Ox.isString(state.span) ? state.span : '',
title: hash.title || '', title: query.title || '',
showTimeline: hash.showTimeline || false, showTimeline: query.showTimeline || false,
timeline: hash.timeline || 'default', timeline: query.timeline || 'default',
showAnnotations: hash.showAnnotations || false, showAnnotations: query.showAnnotations || false,
showLayers: hash.showLayers || pandora.site.layers.map(function(layer) { showLayers: query.showLayers || pandora.site.layers.map(function(layer) {
return layer.id; return layer.id;
}) })
}, function(value, key) { }, function(value, key) {
Ox.print('????', key, value);
$input[key].options({value: 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() { function updateForm() {
@ -327,66 +502,14 @@ pandora.ui.insertEmbedDialog = function(callback) {
](); ]();
} }
return $form;
},
tabs: [
{id: 'basic', title: 'Basic', selected: !advanced},
{id: 'advanced', title: 'Advanced', selected: advanced}
]
});
} else {
// ...
}
return $content;
},
tabs: [
{id: 'video', title: 'Video', selected: true},
{id: 'map', title: 'Map', disabled: true},
{id: 'calendar', title: 'Calendar', disabled: true}
]
}),
that = Ox.Dialog({
buttons: [
Ox.Button({
id: 'cancel',
title: 'Cancel',
width: 64
})
.bindEvent({
click: function() {
that.close();
}
}),
Ox.Button({
id: 'insert',
title: 'Insert',
width: 64
})
.bindEvent({
click: function() {
callback($input.url.options('value'));
that.close();
}
})
],
closeButton: true,
content: $panel,
height: dialogHeight,
keys: {enter: 'insert', escape: 'cancel'},
removeOnClose: true,
title: 'Insert Embed',
width: dialogWidth
});
function space() { function space() {
return $('<div>').css({height: '16px', width: formWidth + 'px'}); return $('<div>').css({height: '16px', width: formWidth + 'px'});
} }
return $form;
}
return that; return that;
}; };