74 lines
2.7 KiB
JavaScript
74 lines
2.7 KiB
JavaScript
|
import React from 'react'
|
||
|
|
|
||
|
|
const inmaps = (topic) => {
|
||
|
|
const inmapsArray = topic.get('inmaps') || []
|
||
|
|
const inmapsLinks = topic.get('inmapsLinks') || []
|
||
|
|
|
||
|
|
let html = ''
|
||
|
|
if (inmapsArray.length < 6) {
|
||
|
|
for (let i = 0; i < inmapsArray.length; i++) {
|
||
|
|
const url = '/maps/' + inmapsLinks[i]
|
||
|
|
html += '<li><a href="' + url + '">' + inmapsArray[i] + '</a></li>'
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
for (let i = 0; i < 5; i++) {
|
||
|
|
const url = '/maps/' + inmapsLinks[i]
|
||
|
|
html += '<li><a href="' + url + '">' + inmapsArray[i] + '</a></li>'
|
||
|
|
}
|
||
|
|
const extra = inmapsArray.length - 5
|
||
|
|
html += '<li><span class="showMore">See ' + extra + ' more...</span></li>'
|
||
|
|
for (let i = 5; i < inmapsArray.length; i++) {
|
||
|
|
const url = '/maps/' + inmapsLinks[i]
|
||
|
|
html += '<li class="hideExtra extraText"><a href="' + url + '">' + inmapsArray[i] + '</a></li>'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return html
|
||
|
|
}
|
||
|
|
|
||
|
|
const Links = (props) => {
|
||
|
|
const { topic } = 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()
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="links">
|
||
|
|
<div className="linkItem icon">
|
||
|
|
<div className={`metacodeTitle mbg${topic.get('metacode_id')}`}>
|
||
|
|
{topic.getMetacode().get('name')}
|
||
|
|
<div className="expandMetacodeSelect"></div>
|
||
|
|
</div>
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
<div className="linkItem mapCount">
|
||
|
|
<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(props.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>
|
||
|
|
<div className="clearfloat"></div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Links.propTypes = {
|
||
|
|
* topic: PropTypes.object, // backbone object
|
||
|
|
* }
|
||
|
|
*/
|
||
|
|
|
||
|
|
export default Links
|