Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A config file for the location layer of http://middle-earth.thehobbit.com/trollshaw
'use strict';
var LocationBase = require('../location-base'),
Buckets = require('./../buckets/index.js'),
detector = require('../../utils/detector'),
CanvasSequence = require('../../utils/canvas-sequence'),
BucketComponents = require('./../buckets/components/index.js');
var useSmallImage = detector.isMobile&&!detector.isTablet;
/**
* Module dependencies.
*/
module.exports = LocationBase.extend({
id: 'locTrollshaw',
locationCopyId:'1.3.1.1 (Location)',
titleTextCopyId:'1.3.1.2',
experienceNeedsWebGL:true,
dataToLoad: {
basePath: '/assets/images/loc-trollshaw/',
assets: [
//'loc-trollshaw-sword.jpg',
'../trash.png',
'../flare.png',
'troll-parallax-fg.png',
'troll-parallax-bg.jpg',
'bilbo-parallax-bg.jpg',
'bilbo-parallax-fg.png',
'trollshaw-ending-bg.jpg',
'trollshaw-ending-fg.png',
'../popup-bg.jpg',
],
mobile: [
'bilbo-parallax-bg-small.jpg',
'bilbo-parallax-fg-small.png',
],
desktop: [
'bilbo-parallax-bg.jpg',
'bilbo-parallax-fg.png',
'trollshaw-title-0.jpg',
'trollshaw-title-1.jpg',
],
//is also extended in super-class
preloaderDesktop: [],
preloaderMobile: [],
},
sprites: {
title: CanvasSequence({
totalFrames:2*16
})
},
init: function() {
this._super("init");
/*
* Title bucket created in super-class since it's the same for all locations
*/
var text1 = new Buckets.text({
$parentEl: this.$('#locTrollshaw-timeline'),
content: '<p class="frame-content-text-header">' + window.translations['1.3.1.1 (Location)'] + '</p><p>'+ window.translations['1.3.3 - Description'] + '</p>',
viewportWidth: 450,
viewportHeight: 400,
width:450,
height:400
});
var trollParallax = new Buckets.parallax( {
$parentEl: this.$('#locTrollshaw-timeline'),
content: [
{el: this.get('troll-parallax-bg.jpg'),fromX: 0,toX: -240},
{el: this.get('troll-parallax-fg.png'),fromX: 440,toX: 120, align:'bottom'},
{el: this.get('../flare.png').cloneNode(),flicker:true,fillViewport:true, fromX:0 ,toX:0 },
],
viewportWidth: 640,
viewportHeight: 400,
width:640,
height:400,
duration:0,
isFullscreen:detector.isMobile
});
if( detector.isDesktop || detector.isTablet && (this._size.y > 700 && this._size.x > 700)) {
trollParallax.addComponent( new BucketComponents.dragtext({
content:{
button: window.translations['1.3.4 - Title'],
header:'',
brod: window.translations['1.3.5 - Description']
},
dmafEvent:'trollshaw_sl_troll_info',
x:"3%",
y:0.95,
width:480,
onClick: function(){},
onIconOver: this.onIconOver,
onIconOut: this.onIconOut
}));
}
else {
trollParallax.addComponent(
new BucketComponents.hotspotinfo({
type:'icon',
icon:'hotspotInfo',
dmafEvent:'trollshaw_sl_troll_info',
targetSelector:'.frame-inner',
from:{x:0.75,y:0.7, progress:0},
to:{x:0,y:0.7, progress:1},
content:{center:{x:0.5,y:0.5},
header:window.translations['1.3.4 - Title'],text:window.translations['1.3.5 - Description']},
onClick:this.onIconClick,
onIconOver:this.onIconOver,
onIconOut:this.onIconOut
})
);
}
var header = window.translations['1.3.6 - Title'];
var longDesc = window.translations['1.3.7 - Description'];
var bgAsset = detector.isMobile?this.get('bilbo-parallax-bg-small.jpg'):this.get('bilbo-parallax-bg.jpg');
var fgAsset = detector.isMobile?this.get('bilbo-parallax-fg-small.png'):this.get('bilbo-parallax-fg.png');
var initScale = detector.isMobile?1:0.5;
var bilboParallax = new Buckets.parallax( {
$parentEl: this.$('#locTrollshaw-timeline'),
content: [
{el: bgAsset, defaultScale:initScale,fromX: -280,toX: 280},
{el: fgAsset, defaultScale:initScale,align:'bottom',fromX: 0,toX: 250},
{el: this.get('../flare.png'),defaultScale:1,flicker:false,fromX:-200 ,toX:200, fillViewport:true }
],
viewportWidth: 640,
viewportHeight: 400,
width:640,
height:400,
isFullscreen:false,
dmafTrigger:{id:"trollshaw_sl_bilbo",progress:0.5}
});
var iconX,iconY;
if( detector.isMobile && !detector.isTablet ) {
iconX = 0.6;
iconY = 0.5;
}
else {
iconX = 0.5;
iconY = 0.7;
}
var comp = bilboParallax.addComponent(
new BucketComponents.hotspotinfo({
targetSelector:'.frame-inner',
icon:'hotspotMale',
headerUnderIcon:true,
from:{x:iconX,y:iconY, progress:0},
to:{x:iconX,y:iconY, progress:1},
center:{x:0.5,y:0.5},
content:{
header:header,
text:longDesc},
onClick:this.onIconClick,
onIconOver:this.onIconOver,
onIconOut:this.onIconOut
})
);
comp.header[0].style.width = "300px";
var end = new Buckets.parallax( {
$parentEl: this.$('#locTrollshaw-timeline'),
content: [
{el: this.get('trollshaw-ending-bg.jpg'),fromX: 0,toX: 0},
{el: this.get('trollshaw-ending-fg.png'),align:'bottom',fromX: 300,toX: 192},
],
viewportWidth: 1280,
viewportHeight: 800,
width:1280,
height:800,
duration:0,
isFullscreen:true
});
comp = end.addComponent(
new BucketComponents.ending({
targetSelector:'.frame-inner',
dmafEvent:"trollshaw_sl_last_bucket",
needsWebGL:true,
content:{
headerClass:'location-ending-trollshaw',
width:607,
height:91,
loc:this.titleComponent.content.loc
},
onLearnClick:this.onIconClick,
onClick:this.startExperience,
onIconOver:this.onIconOver,
onIconOut:this.onIconOut
})
);
//set order
this.modules.push(
trollParallax,
text1,
bilboParallax,
end
);
this.postInit();
},
dispose: function(){
LocationBase.prototype.dispose.call(this);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment