glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

move lightboxes into react

Browse source
This commit is contained in:
Connor Turland 2018-03-08 07:26:04 -05:00
parent c1dbfc9f72
commit 6c84205b38
11 changed files with 570 additions and 334 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
README.md
View file

@ -26,13 +26,16 @@ Checklist
- [x] Fix images referenced in the JS - [x] Fix images referenced in the JS
- [x] Figure out how authentication of requests from the frontend to the API works - [x] Figure out how authentication of requests from the frontend to the API works
- [x] Figure out how to combine the nodejs realtime server into server.js - [x] Figure out how to combine the nodejs realtime server into server.js
- [ ] Notifications: make sure loading states are working for popup and page - [x] Notifications: make sure loading states are working for popup and page
- [ ] Notifications: make sure notifications either look nice, or redirect - [ ] Notifications: make sure notifications either look nice, or redirect
- [ ] Notifications: pagination - [ ] Notifications: pagination
- [ ] Get actioncable working - [ ] Get actioncable working
- [ ] Request unreadNotificationCount - [ ] lightboxes
- [ ] Request invite code - [x] Request unreadNotificationCount
- [x] Request invite code
- [x] Request user object itself - [x] Request user object itself
- [ ] About lightbox
- [ ] break up index.html into parts
- [ ] Handle CSS metacode colors - [ ] Handle CSS metacode colors
- [ ] Fix Request An Invite page - [ ] Fix Request An Invite page
- [ ] Make 'new map' action work - [ ] Make 'new map' action work

550
public/index.html
View file

@ -11,17 +11,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Metamaps</title> <title>Metamaps</title>
<link rel="stylesheet" media="all" href="/css/application.css"> <link rel="stylesheet" media="all" href="/css/application.css">
<!-- typekit for vinyl font --> <!-- typekit for vinyl font -->
<script type="text/javascript" src="https://use.typekit.net/tki2nyo.js"></script> <script type="text/javascript" src="https://use.typekit.net/tki2nyo.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script> <script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>
<!--[if (IE)]> <!--[if (IE)]>
<style type="text/css"> <style type="text/css">
@ -62,35 +63,33 @@
}); });
</script> </script>
<![endif]--> <![endif]-->
</head> </head>
<body class="unauthenticated"> <body class="unauthenticated">
<div class="main"> <div class="main">
<div id="app"></div> <div id="app"></div>
<div id="loading"></div> <div id="loading"></div>
</div> </div>
<script src="/lib/jquery-1.12.4.min.js"></script> <script src="/lib/jquery-1.12.4.min.js"></script>
<script src="/lib/jquery-ui.min.js"></script> <script src="/lib/jquery-ui.min.js"></script>
<script src="/lib/ajaxq.js"></script> <script src="/lib/ajaxq.js"></script>
<script src="/lib/best_in_place.js"></script> <script src="/lib/best_in_place.js"></script>
<script src="/lib/bitcoinsrc.js"></script> <script src="/lib/bitcoinsrc.js"></script>
<script src="/lib/canvas-to-blob.min.js"></script> <script src="/lib/canvas-to-blob.min.js"></script>
<script src="/lib/canvasloader.min.js"></script> <script src="/lib/canvasloader.min.js"></script>
<script src="/lib/cloudcarousel.js"></script> <script src="/lib/cloudcarousel.js"></script>
<script src="/lib/Countable.js"></script> <script src="/lib/Countable.js"></script>
<script src="/lib/embedly.js"></script> <script src="/lib/embedly.js"></script>
<script src="/lib/hogan-2.0.0.js"></script> <script src="/lib/hogan-2.0.0.js"></script>
<script src="/lib/jquery.lettering.js"></script> <script src="/lib/jquery.lettering.js"></script>
<script src="/lib/jquery.mousewheel.min.js"></script> <script src="/lib/jquery.mousewheel.min.js"></script>
<script src="/lib/jquery.roundabout.min.js"></script> <script src="/lib/jquery.roundabout.min.js"></script>
<script src="/lib/jquery.typing-0.2.0.min.js"></script> <script src="/lib/jquery.typing-0.2.0.min.js"></script>
<script src="/lib/typeahead.bundle.js"></script> <script src="/lib/typeahead.bundle.js"></script>
<script type="text/javascript" src="/metamaps.bundle.js"></script> <script type="text/javascript" src="/metamaps.bundle.js"></script>
<!-- <!--
Metamaps.ServerData.unreadNotificationsCount = { current_user ? user_unread_notification_count : 0 }
Metamaps.ServerData.mapIsStarred = { current_user && @map && current_user.starred_map?(@map) ? true : false }
Metamaps.ServerData.mobileTitle = "{ yield(:mobile_title) }" Metamaps.ServerData.mobileTitle = "{ yield(:mobile_title) }"
Metamaps.ServerData.ActiveMapper = { current_user ? current_user.to_json({follows: true, email: true, follow_settings: true}).html_safe : nil }
{ if devise_error_messages? } { if devise_error_messages? }
Metamaps.ServerData.toast = "{ devise_error_messages! }" Metamaps.ServerData.toast = "{ devise_error_messages! }"
{ elsif notice } { elsif notice }
@ -103,312 +102,201 @@
{ render :partial => 'layouts/googleanalytics' if ENV["GA_TRACKING_CODE"].present? } { render :partial => 'layouts/googleanalytics' if ENV["GA_TRACKING_CODE"].present? }
--> -->
<script type="text/javascript"> <script type="text/javascript">
Metamaps.ServerData = Metamaps.ServerData || {} Metamaps.ServerData = Metamaps.ServerData || {}
Metamaps.ServerData.RAILS_ENV = 'development' Metamaps.ServerData.RAILS_ENV = 'development'
Metamaps.ServerData['junto_spinner_darkgrey.gif'] = '/images/junto_spinner_darkgrey.gif' Metamaps.ServerData['junto_spinner_darkgrey.gif'] = '/images/junto_spinner_darkgrey.gif'
Metamaps.ServerData['user.png'] = '/images/user.png' Metamaps.ServerData['user.png'] = '/images/user.png'
Metamaps.ServerData['icons/wildcard.png'] = '/images/icons/wildcard.png' Metamaps.ServerData['icons/wildcard.png'] = '/images/icons/wildcard.png'
Metamaps.ServerData['topic_description_signifier.png'] = '/images/topic_description_signifier.png' Metamaps.ServerData['topic_description_signifier.png'] = '/images/topic_description_signifier.png'
Metamaps.ServerData['topic_link_signifier.png'] = '/images/topic_link_signifier.png' Metamaps.ServerData['topic_link_signifier.png'] = '/images/topic_link_signifier.png'
Metamaps.ServerData['synapse16.png'] = '/images/synapse16.png' Metamaps.ServerData['synapse16.png'] = '/images/synapse16.png'
Metamaps.ServerData['sounds/MM_sounds.mp3'] = '/images/sounds/MM_sounds.mp3' Metamaps.ServerData['sounds/MM_sounds.mp3'] = '/images/sounds/MM_sounds.mp3'
Metamaps.ServerData['sounds/MM_sounds.ogg'] = '/images/sounds/MM_sounds.ogg' Metamaps.ServerData['sounds/MM_sounds.ogg'] = '/images/sounds/MM_sounds.ogg'
Metamaps.ServerData['exploremaps_sprite.png'] = '/images/exploremaps_sprite.png' Metamaps.ServerData['exploremaps_sprite.png'] = '/images/exploremaps_sprite.png'
Metamaps.ServerData['map_control_sprite.png'] = '/images/map_control_sprite.png' Metamaps.ServerData['map_control_sprite.png'] = '/images/map_control_sprite.png'
Metamaps.ServerData['user_sprite.png'] = '/images/user_sprite.png' Metamaps.ServerData['user_sprite.png'] = '/images/user_sprite.png'
Metamaps.Loading.setup() Metamaps.Loading.setup()
</script>
<div class="templates">
<script type="text/template" id="mapInfoBoxTemplate">
<div class="requestTitle">Click here to name this map</div>
<div class="mapInfoName" id="mapInfoName">{{{name}}}</div>
<div class="mapInfoStat">
<div class="infoStatIcon mapContributors hoverForTip">
<img id="mapContribs" class="{{contributors_class}}"
width="25" height="25" src="{{contributor_image}}" />
<span class="count">{{contributor_count}}</span>
<div class="tip">{{{contributor_list}}}</div>
</div>
<div class="infoStatIcon mapTopics">
{{topic_count}}
</div>
<div class="infoStatIcon mapSynapses">
{{synapse_count}}
</div>
<div class="infoStatIcon mapPermission {{permission}} hoverForTip">
{{{map_creator_tip}}}
</div>
<div class="clearfloat"></div>
</div>
<div class="mapInfoDesc" id="mapInfoDesc">
{{{desc}}}
</div>
<div class="mapInfoMeta">
<p class="mapCreatedAt"><span>Created by:</span> {{user_name}} on {{created_at}}</p>
<p class="mapEditedAt"><span>Last edited:</span> {{updated_at}}</p>
<div class="mapInfoButtonsWrapper">
<div class="mapInfoThumbnail">
<div class="thumbnail"></div>
<div class="tooltip">Update Thumbnail</div>
<span>Thumb</span>
</div>
<div class="mapInfoDelete">
<div class="deleteMap"></div>
<span>Delete</span>
</div>
<div class="mapInfoShare">
<div class="mapInfoShareIcon"></div>
<span>Share</span>
</div>
</div>
</div>
</script> </script>
<div class="templates"> <script type="text/template" id="topicSearchTemplate">
<script type="text/template" id="mapInfoBoxTemplate"> <div class="result{{rtype}}">
<div class="requestTitle">Click here to name this map</div> <div class="topicMetacode searchResIconWrapper">
<div class="mapInfoName" id="mapInfoName">{{{name}}}</div> <img src="{{typeImageURL}}" class="topicIcon" />
<div class="metacodeTip">{{type}}</div>
<div class="mapInfoStat"> </div>
<div class="infoStatIcon mapContributors hoverForTip"> <div class="resultText">
<img id="mapContribs" class="{{contributors_class}}" <p class="resultTitle">{{label}}</p>
width="25" height="25" src="{{contributor_image}}" /> <p class="resultDesc">{{description}}</p>
<span class="count">{{contributor_count}}</span> </div>
<div class="tip">{{{contributor_list}}}</div> <div class="autoOptions">
</div> <button class="addToMap hoverForTip" onclick="return Metamaps.Topic.getTopicFromSearch(event, {{id}})">
<div class="infoStatIcon mapTopics"> <span class="tip">add to map</span>
{{topic_count}} </button>
</div> <div class="mapCount">
<div class="infoStatIcon mapSynapses"> {{mapCount}}
{{synapse_count}}
</div>
<div class="infoStatIcon mapPermission {{permission}} hoverForTip">
{{{map_creator_tip}}}
</div>
<div class="clearfloat"></div>
</div> </div>
<div class="mapInfoDesc" id="mapInfoDesc"> <div class="synapseCount">
{{{desc}}} {{synapseCount}}
</div> </div>
<div class="topicOriginatorIcon hoverForTip">
<div class="mapInfoMeta"> <img width="18" height="18" src="{{originatorImage}}">
<p class="mapCreatedAt"><span>Created by:</span> {{user_name}} on {{created_at}}</p> <span class="tip topicOriginator">{{originator}}</span>
<p class="mapEditedAt"><span>Last edited:</span> {{updated_at}}</p>
<div class="mapInfoButtonsWrapper">
<div class="mapInfoThumbnail">
<div class="thumbnail"></div>
<div class="tooltip">Update Thumbnail</div>
<span>Thumb</span>
</div>
<div class="mapInfoDelete">
<div class="deleteMap"></div>
<span>Delete</span>
</div>
<div class="mapInfoShare">
<div class="mapInfoShareIcon"></div>
<span>Share</span>
</div>
</div>
</div> </div>
</script> <div class="topicPermission {{permission}}">
<script type="text/template" id="topicSearchTemplate">
<div class="result{{rtype}}">
<div class="topicMetacode searchResIconWrapper">
<img src="{{typeImageURL}}" class="topicIcon" />
<div class="metacodeTip">{{type}}</div>
</div>
<div class="resultText">
<p class="resultTitle">{{label}}</p>
<p class="resultDesc">{{description}}</p>
</div>
<div class="autoOptions">
<button class="addToMap hoverForTip" onclick="return Metamaps.Topic.getTopicFromSearch(event, {{id}})">
<span class="tip">add to map</span>
</button>
<div class="mapCount">
{{mapCount}}
</div>
<div class="synapseCount">
{{synapseCount}}
</div>
<div class="topicOriginatorIcon hoverForTip">
<img width="18" height="18" src="{{originatorImage}}">
<span class="tip topicOriginator">{{originator}}</span>
</div>
<div class="topicPermission {{permission}}">
</div>
</div>
<div class="clearfloat"></div>
</div> </div>
</script> </div>
<div class="clearfloat"></div>
<script type="text/template" id="mapSearchTemplate">
<div class="result{{rtype}}">
<div class="searchResIconWrapper">
<img class="icon" src="/images/metamap36c.png">
</div>
<div class="resultText">
<p class="resultTitle">{{label}}</p>
<p class="resultDesc">{{description}}</p>
</div>
<div class="autoOptions">
<div class="topicCount">
{{topicCount}}
</div>
<div class="synapseCount">
{{synapseCount}}
</div>
<div class="mapContributorsIcon hoverForTip">
<img id="mapContribs" width="25" height="25" src="{{mapContributorImage}}" />
<div class="tip">
<ul>
{{{contributorTip}}}
</ul>
</div>
<span>{{contributorCount}}</span>
</div>
<div class="mapPermission {{permission}}">
</div>
</div>
<div class="clearfloat"></div>
</div>
</script>
<script type="text/template" id="mapperSearchTemplate">
<div class="result{{rtype}}">
<div class="searchResIconWrapper">
<img class="icon" width="32" height="32" src="{{profile}}">
</div>
<div class="resultText">
<p class="resultTitle">{{label}}</p>
</div>
<div class="autoOptions">
<div class="mapperCreated">
<p>Mapping since: {{created_at}}</p>
</div>
<div class="mapperGeneration">
<p>Generation: {{generation}}</p>
</div>
<div class="mapCount">
{{mapCount}}
</div>
</div>
<div class="clearfloat"></div>
</div>
</script>
<script type="text/template" id="collaboratorSearchTemplate">
<div class="collabResult">
<div class="collabIconWrapper">
<img class="icon" width="25" height="25" src="{{profile}}">
</div>
<div class="collabNameWrapper">
<p class="collabName">{{label}}</p>
</div>
<div class="clearfloat"></div>
</div>
</script>
<script type="text/template" id="synapseAutocompleteTemplate">
<div class="result{{rtype}}">
<p class="autocompleteSection synapseDesc">{{label}}</p>
<div class="synapseMetadata">
<div class="synapseOriginatorIcon hoverForTip">
<img width="24" height="24" src="{{originatorImage}}" />
<span class="tooltips synapseOriginator">{{originator}}</span>
</div>
<div class="synapsePermission {{permission}}"></div>
</div>
<div class="clearfloat"></div>
</div>
</script>
<script type="text/template" id="topicAutocompleteTemplate">
<div>
<img class="autocompleteSection topicType" width="24" height="24"
src="{{typeImageURL}}" alt="{{type}}" title="{{type}}" />
<p class="autocompleteSection topicTitle">{{label}}</p>
<div class="expandTopicMetadata"></div>
<div class="topicMetadata">
<div class="topicNumMaps">{{mapCount}}</div>
<div class="topicNumSynapses">{{synapseCount}}</div>
<div class="topicOriginatorIcon hoverForTip">
<img width="24" height="24" src="{{originatorImage}}" />
<span class="tooltips topicOriginator">{{originator}}</span>
</div>
<div class="topicPermission {{permission}}"></div>
</div>
<div class="clearfloat"></div>
</div>
</script>
</div> </div>
</script>
<div id="lightbox_overlay"> <script type="text/template" id="mapSearchTemplate">
<div id="lightbox_main"> <div class="result{{rtype}}">
<a id="lightbox_close" href="#"></a> <div class="searchResIconWrapper">
<div id="lightbox_content"> <img class="icon" src="/images/metamap36c.png">
</div>
<div class="lightboxContent" id="about"> <div class="resultText">
<h3>About Metamaps.cc</h3> <p class="resultTitle">{{label}}</p>
<div id="aboutParms"> <p class="resultDesc">{{description}}</p>
<div id="leftAboutParms"> </div>
<p>STATUS: </p> <div class="autoOptions">
<p>VERSION:</p> <div class="topicCount">
<p>BUILD:</p> {{topicCount}}
<p>LAST UPDATE:</p> </div>
</div> <div class="synapseCount">
{{synapseCount}}
<div id="rightAboutParms"> </div>
<p>PRIVATE BETA</p> <div class="mapContributorsIcon hoverForTip">
<p></p> <img id="mapContribs" width="25" height="25" src="{{mapContributorImage}}" />
<p></p> <div class="tip">
<p></p> <ul>
</div> {{{contributorTip}}}
<div class="clearfloat"></div> </ul>
</div>
<p>Metamaps.cc is a free and open source web platform that supports real-time sense-making and distributed collaboration between individuals, communities and organizations.</p>
<p>Using an intuitive graph-based interface, Metamaps.cc helps map out networks of people, ideas, resources, stories, experiences, conversations and much more. The platform is evolving for a range of applications amidst a growing network of designers, developers, facilitators, practitioners, entrepreneurs, and artists.</p>
<p>Metamaps.cc is created and maintained by a distributed community of contributors passionate about the evolution of collaboration, alternative forms of value creation and increase of collective intelligence through the lens of the open culture and the peer-to-peer revolution.</p>
<ul class="lightbox_links">
<li>
<a class="icon_twitter" href="https://twitter.com/metamapps" target="_blank">
<div class="lightboxAboutIcon"></div>
@metamapps
</a>
</li>
<li>
<a class="icon_community" href="https://www.hylo.com/c/metamaps/join/mice-late-hit-two-shown" target="_blank">
<div class="lightboxAboutIcon"></div>
community
</a>
</li>
<li>
<a class="icon_source_code" href="https://github.com/metamaps/metamaps" target="_blank">
<div class="lightboxAboutIcon"></div>
source code
</a>
</li>
<li>
<a class="icon_howtos" href="https://docs.metamaps.cc" target="_blank">
<div class="lightboxAboutIcon"></div>
howtos
</a>
</li>
<li>
<a class="icon_terms" href="https://metamaps.cc/maps/331" target="_blank">
<div class="lightboxAboutIcon"></div>
terms
</a>
</li>
</ul>
<div class="clearfloat"></div>
</div>
<div class="lightboxContent" id="noIE">
<h3>OOPS! <br> YOUR BROWSER IS NOT SUPPORTED.</h3>
<p id="noIEsubheading">To view this experience, please upgrade to the latest one of these browsers:</p>
<a id="chromeIcon" href="https://www.google.com/chrome/browser/" target="_blank">Chrome</a>
<a id="fireFoxIcon" href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a>
<a id="safariIcon" href="http://support.apple.com/downloads/#safari" target="_blank">Safari</a>
<p id="noIEbody">While it's downloading, explore our <a href="http://blog.metamaps.cc/">blog</a>,<br> watch the <a href="http://vimeo.com/88334167">tutorials</a>, or visit our <a href="https://docs.metamaps.cc">knowledge base</a>!
</div>
<div class="lightboxContent" id="tutorial">
<h3>Tutorial</h3>
<iframe src="//player.vimeo.com/video/88334167?title=0&amp;byline=0&amp;portrait=0" width="510" height="319" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="lightboxContent" id="cheatsheet">
<!--<%= render :partial => 'shared/cheatsheet' %>-->
</div>
<div class="lightboxContent" id="invite">
<h3>SHARE INVITE</h3>
<div class="leaveSpace"></div>
<p>The Metamaps platform is currently in an invite-only beta with the express purpose of creating a high value knowledge ecosystem, a diverse community of contributors and a culture of collaboration and curiosity.</p>
<p>As a valued beta tester, you have the ability to invite your peers, colleagues and collaborators onto the platform.</p>
<p>Below is a personal invite link containing your unique access code, which can be used multiple times.</p>
<div id="joinCodesBox">
<p class="joinCodes">
<button class="button" onclick="Metamaps.GlobalUI.shareInvite('<%= @invite_link %>');">COPY INVITE LINK!</button>
</div>
</div>
<div class="lightboxContent" id="forkmap">
<!--<%= render :partial => 'shared/forkmap' %>-->
</div>
<div class="lightboxContent" id="switchMetacodes">
<!--<%= render :partial => 'shared/switchmetacodes' %>-->
</div>
</div>
</div> </div>
<div id="lightbox_screen" style="height: 100%;"></div> <span>{{contributorCount}}</span>
</div> </div>
<div class="mapPermission {{permission}}">
</div>
</div>
<div class="clearfloat"></div>
</div>
</script>
<script type="text/template" id="mapperSearchTemplate">
<div class="result{{rtype}}">
<div class="searchResIconWrapper">
<img class="icon" width="32" height="32" src="{{profile}}">
</div>
<div class="resultText">
<p class="resultTitle">{{label}}</p>
</div>
<div class="autoOptions">
<div class="mapperCreated">
<p>Mapping since: {{created_at}}</p>
</div>
<div class="mapperGeneration">
<p>Generation: {{generation}}</p>
</div>
<div class="mapCount">
{{mapCount}}
</div>
</div>
<div class="clearfloat"></div>
</div>
</script>
<script type="text/template" id="collaboratorSearchTemplate">
<div class="collabResult">
<div class="collabIconWrapper">
<img class="icon" width="25" height="25" src="{{profile}}">
</div>
<div class="collabNameWrapper">
<p class="collabName">{{label}}</p>
</div>
<div class="clearfloat"></div>
</div>
</script>
<script type="text/template" id="synapseAutocompleteTemplate">
<div class="result{{rtype}}">
<p class="autocompleteSection synapseDesc">{{label}}</p>
<div class="synapseMetadata">
<div class="synapseOriginatorIcon hoverForTip">
<img width="24" height="24" src="{{originatorImage}}" />
<span class="tooltips synapseOriginator">{{originator}}</span>
</div>
<div class="synapsePermission {{permission}}"></div>
</div>
<div class="clearfloat"></div>
</div>
</script>
<script type="text/template" id="topicAutocompleteTemplate">
<div>
<img class="autocompleteSection topicType" width="24" height="24"
src="{{typeImageURL}}" alt="{{type}}" title="{{type}}" />
<p class="autocompleteSection topicTitle">{{label}}</p>
<div class="expandTopicMetadata"></div>
<div class="topicMetadata">
<div class="topicNumMaps">{{mapCount}}</div>
<div class="topicNumSynapses">{{synapseCount}}</div>
<div class="topicOriginatorIcon hoverForTip">
<img width="24" height="24" src="{{originatorImage}}" />
<span class="tooltips topicOriginator">{{originator}}</span>
</div>
<div class="topicPermission {{permission}}"></div>
</div>
<div class="clearfloat"></div>
</div>
</script>
</div>
</body> </body>
</html> </html>

64
src/components/LightBoxes/About.js Normal file
View file

@ -0,0 +1,64 @@
import React, { Component } from 'react'
class About extends Component {
render = () => {
return (
<div className="lightboxContent" id="about">
<h3>About Metamaps.cc</h3>
<div id="aboutParms">
<div id="leftAboutParms">
<p>STATUS: </p>
<p>VERSION: </p>
<p>BUILD: </p>
<p>LAST UPDATE: </p>
</div>
<div id="rightAboutParms">
<p>PRIVATE BETA</p>
<p></p>
<p></p>
<p></p>
</div>
<div className="clearfloat"></div>
</div>
<p>Metamaps.cc is a free and open source web platform that supports real-time sense-making and distributed collaboration between individuals, communities and organizations.</p>
<p>Using an intuitive graph-based interface, Metamaps.cc helps map out networks of people, ideas, resources, stories, experiences, conversations and much more. The platform is evolving for a range of applications amidst a growing network of designers, developers, facilitators, practitioners, entrepreneurs, and artists.</p>
<p>Metamaps.cc is created and maintained by a distributed community of contributors passionate about the evolution of collaboration, alternative forms of value creation and increase of collective intelligence through the lens of the open culture and the peer-to-peer revolution.</p>
<ul className="lightbox_links">
<li>
<a className="icon_twitter" href="https://twitter.com/metamapps" target="_blank">
<div className="lightboxAboutIcon"></div>
@metamapps
</a>
</li>
<li>
<a className="icon_community" href="https://www.hylo.com/c/metamaps/join/mice-late-hit-two-shown" target="_blank">
<div className="lightboxAboutIcon"></div>
community
</a>
</li>
<li>
<a className="icon_source_code" href="https://github.com/metamaps/metamaps" target="_blank">
<div className="lightboxAboutIcon"></div>
source code
</a>
</li>
<li>
<a className="icon_howtos" href="https://docs.metamaps.cc" target="_blank">
<div className="lightboxAboutIcon"></div>
howtos
</a>
</li>
<li>
<a className="icon_terms" href="https://metamaps.cc/maps/331" target="_blank">
<div className="lightboxAboutIcon"></div>
terms
</a>
</li>
</ul>
<div className="clearfloat"></div>
</div>
)
}
}
export default About

163
src/components/LightBoxes/CheatSheet.js Normal file
View file

@ -0,0 +1,163 @@
import React, { Component } from 'react'
class CheatSheet extends Component {
render = () => {
return (
<div classNameName="lightboxContent" id="cheatsheet">
<h3>HELP</h3>
<div id="cheatSheet">
<ul id="helpWrapper">
<li><a href="#quickReference">QUICK REFERENCE</a></li>
<li><a href="#tutorials">TUTORIAL</a></li>
<li><a href="#moreResources">MORE RESOURCES</a></li>
</ul>
<div id="quickReference">
<ul>
<li><a href="#csCreatingTopics">Creating Topics</a></li>
<li><a href="#csEditingTopics">Editing Topics</a></li>
<li><a href="#csCreatingSynapses">Creating Synapses</a></li>
<li><a href="#csEditingSynapses">Editing Synapses</a></li>
<li><a href="#csNavigation">Navigation</a></li>
<li><a href="#csSelection">Selection</a></li>
<li><a href="#csSearch">Search</a></li>
<li><a href="#csTopicView">Topic View</a></li>
<li><a href="#csKeyboardShortcuts">Keyboard Shortcuts</a></li>
</ul>
<div id="csTopicView">
<div className="csItem"><span className="csTitle">Enter Topic (radial) View:</span> Click on a Topic result from Search, or click the synapse <img src="<%= asset_path 'synapse16.png' %>" width="16" align="middle" /> icon inside open Topic Card on map</div>
<div className="csItem"><span className="csTitle">Recenter Topics around chosen Topic:</span> Alt + click on the topic OR Alt + E</div>
<div className="csItem"><span className="csTitle">Reveal the siblings for a Topic:</span> Right-click and choose 'Reveal siblings' OR Alt + R</div>
<div className="csItem"><span className="csTitle">Center topic and reveal siblings:</span> Alt + T</div>
<div className="csItem"><span className="csTitle">Filter out visible Topics:</span> Open Filter menu *** and toggle off/on</div>
</div>
<div id="csCreatingTopics">
<div className="csItem"><span className="csTitle">Double-click on canvas:</span> Bring up the metacode spinner</div>
<div className="csItem indented"><span className="csTitle">Scroll:</span> change metacode spinner selection</div>
<div className="csItem indented"><span className="csTitle">Tab:</span> rotate spinner counter-clockwise</div>
<div className="csItem indented"><span className="csTitle">Shift + tab:</span> rotate spinner clockwise</div>
<div className="csItem indented"><span className="csTitle">Esc:</span> Hides auto-suggestion results</div>
<div className="csItem indented"><span className="csTitle">Enter:</span> create a new topic</div>
<div className="csItem indented"><span className="csTitle">Gear Icon:</span> open up metacode settings</div>
<div className="csItem"><br /><a href="https://docs.metamaps.cc/creating_topics.html" target="_blank">Learn More</a></div>
</div>
<div id="csEditingTopics">
<div className="csItem">
<span className="csTitle">Open Topic card:</span> Double-click on topic icon
</div>
<div className="csItem indented">
<span className="csTitle">Move Topic card:</span> Click and drag on topic card metacode
</div>
<div className="csItem indented">
<span className="csTitle">Change metacode:</span> Mouse over metacode icon, then click on solid colored bar for metacode menu
</div>
<div className="csItem indented">
<span className="csTitle">Edit Topic title, description, link:</span> Click on text in respective area (click small "X" to reset link)
</div>
<div className="csItem indented">
<span className="csTitle">Save Topic title, description, link:</span> Hit enter, or click away
</div>
<div className="csItem indented">
<span className="csTitle">Change Topic permission:</span> Click on 'Permission' icon (only for topic creator)
</div>
<div className="csItem indented">
<span className="csTitle">Open Topic view:</span> Click on <img src="<%= asset_path 'synapse16.png' %>" width="16" align="middle" /> icon within topic card bar
</div>
<div className="csItem indented">
<span className="csTitle">Close Topic card:</span> Click on canvas
</div>
<div className="csItem">
<span className="csTitle">Open 'Context Menu':</span> Right-click/alt+click on topic icon or synapse or selection (multiple) to Hide/Remove/Delete, change metacode or permission
</div>
<div className="csItem"><br /><a href="https://docs.metamaps.cc/creating_topics.html" target="_blank">Learn More</a></div>
</div>
<div id="csCreatingSynapses">
<div className="csItem"><span className="csTitle">Open 'Create Synapse' prompt:</span> Right-click & drag from one topic to another</div>
<div className="csItem indented"><span className="csTitle">Enter a label</span> Begin typing (or leave blank)</div>
<div className="csItem indented"><span className="csTitle">Confirm new Synapse:</span> Enter or Tab</div>
<div className="csItem indented"><span className="csTitle">Cancel new Synapse:</span> Escape or Delete</div>
<div className="csItem"><span className="csTitle">Create new Topic with Synapse:</span> Right-click + drag from existing topic to open canvas</div>
<div className="csItem indented"><span className="csTitle">Create Topic:</span> Same as elsewhere</div>
<div className="csItem indented"><span className="csTitle">Create Synapse:</span> Same as above</div>
<div className="csItem"><br /><a href="https://docs.metamaps.cc/creating_synapses.html" target="_blank">Learn More</a></div>
</div>
<div id="csEditingSynapses">
<div className="csItem"><span className="csTitle">Open Synapse card:</span> Double-click on Synapse </div>
<div className="csItem indented"><span className="csTitle">Edit Synapse description:</span> Click on current description text</div>
<div className="csItem indented"><span className="csTitle">Save Synapse description:</span> Hit enter</div>
<div className="csItem indented"><span className="csTitle">Edit directionality:</span> Select appropriate arrow boxes</div>
<div className="csItem indented"><span className="csTitle">Change synapse permission:</span> Click on 'permission' icon (only for synapse creator)</div>
<div className="csItem indented"><span className="csTitle">Browse / select from multiple (stacked) synapses:</span> Click dropdown icon and select desired synapse</div>
<div className="csItem"><span className="csTitle">Open 'Context Menu':</span> Right-click/alt-click on Synapse</div>
<div className="csItem indented">*Hide/Remove/Delete synapse within context menu</div>
<div className="csItem"><br /><a href="https://docs.metamaps.cc/creating_synapses.html" target="_blank">Learn More</a></div>
</div>
<div id="csNavigation">
<div className="csItem"><span className="csTitle">Move around Canvas:</span> Click and drag</div>
<div className="csItem indented"><span className="csTitle">Zoom in/out:</span> Scroll OR click on <div id="zoomIn"> </div> & <div id="zoomOut"> </div></div>
<div className="csItem indented"><span className="csTitle">Zoom to see all:</span> Click <div id="centerMap"></div> OR Ctrl + E</div>
<div className="csItem"><span className="csTitle">Filter Map Contents:</span> Open the Filter Menu *** and toggle items off/on</div>
<div className="csItem"><span className="csTitle">Return to 'Explore Maps' (home) page:</span> Click the Metamaps logo in the upper left corner</div>
<div className="csItem"><br /><a href="https://docs.metamaps.cc/exploring_maps.html" target="_blank">Learn More</a></div>
</div>
<div id="csSelection">
<div className="csItem"><span className="csTitle">Select/Deselect Topic:</span> Click on topic icon</div>
<div className="csItem"><span className="csTitle">Select/Deselect Synapse:</span> Click on synapse</div>
<div className="csItem"><span className="csTitle">Select multiple Topics/Synapses:</span> Shift + click to include each</div>
<div className="csItem"><span className="csTitle">Select multiple with Selection Box:</span> Right-click/Shift-click + drag on Canvas</div>
<div className="csItem"><span className="csTitle">Move all selected Topics & Synapses:</span> Click + drag on selected topic(s)/synapse(s)</div>
<div className="csItem"><span className="csTitle">Open 'Context Menu':</span> Right-click/Alt-click on selected topic(s)</div>
<div className="csItem indented">*Hide/Remove/Delete/Change permissions of multiple topics & synapses within context menu</div>
<div className="csItem"><span className="csTitle">Zoom to selection box</span> Ctrl-click + drag</div>
<div className="csItem"><span className="csTitle">Deselect all topics & Synapses:</span> Click on background or Esc</div>
</div>
<div id="csSearch">
<div className="csItem"><span className="csTitle">Search for Topics and Maps:</span> Type query terms into search bar, wait for results below</div>
<div className="csItem"><span className="csTitle">Limit search results:</span> Click checkbox for only items you created; click arrow above Topics or Maps section to collapse</div>
<div className="csItem"><span className="csTitle">Add Topic to current Map:</span> Click "+" on a topic result</div>
<div className="csItem"><span className="csTitle">Jump to Topic View:</span> Click anywhere else on a topic result</div>
<div className="csItem"><span className="csTitle">Search by metacode:</span> type "[name of metacode]:", then your search query. i.e. idea:create...</div>
<div className="csItem"><span className="csTitle">Search for map:</span> type "map:", then your search query. i.e. map:exploring...</div>
<div className="csItem"><span className="csTitle">Search for mapper:</span> type "mapper:", then your search query. i.e. mapper:Robert</div>
</div>
<div id="csKeyboardShortcuts">
<div className="csItem"><span className="csTitle">Ctrl + /:</span> Open 'Search' prompt</div>
<div className="csItem"><span className="csTitle">Ctrl + H:</span> Hide selection on map</div>
<div className="csItem"><span className="csTitle">Ctrl + M:</span> Remove selection from map</div>
<div className="csItem"><span className="csTitle">Ctrl + D:</span> Delete selection</div>
<div className="csItem"><span className="csTitle">Ctrl + A:</span> Select all topics</div>
<div className="csItem"><span className="csTitle">Ctrl + E:</span> See all on map (zoom to extents)</div>
<div className="csItem"><span className="csTitle">Esc (while in search):</span> Close search</div>
<div className="csItem"><span className="csTitle">Esc (with selection):</span> Deselect all</div>
</div>
</div>
<div id="tutorials">
<iframe id="tutorialVideo" src="//player.vimeo.com/video/88334167" width="552" height="320" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div id="moreResources">
<p>For more information about Metamaps.cc, visit our Knowledge Base or skip directly to a section by clicking on one of the categories below.</p>
<div className="resourcesColumnOne resourcesColumn">
<a href="https://hylo.com/c/metamaps" target="_blank" className="button">Hylo User Community</a>
<ul>
<li><a href="https://docs.metamaps.cc/getting_started.html" target="_blank">Getting Started</a></li>
<li><a href="https://docs.metamaps.cc/best_practices.html" target="_blank">Best Practices</a></li>
<li><a href="https://docs.metamaps.cc/applications_and_use_cases.html" target="_blank">Applications & Use Cases</a></li>
<li><a href="https://docs.metamaps.cc/advanced_features.html" target="_blank">Advanced Features</a></li>
</ul>
</div>
<div className="resourcesColumnTwo resourcesColumn">
<a href="https://docs.metamaps.cc" target="_blank" className="button">KNOWLEDGE BASE</a>
<ul>
<li><a href="https://docs.metamaps.cc/general_questions.html" target="_blank">General Questions</a></li>
<li><a href="https://docs.metamaps.cc/project_organization_and_governance.html" target="_blank">Organization & Governance</a></li>
<li><a href="https://docs.metamaps.cc/realtime_collaboration_junto.html" target="_blank">Realtime Collaboration</a></li>
<li><a href="https://docs.metamaps.cc/importing_and_exporting_data.html" target="_blank">Importing and Exporting Data</a></li>
</ul>
</div>
</div>
</div>
</div>
)
}
}
export default CheatSheet

12
src/components/LightBoxes/ForkMap.js Normal file
View file

@ -0,0 +1,12 @@
import React, { Component } from 'react'
class ForkMap extends Component {
render = () => {
return (
<div className="lightboxContent" id="forkmap">
</div>
)
}
}
export default ForkMap

23
src/components/LightBoxes/Invite.js Normal file
View file

@ -0,0 +1,23 @@
import React, { Component } from 'react'
class Invite extends Component {
render = () => {
return (
<div className="lightboxContent" id="invite">
<h3>SHARE INVITE</h3>
<div className="leaveSpace"></div>
<p>The Metamaps platform is currently in an invite-only beta with the express purpose of creating a high value knowledge ecosystem, a diverse community of contributors and a culture of collaboration and curiosity.</p>
<p>As a valued beta tester, you have the ability to invite your peers, colleagues and collaborators onto the platform.</p>
<p>Below is a personal invite link containing your unique access code, which can be used multiple times.</p>
<div id="joinCodesBox">
<p className="joinCodes">
{`/join?code=${this.props.inviteCode}`}
<button className="button" onClick={() => Metamaps.GlobalUI.shareInvite(this.props.inviteCode)}>COPY INVITE LINK!</button>
</p>
</div>
</div>
)
}
}
export default Invite

22
src/components/LightBoxes/NoIE.js Normal file
View file

@ -0,0 +1,22 @@
import React, { Component } from 'react'
class NoIE extends Component {
render = () => {
return (
<div className="lightboxContent" id="noIE">
<h3>OOPS! <br /> YOUR BROWSER IS NOT SUPPORTED.</h3>
<p id="noIEsubheading">To view this experience, please upgrade to the latest one of these browsers:</p>
<a id="chromeIcon" href="https://www.google.com/chrome/browser/" target="_blank">Chrome</a>
<a id="fireFoxIcon" href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a>
<a id="safariIcon" href="http://support.apple.com/downloads/#safari" target="_blank">Safari</a>
<p id="noIEbody">
While it's downloading, explore our <a href="http://blog.metamaps.cc/">blog</a>,<br />
watch the <a href="http://vimeo.com/88334167">tutorials</a>,
or visit our <a href="https://docs.metamaps.cc">knowledge base</a>!
</p>
</div>
)
}
}
export default NoIE

12
src/components/LightBoxes/SwitchMetacodes.js Normal file
View file

@ -0,0 +1,12 @@
import React, { Component } from 'react'
class SwitchMetacodes extends Component {
render = () => {
return (
<div className="lightboxContent" id="switchMetacodes">
</div>
)
}
}
export default SwitchMetacodes

14
src/components/LightBoxes/Tutorial.js Normal file
View file

@ -0,0 +1,14 @@
import React, { Component } from 'react'
class Tutorial extends Component {
render = () => {
return (
<div className="lightboxContent" id="tutorial">
<h3>Tutorial</h3>
<iframe src="//player.vimeo.com/video/88334167?title=0&amp;byline=0&amp;portrait=0" width="510" height="319" frameBorder="0" allowFullScreen></iframe>
</div>
)
}
}
export default Tutorial

33
src/components/LightBoxes/index.js Normal file
View file

@ -0,0 +1,33 @@
import React, { Component } from 'react'
import About from './About'
import CheatSheet from './CheatSheet'
import ForkMap from './ForkMap'
import Invite from './Invite'
import NoIE from './NoIE'
import SwitchMetacodes from './SwitchMetacodes'
import Tutorial from './Tutorial'
class LightBoxes extends Component {
render = () => {
return (
<div id="lightbox_overlay">
<div id="lightbox_main">
<a id="lightbox_close" href="#"></a>
<div id="lightbox_content">
<About />
<CheatSheet />
<ForkMap />
<Invite />
<NoIE />
<SwitchMetacodes />
<Tutorial />
</div>
</div>
<div id="lightbox_screen" style={{height: '100%'}}></div>
</div>
)
}
}
export default LightBoxes

2
src/routes/App.js
View file

@ -5,6 +5,7 @@ import MobileHeader from '../components/MobileHeader'
import UpperLeftUI from '../components/UpperLeftUI' import UpperLeftUI from '../components/UpperLeftUI'
import UpperRightUI from '../components/UpperRightUI' import UpperRightUI from '../components/UpperRightUI'
import Toast from '../components/Toast' import Toast from '../components/Toast'
import LightBoxes from '../components/LightBoxes'
class App extends Component { class App extends Component {
static propTypes = { static propTypes = {
@ -72,6 +73,7 @@ class App extends Component {
signInPage={pathname === '/login'} />} signInPage={pathname === '/login'} />}
<Toast message={toast} /> <Toast message={toast} />
{children} {children}
<LightBoxes />
</div> </div>
} }
} }