242 lines
13 KiB
JavaScript
242 lines
13 KiB
JavaScript
Ox.getJSON('json/pandora.json', function(pandora) {
|
|
|
|
$(function() {
|
|
|
|
var $body = $('body'),
|
|
$icon = $('#icon'),
|
|
$menu = $('<div>').attr({id: 'menu'}).appendTo($body),
|
|
$page = $('<div>').attr({id: 'page'}).appendTo($body),
|
|
$head = $('<div>').appendTo($page);
|
|
$text = $('<div>').appendTo($page);
|
|
$prevButton = $('<span>')
|
|
.addClass('button')
|
|
.attr({id: 'prevButton', title: 'previous'})
|
|
.html('<='),
|
|
$nextButton = $('<span>')
|
|
.addClass('button')
|
|
.attr({id: 'nextButton', title: 'next'})
|
|
.html('=>'),
|
|
tourIndex = 0;
|
|
|
|
Ox.forEach(pandora.pages, function(data, page) {
|
|
var $element, text;
|
|
if (page == '') {
|
|
$element = $('<img>')
|
|
.attr({id: 'icon', src: 'png/icon256.png'})
|
|
.appendTo($body);
|
|
} else {
|
|
$element = $('<div>')
|
|
.addClass(page)
|
|
.html(page)
|
|
.appendTo($menu);
|
|
}
|
|
$element.bind({
|
|
click: function() {
|
|
window.location.hash = page;
|
|
}
|
|
});
|
|
});
|
|
|
|
window.onhashchange = loadPage;
|
|
|
|
loadPage();
|
|
|
|
function loadPage() {
|
|
var hash = window.location.hash.substr(1).split('.'),
|
|
page = hash[0],
|
|
part = parseInt(hash[1], 10) || 1,
|
|
text;
|
|
if (pandora.pages[page]) {
|
|
$('#menu > div').removeClass('selected');
|
|
page != '' && $('#menu > .' + page).addClass('selected');
|
|
if (page == 'news') {
|
|
text = pandora.pages.news.map(function(item) {
|
|
return '<div class="title">' + item[0] + '</div>'
|
|
+ '<div class="date">'
|
|
+ Ox.formatDate(item[1], '%A, %B %e, %Y')
|
|
+ '</div>'
|
|
+ '<div class="text">' + item[2] + '</div>';
|
|
}).join('');
|
|
} else if (page == 'faq') {
|
|
text = pandora.pages.faq.map(function(item) {
|
|
return '<div class="title"><b>' + item[0] + '</b></div>'
|
|
+ '<div class="text">' + item[1] + '</div>';
|
|
}).join('');
|
|
} else if (page == 'tour') {
|
|
text = $('<div>')
|
|
.append(
|
|
$('<div>')
|
|
.addClass('tour')
|
|
.append(
|
|
$('<img>')
|
|
.addClass('tour')
|
|
.attr({
|
|
src: pandora.pages.tour[part - 1][0]
|
|
})
|
|
)
|
|
.bind({
|
|
click: function(e) {
|
|
var $this = $(this), timeout;
|
|
if (!$this.hasClass('zoom')) {
|
|
$($this.children()[0]).stop().animate({
|
|
width: '1280px',
|
|
height: '800px',
|
|
marginLeft: Math.round(
|
|
(384 - window.scrollX - e.clientX) * 11/9
|
|
) + 'px',
|
|
marginTop: Math.round(
|
|
(113 - window.scrollY - e.clientY) * 11/9
|
|
) + 'px'
|
|
}, 250, function() {
|
|
var event;
|
|
$this.addClass('zoom').bind({
|
|
mouseenter: function(e) {
|
|
timeout && clearTimeout(timeout);
|
|
$this.bind({
|
|
mousemove: function(e) {
|
|
event = e;
|
|
}
|
|
})
|
|
$($this.children()[0]).animate({
|
|
width: '1280px',
|
|
height: '800px',
|
|
marginLeft: Math.round(
|
|
(384 - window.scrollX - e.clientX) * 11/9
|
|
) + 'px',
|
|
marginTop: Math.round(
|
|
(113 - window.scrollY - e.clientY) * 11/9
|
|
) + 'px'
|
|
}, 250, function() {
|
|
$($this.children()[0]).animate({
|
|
marginLeft: Math.round(
|
|
(384 - window.scrollX - (event || e).clientX) * 11/9
|
|
) + 'px',
|
|
marginTop: Math.round(
|
|
(113 - window.scrollY - (event || e).clientY) * 11/9
|
|
) + 'px'
|
|
}, 250, function() {
|
|
$this.unbind('mousemove').bind({
|
|
mousemove: function(e) {
|
|
$($this.children()[0]).stop().css({
|
|
width: '1280px',
|
|
height: '800px',
|
|
marginLeft: Math.round(
|
|
(384 - window.scrollX - e.clientX) * 11/9
|
|
) + 'px',
|
|
marginTop: Math.round(
|
|
(113 - window.scrollY - e.clientY) * 11/9
|
|
) + 'px'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
});
|
|
},
|
|
mousemove: function(e) {
|
|
$($this.children()[0]).stop().css({
|
|
width: '1280px',
|
|
height: '800px',
|
|
marginLeft: Math.round(
|
|
(384 - window.scrollX - e.clientX) * 11/9
|
|
) + 'px',
|
|
marginTop: Math.round(
|
|
(113 - window.scrollY - e.clientY) * 11/9
|
|
) + 'px'
|
|
});
|
|
},
|
|
mouseleave: function() {
|
|
timeout = setTimeout(function() {
|
|
$($this.children()[0]).stop().animate({
|
|
width: '576px',
|
|
height: '360px',
|
|
marginLeft: 0,
|
|
marginTop: 0
|
|
}, 250, function() {
|
|
$this.unbind('mousemove');
|
|
});
|
|
timeout = 0;
|
|
}, 500);
|
|
}
|
|
});
|
|
});
|
|
} else {
|
|
$this.unbind('mouseenter').unbind('mousemove').unbind('mouseleave');
|
|
$($this.children()[0]).stop().animate({
|
|
width: '576px',
|
|
height: '360px',
|
|
marginLeft: 0,
|
|
marginTop: 0
|
|
}, 250, function() {
|
|
$this.removeClass('zoom');
|
|
});
|
|
}
|
|
}
|
|
})
|
|
)
|
|
.append($('<br>'))
|
|
.append($('<br>'))
|
|
.append(
|
|
$('<p>').html(pandora.pages.tour[part - 1][1])
|
|
);
|
|
} else {
|
|
text = pandora.pages[page];
|
|
}
|
|
$head.empty().append(
|
|
page == '' ? 'pan.do/ra — open media archive'
|
|
: page == 'tour' ? $('<span>')
|
|
.addClass('button' + (page == 1 ? 'disabled' : ''))
|
|
.attr({title: 'first'})
|
|
.html('tour')
|
|
.click(function() {
|
|
window.location.hash = 'tour';
|
|
})
|
|
: page
|
|
);
|
|
$text.empty().append(text);
|
|
if (page == 'tour') {
|
|
$prevButton[
|
|
part == 1 ? 'addClass' : 'removeClass'
|
|
]('disabled')
|
|
.click(function() {
|
|
window.location.hash = 'tour.' + (part - 1);
|
|
})
|
|
.appendTo($head);
|
|
$nextButton[
|
|
part == pandora.pages.tour.length
|
|
? 'addClass' : 'removeClass'
|
|
]('disabled')
|
|
.click(function() {
|
|
window.location.hash = 'tour.' + (part + 1);
|
|
})
|
|
.appendTo($head);
|
|
}
|
|
}
|
|
}
|
|
|
|
function loadTour(delta) {
|
|
tourIndex = delta == 0 ? 0
|
|
: Ox.mod(tourIndex + delta, pandora.pages.tour.length);
|
|
$('.button').removeClass('disabled');
|
|
if (tourIndex == 0) {
|
|
$prevButton.addClass('disabled');
|
|
} else if (tourIndex == pandora.pages.tour.length - 1) {
|
|
$nextButton.addClass('disabled');
|
|
}
|
|
var $img = $text.find('img'),
|
|
$p = $text.find('p'),
|
|
src = pandora.pages.tour[tourIndex][0]
|
|
$('<img>')
|
|
.load(function() {
|
|
$img.css({opacity: 1}).attr({src: src});
|
|
$p.css({opacity: 1}).html(pandora.pages.tour[tourIndex][1]);
|
|
})
|
|
.attr({
|
|
src: src
|
|
});
|
|
$img.css({opacity: 0.25});
|
|
$p.css({opacity: 0.25});
|
|
}
|
|
|
|
});
|
|
|
|
});
|