Metamaps.Router standard style
This commit is contained in:
Devin Howard
parent
df9c0a93bc
commit
799f6e4623
2 changed files with 254 additions and 246 deletions
|
|
@ -1,262 +1,270 @@
|
||||||
(function () {
|
/* global Metamaps, Backbone, $ */
|
||||||
|
|
||||||
Metamaps.currentPage = "";
|
/*
|
||||||
|
* Metamaps.Router.js.erb
|
||||||
|
*
|
||||||
|
* Dependencies:
|
||||||
|
* - Metamaps.Active
|
||||||
|
* - Metamaps.Famous
|
||||||
|
* - Metamaps.GlobalUI
|
||||||
|
* - Metamaps.JIT
|
||||||
|
* - Metamaps.Loading
|
||||||
|
* - Metamaps.Map
|
||||||
|
* - Metamaps.Maps
|
||||||
|
* - Metamaps.Topic
|
||||||
|
* - Metamaps.Views
|
||||||
|
* - Metamaps.Visualize
|
||||||
|
*/
|
||||||
|
|
||||||
|
;(function () {
|
||||||
var Router = Backbone.Router.extend({
|
var Router = Backbone.Router.extend({
|
||||||
routes: {
|
routes: {
|
||||||
"": "home", // #home
|
'': 'home', // #home
|
||||||
"explore/:section": "explore", // #explore/active
|
'explore/:section': 'explore', // #explore/active
|
||||||
"explore/:section/:id": "explore", // #explore/mapper/1234
|
'explore/:section/:id': 'explore', // #explore/mapper/1234
|
||||||
"maps/:id": "maps" // #maps/7
|
'maps/:id': 'maps' // #maps/7
|
||||||
},
|
},
|
||||||
home: function () {
|
home: function () {
|
||||||
clearTimeout(Metamaps.routerTimeoutId);
|
clearTimeout(Metamaps.Router.timeoutId)
|
||||||
|
|
||||||
if (Metamaps.Active.Mapper) document.title = 'Explore Active Maps | Metamaps';
|
if (Metamaps.Active.Mapper) document.title = 'Explore Active Maps | Metamaps'
|
||||||
else document.title = 'Home | Metamaps';
|
else document.title = 'Home | Metamaps'
|
||||||
|
|
||||||
Metamaps.currentSection = "";
|
Metamaps.Router.currentSection = ''
|
||||||
Metamaps.currentPage = "";
|
Metamaps.Router.currentPage = ''
|
||||||
$('.wrapper').removeClass('mapPage topicPage');
|
$('.wrapper').removeClass('mapPage topicPage')
|
||||||
|
|
||||||
var classes = Metamaps.Active.Mapper ? "homePage explorePage" : "homePage";
|
var classes = Metamaps.Active.Mapper ? 'homePage explorePage' : 'homePage'
|
||||||
$('.wrapper').addClass(classes);
|
$('.wrapper').addClass(classes)
|
||||||
|
|
||||||
var navigate = function () {
|
var navigate = function () {
|
||||||
Metamaps.routerTimeoutId = setTimeout(function() {
|
Metamaps.Router.timeoutId = setTimeout(function () {
|
||||||
Metamaps.Router.navigate("");
|
Metamaps.Router.navigate('')
|
||||||
}, 300);
|
}, 300)
|
||||||
};
|
}
|
||||||
// all this only for the logged in home page
|
// all this only for the logged in home page
|
||||||
if (Metamaps.Active.Mapper) {
|
if (Metamaps.Active.Mapper) {
|
||||||
|
Metamaps.Famous.yield.hide()
|
||||||
|
|
||||||
Metamaps.Famous.yield.hide();
|
Metamaps.Famous.explore.set('active')
|
||||||
|
Metamaps.Famous.maps.resetScroll() // sets the scroll back to the top
|
||||||
|
Metamaps.Famous.explore.show()
|
||||||
|
|
||||||
Metamaps.Famous.explore.set('active');
|
Metamaps.Famous.maps.show()
|
||||||
Metamaps.Famous.maps.resetScroll(); // sets the scroll back to the top
|
|
||||||
Metamaps.Famous.explore.show();
|
|
||||||
|
|
||||||
Metamaps.Famous.maps.show();
|
Metamaps.GlobalUI.Search.open()
|
||||||
|
Metamaps.GlobalUI.Search.lock()
|
||||||
|
|
||||||
Metamaps.GlobalUI.Search.open();
|
Metamaps.Views.exploreMaps.setCollection(Metamaps.Maps.Active)
|
||||||
Metamaps.GlobalUI.Search.lock();
|
|
||||||
|
|
||||||
Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps.Active );
|
|
||||||
if (Metamaps.Maps.Active.length === 0) {
|
if (Metamaps.Maps.Active.length === 0) {
|
||||||
Metamaps.Maps.Active.getMaps(navigate); // this will trigger an explore maps render
|
Metamaps.Maps.Active.getMaps(navigate) // this will trigger an explore maps render
|
||||||
}
|
} else {
|
||||||
else {
|
Metamaps.Views.exploreMaps.render(navigate)
|
||||||
Metamaps.Views.exploreMaps.render(navigate);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
// logged out home page
|
// logged out home page
|
||||||
else {
|
Metamaps.Famous.yield.show()
|
||||||
|
|
||||||
Metamaps.Famous.yield.show();
|
Metamaps.Famous.explore.hide()
|
||||||
|
|
||||||
Metamaps.Famous.explore.hide();
|
Metamaps.GlobalUI.Search.unlock()
|
||||||
|
Metamaps.GlobalUI.Search.close(0, true)
|
||||||
|
|
||||||
Metamaps.GlobalUI.Search.unlock();
|
Metamaps.Famous.maps.hide()
|
||||||
Metamaps.GlobalUI.Search.close(0, true);
|
Metamaps.Router.timeoutId = setTimeout(navigate, 500)
|
||||||
|
|
||||||
Metamaps.Famous.maps.hide();
|
|
||||||
Metamaps.routerTimeoutId = setTimeout(navigate, 500);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Metamaps.Famous.viz.hide();
|
Metamaps.Famous.viz.hide()
|
||||||
Metamaps.Map.end();
|
Metamaps.Map.end()
|
||||||
Metamaps.Topic.end();
|
Metamaps.Topic.end()
|
||||||
Metamaps.Active.Map = null;
|
Metamaps.Active.Map = null
|
||||||
Metamaps.Active.Topic = null;
|
Metamaps.Active.Topic = null
|
||||||
},
|
},
|
||||||
explore: function (section, id) {
|
explore: function (section, id) {
|
||||||
clearTimeout(Metamaps.routerTimeoutId);
|
clearTimeout(Metamaps.Router.timeoutId)
|
||||||
|
|
||||||
// just capitalize the variable section
|
// just capitalize the variable section
|
||||||
// either 'featured', 'mapper', or 'active'
|
// either 'featured', 'mapper', or 'active'
|
||||||
var capitalize = section.charAt(0).toUpperCase() + section.slice(1);
|
var capitalize = section.charAt(0).toUpperCase() + section.slice(1)
|
||||||
|
|
||||||
if (section === "featured" || section === "active") {
|
if (section === 'featured' || section === 'active') {
|
||||||
document.title = 'Explore ' + capitalize + ' Maps | Metamaps';
|
document.title = 'Explore ' + capitalize + ' Maps | Metamaps'
|
||||||
}
|
} else if (section === 'mapper') {
|
||||||
else if (section === "mapper") {
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: "/users/" + id + ".json",
|
url: '/users/' + id + '.json',
|
||||||
success: function (response) {
|
success: function (response) {
|
||||||
document.title = response.name + ' | Metamaps';
|
document.title = response.name + ' | Metamaps'
|
||||||
},
|
},
|
||||||
error: function () {
|
error: function () {}
|
||||||
|
})
|
||||||
}
|
} else if (section === 'mine') {
|
||||||
});
|
document.title = 'Explore My Maps | Metamaps'
|
||||||
}
|
|
||||||
else if (section === "mine") {
|
|
||||||
document.title = 'Explore My Maps | Metamaps';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$('.wrapper').removeClass('homePage mapPage topicPage');
|
$('.wrapper').removeClass('homePage mapPage topicPage')
|
||||||
$('.wrapper').addClass('explorePage');
|
$('.wrapper').addClass('explorePage')
|
||||||
|
|
||||||
Metamaps.currentSection = "explore";
|
Metamaps.Router.currentSection = 'explore'
|
||||||
Metamaps.currentPage = section;
|
Metamaps.Router.currentPage = section
|
||||||
|
|
||||||
// this will mean it's a mapper page being loaded
|
// this will mean it's a mapper page being loaded
|
||||||
if (id) {
|
if (id) {
|
||||||
if (Metamaps.Maps.Mapper.mapperId !== id) {
|
if (Metamaps.Maps.Mapper.mapperId !== id) {
|
||||||
// empty the collection if we are trying to load the maps
|
// empty the collection if we are trying to load the maps
|
||||||
// collection of a different mapper than we had previously
|
// collection of a different mapper than we had previously
|
||||||
Metamaps.Maps.Mapper.reset();
|
Metamaps.Maps.Mapper.reset()
|
||||||
Metamaps.Maps.Mapper.page = 1;
|
Metamaps.Maps.Mapper.page = 1
|
||||||
}
|
}
|
||||||
Metamaps.Maps.Mapper.mapperId = id;
|
Metamaps.Maps.Mapper.mapperId = id
|
||||||
}
|
}
|
||||||
|
|
||||||
Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps[capitalize] );
|
Metamaps.Views.exploreMaps.setCollection(Metamaps.Maps[capitalize])
|
||||||
|
|
||||||
var navigate = function () {
|
var navigate = function () {
|
||||||
var path = "/explore/" + Metamaps.currentPage;
|
var path = '/explore/' + Metamaps.Router.currentPage
|
||||||
|
|
||||||
// alter url if for mapper profile page
|
// alter url if for mapper profile page
|
||||||
if (Metamaps.currentPage == "mapper") {
|
if (Metamaps.Router.currentPage === 'mapper') {
|
||||||
path += "/" + Metamaps.Maps.Mapper.mapperId;
|
path += '/' + Metamaps.Maps.Mapper.mapperId
|
||||||
}
|
}
|
||||||
|
|
||||||
Metamaps.Router.navigate(path);
|
Metamaps.Router.navigate(path)
|
||||||
};
|
}
|
||||||
var navigateTimeout = function () {
|
var navigateTimeout = function () {
|
||||||
Metamaps.routerTimeoutId = setTimeout(navigate, 300);
|
Metamaps.Router.timeoutId = setTimeout(navigate, 300)
|
||||||
};
|
}
|
||||||
if (Metamaps.Maps[capitalize].length === 0) {
|
if (Metamaps.Maps[capitalize].length === 0) {
|
||||||
Metamaps.Loading.show();
|
Metamaps.Loading.show()
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
Metamaps.Maps[capitalize].getMaps(navigate); // this will trigger an explore maps render
|
Metamaps.Maps[capitalize].getMaps(navigate) // this will trigger an explore maps render
|
||||||
}, 300); // wait 300 milliseconds till the other animations are done to do the fetch
|
}, 300) // wait 300 milliseconds till the other animations are done to do the fetch
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
if (id) {
|
if (id) {
|
||||||
Metamaps.Views.exploreMaps.fetchUserThenRender(navigateTimeout);
|
Metamaps.Views.exploreMaps.fetchUserThenRender(navigateTimeout)
|
||||||
}
|
} else {
|
||||||
else {
|
Metamaps.Views.exploreMaps.render(navigateTimeout)
|
||||||
Metamaps.Views.exploreMaps.render(navigateTimeout);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Metamaps.GlobalUI.Search.open();
|
Metamaps.GlobalUI.Search.open()
|
||||||
Metamaps.GlobalUI.Search.lock();
|
Metamaps.GlobalUI.Search.lock()
|
||||||
|
|
||||||
Metamaps.Famous.yield.hide();
|
Metamaps.Famous.yield.hide()
|
||||||
|
|
||||||
Metamaps.Famous.maps.resetScroll(); // sets the scroll back to the top
|
Metamaps.Famous.maps.resetScroll() // sets the scroll back to the top
|
||||||
Metamaps.Famous.maps.show();
|
Metamaps.Famous.maps.show()
|
||||||
Metamaps.Famous.explore.set(section, id);
|
Metamaps.Famous.explore.set(section, id)
|
||||||
Metamaps.Famous.explore.show();
|
Metamaps.Famous.explore.show()
|
||||||
|
|
||||||
Metamaps.Famous.viz.hide();
|
Metamaps.Famous.viz.hide()
|
||||||
Metamaps.Map.end();
|
Metamaps.Map.end()
|
||||||
Metamaps.Topic.end();
|
Metamaps.Topic.end()
|
||||||
Metamaps.Active.Map = null;
|
Metamaps.Active.Map = null
|
||||||
Metamaps.Active.Topic = null;
|
Metamaps.Active.Topic = null
|
||||||
},
|
},
|
||||||
maps: function (id) {
|
maps: function (id) {
|
||||||
clearTimeout(Metamaps.routerTimeoutId);
|
clearTimeout(Metamaps.Router.timeoutId)
|
||||||
|
|
||||||
document.title = 'Map ' + id + ' | Metamaps';
|
document.title = 'Map ' + id + ' | Metamaps'
|
||||||
|
|
||||||
Metamaps.currentSection = "map";
|
Metamaps.Router.currentSection = 'map'
|
||||||
Metamaps.currentPage = id;
|
Metamaps.Router.currentPage = id
|
||||||
|
|
||||||
$('.wrapper').removeClass('homePage explorePage topicPage');
|
$('.wrapper').removeClass('homePage explorePage topicPage')
|
||||||
$('.wrapper').addClass('mapPage');
|
$('.wrapper').addClass('mapPage')
|
||||||
// another class will be added to wrapper if you
|
// another class will be added to wrapper if you
|
||||||
// can edit this map '.canEditMap'
|
// can edit this map '.canEditMap'
|
||||||
|
|
||||||
Metamaps.Famous.yield.hide();
|
Metamaps.Famous.yield.hide()
|
||||||
Metamaps.Famous.maps.hide();
|
Metamaps.Famous.maps.hide()
|
||||||
Metamaps.Famous.explore.hide();
|
Metamaps.Famous.explore.hide()
|
||||||
|
|
||||||
// clear the visualization, if there was one, before showing its div again
|
// clear the visualization, if there was one, before showing its div again
|
||||||
if (Metamaps.Visualize.mGraph) {
|
if (Metamaps.Visualize.mGraph) {
|
||||||
Metamaps.Visualize.mGraph.graph.empty();
|
Metamaps.Visualize.mGraph.graph.empty()
|
||||||
Metamaps.Visualize.mGraph.plot();
|
Metamaps.Visualize.mGraph.plot()
|
||||||
Metamaps.JIT.centerMap(Metamaps.Visualize.mGraph.canvas);
|
Metamaps.JIT.centerMap(Metamaps.Visualize.mGraph.canvas)
|
||||||
}
|
}
|
||||||
Metamaps.Famous.viz.show();
|
Metamaps.Famous.viz.show()
|
||||||
Metamaps.Topic.end();
|
Metamaps.Topic.end()
|
||||||
Metamaps.Active.Topic = null;
|
Metamaps.Active.Topic = null
|
||||||
|
|
||||||
Metamaps.GlobalUI.Search.unlock();
|
Metamaps.GlobalUI.Search.unlock()
|
||||||
Metamaps.GlobalUI.Search.close(0, true);
|
Metamaps.GlobalUI.Search.close(0, true)
|
||||||
|
|
||||||
Metamaps.Loading.show();
|
Metamaps.Loading.show()
|
||||||
Metamaps.Map.end();
|
Metamaps.Map.end()
|
||||||
Metamaps.Map.launch(id);
|
Metamaps.Map.launch(id)
|
||||||
},
|
},
|
||||||
topics: function (id) {
|
topics: function (id) {
|
||||||
clearTimeout(Metamaps.routerTimeoutId);
|
clearTimeout(Metamaps.Router.timeoutId)
|
||||||
|
|
||||||
document.title = 'Topic ' + id + ' | Metamaps';
|
document.title = 'Topic ' + id + ' | Metamaps'
|
||||||
|
|
||||||
Metamaps.currentSection = "topic";
|
Metamaps.Router.currentSection = 'topic'
|
||||||
Metamaps.currentPage = id;
|
Metamaps.Router.currentPage = id
|
||||||
|
|
||||||
$('.wrapper').removeClass('homePage explorePage mapPage');
|
$('.wrapper').removeClass('homePage explorePage mapPage')
|
||||||
$('.wrapper').addClass('topicPage');
|
$('.wrapper').addClass('topicPage')
|
||||||
|
|
||||||
Metamaps.Famous.yield.hide();
|
Metamaps.Famous.yield.hide()
|
||||||
Metamaps.Famous.maps.hide();
|
Metamaps.Famous.maps.hide()
|
||||||
Metamaps.Famous.explore.hide();
|
Metamaps.Famous.explore.hide()
|
||||||
|
|
||||||
// clear the visualization, if there was one, before showing its div again
|
// clear the visualization, if there was one, before showing its div again
|
||||||
if (Metamaps.Visualize.mGraph) {
|
if (Metamaps.Visualize.mGraph) {
|
||||||
Metamaps.Visualize.mGraph.graph.empty();
|
Metamaps.Visualize.mGraph.graph.empty()
|
||||||
Metamaps.Visualize.mGraph.plot();
|
Metamaps.Visualize.mGraph.plot()
|
||||||
Metamaps.JIT.centerMap(Metamaps.Visualize.mGraph.canvas);
|
Metamaps.JIT.centerMap(Metamaps.Visualize.mGraph.canvas)
|
||||||
}
|
}
|
||||||
Metamaps.Famous.viz.show();
|
Metamaps.Famous.viz.show()
|
||||||
Metamaps.Map.end();
|
Metamaps.Map.end()
|
||||||
Metamaps.Active.Map = null;
|
Metamaps.Active.Map = null
|
||||||
|
|
||||||
Metamaps.GlobalUI.Search.unlock();
|
Metamaps.GlobalUI.Search.unlock()
|
||||||
Metamaps.GlobalUI.Search.close(0, true);
|
Metamaps.GlobalUI.Search.close(0, true)
|
||||||
|
|
||||||
Metamaps.Topic.end();
|
Metamaps.Topic.end()
|
||||||
Metamaps.Topic.launch(id);
|
Metamaps.Topic.launch(id)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
Metamaps.Router = new Router();
|
|
||||||
|
|
||||||
|
Metamaps.Router = new Router()
|
||||||
|
Metamaps.Router.currentPage = ''
|
||||||
|
Metamaps.Router.currentSection = undefined
|
||||||
|
Metamaps.Router.timeoutId = undefined
|
||||||
|
|
||||||
Metamaps.Router.intercept = function (evt) {
|
Metamaps.Router.intercept = function (evt) {
|
||||||
var segments;
|
var segments
|
||||||
|
|
||||||
var href = {
|
var href = {
|
||||||
prop: $(this).prop("href"),
|
prop: $(this).prop('href'),
|
||||||
attr: $(this).attr("href")
|
attr: $(this).attr('href')
|
||||||
};
|
}
|
||||||
var root = location.protocol + "//" + location.host + Backbone.history.options.root;
|
var root = window.location.protocol + '//' + window.location.host + Backbone.history.options.root
|
||||||
|
|
||||||
if (href.prop && href.prop === root) href.attr = "";
|
if (href.prop && href.prop === root) href.attr = ''
|
||||||
|
|
||||||
if (href.prop && href.prop.slice(0, root.length) === root) {
|
if (href.prop && href.prop.slice(0, root.length) === root) {
|
||||||
evt.preventDefault();
|
evt.preventDefault()
|
||||||
|
|
||||||
segments = href.attr.split('/');
|
segments = href.attr.split('/')
|
||||||
segments.splice(0,1); // pop off the element created by the first /
|
segments.splice(0, 1) // pop off the element created by the first /
|
||||||
|
|
||||||
if (href.attr === "") Metamaps.Router.home();
|
if (href.attr === '') {
|
||||||
else {
|
Metamaps.Router.home()
|
||||||
Metamaps.Router[segments[0]](segments[1], segments[2]);
|
} else {
|
||||||
|
Metamaps.Router[segments[0]](segments[1], segments[2])
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
|
||||||
Metamaps.Router.init = function () {
|
Metamaps.Router.init = function () {
|
||||||
Backbone.history.start({
|
Backbone.history.start({
|
||||||
silent: true,
|
silent: true,
|
||||||
pushState: true,
|
pushState: true,
|
||||||
root: '/'
|
root: '/'
|
||||||
});
|
})
|
||||||
$(document).on("click", "a:not([data-bypass])", Metamaps.Router.intercept);
|
$(document).on('click', 'a:not([data-bypass])', Metamaps.Router.intercept)
|
||||||
};
|
}
|
||||||
})();
|
})()
|
||||||
|
|
|
||||||
|
|
@ -1772,8 +1772,8 @@ Metamaps.Visualize = {
|
||||||
hold();
|
hold();
|
||||||
|
|
||||||
// update the url now that the map is ready
|
// update the url now that the map is ready
|
||||||
clearTimeout(Metamaps.routerTimeoutId);
|
clearTimeout(Metamaps.Router.timeoutId);
|
||||||
Metamaps.routerTimeoutId = setTimeout(function(){
|
Metamaps.Router.timeoutId = setTimeout(function(){
|
||||||
var m = Metamaps.Active.Map;
|
var m = Metamaps.Active.Map;
|
||||||
var t = Metamaps.Active.Topic;
|
var t = Metamaps.Active.Topic;
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue