From 46380a17e057d359bed1ab19c5baace648eafcfb Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Tue, 12 Aug 2014 19:20:46 -0400 Subject: [PATCH] got maps wrapper working --- .../javascripts/metamaps/Metamaps.Router.js | 11 ++- .../javascripts/metamaps/Metamaps.Views.js | 13 ++- app/assets/stylesheets/clean.css | 7 +- app/views/layouts/_exploremaps.html.erb | 22 ------ app/views/layouts/application.html.erb | 8 +- app/views/maps/_map.html.erb | 34 -------- public/famous/main.js | 79 ++++++++++++++++--- 7 files changed, 82 insertions(+), 92 deletions(-) delete mode 100644 app/views/layouts/_exploremaps.html.erb delete mode 100644 app/views/maps/_map.html.erb diff --git a/app/assets/javascripts/metamaps/Metamaps.Router.js b/app/assets/javascripts/metamaps/Metamaps.Router.js index 0f044dca..f4433c0c 100644 --- a/app/assets/javascripts/metamaps/Metamaps.Router.js +++ b/app/assets/javascripts/metamaps/Metamaps.Router.js @@ -28,7 +28,7 @@ Metamaps.Famous.explore.set('mine'); Metamaps.Famous.explore.show(); - $('.mapsWrapper').fadeIn(300); + Metamaps.Famous.maps.show(); Metamaps.GlobalUI.Search.open(); Metamaps.GlobalUI.Search.lock(); @@ -51,7 +51,7 @@ Metamaps.GlobalUI.Search.unlock(); Metamaps.GlobalUI.Search.close(0, true); - $('.mapsWrapper').fadeOut(300); + Metamaps.Famous.maps.hide(); setTimeout(function(){ Metamaps.Router.navigate(""); }, 500); @@ -88,9 +88,8 @@ Metamaps.GlobalUI.Search.lock(); Metamaps.Famous.yield.hide(); - - $('.mapsWrapper').fadeIn(300); + Metamaps.Famous.maps.show(); Metamaps.Famous.explore.set(section); Metamaps.Famous.explore.show(); @@ -109,7 +108,7 @@ $('.wrapper').addClass('mapPage'); Metamaps.Famous.yield.hide(); - $('.mapsWrapper').fadeOut(300); + Metamaps.Famous.maps.hide(); Metamaps.Famous.explore.hide(); // clear the visualization, if there was one, before showing its div again @@ -137,7 +136,7 @@ $('.wrapper').addClass('mapPage'); Metamaps.Famous.yield.hide(); - $('.mapsWrapper').fadeOut(300); + Metamaps.Famous.maps.hide(); Metamaps.Famous.explore.hide(); // clear the visualization, if there was one, before showing its div again diff --git a/app/assets/javascripts/metamaps/Metamaps.Views.js b/app/assets/javascripts/metamaps/Metamaps.Views.js index 4dbcc251..872e197c 100644 --- a/app/assets/javascripts/metamaps/Metamaps.Views.js +++ b/app/assets/javascripts/metamaps/Metamaps.Views.js @@ -34,8 +34,6 @@ Metamaps.Views.init = function () { var mapsWrapper = Backbone.View.extend({ - el: '.mapsWrapper', - initialize: function (opts) { }, @@ -48,13 +46,20 @@ Metamaps.Views.init = function () { render: function () { var that = this; - this.$el.empty(); + + this.el.innerHTML = ""; this.collection.each(function (map) { var view = new Metamaps.Views.MapCard({ model: map }); - that.$el.append( view.render().el ); + that.el.appendChild( view.render().el ); }); + var m = Metamaps.Famous.maps.surf; + m.setContent(this.el); + if (!Metamaps.initialized) { + m.deploy(m._currTarget); + Metamaps.initialized = true; + } Metamaps.Loading.loader.hide(); setTimeout(function(){ diff --git a/app/assets/stylesheets/clean.css b/app/assets/stylesheets/clean.css index d69db4f2..40688d0f 100644 --- a/app/assets/stylesheets/clean.css +++ b/app/assets/stylesheets/clean.css @@ -682,12 +682,7 @@ } .mapsWrapper { - margin: 100px 60px 0 60px; - display: none; - z-index: 1; -} -.explorePage .mapsWrapper { - display:block; + overflow-y: scroll; } /* end explore maps */ diff --git a/app/views/layouts/_exploremaps.html.erb b/app/views/layouts/_exploremaps.html.erb deleted file mode 100644 index 7a6c8a4f..00000000 --- a/app/views/layouts/_exploremaps.html.erb +++ /dev/null @@ -1,22 +0,0 @@ - - -
- <% if @maps %> - <% @maps.each do |map| %> - <%= render map %> - <% end %> - <% end %> -
-
\ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index ef50717c..34293f6d 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -56,11 +56,9 @@
<%= render :partial => 'layouts/upperelements' %> - <%= render :partial => 'layouts/exploremaps' %> <%= yield %> -
<% if authenticated? %> <% # for creating and pulling in topics and synapses %> @@ -71,14 +69,10 @@ <% end %> <%= render :partial => 'layouts/lowermapelements' %> -
+
- - <% end %> <%= render :partial => 'layouts/lightboxes' %> diff --git a/app/views/maps/_map.html.erb b/app/views/maps/_map.html.erb deleted file mode 100644 index d611ca70..00000000 --- a/app/views/maps/_map.html.erb +++ /dev/null @@ -1,34 +0,0 @@ -<%# - # @file - # Shows a map as a card. - # Any list of maps uses this rendering. - #%> -<%= div_for map do %> - -
"> - -
- - <%= best_in_place map, :name, :type => :textarea, :classes => 'best_in_place_name' %> - -
-
-
Created by <%= map.user.name %> on <%= map.created_at.strftime("%m/%d/%Y") %>
-
-
<%= map.topics.count %>
-
<%= map.synapses.count %>
-
-
-
-
-
- <%= best_in_place map, :desc, :type => :textarea, :nil => "Click to add description.", :classes => 'best_in_place_desc' %> -
-
-
-
-
- -
- -<% end %> diff --git a/public/famous/main.js b/public/famous/main.js index 82c994e6..9aee5d1c 100644 --- a/public/famous/main.js +++ b/public/famous/main.js @@ -107,6 +107,72 @@ define(function(require, exports, module) { f.yield.show(); } }; + + + // CONTENT / OTHER PAGES + f.maps = {}; + f.maps.surf = new Surface({ + classes: ['mapsWrapper'], + properties: { + display: 'none' + } + }); + var loadMaps = function () { + f.loadMaps(); + f.maps.surf.removeListener('deploy',loadMaps); + }; + if (Metamaps.currentSection === "explore" || + (Metamaps.currentSection === "" && Metamaps.Active.Mapper)) { + f.maps.surf.on('deploy', loadMaps); + } + f.maps.mod = new Modifier({ + origin: [0.5, 1], + opacity: 0 + }); + f.maps.mod.sizeFrom(function(){ + return [window.innerWidth, window.innerHeight - 94]; + }); + f.maps.show = function () { + f.maps.surf.setProperties({ "display":"block" }); + f.maps.mod.setOpacity( + 1, + { duration: 300 } + ); + }; + f.maps.hide = function () { + f.maps.mod.setOpacity( + 0, + { duration: 300 }, + function() { + f.maps.surf.setProperties({"display": "none"}); + } + ); + }; + f.mainContext.add(f.maps.mod).add(f.maps.surf); + + f.loadMaps = function () { + if (Metamaps.currentSection === "explore") { + var capitalize = Metamaps.currentPage.charAt(0).toUpperCase() + Metamaps.currentPage.slice(1); + + Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps[capitalize] ); + Metamaps.Views.exploreMaps.render(); + f.maps.show(); + f.explore.set(Metamaps.currentPage); + f.explore.show(); + } + else if (Metamaps.currentSection === "") { + Metamaps.Loading.loader.hide(); + if (Metamaps.Active.Mapper) { + + Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps.Mine ); + Metamaps.Views.exploreMaps.render(); + f.maps.show(); + f.explore.set('mine'); + f.explore.show(); + } + else f.explore.set('featured'); + } + }; // EXPLORE MAPS BAR @@ -214,17 +280,4 @@ define(function(require, exports, module) { f.mainContext.add(f.toast.mod).add(f.toast.surf); f.logo.show(); - if (Metamaps.currentSection === "explore") { - Metamaps.Loading.loader.hide(); - f.explore.set(Metamaps.currentPage); - f.explore.show(); - } - else if (Metamaps.currentSection === "") { - Metamaps.Loading.loader.hide(); - if (Metamaps.Active.Mapper) { - f.explore.set('mine'); - f.explore.show(); - } - else f.explore.set('featured'); - } }); \ No newline at end of file