Metamaps.Views standard style

app/assets/javascripts/src/Metamaps.Views.js.erb

@@ -1,133 +1,129 @@
-(function () {
+/* global Metamaps, $, Hogan, Backbone */
-    Metamaps.Views = {};
 
-    var initialized = false;
+/*
+ * Metamaps.Views.js.erb
+ *
+ * Dependencies:
+ *  - Metamaps.Famous
+ *  - Metamaps.Loading
+ */
+
+Metamaps.Views = {
+  initialized: false
+}
 
 Metamaps.Views.init = function () {
-
   Metamaps.Views.MapperCard = Backbone.View.extend({
-
     template: Hogan.compile($('#mapperCardTemplate').html()),
 
-        tagNamea: "div",
+    tagNamea: 'div',
 
-        className: "mapper",
+    className: 'mapper',
 
     render: function () {
-            this.$el.html( this.template.render(this.model) );
+      this.$el.html(this.template.render(this.model))
-            return this;
+      return this
     }
-    });
+  })
 
   Metamaps.Views.MapCard = Backbone.View.extend({
-
     template: Hogan.compile($('#mapCardTemplate').html()),
 
-        tagName: "div",
+    tagName: 'div',
 
-        className: "map",
+    className: 'map',
 
     id: function () {
-            return this.model.id;
+      return this.model.id
     },
 
     initialize: function () {
-            this.listenTo(this.model, "change", this.render);
+      this.listenTo(this.model, 'change', this.render)
     },
 
     render: function () {
-            this.$el.html( this.template.render(this.model.attrForCards()) );
+      this.$el.html(this.template.render(this.model.attrForCards()))
-            return this;
+      return this
     }
 
-    });
+  })
 
-    var mapsWrapper = Backbone.View.extend({
+  var MapsWrapper = Backbone.View.extend({
-
+    initialize: function (opts) {},
-        initialize: function (opts) {
-            
-        },
     setCollection: function (collection) {
-            if (this.collection) this.stopListening(this.collection);
+      if (this.collection) this.stopListening(this.collection)
-            this.collection = collection;
+      this.collection = collection
-            this.listenTo(this.collection, 'add', this.render);
+      this.listenTo(this.collection, 'add', this.render)
-            this.listenTo(this.collection, 'successOnFetch', this.handleSuccess);
+      this.listenTo(this.collection, 'successOnFetch', this.handleSuccess)
-            this.listenTo(this.collection, 'errorOnFetch', this.handleError);
+      this.listenTo(this.collection, 'errorOnFetch', this.handleError)
     },
-        render: function (mapperObj, cb) {
+    render: function (mapperObj, cbArg) {
+      var that = this
 
-            var that = this;
+      if (typeof mapperObj === 'function') {
-
+        var cb = mapperObj
-            if (typeof mapperObj === "function") {
+        mapperObj = null
-                var cb = mapperObj;
-                mapperObj = null;
       }
 
-            this.el.innerHTML = "";
+      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 });
+        var view = new Metamaps.Views.MapperCard({ model: mapperObj })
 
-                that.el.appendChild( view.render().el );
+        that.el.appendChild(view.render().el)
       }
 
-
       this.collection.each(function (map) {
-                var view = new Metamaps.Views.MapCard({ model: map });
+        var view = new Metamaps.Views.MapCard({ model: map })
 
-                that.el.appendChild( view.render().el );
+        that.el.appendChild(view.render().el)
-            });
+      })
-            this.$el.append('<div class="clearfloat"></div>');
+      this.$el.append('<div class="clearfloat"></div>')
-            var m = Metamaps.Famous.maps.surf;
+      var m = Metamaps.Famous.maps.surf
-            m.setContent(this.el);
+      m.setContent(this.el)
 
       var updateHeight = function () {
-                var height = $(that.el).height() + 32 + 56;
+        var height = $(that.el).height() + 32 + 56
-                m.setSize([undefined, height]);
+        m.setSize([undefined, height])
-                Metamaps.Famous.maps.lock = false;
+        Metamaps.Famous.maps.lock = false
-                if (cb) cb();
+        if (cb) cb()
-            };
-
-            if (!initialized) {
-                m.deploy(m._currTarget);
-                initialized = true;
-                setTimeout(updateHeight, 100);
-            } else {
-                setTimeout(updateHeight, 100);
       }
 
-            Metamaps.Loading.hide();
+      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) {
-            var that = this;
+      if (this.collection && this.collection.id === 'mapper') {
-
+        this.fetchUserThenRender(cb)
-            if (this.collection && this.collection.id === "mapper") {
+      } else {
-                this.fetchUserThenRender(cb);
+        this.render(cb)
-            }
-            else {
-                this.render(cb);
       }
     },
     handleError: function () {
-            console.log('error loading maps!'); //TODO 
+      console.log('error loading maps!') // TODO
     },
     fetchUserThenRender: function (cb) {
-            var that = this;
+      var that = this
       // first load the mapper object and then call the render function
       $.ajax({
-                url: "/users/" + this.collection.mapperId + "/details.json",
+        url: '/users/' + this.collection.mapperId + '/details.json',
         success: function (response) {
-                    that.render(response, cb);
+          that.render(response, cb)
         },
         error: function () {
-                    that.render(cb);
+          that.render(cb)
         }
-            });
+      })
     }
-    });
+  })
 
-    Metamaps.Views.exploreMaps = new mapsWrapper();
+  Metamaps.Views.exploreMaps = new MapsWrapper()
-};
+}
-
-})();