metamaps--metamaps/frontend/src/Metamaps/Router.js

245 lines
6.5 KiB
JavaScript
Raw Normal View History

2016-09-22 16:16:15 +00:00
/* global Metamaps, $ */
import Backbone from 'backbone'
//TODO is this line good or bad?
//Backbone.$ = window.$
2016-03-27 12:18:37 +00:00
2016-09-22 10:31:56 +00:00
import Active from './Active'
import GlobalUI from './GlobalUI'
import Map from './Map'
import Topic from './Topic'
import Views from './Views'
import Visualize from './Visualize'
2016-03-27 12:18:37 +00:00
/*
* Metamaps.Router.js.erb
*
* Dependencies:
* - Metamaps.Loading
* - Metamaps.Maps
*/
const _Router = Backbone.Router.extend({
2016-09-23 01:40:49 +00:00
currentPage: '',
currentSection: '',
timeoutId: undefined,
routes: {
'': 'home', // #home
'explore/:section': 'explore', // #explore/active
'explore/:section/:id': 'explore', // #explore/mapper/1234
2016-10-02 21:37:14 +00:00
'maps/:id': 'maps', // #maps/7
'topics/:id': 'topics' // #topics/7
},
home: function () {
2016-09-23 01:40:49 +00:00
let self = this
2016-09-22 10:31:56 +00:00
clearTimeout(this.timeoutId)
2016-09-22 10:31:56 +00:00
if (Active.Mapper) document.title = 'Explore Active Maps | Metamaps'
else document.title = 'Home | Metamaps'
2016-09-22 10:31:56 +00:00
this.currentSection = ''
this.currentPage = ''
$('.wrapper').removeClass('mapPage topicPage')
2016-09-22 10:31:56 +00:00
var classes = Active.Mapper ? 'homePage explorePage' : 'homePage'
$('.wrapper').addClass(classes)
var navigate = function () {
2016-09-23 01:40:49 +00:00
self.timeoutId = setTimeout(function () {
self.navigate('')
}, 300)
}
2016-08-01 17:38:57 +00:00
// all this only for the logged in home page
2016-09-22 10:31:56 +00:00
if (Active.Mapper) {
$('.homeButton a').attr('href', '/')
2016-09-22 10:31:56 +00:00
GlobalUI.hideDiv('#yield')
2016-03-27 12:18:37 +00:00
2016-09-22 10:31:56 +00:00
GlobalUI.showDiv('#explore')
2016-03-27 12:18:37 +00:00
Views.ExploreMaps.setCollection(Metamaps.Maps.Active)
if (Metamaps.Maps.Active.length === 0) {
Metamaps.Maps.Active.getMaps(navigate) // this will trigger an explore maps render
2016-03-27 12:18:37 +00:00
} else {
Views.ExploreMaps.render(navigate)
2016-03-27 12:18:37 +00:00
}
} else {
// logged out home page
2016-09-22 10:31:56 +00:00
GlobalUI.hideDiv('#explore')
GlobalUI.showDiv('#yield')
this.timeoutId = setTimeout(navigate, 500)
}
2016-03-27 12:18:37 +00:00
2016-09-22 10:31:56 +00:00
GlobalUI.hideDiv('#infovis')
GlobalUI.hideDiv('#instructions')
Map.end()
Topic.end()
Active.Map = null
Active.Topic = null
},
explore: function (section, id) {
2016-09-23 01:40:49 +00:00
var self = this
2016-09-22 10:31:56 +00:00
clearTimeout(this.timeoutId)
// just capitalize the variable section
// either 'featured', 'mapper', or 'active'
var capitalize = section.charAt(0).toUpperCase() + section.slice(1)
if (section === 'shared' || section === 'featured' || section === 'active' || section === 'starred') {
document.title = 'Explore ' + capitalize + ' Maps | Metamaps'
} else if (section === 'mapper') {
$.ajax({
url: '/users/' + id + '.json',
success: function (response) {
document.title = response.name + ' | Metamaps'
},
error: function () {}
})
} else if (section === 'mine') {
document.title = 'Explore My Maps | Metamaps'
}
2016-03-27 12:18:37 +00:00
2016-09-22 10:31:56 +00:00
if (Active.Mapper && section != 'mapper') $('.homeButton a').attr('href', '/explore/' + section)
$('.wrapper').removeClass('homePage mapPage topicPage')
$('.wrapper').addClass('explorePage')
2016-03-27 12:18:37 +00:00
2016-09-22 10:31:56 +00:00
this.currentSection = 'explore'
this.currentPage = section
2016-03-27 12:18:37 +00:00
// this will mean it's a mapper page being loaded
if (id) {
if (Metamaps.Maps.Mapper.mapperId !== id) {
// empty the collection if we are trying to load the maps
// collection of a different mapper than we had previously
Metamaps.Maps.Mapper.reset()
Metamaps.Maps.Mapper.page = 1
2016-03-27 12:18:37 +00:00
}
Metamaps.Maps.Mapper.mapperId = id
}
2016-03-27 12:18:37 +00:00
Views.ExploreMaps.setCollection(Metamaps.Maps[capitalize])
2016-03-27 12:18:37 +00:00
var navigate = function () {
2016-09-23 01:40:49 +00:00
var path = '/explore/' + self.currentPage
2016-03-27 12:18:37 +00:00
// alter url if for mapper profile page
2016-09-23 01:40:49 +00:00
if (self.currentPage === 'mapper') {
path += '/' + Metamaps.Maps.Mapper.mapperId
2016-03-27 12:18:37 +00:00
}
2016-09-23 01:40:49 +00:00
self.navigate(path)
}
var navigateTimeout = function () {
2016-09-23 01:40:49 +00:00
self.timeoutId = setTimeout(navigate, 300)
}
if (Metamaps.Maps[capitalize].length === 0) {
Metamaps.Loading.show()
setTimeout(function () {
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
} else {
if (id) {
Views.ExploreMaps.fetchUserThenRender(navigateTimeout)
2016-03-27 12:18:37 +00:00
} else {
Views.ExploreMaps.render(navigateTimeout)
2016-03-27 12:18:37 +00:00
}
}
2016-03-27 12:18:37 +00:00
2016-09-22 10:31:56 +00:00
GlobalUI.showDiv('#explore')
GlobalUI.hideDiv('#yield')
GlobalUI.hideDiv('#infovis')
GlobalUI.hideDiv('#instructions')
Map.end()
Topic.end()
Active.Map = null
Active.Topic = null
},
maps: function (id) {
2016-09-22 10:31:56 +00:00
clearTimeout(this.timeoutId)
2016-09-22 10:31:56 +00:00
this.currentSection = 'map'
this.currentPage = id
$('.wrapper').removeClass('homePage explorePage topicPage')
$('.wrapper').addClass('mapPage')
// another class will be added to wrapper if you
// can edit this map '.canEditMap'
2016-09-22 10:31:56 +00:00
GlobalUI.hideDiv('#yield')
GlobalUI.hideDiv('#explore')
// clear the visualization, if there was one, before showing its div again
2016-09-22 10:31:56 +00:00
if (Visualize.mGraph) {
Visualize.clearVisualization()
}
2016-09-22 10:31:56 +00:00
GlobalUI.showDiv('#infovis')
Topic.end()
Active.Topic = null
2016-03-27 12:18:37 +00:00
Metamaps.Loading.show()
2016-09-22 10:31:56 +00:00
Map.end()
Map.launch(id)
},
topics: function (id) {
2016-09-22 10:31:56 +00:00
clearTimeout(this.timeoutId)
2016-03-27 12:18:37 +00:00
2016-09-22 10:31:56 +00:00
this.currentSection = 'topic'
this.currentPage = id
2016-03-27 12:18:37 +00:00
$('.wrapper').removeClass('homePage explorePage mapPage')
$('.wrapper').addClass('topicPage')
2016-03-27 12:18:37 +00:00
2016-09-22 10:31:56 +00:00
GlobalUI.hideDiv('#yield')
GlobalUI.hideDiv('#explore')
2016-03-27 12:18:37 +00:00
// clear the visualization, if there was one, before showing its div again
2016-09-22 10:31:56 +00:00
if (Visualize.mGraph) {
Visualize.clearVisualization()
2016-03-27 12:18:37 +00:00
}
2016-09-22 10:31:56 +00:00
GlobalUI.showDiv('#infovis')
Map.end()
Active.Map = null
2016-03-27 12:18:37 +00:00
2016-09-22 10:31:56 +00:00
Topic.end()
Topic.launch(id)
}
})
2016-03-27 12:18:37 +00:00
const Router = new _Router()
2016-03-27 12:18:37 +00:00
Router.intercept = function (evt) {
var segments
2016-03-27 12:18:37 +00:00
var href = {
prop: $(this).prop('href'),
attr: $(this).attr('href')
}
var root = window.location.protocol + '//' + window.location.host + Backbone.history.options.root
2016-03-27 12:18:37 +00:00
if (href.prop && href.prop === root) href.attr = ''
2016-03-27 12:18:37 +00:00
if (href.prop && href.prop.slice(0, root.length) === root) {
evt.preventDefault()
2016-03-27 12:18:37 +00:00
segments = href.attr.split('/')
segments.splice(0, 1) // pop off the element created by the first /
if (href.attr === '') {
2016-09-22 10:31:56 +00:00
Router.home()
} else {
2016-09-22 10:31:56 +00:00
Router[segments[0]](segments[1], segments[2])
2016-03-27 12:18:37 +00:00
}
}
}
2016-03-27 12:18:37 +00:00
Router.init = function () {
Backbone.history.start({
silent: true,
pushState: true,
root: '/'
})
2016-09-22 10:31:56 +00:00
$(document).on('click', 'a[data-router="true"]', Router.intercept)
}
export default Router