metamaps--metamaps/public/famous/main.js

395 lines
12 KiB
JavaScript
Raw Normal View History

2014-08-10 23:35:18 +00:00
define(function(require, exports, module) {
Metamaps.Famous = {};
Metamaps.Famous.build = function () {
2014-08-10 23:35:18 +00:00
// import dependencies
var Engine = require('famous/core/Engine');
var Modifier = require('famous/core/Modifier');
var Transform = require('famous/core/Transform');
var Surface = require('famous/core/Surface');
var Timer = require('famous/utilities/Timer');
var Scrollview = require('famous/views/Scrollview');
var ContainerSurface = require('famous/surfaces/ContainerSurface');
var RenderNode = require('famous/core/RenderNode');
2014-08-10 23:35:18 +00:00
var templates = require('templates');
// create the main context
var famous = document.getElementById('famousOverlay');
var f = Metamaps.Famous;
f.mainContext = Engine.createContext(famous);
2014-09-09 22:17:39 +00:00
f.Surface = Surface;
f.Modifier = Modifier;
f.Transform = Transform;
2014-08-10 23:35:18 +00:00
// INFOVIS
f.viz = {};
2014-11-29 15:18:18 +00:00
var instructions = {
addTopic: "Double-click to<br>add a topic!",
tabKey: "Use Tab & Shift+Tab to select a metacode",
enterKey: "Press Enter to add the topic"
};
2014-08-10 23:35:18 +00:00
f.viz.surf = new Surface({
size: [undefined, undefined],
classes: [],
properties: {
2014-11-29 15:18:18 +00:00
display: "none",
zIndex: "1"
}
});
var instrShowing = false;
f.viz.instrSurf = new Surface({
content: instructions.addTopic,
size: [220, 80],
classes: ["doubleClickSurf"],
properties: {
fontFamily: "'din-regular', helvetica, sans-serif",
fontSize: "32px",
display: "none",
textAlign: "center",
color: "#999999",
zIndex: "0"
2014-08-10 23:35:18 +00:00
}
});
var prepare = function () {
f.viz.show();
Metamaps.JIT.prepareVizData();
f.viz.surf.removeListener('deploy',prepare);
};
2014-08-11 22:57:34 +00:00
if (Metamaps.currentSection === "map" || Metamaps.currentSection === "topic") {
2014-08-10 23:35:18 +00:00
f.viz.surf.on('deploy', prepare);
}
f.viz.mod = new Modifier({
origin: [0.5, 0.5],
opacity: 0
});
f.viz.show = function () {
f.viz.surf.setProperties({ "display":"block" });
f.viz.mod.setOpacity(
1,
{ duration: 300 }
);
};
f.viz.hide = function () {
f.viz.mod.setOpacity(
0,
{ duration: 300 },
function() {
f.viz.surf.setProperties({"display": "none"});
}
);
};
2014-11-29 15:18:18 +00:00
f.viz.isInstrShowing = function() {
return instrShowing;
}
f.viz.showInstructions = function() {
instrShowing = true;
f.viz.instrSurf.setProperties({ "display":"block" });
};
f.viz.hideInstructions = function() {
instrShowing = false;
f.viz.instrSurf.setProperties({ "display":"none" });
};
var vizMod = f.mainContext.add(f.viz.mod);
vizMod.add(f.viz.surf);
vizMod.add(f.viz.instrSurf);
2014-08-10 23:35:18 +00:00
// CONTENT / OTHER PAGES
f.yield = {};
f.yield.surf = new Surface({
2014-08-27 02:51:50 +00:00
size: [undefined, undefined],
classes: ['famousYield'],
2014-08-10 23:35:18 +00:00
properties: {
display: 'none'
}
});
var loadYield = function () {
f.loadYield();
f.yield.surf.removeListener('deploy',loadYield);
};
if (!(Metamaps.currentSection === "map" ||
2014-08-11 22:57:34 +00:00
Metamaps.currentSection === "topic" ||
2014-08-10 23:35:18 +00:00
Metamaps.currentSection === "explore" ||
(Metamaps.currentSection === "" && Metamaps.Active.Mapper) )) {
f.yield.surf.on('deploy', loadYield);
}
f.yield.mod = new Modifier({
origin: [0.5, 0.5],
opacity: 0
});
f.yield.show = function () {
f.yield.surf.setProperties({ "display":"block" });
f.yield.mod.setOpacity(
1,
{ duration: 300 }
);
};
f.yield.hide = function () {
f.yield.mod.setOpacity(
0,
{ duration: 300 },
function() {
f.yield.surf.setProperties({"display": "none"});
}
);
};
f.mainContext.add(f.yield.mod).add(f.yield.surf);
f.loadYield = function () {
2014-09-09 22:17:39 +00:00
Metamaps.Loading.hide();
2014-09-16 01:57:34 +00:00
var y = document.getElementById('yield');
var yield = y ? y.innerHTML : false;
2014-08-12 15:09:53 +00:00
if (yield) {
f.yield.surf.setContent(yield);
f.yield.surf.deploy(f.yield.surf._currTarget);
f.yield.show();
2014-09-16 01:57:34 +00:00
y.parentNode.removeChild(y);
2014-08-12 15:09:53 +00:00
}
2014-08-10 23:35:18 +00:00
};
2014-08-12 23:20:46 +00:00
// CONTENT / OTHER PAGES
f.maps = {};
f.maps.surf = new Surface({
size: [undefined, true], // this will get set to a specific height later in order to work
2014-08-12 23:20:46 +00:00
classes: ['mapsWrapper'],
});
var mapsContainer = new ContainerSurface({
size: [undefined, undefined],
2014-08-12 23:20:46 +00:00
properties: {
overflow: 'hidden',
2014-08-12 23:20:46 +00:00
}
});
var loadMaps = function () {
f.loadMaps();
f.maps.surf.removeListener('deploy',loadMaps);
};
if (Metamaps.currentSection === "explore" ||
(Metamaps.currentSection === "" && Metamaps.Active.Mapper)) {
f.maps.surf.on('deploy', loadMaps);
}
f.maps.mod = new Modifier({
origin: [0.5, 0],
opacity: 0,
transform: Transform.translate(window.innerWidth,94,0)
2014-08-12 23:20:46 +00:00
});
f.maps.mod.sizeFrom(function(){
return [window.innerWidth, window.innerHeight - 94];
});
f.maps.show = function () {
// set into the correct position and then fade in
f.maps.mod.setTransform(Transform.translate(0, 94, 0));
2014-08-12 23:20:46 +00:00
f.maps.mod.setOpacity(
1,
{ duration: 300 }
);
};
f.maps.hide = function () {
// fade out and then position it offscreen
2014-08-12 23:20:46 +00:00
f.maps.mod.setOpacity(
0,
{ duration: 300 },
function() {
f.maps.mod.setTransform(Transform.translate(window.innerWidth, 94, 0));
2014-08-12 23:20:46 +00:00
}
);
};
f.maps.reposition = function () {
f.maps.mod.setTransform(Transform.translate(window.innerWidth, 94, 0));
};
var mapsScroll = new Scrollview();
mapsScroll._scroller.on('edgeHit', function(data){
if (data.position > 0 &&
Metamaps.Views &&
Metamaps.Views.exploreMaps &&
Metamaps.Views.exploreMaps.collection &&
Metamaps.Views.exploreMaps.collection.page != "loadedAll") {
Metamaps.Views.exploreMaps.collection.getMaps();
}
});
f.maps.resetScroll = function() {
// set the scrollView back to the top
mapsScroll._physicsEngine.detachAll();
mapsScroll.setVelocity(0);
mapsScroll.setPosition(0);
};
mapsScroll.sequenceFrom([f.maps.surf]);
f.maps.surf.pipe(mapsScroll);
mapsContainer.add(mapsScroll);
var mapsNode = new RenderNode(f.maps.mod);
mapsNode.add(mapsContainer);
f.mainContext.add(mapsNode);
2014-08-12 23:20:46 +00:00
f.loadMaps = function () {
if (Metamaps.currentSection === "explore") {
var capitalize = Metamaps.currentPage.charAt(0).toUpperCase() + Metamaps.currentPage.slice(1);
Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps[capitalize] );
if (Metamaps.currentPage === "mapper") {
Metamaps.Views.exploreMaps.fetchUserThenRender();
}
else {
Metamaps.Views.exploreMaps.render();
}
2014-08-12 23:20:46 +00:00
f.maps.show();
f.explore.set(Metamaps.currentPage, Metamaps.Maps.Mapper.mapperId);
f.explore.show();
2014-08-12 23:20:46 +00:00
}
else if (Metamaps.currentSection === "") {
2014-09-09 22:17:39 +00:00
Metamaps.Loading.hide();
2014-08-12 23:20:46 +00:00
if (Metamaps.Active.Mapper) {
Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps.Active );
2014-08-12 23:20:46 +00:00
Metamaps.Views.exploreMaps.render();
f.maps.show();
f.explore.set('active');
2014-08-12 23:20:46 +00:00
f.explore.show();
}
else f.explore.set('featured');
}
};
2014-08-10 23:35:18 +00:00
// EXPLORE MAPS BAR
f.explore = {};
f.explore.surf = new Surface({
2014-08-12 22:14:04 +00:00
size: [true, 42],
2014-08-10 23:35:18 +00:00
content: templates.mineContent,
2014-08-12 22:14:04 +00:00
classes: ['exploreMapsCenter']
});
f.explore.surfBg = new Surface({
size: [undefined, 94],
content: '<div class="exploreMapsMenu"></div>',
2014-08-10 23:35:18 +00:00
classes: ['exploreMapsBar', 'exploreElement']
});
f.explore.mod = new Modifier({
2014-08-12 22:14:04 +00:00
size: [undefined, 94],
2014-08-10 23:35:18 +00:00
origin: [0.5, 0],
transform: Transform.translate(0, -94, 0)
});
f.explore.show = function () {
f.explore.mod.setTransform(
Transform.translate(0, 0, 0),
{ duration: 300, curve: 'easeOut' }
);
};
f.explore.hide = function () {
f.explore.mod.setTransform(
Transform.translate(0, -94, 0),
{ duration: 300, curve: 'easeIn' }
);
};
f.explore.set = function (section, mapperId) {
2014-08-10 23:35:18 +00:00
var loggedIn = Metamaps.Active.Mapper ? 'Auth' : '';
if (section === "mine" || section === "active" || section === "featured") {
f.explore.surf.setContent(templates[section + loggedIn + 'Content']);
}
else if (section === "mapper") {
var setMapper = function(mapperObj) {
var mapperContent;
mapperContent = "<div class='exploreMapsButton active mapperButton'><img class='exploreMapperImage' width='24' height='24' src='" + mapperObj.image + "' />";
mapperContent += "<div class='exploreMapperName'>" + mapperObj.name + "'s Maps</div><div class='clearfloat'></div></div>";
f.explore.surf.setContent(mapperContent);
};
$.ajax({
url: "/users/" + mapperId + ".json",
success: function (response) {
setMapper(response);
},
error: function () {
}
});
}
2014-08-10 23:35:18 +00:00
};
2014-08-12 22:14:04 +00:00
var exploreMod = f.mainContext.add(f.explore.mod);
exploreMod.add(new Modifier({
size: [undefined, 42],
origin: [0.5, 1]
})).add(new Modifier({
origin: [0.5, 1]
})).add(f.explore.surf);
exploreMod.add(f.explore.surfBg);
2014-08-10 23:35:18 +00:00
// LOGO
f.logo = {};
f.logo.surf = new Surface({
size: [258, 56],
content: templates.logoContent,
2014-08-12 22:14:04 +00:00
classes: ['footer']
2014-08-10 23:35:18 +00:00
});
f.logo.mod = new Modifier({
origin: [0.5, 1],
transform: Transform.translate(0, 56, 0)
});
f.logo.show = function () {
f.logo.mod.setTransform(
Transform.translate(0, 0, 0),
{ duration: 300, curve: 'easeOut' }
);
};
f.logo.hide = function () {
f.logo.mod.setTransform(
Transform.translate(0, 56, 0),
{ duration: 300, curve: 'easeIn' }
);
};
f.mainContext.add(f.logo.mod).add(f.logo.surf);
// TOAST
f.toast = {};
f.toast.surf = new Surface({
size: [true, 42],
content: '',
classes: ['toast']
});
2014-08-11 22:57:34 +00:00
initialToast = function () {
var message = document.getElementById('toast') ? document.getElementById('toast').innerHTML : false;
if (message) {
Metamaps.GlobalUI.notifyUser(message);
f.toast.surf.deploy(f.toast.surf._currTarget);
}
};
f.toast.surf.on('deploy', initialToast);
2014-08-10 23:35:18 +00:00
f.toast.mod = new Modifier({
origin: [0, 1],
opacity: 0,
transform: Transform.translate(24, -24, 0)
});
f.toast.show = function () {
f.toast.mod.setOpacity(
1,
{ duration: 300 }
);
};
f.toast.hide = function () {
f.toast.mod.setOpacity(
0,
{ duration: 300 }
);
};
f.mainContext.add(f.toast.mod).add(f.toast.surf);
2014-09-09 22:17:39 +00:00
// an object for the realtime mapper compasses surfaces
f.compasses = {};
2014-08-10 23:35:18 +00:00
f.logo.show();
}// build
2014-08-10 23:35:18 +00:00
});