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-23 20:03:04 +05:30
parent 006e2e6f72
commit 432bcbdfa2
1 changed files with 320 additions and 293 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,9 +3,9 @@
pandora.ui.insertEmbedDialog = function(callback) { pandora.ui.insertEmbedDialog = function(callback) {
var advanced = pandora.user.ui.showAdvancedEmbedOptions, var advanced = pandora.user.ui.showAdvancedEmbedOptions,
dialogWidth = 416 - Ox.UI.SCROLLBAR_SIZE,
dialogHeight = 416, dialogHeight = 416,
formWidth = dialogWidth - 32, dialogWidth = 416 + Ox.UI.SCROLLBAR_SIZE,
formWidth = dialogWidth - 32 - Ox.UI.SCROLLBAR_SIZE,
$input = {}, $input = {},
$panel = Ox.TabPanel({ $panel = Ox.TabPanel({
@ -13,31 +13,16 @@ pandora.ui.insertEmbedDialog = function(callback) {
if (id == 'video') { if (id == 'video') {
var $form = Ox.Element().attr({id: 'form'}); var $content = Ox.TabPanel({
content: function(id) {
$input.advanced = Ox.ButtonGroup({
buttons: [
{id: 'basic', title: 'Basic'},
{id: 'advanced', title: 'Advanced'}
],
label: 'Show Advanced Options',
labelWidth: 128,
selectable: true,
value: pandora.user.ui.showAdvancedEmbedOptions
? 'advanced' : 'basic',
width: formWidth
})
.bindEvent({
change: function(data) {
pandora.UI.set({ pandora.UI.set({
showAdvancedEmbedOptions: data.value == 'advanced' showAdvancedEmbedOptions: id == 'advanced'
}); });
updateForm();
}
})
.appendTo($form);
space().appendTo($form); var $form = $('<div>')
.attr({id: 'form'})
.css({padding: '16px', overflowY: 'auto'});
$input.url = Ox.Input({ $input.url = Ox.Input({
label: 'URL', label: 'URL',
@ -49,6 +34,7 @@ pandora.ui.insertEmbedDialog = function(callback) {
parseURL(data.value); parseURL(data.value);
} }
}) })
.css({display: 'inline-block', margin: '4px 0'})
.appendTo($form); .appendTo($form);
space().appendTo($form); space().appendTo($form);
@ -67,6 +53,7 @@ pandora.ui.insertEmbedDialog = function(callback) {
change: formatURL change: formatURL
}) })
.addClass('advanced') .addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'})
.appendTo($form); .appendTo($form);
$input.site = Ox.SelectInput({ $input.site = Ox.SelectInput({
@ -80,13 +67,14 @@ pandora.ui.insertEmbedDialog = function(callback) {
labelWidth: 128, labelWidth: 128,
max: 1, max: 1,
min: 1, min: 1,
value: site.url, value: pandora.site.site.url,
width: formWidth width: formWidth
}) })
.bindEvent({ .bindEvent({
change: formatURL change: formatURL
}) })
.addClass('advanced') .addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'})
.appendTo($form); .appendTo($form);
$input.item = Ox.Input({ $input.item = Ox.Input({
@ -94,10 +82,11 @@ pandora.ui.insertEmbedDialog = function(callback) {
labelWidth: 128, labelWidth: 128,
width: formWidth width: formWidth
}) })
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({ .bindEvent({
change: formatURL change: formatURL
}) })
.appendTo($input); .appendTo($form);
$input.link = Ox.Select({ $input.link = Ox.Select({
items: [ items: [
@ -106,7 +95,7 @@ pandora.ui.insertEmbedDialog = function(callback) {
{id: 'editor', title: 'Editor'}, {id: 'editor', title: 'Editor'},
{id: 'timeline', title: 'Timeline'} {id: 'timeline', title: 'Timeline'}
], ],
label: 'Site', label: 'Link',
labelWidth: 128, labelWidth: 128,
value: 'default', value: 'default',
width: formWidth width: formWidth
@ -123,9 +112,10 @@ pandora.ui.insertEmbedDialog = function(callback) {
width: formWidth width: formWidth
}) })
.addClass('advanced') .addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
// ... $input.annotation.options({value: ''});
formatURL(); formatURL();
} }
}) })
@ -136,9 +126,10 @@ pandora.ui.insertEmbedDialog = function(callback) {
labelWidth: 128, labelWidth: 128,
width: formWidth width: formWidth
}) })
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
// ... $input.annotation.options({value: ''});
formatURL(); formatURL();
} }
}) })
@ -149,9 +140,10 @@ pandora.ui.insertEmbedDialog = function(callback) {
labelWidth: 128, labelWidth: 128,
width: formWidth width: formWidth
}) })
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
// ... $input.annotation.options({value: ''});
formatURL(); formatURL();
} }
}) })
@ -162,8 +154,14 @@ pandora.ui.insertEmbedDialog = function(callback) {
labelWidth: 128, labelWidth: 128,
width: formWidth width: formWidth
}) })
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({ .bindEvent({
change: formatURL change: function(data) {
['position', 'in', 'out'].forEach(function(key) {
$input[key].options({value: ''});
});
formatURL();
}
}) })
.appendTo($form); .appendTo($form);
@ -174,10 +172,11 @@ pandora.ui.insertEmbedDialog = function(callback) {
labelWidth: 128, labelWidth: 128,
width: formWidth width: formWidth
}) })
.addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({ .bindEvent({
change: formatURL change: formatURL
}) })
.addClass('advanced')
.appendTo($form); .appendTo($form);
$input.showTimeline = Ox.Checkbox({ $input.showTimeline = Ox.Checkbox({
@ -186,10 +185,11 @@ pandora.ui.insertEmbedDialog = function(callback) {
value: false, value: false,
width: formWidth width: formWidth
}) })
.addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({ .bindEvent({
change: formatURL change: formatURL
}) })
.addClass('advanced')
.appendTo($form); .appendTo($form);
$input.timeline = Ox.Select({ $input.timeline = Ox.Select({
@ -203,10 +203,11 @@ pandora.ui.insertEmbedDialog = function(callback) {
value: 'default', value: 'default',
width: formWidth width: formWidth
}) })
.addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({ .bindEvent({
change: formatURL change: formatURL
}) })
.addClass('advanced')
.appendTo($form); .appendTo($form);
$input.showAnnotations = Ox.Checkbox({ $input.showAnnotations = Ox.Checkbox({
@ -215,20 +216,22 @@ pandora.ui.insertEmbedDialog = function(callback) {
value: false, value: false,
width: formWidth width: formWidth
}) })
.addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({ .bindEvent({
change: formatURL change: formatURL
}) })
.addClass('advanced')
.appendTo($form); .appendTo($form);
Ox.Label({ var $showLayersLabel = Ox.Label({
title: 'Show Layers', title: 'Show Layers',
width: formWidth width: formWidth
}) })
.addClass('advanced')
.css({display: 'inline-block', margin: '4px 0'})
.bindEvent({ .bindEvent({
change: formatURL change: formatURL
}) })
.addClass('advanced')
.appendTo($form); .appendTo($form);
$input.showLayers = Ox.CheckboxGroup({ $input.showLayers = Ox.CheckboxGroup({
@ -241,25 +244,22 @@ pandora.ui.insertEmbedDialog = function(callback) {
value: pandora.site.layers.map(function(layer) { value: pandora.site.layers.map(function(layer) {
return layer.id; return layer.id;
}), }),
width: formWidth width: formWidth - 128
}) })
.addClass('advanced')
.css({display: 'inline-block', margin: '4px 0 4px 128px'})
.bindEvent({ .bindEvent({
change: formatURL change: formatURL
}) })
.addClass('advanced')
.appendTo($form); .appendTo($form);
updateForm(); updateForm();
return $form;
}
function formatURL() { function formatURL() {
var data = $input.map(function($element) { var data = Ox.map($input, function($element) {
return $element.options('value'); return $element.options('value');
}); });
$url.value( $input.url.value(
data.protocol + '://' data.protocol + '://'
+ data.site + '/' + data.site + '/'
+ data.item + '/' + data.item + '/'
@ -269,9 +269,9 @@ pandora.ui.insertEmbedDialog = function(callback) {
+ '#?embed=true' + '#?embed=true'
+ (data.title ? '&title=' + JSON.stringify(data.title) : '') + (data.title ? '&title=' + JSON.stringify(data.title) : '')
+ (data.showTimeline ? '&showTimeline=true' : '') + (data.showTimeline ? '&showTimeline=true' : '')
+ (data.timeline ? '&timeline=' + JSON.stringify(data.timeline) : '') + (data.timeline != 'default' ? '&timeline=' + JSON.stringify(data.timeline) : '')
+ (data.showAnnotations ? '&showAnnotations=true' : '') + (data.showAnnotations ? '&showAnnotations=true' : '')
+ (data.showLayers.length ? '&showLayers=' + JSON.stringify(data.showLayers) : '') + (data.showAnnotations && data.showLayers.length ? '&showLayers=' + JSON.stringify(data.showLayers) : '')
+ '&matchRatio=true' + '&matchRatio=true'
); );
} }
@ -313,8 +313,35 @@ pandora.ui.insertEmbedDialog = function(callback) {
pandora.user.ui.showAdvancedEmbedOptions pandora.user.ui.showAdvancedEmbedOptions
? 'show' : 'hide' ? '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'
]();
} }
return $form;
},
tabs: [
{id: 'basic', title: 'Basic', selected: !advanced},
{id: 'advanced', title: 'Advanced', selected: advanced}
]
});
} else {
// ...
}
return $content;
}, },
tabs: [ tabs: [
{id: 'video', title: 'Video', selected: true}, {id: 'video', title: 'Video', selected: true},
@ -349,11 +376,11 @@ pandora.ui.insertEmbedDialog = function(callback) {
], ],
closeButton: true, closeButton: true,
content: $panel, content: $panel,
height: 416, height: dialogHeight,
keys: {enter: 'insert', escape: 'cancel'}, keys: {enter: 'insert', escape: 'cancel'},
removeOnClose: true, removeOnClose: true,
title: 'Insert Embed', title: 'Insert Embed',
width: 416 + Ox.UI.SCROLLBAR_SIZE width: dialogWidth
}); });
function space() { function space() {