/*---------------------------------------
Remember the war
http://www.rememberthewar.com
@replete @harryford
ËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËË
ËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËË*/
app = (function() {
return {
init: function() {
Modernizr.load([{
load: [appvars.jsDir + 'app_lib.js'],
complete: function() {
//Start App
$(function() {
app.analytics();
app.featureTests();
if ($("body").hasClass("home")) {
app.setupInterface();
app.loadContent();
}
//app.actions();
//app.featured();
});
//Dev mode
if ($.urlParam('dev') || document.location.hostname.indexOf(".dev") > -1 || document.location.hostname.indexOf("localhost") > -1) {
//Modernizr.load(appvars.jsDir + 'dev/dev.js');
}
}
}]);
},
analytics: function() {
//GA: Tracker
var _gaq = [
['_setAccount', 'UA-26805007-2'],
['_trackPageview']
];
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.async = 1;
g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s)
}(document, 'script'));
//GA: Event Tracking
$("a[href$=pdf]").click(function() {
var name = $(this).attr("title") || "";
_gaq.push(['_trackEvent', 'PDF', 'Download', name]);
});
$("#welcome .begin").click(function() {
_gaq.push(['_trackEvent', 'Actions', 'Button', 'Begin']);
});
$(".start").click(function() {
_gaq.push(['_trackEvent', 'Actions', 'Video', 'Start']);
});
$(".sidetab .handle").click(function() {
_gaq.push(['_trackEvent', 'Actions', 'Timeline', 'Click']);
});
$(".nav.next").click(function() {
_gaq.push(['_trackEvent', 'Actions', 'Navigation', 'Next slide']);
});
$(".nav.prev").click(function() {
_gaq.push(['_trackEvent', 'Actions', 'Navigation', 'Previous slide']);
});
$(".authors a").click(function() {
_gaq.push(['_trackEvent', 'Actions', 'Social Media', 'Authors']);
});
$(".facebook").click(function() {
_gaq.push(['_trackEvent', 'Actions', 'Social Media', 'Facebook']);
});
$(".twitter").click(function() {
_gaq.push(['_trackEvent', 'Actions', 'Social Media', 'Twitter']);
});
$(".sponsor").click(function() {
_gaq.push(['_trackEvent', 'Actions', 'Sponsors', $(this).attr("title")]);
});
$(".donators a").click(function() {
_gaq.push(['_trackEvent', 'Actions', 'Donators', $(this).text()]);
});
console.log("an");
},
featureTests: function() {
appvars.viewportHeightExtra = 0;
if (Modernizr.iphone || Modernizr.ipad) {
var iosLoc = "http://rememberthewar.com/ios.html";
if (window.location != iosLoc) {
window.location = iosLoc;
}
appvars.isMobileSafari = true;
appvars.viewportHeightExtra = 60;
}
if (!Modernizr.textshadow && $.browser.msie) {
Modernizr.load([{
load: [appvars.jsDir + 'polyfill/jquery.textshadow.js'],
complete: function() {
$(".full-content .title.primary, .full-content .title").textshadow({
useStyle: true
});
$(".ie9 #welcome .title").textshadow({
useStyle: true
});
}
}]);
}
},
loadContent: function() {
//Preload segments
$(".segment.not-loaded").each(function(i) {
var imgSrc = $(this).attr("data-image-src"),
imgCaption = $(this).find("figcaption").text(),
currentSegment = this,
currentSegmentId = $(this).attr("id"),
stretchOptions = {};
//Set appropriate image size
imgSrc = imgSrc.replace("res", appvars.imageQuality);
//Image dimensions
switch (appvars.imageQuality) {
case "low":
stretchOptions = {
width: 400,
height: 276
};
break
case "medium":
stretchOptions = {
width: 720,
height: 496
};
break
case "high":
stretchOptions = {
width: 1110,
height: 765
};
break
case "highest":
stretchOptions = {
width: 1920,
height: 1323
};
break
default:
stretchOptions = {
width: 400,
height: 276
};
break
}
stretchOptions.id = currentSegmentId + "-img";
//Load segment image
$("<img/>").addClass("bg").attr("src", imgSrc).attr("alt", imgCaption).attr("id", currentSegmentId + "-img").load(function() {
//Attach loaded image to page
$(currentSegment).removeClass("not-loaded").find("figure").prepend($(this));
//Bind stretch image event
$(window).bind("resize", function() {
stretchImage(stretchOptions);
}).trigger("resize");
//Update navigation
$("[role=navigation] a[href='#" + currentSegmentId + "']").parent(".not-loaded").removeClass("not-loaded");
}); //.load
}); //.each .segment.not-loaded
function stretchImage(options) {
// Set bg size
var elem = $("#" + options.id),
w = $(window),
ratio = options.height / options.width,
// Get browser window size
browserwidth = w.width(),
browserheight = w.height();
// Scale the image
if ((browserheight / browserwidth) > ratio) {
elem.height(browserheight).width(browserheight / ratio);
} else {
elem.width(browserwidth).height(browserwidth * ratio);
}
// Center the image
elem.css('left', (browserwidth - elem.width()) / 2).css('top', (browserheight - elem.height()) / 2);
} //stretchImage
},
setupInterface: function() {
appvars.easing = 'easeInOutExpo', appvars.triggeredScroll = false, appvars.segmentPrefix = "s-", appvars.welcomeSegment = "#" + $(".segment:first").attr("id");
//Show preloading status
appvars.journeyText = "Begin the journey in", appvars.journeyHref = $(appvars.welcomeSegment + " .begin").attr("href");
//Setup Spinner
var opts = {
lines: 14,
length: 4,
width: 3,
radius: 11,
color: '#fff',
speed: 0.8,
// Rounds per second
trail: 80,
shadow: false
};
$("#loading").spin(opts);
//Show spinner
$("#loading").appendTo(appvars.welcomeSegment + " .begin .year").removeClass("hidden");
console.log("preloading stuff");
//Initial scrolling
if (window.location.hash) {
appvars.triggeredScroll = true; //kludge: stop excessive event firing
console.log("+++ triggeredScroll: true");
}
if ($(window).scrollTop() >= 0 && !window.location.hash) {
//Page loaded without hash but not showing at the very top
}
//Mobile Safari
if (Modernizr.iphone) {
$(function() {
//Hide address bar
setTimeout(function() {
window.scrollTo(0, 1);
}, 0);
});
}
//Welcome segment
$(appvars.welcomeSegment).removeClass("init");
//Change navigation links
$(".segment .prev, .segment .next, .begin").each(function() {
$(this).attr("data-href", $(this).attr("href")).attr("href", "javascript:void(0);");
});
//Bind navigation events
$(".segment .prev, .segment .next, .begin").live("click", function() {
if ($(this).hasClass("begin")) {
//Start of journey
$("[role=main],[role=contentinfo]").removeClass("init");
$(appvars.welcomeSegment).css("height", appvars.viewportHeight);
}
console.log("---clicked a link");
appvars.triggeredScroll = true;
console.log("+++ triggeredScroll: true (clicked)");
scrollToSegment($(this).attr("data-href"));
//scrollToSegment("#s-7"); //temp
});
//Segment size
$(window).bind("smartresize", function() {
//Dimensions
appvars.viewportHeight = $(window).height() + appvars.viewportHeightExtra;
appvars.viewportWidth = $(window).width();
appvars.documentHeight = $(document).height();
//Set image quality - TODO:Optimise
var quality = "high";
if (appvars.viewportWidth < 401) {
quality = "low";
} //images 400px wide
else if (appvars.viewportWidth < 641) {
quality = "medium";
} //images 720px wide
else if (appvars.viewportWidth < 1025) {
quality = "high";
} //images 1110px wide
else if (appvars.viewportWidth > 1430) {
quality = "highest";
} //images 1920px wide
appvars.imageQuality = quality;
//Resize viewport
$(".segment").css("height", appvars.viewportHeight);
//Scroll to current segment
scrollToSegment("#" + $(".segment.current").attr("id"));
}).trigger("smartresize"); //Segment size
//Tweak typography
$(".segment .year").lettering();
//$(".main .segment .stats li").fitText(1, { minFontSize: '12px', maxFontSize: '18px' });
//Video scaling
$(".video-player").fitVids();
$(".fluid-width-video-wrapper");
//Toggle video button
$(".video-player .toggle, .video-player .start").live("click", function() {
$(this).parent(".video-player").toggleClass("emphasis");
});
//audio
$(".audio-player").each(function() {
var src = $(this).attr("href");
src = src.replace("mp3", "");
$(this).jPlayer({
ready: function(event) {
$(this).jPlayer("setMedia", {
mp3: src + "mp3",
oga: src + "ogg"
});
},
swfPath: "http://static.rememberthewar.com/scripts/swf",
supplied: "mp3, oga"
}).bind($.jPlayer.event.play, function() {
$(this).jPlayer("pauseOthers");
}).bind($.jPlayer.event.pause, function() {
//$(this).jPlayer("stop");
});
$(this).bind("click", function() {
if ($(this).hasClass("playing")) {
$(this).jPlayer("pause");
} else {
$(this).jPlayer("play");
}
$(this).toggleClass("playing").attr("href", "javascript:void(0);").removeAttr("target");
});
}).addClass("enabled paused").removeAttr("style"); //remove jPlayer's hiding
//Timelines
$(".sidetab .handle").click(function() {
$(this).parent(".sidetab").toggleClass("open");
});
/** Functions *************************************/
function preloadFinished() {
setTimeout(function() {
//Show button
$(appvars.welcomeSegment + " .begin").removeClass("ir").attr("href", "javascript:void(0);").find("#loading").appendTo("body").hide();
console.log("hide preloader");
$(appvars.welcomeSegment + " .journey").text(appvars.journeyText);
appvars.preloaded = true;
}, 1400);
}
function changeSegment(id) {
var content = (id + " .content");
console.log(id + ":changeSegment");
$(".segment.current").css("height", appvars.viewportHeight);
$(".segment").removeClass("current");
$(id).removeClass("inactive").addClass("current").find(".nav").delay(1000).fadeIn(1400);
$(id + " .overlay").addClass("hide");
setTimeout(function() {
$(id + " .overlay").remove();
var h = $(content).height();
$(content).css("height", $(content).height()) //computed height
.animate({
height: appvars.viewportHeight //viewport height
}, 400, function() {
$(this).parent(".segment").addClass("phase-2");
setTimeout(function() {
//scrollbars on content panels
if (!$(content).hasClass("has-scrollbars")) {
$(content).niceScroll({
touchbehavior: true,
cursorcolor: '#ffffff',
cursorborder: '0',
cursoropacitymax: .8
});
$(content).addClass("has-scrollbars");
}
}, 1400);
})
}, 1400);
if (id === "#s-1") {
loadSocialMediaButtons();
$("#social").addClass("loaded").removeClass("obscured");
}
}
function getMostVisibleSegment() {
return Math.round($(window).scrollTop() / appvars.viewportHeight);
}
function scrollToSegment(id) { //including hash (#id)
if (appvars.disableScrolling) return;
if (appvars.disableSmoothScrolling) {
changeSegment(id);
return;
}
console.log(id + ":scrollToSegment");
$("body").scrollTo($(id), {
duration: 1200,
easing: appvars.easing,
hash: false,
onAfter: function() {
changeSegment(id);
}
});
if (!appvars.preloaded) {
preloadFinished();
}
}
function loadSocialMediaButtons() {
$("#social").load("/socialmedia.html", function() {
//Loaded Tweet/Like buttons
});
}
}
}
})();
app.init();
/*---------------------------------------
Remember the war
http://www.rememberthewar.com
@replete @harryford
ËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËË
ËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËËË*/
app = (function () {
return {
init: function () {
Modernizr.load([
{
load: [appvars.jsDir + 'app_lib.js'],
complete: function () {
//Start App
$(function () {
app.analytics();
app.featureTests();
if ($("body").hasClass("home")) {
app.setupInterface();
app.loadContent();
}
//app.actions();
//app.featured();
});
//Dev mode
if ($.urlParam('dev') || document.location.hostname.indexOf(".dev") > -1 || document.location.hostname.indexOf("localhost") > -1) {
//Modernizr.load(appvars.jsDir + 'dev/dev.js');
}
}
}
]);
},
analytics: function () {
//GA: Tracker
var _gaq = [['_setAccount', 'UA-26805007-2'], ['_trackPageview']];
(function (d, t) {
var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.async = 1;
g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s)
} (document, 'script'));
//GA: Event Tracking
$("a[href$=pdf]").click(function () {
var name = $(this).attr("title") || "";
_gaq.push(['_trackEvent', 'PDF', 'Download', name]);
});
$("#welcome .begin").click(function () {
_gaq.push(['_trackEvent', 'Actions', 'Button', 'Begin']);
});
$(".start").click(function () {
_gaq.push(['_trackEvent', 'Actions', 'Video', 'Start']);
});
$(".sidetab .handle").click(function () {
_gaq.push(['_trackEvent', 'Actions', 'Timeline', 'Click']);
});
$(".nav.next").click(function () {
_gaq.push(['_trackEvent', 'Actions', 'Navigation', 'Next slide']);
});
$(".nav.prev").click(function () {
_gaq.push(['_trackEvent', 'Actions', 'Navigation', 'Previous slide']);
});
$(".authors a").click(function () {
_gaq.push(['_trackEvent', 'Actions', 'Social Media', 'Authors']);
});
$(".facebook").click(function () {
_gaq.push(['_trackEvent', 'Actions', 'Social Media', 'Facebook']);
});
$(".twitter").click(function () {
_gaq.push(['_trackEvent', 'Actions', 'Social Media', 'Twitter']);
});
$(".sponsor").click(function () {
_gaq.push(['_trackEvent', 'Actions', 'Sponsors', $(this).attr("title")]);
});
$(".donators a").click(function () {
_gaq.push(['_trackEvent', 'Actions', 'Donators', $(this).text()]);
});
console.log("an");
},
featureTests: function () {
appvars.viewportHeightExtra = 0;
if (Modernizr.iphone || Modernizr.ipad) {
var iosLoc = "http://rememberthewar.com/ios.html";
if (window.location != iosLoc) {
window.location = iosLoc;
}
appvars.isMobileSafari = true;
appvars.viewportHeightExtra = 60;
}
if (!Modernizr.textshadow && $.browser.msie) {
Modernizr.load([
{
load: [appvars.jsDir + 'polyfill/jquery.textshadow.js'],
complete: function () {
$(".full-content .title.primary, .full-content .title").textshadow({ useStyle: true });
$(".ie9 #welcome .title").textshadow({ useStyle: true });
}
}
]);
}
},
loadContent: function () {
//Preload segments
$(".segment.not-loaded").each(function (i) {
var imgSrc = $(this).attr("data-image-src"),
imgCaption = $(this).find("figcaption").text(),
currentSegment = this,
currentSegmentId = $(this).attr("id"),
stretchOptions = {};
//Set appropriate image size
imgSrc = imgSrc.replace("res", appvars.imageQuality);
//Image dimensions
switch (appvars.imageQuality) {
case "low":
stretchOptions = { width: 400, height: 276 };
break
case "medium":
stretchOptions = { width: 720, height: 496 };
break
case "high":
stretchOptions = { width: 1110, height: 765 };
break
case "highest":
stretchOptions = { width: 1920, height: 1323 };
break
default:
stretchOptions = { width: 400, height: 276 };
break
}
stretchOptions.id = currentSegmentId + "-img";
//Load segment image
$("<img/>")
.addClass("bg")
.attr("src", imgSrc)
.attr("alt", imgCaption)
.attr("id", currentSegmentId + "-img")
.load(function () {
//Attach loaded image to page
$(currentSegment)
.removeClass("not-loaded")
.find("figure")
.prepend($(this));
//Bind stretch image event
$(window).bind("resize", function () {
stretchImage(stretchOptions);
}).trigger("resize");
//Update navigation
$("[role=navigation] a[href='#" + currentSegmentId + "']")
.parent(".not-loaded")
.removeClass("not-loaded");
}); //.load
}); //.each .segment.not-loaded
function stretchImage(options) {
// Set bg size
var elem = $("#" + options.id),
w = $(window),
ratio = options.height / options.width,
// Get browser window size
browserwidth = w.width(),
browserheight = w.height();
// Scale the image
if ((browserheight / browserwidth) > ratio) {
elem.height(browserheight)
.width(browserheight / ratio);
} else {
elem.width(browserwidth)
.height(browserwidth * ratio);
}
// Center the image
elem
.css('left', (browserwidth - elem.width()) / 2)
.css('top', (browserheight - elem.height()) / 2);
} //stretchImage
},
setupInterface: function () {
appvars.easing = 'easeInOutExpo',
appvars.triggeredScroll = false,
appvars.segmentPrefix = "s-",
appvars.welcomeSegment = "#" + $(".segment:first").attr("id");
//Show preloading status
appvars.journeyText = "Begin the journey in",
appvars.journeyHref = $(appvars.welcomeSegment + " .begin").attr("href");
//Setup Spinner
var opts = {
lines: 14,
length: 4,
width: 3,
radius: 11,
color: '#fff',
speed: 0.8, // Rounds per second
trail: 80,
shadow: false
};
$("#loading").spin(opts);
//Show spinner
$("#loading")
.appendTo(appvars.welcomeSegment + " .begin .year")
.removeClass("hidden");
console.log("preloading stuff");
//Initial scrolling
if (window.location.hash) {
appvars.triggeredScroll = true; //kludge: stop excessive event firing
console.log("+++ triggeredScroll: true");
}
if ($(window).scrollTop() >= 0 && !window.location.hash) {
//Page loaded without hash but not showing at the very top
}
//Mobile Safari
if (Modernizr.iphone) {
$(function () {
//Hide address bar
setTimeout(function () {
window.scrollTo(0, 1);
}, 0);
});
}
//Welcome segment
$(appvars.welcomeSegment).removeClass("init");
//Change navigation links
$(".segment .prev, .segment .next, .begin").each(function () {
$(this)
.attr("data-href", $(this).attr("href"))
.attr("href", "javascript:void(0);");
});
//Bind navigation events
$(".segment .prev, .segment .next, .begin")
.live("click", function () {
if ($(this).hasClass("begin")) {
//Start of journey
$("[role=main],[role=contentinfo]").removeClass("init");
$(appvars.welcomeSegment).css("height", appvars.viewportHeight);
}
console.log("---clicked a link");
appvars.triggeredScroll = true;
console.log("+++ triggeredScroll: true (clicked)");
scrollToSegment($(this).attr("data-href"));
//scrollToSegment("#s-7"); //temp
});
//Segment size
$(window).bind("smartresize", function () {
//Dimensions
appvars.viewportHeight = $(window).height() + appvars.viewportHeightExtra;
appvars.viewportWidth = $(window).width();
appvars.documentHeight = $(document).height();
//Set image quality - TODO:Optimise
var quality = "high";
if (appvars.viewportWidth < 401) { quality = "low"; } //images 400px wide
else if (appvars.viewportWidth < 641) { quality = "medium"; } //images 720px wide
else if (appvars.viewportWidth < 1025) { quality = "high"; } //images 1110px wide
else if (appvars.viewportWidth > 1430) { quality = "highest"; } //images 1920px wide
appvars.imageQuality = quality;
//Resize viewport
$(".segment")
.css("height", appvars.viewportHeight);
//Scroll to current segment
scrollToSegment("#" + $(".segment.current").attr("id"));
}).trigger("smartresize"); //Segment size
//Tweak typography
$(".segment .year").lettering();
//$(".main .segment .stats li").fitText(1, { minFontSize: '12px', maxFontSize: '18px' });
//Video scaling
$(".video-player").fitVids();
$(".fluid-width-video-wrapper");
//Toggle video button
$(".video-player .toggle, .video-player .start")
.live("click", function () {
$(this)
.parent(".video-player")
.toggleClass("emphasis");
});
//audio
$(".audio-player")
.each(function () {
var src = $(this).attr("href");
src = src.replace("mp3", "");
$(this).jPlayer({
ready: function (event) {
$(this).jPlayer("setMedia", {
mp3: src + "mp3",
oga: src + "ogg"
});
},
swfPath: "http://static.rememberthewar.com/scripts/swf",
supplied: "mp3, oga"
})
.bind($.jPlayer.event.play, function () {
$(this).jPlayer("pauseOthers");
})
.bind($.jPlayer.event.pause, function () {
//$(this).jPlayer("stop");
});
$(this).bind("click", function () {
if ($(this).hasClass("playing")) {
$(this).jPlayer("pause");
} else {
$(this).jPlayer("play");
}
$(this)
.toggleClass("playing")
.attr("href", "javascript:void(0);")
.removeAttr("target");
});
})
.addClass("enabled paused")
.removeAttr("style"); //remove jPlayer's hiding
//Timelines
$(".sidetab .handle").click(function () {
$(this)
.parent(".sidetab")
.toggleClass("open");
});
/** Functions *************************************/
function preloadFinished() {
setTimeout(function () {
//Show button
$(appvars.welcomeSegment + " .begin")
.removeClass("ir")
.attr("href", "javascript:void(0);")
.find("#loading")
.appendTo("body")
.hide();
console.log("hide preloader");
$(appvars.welcomeSegment + " .journey")
.text(appvars.journeyText);
appvars.preloaded = true;
}, 1400);
}
function changeSegment(id) {
var content = (id + " .content");
console.log(id + ":changeSegment");
$(".segment.current").css("height", appvars.viewportHeight);
$(".segment").removeClass("current");
$(id)
.removeClass("inactive")
.addClass("current")
.find(".nav")
.delay(1000)
.fadeIn(1400);
$(id + " .overlay")
.addClass("hide");
setTimeout(function () {
$(id + " .overlay").remove();
var h = $(content).height();
$(content)
.css("height", $(content).height()) //computed height
.animate({
height: appvars.viewportHeight //viewport height
}, 400, function () {
$(this)
.parent(".segment")
.addClass("phase-2");
setTimeout(function () {
//scrollbars on content panels
if (!$(content).hasClass("has-scrollbars")) {
$(content).niceScroll({
touchbehavior: true,
cursorcolor: '#ffffff',
cursorborder: '0',
cursoropacitymax: .8
});
$(content).addClass("has-scrollbars");
}
}, 1400);
})
}, 1400);
if (id === "#s-1") {
loadSocialMediaButtons();
$("#social")
.addClass("loaded")
.removeClass("obscured");
}
}
function getMostVisibleSegment() {
return Math.round($(window).scrollTop() / appvars.viewportHeight);
}
function scrollToSegment(id) {//including hash (#id)
if (appvars.disableScrolling) return;
if (appvars.disableSmoothScrolling) {
changeSegment(id);
return;
}
console.log(id + ":scrollToSegment");
$("body").scrollTo($(id), {
duration: 1200,
easing: appvars.easing,
hash: false,
onAfter: function () {
changeSegment(id);
}
});
if (!appvars.preloaded) {
preloadFinished();
}
}
function loadSocialMediaButtons() {
$("#social").load("/socialmedia.html", function () {
//Loaded Tweet/Like buttons
});
}
}
}
})();
app.init();
