glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Metamaps.Views standard style

Browse source
This commit is contained in:
Devin Howard 2016-03-27 19:50:07 +08:00
parent e8c55df4e8
commit df9c0a93bc
1 changed files with 120 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

244
app/assets/javascripts/src/Metamaps.Views.js.erb
View file

@ -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('<div class="clearfloat"></div>')
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('<div class="clearfloat"></div>');
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()
}