b21dc0bd76
- improved layout for "release dialog" (GitHub API) - improved pagespeed (removed render blocking javascripts) - improved map scrollbar configuration - improved Chrome browser custom scrollbar layout - removed "sign up" buttons from "map panels", closed #214
690 lines
24 KiB
JavaScript
690 lines
24 KiB
JavaScript
/**
|
|
* Main loginPage application
|
|
*/
|
|
|
|
define([
|
|
'jquery',
|
|
'app/init',
|
|
'app/util',
|
|
'app/render',
|
|
'app/ccp',
|
|
'blueImpGallery',
|
|
'bootbox',
|
|
'lazyload',
|
|
'app/ui/header',
|
|
'app/ui/logo',
|
|
'app/ui/demo_map',
|
|
'dialog/account_settings',
|
|
'dialog/notification',
|
|
'dialog/manual',
|
|
'dialog/releases',
|
|
'dialog/credit'
|
|
], function($, Init, Util, Render, CCP, Gallery, bootbox) {
|
|
|
|
'use strict';
|
|
|
|
var config = {
|
|
splashOverlayClass: 'pf-splash', // class for "splash" overlay
|
|
|
|
// header
|
|
headerId: 'pf-landing-top', // id for header
|
|
headerContainerId: 'pf-header-container', // id for header container
|
|
logoContainerId: 'pf-logo-container', // id for main header logo container
|
|
headHeaderMapId: 'pf-header-map', // id for header image (svg animation)
|
|
|
|
// map bg
|
|
headMapBgId: 'pf-header-map-bg', // id for header background container
|
|
mapNeocomId: 'pf-map-neocom', // id for map "neocom" image
|
|
mapBrowserId: 'pf-map-browser', // id for "browser" image
|
|
mapBgImageId: 'pf-map-bg-image', // id for "background" map image
|
|
|
|
// navigation
|
|
navigationElementId: 'pf-navbar', // id for navbar element
|
|
navigationLinkManualClass: 'pf-navbar-manual', // class for "manual" trigger link
|
|
navigationLinkLicenseClass: 'pf-navbar-license', // class for "license" trigger link
|
|
navigationVersionLinkClass: 'pf-navbar-version-info', // class for "version information"
|
|
|
|
// cookie hint
|
|
cookieHintId: 'pf-cookie-hint', // id for "cookie hint" element
|
|
|
|
// character select
|
|
characterSelectionClass: 'pf-character-selection', // class for character panel wrapper
|
|
characterRowAnimateClass: 'pf-character-row-animate', // class for character panel row during animation
|
|
characterImageWrapperClass: 'pf-character-image-wrapper', // class for image wrapper (animated)
|
|
characterImageInfoClass: 'pf-character-info', // class for character info layer (visible on hover)
|
|
dynamicMessageContainerClass: 'pf-dynamic-message-container', // class for "dynamic" (JS) message container
|
|
|
|
// gallery
|
|
galleryId: 'pf-gallery', // id for gallery container
|
|
galleryThumbImageClass: 'pf-landing-image-preview', // class for gallery thumb images
|
|
galleryThumbContainerId: 'pf-landing-gallery-thumb-container', // id for gallery thumb images
|
|
galleryCarouselId: 'pf-landing-gallery-carousel', // id for "carousel" element
|
|
|
|
// server panel
|
|
serverPanelId: 'pf-server-panel', // id for EVE Online server status panel
|
|
|
|
// animation
|
|
animateElementClass: 'pf-animate-on-visible' // class for elements that will be animated to show
|
|
};
|
|
|
|
/**
|
|
* set a cookie
|
|
* @param cname
|
|
* @param cvalue
|
|
* @param exdays
|
|
*/
|
|
var setCookie = function(cname, cvalue, exdays) {
|
|
var d = new Date();
|
|
d.setTime(d.getTime() + (exdays*24*60*60*1000));
|
|
var expires = 'expires=' + d.toUTCString();
|
|
document.cookie = cname + '=' + cvalue + '; ' + expires;
|
|
};
|
|
|
|
/**
|
|
* get cookie value by name
|
|
* @param cname
|
|
* @returns {*}
|
|
*/
|
|
var getCookie = function(cname) {
|
|
var name = cname + '=';
|
|
var ca = document.cookie.split(';');
|
|
|
|
for(var i = 0; i <ca.length; i++) {
|
|
var c = ca[i];
|
|
while (c.charAt(0) === ' ') {
|
|
c = c.substring(1);
|
|
}
|
|
|
|
if (c.indexOf(name) === 0) {
|
|
return c.substring(name.length,c.length);
|
|
}
|
|
}
|
|
return '';
|
|
};
|
|
|
|
|
|
/**
|
|
* set page observer
|
|
*/
|
|
var setPageObserver = function(){
|
|
|
|
// cookie hint --------------------------------------------------------
|
|
if(getCookie('cookie') !== '1'){
|
|
// hint not excepted
|
|
$('#' + config.cookieHintId).collapse('show');
|
|
}
|
|
|
|
$('#' + config.cookieHintId + ' .btn-success').on('click', function(){
|
|
setCookie('cookie', 1, 365);
|
|
});
|
|
|
|
// releases -----------------------------------------------------------
|
|
$('.' + config.navigationVersionLinkClass).on('click', function(e){
|
|
$.fn.releasesDialog();
|
|
});
|
|
|
|
// manual -------------------------------------------------------------
|
|
$('.' + config.navigationLinkManualClass).on('click', function(e){
|
|
e.preventDefault();
|
|
$.fn.showMapManual();
|
|
});
|
|
|
|
// license ------------------------------------------------------------
|
|
$('.' + config.navigationLinkLicenseClass).on('click', function(e){
|
|
e.preventDefault();
|
|
$.fn.showCreditsDialog(false, true);
|
|
});
|
|
|
|
// tooltips -----------------------------------------------------------
|
|
var mapTooltipOptions = {
|
|
toggle: 'tooltip',
|
|
container: 'body',
|
|
delay: 150
|
|
};
|
|
|
|
$('[title]').not('.slide img').tooltip(mapTooltipOptions);
|
|
};
|
|
|
|
/**
|
|
* init image carousel
|
|
*/
|
|
var initCarousel = function(){
|
|
|
|
// check if carousel exists (e.g. not in IGB browser
|
|
if($('#' + config.galleryCarouselId).length === 0){
|
|
return;
|
|
}
|
|
|
|
// extent "blueimp" gallery for a textFactory method to show HTML templates
|
|
Gallery.prototype.textFactory = function (obj, callback) {
|
|
var newSlideContent = $('<div>')
|
|
.addClass('text-content')
|
|
.attr('imgTitle', obj.title);
|
|
|
|
var moduleConfig = {
|
|
name: obj.href, // template name
|
|
position: newSlideContent,
|
|
functions: {
|
|
after: function(){
|
|
// element inserted -> load complete
|
|
callback({
|
|
type: 'complete',
|
|
target: newSlideContent[0]
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
// render HTML file (template)
|
|
var moduleData = {
|
|
id: config.headHeaderMapId,
|
|
bgId: config.headMapBgId,
|
|
neocomId: config.mapNeocomId,
|
|
browserId: config.mapBrowserId,
|
|
mapBgImageId: config.mapBgImageId
|
|
};
|
|
|
|
Render.showModule(moduleConfig, moduleData);
|
|
|
|
return newSlideContent[0];
|
|
};
|
|
|
|
// initialize carousel ------------------------------------------------
|
|
var carousel = new Gallery([
|
|
{
|
|
imgTitle: 'IGB',
|
|
href: 'ui/map',
|
|
type: 'text/html'
|
|
},
|
|
{
|
|
href: 'public/img/landing/responsive.jpg',
|
|
imgTitle: 'Responsive layout',
|
|
type: 'image/jpg',
|
|
thumbnail: ''
|
|
},
|
|
{
|
|
href: 'public/img/landing/pathfinder_1.jpg',
|
|
imgTitle: 'Map view',
|
|
type: 'image/jpg',
|
|
thumbnail: ''
|
|
},
|
|
{
|
|
href: 'public/img/landing/pathfinder_3.jpg',
|
|
imgTitle: 'Map information',
|
|
type: 'image/jpg',
|
|
thumbnail: ''
|
|
},
|
|
{
|
|
href: 'public/img/landing/pathfinder_2.jpg',
|
|
imgTitle: 'System information',
|
|
type: 'image/jpg',
|
|
thumbnail: ''
|
|
}
|
|
], {
|
|
container: '#' + config.galleryCarouselId,
|
|
carousel: true,
|
|
startSlideshow: false,
|
|
titleProperty: 'imgTitle',
|
|
transitionSpeed: 600,
|
|
slideshowInterval: 5000,
|
|
onopened: function () {
|
|
// Callback function executed when the Gallery has been initialized
|
|
// and the initialization transition has been completed.
|
|
// -> show "demo" map
|
|
|
|
// set title for first slide
|
|
$( this.options.container ).find( this.options.titleElement).text('Browser view');
|
|
|
|
$('#' + config.headHeaderMapId).drawDemoMap(function(){
|
|
|
|
// zoom map SVGs
|
|
$('#' + config.headHeaderMapId + ' svg').velocity({
|
|
scaleX: 0.66,
|
|
scaleY: 0.66
|
|
}, {
|
|
duration: 360
|
|
});
|
|
|
|
// position map container
|
|
$('#' + config.headHeaderMapId).velocity({
|
|
marginTop: '130px',
|
|
marginLeft: '-50px'
|
|
}, {
|
|
duration: 360,
|
|
complete: function(){
|
|
// show browser
|
|
$('#' + config.mapBrowserId).velocity('transition.slideUpBigIn', {
|
|
duration: 360,
|
|
complete: function(){
|
|
// show neocom
|
|
$('#' + config.mapNeocomId).velocity('transition.slideLeftIn', {
|
|
duration: 180
|
|
});
|
|
|
|
// show background
|
|
$('#' + config.mapBgImageId).velocity('transition.shrinkIn', {
|
|
duration: 360
|
|
});
|
|
|
|
// when map is shown -> start carousel looping
|
|
carousel.play();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
}
|
|
});
|
|
};
|
|
|
|
/**
|
|
* init image gallery
|
|
*/
|
|
var initGallery = function(){
|
|
|
|
requirejs(['blueImpGalleryBootstrap'], function() {
|
|
// thumb links
|
|
var thumbLinks = $('a[data-gallery="#pf-gallery"]');
|
|
|
|
var borderless = false;
|
|
|
|
var galleryElement = $('#' + config.galleryId);
|
|
galleryElement.data('useBootstrapModal', !borderless);
|
|
galleryElement.toggleClass('blueimp-gallery-controls', borderless);
|
|
|
|
// init gallery on click
|
|
thumbLinks.on('click', function(e){
|
|
e.preventDefault();
|
|
|
|
e = e || window.event;
|
|
var target = e.target || e.srcElement;
|
|
var link = target.src ? target.parentNode : target;
|
|
|
|
var options = {
|
|
index: link,
|
|
event: e,
|
|
container: '#' + config.galleryId,
|
|
titleProperty: 'description'
|
|
};
|
|
|
|
new Gallery(thumbLinks, options);
|
|
});
|
|
});
|
|
};
|
|
|
|
var initYoutube = function(){
|
|
|
|
$('.youtube').each(function() {
|
|
// Based on the YouTube ID, we can easily find the thumbnail image
|
|
$(this).css('background-image', 'url(https://i.ytimg.com/vi/' + this.id + '/sddefault.jpg)');
|
|
|
|
// Overlay the Play icon to make it look like a video player
|
|
$(this).append($('<div/>', {'class': 'play'}));
|
|
|
|
$(document).delegate('#' + this.id, 'click', function() {
|
|
// Create an iFrame with autoplay set to true
|
|
var iFrameUrl = 'https://www.youtube.com/embed/' + this.id + '?autoplay=1&autohide=1';
|
|
if ( $(this).data('params') ){
|
|
iFrameUrl += '&'+$(this).data('params');
|
|
}
|
|
|
|
// The height and width of the iFrame should be the same as parent
|
|
var iFrame = $('<iframe/>', {
|
|
frameborder: '0',
|
|
src: iFrameUrl,
|
|
width: $(this).width(),
|
|
height: $(this).height(),
|
|
class: 'pricing-big'
|
|
});
|
|
|
|
// Replace the YouTube thumbnail with YouTube HTML5 Player
|
|
$(this).replaceWith(iFrame);
|
|
});
|
|
});
|
|
};
|
|
|
|
|
|
/**
|
|
* init scrollspy for navigation bar
|
|
*/
|
|
var initScrollspy = function(){
|
|
// init scrollspy
|
|
|
|
// show elements that are currently in the viewport
|
|
var showVisibleElements = function(){
|
|
// find all elements that should be animated
|
|
var visibleElements = $('.' + config.animateElementClass).isInViewport();
|
|
|
|
$(visibleElements).removeClass( config.animateElementClass );
|
|
|
|
$(visibleElements).velocity('transition.flipXIn', {
|
|
duration: 600,
|
|
stagger: 60,
|
|
delay: 500,
|
|
complete: function(element){
|
|
$(element).find('.fade').addClass('in');
|
|
},
|
|
visibility: 'visible'
|
|
});
|
|
};
|
|
|
|
$( window ).scroll(function() {
|
|
// check for new visible elements
|
|
showVisibleElements();
|
|
});
|
|
|
|
// initial check for visible elements
|
|
showVisibleElements();
|
|
|
|
// event listener for navigation links
|
|
$('.page-scroll').on('click', function(){
|
|
// get element to scroll
|
|
var anchorTag = $(this).attr('data-anchor');
|
|
|
|
// scroll to container
|
|
$(anchorTag).velocity('scroll', {
|
|
duration: 300,
|
|
easing: 'swing'
|
|
});
|
|
});
|
|
};
|
|
|
|
/**
|
|
* get current EVE-Online server status
|
|
* -> show "server panel"
|
|
*/
|
|
var initServerStatus = function(){
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: Init.path.getServerStatus,
|
|
dataType: 'json'
|
|
}).done(function(responseData, textStatus, request){
|
|
|
|
if(responseData.hasOwnProperty('status')){
|
|
var data = responseData.status;
|
|
data.serverPanelId = config.serverPanelId;
|
|
|
|
var statusClass = '';
|
|
switch(data.serviceStatus.toLowerCase()){
|
|
case 'online': statusClass = 'txt-color-green'; break;
|
|
case 'vip': statusClass = 'txt-color-orange'; break;
|
|
case 'offline': statusClass = 'txt-color-redDarker'; break;
|
|
}
|
|
data.serviceStatus = {
|
|
eve: data.serviceStatus,
|
|
style: statusClass
|
|
};
|
|
|
|
requirejs(['text!templates/ui/server_panel.html', 'mustache'], function(template, Mustache) {
|
|
var content = Mustache.render(template, data);
|
|
$('#' + config.headerId).prepend(content);
|
|
$('#' + config.serverPanelId).velocity('transition.slideLeftBigIn', {
|
|
duration: 240
|
|
});
|
|
});
|
|
}
|
|
|
|
}).fail(handleAjaxErrorResponse);
|
|
};
|
|
|
|
/**
|
|
* load character data from cookie information
|
|
* -> all validation is done server side!
|
|
*/
|
|
var initCharacterSelect = function(){
|
|
|
|
/**
|
|
* init panel animation for an element
|
|
* @param imageWrapperElement
|
|
*/
|
|
var initCharacterAnimation = function(imageWrapperElement){
|
|
|
|
imageWrapperElement.velocity('stop').delay(300).velocity('transition.flipBounceXIn', {
|
|
display: 'inline-block',
|
|
stagger: 60,
|
|
drag: true,
|
|
duration: 600
|
|
});
|
|
|
|
// Hover effect for character info layer
|
|
imageWrapperElement.hoverIntent(function(e){
|
|
var characterInfoElement = $(this).find('.' + config.characterImageInfoClass);
|
|
|
|
characterInfoElement.velocity('finish').velocity({
|
|
width: ['100%', [ 400, 15 ] ]
|
|
},{
|
|
easing: 'easeInSine'
|
|
});
|
|
}, function(e){
|
|
var characterInfoElement = $(this).find('.' + config.characterImageInfoClass);
|
|
|
|
characterInfoElement.velocity('finish').velocity({
|
|
width: 0
|
|
},{
|
|
duration: 150,
|
|
easing: 'easeInOutSine'
|
|
});
|
|
});
|
|
};
|
|
|
|
// --------------------------------------------------------------------
|
|
|
|
/**
|
|
* update all character panels -> set CSS class (e.g. after some panels were added/removed,..)
|
|
*/
|
|
var updateCharacterPanels = function(){
|
|
var characterRows = $('.' + config.characterSelectionClass + ' .pf-dynamic-area').parent();
|
|
var rowClassIdentifier = ((12 / characterRows.length ) <= 3) ? 3 : (12 / characterRows.length);
|
|
$(characterRows).removeClass().addClass('col-sm-' + rowClassIdentifier);
|
|
};
|
|
|
|
// --------------------------------------------------------------------
|
|
|
|
var removeCharacterPanel = function(panelElement){
|
|
$(panelElement).velocity('transition.expandOut', {
|
|
duration: 250,
|
|
complete: function () {
|
|
// lock row for CSS animations while removing...
|
|
$(this).parent().addClass(config.characterRowAnimateClass);
|
|
|
|
$(this).parent().velocity({
|
|
width: 0
|
|
},{
|
|
easing: 'ease',
|
|
duration: 300,
|
|
complete: function(){
|
|
$(this).remove();
|
|
// reset column CSS classes for all existing panels
|
|
updateCharacterPanels();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
};
|
|
// --------------------------------------------------------------------
|
|
|
|
// request character data for each character panel
|
|
$('.' + config.characterSelectionClass + ' .pf-dynamic-area').each(function(){
|
|
var characterElement = $(this);
|
|
|
|
characterElement.showLoadingAnimation();
|
|
|
|
var requestData = {
|
|
cookie: characterElement.data('cookie')
|
|
};
|
|
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: Init.path.getCookieCharacterData,
|
|
data: requestData,
|
|
dataType: 'json',
|
|
context: {
|
|
href: characterElement.data('href'),
|
|
cookieName: requestData.cookie,
|
|
characterElement: characterElement
|
|
}
|
|
}).done(function(responseData, textStatus, request){
|
|
var characterElement = this.characterElement;
|
|
characterElement.hideLoadingAnimation();
|
|
|
|
if(
|
|
responseData.error &&
|
|
responseData.error.length > 0
|
|
){
|
|
$('.' + config.dynamicMessageContainerClass).showMessage({
|
|
type: responseData.error[0].type,
|
|
title: 'Character verification failed',
|
|
text: responseData.error[0].message
|
|
});
|
|
}
|
|
|
|
if(responseData.hasOwnProperty('character')){
|
|
|
|
var data = {
|
|
link: this.href,
|
|
cookieName: this.cookieName,
|
|
character: responseData.character
|
|
};
|
|
|
|
requirejs(['text!templates/ui/character_panel.html', 'mustache'], function(template, Mustache) {
|
|
var content = Mustache.render(template, data);
|
|
characterElement.html(content);
|
|
|
|
// show character panel (animation settings)
|
|
initCharacterAnimation(characterElement.find('.' + config.characterImageWrapperClass));
|
|
});
|
|
}else{
|
|
// character data not available -> remove panel
|
|
removeCharacterPanel(this.characterElement);
|
|
}
|
|
|
|
}).fail(function( jqXHR, status, error) {
|
|
var characterElement = this.characterElement;
|
|
characterElement.hideLoadingAnimation();
|
|
|
|
// character data not available -> remove panel
|
|
removeCharacterPanel(this.characterElement);
|
|
});
|
|
|
|
});
|
|
};
|
|
|
|
|
|
/**
|
|
* default ajax error handler
|
|
* -> show user notifications
|
|
* @param jqXHR
|
|
* @param status
|
|
* @param error
|
|
*/
|
|
var handleAjaxErrorResponse = function(jqXHR, status, error){
|
|
|
|
var type = status;
|
|
var title = 'Status ' + jqXHR.status + ': ' + error;
|
|
var message = '';
|
|
|
|
if(jqXHR.responseText){
|
|
var errorObj = $.parseJSON(jqXHR.responseText);
|
|
|
|
if(
|
|
errorObj.error &&
|
|
errorObj.error.length > 0
|
|
){
|
|
for(var i = 0; i < errorObj.error.length; i++){
|
|
var errorData = errorObj.error[i];
|
|
type = errorData.type;
|
|
title = 'Status ' + errorData.code + ': ' + errorData.status;
|
|
message = errorData.message;
|
|
|
|
Util.showNotify({title: title, text: message, type: type});
|
|
}
|
|
}
|
|
}else{
|
|
Util.showNotify({title: title, text: message, type: type});
|
|
}
|
|
};
|
|
|
|
/**
|
|
* main init "landing" page
|
|
*/
|
|
$(function(){
|
|
|
|
// show app information in browser console
|
|
Util.showVersionInfo();
|
|
|
|
// show log off message
|
|
var isLogOut = location.search.split('logout')[1];
|
|
if(isLogOut !== undefined){
|
|
|
|
// show logout dialog
|
|
var options = {
|
|
buttons: {
|
|
close: {
|
|
label: 'close',
|
|
className: ['btn-default'].join(' ')
|
|
}
|
|
},
|
|
content: {
|
|
icon: 'fa-sign-out',
|
|
class: 'txt-color-warning',
|
|
title: 'Logout',
|
|
headline: 'Logout',
|
|
text: [
|
|
'For security reasons, you were logged out automatically',
|
|
'Please log in again'
|
|
]
|
|
}
|
|
};
|
|
|
|
$.fn.showNotificationDialog(options);
|
|
|
|
// change url (remove logout parameter)
|
|
if (history.pushState) {
|
|
history.pushState({}, '', location.protocol + '//' + location.host + location.pathname);
|
|
}
|
|
}
|
|
|
|
// init "lazy loading" for images
|
|
$('.' + config.galleryThumbImageClass).lazyload({
|
|
threshold : 300
|
|
});
|
|
|
|
// hide splash loading animation
|
|
$('.' + config.splashOverlayClass).hideSplashOverlay();
|
|
|
|
// init server status information
|
|
initServerStatus();
|
|
|
|
initCharacterSelect();
|
|
|
|
// init scrollspy
|
|
initScrollspy();
|
|
|
|
// init page observer
|
|
setPageObserver();
|
|
|
|
// init carousel
|
|
initCarousel();
|
|
|
|
// init gallery
|
|
initGallery();
|
|
|
|
// init youtube videos
|
|
initYoutube();
|
|
|
|
// show logo -> hide animation in IGB
|
|
if( !CCP.isInGameBrowser() ){
|
|
$('#' + config.logoContainerId).drawLogo(function(){
|
|
|
|
// init header animation
|
|
$('#' + config.headerContainerId).initHeader(function(){
|
|
|
|
});
|
|
}, false);
|
|
}
|
|
|
|
});
|
|
|
|
|
|
}); |