')
+ .css({
+ position: 'absolute',
+ left: 0,
+ top: 0,
+ right: 0,
+ bottom: 0,
+ width: '560px',
+ margin: window.innerHeight / 2 - 80 + 'px auto 0 auto'
+ })
+ .appendTo(that),
$reflectionImage = $('
')
.attr({src: '/static/png/logo256.png'})
.css({
position: 'absolute',
left: 0,
- top: '160px',
+ top: '80px',
right: 0,
bottom: 0,
width: '320px',
- margin: 'auto',
- opacity: 0,
+ margin: '0 auto 0 auto',
MozTransform: 'scaleY(-1)',
OTransform: 'scaleY(-1)',
WebkitTransform: 'scaleY(-1)'
})
- .appendTo(that),
+ .appendTo($box),
$reflectionGradient = $('
')
.addClass('OxReflection')
.css({
position: 'absolute',
left: 0,
- top: '160px',
+ top: '80px',
right: 0,
- bottom: 0,
width: '320px',
height: '160px',
- margin: 'auto',
+ margin: '0 auto 0 auto',
})
- .appendTo(that),
+ .appendTo($box),
$logo = $('
')
.attr({
id: 'logo',
@@ -50,11 +60,9 @@ pandora.ui.home = function() {
.css({
position: 'absolute',
left: 0,
- top: 0,
right: 0,
- bottom: '160px',
- width: window.innerWidth + 'px',
- margin: 'auto',
+ width: '320px',
+ margin: '0 auto 0 auto',
cursor: 'pointer'
})
.bind({
@@ -62,17 +70,17 @@ pandora.ui.home = function() {
$browseButton.triggerEvent('click');
}
})
- .appendTo(that),
+ .appendTo($box),
$findInput = Ox.Input({
- width: 156
+ width: 252
})
.css({
position: 'absolute',
left: 0,
- top: '48px',
- right: '164px',
+ top: '104px',
+ right: '260px',
bottom: 0,
- margin: 'auto',
+ margin: '0 auto 0 auto',
opacity: 0
})
.click(function(e) {
@@ -88,18 +96,18 @@ pandora.ui.home = function() {
}
}
})
- .appendTo(that),
+ .appendTo($box),
$findButton = Ox.Button({
title: 'Find',
- width: 74
+ width: 122
})
.css({
position: 'absolute',
- left: '82px',
- top: '48px',
+ left: '130px',
+ top: '104px',
right: 0,
bottom: 0,
- margin: 'auto',
+ margin: '0 auto 0 auto',
opacity: 0
})
.bindEvent({
@@ -121,18 +129,18 @@ pandora.ui.home = function() {
});
}
})
- .appendTo(that),
+ .appendTo($box),
$browseButton = Ox.Button({
title: 'Browse',
- width: 74
+ width: 122
})
.css({
position: 'absolute',
- left: '246px',
- top: '48px',
+ left: '390px',
+ top: '104px',
right: 0,
bottom: 0,
- margin: 'auto',
+ margin: '0 auto 0 auto',
opacity: 0
})
.bindEvent({
@@ -141,18 +149,18 @@ pandora.ui.home = function() {
that.fadeOutScreen();
}
})
- .appendTo(that),
+ .appendTo($box),
$signupButton = Ox.Button({
title: 'Sign Up',
- width: 74
+ width: 122
})
.css({
position: 'absolute',
left: 0,
- top: '112px',
- right: '246px',
+ top: '144px',
+ right: '390px',
bottom: 0,
- margin: 'auto',
+ margin: '0 auto 0 auto',
opacity: 0
})
.bindEvent({
@@ -163,15 +171,15 @@ pandora.ui.home = function() {
}),
$signinButton = Ox.Button({
title: 'Sign In',
- width: 74
+ width: 122
})
.css({
position: 'absolute',
left: 0,
- top: '112px',
- right: '82px',
+ top: '144px',
+ right: '130px',
bottom: 0,
- margin: 'auto',
+ margin: '0 auto 0 auto',
opacity: 0
})
.bindEvent({
@@ -182,15 +190,15 @@ pandora.ui.home = function() {
}),
$preferencesButton = Ox.Button({
title: 'Preferences',
- width: 156
+ width: 252
})
.css({
position: 'absolute',
left: 0,
- top: '112px',
- right: '164px',
+ top: '144px',
+ right: '260px',
bottom: 0,
- margin: 'auto',
+ margin: '0 auto 0 auto',
opacity: 0
})
.bindEvent({
@@ -201,15 +209,15 @@ pandora.ui.home = function() {
}),
$aboutButton = Ox.Button({
title: 'About ' + pandora.site.site.name,
- width: 156
+ width: 252
})
.css({
position: 'absolute',
- left: '164px',
- top: '112px',
+ left: '260px',
+ top: '144px',
right: 0,
bottom: 0,
- margin: 'auto',
+ margin: '0 auto 0 auto',
opacity: 0
})
.bindEvent({
@@ -218,61 +226,362 @@ pandora.ui.home = function() {
that.fadeOutScreen();
}
})
- .appendTo(that),
- $text = $('
')
- .html('Pad.ma is an online archive of densely text-annotated video material, primarily footage and not finished films. The entire collection is searchable and viewable online, and is free to download for non-commercial use.')
+ .appendTo($box),
+ $lists = $('
')
+ .attr({id: 'lists'})
.css({
position: 'absolute',
left: 0,
- top: '176px',
+ top: '184px',
right: 0,
bottom: 0,
- width: '360px',
- height: '16px',
- margin: 'auto',
- opacity: 0,
- textAlign: 'center'
+ width: '560px',
+ margin: '0 auto 0 auto',
+ opacity: 0
})
- .appendTo(that);
+ .appendTo($box);
if (pandora.user.level == 'guest') {
- $signupButton.appendTo(that);
- $signinButton.appendTo(that);
+ $signupButton.appendTo($box);
+ $signinButton.appendTo($box);
} else {
- $preferencesButton.appendTo(that);
+ $preferencesButton.appendTo($box);
+ }
+
+ function hideLists() {
+ $lists.empty();
+ }
+
+ function showLists() {
+ pandora.api.findLists({
+ query: {
+ conditions: [{key: 'status', value: 'featured', operator: '=='}],
+ operator: '&'
+ },
+ keys: ['user', 'name', 'description'],
+ sort: [{key: 'position', operator: '+'}]
+ }, function(result) {
+ var lists = result.data.items,
+ items = 8, mouse = false, position = 0, selected = 0,
+ color = Ox.Theme() == 'classic'
+ ? 'rgb(0, 0, 0)' : 'rgb(255, 255, 255)',
+ $label, $icon, $text,
+ $listsBox, $listsContainer, $listsContent, $list = [],
+ $previousButton, $nextButton;
+ if (lists.length) {
+ $label = Ox.Label({
+ textAlign: 'center',
+ title: '
Featured List' + (lists.length >= items ? 's' : '') + '',
+ width: 512
+ })
+ .css({
+ position: 'absolute',
+ left: 0,
+ top: 0,
+ right: 0,
+ bottom: 0,
+ margin: '0 auto 0 auto'
+ })
+ .appendTo($lists);
+ $text = Ox.Label({
+ width: 386
+ })
+ .addClass('OxSelectable')
+ .css({
+ position: 'absolute',
+ left: '24px',
+ top: '24px',
+ right: 0,
+ height: '104px',
+ borderTopLeftRadius: '32px',
+ borderBottomLeftRadius: '32px',
+ padding: '8px 8px 8px 130px',
+ overflowY: 'auto',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'normal'
+ })
+ .html(
+ '
' + lists[selected].name + ''
+ + lists[selected].description
+ )
+ .appendTo($lists);
+ $icon = Ox.Element({
+ element: '
',
+ tooltip: 'View List'
+ })
+ .attr({
+ src: '/list/' + lists[selected].user + ':'
+ + lists[selected].name + '/icon256.jpg'
+ })
+ .css({
+ position: 'absolute',
+ left: 0,
+ top: '24px',
+ right: '390px',
+ width: '122px',
+ height: '122px',
+ borderRadius: '32px',
+ margin: '0 auto 0 auto',
+ cursor: 'pointer'
+ })
+ .bindEvent({
+ anyclick: function() {
+ openList(selected);
+ }
+ })
+ .appendTo($lists);
+ if (lists.length >= items) {
+ $listsBox = $('
')
+ .css({
+ position: 'absolute',
+ left: 0,
+ top: '150px',
+ right: 0,
+ height: '65px', // 4+57+4
+ width: '560px', // 16+8+512+8+16
+ margin: '0 auto 0 auto'
+ })
+ .appendTo($lists);
+ $listsContainer = $('
')
+ .css({
+ position: 'absolute',
+ left: '20px',
+ right: '20px',
+ height: '65px',
+ width: '520px',
+ overflow: 'hidden'
+ })
+ .appendTo($listsBox);
+ $listsContent = $('
')
+ .css({
+ position: 'absolute',
+ width: lists.length * 65 + 'px',
+ height: '65px'
+ })
+ .appendTo($listsContainer);
+ if (lists.length > items) {
+ $previousButton = Ox.Button({
+ title: 'left',
+ type: 'image'
+ })
+ .addClass(position > 0 ? 'visible' : '')
+ .css({
+ position: 'absolute',
+ left: 0,
+ top: '25px',
+ opacity: 0
+ })
+ .hide()
+ .bindEvent({
+ mousedown: function() {
+ scrollToPosition(position - 1, true);
+ },
+ mouserepeat: function() {
+ scrollToPosition(position - 1, false);
+ }
+ })
+ .appendTo($listsBox);
+ $nextButton = Ox.Button({
+ title: 'right',
+ type: 'image'
+ })
+ .addClass(position < lists.length - 1 ? 'visible' : '')
+ .css({
+ position: 'absolute',
+ right: 0,
+ top: '25px',
+ opacity: 0
+ })
+ .hide()
+ .bindEvent({
+ mousedown: function() {
+ scrollToPosition(position + 1, true);
+ },
+ mouserepeat: function() {
+ scrollToPosition(position + 1, false);
+ }
+ })
+ .appendTo($listsBox);
+ $listsBox.bind({
+ mouseenter: function() {
+ mouse = true;
+ $('.visible').show().stop().animate({
+ opacity: 1
+ }, 250);
+ },
+ mouseleave: function() {
+ mouse = false;
+ $('.visible').stop().animate({
+ opacity: 0
+ }, 250, function() {
+ $(this).hide();
+ });
+ }
+ });
+ self.keydown = function(e) {
+ var focused = Ox.Focus.focused(),
+ key = Ox.KEYS[e.keyCode];
+ if (
+ focused === null
+ || !Ox.UI.elements[focused].hasClass('OxInput')
+ ) {
+ if (key == 'left' && selected > 0) {
+ selectList(selected - 1);
+ } else if (key == 'up' && selected > 0) {
+ selectList(0);
+ } else if (key == 'right' && selected < lists.length - 1) {
+ selectList(selected + 1);
+ } else if (key == 'down' && selected < lists.length - 1) {
+ selectList(lists.length - 1);
+ }
+ }
+ }
+ Ox.$document.bind({keydown: self.keydown});
+ }
+ lists.forEach(function(list, i) {
+ $list[i] = Ox.Element({
+ element: '
',
+ tooltip: list.name
+ })
+ .attr({
+ src: '/list/' + list.user + ':'
+ + list.name + '/icon256.jpg'
+ })
+ .css({
+ float: 'left',
+ width: '57px',
+ height: '57px',
+ borderRadius: '16px',
+ margin: '4px',
+ boxShadow: i == selected
+ ? '0 0 2px ' + color : '',
+ cursor: 'pointer'
+ })
+ .bindEvent({
+ doubleclick: function() {
+ openList(i);
+ },
+ singleclick: function() {
+ selectList(i);
+ }
+ })
+ .appendTo($listsContent);
+ });
+ }
+ $lists.animate({opacity: 1}, 250);
+ }
+ function openList(i) {
+ that.fadeOutScreen();
+ pandora.UI.set({
+ page: '',
+ find: {
+ conditions: [{
+ key: 'list',
+ value: lists[i].user + ':'
+ + lists[i].name,
+ operator: '=='
+ }],
+ operator: '&'
+ }
+ });
+ }
+ function scrollToPosition(i, animate) {
+ if (i >= 0 && i <= lists.length - items && i != position) {
+ position = i;
+ $listsContent.stop().animate({
+ left: (position * -65) + 'px'
+ }, animate ? 250 : 0, function() {
+ if (position == 0) {
+ $previousButton.removeClass('visible').stop().animate({
+ opacity: 0
+ }, 250, function() {
+ $previousButton.hide();
+ });
+ } else {
+ $previousButton.addClass('visible');
+ }
+ if (position == lists.length - items) {
+ $nextButton.removeClass('visible').stop().animate({
+ opacity: 0
+ }, 250, function() {
+ $nextButton.hide();
+ });;
+ } else {
+ $nextButton.addClass('visible');
+ }
+ if (mouse) {
+ $listsBox.trigger('mouseenter');
+ }
+ });
+ }
+ }
+ function selectList(i) {
+ if (i >= 0 && i <= lists.length - 1 && i != selected) {
+ $list[selected].css({
+ boxShadow: 'none'
+ });
+ selected = i;
+ $list[selected].css({
+ boxShadow: '0 0 2px ' + color
+ });
+ if (selected < position) {
+ scrollToPosition(selected, true);
+ } else if (selected > position + items - 1) {
+ scrollToPosition(selected - items + 1, true);
+ }
+ $icon.attr({
+ src: '/list/' + lists[selected].user + ':'
+ + lists[selected].name + '/icon256.jpg'
+ });
+ $text.html(
+ '
' + lists[selected].name + ''
+ + lists[selected].description
+ );
+ }
+ }
+ });
+
}
that.fadeInScreen = function() {
+ $box.css({marginTop: '80px'});
that.appendTo(Ox.UI.$body).animate({opacity: 1}, 500, function() {
- that.find(':not(#logo)').animate({opacity: 1}, 250, function() {
+ that.find('*').animate({opacity: 1}, 250, function() {
$findInput.focusInput(true);
+ showLists();
});
});
- $logo.animate({width: '320px'}, 500);
return that;
};
that.fadeOutScreen = function() {
- that.find(':not(#logo)').hide();
- $logo.animate({width: window.innerWidth + 'px'}, 500);
- that.animate({opacity: 0}, 500, function() {
+ hideLists();
+ that.find('*').hide();
+ that.animate({opacity: 0}, 250, function() {
that.remove();
});
+ self.keydown && Ox.$document.unbind({keydown: self.keydown});
return that;
};
that.hideScreen = function() {
+ hideLists();
that.hide().remove();
- that.find(':not(#logo)').css({opacity: 0});
+ that.find('*').css({opacity: 0});
$logo.css({width: window.innerWidth + 'px'});
+ self.keydown && Ox.$document.unbind({keydown: self.keydown});
return that;
};
that.showScreen = function() {
- $logo.css({width: '320px'});
- that.find(':not(#logo)').css({opacity: 1});
that.css({opacity: 1}).appendTo(Ox.UI.$body);
- $findInput.focusInput(true);
+ $box.animate({
+ marginTop: '80px'
+ }, 250, function() {
+ that.find(':not(#lists)').animate({opacity: 1}, 250);
+ $findInput.focusInput(true);
+ showLists();
+ });
return that;
};
diff --git a/static/js/pandora/importAnnotations.js b/static/js/pandora/importAnnotations.js
index fedb466f..32b0341a 100644
--- a/static/js/pandora/importAnnotations.js
+++ b/static/js/pandora/importAnnotations.js
@@ -4,7 +4,7 @@
pandora.ui.importAnnotations = function(data) {
var content = Ox.Element().css({margin: '16px'}),
file,
- height = 240,
+ height = 180,
width = 640,
that = Ox.Dialog({
buttons: [