From df9c0a93bcd403126302dfc9f61cefe3bf3c8f36 Mon Sep 17 00:00:00 2001 From: Devin Howard Date: Sun, 27 Mar 2016 19:50:07 +0800 Subject: [PATCH] Metamaps.Views standard style --- .../javascripts/src/Metamaps.Views.js.erb | 244 +++++++++--------- 1 file changed, 120 insertions(+), 124 deletions(-) diff --git a/app/assets/javascripts/src/Metamaps.Views.js.erb b/app/assets/javascripts/src/Metamaps.Views.js.erb index 7074a0d9..3c488066 100644 --- a/app/assets/javascripts/src/Metamaps.Views.js.erb +++ b/app/assets/javascripts/src/Metamaps.Views.js.erb @@ -1,133 +1,129 @@ -(function () { - Metamaps.Views = {}; +/* global Metamaps, $, Hogan, Backbone */ + +/* + * Metamaps.Views.js.erb + * + * Dependencies: + * - Metamaps.Famous + * - Metamaps.Loading + */ + +Metamaps.Views = { + initialized: false +} - var initialized = false; - Metamaps.Views.init = function () { + Metamaps.Views.MapperCard = Backbone.View.extend({ + template: Hogan.compile($('#mapperCardTemplate').html()), - Metamaps.Views.MapperCard = Backbone.View.extend({ + tagNamea: 'div', - template: Hogan.compile( $('#mapperCardTemplate').html() ), + className: 'mapper', - tagNamea: "div", + render: function () { + this.$el.html(this.template.render(this.model)) + return this + } + }) - className: "mapper", + Metamaps.Views.MapCard = Backbone.View.extend({ + template: Hogan.compile($('#mapCardTemplate').html()), - render: function () { - this.$el.html( this.template.render(this.model) ); - return this; + tagName: 'div', + + className: 'map', + + id: function () { + return this.model.id + }, + + initialize: function () { + this.listenTo(this.model, 'change', this.render) + }, + + render: function () { + this.$el.html(this.template.render(this.model.attrForCards())) + return this + } + + }) + + var MapsWrapper = Backbone.View.extend({ + initialize: function (opts) {}, + setCollection: function (collection) { + if (this.collection) this.stopListening(this.collection) + this.collection = collection + this.listenTo(this.collection, 'add', this.render) + this.listenTo(this.collection, 'successOnFetch', this.handleSuccess) + this.listenTo(this.collection, 'errorOnFetch', this.handleError) + }, + render: function (mapperObj, cbArg) { + var that = this + + if (typeof mapperObj === 'function') { + var cb = mapperObj + mapperObj = null + } + + this.el.innerHTML = '' + + // in case it is a page where we have to display the mapper card + if (mapperObj) { + var view = new Metamaps.Views.MapperCard({ model: mapperObj }) + + that.el.appendChild(view.render().el) + } + + this.collection.each(function (map) { + var view = new Metamaps.Views.MapCard({ model: map }) + + that.el.appendChild(view.render().el) + }) + this.$el.append('
') + var m = Metamaps.Famous.maps.surf + m.setContent(this.el) + + var updateHeight = function () { + var height = $(that.el).height() + 32 + 56 + m.setSize([undefined, height]) + Metamaps.Famous.maps.lock = false + if (cb) cb() + } + + if (!Metamaps.Views.initialized) { + m.deploy(m._currTarget) + Metamaps.Views.initialized = true + setTimeout(updateHeight, 100) + } else { + setTimeout(updateHeight, 100) + } + + Metamaps.Loading.hide() + }, + handleSuccess: function (cb) { + if (this.collection && this.collection.id === 'mapper') { + this.fetchUserThenRender(cb) + } else { + this.render(cb) + } + }, + handleError: function () { + console.log('error loading maps!') // TODO + }, + fetchUserThenRender: function (cb) { + var that = this + // first load the mapper object and then call the render function + $.ajax({ + url: '/users/' + this.collection.mapperId + '/details.json', + success: function (response) { + that.render(response, cb) + }, + error: function () { + that.render(cb) } - }); + }) + } + }) - Metamaps.Views.MapCard = Backbone.View.extend({ - - template: Hogan.compile( $('#mapCardTemplate').html() ), - - tagName: "div", - - className: "map", - - id: function() { - return this.model.id; - }, - - initialize: function () { - this.listenTo(this.model, "change", this.render); - }, - - render: function () { - this.$el.html( this.template.render(this.model.attrForCards()) ); - return this; - } - - }); - - var mapsWrapper = Backbone.View.extend({ - - initialize: function (opts) { - - }, - setCollection: function (collection) { - if (this.collection) this.stopListening(this.collection); - this.collection = collection; - this.listenTo(this.collection, 'add', this.render); - this.listenTo(this.collection, 'successOnFetch', this.handleSuccess); - this.listenTo(this.collection, 'errorOnFetch', this.handleError); - }, - render: function (mapperObj, cb) { - - var that = this; - - if (typeof mapperObj === "function") { - var cb = mapperObj; - mapperObj = null; - } - - this.el.innerHTML = ""; - - // in case it is a page where we have to display the mapper card - if (mapperObj) { - var view = new Metamaps.Views.MapperCard({ model: mapperObj }); - - that.el.appendChild( view.render().el ); - } - - - this.collection.each(function (map) { - var view = new Metamaps.Views.MapCard({ model: map }); - - that.el.appendChild( view.render().el ); - }); - this.$el.append('
'); - var m = Metamaps.Famous.maps.surf; - m.setContent(this.el); - - var updateHeight = function(){ - var height = $(that.el).height() + 32 + 56; - m.setSize([undefined, height]); - Metamaps.Famous.maps.lock = false; - if (cb) cb(); - }; - - if (!initialized) { - m.deploy(m._currTarget); - initialized = true; - setTimeout(updateHeight, 100); - } else { - setTimeout(updateHeight, 100); - } - - Metamaps.Loading.hide(); - }, - handleSuccess: function (cb) { - var that = this; - - if (this.collection && this.collection.id === "mapper") { - this.fetchUserThenRender(cb); - } - else { - this.render(cb); - } - }, - handleError: function () { - console.log('error loading maps!'); //TODO - }, - fetchUserThenRender: function (cb) { - var that = this; - // first load the mapper object and then call the render function - $.ajax({ - url: "/users/" + this.collection.mapperId + "/details.json", - success: function (response) { - that.render(response, cb); - }, - error: function () { - that.render(cb); - } - }); - } - }); - - Metamaps.Views.exploreMaps = new mapsWrapper(); -}; - -})(); + Metamaps.Views.exploreMaps = new MapsWrapper() +}