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

added 20 at a time loading for explore maps pages

Browse source
This commit is contained in:
Connor Turland 2014-08-20 15:37:18 -04:00
parent 2d338bb785
commit f6245df997
13 changed files with 96 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Gemfile
View file

@ -18,6 +18,7 @@ gem 'formtastic'
gem 'json'
gem 'rails3-jquery-autocomplete'
gem 'best_in_place'
gem 'kaminari' # pagination
gem 'paperclip'
gem 'aws-sdk'

4
Gemfile.lock
View file

@ -71,6 +71,9 @@ GEM
railties (>= 3.1.0, < 5.0)
thor (~> 0.14)
json (1.8.1)
kaminari (0.16.1)
actionpack (>= 3.0.0)
activesupport (>= 3.0.0)
mail (2.5.4)
mime-types (~> 1.16)
treetop (~> 1.4.8)
@ -156,6 +159,7 @@ DEPENDENCIES
jbuilder (= 0.8.2)
jquery-rails (= 2.1.2)
json
kaminari
paperclip
pg
rails (= 3.2.17)

31
app/assets/javascripts/metamaps/Metamaps.Backbone.js
View file

@ -77,6 +77,9 @@ Metamaps.Backbone.MapsCollection = Backbone.Collection.extend({
initialize: function(models, options) {
this.id = options.id;
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() {
return '/explore/' + this.id + '.json';
@ -101,17 +104,23 @@ Metamaps.Backbone.MapsCollection = Backbone.Collection.extend({
var self = this;
this.fetch({
reset: true,
success: function (collection, response, options) {
// you can pass additional options to the event you trigger here as well
self.trigger('successOnFetch');
},
error: function (collection, response, options) {
// you can pass additional options to the event you trigger here as well
self.trigger('errorOnFetch');
}
});
if (this.page != "loadedAll") {
var numBefore = this.length;
this.fetch({
remove: false,
data: { page: this.page },
success: function (collection, response, options) {
// 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');
},
error: function (collection, response, options) {
// you can pass additional options to the event you trigger here as well
self.trigger('errorOnFetch');
}
});
}
}
});

7
app/assets/javascripts/metamaps/Metamaps.GlobalUI.js
View file

@ -83,10 +83,9 @@ Metamaps.GlobalUI = {
var myCollection = Metamaps.Maps.Mine ? Metamaps.Maps.Mine : [];
var featuredCollection = Metamaps.Maps.Featured ? Metamaps.Maps.Featured : [];
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.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.Mine = new Metamaps.Backbone.MapsCollection(myCollection, {id: 'mine', 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' });
},
openLightbox: function (which) {
var self = Metamaps.GlobalUI;

2
app/assets/javascripts/metamaps/Metamaps.Router.js
View file

@ -26,6 +26,7 @@
Metamaps.Famous.yield.hide();
Metamaps.Famous.explore.set('mine');
Metamaps.Famous.maps.resetScroll(); // sets the scroll back to the top
Metamaps.Famous.explore.show();
Metamaps.Famous.maps.show();
@ -89,6 +90,7 @@
Metamaps.Famous.yield.hide();
Metamaps.Famous.maps.resetScroll(); // sets the scroll back to the top
Metamaps.Famous.maps.show();
Metamaps.Famous.explore.set(section);
Metamaps.Famous.explore.show();

16
app/assets/javascripts/metamaps/Metamaps.Views.js
View file

@ -17,12 +17,6 @@ Metamaps.Views.init = function () {
return this.model.id;
},
events: {
"click .icon": "open",
"click .button.edit": "openEditDialog",
"click .button.delete": "destroy"
},
initialize: function () {
this.listenTo(this.model, "change", this.render);
},
@ -56,11 +50,21 @@ Metamaps.Views.init = function () {
that.el.appendChild( view.render().el );
});
this.$el.append('<div class="clearfloat"></div>');
var m = Metamaps.Famous.maps.surf;
m.setContent(this.el);
setTimeout(function(){
var height = $(that.el).height() + 32 + 56;
m.setSize([undefined, height]);
}, 100);
if (!initialized) {
m.deploy(m._currTarget);
initialized = true;
setTimeout(function(){
var height = $(that.el).height() + 32 + 56;
m.setSize([undefined, height]);
}, 100);
}
Metamaps.Loading.loader.hide();

2
app/assets/javascripts/metamaps/Metamaps.js
View file

@ -1391,7 +1391,7 @@ Metamaps.Realtime = {
var mapperm = Metamaps.Active.Map && Metamaps.Active.Map.authorizeToEdit(Metamaps.Active.Mapper);
if (mapperm) {
self.socket = io.connect('http://localhost:5001');
self.socket = io.connect('http://gentle-savannah-1303.herokuapp.com');
self.socket.on('connect', function () {
console.log('socket connected');
self.setupSocket();

2
app/assets/stylesheets/base.css
View file

@ -532,7 +532,7 @@ font-family: 'LatoLight';
/* Map Cards */
.map {
display:inline-block;
float:left;
width:220px;
height:340px;
font-size: 12px;

2
app/assets/stylesheets/clean.css
View file

@ -698,7 +698,7 @@
}
.mapsWrapper {
overflow-y: auto;
/*overflow-y: auto; */
padding: 32px 32px 56px 32px;
}

2
app/controllers/main_controller.rb
View file

@ -13,7 +13,7 @@ class MainController < ApplicationController
respond_to do |format|
format.html {
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)
else
respond_with(@current)

33
app/controllers/maps_controller.rb
View file

@ -18,47 +18,44 @@ class MapsController < ApplicationController
@current = current_user
@user = nil
@maps = []
if !params[:page]
page = 1
else
page = params[:page]
end
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"
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"
elsif request.path.index('/explore/mine') != nil # looking for maps by me
if !authenticated?
redirect_to activemaps_url and return
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"
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])
@maps = Map.order("name ASC").find_all_by_user_id(@user.id)
if authenticated? && @user == @current
@request = "you"
else
@request = "other"
end
@maps = Map.where("maps.user_id = ? AND maps.permission != ?", @user.id, "private").order("name ASC").page(page).per(20)
@request = "other"
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)
if !@topic
redirect_to featuredmaps_url, notice: "Access denied." and return
end
@maps = @topic.maps
@maps = @topic.maps.delete_if {|m| m.permission == "private" && (!authenticated? || (authenticated? && @current.id != m.user_id)) }
@request = "topic"
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|
format.html {
if @request == "you"

6
app/views/maps/index.html.erb
View file

@ -13,12 +13,6 @@
<% elsif @request == "featured" %>
Metamaps.Maps.Featured = <%= @maps.to_json.html_safe %>;
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 %>
Metamaps.currentSection = "explore";
Metamaps.GlobalUI.Search.isOpen = true;

43
public/famous/main.js
View file

@ -5,6 +5,9 @@ define(function(require, exports, module) {
var Transform = require('famous/core/Transform');
var Surface = require('famous/core/Surface');
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');
@ -112,9 +115,13 @@ define(function(require, exports, module) {
// CONTENT / OTHER PAGES
f.maps = {};
f.maps.surf = new Surface({
size: [undefined, true], // this will get set to a specific height later in order to work
classes: ['mapsWrapper'],
});
var mapsContainer = new ContainerSurface({
size: [undefined, undefined],
properties: {
display: 'none'
overflow: 'hidden',
}
});
var loadMaps = function () {
@ -126,29 +133,53 @@ define(function(require, exports, module) {
f.maps.surf.on('deploy', loadMaps);
}
f.maps.mod = new Modifier({
origin: [0.5, 1],
opacity: 0
origin: [0.5, 0],
opacity: 0,
transform: Transform.translate(window.innerWidth,94,0)
});
f.maps.mod.sizeFrom(function(){
return [window.innerWidth, window.innerHeight - 94];
});
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(
1,
{ duration: 300 }
);
};
f.maps.hide = function () {
// fade out and then position it offscreen
f.maps.mod.setOpacity(
0,
{ duration: 300 },
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 () {
if (Metamaps.currentSection === "explore") {