diff --git a/app/assets/stylesheets/base.scss.erb b/app/assets/stylesheets/base.scss.erb index 283e1db0..5cabd00f 100644 --- a/app/assets/stylesheets/base.scss.erb +++ b/app/assets/stylesheets/base.scss.erb @@ -14,14 +14,14 @@ } .nameCounter.forTopic { - + } #center-container { position:relative; height:100%; width:100%; - + /* background-color:#031924; */ color:#444; } @@ -169,7 +169,7 @@ .CardOnGraph .best_in_place_desc { display:block; - margin-top:2px; + margin-top:2px; padding-right: 18px; margin-right: 8px; } @@ -213,50 +213,18 @@ padding: 0; height: 48px; } -.linkItem.contributor { - margin-left:40px; - z-index:1; - padding:17px 16px 17px 30px; - position: relative; -} -.contributor .contributorIcon { - position: absolute; - top: 8px; - left: 0; - border-radius: 16px; -} -.contributor:hover .contributorName { - display: block; -} - -.contributorName { - display: none; - position: absolute; - background: black; - text-align: center; - color: white; - border-radius: 2px; - font-family: din-regular; - line-height: 15px; - font-size: 12px; - padding: 3px 5px 2px; - white-space: nowrap; - margin-top: 36px; - margin-left: -32px; -} - -.contributor div:before { - content: ''; - position: absolute; - top: 128%; - left: 13px; - margin-top: -30px; - width: 0; - height: 0; - border-bottom: 4px solid #000000; - border-left: 5px solid transparent; - border-right: 5px solid transparent; +.contributor { + .contributorIcon { + display: inline-block; + vertical-align: middle; + border-radius: 14px; + margin: 5px; + } + span { + font-family: 'din-regular', sans-serif; + font-size: 14px; + } } .linkItem.mapCount { @@ -493,19 +461,21 @@ cursor: pointer; background-position: 0 -32px; } .permission.canEdit .minimize .expandMetacodeSelect { - + } .CardOnGraph .metacodeImage { - cursor:move; - width:46px; - height:46px; - position:absolute; - left:-23px; - top:0; - background-size:46px 46px; + width:32px; + height:32px; + background-size:32px 32px; background-position:0 0; background-repeat:no-repeat; + display: inline-block; + vertical-align: middle; + margin: 5px; +} +.CardOnGraph .metacodeName { + display: inline-block; } #metacodeOptions { @@ -521,7 +491,7 @@ cursor: pointer; white-space: nowrap; } .CardOnGraph .metacodeSelect ul { - position: relative; + position: relative; line-height: 14px; font-size: 14px; font-family: helvetica, sans-serif; @@ -623,18 +593,15 @@ background-color: #E0E0E0; z-index:100; } -#embedlyLink { - display: none; -} #embedlyLinkLoader { margin: 0 auto; width: 28px; } .CardOnGraph .attachments { - border-top: 1px solid #BDBDBD; width:100%; height:47px; + position: relative; } .attachments a { @@ -642,7 +609,7 @@ background-color: #E0E0E0; overflow: hidden; text-overflow: ellipsis; display: block; - margin-left: 40px; + margin-left: 40px; padding-top:9px; font-size: 16px; line-height: 16px; @@ -652,7 +619,7 @@ background-color: #E0E0E0; display: inline-block; width: 102px; height: 12px; - text-align: left; + text-align: left; padding: 18px 0 18px 48px; font-size: 12px; color: #9e9e9e; @@ -752,7 +719,6 @@ font-family: 'din-regular', helvetica, sans-serif; -moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; - display: none; margin: 8px; } @@ -950,11 +916,11 @@ font-family: 'din-regular', helvetica, sans-serif; } #edit_synapse_right { background-image: url(<%= asset_data_uri('synapsedirectionright_sprite.png') %>); - right: 16px; + right: 16px; } #edit_synapse_left { background-image: url(<%= asset_data_uri('synapsedirectionleft_sprite.png') %>); - right: 56px; + right: 56px; } #edit_synapse_left.checked, #edit_synapse_right.checked { background-position: 0 -48px; diff --git a/app/views/layouts/_templates.html.erb b/app/views/layouts/_templates.html.erb index 4fbbd12d..dd0b8c7c 100644 --- a/app/views/layouts/_templates.html.erb +++ b/app/views/layouts/_templates.html.erb @@ -7,7 +7,7 @@ - + - - diff --git a/frontend/src/Metamaps/DataModel/Topic.js b/frontend/src/Metamaps/DataModel/Topic.js index 8eb09fdf..e8025a7d 100644 --- a/frontend/src/Metamaps/DataModel/Topic.js +++ b/frontend/src/Metamaps/DataModel/Topic.js @@ -4,7 +4,7 @@ try { Backbone.$ = window.$ } catch (err) {} import Active from '../Active' import Filter from '../Filter' -import TopicCard from '../TopicCard' +import TopicCard from '../Views/TopicCard' import Visualize from '../Visualize' import DataModel from './index' diff --git a/frontend/src/Metamaps/JIT.js b/frontend/src/Metamaps/JIT.js index d91a2a93..54e48b65 100644 --- a/frontend/src/Metamaps/JIT.js +++ b/frontend/src/Metamaps/JIT.js @@ -18,7 +18,7 @@ import Settings from './Settings' import Synapse from './Synapse' import SynapseCard from './SynapseCard' import Topic from './Topic' -import TopicCard from './TopicCard' +import TopicCard from './Views/TopicCard' import Util from './Util' import Visualize from './Visualize' import clipboard from 'clipboard-js' diff --git a/frontend/src/Metamaps/Map/index.js b/frontend/src/Metamaps/Map/index.js index 3df5a3e2..0b36a68d 100644 --- a/frontend/src/Metamaps/Map/index.js +++ b/frontend/src/Metamaps/Map/index.js @@ -16,7 +16,7 @@ import Realtime from '../Realtime' import Router from '../Router' import Selected from '../Selected' import SynapseCard from '../SynapseCard' -import TopicCard from '../TopicCard' +import TopicCard from '../Views/TopicCard' import Visualize from '../Visualize' import CheatSheet from './CheatSheet' diff --git a/frontend/src/Metamaps/Topic.js b/frontend/src/Metamaps/Topic.js index 7cdcf3a7..b16da5da 100644 --- a/frontend/src/Metamaps/Topic.js +++ b/frontend/src/Metamaps/Topic.js @@ -14,7 +14,7 @@ import Router from './Router' import Selected from './Selected' import Settings from './Settings' import SynapseCard from './SynapseCard' -import TopicCard from './TopicCard' +import TopicCard from './Views/TopicCard' import Util from './Util' import Visualize from './Visualize' diff --git a/frontend/src/Metamaps/Views/ChatView.js b/frontend/src/Metamaps/Views/ChatView.js index 0024a623..7574de50 100644 --- a/frontend/src/Metamaps/Views/ChatView.js +++ b/frontend/src/Metamaps/Views/ChatView.js @@ -49,6 +49,7 @@ const ChatView = { $('#' + ChatView.domId).hide() }, render: () => { + return if (!Active.Map) return const self = ChatView self.mapChat = ReactDOM.render(React.createElement(MapChat, { diff --git a/frontend/src/Metamaps/Views/TopicCard.js b/frontend/src/Metamaps/Views/TopicCard.js new file mode 100644 index 00000000..a7597e92 --- /dev/null +++ b/frontend/src/Metamaps/Views/TopicCard.js @@ -0,0 +1,61 @@ +/* global $ */ + +import React from 'react' +import ReactDOM from 'react-dom' + +import Active from '../Active' +import DataModel from '../DataModel' +import GlobalUI from '../GlobalUI' +import Mapper from '../Mapper' +import Router from '../Router' +import Visualize from '../Visualize' + +import ReactTopicCard from '../../components/TopicCard' + +const TopicCard = { + openTopicCard: null, // stores the topic that's currently open + init: function() { + // initialize topic card draggability and resizability + $('.showcard').draggable({ + handle: '.metacodeImage', + stop: function() { + $(this).height('auto') + } + }) + }, + populateShowCard: function(topic) { + var self = TopicCard + const topicCardObj = { + topic: topic, + ActiveMapper: Active.Mapper, + removeLink: () => { + topic.save({ + link: null + },{success: topic => self.populateShowCard(topic)}) + }, + addLink: link => { + topic.save({link},{success: topic => self.populateShowCard(topic)}) + } + } + ReactDOM.render( + React.createElement(ReactTopicCard, topicCardObj), + document.getElementById('showcard') + ) + }, + showCard: function(node, opts) { + var self = TopicCard + if (!opts) opts = {} + var topic = node.getData('topic') + self.openTopicCard = topic + // populate the card that's about to show with the right topics data + self.populateShowCard(topic) + return $('.showcard').fadeIn('fast', () => opts.complete && opts.complete()) + }, + hideCard: function() { + var self = TopicCard + $('.showcard').fadeOut('fast') + self.openTopicCard = null + } +} + +export default TopicCard diff --git a/frontend/src/Metamaps/Views/index.js b/frontend/src/Metamaps/Views/index.js index c496b3b0..6badc098 100644 --- a/frontend/src/Metamaps/Views/index.js +++ b/frontend/src/Metamaps/Views/index.js @@ -4,18 +4,21 @@ import ExploreMaps from './ExploreMaps' import ChatView from './ChatView' import VideoView from './VideoView' import Room from './Room' +import TopicCard from './TopicCard' import { JUNTO_UPDATED } from '../Realtime/events' const Views = { init: (serverData) => { $(document).on(JUNTO_UPDATED, () => ExploreMaps.render()) ChatView.init([serverData['sounds/MM_sounds.mp3'], serverData['sounds/MM_sounds.ogg']]) + }, ExploreMaps, ChatView, VideoView, - Room + Room, + TopicCard } -export { ExploreMaps, ChatView, VideoView, Room } +export { ExploreMaps, ChatView, VideoView, Room, TopicCard } export default Views diff --git a/frontend/src/Metamaps/Visualize.js b/frontend/src/Metamaps/Visualize.js index 2ccb08ed..43f6071b 100644 --- a/frontend/src/Metamaps/Visualize.js +++ b/frontend/src/Metamaps/Visualize.js @@ -9,7 +9,7 @@ import DataModel from './DataModel' import JIT from './JIT' import Loading from './Loading' import Router from './Router' -import TopicCard from './TopicCard' +import TopicCard from './Views/TopicCard' const Visualize = { mGraph: null, // a reference to the graph object. diff --git a/frontend/src/Metamaps/index.js b/frontend/src/Metamaps/index.js index 61f5e18a..eb9969b0 100644 --- a/frontend/src/Metamaps/index.js +++ b/frontend/src/Metamaps/index.js @@ -29,7 +29,6 @@ import Settings from './Settings' import Synapse from './Synapse' import SynapseCard from './SynapseCard' import Topic from './Topic' -import TopicCard from './TopicCard' import Util from './Util' import Views from './Views' import Visualize from './Visualize' @@ -71,7 +70,6 @@ Metamaps.Settings = Settings Metamaps.Synapse = Synapse Metamaps.SynapseCard = SynapseCard Metamaps.Topic = Topic -Metamaps.TopicCard = TopicCard Metamaps.Util = Util Metamaps.Views = Views Metamaps.Visualize = Visualize diff --git a/frontend/src/Metamaps/TopicCard.js b/frontend/src/components/TopicCard.js similarity index 55% rename from frontend/src/Metamaps/TopicCard.js rename to frontend/src/components/TopicCard.js index 3fa9a999..cb7f472e 100644 --- a/frontend/src/Metamaps/TopicCard.js +++ b/frontend/src/components/TopicCard.js @@ -1,165 +1,66 @@ /* global $, CanvasLoader, Countable, Hogan, embedly */ +import React, { PropTypes, Component } from 'react' -import Active from './Active' -import DataModel from './DataModel' -import GlobalUI from './GlobalUI' -import Mapper from './Mapper' -import Router from './Router' -import Util from './Util' -import Visualize from './Visualize' +import Util from '../Metamaps/Util' -const TopicCard = { - openTopicCard: null, // stores the topic that's currently open - authorizedToEdit: false, // stores boolean for edit permission for open topic card - RAILS_ENV: undefined, - init: function(serverData) { - var self = TopicCard +/* - if (serverData.RAILS_ENV) { - self.RAILS_ENV = serverData.RAILS_ENV + +TopicCard.bindShowCardListeners(topic) + + + +do globalui notify for invalid link? +*/ + +var funcs = { + buildObject: function(topic, ActiveMapper) { + var nodeValues = {} + var authorized = topic.authorizeToEdit(ActiveMapper) + var inmapsAr = topic.get('inmaps') || [] + var inmapsLinks = topic.get('inmapsLinks') || [] + nodeValues.inmaps = '' + if (inmapsAr.length < 6) { + for (let i = 0; i < inmapsAr.length; i++) { + const url = '/maps/' + inmapsLinks[i] + nodeValues.inmaps += '
  • ' + inmapsAr[i] + '
    • ' + } } else { - console.error('RAILS_ENV is not defined! See TopicCard.js init function.') - } - - // initialize best_in_place editing - $('.authenticated div.permission.canEdit .best_in_place').best_in_place() - - TopicCard.generateShowcardHTML = Hogan.compile($('#topicCardTemplate').html()) - - // initialize topic card draggability and resizability - $('.showcard').draggable({ - handle: '.metacodeImage', - stop: function() { - $(this).height('auto') + for (let i = 0; i < 5; i++) { + const url = '/maps/' + inmapsLinks[i] + nodeValues.inmaps += '
  • ' + inmapsAr[i] + '
    • ' } - }) - - embedly('on', 'card.rendered', self.embedlyCardRendered) - }, - /** - * Will open the Topic Card for the node that it's passed - * @param {$jit.Graph.Node} node - */ - showCard: function(node, opts) { - var self = TopicCard - if (!opts) opts = {} - var topic = node.getData('topic') - - self.openTopicCard = topic - self.authorizedToEdit = topic.authorizeToEdit(Active.Mapper) - // populate the card that's about to show with the right topics data - self.populateShowCard(topic) - return $('.showcard').fadeIn('fast', function() { - if (opts.complete) { - opts.complete() + const extra = inmapsAr.length - 5 + nodeValues.inmaps += '
  • See ' + extra + ' more...
    • ' + for (let i = 5; i < inmapsAr.length; i++) { + const url = '/maps/' + inmapsLinks[i] + nodeValues.inmaps += '
  • ' + inmapsAr[i] + '
    • ' } - }) - }, - hideCard: function() { - var self = TopicCard - - $('.showcard').fadeOut('fast') - self.openTopicCard = null - self.authorizedToEdit = false - }, - embedlyCardRendered: function(iframe) { - $('#embedlyLinkLoader').hide() - - // means that the embedly call returned 404 not found - if ($('#embedlyLink')[0]) { - $('#embedlyLink').css('display', 'block').fadeIn('fast') - $('.embeds').addClass('nonEmbedlyLink') - } - - $('.CardOnGraph').addClass('hasAttachment') - }, - showLinkRemover: function() { - if (TopicCard.authorizedToEdit && $('#linkremove').length === 0) { - $('.embeds').append('
    ') - $('#linkremove').click(TopicCard.removeLink) - } - }, - removeLink: function() { - var self = TopicCard - self.openTopicCard.save({ - link: null - }) - $('.embeds').empty().removeClass('nonEmbedlyLink') - $('#addLinkInput input').val('') - $('.attachments').removeClass('hidden') - $('.CardOnGraph').removeClass('hasAttachment') - }, - showLinkLoader: function() { - var loader = new CanvasLoader('embedlyLinkLoader') - loader.setColor('#4fb5c0') // default is '#000000' - loader.setDiameter(28) // default is 40 - loader.setDensity(41) // default is 40 - loader.setRange(0.9) // default is 1.3 - loader.show() // Hidden by default - }, - showLink: function(topic) { - var e = embedly('card', document.getElementById('embedlyLink')) - if (!e && TopicCard.RAILS_ENV !== 'development') { - TopicCard.handleInvalidLink() - } else if (!e) { - $('#embedlyLink').attr('target', '_blank').html(topic.get('link')).show() - $('#embedlyLinkLoader').hide() } + nodeValues.permission = topic.get('permission') + nodeValues.mk_permission = topic.get('permission').substring(0, 2) + nodeValues.map_count = topic.get('map_count').toString() + nodeValues.synapse_count = topic.get('synapse_count').toString() + nodeValues.id = topic.isNew() ? topic.cid : topic.id + nodeValues.metacode = topic.getMetacode().get('name') + nodeValues.metacode_class = 'mbg' + topic.get('metacode_id') + nodeValues.imgsrc = topic.getMetacode().get('icon') + nodeValues.name = topic.get('name') + nodeValues.userid = topic.get('user_id') + nodeValues.username = topic.get('user_name') + nodeValues.userimage = topic.get('user_image') + nodeValues.date = topic.getDate() + // the code for this is stored in /views/main/_metacodeOptions.html.erb + nodeValues.metacode_select = $('#metacodeOptions').html() + nodeValues.desc_nil = 'Click to add description...' + nodeValues.desc_markdown = (topic.get('desc') === '' && authorized) + ? nodeValues.desc_nil + : topic.get('desc') + nodeValues.desc_html = Util.mdToHTML(nodeValues.desc_markdown) + return nodeValues }, bindShowCardListeners: function(topic) { var self = TopicCard - var showCard = document.getElementById('showcard') - - var authorized = self.authorizedToEdit - - // get mapper image - var setMapperImage = function(mapper) { - $('.contributorIcon').attr('src', mapper.get('image')) - } - Mapper.get(topic.get('user_id'), setMapperImage) - - // starting embed.ly - var resetFunc = function() { - $('#addLinkInput input').val('') - $('#addLinkInput input').focus() - } - var inputEmbedFunc = function(event) { - var element = this - setTimeout(function() { - var text = $(element).val() - if (event.type === 'paste' || (event.type === 'keyup' && event.which === 13)) { - // TODO evaluate converting this to '//' no matter what (infer protocol) - if (text.slice(0, 7) !== 'http://' && - text.slice(0, 8) !== 'https://' && - text.slice(0, 2) !== '//') { - text = '//' + text - } - topic.save({ - link: text - }) - var embedlyEl = $('', { - id: 'embedlyLink', - 'data-card-description': '0', - href: text - }).html(text) - $('.attachments').addClass('hidden') - $('.embeds').append(embedlyEl) - $('.embeds').append('
    ') - - self.showLinkLoader() - self.showLink(topic) - } - }, 100) - } - $('#addLinkReset').click(resetFunc) - $('#addLinkInput input').bind('paste keyup', inputEmbedFunc) - - // initialize the link card, if there is a link - if (topic.get('link') && topic.get('link') !== '') { - self.showLinkLoader() - self.showLink(topic) - self.showLinkRemover() - } var selectingMetacode = false // attach the listener that shows the metacode title when you hover over the image @@ -179,8 +80,8 @@ const TopicCard = { 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) + .append('
    ') + .attr('class', 'metacodeTitle mbg' + metacode.id) $('.CardOnGraph').find('.metacodeImage').css('background-image', 'url(' + metacode.get('icon') + ')') topic.save({ metacode_id: metacode.id @@ -277,8 +178,8 @@ const TopicCard = { const bipDesc = $(showCard).find('.best_in_place_desc') bipDesc.bind('ajax:success', function() { var desc = $(this).html() === $(this).data('bip-nil') - ? '' - : $(this).text() + ? '' + : $(this).text() topic.set('desc', desc) $(this).data('bip-value', desc) this.innerHTML = Util.mdToHTML(desc) @@ -302,7 +203,6 @@ const TopicCard = { }) $('.showcard .mapPerm').removeClass('co pu pr minimize').addClass(permission.substring(0, 2)) $('.showcard .permissionSelect').remove() - event.stopPropagation() } var openPermissionSelect = function(event) { @@ -336,18 +236,12 @@ const TopicCard = { $('.links .mapCount').unbind().click(function(event) { $('.mapCount .tip').toggle() $('.showcard .hoverTip').toggleClass('hide') - event.stopPropagation() - }) - $('.mapCount .tip').unbind().click(function(event) { - event.stopPropagation() }) $('.showcard').unbind('.hideTip').bind('click.hideTip', function() { $('.mapCount .tip').hide() $('.showcard .hoverTip').removeClass('hide') }) - $('.mapCount .tip li a').click(Router.intercept) - var originalText = $('.showMore').html() $('.mapCount .tip .showMore').unbind().toggle( function(event) { @@ -358,117 +252,182 @@ const TopicCard = { $('.extraText').toggleClass('hideExtra') $('.showMore').html(originalText) }) + } + } - $('.mapCount .tip showMore').unbind().click(function(event) { - event.stopPropagation() +class ReactTopicCard extends Component { + constructor(props) { + super(props) + + this.state = { + nameEdit: '', + descEdit: '', + linkEdit: '', + embedlyLinkError: false, + embedlyLinkStarted: false, + embedlyLinkLoaded: false + } + } + + componentDidMount = () => { + const { topic } = this.props + embedly('on', 'card.rendered', this.embedlyCardRendered) + topic.get('link') && topic.get('link') !== '' && this.loadLink() + } + + componentWillUnmount = () => { + embedly('off') + } + + componentDidUpdate = () => { + const { topic } = this.props + const { embedlyLinkStarted } = this.state + !embedlyLinkStarted && topic.get('link') && topic.get('link') !== '' && this.loadLink() + } + + embedlyCardRendered = (iframe, test) => { + this.setState({embedlyLinkLoaded: true, embedlyLinkError: false}) + } + + resetLinkInput = () => { + this.setState({linkEdit: ''}) + this.linkInput.focus() + } + + onLinkChangeHandler = e => { + this.setState({linkEdit: e.target.value}) + } + + onLinkKeyUpHandler = e => { + const { addLink } = this.props + const { linkEdit } = this.state + let finalLink + const ENTER_KEY = 13 + if (e.which === ENTER_KEY) { + // TODO evaluate converting this to '//' no matter what (infer protocol) + if (linkEdit.slice(0, 7) !== 'http://' && + linkEdit.slice(0, 8) !== 'https://' && + linkEdit.slice(0, 2) !== '//') { + finalLink = '//' + linkEdit + } + this.setState({linkEdit: ''}) + addLink(finalLink) + } + } + + loadLink = () => { + this.setState({embedlyLinkStarted: true}) + var e = embedly('card', document.getElementById('embedlyLink')) + if (e.type === 'error') this.setState({embedlyLinkError: true}) + } + + removeLink = () => { + const { removeLink } = this.props + this.setState({ + embedlyLinkStarted: false, + embedlyLinkLoaded: false, + embedlyLinkError: false }) - }, - handleInvalidLink: function() { - var self = TopicCard + removeLink() + } - self.removeLink() - GlobalUI.notifyUser('Invalid link') - }, - populateShowCard: function(topic) { - var self = TopicCard + render = () => { + const { topic, ActiveMapper, removeLink } = this.props + const { linkEdit, embedlyLinkLoaded, embedlyLinkStarted, embedlyLinkError } = this.state + const values = funcs.buildObject(topic, ActiveMapper) + var authorizedToEdit = topic.authorizeToEdit(ActiveMapper) + let classname = 'permission' + if (authorizedToEdit) classname += ' canEdit' + else classname += ' cannotEdit' + if (topic.authorizePermissionChange(ActiveMapper)) classname += ' yourTopic' + const hasAttachment = topic.get('link') && topic.get('link') !== '' - var showCard = document.getElementById('showcard') - - $(showCard).find('.permission').remove() - - var topicForTemplate = self.buildObject(topic) - var html = self.generateShowcardHTML.render(topicForTemplate) - - if (topic.authorizeToEdit(Active.Mapper)) { - let perm = document.createElement('div') - - var string = 'permission canEdit' - if (topic.authorizePermissionChange(Active.Mapper)) string += ' yourTopic' - perm.className = string - perm.innerHTML = html - showCard.appendChild(perm) - } else { - let perm = document.createElement('div') - perm.className = 'permission cannotEdit' - perm.innerHTML = html - showCard.appendChild(perm) - } - - TopicCard.bindShowCardListeners(topic) - }, - generateShowcardHTML: null, // will be initialized into a Hogan template within init function - // generateShowcardHTML - buildObject: function(topic) { - var nodeValues = {} - - var authorized = topic.authorizeToEdit(Active.Mapper) - - if (!authorized) { - } else { - } - - nodeValues.attachmentsHidden = '' - if (topic.get('link') && topic.get('link') !== '') { - nodeValues.embeds = '    ' - nodeValues.embeds += topic.get('link') - nodeValues.embeds += '
    ' - nodeValues.attachmentsHidden = 'hidden' - nodeValues.hasAttachment = 'hasAttachment' - } else { - nodeValues.embeds = '' - nodeValues.hasAttachment = '' - } - - if (authorized) { - nodeValues.attachments = '
    ' - nodeValues.attachments += '
    ' - nodeValues.attachments += '
    ' - } else { - nodeValues.attachmentsHidden = 'hidden' - nodeValues.attachments = '' - } - - var inmapsAr = topic.get('inmaps') || [] - var inmapsLinks = topic.get('inmapsLinks') || [] - nodeValues.inmaps = '' - if (inmapsAr.length < 6) { - for (let i = 0; i < inmapsAr.length; i++) { - const url = '/maps/' + inmapsLinks[i] - nodeValues.inmaps += '
  • ' + inmapsAr[i] + '
    • ' - } - } else { - for (let i = 0; i < 5; i++) { - const url = '/maps/' + inmapsLinks[i] - nodeValues.inmaps += '
  • ' + inmapsAr[i] + '
    • ' - } - const extra = inmapsAr.length - 5 - nodeValues.inmaps += '
  • See ' + extra + ' more...
    • ' - for (let i = 5; i < inmapsAr.length; i++) { - const url = '/maps/' + inmapsLinks[i] - nodeValues.inmaps += '
  • ' + inmapsAr[i] + '
    • ' - } - } - nodeValues.permission = topic.get('permission') - nodeValues.mk_permission = topic.get('permission').substring(0, 2) - nodeValues.map_count = topic.get('map_count').toString() - nodeValues.synapse_count = topic.get('synapse_count').toString() - nodeValues.id = topic.isNew() ? topic.cid : topic.id - nodeValues.metacode = topic.getMetacode().get('name') - nodeValues.metacode_class = 'mbg' + topic.get('metacode_id') - nodeValues.imgsrc = topic.getMetacode().get('icon') - nodeValues.name = topic.get('name') - nodeValues.userid = topic.get('user_id') - nodeValues.username = topic.get('user_name') - nodeValues.date = topic.getDate() - // the code for this is stored in /views/main/_metacodeOptions.html.erb - nodeValues.metacode_select = $('#metacodeOptions').html() - nodeValues.desc_nil = 'Click to add description...' - nodeValues.desc_markdown = (topic.get('desc') === '' && authorized) - ? nodeValues.desc_nil - : topic.get('desc') - nodeValues.desc_html = Util.mdToHTML(nodeValues.desc_markdown) - return nodeValues + return ( +
    +
    +
    + {values.metacode} + +
    + + {values.name} + +
    +     +
    +
    + + +
    +
    +
    + {hasAttachment &&
    + + {topic.get('link')} + + {embedlyLinkStarted && !embedlyLinkLoaded && !embedlyLinkError &&
    loading...
    } + {authorizedToEdit &&
    } +
    } + {authorizedToEdit && !hasAttachment &&
    +
    +
    +
    + this.linkInput = input} + placeholder="Enter or paste a link" + value={linkEdit} + onChange={this.onLinkChangeHandler} + onKeyUp={this.onLinkKeyUpHandler}> + {linkEdit &&
    } +
    +
    +
    } +
    + + {values.username} +
    +
    +
    +
    ) } } -export default TopicCard +ReactTopicCard.propTypes = { + topic: PropTypes.object, + ActiveMapper: PropTypes.object, + removeLink: PropTypes.func, + addLink: PropTypes.func +} + +export default ReactTopicCard + +/* +
    +
    +
    + {values.metacode} +
    +
    +
    +
    {values.metacode_select}
    +
    +
    + +
    {values.username}
    +
    +
    +
    + {values.map_count} +
    Click to see which maps topic appears on
    +
      {values.inmaps}
    +
    + +
    + {values.synapse_count} +
    Click to see this topics synapses
    +     +
    +
    +
    +*/