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