add dialog to edit tpdf inline video player urls, hide right panel for now

This commit is contained in:
j 2013-02-28 15:43:59 +00:00
parent 7638c37c81
commit b1949b45aa
3 changed files with 64 additions and 98 deletions

View file

@ -137,7 +137,9 @@ pandora.ui.embedPanel = function() {
} }
}) })
.bindEvent(function(data, event) { .bindEvent(function(data, event) {
Ox.$parent.postMessage(event, {}); if (Ox.contains(['close', 'paused'], event)) {
Ox.$parent.postMessage(event, data);
}
}); });
$controls = Ox.Element(); $controls = Ox.Element();

View file

@ -105,8 +105,9 @@ pandora.ui.textPanel = function() {
}, },
{ {
element: pandora.$ui.textEmbed = pandora.ui.textEmbed(), element: pandora.$ui.textEmbed = pandora.ui.textEmbed(),
size: pandora.user.ui.embedSize, //fixme: at some point pdf will also have a sidebar
resizable: true, size: text.type == 'html' ? pandora.user.ui.embedSize : 0,
resizable: text.type == 'html',
resize: [192, 256, 320, 384, 448, 512] resize: [192, 256, 320, 384, 448, 512]
} }
], ],
@ -338,10 +339,29 @@ pandora.ui.textPDF = function(text) {
}) })
.onMessage(function(event, data) { .onMessage(function(event, data) {
if(event == 'edit') { if(event == 'edit') {
Ox.Dialog({ console.log('existing url?', data);
title: 'edit', pandora.ui.insertEmbedDialog(data.src, function(url) {
content: Ox.Element().html('test') data.src = url;
}).open() var embed = text.embeds.filter(function(embed) {
return embed.id == data.id
&& embed.type == data.type
&& embed.page == data.page;
})[0];
if(embed) {
embed.src = url;
} else {
text.embeds.push(data);
//fixme sort embeds by page/id
}
console.log('saving', text.embeds);
pandora.api.editText({
id: text.id,
embeds: text.embeds
}, function(result) {
$iframe.postMessage('update', data);
});
}).open();
} }
}) })
.appendTo(that); .appendTo(that);

View file

@ -1,44 +1,3 @@
Ox.Message.bind(function(event, data, oxid) {
if (Ox.isUndefined(oxid)) {
//process messages here
}
});
Ox.$parent = {
postMessage: function(event, message) {
Ox.Message.post(event, message);
return this;
},
onMessage: function() {
var callback;
if (Ox.isObject(arguments[0])) {
Ox.forEach(arguments[0], function(callback, event) {
Ox.Message.bind(function(evt, data, oxid) {
if (Ox.isUndefined(oxid) && event == evt) {
callback(data);
}
});
});
} else {
callback = arguments[0];
Ox.Message.bind(function(event, data, oxid) {
Ox.isUndefined(oxid) && callback(event, data);
});
}
return this;
}
};
function getEmbedURL(id, videoURL) {
var parsed = Ox.parseURL(videoURL),
parts = parsed.pathname.split('/'),
item = parts[1],
points = parts[parts.length - 1].split(','),
outPoint = points.pop(),
inPoint = points.pop();
return parsed.protocol + '//' + parsed.host + '/' + item + '/embed?view=player&id=' + id
+ '&in=' + inPoint + '&out=' + outPoint
+ '&paused=false&showCloseButton=true';
}
function getVideoOverlay(page) { function getVideoOverlay(page) {
var links = embeds.filter(function(embed) { var links = embeds.filter(function(embed) {
return embed.page == page && embed.type =='inline'; return embed.page == page && embed.type =='inline';
@ -87,34 +46,49 @@ function getVideoOverlay(page) {
enableVideoUI(); enableVideoUI();
} }
this.div.appendChild($interface[0]); this.div.appendChild($interface[0]);
Ox.Message.bind(function(event, data, oxid) {
if (event == 'update') {
if(Ox.isUndefined(oxid)
&& video
&& data.id == video.id
&& data.page == video.page) {
video.src = data.src;
video.src !== '' ? enableVideoUI() : disableVideoUI();
}
}
});
} }
function play(e) { function play(e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
var videoId = 'video' + page + id, var videoId = 'video' + page + id + Ox.uid(),
$iframe = Ox.$('<iframe>') $iframe = Ox.$('<iframe>')
.on('load', function() {
Ox.Message.post($iframe, 'init', {id: $iframe.oxid});
})
.attr({ .attr({
id: videoId, id: videoId,
src: getEmbedURL(videoId, video.src), src: video.src + '&showCloseButton=true&fullscreen=false',
width: '100%', width: '100%',
height: '100%', height: '100%',
frameborder: 0 frameborder: 0
}) })
.appendTo($interface); .appendTo($interface),
Ox.Message.bind(function(event, data, oxid) { closed = false;
if ($iframe.oxid == oxid) {
if(event == 'close') {
$iframe.remove();
}
}
});
$iframe.postMessage = function(event, data) { $iframe.postMessage = function(event, data) {
Ox.Message.post($iframe, event, data); Ox.Message.post($iframe, event, data);
return $iframe; return $iframe;
}; };
Ox.Message.bind(function(event, data, oxid) {
if(!closed && event == 'loaded') {
$iframe.postMessage('init', {id: videoId});
} else if(event == 'close') {
if(!closed && !Ox.isUndefined(oxid) && videoId == oxid) {
closed = true;
$iframe.remove();
delete $iframe;
$playButton.show();
$editButton.show();
}
}
});
$playButton.hide(); $playButton.hide();
$editButton.hide(); $editButton.hide();
return false; return false;
@ -123,39 +97,13 @@ function getVideoOverlay(page) {
var url; var url;
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
if(window.parent) { video = video || {
Ox.$parent.postMessage('edit', {
video: video
? video
: {
id: id, id: id,
page: page, page: page,
src: '' src: '',
} type: 'inline'
});
} else {
url = prompt(
'Please enter a pan.do/ra video URL, like\n'
+ 'https://0xdb.org/0315594/00:13:37,00:23:42 or\n'
+ 'http://pad.ma/A/editor/00:00:00,00:01:00,00:02:00'
+ (video ? '\n\nTo remove the video, just remove the URL.' : ''),
video ? video.src : ''
);
if (url !== null) {
if(!video) {
video = {
page: page,
id: id,
src: ''
}; };
embeds.push(video); Ox.$parent.postMessage('edit', video);
}
video.src = url
saveVideoOverlay();
url !== '' ? enableVideoUI() : disableVideoUI()
}
}
return false; return false;
} }
function enableVideoUI() { function enableVideoUI() {
@ -177,7 +125,3 @@ function getVideoOverlay(page) {
} }
} : null; } : null;
} }
function saveVideoOverlay() {
console.log('save not implemented, bubble to pan.do/ra?');
}