From 4c0bdc52a656b2c6354a1311705546b4070eb254 Mon Sep 17 00:00:00 2001 From: rolux Date: Sun, 16 Feb 2014 15:12:48 +0530 Subject: [PATCH] update embed dialog --- static/js/embedDialog.js | 300 +++++++++++++++++++++++++++------------ 1 file changed, 210 insertions(+), 90 deletions(-) diff --git a/static/js/embedDialog.js b/static/js/embedDialog.js index 082e8a54f..6dea86389 100644 --- a/static/js/embedDialog.js +++ b/static/js/embedDialog.js @@ -8,7 +8,8 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { var url = arguments[0], callback = arguments[1]; } - var api = pandora.api, + var api, + defaults = {}, duration, formWidth = 612, iframeHeight = Ox.last(pandora.site.video.resolutions), @@ -21,7 +22,9 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { 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, views = [ { @@ -121,6 +124,8 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { } }), + $form, + $input = { advanced: Ox.Checkbox({ title: Ox._('Show Advanced Options'), @@ -135,8 +140,6 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { }) }, - $form = getForm(), - $panel = Ox.SplitPanel({ elements: [ {element: $list, size: 128 + Ox.UI.SCROLLBAR_SIZE}, @@ -145,6 +148,8 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { orientation: 'horizontal' }), + $loading = Ox.loadingScreen().start(), + that = Ox.Dialog({ buttons: [ Ox.Button({ @@ -170,7 +175,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { }) ], closeButton: true, - content: $panel, + content: $loading, fixedSize: true, height: dialogHeight, removeOnClose: true, @@ -181,6 +186,12 @@ 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}) + }); + function formatHTML() { var type = $input.type.value(); return type == 'link' @@ -243,67 +254,6 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { ).replace(/ /g, '_'); } - function getDefaults() { - 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 getDuration(item, callback) { - api.get({ - id: item, - keys: ['duration'] - }, function(result) { - duration = result.data.duration; - callback(); - }); - } - function getForm() { var css = {display: 'inline-block', margin: '4px 0'}, @@ -350,13 +300,13 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { label: Ox._('Link Text'), labelWidth: labelWidth, width: formWidth, - value: '...' + value: textPlaceholder }) .css(css) .bindEvent({ change: function(data) { $input.text.options({ - value: Ox.sanitizeHTML(data.value).trim() || '...' + value: Ox.sanitizeHTML(data.value).trim() || textPlaceholder }); updateHTML(); } @@ -421,7 +371,10 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { .addClass('advanced') .css(css) .bindEvent({ - change: updateHTML + change: function() { + updateAPI(); + updateHTML(); + } }) .appendTo($form); @@ -451,7 +404,10 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { }) .css(css) .bindEvent({ - change: updateHTML + change: function() { + updateHTML(); + validateId('item'); + } }) .appendTo($form); @@ -463,7 +419,10 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { }) .css(css) .bindEvent({ - change: updateHTML + change: function() { + updateHTML(); + validateId('list'); + } }) .appendTo($form); @@ -475,7 +434,10 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { }) .css(css) .bindEvent({ - change: updateHTML + change: function() { + updateHTML(); + validateId('document'); + } }) .appendTo($form); @@ -487,7 +449,10 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { }) .css(css) .bindEvent({ - change: updateHTML + change: function() { + updateHTML(); + validateId('edit'); + } }) .appendTo($form); @@ -499,7 +464,10 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { }) .css(css) .bindEvent({ - change: updateHTML + change: function() { + updateHTML(); + validateId('text'); + } }) .appendTo($form); @@ -540,9 +508,7 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { change: function(data) { if (data.value) { $input['in'].options({ - value: Ox.formatDuration(Ox.parseDuration( - limitPoint(data.value, 0, duration) - )) + value: limitPoint(data.value, 0, duration) }); if ($input.out.options('value') === '') { $input.out.options({value: Ox.formatDuration(duration)}); @@ -748,25 +714,167 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { } - function getItem(callback) { - api.find({ - keys: ['id', 'duration'], - query: {conditions: [], operator: '&'}, - range: [0, 1], - sort: [{key: 'id', operator: '+'}] + 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) { + /* + if (Ox.typeOf(min) == 'number') { + min = Ox.formatDuration(min) + } + if (Ox.typeOf(max) == 'number') { + max = Ox.formatDuration(max) + } + */ + return Ox.formatDuration( + Ox.limit( + Ox.parseDuration(value), + Ox.parseDuration(min), + Ox.parseDuration(max) + ) + ); + } + + function parseURL(callback) { + var parsed = Ox.parseURL(url), + protocol = parsed.protocol.replace(/:$/, ''), + hostname = parsed.hostname, + isSameSite = hostname == $input.hostname.value(); + (isSameSite ? Ox.noop : updateAPI)(site, function() { + pandora.URL.parse(parsed.pathname + parsed.search + parsed.hash, function(state) { + var isSameItem = isSameSite && state.item == $input.item.value(), + query = {}; + if (state.hash && state.hash.query) { + state.hash.query.forEach(function(condition) { + query[condition.key] = condition.value; + }); + } + (isSameItem ? Ox.noop : updateDuration)(function() { + if (duration) { + item = $input.item.value(); + } + Ox.forEach({ + protocol: protocol, + site: site, + item: item, + position: Ox.isArray(state.span) && state.span.length == 3 + ? 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 || pandora.site.user.ui.videoTimeline, + showAnnotations: query.showAnnotations || false, + showLayers: query.showLayers || pandora.site.layers.map(function(layer) { + return layer.id; + }) + }, function(value, key) { + $input[key].options({value: value}); + }); + callback(); + }) + }); + }); + } + + function updateAPI(callback) { + api = Ox.API({ + url: $input.protocol.value() + '://' + $input.hostname.value() + '/api/' + }, function() { + // FIXME: remove + api.getEmbedDefaults = function(callback) { + callback({ + data: { + document: 'A', + edit: 'foo:bar', + editDuration: 3600, + editRatio: 16/9, + item: 'A', + itemDuration: 7200, + itemRatio: 4/3, + list: 'bar:baz', + text: 'baz:foo', + videoResoltion: 480 + } + }); + }; + api.getEmbedDefaults(function(result) { + defaults = result.data; + callback && callback(); + }); + }); + } + + function updateEditDefaults(callback) { + api.getEdit({ + id: $input.edit.value(), + keys: ['duration'] }, function(result) { - duration = result.data.items[0].duration; - item = result.data.items[0].id; + duration = result.data.duration; callback(); }); } - function parseURL() { - // ... - } - - function updateAPI() { - // ... + 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() { @@ -806,6 +914,18 @@ pandora.ui.embedDialog = function(/*[url, ]callback*/) { $input.html.options({value: formatHTML()}); } + function validateId(key) { + // key can be item, document, list, edit, text + pandora.api['get' + (key == 'item' ? '' : Ox.toTitleCase(key))]({ + id: $input[key].value(); + }, function(result) { + if (result.data.status == 404) { + $input[key].value(defaults[key]); + updateHTML(); + } + }); + } + return that; }; \ No newline at end of file