From d7759c8c072368874eff0564d6743b2a0e55180d Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Sun, 21 Aug 2016 21:02:49 -0400 Subject: [PATCH] Redo all of explore together in React (#617) * unify explore in react * no more need for manual scroll reseting * we're not opening/closing the search anymore --- app/assets/javascripts/application.js | 1 - .../javascripts/src/Metamaps.Backbone.js | 30 ---- .../javascripts/src/Metamaps.GlobalUI.js | 23 ++- app/assets/javascripts/src/Metamaps.Header.js | 22 --- app/assets/javascripts/src/Metamaps.Router.js | 35 +---- app/assets/javascripts/src/Metamaps.Views.js | 131 ++++++------------ app/assets/stylesheets/clean.css.erb | 6 +- app/views/layouts/_templates.html.erb | 49 ------- app/views/layouts/application.html.erb | 3 +- frontend/src/components/Header.js | 75 +++++----- frontend/src/components/MapCard.js | 74 ++++++++++ frontend/src/components/MapListItem.js | 0 frontend/src/components/MapperCard.js | 36 +++++ frontend/src/components/Maps.js | 54 ++++++++ frontend/src/index.js | 4 +- 15 files changed, 268 insertions(+), 275 deletions(-) delete mode 100644 app/assets/javascripts/src/Metamaps.Header.js create mode 100644 frontend/src/components/MapCard.js create mode 100644 frontend/src/components/MapListItem.js create mode 100644 frontend/src/components/MapperCard.js create mode 100644 frontend/src/components/Maps.js diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 7b3f0713..f980da75 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -43,5 +43,4 @@ //= require ./src/Metamaps.Mobile //= require ./src/Metamaps.Admin //= require ./src/Metamaps.Import -//= require ./src/Metamaps.Header //= require ./src/Metamaps.JIT diff --git a/app/assets/javascripts/src/Metamaps.Backbone.js b/app/assets/javascripts/src/Metamaps.Backbone.js index b21397aa..3873592f 100644 --- a/app/assets/javascripts/src/Metamaps.Backbone.js +++ b/app/assets/javascripts/src/Metamaps.Backbone.js @@ -121,36 +121,6 @@ Metamaps.Backbone.Map = Backbone.Model.extend({ } return this.get('mappers') }, - attrForCards: function () { - function capitalize (string) { - return string.charAt(0).toUpperCase() + string.slice(1) - } - - var n = this.get('name') - var d = this.get('desc') - - var maxNameLength = 32 - var maxDescLength = 118 - var truncatedName = n ? (n.length > maxNameLength ? n.substring(0, maxNameLength) + '...' : n) : '' - var truncatedDesc = d ? (d.length > maxDescLength ? d.substring(0, maxDescLength) + '...' : d) : '' - - var obj = { - id: this.id, - name: truncatedName, - fullName: n, - desc: truncatedDesc, - permission: this.get('permission') ? capitalize(this.get('permission')) : 'Commons', - editPermission: this.authorizeToEdit(Metamaps.Active.Mapper) ? 'canEdit' : 'cannotEdit', - contributor_count_number: '' + this.get('contributor_count') + '', - contributor_count_string: this.get('contributor_count') === 1 ? ' contributor' : ' contributors', - topic_count_number: '' + this.get('topic_count') + '', - topic_count_string: this.get('topic_count') === 1 ? ' topic' : ' topics', - synapse_count_number: '' + this.get('synapse_count') + '', - synapse_count_string: this.get('synapse_count') === 1 ? ' synapse' : ' synapses', - screenshot: '' - } - return obj - }, updateView: function () { var map = Metamaps.Active.Map var isActiveMap = this.id === map.id diff --git a/app/assets/javascripts/src/Metamaps.GlobalUI.js b/app/assets/javascripts/src/Metamaps.GlobalUI.js index 479fe654..5547b59e 100644 --- a/app/assets/javascripts/src/Metamaps.GlobalUI.js +++ b/app/assets/javascripts/src/Metamaps.GlobalUI.js @@ -51,31 +51,26 @@ $(document).ready(function () { Metamaps[prop].hasOwnProperty('init') && typeof (Metamaps[prop].init) == 'function' ) { - Metamaps[prop].init(); + Metamaps[prop].init() } } // load whichever page you are on if (Metamaps.currentSection === "explore") { - var capitalize = Metamaps.currentPage.charAt(0).toUpperCase() + Metamaps.currentPage.slice(1); + var capitalize = Metamaps.currentPage.charAt(0).toUpperCase() + Metamaps.currentPage.slice(1) - Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps[capitalize] ); + Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps[capitalize] ) if (Metamaps.currentPage === "mapper") { - Metamaps.Views.exploreMaps.fetchUserThenRender(); - Metamaps.Header.fetchUserThenChangeSection(!!Metamaps.Active.Mapper, Metamaps.Maps.Mapper.mapperId) + Metamaps.Views.exploreMaps.fetchUserThenRender() } else { - Metamaps.Views.exploreMaps.render(); - Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, Metamaps.currentPage) + Metamaps.Views.exploreMaps.render() } - Metamaps.GlobalUI.showDiv('#exploreMaps') - Metamaps.GlobalUI.showDiv('#exploreMapsHeader') + Metamaps.GlobalUI.showDiv('#explore') } else if (Metamaps.currentSection === "" && Metamaps.Active.Mapper) { - Metamaps.Views.exploreMaps.setCollection( Metamaps.Maps.Active ); - Metamaps.Views.exploreMaps.render(); - Metamaps.GlobalUI.showDiv('#exploreMaps') - Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, 'active') - Metamaps.GlobalUI.showDiv('#exploreMapsHeader') + Metamaps.Views.exploreMaps.setCollection(Metamaps.Maps.Active) + Metamaps.Views.exploreMaps.render() + Metamaps.GlobalUI.showDiv('#explore') } else if (Metamaps.Active.Map || Metamaps.Active.Topic) { Metamaps.Loading.show() diff --git a/app/assets/javascripts/src/Metamaps.Header.js b/app/assets/javascripts/src/Metamaps.Header.js deleted file mode 100644 index 3693163b..00000000 --- a/app/assets/javascripts/src/Metamaps.Header.js +++ /dev/null @@ -1,22 +0,0 @@ -/* global Metamaps, $ */ - -Metamaps.Header = { - init: function () { - - }, - fetchUserThenChangeSection: function (signedIn, mapperId) { - $.ajax({ - url: '/users/' + mapperId + '.json', - success: function (response) { - Metamaps.Header.changeSection(signedIn, 'mapper', response.image, response.name) - }, - error: function () {} - }); - }, - changeSection: function (signedIn, section, userAvatar, userName) { - ReactDOM.render( - React.createElement(Metamaps.ReactComponents.Header, { signedIn: signedIn, section: section, userAvatar: userAvatar, userName: userName }), - document.getElementById('exploreMapsHeader') - ); - } -} diff --git a/app/assets/javascripts/src/Metamaps.Router.js b/app/assets/javascripts/src/Metamaps.Router.js index 58858185..3558278f 100644 --- a/app/assets/javascripts/src/Metamaps.Router.js +++ b/app/assets/javascripts/src/Metamaps.Router.js @@ -46,13 +46,7 @@ if (Metamaps.Active.Mapper) { Metamaps.GlobalUI.hideDiv('#yield') - Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, 'active') - Metamaps.GlobalUI.showDiv('#exploreMapsHeader') - Metamaps.GlobalUI.showDiv('#exploreMaps') - $('#exploreMaps').scrollTop(0) - - Metamaps.GlobalUI.Search.open() - Metamaps.GlobalUI.Search.lock() + Metamaps.GlobalUI.showDiv('#explore') Metamaps.Views.exploreMaps.setCollection(Metamaps.Maps.Active) if (Metamaps.Maps.Active.length === 0) { @@ -62,11 +56,8 @@ } } else { // logged out home page - Metamaps.GlobalUI.hideDiv('#exploreMapsHeader') - Metamaps.GlobalUI.hideDiv('#exploreMaps') + Metamaps.GlobalUI.hideDiv('#explore') Metamaps.GlobalUI.showDiv('#yield') - Metamaps.GlobalUI.Search.unlock() - //Metamaps.GlobalUI.Search.close(0, true) Metamaps.Router.timeoutId = setTimeout(navigate, 500) } @@ -143,15 +134,7 @@ } } - Metamaps.GlobalUI.Search.open() - Metamaps.GlobalUI.Search.lock() - Metamaps.GlobalUI.showDiv('#exploreMaps') - Metamaps.GlobalUI.showDiv('#exploreMapsHeader') - $('#exploreMaps').scrollTop(0) - if (id) { - Metamaps.Header.fetchUserThenChangeSection(!!Metamaps.Active.Mapper, id) - } - else Metamaps.Header.changeSection(!!Metamaps.Active.Mapper, section) + Metamaps.GlobalUI.showDiv('#explore') Metamaps.GlobalUI.hideDiv('#yield') Metamaps.GlobalUI.hideDiv('#infovis') Metamaps.GlobalUI.hideDiv('#instructions') @@ -174,8 +157,7 @@ // can edit this map '.canEditMap' Metamaps.GlobalUI.hideDiv('#yield') - Metamaps.GlobalUI.hideDiv('#exploreMaps') - Metamaps.GlobalUI.hideDiv('#exploreMapsHeader') + Metamaps.GlobalUI.hideDiv('#explore') // clear the visualization, if there was one, before showing its div again if (Metamaps.Visualize.mGraph) { @@ -187,9 +169,6 @@ Metamaps.Topic.end() Metamaps.Active.Topic = null - //Metamaps.GlobalUI.Search.unlock() - //Metamaps.GlobalUI.Search.close(0, true) - Metamaps.Loading.show() Metamaps.Map.end() Metamaps.Map.launch(id) @@ -206,8 +185,7 @@ $('.wrapper').addClass('topicPage') Metamaps.GlobalUI.hideDiv('#yield') - Metamaps.GlobalUI.hideDiv('#exploreMaps') - Metamaps.GlobalUI.hideDiv('#exploreMapsHeader') + Metamaps.GlobalUI.hideDiv('#explore') // clear the visualization, if there was one, before showing its div again if (Metamaps.Visualize.mGraph) { @@ -219,9 +197,6 @@ Metamaps.Map.end() Metamaps.Active.Map = null - //Metamaps.GlobalUI.Search.unlock() - //Metamaps.GlobalUI.Search.close(0, true) - Metamaps.Topic.end() Metamaps.Topic.launch(id) } diff --git a/app/assets/javascripts/src/Metamaps.Views.js b/app/assets/javascripts/src/Metamaps.Views.js index 56096f0a..d027d22c 100644 --- a/app/assets/javascripts/src/Metamaps.Views.js +++ b/app/assets/javascripts/src/Metamaps.Views.js @@ -1,128 +1,87 @@ -/* global Metamaps, $, Hogan, Backbone */ +/* global Metamaps, $ */ /* * Metamaps.Views.js.erb * * Dependencies: - * - Metamaps.Famous * - Metamaps.Loading + * - Metamaps.Active + * - Metamaps.ReactComponents */ Metamaps.Views = { - initialized: false -} - -Metamaps.Views.init = function () { - Metamaps.Views.MapperCard = Backbone.View.extend({ - template: Hogan.compile($('#mapperCardTemplate').html()), - - tagName: 'div', - - className: 'mapper', - - render: function () { - this.$el.html(this.template.render(this.model)) - return this - } - }) - - Metamaps.Views.MapCard = Backbone.View.extend({ - template: Hogan.compile($('#mapCardTemplate').html()), - - tagName: 'div', - - className: 'map', - - id: function () { - return this.model.id - }, - - initialize: function () { - this.listenTo(this.model, 'change', this.render) - }, - - render: function () { - this.$el.html(this.template.render(this.model.attrForCards())) - return this - } - - }) - - var MapsWrapper = Backbone.View.extend({ - initialize: function (opts) {}, + exploreMaps: { setCollection: function (collection) { - if (this.collection) this.stopListening(this.collection) - this.collection = collection - this.listenTo(this.collection, 'add', this.render) - this.listenTo(this.collection, 'successOnFetch', this.handleSuccess) - this.listenTo(this.collection, 'errorOnFetch', this.handleError) + var self = Metamaps.Views.exploreMaps + + if (self.collection) { + self.collection.off('add', self.render) + self.collection.off('successOnFetch', self.handleSuccess) + self.collection.off('errorOnFetch', self.handleError) + } + self.collection = collection + self.collection.on('add', self.render) + self.collection.on('successOnFetch', self.handleSuccess) + self.collection.on('errorOnFetch', self.handleError) }, render: function (mapperObj, cb) { - var that = this - + var self = Metamaps.Views.exploreMaps + if (typeof mapperObj === 'function') { cb = mapperObj mapperObj = null } - - this.el.innerHTML = '' - - // in case it is a page where we have to display the mapper card - if (mapperObj) { - var view = new Metamaps.Views.MapperCard({ model: mapperObj }) - - that.el.appendChild(view.render().el) - } - - this.collection.each(function (map) { - var view = new Metamaps.Views.MapCard({ model: map }) - - that.el.appendChild(view.render().el) - }) - this.$el.append('
') - if (this.collection.length >= 20 && this.collection.page != "loadedAll") { - this.$el.append('') - this.$el.append('
') + var exploreObj = { + currentUser: Metamaps.Active.Mapper, + section: self.collection.id, + displayStyle: 'grid', + maps: self.collection, + moreToLoad: self.collection.page != 'loadedAll', + user: mapperObj, + loadMore: self.loadMore } + ReactDOM.render( + React.createElement(Metamaps.ReactComponents.Maps, exploreObj), + document.getElementById('explore') + ) - $('#exploreMaps').empty().html(this.el) - this.$el.find('.loadMore').click(that.loadMore.bind(that)) if (cb) cb() Metamaps.Loading.hide() }, loadMore: function () { - if (this.collection.page != "loadedAll") { - this.collection.getMaps(); - } - else { - this.$el.find('.loadMore').hide() + var self = Metamaps.Views.exploreMaps + + if (self.collection.page != "loadedAll") { + self.collection.getMaps() } + else self.render() }, handleSuccess: function (cb) { - if (this.collection && this.collection.id === 'mapper') { - this.fetchUserThenRender(cb) + var self = Metamaps.Views.exploreMaps + + if (self.collection && self.collection.id === 'mapper') { + self.fetchUserThenRender(cb) } else { - this.render(cb) + self.render(cb) } }, handleError: function () { console.log('error loading maps!') // TODO }, fetchUserThenRender: function (cb) { - var that = this + var self = Metamaps.Views.exploreMaps + // first load the mapper object and then call the render function $.ajax({ - url: '/users/' + this.collection.mapperId + '/details.json', + url: '/users/' + self.collection.mapperId + '/details.json', success: function (response) { - that.render(response, cb) + self.render(response, cb) }, error: function () { - that.render(cb) + self.render(cb) } }) } - }) - - Metamaps.Views.exploreMaps = new MapsWrapper() + } } diff --git a/app/assets/stylesheets/clean.css.erb b/app/assets/stylesheets/clean.css.erb index 4b1aec7f..a8b66fb7 100644 --- a/app/assets/stylesheets/clean.css.erb +++ b/app/assets/stylesheets/clean.css.erb @@ -590,8 +590,11 @@ /* explore maps */ -#exploreMaps { +#explore { display: none; +} + +#exploreMaps { padding: 0 5%; position: absolute; width: 90%; @@ -613,7 +616,6 @@ } #exploreMapsHeader { - display: none; position: absolute; width: 100%; } diff --git a/app/views/layouts/_templates.html.erb b/app/views/layouts/_templates.html.erb index dd9c2634..ead2d267 100644 --- a/app/views/layouts/_templates.html.erb +++ b/app/views/layouts/_templates.html.erb @@ -45,55 +45,6 @@ - - - -