'use strict'; pandora.ui.embedDialog = function(/*[url, ]callback*/) { if (arguments.length == 1) { var url, callback = arguments[0]; } else { var url = arguments[0], callback = arguments[1]; } var api, defaults = {}, duration, formWidth = 612, iframeHeight = Ox.last(pandora.site.video.resolutions), iframeWidth = Math.round(iframeHeight * pandora.site.video.previewRatio), listWidth = 128 + Ox.UI.SCROLLBAR_SIZE, labelWidth = 192, dialogWidth = listWidth + formWidth + 32 + Ox.UI.SCROLLBAR_SIZE, dialogHeight = 384, linkPlaceholder = '...', options = {}, positionPlaceholder = '00:00:00.000', sites = [pandora.site.site].concat(pandora.site.sites).map(function(site) { return {id: site.url, title: site.url, https: site.https}; }), ui = pandora.user.ui, videoRatio, views = [ { id: 'info', title: Ox._('Info'), description: Ox._('Embed a Poster and Basic Metadata'), inputs: ['item'] }, { id: 'video', title: Ox._('Video'), description: Ox._('Embed a Clip or a Full Video'), inputs: [ 'item', 'position', 'in', 'out', 'annotation', 'title', 'showTimeline', 'showAnnotations', 'matchRatio' ] }, { id: 'timeline', title: Ox._('Timeline'), description: Ox._('Embed a Timeline'), inputs: ['item', 'position', 'title'] }, { id: 'list', title: Ox._('List'), description: Ox._('Embed a List Icon with Description'), inputs: ['list'] }, { id: 'grid', title: Ox._('Grid'), description: Ox._('Embed Movies as a Grid'), inputs: ['find', 'sort', 'title'] }, { id: 'map', title: Ox._('Map'), description: Ox._('Embed a Map View'), inputs: ['mapMode', 'item', 'find', 'sort', 'title'] }, { id: 'calendar', title: Ox._('Calendar'), description: Ox._('Embed a Calendar View'), inputs: ['mapMode', 'item', 'find', 'sort', 'title'] }, { id: 'document', title: Ox._('Document'), description: Ox._('Embed a Document'), inputs: ['document'] }, { id: 'edit', title: Ox._('Edit'), description: Ox._('Embed an Edited Video'), inputs: [ 'edit', 'editMode', 'position', 'showTimeline', 'showAnnotations', 'matchRatio' ] }, { id: 'text', title: Ox._('Text'), description: Ox._('Embed a Text Icon with Description'), inputs: ['text'] } ].map(function(item, index) { return Ox.extend(item, {index: index}); }), viewInputs = Ox.unique(Ox.flatten(views.map(function(view) { return view.inputs; }))), $list = Ox.TableList({ columns: [ { id: 'title', visible: true, width: 128 - Ox.UI.SCROLLBAR_SIZE } ], items: views, max: 1, min: 1, scrollbarVisible: true, selected: ['info'], sort: [{key: 'index', operator: '+'}], unique: 'id' }) .bindEvent({ select: function() { updateHTML(); updateForm(); } }), $input = { advanced: Ox.Checkbox({ title: Ox._('Show Advanced Options'), value: pandora.user.ui.showAdvancedEmbedOptions }) .css({float: 'left', margin: '4px'}) .bindEvent({ change: function(data) { pandora.UI.set({showAdvancedEmbedOptions: data.value}); updateForm(); } }) }, $form = getForm(), $panel = Ox.SplitPanel({ elements: [ {element: $list, size: 128 + Ox.UI.SCROLLBAR_SIZE}, {element: $form} ], orientation: 'horizontal' }), that = Ox.Dialog({ buttons: [ Ox.Button({ id: 'cancel', title: Ox._('Cancel'), width: 64 }) .bindEvent({ click: function() { that.close(); } }), Ox.Button({ id: 'insert', title: Ox._('Insert'), width: 64 }) .bindEvent({ click: function() { callback($input.url.options('value')); that.close(); } }) ], closeButton: true, content: $panel, fixedSize: true, height: dialogHeight, removeOnClose: true, title: Ox._('Embed'), width: dialogWidth }); $($input.advanced.find('.OxButton')[0]).css({margin: 0}); $(that.find('.OxBar')[1]).append($input.advanced); updateOptions(); updateAPI(function() { updateDefaults(true); }); function formatHTML() { var type = $input.type.value(); return type == 'link' ? '' + $input.link.value() + '' : ''; } function formatURL() { var type = $input.type.value(), view = $list.options('selected')[0], data = Ox.map($input, function($element, key) { return Ox.contains(Ox.getObjectById(views, view).inputs, key) && $element.value ? $element.value() : void 0; }), 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: Ox.contains(['video', 'edit'], view) ? data.matchRatio || void 0 : void 0, showInfo: Ox.contains(['list', 'text'], view) || (view == 'edit' && !!$input.editMode.value()) || void 0 }, true), position = ( data.position ? [data.position] : [] ).concat( data['in'] || data.out ? [data['in'], data.out] : [] ).join(',') + (data['annotation'] || ''); return Ox.encodeHTMLEntities( ( type == 'iframe' ? (pandora.site.site.https ? 'https' : 'http') + '://' + pandora.site.site.url + '/' : '/' ) + ( Ox.contains(['info', 'video', 'timeline'], view) || data.mapMode == 'item' ? data.item : view == 'list' ? 'list==' + data.list : view == 'document' ? 'documents/' + data.document : view == 'edit' ? 'edits/' + data.edit : view == 'text' ? 'texts/' + data.text : '' ) + ( Ox.contains(['info', 'timeline'], view) ? '/' + view : Ox.contains(['grid', 'map', 'calendar'], view) ? (data.mapMode == 'item' ? '/' : '') + view : '' ) + ( Ox.contains(['grid', 'map', 'calendar'], view) ? '/' + data.sort : '' ) + (position ? '/' + position : '') + '#embed' + (options ? '?' + options : '') ).replace(/ /g, '_'); } function getForm() { var css = {display: 'inline-block', margin: '4px 0'}, view = $list.options('selected')[0]; $form = Ox.Element() .attr({id: 'form'}) .css({padding: '16px', overflowY: 'auto'}); $input.description = Ox.Label({ textAlign: 'center', title: '', width: formWidth }) .css(css) .appendTo($form); space().appendTo($form); $input.type = Ox.ButtonGroup({ buttons: [ {id: 'link', title: Ox._('Embed in Texts Section'), width: formWidth / 2, selected: true}, {id: 'iframe', title: Ox._('Embed in External Site'), width: formWidth / 2} ], selectable: true }) .css(css) .bindEvent({ change: function() { updateForm(); updateHTML(); } }) .appendTo($form); $input.html = Ox.Input({ height: 64, type: 'textarea', width: formWidth }) .css(css) .bindEvent({ change: function(data) { // ... } }) .appendTo($form); $input.link = Ox.Input({ label: Ox._('Link Text'), labelWidth: labelWidth, width: formWidth, value: linkPlaceholder }) .css(css) .bindEvent({ change: function(data) { $input.link.options({ value: Ox.sanitizeHTML(data.value).trim() || linkPlaceholder }); updateHTML(); } }) .appendTo($form); $input.size = Ox.FormElementGroup({ elements: [ Ox.Label({ overlap: 'right', textAlign: 'right', title: Ox._('Frame Size'), width: labelWidth }), Ox.InputGroup({ inputs: [ $input.width = Ox.Input({id: 'width', placeholder: 'Width', value: iframeWidth, width: (formWidth - labelWidth - 16) / 2}), $input.height = Ox.Input({id: 'height', placeholder: 'Height', value: iframeHeight, width: (formWidth - labelWidth - 16) / 2}) ], separators: [{title: '×', width: 16}] }) ] }) .css(css) .bindEvent({ change: updateHTML }) .appendTo($form); space().appendTo($form); $input.site = Ox.FormElementGroup({ elements: [ Ox.Label({ overlap: 'right', textAlign: 'right', title: Ox._('Site'), width: labelWidth }), $input.protocol = Ox.Select({ id: 'protocol', items: [ {id: 'http', title: 'http://'}, {id: 'https', title: 'https://', disabled: !pandora.site.site.https} ], overlap: 'right', value: pandora.site.site.https ? 'https' : 'http', width: 80 }), $input.hostname = Ox.SelectInput({ inputWidth: 192, id: 'hostname', items: sites.concat([{id: 'other', title: Ox._('Other...')}]), max: 1, min: 1, placeholder: 'example.com', value: pandora.site.site.url, width: formWidth - labelWidth - 80 }) ] }) .addClass('advanced') .css(css) .bindEvent({ change: function() { updateHTML(); updateAPI(updateDefaults); } }) .appendTo($form); $input.mapMode = Ox.Select({ items: [ {id: 'item', title: Ox._(pandora.site.itemName.singular)}, {id: 'find', title: Ox._('Query')} ], label: ' ', labelWidth: labelWidth, width: formWidth }) .css(css) .bindEvent({ change: function() { updateForm(); updateHTML(); } }) .appendTo($form); $input.item = Ox.Input({ label: Ox._(pandora.site.itemName.singular), labelWidth: labelWidth, width: formWidth, value: '' }) .css(css) .bindEvent({ change: function() { updateHTML(); validateId('item'); } }) .appendTo($form); $input.list = Ox.Input({ label: Ox._('List'), labelWidth: labelWidth, width: formWidth, value: '' }) .css(css) .bindEvent({ change: function() { updateHTML(); validateId('list'); } }) .appendTo($form); $input.document = Ox.Input({ label: Ox._('Document'), labelWidth: labelWidth, width: formWidth, value: '' }) .css(css) .bindEvent({ change: function() { updateHTML(); validateId('document'); } }) .appendTo($form); $input.edit = Ox.Input({ label: Ox._('Edit{noun}'), labelWidth: labelWidth, width: formWidth, value: '' }) .css(css) .bindEvent({ change: function() { updateHTML(); validateId('edit'); } }) .appendTo($form); $input.text = Ox.Input({ label: Ox._('Text'), labelWidth: labelWidth, width: formWidth, value: '' }) .css(css) .bindEvent({ change: function() { updateHTML(); validateId('text'); } }) .appendTo($form); $input.editMode = Ox.Select({ items: [ {id: 'icon', title: Ox._('Icon and Description')}, {id: 'video', title: Ox._('Video')} ], label: 'Embed', labelWidth: labelWidth, width: formWidth }) .css(css) .bindEvent({ change: function() { updateForm(); updateHTML(); } }) .appendTo($form); $input.position = Ox.Input({ label: Ox._('Position'), labelWidth: labelWidth, placeholder: positionPlaceholder, width: formWidth }) .css(css) .bindEvent({ change: function(data) { validatePoint('position'); updateHTML() } }) .appendTo($form); $input['in'] = Ox.Input({ label: Ox._('In Point'), labelWidth: labelWidth, placeholder: positionPlaceholder, width: formWidth }) .css(css) .bindEvent({ change: function(data) { validatePoint('in'); updateHTML(); } }) .appendTo($form); $input.out = Ox.Input({ label: Ox._('Out Point'), labelWidth: labelWidth, placeholder: positionPlaceholder, width: formWidth }) .css(css) .bindEvent({ change: function(data) { validatePoint('out'); updateHTML(); } }) .appendTo($form); $input.annotation = Ox.Input({ label: Ox._('Annotation'), labelWidth: labelWidth, width: formWidth }) .css(css) .bindEvent({ change: function(data) { validatePoint('annotation'); updateHTML(); } }) .appendTo($form); $input.find = pandora.ui.filterForm({mode: 'embed'}) .css(css) .appendTo($form); $input.sort = Ox.Select({ items: ( Ox.contains(['map', 'calendar'], view) ? pandora.site.clipKeys.map(function(key) { return Ox.extend(Ox.clone(key), { title: Ox._('Clip {0}', [Ox._(key.title)]) }); }) : [] ).concat( pandora.site.sortKeys.map(function(key) { return Ox.extend(Ox.clone(key), { title: Ox._(key.title) }); }) ), label: Ox._('Sort by'), labelWidth: labelWidth, width: formWidth }) .addClass('advanced') .css(css) .bindEvent({ change: updateHTML }) .appendTo($form); $input.title = Ox.Input({ label: Ox._('Title'), labelWidth: labelWidth, width: formWidth, value: '' }) .addClass('advanced') .css(css) .bindEvent({ change: updateHTML }) .appendTo($form); $input.showTimeline = Ox.Checkbox({ label: Ox._('Show Timeline'), labelWidth: labelWidth, value: false, width: formWidth }) .addClass('advanced') .css(css) .bindEvent({ change: function() { updateForm(); updateHTML(); } }) .appendTo($form); $input.timeline = Ox.Select({ items: [ {id: 'default', title: Ox._('Default')} ].concat( pandora.site.timelines ), label: Ox._('Timeline'), labelWidth: labelWidth, value: 'default', width: formWidth }) .addClass('advanced') .css(css) .bindEvent({ change: updateHTML }) .appendTo($form); $input.showAnnotations = Ox.Checkbox({ label: Ox._('Show Annotations'), labelWidth: labelWidth, value: false, width: formWidth }) .addClass('advanced') .css(css) .bindEvent({ change: function() { updateForm(); updateHTML(); } }) .appendTo($form); $input.showLayersLabel = Ox.Label({ title: Ox._('Show Layers'), width: formWidth }) .addClass('advanced') .css(css) .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 - labelWidth }) .addClass('advanced') .css({display: 'inline-block', margin: '4px 0 4px ' + labelWidth + 'px'}) .bindEvent({ change: updateHTML }) .appendTo($form); $input.matchRatio = Ox.Checkbox({ label: Ox._('Match Video Ratio'), labelWidth: labelWidth, value: true, width: formWidth }) .addClass('advanced') .css(css) .bindEvent({ change: updateHTML }) .appendTo($form); updateHTML(); updateForm(); function space() { return $('