define(function(require, exports, module) { Metamaps.Famous = {}; Metamaps.Famous.build = function () { // 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'); var templates = require('templates'); // create the main context var famous = document.getElementById('famousOverlay'); var f = Metamaps.Famous; f.mainContext = Engine.createContext(famous); f.Surface = Surface; f.Modifier = Modifier; f.Transform = Transform; // INFOVIS f.viz = {}; var instructions = { addTopic: "Double-click to
add a topic!", tabKey: "Use Tab & Shift+Tab to select a metacode", enterKey: "Press Enter to add the topic" }; f.viz.surf = new Surface({ size: [undefined, undefined], classes: [], properties: { 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" } }); var prepare = function () { f.viz.show(); Metamaps.JIT.prepareVizData(); f.viz.surf.removeListener('deploy',prepare); }; if (Metamaps.currentSection === "map" || Metamaps.currentSection === "topic") { 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"}); } ); }; 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); // CONTENT / OTHER PAGES f.yield = {}; f.yield.surf = new Surface({ size: [undefined, undefined], classes: ['famousYield'], properties: { display: 'none' } }); var loadYield = function () { f.loadYield(); f.yield.surf.removeListener('deploy',loadYield); }; if (!(Metamaps.currentSection === "map" || Metamaps.currentSection === "topic" || 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 () { Metamaps.Loading.hide(); var y = document.getElementById('yield'); var yield = y ? y.innerHTML : false; if (yield) { f.yield.surf.setContent(yield); f.yield.surf.deploy(f.yield.surf._currTarget); f.yield.show(); y.parentNode.removeChild(y); } }; // 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 classes: ['mapsWrapper'], }); var mapsContainer = new ContainerSurface({ size: [undefined, undefined], properties: { overflow: 'hidden', } }); 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) }); 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)); f.maps.mod.setOpacity( 1, { duration: 300 } ); }; f.maps.hide = function () { // fade out and then position it offscreen f.maps.mod.setOpacity( 0, { duration: 300 }, function() { f.maps.mod.setTransform(Transform.translate(window.innerWidth, 94, 0)); } ); }; f.maps.reposition = function () { f.maps.mod.setTransform(Transform.translate(window.innerWidth, 94, 0)); }; var mapsScroll = new Scrollview(); f.maps.lock = false; mapsScroll._eventInput.on('update', _.throttle(function(data) { var bottom = f.maps.surf.getSize()[1], // how far down it goes pos = mapsScroll.getPosition(), // how far down you are containerSize = f.maps.mod.getSize()[1], // height of the viewable area distanceToBottom = bottom - (pos + containerSize), triggerDistance = 700; if (!f.maps.lock && distanceToBottom < triggerDistance && Metamaps.Views && Metamaps.Views.exploreMaps && Metamaps.Views.exploreMaps.collection && Metamaps.Views.exploreMaps.collection.page != "loadedAll") { f.maps.lock = true; Metamaps.Views.exploreMaps.collection.getMaps(); } }, 500)); 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); 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(); } f.maps.show(); f.explore.set(Metamaps.currentPage, Metamaps.Maps.Mapper.mapperId); f.explore.show(); } else if (Metamaps.currentSection === "") { Metamaps.Loading.hide(); if (Metamaps.Active.Mapper) { Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps.Active ); Metamaps.Views.exploreMaps.render(); f.maps.show(); f.explore.set('active'); f.explore.show(); } else f.explore.set('featured'); } }; // EXPLORE MAPS BAR f.explore = {}; f.explore.surf = new Surface({ size: [true, 42], content: templates.mineContent, classes: ['exploreMapsCenter'] }); f.explore.surfBg = new Surface({ size: [undefined, 94], content: '
', classes: ['exploreMapsBar', 'exploreElement'] }); f.explore.mod = new Modifier({ size: [undefined, 94], 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.setApps = function (section) { f.explore.surf.setContent(templates[section + 'AppsContent']); }; f.explore.set = function (section, mapperId) { 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 = "
"; mapperContent += "
" + mapperObj.name + "'s Maps
"; f.explore.surf.setContent(mapperContent); }; $.ajax({ url: "/users/" + mapperId + ".json", success: function (response) { setMapper(response); }, error: function () { } }); } }; 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); // LOGO f.logo = {}; f.logo.surf = new Surface({ size: [258, 56], content: templates.logoContent, classes: ['footer'] }); 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'] }); 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.removeListener('deploy', initialToast); } }; f.toast.surf.on('deploy', initialToast); 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); // an object for the realtime mapper compasses surfaces f.compasses = {}; f.logo.show(); }// build });