diff --git a/static/js/pandora/sequencesDialog.js b/static/js/pandora/sequencesDialog.js
index 70de9466d..f5b099152 100644
--- a/static/js/pandora/sequencesDialog.js
+++ b/static/js/pandora/sequencesDialog.js
@@ -4,159 +4,30 @@
pandora.ui.sequencesDialog = function() {
- var dialogHeight = Math.round((window.innerHeight - 48) * 0.9),
- dialogWidth = Math.round(window.innerWidth * 0.9),
+ var dialogSize = {
+ height: Math.round((window.innerHeight - 48) * 0.9),
+ width: Math.round(window.innerWidth * 0.9)
+ },
+ left = getLeft(),
fixedRatio = 16/9,
fps = 25,
item = pandora.getItemIdAndPosition(),
- mode = pandora.user.ui.sequenceMode,
+ itemWidth = 160,
sequence,
- sidebarWidth = 160,
+
$item,
+
$list,
- $tabPanel = Ox.TabPanel({
- content: function(mode) {
- var $splitPanel = Ox.SplitPanel({
- elements: [
- {
- element: Ox.Element(),
- size: sidebarWidth
- },
- {
- element: Ox.Element()
- }
- ],
- orientation: 'horizontal'
- });
- $dialog && $dialog.disableButton('open');
- pandora.api.get({
- id: item.id,
- keys: ['director', 'duration', 'title', 'videoRatio']
- }, function(result) {
- Ox.extend(item, result.data);
- pandora.api.getSequence({
- id: item.id,
- mode: mode,
- position: item.position
- }, function(result) {
- // result.data: {hash, id, in, out}
- sequence = Ox.extend({}, item, result.data);
- $item = Ox.IconList({
- fixedRatio: fixedRatio,
- item: getItem,
- /*
- items: [item],
- */
- ///*
- items: function(data, callback) {
- setTimeout(function() {
- callback({
- data: {items: data.keys ? [sequence] : 1},
- status: {code: 200, text: 'ok'}
- });
- }, 250);
- },
- //*/
- max: 0,
- orientation: 'both',
- size: 128,
- sort: [{key: 'id', operator: '+'}],
- unique: 'id'
- });
- $list = Ox.IconList({
- fixedRatio: fixedRatio,
- item: getItem,
- items: function(data, callback) {
- pandora.api.findSequences(Ox.extend(data, {
- query: {
- conditions: [
- {key: 'id', value: sequence.id, operator: '!='},
- {key: 'mode', value: mode, operator: '=='},
- {key: 'hash', value: sequence.hash, operator: '=='}
- ],
- operator: '&'
- }
- }), callback);
- },
- keys: ['director', 'id', 'title', 'videoRatio'],
- max: 1,
- orientation: 'both',
- size: 128,
- sort: Ox.clone(pandora.user.ui.sequenceSort),
- unique: 'id'
- })
- .bindEvent({
- init: function(data) {
- $status.html(
- Ox.formatNumber(data.items) + ' Clip'
- + (data.items == 1 ? '' : 's')
- );
- },
- open: changeClip,
- select: function(data) {
- $dialog[
- data.ids.length ? 'enableButton' : 'disableButton'
- ]('open');
- },
- pandora_sequencesort: function(data) {
- Ox.print('SEQUENCESORT:', data)
- $list.options({sort: data.value});
- }
- });
- Ox.print('SEQUENCE::', sequence)
- $clipButtons[sequence['in'] > 0 ? 'enableButton' : 'disableButton']('previous');
- $clipButtons[sequence.out < item.duration ? 'enableButton' : 'disableButton']('next');
- $splitPanel.replaceElement(0, $item);
- $splitPanel.replaceElement(1, $list);
- $image.attr({src: getImageURL(mode, sequence.hash)});
- });
- });
- return $splitPanel;
- },
- tabs: [
- {id: 'shape', title: 'Similar Shapes', selected: pandora.user.ui.sequenceMode == 'shape'},
- {id: 'color', title: 'Similar Colors', selected: pandora.user.ui.sequenceMode == 'color'}
- ]
- })
- .bindEvent({
- change: function(data) {
- pandora.UI.set({sequenceMode: data.selected});
- }
- }),
-
- $dialog = Ox.Dialog({
- buttons: [
- Ox.Button({
- disabled: true,
- id: 'open',
- title: 'Open Selected Clip',
- width: 128
- }).bindEvent({
- click: openClip
- }),
- Ox.Button({
- id: 'close',
- title: 'Close',
- width: 64
- }).bindEvent({
- click: function() {
- $dialog.close();
- }
- })
+ $innerPanel = Ox.SplitPanel({
+ elements: [
+ {element: Ox.Element(), size: itemWidth},
+ {element: Ox.Element()}
],
- closeButton: true,
- content: $tabPanel,
- height: dialogHeight,
- keys: {escape: 'close'},
- maximizeButton: true,
- padding: 0,
- removeOnClose: true,
- title: 'Similar Clips',
- width: dialogWidth
+ orientation: 'horizontal'
}),
- $toolbar = $tabPanel.children('.OxBar'),
+ $toolbar = Ox.Bar({size: 24}),
$clipButtons = Ox.ButtonGroup({
buttons: [
@@ -170,12 +41,35 @@ pandora.ui.sequencesDialog = function() {
click: function(data) {
item.position = data.id == 'previous'
? sequence['in'] - 1 / fps : sequence.out;
- $status.html('Loading...');
- $tabPanel.reloadPanel();
+ $item = null;
+ getClips();
}
})
.appendTo($toolbar),
+ $modeButtons = Ox.ButtonGroup({
+ buttons: [
+ {id: 'shape', title: 'Similar Shapes'},
+ {id: 'color', title: 'Similar Colors'}
+ ],
+ selectable: true,
+ value: pandora.user.ui.sequenceMode
+ })
+ .bindEvent({
+ change: function(data) {
+ pandora.UI.set({sequenceMode: data.value});
+ getClips();
+ }
+ })
+ .css({
+ position: 'absolute',
+ left: left,
+ top: '4px',
+ width: '256px',
+ textAlign: 'center'
+ })
+ .appendTo($toolbar),
+
$orderButton = Ox.Button({
title: getTitle(),
tooltip: getTooltip(),
@@ -218,6 +112,53 @@ pandora.ui.sequencesDialog = function() {
.css({float: 'right', margin: '4px 2px'})
.appendTo($toolbar),
+ $outerPanel = Ox.SplitPanel({
+ elements: [
+ {element: $toolbar, size: 24},
+ {element: $innerPanel}
+ ],
+ orientation: 'vertical'
+ }),
+
+ $dialog = Ox.Dialog({
+ buttons: [
+ Ox.Button({
+ disabled: true,
+ id: 'open',
+ title: 'Open Selected Clip',
+ width: 128
+ }).bindEvent({
+ click: openClip
+ }),
+ Ox.Button({
+ id: 'close',
+ title: 'Close',
+ width: 64
+ }).bindEvent({
+ click: function() {
+ $dialog.close();
+ }
+ })
+ ],
+ closeButton: true,
+ content: $outerPanel,
+ height: dialogSize.height,
+ keys: {escape: 'close'},
+ maximizeButton: true,
+ padding: 0,
+ removeOnClose: true,
+ title: 'Similar Clips',
+ width: dialogSize.width
+ })
+ .bindEvent({
+ resize: function(data) {
+ dialogSize = data;
+ left = getLeft();
+ $modeButtons.css({left: left});
+ $status.css({left: left});
+ }
+ }),
+
$statusbar = $dialog.children('.OxButtonsbar'),
$image = $('![]()
')
@@ -234,65 +175,158 @@ pandora.ui.sequencesDialog = function() {
$status = Ox.Element()
.css({
- float: 'left',
- width: dialogWidth - 408 + 'px', // 2 * (4 + 128 + 4 + 64 + 4)
- margin: '6px 0 0 168px', // 4 + 128 + 4 + 64 + 4 - 8 - 24 - 4
+ position: 'absolute',
+ left: left,
+ top: '6px',
+ width: '256px',
fontSize: '9px',
textAlign: 'center'
})
.html('Loading...')
.appendTo($statusbar);
- $($tabPanel.find('.OxButtonGroup')[0]).css({width: '256px'});
+ getClips();
function changeClip(data) {
var split = data.ids[0].replace('-', '/').split('/');
item.id = split[0];
item.position = parseFloat(split[1]);
- $status.html('Loading...');
- $tabPanel.reloadPanel();
+ $item = null;
+ getClips();
}
- function getImageURL(mode, hash) {
+ function getClips() {
+ $dialog && $dialog.disableButton('open');
+ $status && $status.html('Loading...');
+ pandora.api.get({
+ id: item.id,
+ keys: ['director', 'duration', 'title', 'videoRatio']
+ }, function(result) {
+ Ox.extend(item, result.data);
+ pandora.api.getSequence({
+ id: item.id,
+ mode: pandora.user.ui.sequenceMode,
+ position: item.position
+ }, function(result) {
+ // result.data: {hash, id, in, out}
+ Ox.print('RD:::', result.data)
+ sequence = Ox.extend({}, item, result.data);
+ $clipButtons[sequence['in'] > 0 ? 'enableButton' : 'disableButton']('previous');
+ $clipButtons[sequence.out < item.duration ? 'enableButton' : 'disableButton']('next');
+ if (!$item) {
+ $item = Ox.IconList({
+ fixedRatio: fixedRatio,
+ item: getItem,
+ /*
+ items: [item],
+ */
+ ///*
+ items: function(data, callback) {
+ setTimeout(function() {
+ callback({
+ data: {items: data.keys ? [sequence] : 1},
+ status: {code: 200, text: 'ok'}
+ });
+ }, 250);
+ },
+ //*/
+ max: 0,
+ orientation: 'both',
+ size: 128,
+ sort: [{key: 'id', operator: '+'}],
+ unique: 'id'
+ });
+ $innerPanel.replaceElement(0, $item);
+ }
+ $list = Ox.IconList({
+ fixedRatio: fixedRatio,
+ item: getItem,
+ items: function(data, callback) {
+ pandora.api.findSequences(Ox.extend(data, {
+ query: {
+ conditions: [
+ {key: 'id', value: sequence.id, operator: '!='},
+ {key: 'mode', value: pandora.user.ui.sequenceMode, operator: '=='},
+ {key: 'hash', value: sequence.hash, operator: '=='}
+ ],
+ operator: '&'
+ }
+ }), callback);
+ },
+ keys: ['director', 'id', 'title', 'videoRatio'],
+ max: 1,
+ orientation: 'both',
+ size: 128,
+ sort: Ox.clone(pandora.user.ui.sequenceSort),
+ unique: 'id'
+ })
+ .bindEvent({
+ init: function(data) {
+ $status.html(
+ Ox.formatNumber(data.items) + ' Clip'
+ + (data.items == 1 ? '' : 's')
+ );
+ },
+ open: changeClip,
+ select: function(data) {
+ $dialog[
+ data.ids.length ? 'enableButton' : 'disableButton'
+ ]('open');
+ },
+ pandora_sequencesort: function(data) {
+ Ox.print('SEQUENCESORT:', data)
+ $list.options({sort: data.value});
+ }
+ });
+ $innerPanel.replaceElement(1, $list);
+ Ox.print('SEQUENCE::', sequence)
+ $image.attr({src: getImageURL(sequence.hash)});
+ });
+ });
+ }
+
+ function getImageURL(hash) {
var canvas = $('