icma home

This commit is contained in:
j 2017-02-15 19:13:04 +01:00
parent 743b419d19
commit 0c7b69f855

View file

@ -37,8 +37,10 @@ pandora.ui.home = function() {
right: 0, right: 0,
bottom: 0, bottom: 0,
width: '320px', width: '320px',
height: 'auto',
margin: '0 auto 0 auto', margin: '0 auto 0 auto',
MozTransform: 'scaleY(-1)', MozTransform: 'scaleY(-1)',
MsTransform: 'scaleY(-1)',
OTransform: 'scaleY(-1)', OTransform: 'scaleY(-1)',
WebkitTransform: 'scaleY(-1)' WebkitTransform: 'scaleY(-1)'
}) })
@ -72,6 +74,7 @@ pandora.ui.home = function() {
left: 0, left: 0,
right: 0, right: 0,
width: '320px', width: '320px',
height: 'auto',
margin: '0 auto 0 auto', margin: '0 auto 0 auto',
cursor: 'pointer' cursor: 'pointer'
}) })
@ -201,18 +204,17 @@ pandora.ui.home = function() {
}) })
.appendTo($box), .appendTo($box),
$footer = Ox.Element().css({
clear: 'both',
height: '64px',
paddingTop: '12px'
}),
$signupButton = Ox.Button({ $signupButton = Ox.Button({
title: Ox._('Sign Up'), title: Ox._('Sign Up'),
width: 122 width: 122
}) })
.css({ .css({
position: 'absolute',
left: 0,
top: '144px',
right: '390px',
bottom: 0,
margin: '0 auto 0 auto',
opacity: 0
}) })
.bindEvent({ .bindEvent({
click: function() { click: function() {
@ -226,13 +228,7 @@ pandora.ui.home = function() {
width: 122 width: 122
}) })
.css({ .css({
position: 'absolute', marginLeft: '8px',
left: 0,
top: '144px',
right: '130px',
bottom: 0,
margin: '0 auto 0 auto',
opacity: 0
}) })
.bindEvent({ .bindEvent({
click: function() { click: function() {
@ -246,13 +242,6 @@ pandora.ui.home = function() {
width: 252 width: 252
}) })
.css({ .css({
position: 'absolute',
left: 0,
top: '144px',
right: '260px',
bottom: 0,
margin: '0 auto 0 auto',
opacity: 0
}) })
.bindEvent({ .bindEvent({
click: function() { click: function() {
@ -266,204 +255,57 @@ pandora.ui.home = function() {
width: 252 width: 252
}) })
.css({ .css({
position: 'absolute', marginLeft: '8px'
left: '260px',
top: '144px',
right: 0,
bottom: 0,
margin: '0 auto 0 auto',
opacity: 0
}) })
.bindEvent({ .bindEvent({
click: function() { click: function() {
pandora.UI.set({page: 'about'}); pandora.UI.set({page: 'about'});
that.fadeOutScreen(); that.fadeOutScreen();
} }
}) }),
.appendTo($box),
$features = $('<div>') $features = $('<div>')
.attr({id: 'features'}) .attr({id: 'lists'})
.css({ .css({
position: 'absolute', position: 'absolute',
left: 0, left: 0,
top: '184px', top: '152px',
right: 0, right: 0,
bottom: 0, bottom: 0,
width: '560px', width: '512px',
margin: '0 auto 0 auto', margin: '0 auto 0 auto',
opacity: 0 opacity: 0
}) })
.appendTo($box); .appendTo($box);
if (pandora.user.level == 'guest') { if (pandora.user.level == 'guest') {
$signupButton.appendTo($box); $signupButton.appendTo($footer);
$signinButton.appendTo($box); $signinButton.appendTo($footer);
} else { } else {
$preferencesButton.appendTo($box); $preferencesButton.appendTo($footer);
} }
$aboutButton.appendTo($footer);
function showFeatures() { function showFeatures() {
var $space,
featured = {},
find = {
query: {
conditions: [{key: 'status', value: 'featured', operator: '=='}],
operator: '&'
},
keys: ['description', 'modified', 'name', 'user'],
sort: [{key: 'position', operator: '+'}]
},
items, lists, edits, texts;
pandora.api.getHomeItems({active: true}, function(result) { pandora.api.getHomeItems({active: true}, function(result) {
items = result.data.items; var items = result.data.items.filter(pandora.isCompleteHomeItem),
lists = 1; $texts;
edits = 1;
texts = 1;
show();
});
function show() {
var counter = 0, max = 8, mouse = false, position = 0, selected = 0,
color = Ox.Theme() == 'oxlight' ? 'rgb(0, 0, 0)'
: Ox.Theme() == 'oxmedium' ? 'rgb(0, 0, 0)'
: 'rgb(255, 255, 255)',
$label, $texts,
$featuresBox, $featuresContainer, $featuresContent,
$featureBox = [], $featureIcon = [],
$previousButton, $nextButton;
if (items.length) {
$features.empty(); $features.empty();
if (items.length) {
$texts = Ox.Element().appendTo($features); $texts = Ox.Element().appendTo($features);
var top = 24;
items.forEach(function(item) { items.forEach(function(item) {
var $text, $icon; var $item = pandora.renderHomeItem({
$icon = Ox.Element({ data: item
element: '<img>', }).appendTo($texts);
tooltip: getTooltip(item) });
}) } else {
.attr({ $features.css({
src: item.image top: '132px'
}) });
.css({
left: 0,
right: '390px',
width: '122px',
height: '122px',
borderRadius: '32px',
marginRight: '8px',
cursor: 'pointer',
float: 'left'
})
.bindEvent({
anyclick: function() {
openItem(item);
} }
}); $features.append($footer);
$text = Ox.Label({
//width: 386 + 122
})
.addClass('OxSelectable')
.css({
//position: 'absolute',
left: '24px',
//top: top + 'px',
right: 0,
height: 'auto',
padding: '8px 8px 8px 8px',
borderRadius: '32px',
marginBottom: '16px',
overflowY: 'auto',
lineHeight: '14px',
textOverflow: 'ellipsis',
whiteSpace: 'normal'
})
.append($icon)
.append(
Ox.Element().css({
//padding: '8px',
}).html(getHTML(item))
)
.appendTo($texts);
pandora.createLinks($text);
top += 130;
});
$features.animate({opacity: 1}, 250); $features.animate({opacity: 1}, 250);
}
function getHTML(item) {
return '<b>' + Ox.encodeHTMLEntities(item.title) + '</b><br><br>' + item.text;
}
function getTooltip(item) {
return Ox._('View {0}', [Ox._(Ox.toTitleCase(item.title))])
}
function openItem(item) {
that.fadeOutScreen();
if (item.type == 'custom') {
pandora.URL.push(item.link);
} else {
pandora.UI.set(Ox.extend({
section: item.type == 'list' ? 'items' : item.type + 's',
page: ''
}, item.type == 'list' ? {
find: {
conditions: [{
key: 'list',
value: item.contentid,
operator: '=='
}],
operator: '&'
}
} : item.type == 'collection' ? {
findDocuments: {
conditions: [{
key: 'collection',
value: item.contentid,
operator: '=='
}],
operator: '&'
}
} : item.type == 'edit' ? {
edit: item.contentid
} : {
}));
}
}
function scrollToPosition(i, animate) {
if (i >= 0 && i <= items.length - max && i != position) {
position = i;
$featuresContent.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 == items.length - max) {
$nextButton.removeClass('visible').stop().animate({
opacity: 0
}, 250, function() {
$nextButton.hide();
});
} else {
$nextButton.addClass('visible');
}
if (mouse) {
$featuresBox.trigger('mouseenter');
}
});
}
}
}
} }
that.fadeInScreen = function() { that.fadeInScreen = function() {