move Metamaps.Loading into node modules

app/views/layouts/_foot.html.erb

@@ -2,28 +2,13 @@
 <%= render :partial => 'layouts/templates' %>
 <%= render :partial => 'shared/metacodeBgColors' %>
 <script type="text/javascript" charset="utf-8">
-    // TODO move this into Metamaps.ServerData somehow
-    <% if current_user %>
-        Metamaps.Active.Mapper = <%= current_user.to_json.html_safe %>
-    <% else %>
-        Metamaps.Active.Mapper = null;
-    <% end %>
+  <% if current_user %>
+    Metamaps.Active.Mapper = <%= current_user.to_json.html_safe %>
+  <% else %>
+    Metamaps.Active.Mapper = null;
+  <% end %>
 
-    // TODO move this into frontend/
-    Metamaps.Loading = {
-        loader: new CanvasLoader('loading'),
-        hide: function () {
-          $('#loading').hide();
-        },
-        show: function () {
-          $('#loading').show();
-        }
-    };
-    Metamaps.Loading.loader.setColor('#4fb5c0'); // default is '#000000'
-    Metamaps.Loading.loader.setDiameter(28); // default is 40
-    Metamaps.Loading.loader.setDensity(41); // default is 40
-    Metamaps.Loading.loader.setRange(0.9); // default is 1.3
-    Metamaps.Loading.loader.show(); // Hidden by default
+  Metamaps.Loading.setup()
 </script>
 <%= render :partial => 'layouts/googleanalytics' if Rails.env.production? %>
 </body>

frontend/src/Metamaps/DataModel/MapCollection.js

@@ -3,12 +3,9 @@
 import Backbone from 'backbone'
 Backbone.$ = window.$
 
-import Map from './Map'
+import Loading from '../Loading'
 
-/*
- * Dependencies:
- *  - Metamaps.Loading
- */
+import Map from './Map'
 
 const MapCollection = Backbone.Collection.extend({
   model: Map,
@@ -50,7 +47,7 @@ const MapCollection = Backbone.Collection.extend({
   getMaps: function (cb) {
     var self = this
 
-    Metamaps.Loading.show()
+    Loading.show()
 
     if (this.page !== 'loadedAll') {
       var numBefore = this.length

frontend/src/Metamaps/DataModel/index.js

@@ -25,7 +25,6 @@ import MappingCollection from './MappingCollection'
  * Dependencies:
  *  - Metamaps.Collaborators
  *  - Metamaps.Creators
- *  - Metamaps.Loading
  *  - Metamaps.Mappers
  *  - Metamaps.Mappings
  *  - Metamaps.Metacodes

frontend/src/Metamaps/GlobalUI/Search.js

@@ -18,8 +18,7 @@ const Search = {
   init: function () {
     var self = Search
 
-    // TODO does this overlap with Metamaps.Loading?
-    // devin sez: I'd like to remove Metamaps.Loading from the rails code
+    // this is similar to Metamaps.Loading, but it's for the search element
     var loader = new CanvasLoader('searchLoading')
     loader.setColor('#4fb5c0') // default is '#000000'
     loader.setDiameter(24) // default is 40

frontend/src/Metamaps/Loading.js

@@ -0,0 +1,20 @@
+/* global CanvasLoader, $ */
+
+const Loading = {
+  loader: new CanvasLoader('loading'),
+  hide: function () {
+    $('#loading').hide();
+  },
+  show: function () {
+    $('#loading').show();
+  },
+  setup: function () {
+    Loading.loader.setColor('#4fb5c0'); // default is '#000000'
+    Loading.loader.setDiameter(28); // default is 40
+    Loading.loader.setDensity(41); // default is 40
+    Loading.loader.setRange(0.9); // default is 1.3
+    Loading.loader.show(); // Hidden by default
+  }
+}
+
+export default Loading

frontend/src/Metamaps/Map/index.js

@@ -8,6 +8,7 @@ import Create from '../Create'
 import Filter from '../Filter'
 import GlobalUI from '../GlobalUI'
 import JIT from '../JIT'
+import Loading from '../Loading'
 import Realtime from '../Realtime'
 import Router from '../Router'
 import Selected from '../Selected'
@@ -24,7 +25,6 @@ import InfoBox from './InfoBox'
  * Dependencies:
  *  - Metamaps.DataModel
  *  - Metamaps.Erb
- *  - Metamaps.Loading
  *  - Metamaps.Mappers
  *  - Metamaps.Mappings
  *  - Metamaps.Maps
@@ -136,7 +136,7 @@ const Map = {
       Filter.checkMappers()
 
       Realtime.startActiveMap()
-      Metamaps.Loading.hide()
+      Loading.hide()
       
       // for mobile
       $('#header_content').html(map.get('name'))

frontend/src/Metamaps/Router.js

@@ -6,6 +6,7 @@ import Backbone from 'backbone'
 
 import Active from './Active'
 import GlobalUI from './GlobalUI'
+import Loading from './Loading'
 import Map from './Map'
 import Topic from './Topic'
 import Views from './Views'
@@ -15,7 +16,6 @@ import Visualize from './Visualize'
  * Metamaps.Router.js.erb
  *
  * Dependencies:
- *  - Metamaps.Loading
  *  - Metamaps.Maps
  */
 
@@ -134,7 +134,7 @@ const _Router = Backbone.Router.extend({
       self.timeoutId = setTimeout(navigate, 300)
     }
     if (Metamaps.Maps[capitalize].length === 0) {
-      Metamaps.Loading.show()
+      Loading.show()
       Views.ExploreMaps.pending = true
       setTimeout(function () {
         Metamaps.Maps[capitalize].getMaps(navigate) // this will trigger an explore maps render
@@ -178,7 +178,7 @@ const _Router = Backbone.Router.extend({
     Topic.end()
     Active.Topic = null
 
-    Metamaps.Loading.show()
+    Loading.show()
     Map.end()
     Map.launch(id)
   },

frontend/src/Metamaps/Views/ExploreMaps.js

@@ -6,12 +6,9 @@ import ReactDOM from 'react-dom' // TODO ensure this isn't a double import
 import Active from '../Active'
 import GlobalUI from '../GlobalUI'
 import Realtime from '../Realtime'
+import Loading from '../Loading'
 import Maps from '../../components/Maps'
 
-/*
- *  - Metamaps.Loading
- */
-
 const ExploreMaps = {
   pending: false,
   mapper: null,
@@ -63,6 +60,7 @@ const ExploreMaps = {
     ).resize()
 
     if (cb) cb()
+    Loading.hide()
   },
   loadMore: function () {
     var self = ExploreMaps

frontend/src/Metamaps/Visualize.js

@@ -6,6 +6,7 @@ import $jit from '../patched/JIT'
 
 import Active from './Active'
 import JIT from './JIT'
+import Loading from './Loading'
 import Router from './Router'
 import TopicCard from './TopicCard'
 
@@ -13,7 +14,6 @@ import TopicCard from './TopicCard'
  * Metamaps.Visualize
  *
  * Dependencies:
- *  - Metamaps.Loading
  *  - Metamaps.Metacodes
  *  - Metamaps.Synapses
  *  - Metamaps.Topics
@@ -161,7 +161,7 @@ const Visualize = {
     if (self.type == 'ForceDirected' && Active.Mapper) $.post('/maps/' + Active.Map.id + '/events/user_presence')
 
     function runAnimation () {
-      Metamaps.Loading.hide()
+      Loading.hide()
       // load JSON data, if it's not empty
       if (!self.loadLater) {
         // load JSON data.

frontend/src/Metamaps/index.js

@@ -15,6 +15,7 @@ import GlobalUI, {
 import Import from './Import'
 import JIT from './JIT'
 import Listeners from './Listeners'
+import Loading from './Loading'
 import Map, { CheatSheet, InfoBox } from './Map'
 import Mapper from './Mapper'
 import Mobile from './Mobile'
@@ -51,6 +52,7 @@ Metamaps.GlobalUI.ImportDialog = ImportDialog
 Metamaps.Import = Import
 Metamaps.JIT = JIT
 Metamaps.Listeners = Listeners
+Metamaps.Loading = Loading
 Metamaps.Map = Map
 Metamaps.Map.CheatSheet = CheatSheet
 Metamaps.Map.InfoBox = InfoBox