Permalink
Browse files

Fixes screening widget buttons.

  • Loading branch information...
tamasd committed Aug 22, 2016
1 parent daf7566 commit df57b97e3fb46075f83b480566f8f1cbf8b6d30b
Showing with 46 additions and 7 deletions.
  1. +16 −2 js/components/screeningwidget.js
  2. +18 −2 js/components/wrappers/screeningwidget.js
  3. +12 −3 less/style.less
@@ -35,6 +35,7 @@ class ScreeningWidget extends React.Component {
onClick: noop,
onMouseEnter: noop,
onMouseLeave: noop,
sharing: false,
};
static contextTypes = {
@@ -62,7 +63,7 @@ class ScreeningWidget extends React.Component {
<a className="btn btn-primary" onClick={this.context.screenWalkthrough}>{t("Update your Walkthrough GIF")}</a>
) : null;
const topbar = this.props.showBars ? (
const topbar = this.props.showBars && !this.props.sharing ? (
<div className="row screening-button">
<h4 className="col-xs-8 text-left">
{`${this.props.walkthrough.name} (${this.props.currentImage+1}/${this.props.screening.length})`}
@@ -73,7 +74,7 @@ class ScreeningWidget extends React.Component {
</div>
) : null;
const bottombar = this.props.showBars ? (
const bottombar = this.props.showBars && !this.props.sharing ? (
<div className="slideshow">
<div className="row control-bar">
<div className="col-xs-4 text-left">
@@ -128,6 +129,18 @@ class ScreeningWidget extends React.Component {
backgroundImage: `url(${imageURL})`,
};
const embedcode = `<iframe width="990" height="540" src="`+WALKHUB_URL+`walkthrough/${this.props.walkthrough.uuid}?embedded=1&screening_only=1&autoadvance=2000"></iframe>`;
const sharingMouseEvt = (evt) => {
evt.stopPropagation();
};
const sharing = this.props.sharing ? (
<div className="screening-sharing">
<pre onClick={sharingMouseEvt} onMouseDown={sharingMouseEvt} ref="embedbox" className="walkthrough-embedcode">{embedcode}</pre>
</div>
) : null;
const content = (
<div
onClick={this.props.onClick}
@@ -138,6 +151,7 @@ class ScreeningWidget extends React.Component {
style={style}
>
{topbar}
{sharing}
{bottombar}
</div>
);
@@ -56,6 +56,7 @@ class ScreeningWidgetWrapper extends React.Component {
currentImage: 0,
nextButtonEnabled: true,
prevButtonEnabled: true,
sharing: false,
};
showBars = () => {
@@ -72,6 +73,9 @@ class ScreeningWidgetWrapper extends React.Component {
nextClick = (evt) => {
noop(evt);
if (evt && evt.stopPropagation) {
evt.stopPropagation();
}
let currentImage = this.state.currentImage;
if (this.state.currentImage < (this.props.walkthrough.steps.length - 2)) {
currentImage++;
@@ -85,6 +89,7 @@ class ScreeningWidgetWrapper extends React.Component {
prevClick = (evt) => {
noop(evt);
evt.stopPropagation();
let currentImage = this.state.currentImage;
if (currentImage > 0) {
currentImage--;
@@ -98,21 +103,32 @@ class ScreeningWidgetWrapper extends React.Component {
onClick = (evt) => {
noop(evt);
this.nextClick();
if (this.state.sharing) {
this.setState({
sharing: false,
});
} else {
this.nextClick();
}
}
autoNext = () => {
if (!this.state.showBars) {
if (!this.state.showBars && !this.state.sharing) {
this.nextClick();
}
}
shareClick = (evt) => {
noop(evt);
evt.stopPropagation();
this.setState({
sharing: true,
});
}
fullscreenClick = (evt) => {
noop(evt);
evt.stopPropagation();
if (document.fullscreenElement || document.webkitFullscreenElement) {
if (document.exitFullscreen) {
document.exitFullscreen();
View
@@ -504,9 +504,6 @@ div.slideshow {
background-image: -webkit-linear-gradient(to bottom, rgba(63, 63, 63, .85)1%, rgba(0, 0, 0, .9)100%);
background-image: linear-gradient(to bottom, rgba(63, 63, 63, .85)1%, rgba(0, 0, 0, .9)100%);
opacity: 0.85;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
bottom: 0;
position: absolute;
width: 100%;
@@ -597,3 +594,15 @@ div.container.navbar-is-fixed-top {
margin-top: @navbar-height;
}
.screening-sharing {
width: 75%;
height: 100%;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
}
pre.walkthrough-embedcode {
white-space: pre-wrap;
}

0 comments on commit df57b97

Please sign in to comment.