just keep using current mapinfobox

app/views/layouts/_templates.html.erb

@@ -4,6 +4,53 @@
   #%>
 
 <div class="templates">
+  <script type="text/template" id="mapInfoBoxTemplate">
+    <div class="requestTitle">Click here to name this map</div>
+    <div class="mapInfoName" id="mapInfoName">{{{name}}}</div>
+
+    <div class="mapInfoStat">
+      <div class="infoStatIcon mapContributors hoverForTip">
+        <img id="mapContribs" class="{{contributors_class}}"
+          width="25" height="25" src="{{contributor_image}}" />
+        <span class="count">{{contributor_count}}</span>
+        <div class="tip">{{{contributor_list}}}</div>
+      </div>
+      <div class="infoStatIcon mapTopics">
+        {{topic_count}}
+      </div>
+      <div class="infoStatIcon mapSynapses">
+        {{synapse_count}}
+      </div>
+      <div class="infoStatIcon mapPermission {{permission}} hoverForTip">
+        {{{map_creator_tip}}}
+      </div>
+      <div class="clearfloat"></div>
+    </div>
+    <div class="mapInfoDesc" id="mapInfoDesc">
+      {{{desc}}}
+    </div>
+
+    <div class="mapInfoMeta">
+      <p class="mapCreatedAt"><span>Created by:</span> {{user_name}} on {{created_at}}</p>
+      <p class="mapEditedAt"><span>Last edited:</span> {{updated_at}}</p>
+      <div class="mapInfoButtonsWrapper">
+        <div class="mapInfoThumbnail">
+          <div class="thumbnail"></div>
+          <div class="tooltip">Update Thumbnail</div>
+          <span>Thumb</span>
+        </div>
+        <div class="mapInfoDelete">
+          <div class="deleteMap"></div>
+          <span>Delete</span>
+        </div>
+        <div class="mapInfoShare">
+          <div class="mapInfoShareIcon"></div>
+          <span>Share</span>
+        </div>
+      </div>
+    </div>
+  </script>
+
   <script type="text/template" id="mapSearchTemplate">
     <div class="result{{rtype}}">
       <div class="searchResIconWrapper">

app/views/layouts/application.html.erb

@@ -30,10 +30,10 @@
         <%= render :partial => 'maps/newsynapse' %>
         <% # for populating the change metacode list on the topic card %>
         <%= render :partial => 'shared/metacodeoptions' %>
+        <script type="text/javascript">
+          Metamaps.ServerData.unreadNotificationsCount = <%= user_unread_notification_count %>
+          Metamaps.ServerData.mapIsStarred = <%= @map && current_user.starred_map?(@map) ? true : false %>
+        </script>
     <% end %>
     <div id="loading"></div>
- <script type="text/javascript">
-   Metamaps.ServerData.unreadNotificationsCount = <%= user_unread_notification_count %>
-   Metamaps.ServerData.mapIsStarred = <%= current_user && @map && current_user.starred_map?(@map) ? true : false %>
- </script>
 <%= render :partial => 'layouts/foot' %>

frontend/src/Metamaps/GlobalUI/ReactApp.js

@@ -11,7 +11,7 @@ import Active from '../Active'
 import DataModel from '../DataModel'
 import { ExploreMaps, ChatView, TopicCard } from '../Views'
 import Realtime from '../Realtime'
-import Map from '../Map'
+import Map, { InfoBox } from '../Map'
 import Topic from '../Topic'
 import makeRoutes from '../../components/makeRoutes'
 let routes
@@ -73,7 +73,9 @@ const ReactApp = {
       map: Active.Map,
       mapIsStarred: self.mapIsStarred,
       endActiveMap: Map.end,
-      launchNewMap: Map.launch
+      launchNewMap: Map.launch,
+      toggleMapInfoBox: InfoBox.toggleBox,
+      infoBoxHtml: InfoBox.html
       // filters
     }
   },

frontend/src/Metamaps/Map/InfoBox.js

@@ -4,12 +4,11 @@ import outdent from 'outdent'
 
 import Active from '../Active'
 import DataModel from '../DataModel'
-import GlobalUI from '../GlobalUI'
+import GlobalUI, { ReactApp } from '../GlobalUI'
 import Util from '../Util'
 
 const InfoBox = {
   isOpen: false,
-  changing: false,
   selectingPermission: false,
   changePermissionText: "<div class='tooltips'>As the creator, you can change the permission of this map, and the permission of all the topics and synapses you have authority to change will change as well.</div>",
   nameHTML: outdent`
@@ -34,12 +33,12 @@ const InfoBox = {
       data-bip-value="{{desc}}"
     >{{desc}}</span>`,
   userImageUrl: '',
+  html: '',
   init: function(serverData, updateThumbnail) {
     var self = InfoBox
 
     self.updateThumbnail = updateThumbnail
 
-    $('.mapInfoIcon').click(self.toggleBox)
     $('.mapInfoBox').click(function(event) {
       event.stopPropagation()
     })
@@ -47,7 +46,7 @@ const InfoBox = {
 
     self.attachEventListeners()
 
-    self.generateBoxHTML = Hogan.compile('')
+    self.generateBoxHTML = Hogan.compile($('#mapInfoBoxTemplate').html())
 
     self.userImageUrl = serverData['user.png']
 
@@ -71,27 +70,18 @@ const InfoBox = {
   open: function() {
     var self = InfoBox
     $('.mapInfoIcon div').addClass('hide')
-    if (!self.isOpen && !self.changing) {
+    $('.mapInfoBox').fadeIn(200, function() {
-      self.changing = true
+      self.isOpen = true
-      $('.mapInfoBox').fadeIn(200, function() {
+    })
-        self.changing = false
-        self.isOpen = true
-      })
-    }
   },
   close: function() {
     var self = InfoBox
-
     $('.mapInfoIcon div').removeClass('hide')
-    if (!self.changing) {
+    $('.mapInfoBox').fadeOut(200, function() {
-      self.changing = true
+      self.isOpen = false
-      $('.mapInfoBox').fadeOut(200, function() {
+      self.hidePermissionSelect()
-        self.changing = false
+      $('.mapContributors .tip').hide()
-        self.isOpen = false
+    })
-        self.hidePermissionSelect()
-        $('.mapContributors .tip').hide()
-      })
-    }
   },
   load: function() {
     var self = InfoBox
@@ -119,13 +109,8 @@ const InfoBox = {
     obj['created_at'] = map.get('created_at_clean')
     obj['updated_at'] = map.get('updated_at_clean')
 
-    var classes = isCreator ? 'yourMap' : ''
+    self.html = self.generateBoxHTML.render(obj)
-    classes += canEdit ? ' canEdit' : ''
+    ReactApp.render()
-    classes += shareable ? ' shareable' : ''
-    $('.mapInfoBox').removeClass('shareable yourMap canEdit')
-      .addClass(classes)
-      .html(self.generateBoxHTML.render(obj))
-
     self.attachEventListeners()
   },
   attachEventListeners: function() {

frontend/src/components/MapView/InfoAndHelp.js

@@ -7,19 +7,20 @@ class InfoAndHelp extends Component {
     mapIsStarred: PropTypes.bool,
     currentUser: PropTypes.object,
     map: PropTypes.object,
-    infoBoxOpen: PropTypes.bool
+    onInfoClick: PropTypes.func,
+    infoBoxhtml: PropTypes.string
   }
 
   render () {
-    const { mapIsStarred, map, currentUser, infoBoxOpen } = this.props
+    const { mapIsStarred, map, currentUser, onInfoClick, infoBoxHtml } = this.props
     const starclassName = mapIsStarred ? 'starred' : ''
     const tooltip = mapIsStarred ? 'Star' : 'Unstar'
     return <div className="infoAndHelp">
-      {infoBoxOpen && <MapInfoBox map={map} currentUser={currentUser} />}
+      <MapInfoBox map={map} currentUser={currentUser} infoBoxHtml={infoBoxHtml} />
       <div className={`starMap infoElement mapElement ${starclassName}`}>
         <div className="tooltipsAbove">{tooltip}</div>
       </div>
-      <div className="mapInfoIcon infoElement mapElement">
+      <div className="mapInfoIcon infoElement mapElement" onClick={onInfoClick}>
         <div className="tooltipsAbove">Map Info</div>
       </div>
       <div className="openCheatsheet openLightbox infoElement mapElement" data-open="cheatsheet">

frontend/src/components/MapView/MapInfoBox.js

@@ -3,60 +3,20 @@ import React, { Component, PropTypes } from 'react'
 class MapInfoBox extends Component {
   static propTypes = {
     currentUser: PropTypes.object,
-    map: PropTypes.object
+    map: PropTypes.object,
+    infoBoxHtml: PropTypes.string
   }
 
   render () {
-    const { currentUser, map } = this.props
+    const { currentUser, map, infoBoxHtml } = this.props
     if (!map) return null
-
+    const html = {__html: infoBoxHtml}
-    let name, contributors_class, contributor_image, contributor_list,
+    const isCreator = map.authorizePermissionChange(currentUser)
-        contributor_count, topic_count, synapse_count, map_creator_tip,
+    const canEdit = map.authorizeToEdit(currentUser)
-        permission, desc, user_name, created_at, updated_at
+    let classes = 'mapInfoBox mapElement mapElementHidden permission '
-    return <div className="mapInfoBox mapElement mapElementHidden permission">
+    classes += isCreator ? 'yourMap' : ''
-      <div className="requestTitle">Click here to name this map</div>
+    classes += canEdit ? ' canEdit' : ''
-      <div className="mapInfoName" id="mapInfoName">{name}</div>
+    return <div className={classes} dangerouslySetInnerHTML={html}></div>
-      <div className="mapInfoStat">
-        <div className="infoStatIcon mapContributors hoverForTip">
-          <img id="mapContribs" className="{contributors_class}"
-            width="25" height="25" src="{contributor_image}" />
-          <span className="count">{contributor_count}</span>
-          <div className="tip">{contributor_list}</div>
-        </div>
-        <div className="infoStatIcon mapTopics">
-          {topic_count}
-        </div>
-        <div className="infoStatIcon mapSynapses">
-          {synapse_count}
-        </div>
-        <div className={`infoStatIcon mapPermission ${permission} hoverForTip`}>
-          {map_creator_tip}
-        </div>
-        <div className="clearfloat"></div>
-      </div>
-      <div className="mapInfoDesc" id="mapInfoDesc">
-        {desc}
-      </div>
-      <div className="mapInfoMeta">
-        <p className="mapCreatedAt"><span>Created by:</span> {user_name} on {created_at}</p>
-        <p className="mapEditedAt"><span>Last edited:</span> {updated_at}</p>
-        <div className="mapInfoButtonsWrapper">
-          <div className="mapInfoThumbnail">
-            <div className="thumbnail"></div>
-            <div className="tooltip">Update Thumbnail</div>
-            <span>Thumb</span>
-          </div>
-          <div className="mapInfoDelete">
-            <div className="deleteMap"></div>
-            <span>Delete</span>
-          </div>
-          <div className="mapInfoShare">
-            <div className="mapInfoShareIcon"></div>
-            <span>Share</span>
-          </div>
-        </div>
-      </div>
-    </div>
   }
 }
 

frontend/src/components/MapView/index.js

@@ -13,15 +13,17 @@ class MapView extends Component {
     mapId: PropTypes.string,
     map: PropTypes.object,
     mapIsStarred: PropTypes.bool,
+    toggleFilterBox: PropTypes.func,
+    toggleMapInfoBox: PropTypes.func,
+    infoBoxHtml: PropTypes.string,
     currentUser: PropTypes.object,
     endActiveMap: PropTypes.func,
-    launchNewMap: PropTypes.func
+    launchNewMap: PropTypes.func,
   }
 
   constructor(props) {
     super(props)
     this.state = {
-      infoBoxOpen: false,
       filterBoxOpen: false,
       chatOpen: false
     }
@@ -34,7 +36,6 @@ class MapView extends Component {
 
   endMap() {
     this.setState({
-      infoBoxOpen: false,
       filterBoxOpen: false,
       chatOpen: false
     })
@@ -61,8 +62,8 @@ class MapView extends Component {
   }
 
   render = () => {
-    const { map, mapIsStarred, currentUser, onOpen, onClose } = this.props
+    const { map, mapIsStarred, currentUser, onOpen, onClose, toggleMapInfoBox, toggleFilterBox, infoBoxHtml } = this.props
-    const { infoBoxOpen, filterBoxOpen, chatOpen } = this.state
+    const { filterBoxOpen, chatOpen } = this.state
     const onChatOpen = () => {
       this.setState({chatOpen: true})
       onOpen()
@@ -73,12 +74,16 @@ class MapView extends Component {
     }
     // TODO: stop using {...this.props} and make explicit
     return <div className="mapWrapper">
-      <MapButtons currentUser={currentUser} filterBoxOpen={filterBoxOpen} />
+      <MapButtons currentUser={currentUser} onFilterClick={toggleFilterBox} />
       <DataVis />
       <TopicCard {...this.props} />
       <MapChat {...this.props} onOpen={onChatOpen} onClose={onChatClose} chatOpen={chatOpen} />
       <MapControls />
-      <InfoAndHelp infoBoxOpen={infoBoxOpen} mapIsStarred={mapIsStarred} currentUser={currentUser} map={map} />
+      <InfoAndHelp mapIsStarred={mapIsStarred}
+                   currentUser={currentUser}
+                   map={map}
+                   onInfoClick={toggleMapInfoBox}
+                   infoBoxHtml={infoBoxHtml} />
     </div>
   }
 }