setup invite code/link
This commit is contained in:
Connor Turland
parent
150e7a4dfb
commit
ceb2420b8d
|
|
@ -1,7 +1,5 @@
|
|||
/* global $ */
|
||||
|
||||
import clipboard from 'clipboard-js'
|
||||
|
||||
import Create from '../Create'
|
||||
|
||||
import Notifications from './Notifications'
|
||||
|
|
@ -137,19 +135,6 @@ const GlobalUI = {
|
|||
ReactApp.render()
|
||||
self.notifying = false
|
||||
}
|
||||
},
|
||||
shareInvite: function(inviteLink) {
|
||||
clipboard.copy({
|
||||
'text/plain': inviteLink
|
||||
}).then(() => {
|
||||
$('#joinCodesBox .popup').remove()
|
||||
$('#joinCodesBox').append('<p class="popup" style="text-align: center">Copied!</p>')
|
||||
window.setTimeout(() => $('#joinCodesBox .popup').remove(), 1500)
|
||||
}, () => {
|
||||
$('#joinCodesBox .popup').remove()
|
||||
$('#joinCodesBox').append(`<p class="popup" style="text-align: center">Your browser doesn't support copying, please copy manually.</p>`)
|
||||
window.setTimeout(() => $('#joinCodesBox .popup').remove(), 1500)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,36 @@
|
|||
import React, { Component } from 'react'
|
||||
import clipboard from 'clipboard-js'
|
||||
|
||||
class Invite extends Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
copied: false,
|
||||
unable: false
|
||||
}
|
||||
}
|
||||
|
||||
inviteLink = () => {
|
||||
const { host, protocol } = window ? window.location : {}
|
||||
const inviteLink = `${protocol}//${host}/join?code=${this.props.inviteCode}`
|
||||
return inviteLink
|
||||
}
|
||||
|
||||
shareInvite = () => {
|
||||
const inviteLink = this.inviteLink()
|
||||
clipboard.copy({
|
||||
'text/plain': inviteLink
|
||||
}).then(() => {
|
||||
this.setState({ copied: true })
|
||||
window.setTimeout(() => this.setState({ copied: false }), 1500)
|
||||
}, () => {
|
||||
this.setState({ unable: true })
|
||||
window.setTimeout(() => this.setState({ unable: false }), 1500)
|
||||
})
|
||||
}
|
||||
|
||||
render = () => {
|
||||
const inviteLink = this.inviteLink()
|
||||
return (
|
||||
<div className="lightboxContent" id="invite">
|
||||
<h3>SHARE INVITE</h3>
|
||||
|
|
@ -11,8 +40,12 @@ class Invite extends Component {
|
|||
<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>
|
||||
{inviteLink}
|
||||
<button className="button" onClick={this.shareInvite}>COPY INVITE LINK!</button>
|
||||
</p>
|
||||
<p className="popup" style={{textAlign: 'center'}}>
|
||||
{this.state.copied && 'Copied!'}
|
||||
{this.state.unable && "Your browser doesn't support copying, please copy manually."}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ class LightBoxes extends Component {
|
|||
<About />
|
||||
<CheatSheet />
|
||||
<ForkMap />
|
||||
<Invite />
|
||||
<Invite inviteCode={this.props.inviteCode} />
|
||||
<NoIE />
|
||||
<SwitchMetacodes />
|
||||
<Tutorial />
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ class App extends Component {
|
|||
signInPage={pathname === '/login'} />}
|
||||
<Toast message={toast} />
|
||||
{children}
|
||||
<LightBoxes />
|
||||
<LightBoxes inviteCode={currentUser && currentUser.get('invite_code')} />
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -122,14 +122,4 @@ class NotificationPage extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default NotificationPage
|
||||
|
||||
/*
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('.notification-body .button').click(function() {
|
||||
$(this).html('<img src="{ asset_path('ellipsis.gif') }" />')
|
||||
})
|
||||
})
|
||||
</script>
|
||||
*/
|
||||
export default NotificationPage
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
|
||||
<div id="lightbox_overlay">
|
||||
<div id="lightbox_main">
|
||||
<a id="lightbox_close" href="#"></a>
|
||||
<div id="lightbox_content">
|
||||
|
||||
<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>{ METAMAPS_VERSION }</p>
|
||||
<p>{ METAMAPS_BUILD }</p>
|
||||
<p>{ METAMAPS_LAST_UPDATED }</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>
|
||||
|
||||
<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>!
|
||||
|
||||
</div>
|
||||
|
||||
<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" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<div className="lightboxContent" id="cheatsheet">
|
||||
{ render :partial => 'shared/cheatsheet' }
|
||||
</div>
|
||||
|
||||
{ if current_user }
|
||||
<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">{ invite_link() }
|
||||
<button className="button" onclick="Metamaps.GlobalUI.shareInvite('{ @invite_link }');">COPY INVITE LINK!</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="lightboxContent" id="forkmap">
|
||||
{ render :partial => 'shared/forkmap' }
|
||||
</div>
|
||||
|
||||
<div className="lightboxContent" id="switchMetacodes">
|
||||
{ render :partial => 'shared/switchmetacodes' }
|
||||
</div>
|
||||
{ end }
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="lightbox_screen" style="height: 100%;"></div>
|
||||
</div>
|
||||
Loading…
Reference in a new issue