From f6245df997286573fc20da855a1f90478781a537 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Wed, 20 Aug 2014 15:37:18 -0400 Subject: [PATCH] added 20 at a time loading for explore maps pages --- Gemfile | 1 + Gemfile.lock | 4 ++ .../javascripts/metamaps/Metamaps.Backbone.js | 31 ++++++++----- .../javascripts/metamaps/Metamaps.GlobalUI.js | 7 ++- .../javascripts/metamaps/Metamaps.Router.js | 2 + .../javascripts/metamaps/Metamaps.Views.js | 16 ++++--- app/assets/javascripts/metamaps/Metamaps.js | 2 +- app/assets/stylesheets/base.css | 2 +- app/assets/stylesheets/clean.css | 2 +- app/controllers/main_controller.rb | 2 +- app/controllers/maps_controller.rb | 33 +++++++------- app/views/maps/index.html.erb | 6 --- public/famous/main.js | 43 ++++++++++++++++--- 13 files changed, 96 insertions(+), 55 deletions(-) diff --git a/Gemfile b/Gemfile index fbadc69f..f720116a 100644 --- a/Gemfile +++ b/Gemfile @@ -18,6 +18,7 @@ gem 'formtastic' gem 'json' gem 'rails3-jquery-autocomplete' gem 'best_in_place' +gem 'kaminari' # pagination gem 'paperclip' gem 'aws-sdk' diff --git a/Gemfile.lock b/Gemfile.lock index b4efab8d..ee449288 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -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) diff --git a/app/assets/javascripts/metamaps/Metamaps.Backbone.js b/app/assets/javascripts/metamaps/Metamaps.Backbone.js index aabfe4ce..ed6077e7 100644 --- a/app/assets/javascripts/metamaps/Metamaps.Backbone.js +++ b/app/assets/javascripts/metamaps/Metamaps.Backbone.js @@ -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'); + } + }); + } } }); diff --git a/app/assets/javascripts/metamaps/Metamaps.GlobalUI.js b/app/assets/javascripts/metamaps/Metamaps.GlobalUI.js index 13278b28..5f10d4cf 100644 --- a/app/assets/javascripts/metamaps/Metamaps.GlobalUI.js +++ b/app/assets/javascripts/metamaps/Metamaps.GlobalUI.js @@ -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; diff --git a/app/assets/javascripts/metamaps/Metamaps.Router.js b/app/assets/javascripts/metamaps/Metamaps.Router.js index f4433c0c..50604f63 100644 --- a/app/assets/javascripts/metamaps/Metamaps.Router.js +++ b/app/assets/javascripts/metamaps/Metamaps.Router.js @@ -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(); diff --git a/app/assets/javascripts/metamaps/Metamaps.Views.js b/app/assets/javascripts/metamaps/Metamaps.Views.js index f28fc113..e63803c8 100644 --- a/app/assets/javascripts/metamaps/Metamaps.Views.js +++ b/app/assets/javascripts/metamaps/Metamaps.Views.js @@ -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('
'); 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(); diff --git a/app/assets/javascripts/metamaps/Metamaps.js b/app/assets/javascripts/metamaps/Metamaps.js index 7bacea0b..a6892369 100644 --- a/app/assets/javascripts/metamaps/Metamaps.js +++ b/app/assets/javascripts/metamaps/Metamaps.js @@ -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(); diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css index 92f79d8a..871a861e 100644 --- a/app/assets/stylesheets/base.css +++ b/app/assets/stylesheets/base.css @@ -532,7 +532,7 @@ font-family: 'LatoLight'; /* Map Cards */ .map { - display:inline-block; + float:left; width:220px; height:340px; font-size: 12px; diff --git a/app/assets/stylesheets/clean.css b/app/assets/stylesheets/clean.css index 44d4b347..369d1875 100644 --- a/app/assets/stylesheets/clean.css +++ b/app/assets/stylesheets/clean.css @@ -698,7 +698,7 @@ } .mapsWrapper { - overflow-y: auto; + /*overflow-y: auto; */ padding: 32px 32px 56px 32px; } diff --git a/app/controllers/main_controller.rb b/app/controllers/main_controller.rb index a055f11a..f9c7240f 100644 --- a/app/controllers/main_controller.rb +++ b/app/controllers/main_controller.rb @@ -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) diff --git a/app/controllers/maps_controller.rb b/app/controllers/maps_controller.rb index f67c22d4..28af22b2 100644 --- a/app/controllers/maps_controller.rb +++ b/app/controllers/maps_controller.rb @@ -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" diff --git a/app/views/maps/index.html.erb b/app/views/maps/index.html.erb index 92f17142..928a2511 100644 --- a/app/views/maps/index.html.erb +++ b/app/views/maps/index.html.erb @@ -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; diff --git a/public/famous/main.js b/public/famous/main.js index 9aee5d1c..4316a4e3 100644 --- a/public/famous/main.js +++ b/public/famous/main.js @@ -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") {