/media/js/busido/stops.js
JavaScript | 191 lines | 165 code | 17 blank | 9 comment | 5 complexity | d3d56a894bd9ec07f76164eb7a99fd7f MD5 | raw file
- // The Base View from which (almost) all views inherit
- Busido.View = Backbone.View.extend({
- render: function () {
- var template = this.template || this.options.template
- var source = $(template).html();
- var data = {};
- if (this.model instanceof Backbone.Model)
- data = this.model.toJSON();
- else
- data = this.model;
- var compiled = _.template(source, data);
- this.$el.html(compiled);
- return this;
- }
- });
- Busido.RouteView = Busido.View.extend({
- template: "#stop-route-template",
- tagName: "a",
- className: "btn btn-mini stop-btn",
- events: {
- "click": "handleClick"
- },
- initialize: function(){
- _.bindAll(this, "handleClick");
- },
- handleClick: function(e){
- e.preventDefault();
- console.log(this.$el.data('route_name'));
- }
- })
- //Typical ListView functionality kept here
- Busido.ListView = Backbone.View.extend({
- initialize: function () {
- this.collection.bind("reset", this.render, this);
- //this.collection.bind("add", this.addChild, this);
- //this.collection.bind("remove", this.render, this);
- },
- addChild: function(item){
- var itemView = new Busido.StopListItemView({ model: item });
- this.$el.append(itemView.render().el);
- return this;
- },
- render: function () {
- var self = this;
- var els = [];
- this.$el.empty();
- this.collection.each(function (item) {
- var itemView = new Busido.StopListItemView({ model: item });
- var el = itemView.render()
- item.listItem = el;
- els.push(el.el);
- var route_els = [];
- _.each(item.attributes.routes, function (route){
- var routeView = new Busido.RouteView({
- model: { route: route },
- attributes: {"data-stop_id": item.attributes.id,
- "data-route_name": route}
-
- });
- route_els.push(routeView.render().el);
- });
- $(".routes-holder", el.$el).append(route_els);
- });
- this.$el.append(els);
- return this;
- }
- });
- Busido.StopModel = Backbone.Model.extend({
- url: "/api/stops/" + this.id,
- selected: false
- });
- Busido.RouteModel = Backbone.Model.extend({
- url: "/api/stops/" + this.stop_id + "/routes/" + this.route_name + "/schedule",
- selected: false
- });
- Busido.StopView = Backbone.View.extend({
- model: Busido.StopModel,
- initialize: function(){
- _.bindAll(this, "handleClick", "handleMouseover", "handleMouseout");
- },
- render: function(map){
- var map = map || Busido.map;
- this.model.marker = new google.maps.Marker({
- position: new google.maps.LatLng(this.model.attributes.lat,
- this.model.attributes.lon),
- map: map,
- title: this.model.attributes.name,
- optimized: true
- });
- this.bindMapEvents({
- click: "handleClick",
- mouseover: "handleMouseover",
- mouseout: "handleMouseout"
- });
- return this;
- },
- // Attach listeners to the this.model.marker
- // From the `mapEvents` hash
- bindMapEvents: function(mapEvents) {
- mapEvents || (mapEvents = this.mapEvents);
- for(event in mapEvents) {
- var handler = mapEvents[event];
- google.maps.event.addListener(this.model.marker, event, this[handler]);
- }
- },
- removeFromMap: function(){
- this.marker.setMap(null);
- return this;
- },
- handleClick: function(event){
- this.model.listItem.$el.addClass("info");
- },
- handleMouseover: function(event){
- var el = this.model.listItem.$el;
- var panel = $("#side_panel");
- el.addClass("info");
- _.debounce(panel.animate({ scrollTop: panel.scrollTop() + el.offset().top - 50 }, 200, "swing"), 300);
- },
- handleMouseout: function(event){
- this.model.listItem.$el.removeClass("info");
- }
- });
- Busido.StopListItemView = Busido.View.extend({
- model: Busido.StopModel,
- tagName: "tr",
- template: "#stoplist-item-template",
- events: {
- "mouseover td": "mouseover",
- "mouseout td": "mouseout"
- //"click a": "itemSelected"
- },
- initialize: function(){
- _.bindAll(this, "mouseover", "mouseout", "itemSelected");
- },
- mouseover: function(event){
- //event.preventDefault();
- this.$el.addClass("info");
- this.model.marker.setAnimation(google.maps.Animation.BOUNCE);
- },
- mouseout: function(event){
- //event.preventDefault();
- this.$el.removeClass("info");
- this.model.marker.setAnimation(null);
- },
- itemSelected: function(event){
- event.preventDefault();
- console.log(this);
- }
- });
- Busido.StopRouteListView =
- Busido.StopCollection = Backbone.Collection.extend({
- model: Busido.StopModel,
- url: function(){
- return "/api/stops?coords=" + Busido.currentCoords + "&distance=" + Busido.selectedDistance;
- },
- parse: function(response){
- return response.result;
- }
- });
- Busido.StopCollectionView = Backbone.View.extend({
- initialize: function(){
- this.collection.on('reset', this.render, this);
- this.collection.on('add', this.addChild, this);
- },
- addChild: function(item){
- var v = new Busido.StopView({model: item});
- v.render();
- return this;
- },
- render: function(){
- var self = this;
- this.collection.each(self.addChild);
- return this;
- }
- });