move lightboxes into react
This commit is contained in:
Connor Turland
parent
c1dbfc9f72
commit
6c84205b38
11 changed files with 570 additions and 334 deletions
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
@ -64,33 +65,31 @@
|
||||||
<![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>
|
</script>
|
||||||
|
|
||||||
<div class="templates">
|
<div class="templates">
|
||||||
<script type="text/template" id="mapInfoBoxTemplate">
|
<script type="text/template" id="mapInfoBoxTemplate">
|
||||||
<div class="requestTitle">Click here to name this map</div>
|
<div class="requestTitle">Click here to name this map</div>
|
||||||
<div class="mapInfoName" id="mapInfoName">{{{name}}}</div>
|
<div class="mapInfoName" id="mapInfoName">{{{name}}}</div>
|
||||||
|
|
||||||
<div class="mapInfoStat">
|
<div class="mapInfoStat">
|
||||||
<div class="infoStatIcon mapContributors hoverForTip">
|
<div class="infoStatIcon mapContributors hoverForTip">
|
||||||
<img id="mapContribs" class="{{contributors_class}}"
|
<img id="mapContribs" class="{{contributors_class}}"
|
||||||
width="25" height="25" src="{{contributor_image}}" />
|
width="25" height="25" src="{{contributor_image}}" />
|
||||||
<span class="count">{{contributor_count}}</span>
|
<span class="count">{{contributor_count}}</span>
|
||||||
<div class="tip">{{{contributor_list}}}</div>
|
<div class="tip">{{{contributor_list}}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="infoStatIcon mapTopics">
|
<div class="infoStatIcon mapTopics">
|
||||||
{{topic_count}}
|
{{topic_count}}
|
||||||
</div>
|
</div>
|
||||||
<div class="infoStatIcon mapSynapses">
|
<div class="infoStatIcon mapSynapses">
|
||||||
{{synapse_count}}
|
{{synapse_count}}
|
||||||
</div>
|
</div>
|
||||||
<div class="infoStatIcon mapPermission {{permission}} hoverForTip">
|
<div class="infoStatIcon mapPermission {{permission}} hoverForTip">
|
||||||
{{{map_creator_tip}}}
|
{{{map_creator_tip}}}
|
||||||
</div>
|
</div>
|
||||||
<div class="clearfloat"></div>
|
<div class="clearfloat"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mapInfoDesc" id="mapInfoDesc">
|
<div class="mapInfoDesc" id="mapInfoDesc">
|
||||||
{{{desc}}}
|
{{{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 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>
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<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>
|
||||||
|
|
||||||
<div id="lightbox_overlay">
|
<div class="mapInfoMeta">
|
||||||
<div id="lightbox_main">
|
<p class="mapCreatedAt"><span>Created by:</span> {{user_name}} on {{created_at}}</p>
|
||||||
<a id="lightbox_close" href="#"></a>
|
<p class="mapEditedAt"><span>Last edited:</span> {{updated_at}}</p>
|
||||||
<div id="lightbox_content">
|
<div class="mapInfoButtonsWrapper">
|
||||||
|
<div class="mapInfoThumbnail">
|
||||||
<div class="lightboxContent" id="about">
|
<div class="thumbnail"></div>
|
||||||
<h3>About Metamaps.cc</h3>
|
<div class="tooltip">Update Thumbnail</div>
|
||||||
<div id="aboutParms">
|
<span>Thumb</span>
|
||||||
<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 class="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 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&byline=0&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 id="lightbox_screen" style="height: 100%;"></div>
|
|
||||||
</div>
|
</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 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>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<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>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
64
src/components/LightBoxes/About.js
Normal file
64
src/components/LightBoxes/About.js
Normal 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
163
src/components/LightBoxes/CheatSheet.js
Normal 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
12
src/components/LightBoxes/ForkMap.js
Normal 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
23
src/components/LightBoxes/Invite.js
Normal 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
22
src/components/LightBoxes/NoIE.js
Normal 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
12
src/components/LightBoxes/SwitchMetacodes.js
Normal 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
14
src/components/LightBoxes/Tutorial.js
Normal 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&byline=0&portrait=0" width="510" height="319" frameBorder="0" allowFullScreen></iframe>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Tutorial
|
||||||
33
src/components/LightBoxes/index.js
Normal file
33
src/components/LightBoxes/index.js
Normal 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
|
||||||
|
|
@ -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>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue