Skip to content

Instantly share code, notes, and snippets.

@andrewkolesnikov
Created May 24, 2012 15:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save andrewkolesnikov/2782243 to your computer and use it in GitHub Desktop.
Save andrewkolesnikov/2782243 to your computer and use it in GitHub Desktop.
Luminarc.prototype = {
init: function() {
var currentElement;
var isPlayed = false;
initLoop();
slideTo("#luminarc-container", "#luminarc-intro", true);
$("#luminarc-launch").unbind().bind("click touchstart",
function(event) {
event.stopPropagation();
event.preventDefault();
var isiPad = navigator.userAgent.match(/iPad/i) != null;
var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
if (isiPad == true || isiPhone == true) {
window.open("http://www.blacknegative.com/uploads/section/luminarc/video.mp4");
}
else {
initVideo();
playVideo();
slideTo("#luminarc-container", "#luminarc-placeholder", false);
}
});
$("#luminarc-placeholder").unbind().bind("click touchstart",
function() {
event.stopPropagation();
event.preventDefault();
slideTo("#luminarc-container", "#luminarc-intro", false);
});
$("#luminarc-back").unbind().click(function() {
slideTo("#luminarc-container", "#luminarc-intro", false);
});
function initLoop() {
dispatch.app.video.init("luminarc-loop-video", "uploads/section/luminarc/loop", 7.6, 556, 992);
}
function initVideo() {
jwplayer("luminarc-video").setup({
autostart: false,
controlbar: "none",
stretching: "uniform",
width: "100%",
wmode: "opaque",
height: '100%',
flashplayer: "swf/player.swf",
icons: false,
levels: [{
file: "uploads/section/luminarc/video.mp4"
},
{
file: "uploads/section/luminarc/video.webm"
},
{
file: "uploads/section/luminarc/video.ogv"
}],
modes: [{
type: "html5"
},
{
type: "flash",
src: "swf/player.swf"
}],
events: {
onComplete: function() {
jwplayer("luminarc-video").stop();
slideTo("#luminarc-container", "#luminarc-intro", false);
}
}
});
}
function stopVideo() {
dispatch.playSoundSlide();
jwplayer("luminarc-video").stop(true);
}
function playVideo() {
dispatch.stopSound();
jwplayer("luminarc-video").play(true);
}
function slideTo(container, element, resize) {
currentElement = element;
$w = $(window);
var height = $w.height();
var width = $w.width();
var containerPosition = $(container).position();
var elementPosition = $(element).position();
if (resize == true) {
$(container).css({
top: -elementPosition.top
});
}
else {
if (element == "#luminarc-placeholder") {
playVideo();
$("#nav").hide();
}
else {
stopVideo();
$("#nav").show();
}
if (Modernizr.csstransforms && Modernizr.csstransitions) {
$(container).stop().transition({
top: -elementPosition.top
},
1000, "out");
}
else {
$(container).tween({
top: {
start: containerPosition.top,
stop: -elementPosition.top,
time: 0,
duration: 1,
effect: 'easeOut'
}
});
$.play();
}
}
}
$(window).bind("resize",
function() {
slideTo("#luminarc-container", currentElement, true);
});
},
stop: function() {
dispatch.app.video.remove("luminarc-loop-video");
jwplayer("luminarc-video").stop();
jwplayer("luminarc-video").remove();
}
};
var luminarc = new Luminarc();
;
function Class() {
var someManagedAjax = null;
var app = $.sammy();
var currentPosition = 0;
var trash = [];
app.activeSound = true;
app.soundHome = null;
app.soundSlide = null;
app.soundType = 0;
app.currentPage = null;
app.lastPage = null;
app.vignetteList = [];
app.pageManager = [];
app.lastVignette = 0;
app.skipTransition = false;
app.isDragged = false;
app.video = new Video();
app.pageManager["loader"] = loader;
app.pageManager["ralphlauren"] = ralphlauren;
app.pageManager["bose"] = bose;
app.pageManager["news"] = news;
app.pageManager["bullittagency"] = bullittagency;
app.pageManager["adisseo"] = adisseo;
app.pageManager["whoweare"] = whoweare;
app.pageManager["kindy"] = kindy;
app.pageManager["sanofi"] = sanofi;
app.pageManager["twist"] = twist;
app.pageManager["citroen"] = citroen;
app.pageManager["client"] = client;
app.pageManager["contact"] = contact;
app.pageManager["ownthesky"] = ownthesky;
app.pageManager["luminarc"] = luminarc;
app.currentLeft = 0;
if ($.browser.msie || $.browser.mozilla) {
app.activeSound = false;
}
var isiPad = navigator.userAgent.match(/iPad/i) != null;
var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
app.isiPad = isiPad;
if (isiPhone == true) app.isiPad = true;
}
Class.prototype = {
init: function() {
var self = this;
$w = $(window);
self.HEIGHT = $w.height();
self.WIDTH = $w.width();
self.menuOpen = false;
self.nav = $("#nav");
self.logo = $("#logo");
self.social = $("#social");
self.credit = $("#credit");
self.navContainer = $("#nav-container");
self.maskMenu = $("#mask-menu");
self.maskHover = $("#mask-hover");
self.maskNav = $("#mask-nav");
self.main = $("#main");
self.modules = $("#module-navigator > #handler > div");
self.home = $("#home");
self.handler = $("#handler");
self.currentElement = null;
self.app = $.sammy(function() {
this.get('#!/home/',
function() {
dispatch.run("home", "home");
});
this.get('#!/:controlleur/',
function() {
dispatch.run(this.params['controlleur'], this.params['controlleur']);
});
return false;
});
dispatch.initHome();
dispatch.initDrag();
dispatch.initSound();
dispatch.adjustSize();
$("#social-twitter").click(function() {
window.open("http://twitter.com/share?text=blacknegative&url=http%3A%2F%2Fwww.blacknegative.com", "Share", config = "height=350, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no");
return false;
});
$("#social-facebook").click(function() {
window.open("http://www.facebook.com/sharer.php?u=http://www.blacknegative.com", "Share", config = "height=350, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no");
return false;
});
$.preload(["skins/blacknegative/images/loader-bg.png"], {
onFinish: function() {
dispatch.app.run("#!/loader/");
}
});
},
initSound: function() {
if (dispatch.app.isiPad) {
return false;
}
var _this = this;
_this.app.soundSlide = new buzz.sound("uploads/sound/home", {
formats: ["ogg", "mp3"],
preload: true,
loop: true,
autoplay: false
});
_this.app.soundNav = new buzz.sound("uploads/sound/slide", {
formats: ["ogg", "mp3"],
preload: true,
loop: true,
autoplay: false
});
$("#sound-control").click(function() {
if ($(this).hasClass("unable")) {
_this.app.soundSlide.unmute();
_this.app.soundNav.unmute();
$(this).removeClass("unable");
$(this).find("img").attr("src", "skins/blacknegative/images/home/sound.png");
}
else {
_this.app.soundSlide.mute();
_this.app.soundNav.mute();
$(this).addClass("unable");
$(this).find("img").attr("src", "skins/blacknegative/images/home/home-close.png");
}
});
},
playSoundNav: function() {
if (dispatch.app.isiPad || dispatch.app.activeSound != true) {
return false;
}
if (dispatch.app.soundType != 2) {
dispatch.app.soundNav.fadeIn(1000);
dispatch.app.soundSlide.fadeOut(1000);
dispatch.app.soundType = 2;
}
},
playSoundSlide: function() {
if (dispatch.app.isiPad || dispatch.app.activeSound != true) {
return false;
}
if (dispatch.app.soundType != 1) {
dispatch.app.soundType = 1;
dispatch.app.soundSlide.fadeIn(1000);
dispatch.app.soundNav.fadeOut(1000);
}
},
pauseSoundSlide: function() {
if (dispatch.app.isiPad || dispatch.app.activeSound != true) {
return false;
}
dispatch.app.soundType = 0;
dispatch.app.soundSlide.fadeOut(1000);
},
stopSound: function() {
if (dispatch.app.isiPad || dispatch.app.activeSound != true) {
return false;
}
dispatch.app.soundType = 0;
dispatch.app.soundSlide.fadeOut(1000);
dispatch.app.soundNav.fadeOut(1000);
},
initDrag: function() {
var self = this;
if (!dispatch.currentPosition) dispatch.currentPosition = 0;
var nbItem = $("#handler > div").size();
var items = [];
$("#handler > div").each(function() {
items.push({
element: $(this),
id: $(this).attr("id")
});
});
$('#handler').draggable({
axis: 'x',
cursor: 'move',
start: function(event) {
event.stopPropagation();
dispatch.app.isDragged = true;
},
stop: function(event, ui) {
event.stopPropagation();
dispatch.app.isDragged = false;
var offsetXPos = parseInt(ui.offset.left) * -1;
var updatedPosition;
if (offsetXPos > (((self.currentIndex) * self.WIDTH) + (self.WIDTH * 0.2)) && self.currentIndex + 1 < nbItem) {
updatedPosition = self.currentIndex + 1;
window.location.href = "#!/" + items[updatedPosition].id + "/";
}
else if (offsetXPos < (((self.currentIndex) * self.WIDTH) - (self.WIDTH * 0.2)) && self.currentIndex > 1) {
updatedPosition = self.currentIndex - 1;
window.location.href = "#!/" + items[updatedPosition].id + "/";
}
else {
dispatch.slideTo(items[self.currentIndex].id, false);
}
}
});
},
run: function(page, container, callback) {
_gaq.push(['_trackPageview', page]);
var self = this;
self.currentElement = $("#" + page);
$(window).unbind("resize");
dispatch.displayMenu(container);
if (page != "home") {
var prev = self.currentElement.prev().find("> div");
var next = self.currentElement.next().find("> div");
var nextAll = self.currentElement.next().nextAll().find("> div");
var prevAll = self.currentElement.prev().prevAll().find("> div");
var current = self.currentElement.find("> div");
prev.show();
next.show();
nextAll.hide();
prevAll.hide();
current.show();
self.navContainer.addClass("off");
self.navContainer.css({
height: 32
});
self.maskMenu.css({
bottom: 14
});
self.logo.css({
bottom: -20,
opacity: 0
});
self.social.css({
bottom: -20,
opacity: 0
});
}
else {
self.logo.css({
bottom: 17,
opacity: 1
});
self.social.css({
bottom: 23,
opacity: 1
});
self.navContainer.css({
height: 63
});
self.maskNav.css({
bottom: -34
});
self.maskHover.css({
bottom: -43
});
self.maskMenu.css({
bottom: -24,
opacity: 1
});
self.navContainer.removeClass("off");
}
$(window).bind("resize",
function() {
$w = $(window);
self.HEIGHT = $w.height();
self.WIDTH = $w.width();
dispatch.app.pageManager["bullittagency"].preview();
$("#home-back-container").css({
"padding-top": $(".navigator-item").size() * 135 + self.HEIGHT + 150,
"padding-bottom": $(".navigator-item").size() * 135 + self.HEIGHT,
backgroundPositionX: self.WIDTH,
backgroundPositionY: self.HEIGHT + 48
});
dispatch.slideTo(container, true, true);
dispatch.slidePage(dispatch.app.lastVignette, 0);
dispatch.adjustSize();
});
dispatch.slideTo(container, false, dispatch.app.skipTransition);
dispatch.app.skipTransition = false;
},
adjustSize: function() {
var self = this;
self.main.removeClass("one two three four five six seven");
if (self.HEIGHT < 720 && self.WIDTH < 1280) {
self.main.addClass("one");
}
else if (self.HEIGHT < 810 && self.WIDTH < 1440) {
self.main.addClass("two");
}
else if (self.HEIGHT < 900 && self.WIDTH < 1600) {
self.main.addClass("three");
}
else if (self.HEIGHT < 1012 && self.WIDTH < 1800) {
self.main.addClass("four");
}
else if (self.HEIGHT < 1152 && self.WIDTH < 2048) {
self.main.addClass("five");
}
else if (self.HEIGHT < 1440 && self.WIDTH < 2560) {
self.main.addClass("six");
}
else if (self.HEIGHT < 1600 && self.WIDTH < 2844) {
self.main.addClass("seven");
}
},
initHome: function() {
var self = this;
dispatch.app.pageManager["bullittagency"].preview();
dispatch.app.pageManager["ralphlauren"].preview();
dispatch.app.pageManager["twist"].preview();
dispatch.app.pageManager["sanofi"].preview();
dispatch.app.pageManager["news"].preview();
$(".home-back-item-transition", $("#home-back-container")).each(function() {
var _this = $(this)[0];
var spriteIn = new Blitter({
width: 241,
height: 241,
resource: "skins/blacknegative/images/home/sprite.png",
frameRate: 60,
frameNumber: 26,
delay: 0,
loop: false,
autoplay: false,
target: _this
});
dispatch.app.vignetteList.push(spriteIn);
});
var currentSlide = 0;
var nbItem = $(".navigator-item").size();
dispatch.slidePage(0, 0);
$("#home-back-container").css({
"padding-top": nbItem * 135 + self.HEIGHT + 150,
"padding-bottom": nbItem * 135 + self.HEIGHT,
backgroundPositionX: self.WIDTH,
backgroundPositionY: self.HEIGHT + 48
});
if (!dispatch.app.isiPad) {
$("#nav-container").bind("mouseenter",
function() {
if (dispatch.app.currentPage != "home") {
self.maskHover.show();
EKTweener.to(self.maskHover[0], .4, {
bottom: 0
});
}
});
$("#nav-container").mouseleave(function() {
EKTweener.to(self.maskHover[0], .4, {
bottom: -34,
onComplete: function() {
self.maskHover.hide();
}
});
});
$("#navigator-drag, #main-home").click(function() {
self.maskHover.show();
EKTweener.to(self.maskHover[0], .4, {
bottom: 0
});
EKTweener.to($("#nav-container")[0], .4, {
height: 32,
onComplete: function() {}
});
dispatch.app.skipTransition = true;
window.location.href = "#!/" + $("#handler > div").eq(currentSlide).attr("id") + "/";
});
}
$("#mask-hover, #mask-menu").bind("click",
function() {
window.location = '#!/home/';
});
$("#nav-container").bind("touchstart",
function() {
window.location = '#!/home/';
});
$(".navigator-item").bind("mouseenter touchstart",
function() {
var duration = (self.menuOpen == false ? 0: 1200);
var index = $(this).index(".navigator-item");
currentSlide = index + 1;
EKTweener.to($("#navigator-drag")[0], .6, {
left: 30 * (index)
});
dispatch.slidePage(index, duration);
});
$("a.ajax").each(function() {
$(this).attr("href", "#!/" + $(this).attr('href')).removeClass("ajax");
});
},
displayMenu: function(container) {
var self = this;
if (container == "home") {
self.nav.show();
self.logo.show();
self.social.show();
self.credit.show();
}
else if (container == "loader") {
self.credit.hide();
self.nav.hide();
}
else {
self.credit.hide();
self.nav.show();
}
},
slidePage: function(currentPosition, timing) {
var self = this;
$(".home-front-item.selected").removeClass("selected");
$(".home-front-item").eq(currentPosition).addClass("selected");
var itemSelected = $(".home-back-item.selected");
if (dispatch.app.vignetteList[dispatch.app.lastVignette]) dispatch.app.vignetteList[dispatch.app.lastVignette].gotoAndStop(0);
if (dispatch.app.vignetteList[currentPosition]) dispatch.app.vignetteList[currentPosition].play();
dispatch.app.lastVignette = currentPosition;
itemSelected.removeClass("selected");
$(".home-back-item").eq(currentPosition).addClass("selected");
if (timing == 0) {
$("#home-back-container").css({
top: -($(".navigator-item").size() * 135 + self.HEIGHT / 2 + 250 + (135 * ($(".navigator-item").size() - currentPosition)) - 200),
left: -(135 * currentPosition - (self.WIDTH / 2)) - self.WIDTH
});
$("#home-front-container").css({
left: -(470 * currentPosition) + (self.WIDTH / 2) - 235
});
}
else {
var backBackground = $(".home-back-item").eq(currentPosition).find(".home-back-item-background");
var backContainer = $("#home-back-container");
var frontContainer = $("#home-front-container");
var backTop = ($(".navigator-item").size() * 135 + self.HEIGHT / 2 + 250 + (135 * ($(".navigator-item").size() - currentPosition)) - 200);
EKTweener.to(backBackground[0], .4, {
opacity: 1
});
EKTweener.to(backContainer[0], 1, {
top: -backTop,
left: -(135 * currentPosition - (self.WIDTH / 2)) - self.WIDTH
});
EKTweener.to(frontContainer[0], 1, {
left: -(470 * currentPosition) + (self.WIDTH / 2) - 235
});
}
},
displayVertical: function(verticalPosition) {
self = this;
EKTweener.to(self.main[0], 0.5, {
top: verticalPosition,
ease: "easeOutExpo",
onComplete: function() {
if (verticalPosition < 0) {
self.modules.hide();
self.menuOpen = true;
}
else {
self.home.hide();
self.menuOpen = false;
}
}
});
},
slideTo: function(container, resize, skip) {
var self = this;
self.currentIndex = self.currentElement.index();
self.currentPosition = self.currentIndex * self.WIDTH;
var verticalPosition = (container == "home" ? self.HEIGHT: 0);
var itemSelected = $(".navigator-item.selected");
var currentItem = $(".navigator-item").eq(self.currentIndex - 1);
if (resize == true) {
self.main.css("top", -verticalPosition);
self.handler.css("left", -self.currentPosition);
}
else {
self.modules.show();
self.home.show();
dispatch.app.lastPage = dispatch.app.currentPage;
dispatch.app.currentPage = container;
if (container == "loader") {
dispatch.app.pageManager["loader"].init();
self.handler.css({
left: 0
});
}
else if (container != "home") {
self.menuOpen = false;
itemSelected.removeClass("selected");
currentItem.addClass("selected");
self.maskNav.css({
bottom: 0
});
dispatch.playSoundNav();
if (skip == true) {
self.handler.css({
left: -self.currentPosition
});
if (dispatch.app.currentPage != dispatch.app.lastPage) {
if (dispatch.app.lastPage != null && dispatch.app.currentPage != dispatch.app.lastPage && dispatch.app.lastPage != "home") dispatch.app.pageManager[dispatch.app.lastPage].stop();
dispatch.app.pageManager[dispatch.app.currentPage].init();
}
}
else {
EKTweener.to(self.handler[0], .6, {
left: -self.currentPosition,
onComplete: function() {
if (dispatch.app.currentPage != dispatch.app.lastPage) {
if (dispatch.app.lastPage != null && dispatch.app.currentPage != dispatch.app.lastPage && dispatch.app.lastPage != "home") dispatch.app.pageManager[dispatch.app.lastPage].stop();
dispatch.app.pageManager[dispatch.app.currentPage].init();
}
}
});
}
}
else {
dispatch.playSoundSlide();
self.menuOpen = true;
}
self.displayVertical( - verticalPosition);
}
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment