restructuring for famous
This commit is contained in:
Connor Turland
parent
465b95753c
commit
b596228782
3 changed files with 292 additions and 1 deletions
|
|
@ -34,7 +34,7 @@
|
|||
|
||||
<!-- app code -->
|
||||
<script type="text/javascript">
|
||||
//require.config({baseUrl: '/assets/src/'});
|
||||
require.config({baseUrl: '/famous/'});
|
||||
require(['main']);
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
|||
205
public/famous/main.js
Normal file
205
public/famous/main.js
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
define(function(require, exports, module) {
|
||||
// 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 templates = require('templates');
|
||||
|
||||
// create the main context
|
||||
var famous = document.getElementById('famousOverlay');
|
||||
|
||||
Metamaps.Famous = {};
|
||||
var f = Metamaps.Famous;
|
||||
|
||||
f.mainContext = Engine.createContext(famous);
|
||||
|
||||
|
||||
// INFOVIS
|
||||
f.viz = {};
|
||||
f.viz.surf = new Surface({
|
||||
size: [undefined, undefined],
|
||||
classes: [],
|
||||
properties: {
|
||||
display: 'none'
|
||||
}
|
||||
});
|
||||
var prepare = function () {
|
||||
f.viz.show();
|
||||
Metamaps.JIT.prepareVizData();
|
||||
f.viz.surf.removeListener('deploy',prepare);
|
||||
};
|
||||
if (Metamaps.currentSection === "map") {
|
||||
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.mainContext.add(f.viz.mod).add(f.viz.surf);
|
||||
|
||||
|
||||
// CONTENT / OTHER PAGES
|
||||
f.yield = {};
|
||||
f.yield.surf = new Surface({
|
||||
size: [true, true],
|
||||
classes: [],
|
||||
properties: {
|
||||
display: 'none'
|
||||
}
|
||||
});
|
||||
var loadYield = function () {
|
||||
f.loadYield();
|
||||
f.yield.surf.removeListener('deploy',loadYield);
|
||||
};
|
||||
if (!(Metamaps.currentSection === "map" ||
|
||||
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.loader.hide();
|
||||
var yield = document.getElementById('yield').innerHTML;
|
||||
f.yield.surf.setContent(yield);
|
||||
f.yield.surf.deploy(f.yield.surf._currTarget);
|
||||
f.yield.show();
|
||||
};
|
||||
|
||||
|
||||
// EXPLORE MAPS BAR
|
||||
f.explore = {};
|
||||
f.explore.surf = new Surface({
|
||||
size: [undefined, 94],
|
||||
content: templates.mineContent,
|
||||
classes: ['exploreMapsBar', 'exploreElement']
|
||||
});
|
||||
f.explore.mod = new Modifier({
|
||||
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) {
|
||||
var loggedIn = Metamaps.Active.Mapper ? 'Auth' : '';
|
||||
f.explore.surf.setContent(templates[section + loggedIn + 'Content']);
|
||||
};
|
||||
f.mainContext.add(f.explore.mod).add(f.explore.surf);
|
||||
|
||||
// LOGO
|
||||
f.logo = {};
|
||||
f.logo.surf = new Surface({
|
||||
size: [258, 56],
|
||||
content: templates.logoContent,
|
||||
classes: []
|
||||
});
|
||||
|
||||
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']
|
||||
});
|
||||
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);
|
||||
|
||||
f.logo.show();
|
||||
if (Metamaps.currentSection === "explore") {
|
||||
Metamaps.Loading.loader.hide();
|
||||
f.explore.set(Metamaps.currentPage);
|
||||
f.explore.show();
|
||||
}
|
||||
else if (Metamaps.currentSection === "") {
|
||||
Metamaps.Loading.loader.hide();
|
||||
if (Metamaps.Active.Mapper) {
|
||||
f.explore.set('mine');
|
||||
f.explore.show();
|
||||
}
|
||||
else f.explore.set('featured');
|
||||
}
|
||||
});
|
||||
86
public/famous/templates.js
Normal file
86
public/famous/templates.js
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
define(function(require, exports, module) {
|
||||
|
||||
var t = {};
|
||||
|
||||
t.logoContent = '<div class="logo">METAMAPS</div>';
|
||||
t.logoContent += '<ul class="bottomLinks">';
|
||||
t.logoContent += '<li class="openLightbox" data-open="about">About / </li>';
|
||||
t.logoContent += '<li><a href="/maps/blank">Terms of Use / </a></li>';
|
||||
t.logoContent += '<li class="openLightbox" data-open="colophon">Colophon / </li>';
|
||||
t.logoContent += '<li class="openLightbox" data-open="getInvolved">Get Involved!</li>';
|
||||
t.logoContent += '</ul>';
|
||||
|
||||
/* logged out explore maps bars */
|
||||
t.activeContent = '<div class="exploreMapsMenu">';
|
||||
t.activeContent += '<div class="exploreMapsCenter">';
|
||||
t.activeContent += '<a href="/">My Maps</a>';
|
||||
t.activeContent += '<a href="/explore/active" class="active">Recently Active</a>';
|
||||
t.activeContent += '<a href="/explore/featured">Featured</a>';
|
||||
t.activeContent += '<a href="/explore/new">New</a>';
|
||||
t.activeContent += '<div class="clearfloat"></div>';
|
||||
t.activeContent += '</div';
|
||||
t.activeContent += '</div>';
|
||||
|
||||
t.featuredContent = '<div class="exploreMapsMenu">';
|
||||
t.featuredContent += '<div class="exploreMapsCenter">';
|
||||
t.featuredContent += '<a href="/">My Maps</a>';
|
||||
t.featuredContent += '<a href="/explore/active">Recently Active</a>';
|
||||
t.featuredContent += '<a href="/explore/featured" class="active">Featured</a>';
|
||||
t.featuredContent += '<a href="/explore/new">New</a>';
|
||||
t.featuredContent += '<div class="clearfloat"></div>';
|
||||
t.featuredContent += '</div';
|
||||
t.featuredContent += '</div>';
|
||||
|
||||
t.newContent = '<div class="exploreMapsMenu">';
|
||||
t.newContent += '<div class="exploreMapsCenter">';
|
||||
t.newContent += '<a href="/">My Maps</a>';
|
||||
t.newContent += '<a href="/explore/active">Recently Active</a>';
|
||||
t.newContent += '<a href="/explore/featured">Featured</a>';
|
||||
t.newContent += '<a href="/explore/new" class="active">New</a>';
|
||||
t.newContent += '<div class="clearfloat"></div>';
|
||||
t.newContent += '</div';
|
||||
t.newContent += '</div>';
|
||||
|
||||
/* logged in explore maps bars */
|
||||
t.mineAuthContent = '<div class="exploreMapsMenu">';
|
||||
t.mineAuthContent += '<div class="exploreMapsCenter">';
|
||||
t.mineAuthContent += '<a href="/" class="active">My Maps</a>';
|
||||
t.mineAuthContent += '<a href="/explore/active">Recently Active</a>';
|
||||
t.mineAuthContent += '<a href="/explore/featured">Featured</a>';
|
||||
t.mineAuthContent += '<a href="/explore/new">New</a>';
|
||||
t.mineAuthContent += '<div class="clearfloat"></div>';
|
||||
t.mineAuthContent += '</div';
|
||||
t.mineAuthContent += '</div>';
|
||||
|
||||
t.activeAuthContent = '<div class="exploreMapsMenu">';
|
||||
t.activeAuthContent += '<div class="exploreMapsCenter">';
|
||||
t.activeAuthContent += '<a href="/">My Maps</a>';
|
||||
t.activeAuthContent += '<a href="/explore/active" class="active">Recently Active</a>';
|
||||
t.activeAuthContent += '<a href="/explore/featured">Featured</a>';
|
||||
t.activeAuthContent += '<a href="/explore/new">New</a>';
|
||||
t.activeAuthContent += '<div class="clearfloat"></div>';
|
||||
t.activeAuthContent += '</div';
|
||||
t.activeAuthContent += '</div>';
|
||||
|
||||
t.featuredAuthContent = '<div class="exploreMapsMenu">';
|
||||
t.featuredAuthContent += '<div class="exploreMapsCenter">';
|
||||
t.featuredAuthContent += '<a href="/">My Maps</a>';
|
||||
t.featuredAuthContent += '<a href="/explore/active">Recently Active</a>';
|
||||
t.featuredAuthContent += '<a href="/explore/featured" class="active">Featured</a>';
|
||||
t.featuredAuthContent += '<a href="/explore/new">New</a>';
|
||||
t.featuredAuthContent += '<div class="clearfloat"></div>';
|
||||
t.featuredAuthContent += '</div';
|
||||
t.featuredAuthContent += '</div>';
|
||||
|
||||
t.newAuthContent = '<div class="exploreMapsMenu">';
|
||||
t.newAuthContent += '<div class="exploreMapsCenter">';
|
||||
t.newAuthContent += '<a href="/">My Maps</a>';
|
||||
t.newAuthContent += '<a href="/explore/active">Recently Active</a>';
|
||||
t.newAuthContent += '<a href="/explore/featured">Featured</a>';
|
||||
t.newAuthContent += '<a href="/explore/new" class="active">New</a>';
|
||||
t.newAuthContent += '<div class="clearfloat"></div>';
|
||||
t.newAuthContent += '</div';
|
||||
t.newAuthContent += '</div>';
|
||||
|
||||
module.exports = t;
|
||||
});
|
||||
Loading…
Reference in a new issue