rewrite map instructions

app/assets/stylesheets/clean.css.erb

@@ -792,7 +792,6 @@
   height: 80px;
   font-family: 'din-regular', helvetica, sans-serif;
   font-size: 32px;
-  display: none;
   text-align: center;
   color: #999999;
   z-index: 0;

frontend/src/Metamaps/Control.js

@@ -61,7 +61,7 @@ const Control = {
     }
 
     if (DataModel.Topics.length === 0) {
-      GlobalUI.showDiv('#instructions')
+      Map.setHasLearnedTopicCreation(false)
     }
   },
   deleteSelectedNodes: function() { // refers to deleting topics permanently

frontend/src/Metamaps/Create.js

@@ -1,6 +1,7 @@
 /* global $, Hogan, Bloodhound */
 
 import DataModel from './DataModel'
+import Map from './Map'
 import Mouse from './Mouse'
 import Selected from './Selected'
 import Synapse from './Synapse'
@@ -270,7 +271,7 @@ const Create = {
       })
       Create.newTopic.beingCreated = true
       Create.newTopic.name = ''
-      GlobalUI.hideDiv('#instructions')
+      Map.setHasLearnedTopicCreation(true)
     },
     hide: function(force) {
       if (force || !Create.newTopic.pinned) {
@@ -281,7 +282,7 @@ const Create = {
         Create.newTopic.pinned = false
       }
       if (DataModel.Topics.length === 0) {
-        GlobalUI.showDiv('#instructions')
+        Map.setHasLearnedTopicCreation(false)
       }
       Create.newTopic.beingCreated = false
     },

frontend/src/Metamaps/GlobalUI/ReactApp.js

@@ -109,6 +109,7 @@ const ReactApp = {
     return {
       mapId: self.mapId,
       map: Active.Map,
+      hasLearnedTopicCreation: Map.hasLearnedTopicCreation,
       userRequested: Map.userRequested,
       requestAnswered: Map.requestAnswered,
       requestApproved: Map.requestApproved,

frontend/src/Metamaps/Import.js

@@ -316,7 +316,7 @@ const Import = {
       success: opts.success
     })
 
-    GlobalUI.hideDiv('#instructions')
+    Map.setHasLearnedTopicCreation(true)
   },
 
   createSynapseWithParameters: function(desc, category, permission,

frontend/src/Metamaps/JIT.js

@@ -130,18 +130,11 @@ const JIT = {
       if (DataModel.Mappings) DataModel.Mappings.remove(mapping)
     })
 
-    // set up addTopic instructions in case they delete all the topics
-    // i.e. if there are 0 topics at any time, it should have instructions again
-    $('#instructions div').hide()
-    if (Active.Map && Active.Map.authorizeToEdit(Active.Mapper)) {
-      $('#instructions div.addTopic').show()
-    }
-
     if (self.vizData.length === 0) {
-      GlobalUI.showDiv('#instructions')
+      Map.setHasLearnedTopicCreation(false)
       Visualize.loadLater = true
     } else {
-      GlobalUI.hideDiv('#instructions')
+      Map.setHasLearnedTopicCreation(true)
     }
 
     Visualize.render()

frontend/src/Metamaps/Map/index.js

@@ -31,6 +31,7 @@ const Map = {
   userRequested: false,
   requestAnswered: false,
   requestApproved: false,
+  hasLearnedTopicCreation: true,
   init: function(serverData) {
     var self = Map
     self.mapIsStarred = serverData.mapIsStarred
@@ -46,6 +47,11 @@ const Map = {
     CheatSheet.init(serverData)
     $(document).on(Map.events.editedByActiveMapper, self.editedByActiveMapper)
   },
+  setHasLearnedTopicCreation: function(value) {
+    const self = Map
+    self.hasLearnedTopicCreation = value
+    ReactApp.render()
+  },
   requestAccess: function() {
     const self = Map
     self.requests.push({
@@ -140,6 +146,8 @@ const Map = {
       Filter.close()
       InfoBox.close()
       Realtime.endActiveMap()
+      self.requests = []
+      self.hasLearnedTopicCreation = true
     }
   },
   star: function() {

frontend/src/Metamaps/Topic.js

@@ -291,8 +291,7 @@ const Topic = {
       return
     }
 
-    // hide the 'double-click to add a topic' message
+    Map.setHasLearnedTopicCreation(true)
-    GlobalUI.hideDiv('#instructions')
 
     $(document).trigger(Map.events.editedByActiveMapper)
 
@@ -325,8 +324,7 @@ const Topic = {
   getTopicFromAutocomplete: function(id) {
     var self = Topic
 
-    // hide the 'double-click to add a topic' message
+    Map.setHasLearnedTopicCreation(true)
-    GlobalUI.hideDiv('#instructions')
 
     $(document).trigger(Map.events.editedByActiveMapper)
 

frontend/src/components/MapView/Instructions.js

@@ -0,0 +1,23 @@
+import React, { Component, PropTypes } from 'react'
+
+class Instructions extends Component {
+
+  static propTypes = {
+    mobile: PropTypes.bool,
+    hasLearnedTopicCreation: PropTypes.bool
+  }
+
+  render() {
+    const { hasLearnedTopicCreation, mobile } = this.props
+    return hasLearnedTopicCreation ? null : <div id="instructions">
+      {!mobile && <div className="addTopic">
+        Double-click to<br/>add a topic
+      </div>}
+      {mobile && <div className="addTopic">
+        Double-tap to<br/>add a topic
+      </div>}
+    </div>
+  }
+}
+
+export default Instructions

frontend/src/components/MapView/index.js

@@ -3,6 +3,7 @@ import React, { Component, PropTypes } from 'react'
 import DataVis from './DataVis'
 import MapButtons from './MapButtons'
 import InfoAndHelp from './InfoAndHelp'
+import Instructions from './Instructions'
 import MapControls from './MapControls'
 import MapChat from './MapChat'
 import TopicCard from '../TopicCard'
@@ -28,7 +29,8 @@ class MapView extends Component {
     openHelpLightbox: PropTypes.func,
     onZoomExtents: PropTypes.func,
     onZoomIn: PropTypes.func,
-    onZoomOut: PropTypes.func
+    onZoomOut: PropTypes.func,
+    hasLearnedTopicCreation: PropTypes.bool
   }
 
   constructor(props) {
@@ -58,11 +60,11 @@ class MapView extends Component {
   }
 
   render = () => {
-    const { map, currentUser, onOpen, onClose,
+    const { mobile, map, currentUser, onOpen, onClose,
             toggleMapInfoBox, toggleFilterBox, infoBoxHtml, filterBoxHtml,
             openImportLightbox, forkMap, openHelpLightbox,
             mapIsStarred, onMapStar, onMapUnstar,
-            onZoomExtents, onZoomIn, onZoomOut } = this.props
+            onZoomExtents, onZoomIn, onZoomOut, hasLearnedTopicCreation } = this.props
     const { chatOpen } = this.state
     const onChatOpen = () => {
       this.setState({chatOpen: true})
@@ -83,6 +85,7 @@ class MapView extends Component {
                   filterBoxHtml={filterBoxHtml} />
       <DataVis />
       <TopicCard {...this.props} />
+      {currentUser && <Instructions mobile={mobile} hasLearnedTopicCreation={hasLearnedTopicCreation} />}
       {currentUser && <MapChat {...this.props} onOpen={onChatOpen} onClose={onChatClose} chatOpen={chatOpen} ref={x => this.mapChat = x} />}
       <MapControls onClickZoomExtents={onZoomExtents}
                    onClickZoomIn={onZoomIn}
@@ -100,34 +103,3 @@ class MapView extends Component {
 }
 
 export default MapView
-
-/*
-
-<% if authenticated? %>
-    <% # for creating and pulling in topics and synapses %>
-    <% if controller_name == 'maps' && action_name == "conversation" %>
-      <%= render :partial => 'maps/newtopicsecret' %>
-    <% else %>
-      <%= render :partial => 'maps/newtopic' %>
-    <% end %>
-    <%= render :partial => 'maps/newsynapse' %>
-    <% # for populating the change metacode list on the topic card %>
-    <%= render :partial => 'shared/metacodeoptions' %>
-<% end %>
-<%= render :partial => 'layouts/lowermapelements' %>
-
-<div id="loading"></div>
-
-<div id="instructions">
-  <div className="addTopic">
-    Double-click to<br>add a topic
-  </div>
-  <div className="tabKey">
-    Use Tab & Shift+Tab to select a metacode
-  </div>
-  <div className="enterKey">
-    Press Enter to add the topic
-  </div>
-</div>
-
-*/