decentral1se/pandora
1
0
Fork 0
forked from 0x2620/pandora
Code Issues Pull requests Projects Releases Wiki Activity

update embed dialog

Browse source
This commit is contained in:
rolux 2014-02-16 12:04:52 +00:00
parent 25fc27850e
commit 3e7cc90040
1 changed files with 98 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

192
static/js/embedDialog.js
View file

@ -19,6 +19,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
dialogWidth = listWidth + formWidth + 32 + Ox.UI.SCROLLBAR_SIZE, dialogWidth = listWidth + formWidth + 32 + Ox.UI.SCROLLBAR_SIZE,
dialogHeight = 384, dialogHeight = 384,
linkPlaceholder = '...', linkPlaceholder = '...',
options = {},
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};
@ -30,13 +31,13 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
{ {
id: 'info', id: 'info',
title: Ox._('Info'), title: Ox._('Info'),
description: Ox._('Embed poster and basic metadata'), description: Ox._('Embed a Poster and Basic Metadata'),
inputs: ['item'] inputs: ['item']
}, },
{ {
id: 'video', id: 'video',
title: Ox._('Video'), title: Ox._('Video'),
description: Ox._('Embed a clip or a full video'), description: Ox._('Embed a Clip or a Full Video'),
inputs: [ inputs: [
'item', 'position', 'in', 'out', 'annotation', 'title', 'item', 'position', 'in', 'out', 'annotation', 'title',
'showTimeline', 'showAnnotations', 'matchRatio' 'showTimeline', 'showAnnotations', 'matchRatio'
@ -45,25 +46,25 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
{ {
id: 'timeline', id: 'timeline',
title: Ox._('Timeline'), title: Ox._('Timeline'),
description: Ox._('Embed a timeline'), description: Ox._('Embed a Timeline'),
inputs: ['item', 'position', 'title'] inputs: ['item', 'position', 'title']
}, },
{ {
id: 'list', id: 'list',
title: Ox._('List'), title: Ox._('List'),
description: Ox._('Embed list icon and description'), description: Ox._('Embed a List Icon and Description'),
inputs: ['list'] inputs: ['list']
}, },
{ {
id: 'grid', id: 'grid',
title: Ox._('Grid'), title: Ox._('Grid'),
description: Ox._('Embed movies as a grid'), description: Ox._('Embed Movies as a Grid'),
inputs: ['find', 'sort', 'title'] inputs: ['find', 'sort', 'title']
}, },
{ {
id: 'map', id: 'map',
title: Ox._('Map'), title: Ox._('Map'),
description: Ox._('Embed a map view'), description: Ox._('Embed a Map View'),
inputs: ['switch', 'item', 'find', 'sort', 'title'] inputs: ['switch', 'item', 'find', 'sort', 'title']
}, },
{ {
@ -75,13 +76,13 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
{ {
id: 'document', id: 'document',
title: Ox._('Document'), title: Ox._('Document'),
description: Ox._('Embed a document'), description: Ox._('Embed a Document'),
inputs: ['document'] inputs: ['document']
}, },
{ {
id: 'edit', id: 'edit',
title: Ox._('Edit'), title: Ox._('Edit'),
description: Ox._('Embed an edited video'), description: Ox._('Embed an Edited Video'),
inputs: [ inputs: [
'edit', 'position', 'edit', 'position',
'showTimeline', 'showAnnotations', 'matchRatio' 'showTimeline', 'showAnnotations', 'matchRatio'
@ -184,13 +185,16 @@ 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(); updateOptions();
updateAPI(function() {
updateDefaults(true);
});
function formatHTML() { function formatHTML() {
var type = $input.type.value(); var type = $input.type.value();
return type == 'link' return type == 'link'
? '<a href="' + formatURL() ? '<a href="' + formatURL()
+ '">' + $input.text.value() + '">' + $input.link.value()
+ '</a>' + '</a>'
: '<iframe src="' + formatURL() : '<iframe src="' + formatURL()
+ '" width="' + $input.width.value() + '" width="' + $input.width.value()
@ -372,8 +376,8 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
.css(css) .css(css)
.bindEvent({ .bindEvent({
change: function() { change: function() {
updateAPI();
updateHTML(); updateHTML();
updateAPI(updateDefaults);
} }
}) })
.appendTo($form); .appendTo($form);
@ -480,7 +484,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
.css(css) .css(css)
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
validatePosition('position'); validatePoint('position');
updateHTML() updateHTML()
} }
}) })
@ -495,7 +499,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
.css(css) .css(css)
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
validatePosition('in'); validatePoint('in');
updateHTML(); updateHTML();
} }
}) })
@ -510,7 +514,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
.css(css) .css(css)
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
validatePosition('out'); validatePoint('out');
updateHTML(); updateHTML();
} }
}) })
@ -524,7 +528,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
.css(css) .css(css)
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
validatePosition('annotation'); validatePoint('annotation');
updateHTML(); updateHTML();
} }
}) })
@ -675,57 +679,6 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
} }
function getOptions() {
var options = {};
if (ui.section == 'items') {
if (!ui.item) {
if (ui.listView == 'map') {
options.view = 'map';
} else if (ui.listView == 'calendar') {
options.view = 'calendar';
} else if (
ui.find.conditions.length == 1
&& ui.find.conditions[0].key == 'list'
&& ui.find.conditions[0].operator == '=='
) {
options.view = 'list';
} else {
options.view = 'grid';
}
if (options.view == 'list') {
options.list = ui.find.conditions[0].value;
} else {
options.find = ui.find;
}
} else {
if (ui.itemView == 'documents') {
options.view = 'document';
} else if (Ox.contains(['player', 'editor'], ui.itemView)) {
options.view = 'video';
} else if (ui.itemView == 'timeline') {
options.view = 'timeline';
} else if (ui.itemView == 'map') {
options.view = 'map';
} else if (ui.itemView == 'calendar') {
options.view = 'calendar';
} else {
options.view = 'info';
}
options.item = ui.item;
if (Ox.contains(['player', 'editor', 'timeline'], view)) {
// position
}
if (Ox.contains(['player', 'editor'], view)) {
// in, out, annotation
}
}
} else if (ui.section == 'edits') {
options.view = 'edit';
} else {
options.view = 'text';
}
}
function limitPoint(value, min, max) { function limitPoint(value, min, max) {
/* /*
if (Ox.typeOf(min) == 'number') { if (Ox.typeOf(min) == 'number') {
@ -793,39 +746,27 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
api = Ox.API({ api = Ox.API({
url: $input.protocol.value() + '://' + $input.hostname.value() + '/api/' url: $input.protocol.value() + '://' + $input.hostname.value() + '/api/'
}, function() { }, function() {
// FIXME: remove
api.getEmbedDefaults = function(callback) {
callback({
data: {
document: 'A',
edit: 'foo:bar',
editDuration: 3600,
item: 'B',
itemDuration: 7200,
itemRatio: 4/3,
list: 'bar:baz',
text: 'baz:foo',
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 updateDefaults(keepValues) {
$input.width.options({value: Math.round(defaults.videoResolution * defaults.videoRatio)});
$input.height.options({value: defaults.videoResolution});
['item', 'document', 'list', 'edit', 'text'].forEach(function(key) {
if (!keepValues || !$input[key].options('value')) {
$input[key].options({value: defaults[key]});
}
});
['position', 'in', 'out'].forEach(function(key) {
validatePoint(key);
});
updateHTML();
}
function updateForm() { function updateForm() {
var advanced = $input.advanced.value(), var advanced = $input.advanced.value(),
type = $input.type.value(), type = $input.type.value(),
@ -864,6 +805,69 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
$input.html.options({value: formatHTML()}); $input.html.options({value: formatHTML()});
} }
function updateOptions() {
if (ui.section == 'items') {
if (!ui.item) {
if (ui.listView == 'map') {
options.view = 'map';
} else if (ui.listView == 'calendar') {
options.view = 'calendar';
} else if (
ui.find.conditions.length == 1
&& ui.find.conditions[0].key == 'list'
&& ui.find.conditions[0].operator == '=='
) {
options.view = 'list';
} else {
options.view = 'grid';
}
} else {
if (ui.itemView == 'documents') {
options.view = 'document';
} else if (Ox.contains(['player', 'editor'], ui.itemView)) {
options.view = 'video';
} else if (ui.itemView == 'timeline') {
options.view = 'timeline';
} else if (ui.itemView == 'map') {
options.view = 'map';
} else if (ui.itemView == 'calendar') {
options.view = 'calendar';
} else {
options.view = 'info';
}
}
} else if (ui.section == 'edits') {
options.view = 'edit';
} else {
options.view = 'text';
}
options.switch = !ui.item ? 'list' : 'item';
options.item = ui.item;
options.document = ui.documentsSelection[ui.item][0] || '';
options.list = ui._list;
options.edit = ui.edit;
options.text = ui.text;
options.find = ui.find;
if (ui.item && ui.videoPoints[ui.item]) {
if (ui.videoPoints[ui.item].annotation) {
options.annotation = ui.videoPoints[ui.item].annotation;
} else {
['position', 'in', 'out'].forEach(function(key) {
options[key] = ui.videoPoints[ui.item][key] || '';
});
}
}
Ox.forEach(options, function(value, key) {
if (key == 'view') {
$list.options({selected: [value]});
} else {
$input[key].options({value: value});
}
});
updateForm();
updateHTML();
}
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))]({
@ -876,7 +880,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
if (key == 'item' || key == 'edit') { if (key == 'item' || key == 'edit') {
duration = result.data.duration; duration = result.data.duration;
['position', 'in', 'out'].forEach(function(key) { ['position', 'in', 'out'].forEach(function(key) {
validatePosition(key); validatePoint(key);
}); });
} }
if (key == 'item') { if (key == 'item') {
@ -890,7 +894,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) {
}); });
} }
function validatePosition(key) { function validatePoint(key) {
// key can be position, in, out, annotation // key can be position, in, out, annotation
var hasInAndOut = $input['in'].options('value') !== ''; var hasInAndOut = $input['in'].options('value') !== '';
if ($input[key].value()) { if ($input[key].value()) {