active lists are sorting right. explore url breaking doesn't happen. explore maps pages do nicer infinite scrolling, properly loading only 20 at a time

This commit is contained in:
Connor Turland 2015-01-31 12:39:48 -05:00
parent 4d7695a767
commit 531f09c6d3
6 changed files with 66 additions and 46 deletions

View file

@ -1,7 +1,7 @@
Metamaps.Backbone = {}; Metamaps.Backbone = {};
Metamaps.Backbone.Map = Backbone.Model.extend({ Metamaps.Backbone.Map = Backbone.Model.extend({
urlRoot: '/maps', urlRoot: '/maps',
blacklist: ['created_at', 'updated_at', 'user_name', 'contributor_count', 'topic_count', 'synapse_count', 'topics', 'synapses', 'mappings', 'mappers'], blacklist: ['created_at', 'updated_at', 'created_at_clean', 'updated_at_clean', 'user_name', 'contributor_count', 'topic_count', 'synapse_count', 'topics', 'synapses', 'mappings', 'mappers'],
toJSON: function (options) { toJSON: function (options) {
return _.omit(this.attributes, this.blacklist); return _.omit(this.attributes, this.blacklist);
}, },
@ -169,10 +169,12 @@ Metamaps.Backbone.MapsCollection = Backbone.Collection.extend({
temp = a; temp = a;
a = b; a = b;
b = temp; b = temp;
a = (new Date(a)).getTime();
b = (new Date(b)).getTime();
} }
return a > b ? 1 : a < b ? -1 : 0; return a > b ? 1 : a < b ? -1 : 0;
}, },
getMaps: function () { getMaps: function (cb) {
var self = this; var self = this;
@ -190,7 +192,7 @@ Metamaps.Backbone.MapsCollection = Backbone.Collection.extend({
self.page = "loadedAll"; self.page = "loadedAll";
} }
else self.page += 1; else self.page += 1;
self.trigger('successOnFetch'); self.trigger('successOnFetch', cb);
}, },
error: function (collection, response, options) { error: function (collection, response, options) {
// you can pass additional options to the event you trigger here as well // you can pass additional options to the event you trigger here as well
@ -199,7 +201,7 @@ Metamaps.Backbone.MapsCollection = Backbone.Collection.extend({
}); });
} }
else { else {
self.trigger('successOnFetch'); self.trigger('successOnFetch', cb);
} }
} }
}); });

View file

@ -22,6 +22,11 @@
var classes = Metamaps.Active.Mapper ? "homePage explorePage" : "homePage"; var classes = Metamaps.Active.Mapper ? "homePage explorePage" : "homePage";
$('.wrapper').addClass(classes); $('.wrapper').addClass(classes);
var navigate = function() {
Metamaps.routerTimeoutId = setTimeout(function() {
Metamaps.Router.navigate("");
}, 300);
};
// all this only for the logged in home page // all this only for the logged in home page
if (Metamaps.Active.Mapper) { if (Metamaps.Active.Mapper) {
@ -38,10 +43,10 @@
Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps.Active ); Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps.Active );
if (Metamaps.Maps.Active.length === 0) { if (Metamaps.Maps.Active.length === 0) {
Metamaps.Maps.Active.getMaps(); // this will trigger an explore maps render Metamaps.Maps.Active.getMaps(navigate); // this will trigger an explore maps render
} }
else { else {
Metamaps.Views.exploreMaps.render(); Metamaps.Views.exploreMaps.render(navigate);
} }
} }
// logged out home page // logged out home page
@ -55,10 +60,7 @@
Metamaps.GlobalUI.Search.close(0, true); Metamaps.GlobalUI.Search.close(0, true);
Metamaps.Famous.maps.hide(); Metamaps.Famous.maps.hide();
clearTimeout(Metamaps.routerTimeoutId); Metamaps.routerTimeoutId = setTimeout(navigate, 500);
Metamaps.routerTimeoutId = setTimeout(function(){
Metamaps.Router.navigate("");
}, 500);
} }
Metamaps.Famous.viz.hide(); Metamaps.Famous.viz.hide();
@ -110,18 +112,32 @@
} }
Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps[capitalize] ); Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps[capitalize] );
var navigate = function(){
var path = "/explore/" + Metamaps.currentPage;
// alter url if for mapper profile page
if (Metamaps.currentPage == "mapper") {
path += "/" + Metamaps.Maps.Mapper.mapperId;
}
Metamaps.Router.navigate(path);
};
var navigateTimeout = function() {
Metamaps.routerTimeoutId = setTimeout(navigate, 300);
};
if (Metamaps.Maps[capitalize].length === 0) { if (Metamaps.Maps[capitalize].length === 0) {
Metamaps.Loading.show(); Metamaps.Loading.show();
setTimeout(function(){ setTimeout(function(){
Metamaps.Maps[capitalize].getMaps(); // this will trigger an explore maps render Metamaps.Maps[capitalize].getMaps(navigate); // this will trigger an explore maps render
}, 300); // wait 300 milliseconds till the other animations are done to do the fetch }, 300); // wait 300 milliseconds till the other animations are done to do the fetch
} }
else { else {
if (id) { if (id) {
Metamaps.Views.exploreMaps.fetchUserThenRender(); Metamaps.Views.exploreMaps.fetchUserThenRender(navigateTimeout);
} }
else { else {
Metamaps.Views.exploreMaps.render(); Metamaps.Views.exploreMaps.render(navigateTimeout);
} }
} }

View file

@ -54,10 +54,15 @@ Metamaps.Views.init = function () {
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) { render: function (mapperObj, cb) {
var that = this; var that = this;
if (typeof mapperObj === "function") {
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 // in case it is a page where we have to display the mapper card
@ -76,58 +81,47 @@ Metamaps.Views.init = function () {
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);
setTimeout(function(){
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]);
}, 100); Metamaps.Famous.maps.lock = false;
if (cb) cb();
};
if (!initialized) { if (!initialized) {
m.deploy(m._currTarget); m.deploy(m._currTarget);
initialized = true; initialized = true;
setTimeout(function(){ setTimeout(updateHeight, 100);
var height = $(that.el).height() + 32 + 56; } else {
m.setSize([undefined, height]); setTimeout(updateHeight, 100);
}, 100);
} }
Metamaps.Loading.hide(); Metamaps.Loading.hide();
Metamaps.Famous.maps.lock = false;
clearTimeout(Metamaps.routerTimeoutId);
Metamaps.routerTimeoutId = setTimeout((function(localCurrentPage){ return function(){
var path = (Metamaps.currentSection == "") ? "" : "/explore/" + localCurrentPage;
// alter url if for mapper profile page
if (that.collection && that.collection.mapperId) {
path += "/" + that.collection.mapperId;
}
Metamaps.Router.navigate(path);
}})(Metamaps.currentPage), 500);
}, },
handleSuccess: function () { handleSuccess: function (cb) {
var that = this; var that = this;
if (this.collection && this.collection.id === "mapper") { if (this.collection && this.collection.id === "mapper") {
this.fetchUserThenRender(); this.fetchUserThenRender(cb);
} }
else { else {
this.render(); this.render(cb);
} }
}, },
handleError: function () { handleError: function () {
console.log('error loading maps!'); //TODO console.log('error loading maps!'); //TODO
}, },
fetchUserThenRender: function () { fetchUserThenRender: function (cb) {
var that = this; var that = this;
// first load the mapper object and then call the render function // first load the mapper object and then call the render function
$.ajax({ $.ajax({
url: "/users/" + this.collection.mapperId + "/details.json", url: "/users/" + this.collection.mapperId + "/details.json",
success: function (response) { success: function (response) {
that.render(response); that.render(response, cb);
}, },
error: function () { error: function () {
that.render(cb);
} }
}); });
} }

View file

@ -4744,7 +4744,7 @@ Metamaps.Map.InfoBox = {
var map = Metamaps.Active.Map; var map = Metamaps.Active.Map;
var obj = map.pick("permission","contributor_count","topic_count","synapse_count","created_at","updated_at"); var obj = map.pick("permission","contributor_count","topic_count","synapse_count");
var isCreator = map.authorizePermissionChange(Metamaps.Active.Mapper); var isCreator = map.authorizePermissionChange(Metamaps.Active.Mapper);
var canEdit = map.authorizeToEdit(Metamaps.Active.Mapper); var canEdit = map.authorizeToEdit(Metamaps.Active.Mapper);
@ -4758,6 +4758,8 @@ Metamaps.Map.InfoBox = {
obj["contributor_image"] = Metamaps.Mappers.length > 0 ? Metamaps.Mappers.models[0].get("image") : "/assets/user.png"; obj["contributor_image"] = Metamaps.Mappers.length > 0 ? Metamaps.Mappers.models[0].get("image") : "/assets/user.png";
obj["contributor_list"] = self.createContributorList(); obj["contributor_list"] = self.createContributorList();
obj["user_name"] = isCreator ? "You" : map.get("user_name"); obj["user_name"] = isCreator ? "You" : map.get("user_name");
obj["created_at"] = map.get("created_at_clean");
obj["updated_at"] = map.get("updated_at_clean");
var classes = isCreator ? "yourMap" : ""; var classes = isCreator ? "yourMap" : "";
classes += canEdit ? " canEdit" : ""; classes += canEdit ? " canEdit" : "";

View file

@ -76,9 +76,9 @@ class Map < ActiveRecord::Base
end end
def as_json(options={}) def as_json(options={})
json = super(:methods =>[:user_name, :user_image, :topic_count, :synapse_count, :contributor_count, :screenshot_url], :except => [:screenshot_content_type, :screenshot_file_size, :screenshot_file_name, :screenshot_updated_at, :created_at, :updated_at]) json = super(:methods =>[:user_name, :user_image, :topic_count, :synapse_count, :contributor_count, :screenshot_url], :except => [:screenshot_content_type, :screenshot_file_size, :screenshot_file_name, :screenshot_updated_at])
json[:created_at] = self.created_at_str json[:created_at_clean] = self.created_at_str
json[:updated_at] = self.updated_at_str json[:updated_at_clean] = self.updated_at_str
json json
end end

View file

@ -207,9 +207,15 @@ Metamaps.Famous.build = function () {
}; };
var mapsScroll = new Scrollview(); var mapsScroll = new Scrollview();
f.maps.lock = false; f.maps.lock = false;
mapsScroll._scroller.on('edgeHit', function(data){ mapsScroll._eventInput.on('update', _.throttle(function(data) {
var bottom = f.maps.surf.getSize()[1], // how far down it goes
pos = mapsScroll.getPosition(), // how far down you are
containerSize = f.maps.mod.getSize()[1], // height of the viewable area
distanceToBottom = bottom - (pos + containerSize),
triggerDistance = 700;
if (!f.maps.lock && if (!f.maps.lock &&
data.position > 0 && distanceToBottom < triggerDistance &&
Metamaps.Views && Metamaps.Views &&
Metamaps.Views.exploreMaps && Metamaps.Views.exploreMaps &&
Metamaps.Views.exploreMaps.collection && Metamaps.Views.exploreMaps.collection &&
@ -217,7 +223,7 @@ Metamaps.Famous.build = function () {
f.maps.lock = true; f.maps.lock = true;
Metamaps.Views.exploreMaps.collection.getMaps(); Metamaps.Views.exploreMaps.collection.getMaps();
} }
}); }, 500));
f.maps.resetScroll = function() { f.maps.resetScroll = function() {
// set the scrollView back to the top // set the scrollView back to the top
mapsScroll._physicsEngine.detachAll(); mapsScroll._physicsEngine.detachAll();