added 20 at a time loading for explore maps pages
This commit is contained in:
parent
2d338bb785
commit
f6245df997
1
Gemfile
1
Gemfile
|
@ -18,6 +18,7 @@ gem 'formtastic'
|
||||||
gem 'json'
|
gem 'json'
|
||||||
gem 'rails3-jquery-autocomplete'
|
gem 'rails3-jquery-autocomplete'
|
||||||
gem 'best_in_place'
|
gem 'best_in_place'
|
||||||
|
gem 'kaminari' # pagination
|
||||||
|
|
||||||
gem 'paperclip'
|
gem 'paperclip'
|
||||||
gem 'aws-sdk'
|
gem 'aws-sdk'
|
||||||
|
|
|
@ -71,6 +71,9 @@ GEM
|
||||||
railties (>= 3.1.0, < 5.0)
|
railties (>= 3.1.0, < 5.0)
|
||||||
thor (~> 0.14)
|
thor (~> 0.14)
|
||||||
json (1.8.1)
|
json (1.8.1)
|
||||||
|
kaminari (0.16.1)
|
||||||
|
actionpack (>= 3.0.0)
|
||||||
|
activesupport (>= 3.0.0)
|
||||||
mail (2.5.4)
|
mail (2.5.4)
|
||||||
mime-types (~> 1.16)
|
mime-types (~> 1.16)
|
||||||
treetop (~> 1.4.8)
|
treetop (~> 1.4.8)
|
||||||
|
@ -156,6 +159,7 @@ DEPENDENCIES
|
||||||
jbuilder (= 0.8.2)
|
jbuilder (= 0.8.2)
|
||||||
jquery-rails (= 2.1.2)
|
jquery-rails (= 2.1.2)
|
||||||
json
|
json
|
||||||
|
kaminari
|
||||||
paperclip
|
paperclip
|
||||||
pg
|
pg
|
||||||
rails (= 3.2.17)
|
rails (= 3.2.17)
|
||||||
|
|
|
@ -77,6 +77,9 @@ Metamaps.Backbone.MapsCollection = Backbone.Collection.extend({
|
||||||
initialize: function(models, options) {
|
initialize: function(models, options) {
|
||||||
this.id = options.id;
|
this.id = options.id;
|
||||||
this.sortBy = options.sortBy;
|
this.sortBy = options.sortBy;
|
||||||
|
|
||||||
|
// this.page represents the NEXT page to fetch
|
||||||
|
this.page = models.length > 0 ? (models.length < 20 ? "loadedAll" : 2) : 1;
|
||||||
},
|
},
|
||||||
url: function() {
|
url: function() {
|
||||||
return '/explore/' + this.id + '.json';
|
return '/explore/' + this.id + '.json';
|
||||||
|
@ -101,10 +104,15 @@ Metamaps.Backbone.MapsCollection = Backbone.Collection.extend({
|
||||||
|
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
|
if (this.page != "loadedAll") {
|
||||||
|
var numBefore = this.length;
|
||||||
this.fetch({
|
this.fetch({
|
||||||
reset: true,
|
remove: false,
|
||||||
|
data: { page: this.page },
|
||||||
success: function (collection, response, options) {
|
success: 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
|
||||||
|
if (collection.length - numBefore < 20) self.page = "loadedAll";
|
||||||
|
else self.page += 1;
|
||||||
self.trigger('successOnFetch');
|
self.trigger('successOnFetch');
|
||||||
},
|
},
|
||||||
error: function (collection, response, options) {
|
error: function (collection, response, options) {
|
||||||
|
@ -113,6 +121,7 @@ Metamaps.Backbone.MapsCollection = Backbone.Collection.extend({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
Metamaps.Backbone.Mapper = Backbone.Model.extend({
|
Metamaps.Backbone.Mapper = Backbone.Model.extend({
|
||||||
|
|
|
@ -83,7 +83,6 @@ Metamaps.GlobalUI = {
|
||||||
var myCollection = Metamaps.Maps.Mine ? Metamaps.Maps.Mine : [];
|
var myCollection = Metamaps.Maps.Mine ? Metamaps.Maps.Mine : [];
|
||||||
var featuredCollection = Metamaps.Maps.Featured ? Metamaps.Maps.Featured : [];
|
var featuredCollection = Metamaps.Maps.Featured ? Metamaps.Maps.Featured : [];
|
||||||
var activeCollection = Metamaps.Maps.Active ? Metamaps.Maps.Active : [];
|
var activeCollection = Metamaps.Maps.Active ? Metamaps.Maps.Active : [];
|
||||||
var newCollection = Metamaps.Maps.New ? Metamaps.Maps.New : [];
|
|
||||||
Metamaps.Maps.Mine = new Metamaps.Backbone.MapsCollection(myCollection, {id: 'mine', sortBy: 'name' });
|
Metamaps.Maps.Mine = new Metamaps.Backbone.MapsCollection(myCollection, {id: 'mine', sortBy: 'name' });
|
||||||
Metamaps.Maps.Featured = new Metamaps.Backbone.MapsCollection(featuredCollection, {id: 'featured', sortBy: 'name' });
|
Metamaps.Maps.Featured = new Metamaps.Backbone.MapsCollection(featuredCollection, {id: 'featured', sortBy: 'name' });
|
||||||
Metamaps.Maps.Active = new Metamaps.Backbone.MapsCollection(activeCollection, {id: 'active', sortBy: 'updated_at' });
|
Metamaps.Maps.Active = new Metamaps.Backbone.MapsCollection(activeCollection, {id: 'active', sortBy: 'updated_at' });
|
||||||
|
|
|
@ -26,6 +26,7 @@
|
||||||
Metamaps.Famous.yield.hide();
|
Metamaps.Famous.yield.hide();
|
||||||
|
|
||||||
Metamaps.Famous.explore.set('mine');
|
Metamaps.Famous.explore.set('mine');
|
||||||
|
Metamaps.Famous.maps.resetScroll(); // sets the scroll back to the top
|
||||||
Metamaps.Famous.explore.show();
|
Metamaps.Famous.explore.show();
|
||||||
|
|
||||||
Metamaps.Famous.maps.show();
|
Metamaps.Famous.maps.show();
|
||||||
|
@ -89,6 +90,7 @@
|
||||||
|
|
||||||
Metamaps.Famous.yield.hide();
|
Metamaps.Famous.yield.hide();
|
||||||
|
|
||||||
|
Metamaps.Famous.maps.resetScroll(); // sets the scroll back to the top
|
||||||
Metamaps.Famous.maps.show();
|
Metamaps.Famous.maps.show();
|
||||||
Metamaps.Famous.explore.set(section);
|
Metamaps.Famous.explore.set(section);
|
||||||
Metamaps.Famous.explore.show();
|
Metamaps.Famous.explore.show();
|
||||||
|
|
|
@ -17,12 +17,6 @@ Metamaps.Views.init = function () {
|
||||||
return this.model.id;
|
return this.model.id;
|
||||||
},
|
},
|
||||||
|
|
||||||
events: {
|
|
||||||
"click .icon": "open",
|
|
||||||
"click .button.edit": "openEditDialog",
|
|
||||||
"click .button.delete": "destroy"
|
|
||||||
},
|
|
||||||
|
|
||||||
initialize: function () {
|
initialize: function () {
|
||||||
this.listenTo(this.model, "change", this.render);
|
this.listenTo(this.model, "change", this.render);
|
||||||
},
|
},
|
||||||
|
@ -56,11 +50,21 @@ Metamaps.Views.init = function () {
|
||||||
|
|
||||||
that.el.appendChild( view.render().el );
|
that.el.appendChild( view.render().el );
|
||||||
});
|
});
|
||||||
|
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 height = $(that.el).height() + 32 + 56;
|
||||||
|
m.setSize([undefined, height]);
|
||||||
|
}, 100);
|
||||||
|
|
||||||
if (!initialized) {
|
if (!initialized) {
|
||||||
m.deploy(m._currTarget);
|
m.deploy(m._currTarget);
|
||||||
initialized = true;
|
initialized = true;
|
||||||
|
setTimeout(function(){
|
||||||
|
var height = $(that.el).height() + 32 + 56;
|
||||||
|
m.setSize([undefined, height]);
|
||||||
|
}, 100);
|
||||||
}
|
}
|
||||||
|
|
||||||
Metamaps.Loading.loader.hide();
|
Metamaps.Loading.loader.hide();
|
||||||
|
|
|
@ -1391,7 +1391,7 @@ Metamaps.Realtime = {
|
||||||
var mapperm = Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
|
var mapperm = Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
|
||||||
|
|
||||||
if (mapperm) {
|
if (mapperm) {
|
||||||
self.socket = io.connect('http://localhost:5001');
|
self.socket = io.connect('http://gentle-savannah-1303.herokuapp.com');
|
||||||
self.socket.on('connect', function () {
|
self.socket.on('connect', function () {
|
||||||
console.log('socket connected');
|
console.log('socket connected');
|
||||||
self.setupSocket();
|
self.setupSocket();
|
||||||
|
|
|
@ -532,7 +532,7 @@ font-family: 'LatoLight';
|
||||||
/* Map Cards */
|
/* Map Cards */
|
||||||
|
|
||||||
.map {
|
.map {
|
||||||
display:inline-block;
|
float:left;
|
||||||
width:220px;
|
width:220px;
|
||||||
height:340px;
|
height:340px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
|
@ -698,7 +698,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mapsWrapper {
|
.mapsWrapper {
|
||||||
overflow-y: auto;
|
/*overflow-y: auto; */
|
||||||
padding: 32px 32px 56px 32px;
|
padding: 32px 32px 56px 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -13,7 +13,7 @@ class MainController < ApplicationController
|
||||||
respond_to do |format|
|
respond_to do |format|
|
||||||
format.html {
|
format.html {
|
||||||
if authenticated?
|
if authenticated?
|
||||||
@maps = Map.order("name ASC").find_all_by_user_id(@current.id)
|
@maps = Map.where("maps.user_id = ?", @current.id).order("name ASC").page(1).per(20)
|
||||||
respond_with(@maps, @current)
|
respond_with(@maps, @current)
|
||||||
else
|
else
|
||||||
respond_with(@current)
|
respond_with(@current)
|
||||||
|
|
|
@ -18,47 +18,44 @@ class MapsController < ApplicationController
|
||||||
|
|
||||||
@current = current_user
|
@current = current_user
|
||||||
@user = nil
|
@user = nil
|
||||||
|
@maps = []
|
||||||
|
|
||||||
|
if !params[:page]
|
||||||
|
page = 1
|
||||||
|
else
|
||||||
|
page = params[:page]
|
||||||
|
end
|
||||||
|
|
||||||
if request.path.index("/explore/active") != nil
|
if request.path.index("/explore/active") != nil
|
||||||
@maps = Map.order("updated_at DESC").limit(20)
|
@maps = Map.where("maps.permission != ?", "private").order("updated_at DESC").page(page).per(20)
|
||||||
@request = "active"
|
@request = "active"
|
||||||
|
|
||||||
elsif request.path.index("/explore/featured") != nil
|
elsif request.path.index("/explore/featured") != nil
|
||||||
@maps = Map.order("name ASC").find_all_by_featured(true)
|
@maps = Map.where("maps.featured = ? AND maps.permission != ?", true, "private").order("name ASC").page(page).per(20)
|
||||||
@request = "featured"
|
@request = "featured"
|
||||||
|
|
||||||
elsif request.path.index('/explore/mine') != nil # looking for maps by me
|
elsif request.path.index('/explore/mine') != nil # looking for maps by me
|
||||||
if !authenticated?
|
if !authenticated?
|
||||||
redirect_to activemaps_url and return
|
redirect_to activemaps_url and return
|
||||||
end
|
end
|
||||||
@maps = Map.order("name ASC").find_all_by_user_id(@current.id)
|
# don't need to exclude private maps because they all belong to you
|
||||||
|
@maps = Map.where("maps.user_id = ?", @current.id).order("name ASC").page(page).per(20)
|
||||||
@request = "you"
|
@request = "you"
|
||||||
|
|
||||||
elsif request.path.index('/maps/mappers/') != nil # looking for maps by a mapper
|
elsif request.path.index('/explore/mappers/') != nil # looking for maps by a mapper
|
||||||
@user = User.find(params[:id])
|
@user = User.find(params[:id])
|
||||||
@maps = Map.order("name ASC").find_all_by_user_id(@user.id)
|
@maps = Map.where("maps.user_id = ? AND maps.permission != ?", @user.id, "private").order("name ASC").page(page).per(20)
|
||||||
if authenticated? && @user == @current
|
|
||||||
@request = "you"
|
|
||||||
else
|
|
||||||
@request = "other"
|
@request = "other"
|
||||||
end
|
|
||||||
|
|
||||||
elsif request.path.index('/explore/topics/') != nil # looking for maps by a certain topic they include
|
elsif request.path.index('/explore/topics/') != nil # looking for maps by a certain topic they include
|
||||||
@topic = Topic.find(params[:id]).authorize_to_show(@current)
|
@topic = Topic.find(params[:id]).authorize_to_show(@current)
|
||||||
if !@topic
|
if !@topic
|
||||||
redirect_to featuredmaps_url, notice: "Access denied." and return
|
redirect_to featuredmaps_url, notice: "Access denied." and return
|
||||||
end
|
end
|
||||||
@maps = @topic.maps
|
@maps = @topic.maps.delete_if {|m| m.permission == "private" && (!authenticated? || (authenticated? && @current.id != m.user_id)) }
|
||||||
@request = "topic"
|
@request = "topic"
|
||||||
end
|
end
|
||||||
|
|
||||||
#read this next line as 'delete a map if its private and you're either 1. logged out or 2. logged in but not the map creator
|
|
||||||
if @maps
|
|
||||||
@maps.delete_if {|m| m.permission == "private" && (!authenticated? || (authenticated? && @current.id != m.user_id)) }
|
|
||||||
else
|
|
||||||
@maps = []
|
|
||||||
end
|
|
||||||
|
|
||||||
respond_to do |format|
|
respond_to do |format|
|
||||||
format.html {
|
format.html {
|
||||||
if @request == "you"
|
if @request == "you"
|
||||||
|
|
|
@ -13,12 +13,6 @@
|
||||||
<% elsif @request == "featured" %>
|
<% elsif @request == "featured" %>
|
||||||
Metamaps.Maps.Featured = <%= @maps.to_json.html_safe %>;
|
Metamaps.Maps.Featured = <%= @maps.to_json.html_safe %>;
|
||||||
Metamaps.currentPage = "featured";
|
Metamaps.currentPage = "featured";
|
||||||
<% elsif @request == "new" %>
|
|
||||||
Metamaps.Maps.New = <%= @maps.to_json.html_safe %>;
|
|
||||||
Metamaps.currentPage = "new";
|
|
||||||
<% elsif @request == "you" %>
|
|
||||||
Metamaps.Maps.Mine = <%= @maps.to_json.html_safe %>;
|
|
||||||
Metamaps.currentPage = "mine";
|
|
||||||
<% end %>
|
<% end %>
|
||||||
Metamaps.currentSection = "explore";
|
Metamaps.currentSection = "explore";
|
||||||
Metamaps.GlobalUI.Search.isOpen = true;
|
Metamaps.GlobalUI.Search.isOpen = true;
|
||||||
|
|
|
@ -5,6 +5,9 @@ define(function(require, exports, module) {
|
||||||
var Transform = require('famous/core/Transform');
|
var Transform = require('famous/core/Transform');
|
||||||
var Surface = require('famous/core/Surface');
|
var Surface = require('famous/core/Surface');
|
||||||
var Timer = require('famous/utilities/Timer');
|
var Timer = require('famous/utilities/Timer');
|
||||||
|
var Scrollview = require('famous/views/Scrollview');
|
||||||
|
var ContainerSurface = require('famous/surfaces/ContainerSurface');
|
||||||
|
var RenderNode = require('famous/core/RenderNode');
|
||||||
|
|
||||||
var templates = require('templates');
|
var templates = require('templates');
|
||||||
|
|
||||||
|
@ -112,9 +115,13 @@ define(function(require, exports, module) {
|
||||||
// CONTENT / OTHER PAGES
|
// CONTENT / OTHER PAGES
|
||||||
f.maps = {};
|
f.maps = {};
|
||||||
f.maps.surf = new Surface({
|
f.maps.surf = new Surface({
|
||||||
|
size: [undefined, true], // this will get set to a specific height later in order to work
|
||||||
classes: ['mapsWrapper'],
|
classes: ['mapsWrapper'],
|
||||||
|
});
|
||||||
|
var mapsContainer = new ContainerSurface({
|
||||||
|
size: [undefined, undefined],
|
||||||
properties: {
|
properties: {
|
||||||
display: 'none'
|
overflow: 'hidden',
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
var loadMaps = function () {
|
var loadMaps = function () {
|
||||||
|
@ -126,29 +133,53 @@ define(function(require, exports, module) {
|
||||||
f.maps.surf.on('deploy', loadMaps);
|
f.maps.surf.on('deploy', loadMaps);
|
||||||
}
|
}
|
||||||
f.maps.mod = new Modifier({
|
f.maps.mod = new Modifier({
|
||||||
origin: [0.5, 1],
|
origin: [0.5, 0],
|
||||||
opacity: 0
|
opacity: 0,
|
||||||
|
transform: Transform.translate(window.innerWidth,94,0)
|
||||||
});
|
});
|
||||||
f.maps.mod.sizeFrom(function(){
|
f.maps.mod.sizeFrom(function(){
|
||||||
return [window.innerWidth, window.innerHeight - 94];
|
return [window.innerWidth, window.innerHeight - 94];
|
||||||
});
|
});
|
||||||
f.maps.show = function () {
|
f.maps.show = function () {
|
||||||
f.maps.surf.setProperties({ "display":"block" });
|
// set into the correct position and then fade in
|
||||||
|
f.maps.mod.setTransform(Transform.translate(0, 94, 0));
|
||||||
f.maps.mod.setOpacity(
|
f.maps.mod.setOpacity(
|
||||||
1,
|
1,
|
||||||
{ duration: 300 }
|
{ duration: 300 }
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
f.maps.hide = function () {
|
f.maps.hide = function () {
|
||||||
|
// fade out and then position it offscreen
|
||||||
f.maps.mod.setOpacity(
|
f.maps.mod.setOpacity(
|
||||||
0,
|
0,
|
||||||
{ duration: 300 },
|
{ duration: 300 },
|
||||||
function() {
|
function() {
|
||||||
f.maps.surf.setProperties({"display": "none"});
|
f.maps.mod.setTransform(Transform.translate(window.innerWidth, 94, 0));
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
f.mainContext.add(f.maps.mod).add(f.maps.surf);
|
var mapsScroll = new Scrollview();
|
||||||
|
mapsScroll._scroller.on('edgeHit', function(data){
|
||||||
|
if (data.position > 0 &&
|
||||||
|
Metamaps.Views &&
|
||||||
|
Metamaps.Views.exploreMaps &&
|
||||||
|
Metamaps.Views.exploreMaps.collection &&
|
||||||
|
Metamaps.Views.exploreMaps.collection.page != "loadedAll") {
|
||||||
|
Metamaps.Views.exploreMaps.collection.getMaps();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
f.maps.resetScroll = function() {
|
||||||
|
// set the scrollView back to the top
|
||||||
|
mapsScroll._physicsEngine.detachAll();
|
||||||
|
mapsScroll.setVelocity(0);
|
||||||
|
mapsScroll.setPosition(0);
|
||||||
|
};
|
||||||
|
mapsScroll.sequenceFrom([f.maps.surf]);
|
||||||
|
f.maps.surf.pipe(mapsScroll);
|
||||||
|
mapsContainer.add(mapsScroll);
|
||||||
|
var mapsNode = new RenderNode(f.maps.mod);
|
||||||
|
mapsNode.add(mapsContainer);
|
||||||
|
f.mainContext.add(mapsNode);
|
||||||
|
|
||||||
f.loadMaps = function () {
|
f.loadMaps = function () {
|
||||||
if (Metamaps.currentSection === "explore") {
|
if (Metamaps.currentSection === "explore") {
|
||||||
|
|
Loading…
Reference in a new issue