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.
",
nameHTML: outdent`
@@ -34,12 +33,12 @@ const InfoBox = {
data-bip-value="{{desc}}"
>{{desc}}`,
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) {
- self.changing = true
- $('.mapInfoBox').fadeIn(200, function() {
- self.changing = false
- self.isOpen = true
- })
- }
+ $('.mapInfoBox').fadeIn(200, function() {
+ self.isOpen = true
+ })
},
close: function() {
var self = InfoBox
-
$('.mapInfoIcon div').removeClass('hide')
- if (!self.changing) {
- self.changing = true
- $('.mapInfoBox').fadeOut(200, function() {
- self.changing = false
- self.isOpen = false
- self.hidePermissionSelect()
- $('.mapContributors .tip').hide()
- })
- }
+ $('.mapInfoBox').fadeOut(200, function() {
+ 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' : ''
- classes += canEdit ? ' canEdit' : ''
- classes += shareable ? ' shareable' : ''
- $('.mapInfoBox').removeClass('shareable yourMap canEdit')
- .addClass(classes)
- .html(self.generateBoxHTML.render(obj))
-
+ self.html = self.generateBoxHTML.render(obj)
+ ReactApp.render()
self.attachEventListeners()
},
attachEventListeners: function() {
diff --git a/frontend/src/components/MapView/InfoAndHelp.js b/frontend/src/components/MapView/InfoAndHelp.js
index dd3df321..3e86c5fd 100644
--- a/frontend/src/components/MapView/InfoAndHelp.js
+++ b/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
- {infoBoxOpen &&
{tooltip}
+
Map Info
diff --git a/frontend/src/components/MapView/MapInfoBox.js b/frontend/src/components/MapView/MapInfoBox.js
index 96cfd45f..7f64da0f 100644
--- a/frontend/src/components/MapView/MapInfoBox.js
+++ b/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
-
- let name, contributors_class, contributor_image, contributor_list,
- contributor_count, topic_count, synapse_count, map_creator_tip,
- permission, desc, user_name, created_at, updated_at
- return
-
+ const html = {__html: infoBoxHtml}
+ const isCreator = map.authorizePermissionChange(currentUser)
+ const canEdit = map.authorizeToEdit(currentUser)
+ let classes = 'mapInfoBox mapElement mapElementHidden permission '
+ classes += isCreator ? 'yourMap' : ''
+ classes += canEdit ? ' canEdit' : ''
+ return
}
}
diff --git a/frontend/src/components/MapView/index.js b/frontend/src/components/MapView/index.js
index f9c8d1c3..ef9222e4 100644
--- a/frontend/src/components/MapView/index.js
+++ b/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 { infoBoxOpen, filterBoxOpen, chatOpen } = this.state
+ const { map, mapIsStarred, currentUser, onOpen, onClose, toggleMapInfoBox, toggleFilterBox, infoBoxHtml } = this.props
+ 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 Click here to name this map
- {name}
-
-
-
- 
- {contributor_count}
-
- {contributor_list}
-
- {topic_count}
-
-
- {synapse_count}
-
-
- {map_creator_tip}
-
-
-
- {desc}
-
-
-
- Created by: {user_name} on {created_at}
-Last edited: {updated_at}
-
-
-
-
-
- Update Thumbnail
- Thumb
-
-
- Delete
-
-
-
- Share
-
-
-
}
}