123 budgethak/static/budgethak/js/views/AppView.js
View file
@@ -6,12 +6,14 @@ define([
'backbone',
'jquery',
'models/App',
'models/Map',
'views/MapView',
'views/SidebarView',
'views/MenuBarView',
'views/PlaceView',
'collections/PlaceCollection',
], function(Backbone, $, App, MapView, SidebarView, MenuBarView, PlaceView, PlaceCollection) {
'settings',
], function(Backbone, $, App, Map, MapView, SidebarView, MenuBarView, PlaceView, PlaceCollection, settings) {
var AppView = Backbone.View.extend({
//el: '#app',
tagName : 'section',
@@ -21,27 +23,25 @@ define([
initialize : function() {
this.model = App;
_.bindAll(this, 'cron30min');
this.$el.html('<div id="main-wrapper"><div id="map-wrapper"><div id="map-element"></div></div></div>');
this.mapview = new MapView({ el : this.$("#map-element")[0] });
this.$el.html('<div id="main-wrapper"><div id="map-wrapper"></div></div>');
this.sidebarview = new SidebarView();
// MenuBarView behöver ha koll på collection pga autocomplete
this.menubarview = new MenuBarView({ collection : this.collection });
this.listenTo(this.model, 'change:filterClosedPlaces change:maxBeerPrice', this.filterPlaces);
//this.listenTo(this.collection, 'change:visible', ) // ???
this.mapview.on('map-click', this.sidebarview.model.close, this.sidebarview.model);
this.listenTo(this.mapview, 'map-viewport-change', this.setHash);
this.menubarview.on('my-location-click', this.mapview.gotoUserLocation, this.mapview);
this.listenTo(this.menubarview, 'info-icon-click', this.toggleInfoOpen);
this.menubarview.on('my-location-click', MapView.gotoUserLocation, MapView);
this.listenTo(this.menubarview, 'info-icon-click', this.infoIconClicked);
this.listenTo(this.menubarview, 'filter-closed-places-click', this.toggleFilterClosedPlaces);
this.listenTo(this.menubarview, 'max-beer-price-change', this.setMaxBeerPrice);
this.listenTo(this.menubarview, 'autocomplete-select', this.flyToPlaceId);
this.listenTo(this.sidebarview, 'transitionend', this.mapview.reloadMapSize);
this.listenTo(this.menubarview, 'autocomplete-select', this.autocompleteSelected);
this.listenTo(this.sidebarview, 'transitionend', MapView.reloadMapSize);
this.listenTo(this.sidebarview, 'place-open', this.onPlaceOpen);
this.listenTo(this.sidebarview, 'place-close', this.onPlaceClose);
this.listenTo(this.sidebarview, 'close', this.onSidebarClose);
this.listenTo(this.sidebarview, 'info-open', this.onInfoOpen);
this.listenTo(this.sidebarview, 'info-close', this.onInfoClose);
this.listenTo(this.sidebarview, 'map-marker-click', this.flyToPlace);
this.listenTo(this.sidebarview, 'close-button-click', function() { this.trigger('user-closed-sidebar'); })
window.setInterval(this.cron30min, 60000);
// Kommer PlaceCollection alltid att vara färdig-bootstrappad när vi är här?
//this.listenTo(this.collection, 'reset', this.renderAllMarkers);
@@ -50,34 +50,45 @@ define([
render : function() {
this.sidebarview.render();
this.$("#main-wrapper").append(this.sidebarview.el);
this.$("#map-wrapper").append(MapView.el);
// Vi måste vänta tills DOM är klart för att rita ut karta
$(_.bind(function() {
this.mapview.render();
this.menubarview.render(this.mapview.map);
MapView.render();
this.menubarview.render(MapView.map);
}, this));
return this;
},
// Anropas av router
renderMap : function(hash) {
this.sidebarview.model.close();
this.hashToMapModel(hash);
if (typeof hash !== "undefined")
this.hashToMapModel(hash);
this.render();
//this.mapview.render();
//MapView.render();
},
renderPlace : function(id) {
var place = this.collection.get(id);
this.sidebarview.model.set('transition', false);
this.sidebarview.open();
this.mapview.reloadMapSize();
this.mapview.model.set('location', { lat : parseFloat(place.get('lat')), lng : parseFloat(place.get('lng'))});
this.mapview.model.set('zoom', 17);
this.render();
this.showPlace(id);
// Anropas av router
renderPlace : function(slug) {
var place = this.collection.get(slug);
if (typeof place === "undefined") {
this.renderMap();
} else {
this.sidebarview.model.set('transition', false);
this.sidebarview.open();
MapView.reloadMapSize();
Map.set({
location : { lat : parseFloat(place.get('lat')), lng : parseFloat(place.get('lng'))},
zoom : settings.maxZoom,
});
this.render();
this.showPlace(slug);
}
},
showPlace : function(id) {
var place = this.collection.get(id);
showPlace : function(slug) {
var place = this.collection.get(slug);
this.sidebarview.model.set('place', place);
place.set('opened', true);
},
// Anropas av router
renderInfo : function(hash) {
this.sidebarview.model.set('infoOpen', true);
this.menubarview.model.set('infoActive', true);
@@ -98,24 +109,14 @@ define([
}, this);
this.collection.each(filterFunc);
},
// Sätter url:ens hashsträng enligt data från map-modellen
setHash : function() {
var location = this.mapview.model.get('location');
var hash = '#'+
this.mapview.model.get('zoom')+'/'+
location.lat.toPrecision(6)+'/'+
location.lng.toPrecision(6);
if (history.replaceState)
history.replaceState(null, null, window.location.pathname+hash);
},
// Tar hash-strängen och skickar dess data till map-modellen (motsatsen till setHash())
// Tar hash-strängen och skickar dess data till map-modellen
hashToMapModel : function(hash) {
var arr = hash.split("/");
if (arr.length < 3)
return false;
else {
this.mapview.model.set('location', { lat : parseFloat(arr[1]), lng : parseFloat(arr[2]) });
this.mapview.model.set('zoom', parseInt(arr[0]));
Map.set('location', { lat : parseFloat(arr[1]), lng : parseFloat(arr[2]) });
Map.set('zoom', parseInt(arr[0]));
return true;
}
},
@@ -131,28 +132,36 @@ define([
var placeview = new PlaceView({
model : place,
});
placeview.markercluster = this.mapview.markercluster;
placeview.mapview = this.mapview;
placeview.markercluster = MapView.markercluster;
placeview.mapview = MapView;
markers.push(placeview.marker);
this.listenTo(placeview, 'marker-click', this.togglePlaceOpen);
this.listenTo(placeview, 'marker-click', this.placeMarkerClicked);
}, this);
this.mapview.markercluster.addLayers(markers);
MapView.markercluster.addLayers(markers);
},
/* Brygga PlaceView -> SidebarView */
togglePlaceOpen : function(place) {
placeMarkerClicked : function(place) {
if (place.get('opened')) {
this.sidebarview.model.set('place', place);
this.listenToOnce(this.sidebarview, 'fully-open', function() {
this.mapview.panToIfOutOfBounds([ parseFloat(place.get('lat')), parseFloat(place.get('lng')) ]);
MapView.panToIfOutOfBounds([ parseFloat(place.get('lat')), parseFloat(place.get('lng')) ]);
});
this.trigger('user-opened-place', place);
} else {
this.sidebarview.model.set('place', null);
this.trigger('user-closed-sidebar');
}
},
/* Brygga MenuBarView -> SidebarView
* När MenuBarView:s info-icon klickas, ändrar vi Sidebar:s infoOpen så får SidebarView agera på detta */
toggleInfoOpen : function() {
this.sidebarview.model.set('infoOpen', this.menubarview.model.get('infoActive'));
infoIconClicked : function() {
var infoOpen = this.menubarview.model.get('infoActive');
this.sidebarview.model.set('infoOpen', infoOpen);
if (infoOpen) {
this.trigger('user-opened-info');
} else {
this.trigger('user-closed-sidebar');
}
},
/* Brygga MenuBarView -> this.collection -> PlaceView */
toggleFilterClosedPlaces : function(value) {
@@ -163,14 +172,24 @@ define([
this.model.set('maxBeerPrice', value);
},
/* Brygga MenuBarView -> SidebarView och MapView */
flyToPlaceId : function(id) {
autocompleteSelected : function(id) {
var place = this.collection.get(id);
this.trigger('user-opened-place', place)
this.flyToPlace(place);
},
/* Brygga SidebarView -> this.collection och MapView */
flyToPlace : function(place) {
// Uppdaterar Map-modellen redan här så att routern får rätt location- och zoom-data.
// Annars ändras de först när kartan panorerats klart.
Map.set({
location : {
lat : parseFloat(place.get('lat')),
lng : parseFloat(place.get('lng')),
},
zoom : settings.maxZoom,
});
var flyFunc = _.bind(function() {
this.mapview.flyTo([parseFloat(this.sidebarview.place.get('lat')), parseFloat(this.sidebarview.place.get('lng'))], true);
MapView.flyTo([parseFloat(this.sidebarview.place.get('lat')), parseFloat(this.sidebarview.place.get('lng'))], true);
}, this);
this.showPlace(place.id);
if (this.sidebarview.model.get('fullyOpen'))
@@ -180,15 +199,15 @@ define([
},
/* Brygga SidebarView -> Router */
onPlaceOpen : function(place) {
budgethak.router.navigate('place/'+place.id+'/');
//router.navigate('place/'+place.id+'/');
},
onPlaceClose : function(place) {
place.set('opened', false);
},
/* Brygga SidebarView() -> Router och MenuBarView() */
onInfoOpen : function() {
budgethak.router.navigate('info/');
this.setHash();
//router.navigate('info/');
//this.setHash();
this.menubarview.model.set('infoActive', true);
},
/* Brygga SidebarView -> MenuBarView */
@@ -197,8 +216,8 @@ define([
},
/* Brygga SidebarView -> Router */
onSidebarClose : function() {
budgethak.router.navigate('');
//router.navigate('');
},
});
return AppView;
return new AppView();
});
18 budgethak/static/budgethak/js/views/MapView.js
View file
@@ -4,6 +4,7 @@ define([
'leaflet',
'settings',
'models/Map',
'jquery',
'leaflet-usermarker',
'leaflet-markercluster',
], function(Backbone, _, L, settings, Map) {
@@ -25,7 +26,10 @@ define([
this.markercluster = L.markerClusterGroup({
maxClusterRadius : settings.maxClusterRadius,
});
},
/* $(_.bind(function() {
this.render();
}, this));
*/ },
render : function() {
if (!this.model.get('rendered')) {
this.map = L.map(this.el, {
@@ -44,6 +48,8 @@ define([
.addTo(this.map);
// Triggar map:load som kör this.onMapReady():
this.map.setView(this.model.get('location'), this.model.get('zoom'));
} else {
this.flyTo(this.model.get('location'));
}
return this;
},
@@ -59,13 +65,12 @@ define([
reloadFunc();
}
},
// fullZoom = bool
flyTo : function(latlng, fullZoom) {
fullZoom = fullZoom || false;
if (!fullZoom)
this.map.flyTo(latlng);
if (!fullZoom)
this.map.flyTo(latlng, this.model.get('zoom'));
else
this.map.flyTo(latlng, 17);
this.map.flyTo(latlng, settings.maxZoom);
},
panToIfOutOfBounds : function(latlng) {
try {
@@ -178,6 +183,5 @@ define([
}, this);
},
});
return MapView;
return new MapView();
});

2 budgethak/static/budgethak/js/views/MenuBarView.js
View file
@@ -163,4 +163,4 @@ define([
},
});
return MenuBarView;
});
});
1 budgethak/static/budgethak/js/views/SidebarView.js
View file
@@ -104,6 +104,7 @@ define([
}
},
onCloseButtonClick : function() {
this.trigger('close-button-click');
this.model.close();
},
onMapMarkerClick : function() {
2 budgethak/urls.py
View file
@@ -10,6 +10,7 @@
router.register('api/places', PlaceViewSet)

urlpatterns = static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urlpatterns += router.urls
urlpatterns += [
path('tests/', TemplateView.as_view(template_name='index.html')),
path('admin/', admin.site.urls),
@@ -18,7 +19,6 @@
path('info/', IndexView.as_view(), name="info"),
path('', IndexView.as_view(), name="index"),
]
urlpatterns += router.urls
'''
if settings.DEBUG:
urlpatterns += patterns('django.contrib.staticfiles.views', url(r'^(?P<path>.*)$', 'serve'))
93 lib/URI.min.js
View file

Large diffs are not rendered by default.

1 lib/native.history.js
View file

Large diffs are not rendered by default.