move metacode and permissions into subcomponents

frontend/src/components/TopicCard/Links.js

@@ -1,7 +1,7 @@
 import React, { PropTypes, Component } from 'react'
 
-import DataModel from '../../Metamaps/DataModel'
+import Metacode from './Metacode'
-import Visualize from '../../Metamaps/Visualize'
+import Permission from './Permission'
 
 const inmaps = (topic) => {
   const inmapsArray = topic.get('inmaps') || []
@@ -31,128 +31,6 @@ const inmaps = (topic) => {
 
 // TODO all of these should be largely turned into passed-in callbacks
 const bindShowCardListeners = (topic, ActiveMapper) => {
-  var authorized = topic.authorizeToEdit(ActiveMapper)
-  var selectingMetacode = false
-  // attach the listener that shows the metacode title when you hover over the image
-  $('.showcard .metacodeImage').mouseenter(function() {
-    $('.showcard .icon').css('z-index', '4')
-    $('.showcard .metacodeTitle').show()
-  })
-  $('.showcard .linkItem.icon').mouseleave(function() {
-    if (!selectingMetacode) {
-      $('.showcard .metacodeTitle').hide()
-      $('.showcard .icon').css('z-index', '1')
-    }
-  })
-
-  var metacodeLiClick = function() {
-    selectingMetacode = false
-    var metacodeId = parseInt($(this).attr('data-id'))
-    var metacode = DataModel.Metacodes.get(metacodeId)
-    $('.CardOnGraph').find('.metacodeTitle').html(metacode.get('name'))
-      .append('<div class="expandMetacodeSelect"></div>')
-      .attr('class', 'metacodeTitle mbg' + metacode.id)
-    $('.CardOnGraph').find('.metacodeImage').css('background-image', 'url(' + metacode.get('icon') + ')')
-    topic.save({
-      metacode_id: metacode.id
-    })
-    Visualize.mGraph.plot()
-    $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge')
-    $('.metacodeTitle').hide()
-    $('.showcard .icon').css('z-index', '1')
-  }
-
-  var openMetacodeSelect = function(event) {
-    var TOPICCARD_WIDTH = 300
-    var METACODESELECT_WIDTH = 404
-    var MAX_METACODELIST_HEIGHT = 270
-
-    if (!selectingMetacode) {
-      selectingMetacode = true
-
-      // this is to make sure the metacode
-      // select is accessible onscreen, when opened
-      // while topic card is close to the right
-      // edge of the screen
-      var windowWidth = $(window).width()
-      var showcardLeft = parseInt($('.showcard').css('left'))
-      var distanceFromEdge = windowWidth - (showcardLeft + TOPICCARD_WIDTH)
-      if (distanceFromEdge < METACODESELECT_WIDTH) {
-        $('.metacodeSelect').addClass('onRightEdge')
-      }
-
-      // this is to make sure the metacode
-      // select is accessible onscreen, when opened
-      // while topic card is close to the bottom
-      // edge of the screen
-      var windowHeight = $(window).height()
-      var showcardTop = parseInt($('.showcard').css('top'))
-      var topicTitleHeight = $('.showcard .title').height() + parseInt($('.showcard .title').css('padding-top')) + parseInt($('.showcard .title').css('padding-bottom'))
-      var distanceFromBottom = windowHeight - (showcardTop + topicTitleHeight)
-      if (distanceFromBottom < MAX_METACODELIST_HEIGHT) {
-        $('.metacodeSelect').addClass('onBottomEdge')
-      }
-
-      $('.metacodeSelect').show()
-      event.stopPropagation()
-    }
-  }
-
-  var hideMetacodeSelect = function() {
-    selectingMetacode = false
-    $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge')
-    $('.metacodeTitle').hide()
-    $('.showcard .icon').css('z-index', '1')
-  }
-
-  if (authorized) {
-    $('.showcard .metacodeTitle').click(openMetacodeSelect)
-    $('.showcard').click(hideMetacodeSelect)
-    $('.metacodeSelect > ul > li').click(function(event) {
-      event.stopPropagation()
-    })
-    $('.metacodeSelect li li').click(metacodeLiClick)
-  }
-
-  var hidePermissionSelect = function() {
-    selectingPermission = false
-    $('.showcard .yourTopic .mapPerm').removeClass('minimize') // this line flips the pull up arrow to a drop down arrow
-    $('.showcard .permissionSelect').remove()
-  }
-
-  var permissionLiClick = function(event) {
-    selectingPermission = false
-    var permission = $(this).attr('class')
-    topic.save({
-      permission: permission,
-      defer_to_map_id: null
-    })
-    $('.showcard .mapPerm').removeClass('co pu pr').addClass(permission.substring(0, 2))
-    hidePermissionSelect()
-  }
-
-  var openPermissionSelect = function(event) {
-    if (!selectingPermission) {
-      selectingPermission = true
-      $(this).addClass('minimize') // this line flips the drop down arrow to a pull up arrow
-      if ($(this).hasClass('co')) {
-        $(this).append('<ul class="permissionSelect"><li class="public"></li><li class="private"></li></ul>')
-      } else if ($(this).hasClass('pu')) {
-        $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="private"></li></ul>')
-      } else if ($(this).hasClass('pr')) {
-        $(this).append('<ul class="permissionSelect"><li class="commons"></li><li class="public"></li></ul>')
-      }
-      $('.showcard .permissionSelect li').click(permissionLiClick)
-      event.stopPropagation()
-    }
-  }
-  // ability to change permission
-  var selectingPermission = false
-  if (topic.authorizePermissionChange(ActiveMapper)) {
-    $('.showcard .yourTopic .mapPerm').click(openPermissionSelect)
-    $('.showcard').click(hidePermissionSelect)
-  }
-
   $('.links .mapCount').unbind().click(function(event) {
     $('.mapCount .tip').toggle()
     $('.showcard .hoverTip').toggleClass('hide')
@@ -181,22 +59,18 @@ class Links extends Component {
   }
 
   render = () => {
-    const { topic } = this.props
+    const { topic, ActiveMapper } = this.props
     const topicId = topic.isNew() ? topic.cid : topic.id // TODO should we really be using cid here?!?
-    const permission = topic.get('permission')
+    const metacode = topic.getMetacode()
-    // the code for this is stored in /views/main/_metacodeOptions.html.erb
-    const metacodeSelectHTML = $('#metacodeOptions').html()
 
     return (
       <div className="links">
-        <div className="linkItem icon">
+        <Metacode
-          <div className={`metacodeTitle mbg${topic.get('metacode_id')}`}>
+          topic={topic}
-            {topic.getMetacode().get('name')}
+          metacode={metacode}
-            <div className="expandMetacodeSelect"></div>
+          ActiveMapper={ActiveMapper}
-          </div>
+          updateTopic={this.props.updateTopic}
-          <div className="metacodeImage" style={{backgroundImage: `url(${topic.getMetacode().get('icon')})`}} title="click and drag to move card"></div>
+        />
-          <div className="metacodeSelect" dangerouslySetInnerHTML={{ __html: metacodeSelectHTML }} />
-        </div>
         <div className="linkItem contributor">
           <a href={`/explore/mapper/${topic.get('user_id')}`} target="_blank"><img src={topic.get('user_image')} className="contributorIcon" width="32" height="32" /></a>
           <div className="contributorName">{topic.get('user_name')}</div>
@@ -205,14 +79,18 @@ class Links extends Component {
           <div className="mapCountIcon"></div>
           {topic.get('map_count').toString()}
           <div className="hoverTip">Click to see which maps topic appears on</div>
-          <div className="tip"><ul>{inmaps(this.props.topic)}</ul></div>
+          <div className="tip"><ul>{inmaps(topic)}</ul></div>
         </div>
         <a href={`/topics/${topicId}`} target="_blank" className="linkItem synapseCount">
           <div className="synapseCountIcon"></div>
           {topic.get('synapse_count').toString()}
           <div className="tip">Click to see this topics synapses</div>
         </a>
-        <div className={`linkItem mapPerm ${permission.substring(0, 2)}`} title={permission}></div>
+        <Permission
+          topic={topic}
+          ActiveMapper={ActiveMapper}
+          updateTopic={this.props.updateTopic}
+        />
         <div className="clearfloat"></div>
       </div>
     )
@@ -221,7 +99,8 @@ class Links extends Component {
 
 Links.propTypes = {
   topic: PropTypes.object, // backbone object
-  ActiveMapper: PropTypes.object
+  ActiveMapper: PropTypes.object,
+  updateTopic: PropTypes.func
 }
 
 export default Links

frontend/src/components/TopicCard/Metacode.js

@@ -0,0 +1,124 @@
+import React, { PropTypes, Component } from 'react'
+
+import DataModel from '../../Metamaps/DataModel'
+import Visualize from '../../Metamaps/Visualize'
+
+// TODO all of these should be largely turned into passed-in callbacks
+const bindShowCardListeners = (topic, ActiveMapper) => {
+  var authorized = topic.authorizeToEdit(ActiveMapper)
+  var selectingMetacode = false
+  // attach the listener that shows the metacode title when you hover over the image
+  $('.showcard .metacodeImage').mouseenter(function() {
+    $('.showcard .icon').css('z-index', '4')
+    $('.showcard .metacodeTitle').show()
+  })
+  $('.showcard .linkItem.icon').mouseleave(function() {
+    if (!selectingMetacode) {
+      $('.showcard .metacodeTitle').hide()
+      $('.showcard .icon').css('z-index', '1')
+    }
+  })
+
+  var metacodeLiClick = function() {
+    selectingMetacode = false
+    var metacodeId = parseInt($(this).attr('data-id'))
+    var metacode = DataModel.Metacodes.get(metacodeId)
+    $('.CardOnGraph').find('.metacodeTitle').html(metacode.get('name'))
+      .append('<div class="expandMetacodeSelect"></div>')
+      .attr('class', 'metacodeTitle mbg' + metacode.id)
+    $('.CardOnGraph').find('.metacodeImage').css('background-image', 'url(' + metacode.get('icon') + ')')
+    topic.save({
+      metacode_id: metacode.id
+    })
+    Visualize.mGraph.plot()
+    $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge')
+    $('.metacodeTitle').hide()
+    $('.showcard .icon').css('z-index', '1')
+  }
+
+  var openMetacodeSelect = function(event) {
+    var TOPICCARD_WIDTH = 300
+    var METACODESELECT_WIDTH = 404
+    var MAX_METACODELIST_HEIGHT = 270
+
+    if (!selectingMetacode) {
+      selectingMetacode = true
+
+      // this is to make sure the metacode
+      // select is accessible onscreen, when opened
+      // while topic card is close to the right
+      // edge of the screen
+      var windowWidth = $(window).width()
+      var showcardLeft = parseInt($('.showcard').css('left'))
+      var distanceFromEdge = windowWidth - (showcardLeft + TOPICCARD_WIDTH)
+      if (distanceFromEdge < METACODESELECT_WIDTH) {
+        $('.metacodeSelect').addClass('onRightEdge')
+      }
+
+      // this is to make sure the metacode
+      // select is accessible onscreen, when opened
+      // while topic card is close to the bottom
+      // edge of the screen
+      var windowHeight = $(window).height()
+      var showcardTop = parseInt($('.showcard').css('top'))
+      var topicTitleHeight = $('.showcard .title').height() + parseInt($('.showcard .title').css('padding-top')) + parseInt($('.showcard .title').css('padding-bottom'))
+      var distanceFromBottom = windowHeight - (showcardTop + topicTitleHeight)
+      if (distanceFromBottom < MAX_METACODELIST_HEIGHT) {
+        $('.metacodeSelect').addClass('onBottomEdge')
+      }
+
+      $('.metacodeSelect').show()
+      event.stopPropagation()
+    }
+  }
+
+  var hideMetacodeSelect = function() {
+    selectingMetacode = false
+    $('.metacodeSelect').hide().removeClass('onRightEdge onBottomEdge')
+    $('.metacodeTitle').hide()
+    $('.showcard .icon').css('z-index', '1')
+  }
+
+  if (authorized) {
+    $('.showcard .metacodeTitle').click(openMetacodeSelect)
+    $('.showcard').click(hideMetacodeSelect)
+    $('.metacodeSelect > ul > li').click(function(event) {
+      event.stopPropagation()
+    })
+    $('.metacodeSelect li li').click(metacodeLiClick)
+  }
+}
+
+class Links extends Component {
+  componentDidMount = () => {
+    bindShowCardListeners(this.props.topic, this.props.ActiveMapper)
+  }
+
+  render = () => {
+    const { metacode } = this.props
+    // the code for this is stored in /views/main/_metacodeOptions.html.erb
+    const metacodeSelectHTML = $('#metacodeOptions').html()
+
+    return (
+      <div className="linkItem icon">
+        <div className={`metacodeTitle mbg${metacode.get('id')}`}>
+          {metacode.get('name')}
+          <div className="expandMetacodeSelect"></div>
+        </div>
+        <div className="metacodeImage" style={{backgroundImage: `url(${metacode.get('icon')})`}} title="click and drag to move card"></div>
+        <div className="metacodeSelect" dangerouslySetInnerHTML={{ __html: metacodeSelectHTML }} />
+      </div>
+    )
+  }
+}
+
+Links.propTypes = {
+  topic: PropTypes.object, // backbone object
+  metacode: PropTypes.object, // backbone object
+  ActiveMapper: PropTypes.object,
+  updateTopic: PropTypes.func
+}
+
+export default Links
+
+

frontend/src/components/TopicCard/Permission.js

@@ -0,0 +1,81 @@
+import React, { PropTypes, Component } from 'react'
+
+// TODO how do we make it so that clicking elsewhere on the topic
+// card cancels this
+class Permission extends Component {
+  
+  constructor(props) {
+    super(props)
+    this.state = {
+      selectingPermission: false
+    }
+  }
+  
+  componentDidMount = () => {
+    bindShowCardListeners(this.props.topic, this.props.ActiveMapper, this)
+  }
+  
+  togglePermissionSelect = () => {
+    this.setState({selectingPermission: !this.state.selectingPermission})
+  }
+  
+  openPermissionSelect = () => {
+    this.setState({selectingPermission: true})
+  }
+  
+  closePermissionSelect = () => {
+    this.setState({selectingPermission: false})
+  }
+
+  render = () => {
+    const self = this
+    const { topic, ActiveMapper, updateTopic } = this.props
+    const { selectingPermission } = this.state
+    const permission = topic.get('permission')
+    const canChange = topic.authorizePermissionChange(ActiveMapper)
+    const onClick = canChange ? this.togglePermissionSelect : () => {}
+    let classes = `linkItem mapPerm ${permission.substring(0, 2)}`
+    if (selectingPermission) classes += ' minimize'
+    const liClick = value => {
+      return event => {
+        self.closePermissionSelect()
+        updateTopic({
+          permission: value,
+          defer_to_map_id: null
+        })
+        // prevents it from also firing the event listener on the parent
+        event.preventDefault()
+      }
+    }
+    const selectCommons = <li key='1' className='commons' onClick={liClick('commons')}></li>
+    const selectPublic = <li key='2' className='public' onClick={liClick('public')}></li>
+    const selectPrivate = <li key='3' className='private' onClick={liClick('private')}></li>
+    let permOptions
+    if (permission === 'commons') {
+      permOptions = [selectPublic, selectPrivate]
+    } else if (permission === 'public') {
+      permOptions = [selectCommons, selectPrivate]
+    } else if (permission === 'private') {
+      permOptions = [selectCommons, selectPublic]
+    }
+
+    return (
+      <div
+          className={classes}
+          title={permission}
+          onClick={onClick}>
+        {selectingPermission && <ul className="permissionSelect">
+          {permOptions}
+        </ul>}
+      </div>
+    )
+  }
+}
+
+Permission.propTypes = {
+  topic: PropTypes.object, // backbone object
+  ActiveMapper: PropTypes.object,
+  updateTopic: PropTypes.func
+}
+
+export default Permission

frontend/src/components/TopicCard/index.js

@@ -26,6 +26,7 @@ class ReactTopicCard extends Component {
           <Title name={topic.get('name')} onChange={this.props.updateTopic} />
           <Links topic={topic}
             ActiveMapper={this.props.ActiveMapper}
+            updateTopic={this.props.updateTopic}
           />
           <Desc desc={topic.get('desc')}
             authorizedToEdit={topic.authorizeToEdit(ActiveMapper)}