From 8e23a0f1bd4827be4d257bfefb2ad1b3e6e8215c Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Thu, 26 Jan 2017 07:15:24 +0000 Subject: [PATCH] move metacode and permissions into subcomponents --- frontend/src/components/TopicCard/Links.js | 157 ++---------------- frontend/src/components/TopicCard/Metacode.js | 124 ++++++++++++++ .../src/components/TopicCard/Permission.js | 81 +++++++++ frontend/src/components/TopicCard/index.js | 1 + 4 files changed, 224 insertions(+), 139 deletions(-) create mode 100644 frontend/src/components/TopicCard/Metacode.js create mode 100644 frontend/src/components/TopicCard/Permission.js diff --git a/frontend/src/components/TopicCard/Links.js b/frontend/src/components/TopicCard/Links.js index 93bebd82..1eb85a44 100644 --- a/frontend/src/components/TopicCard/Links.js +++ b/frontend/src/components/TopicCard/Links.js @@ -1,7 +1,7 @@ import React, { PropTypes, Component } from 'react' -import DataModel from '../../Metamaps/DataModel' -import Visualize from '../../Metamaps/Visualize' +import Metacode from './Metacode' +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('
') - .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('') - } else if ($(this).hasClass('pu')) { - $(this).append('') - } else if ($(this).hasClass('pr')) { - $(this).append('') - } - $('.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') - // the code for this is stored in /views/main/_metacodeOptions.html.erb - const metacodeSelectHTML = $('#metacodeOptions').html() + const metacode = topic.getMetacode() return (
-
-
- {topic.getMetacode().get('name')} -
-
-
-
-
+
{topic.get('user_name')}
@@ -205,14 +79,18 @@ class Links extends Component {
{topic.get('map_count').toString()}
Click to see which maps topic appears on
-
    {inmaps(this.props.topic)}
+
    {inmaps(topic)}
{topic.get('synapse_count').toString()}
Click to see this topics synapses
 -
+
) @@ -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 diff --git a/frontend/src/components/TopicCard/Metacode.js b/frontend/src/components/TopicCard/Metacode.js new file mode 100644 index 00000000..574759f1 --- /dev/null +++ b/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('
') + .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 ( +
+
+ {metacode.get('name')} +
+
+
+
+
+ ) + } +} + +Links.propTypes = { + topic: PropTypes.object, // backbone object + metacode: PropTypes.object, // backbone object + ActiveMapper: PropTypes.object, + updateTopic: PropTypes.func +} + +export default Links + + diff --git a/frontend/src/components/TopicCard/Permission.js b/frontend/src/components/TopicCard/Permission.js new file mode 100644 index 00000000..cef32cc8 --- /dev/null +++ b/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 =
  • + const selectPublic =
  • + const selectPrivate =
  • + let permOptions + if (permission === 'commons') { + permOptions = [selectPublic, selectPrivate] + } else if (permission === 'public') { + permOptions = [selectCommons, selectPrivate] + } else if (permission === 'private') { + permOptions = [selectCommons, selectPublic] + } + + return ( +
    + {selectingPermission &&
      + {permOptions} +
    } +
    + ) + } +} + +Permission.propTypes = { + topic: PropTypes.object, // backbone object + ActiveMapper: PropTypes.object, + updateTopic: PropTypes.func +} + +export default Permission diff --git a/frontend/src/components/TopicCard/index.js b/frontend/src/components/TopicCard/index.js index 1cd6f3f9..8af548c7 100644 --- a/frontend/src/components/TopicCard/index.js +++ b/frontend/src/components/TopicCard/index.js @@ -26,6 +26,7 @@ class ReactTopicCard extends Component { <Links topic={topic} ActiveMapper={this.props.ActiveMapper} + updateTopic={this.props.updateTopic} /> <Desc desc={topic.get('desc')} authorizedToEdit={topic.authorizeToEdit(ActiveMapper)}