@micromag/screen-survey 0.3.148 → 0.3.152

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +136 -124
  3. package/lib/index.js +135 -122
  4. package/package.json +13 -13
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-survey-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-survey-disabled.micromag-screen-survey-container{overflow:hidden;pointer-events:none}.micromag-screen-survey-hidden.micromag-screen-survey-container{display:none;visibility:hidden}.micromag-screen-survey-placeholder.micromag-screen-survey-container .micromag-screen-survey-content{position:relative;padding:6px}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-survey-container .micromag-screen-survey-question{margin-bottom:20px}.micromag-screen-survey-container .micromag-screen-survey-answers,.micromag-screen-survey-container .micromag-screen-survey-items{position:relative}.micromag-screen-survey-container .micromag-screen-survey-item{padding:5px 0}.micromag-screen-survey-container .micromag-screen-survey-item:first-child .micromag-screen-survey-placeholderAnswer{width:80%}.micromag-screen-survey-container .micromag-screen-survey-item:last-child .micromag-screen-survey-placeholderAnswer{width:90%}.micromag-screen-survey-container .micromag-screen-survey-itemContent{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.micromag-screen-survey-container .micromag-screen-survey-resultBar{position:absolute;top:0;left:0;height:100%;background-color:hsla(0,0%,100%,.2)}.micromag-screen-survey-container .micromag-screen-survey-resultLabel{position:absolute;z-index:1;top:50%;right:0;width:4em;padding:0 8px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);color:#fff;text-align:right}.micromag-screen-survey-container .micromag-screen-survey-itemInner{width:100%}.micromag-screen-survey-container .micromag-screen-survey-button{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;width:100%;padding:10px;overflow:hidden;-webkit-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out;transition:opacity .5s ease-out}.micromag-screen-survey-container .micromag-screen-survey-button:disabled{opacity:1;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-itemLabel{width:100%}.micromag-screen-survey-container .micromag-screen-survey-itemLabel,.micromag-screen-survey-container .micromag-screen-survey-itemText{display:inline-block;-webkit-transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;-o-transition:margin-left .3s ease-out,transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,-webkit-transform .3s ease-out}.micromag-screen-survey-container .micromag-screen-survey-itemText{position:relative;z-index:1}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{width:100%;margin:0 auto}.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{height:75px}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer{height:50px}.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-button,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-result,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-resultLabel{opacity:1!important}.micromag-screen-survey-container.micromag-screen-survey-answered{line-height:1}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContainer{padding-right:50px;padding-left:15px}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContent{width:100%;opacity:1}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button{border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0)}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-result,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultLabel{opacity:.6}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-itemLabel{margin-right:0;margin-left:0;text-align:left}.micromag-screen-survey-container.micromag-screen-survey-answered.micromag-screen-survey-withPercentage .micromag-screen-survey-itemText{-webkit-transform:translate(-2em);-ms-transform:translate(-2em);transform:translate(-2em)}.micromag-screen-survey-container.micromag-screen-survey-withPercentage .micromag-screen-survey-itemLabel{margin-right:2em;margin-left:2em}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-layout{padding:10px}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-item{padding:1px 0}
1
+ .micromag-screen-survey-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-survey-disabled.micromag-screen-survey-container{overflow:hidden;pointer-events:none}.micromag-screen-survey-hidden.micromag-screen-survey-container{display:none;visibility:hidden}.micromag-screen-survey-placeholder.micromag-screen-survey-container .micromag-screen-survey-content{position:relative;padding:6px}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-survey-container .micromag-screen-survey-question{margin-bottom:20px}.micromag-screen-survey-container .micromag-screen-survey-answers,.micromag-screen-survey-container .micromag-screen-survey-items{position:relative}.micromag-screen-survey-container .micromag-screen-survey-callToAction{position:absolute;bottom:0;left:0;width:100%;-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out}.micromag-screen-survey-container .micromag-screen-survey-callToAction a{padding:0}.micromag-screen-survey-container .micromag-screen-survey-callToAction.micromag-screen-survey-disabled{opacity:0;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-item{padding:5px 0}.micromag-screen-survey-container .micromag-screen-survey-item:first-child .micromag-screen-survey-placeholderAnswer{width:80%}.micromag-screen-survey-container .micromag-screen-survey-item:last-child .micromag-screen-survey-placeholderAnswer{width:90%}.micromag-screen-survey-container .micromag-screen-survey-itemContent{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.micromag-screen-survey-container .micromag-screen-survey-resultBar{position:absolute;top:0;left:0;height:100%;background-color:hsla(0,0%,100%,.2)}.micromag-screen-survey-container .micromag-screen-survey-resultLabel{position:absolute;z-index:1;top:50%;right:0;width:4em;padding:0 8px;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);color:#fff;text-align:right}.micromag-screen-survey-container .micromag-screen-survey-itemInner{width:100%}.micromag-screen-survey-container .micromag-screen-survey-button{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;width:100%;padding:10px;overflow:hidden;-webkit-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out;transition:opacity .5s ease-out}.micromag-screen-survey-container .micromag-screen-survey-button:disabled{opacity:1;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-itemLabel{width:100%}.micromag-screen-survey-container .micromag-screen-survey-itemLabel,.micromag-screen-survey-container .micromag-screen-survey-itemText{display:inline-block;-webkit-transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;-o-transition:margin-left .3s ease-out,transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,-webkit-transform .3s ease-out}.micromag-screen-survey-container .micromag-screen-survey-itemText{position:relative;z-index:1}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{width:100%;margin:0 auto}.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{height:75px}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer{height:50px}.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-button,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-result,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-resultLabel{opacity:1!important}.micromag-screen-survey-container.micromag-screen-survey-answered{line-height:1}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContainer{padding-right:50px;padding-left:15px}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContent{width:100%;opacity:1}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button{border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0)}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-result,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultLabel{opacity:.6}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-itemLabel{margin-right:0;margin-left:0;text-align:left}.micromag-screen-survey-container.micromag-screen-survey-answered.micromag-screen-survey-withPercentage .micromag-screen-survey-itemText{-webkit-transform:translate(-2em);-ms-transform:translate(-2em);transform:translate(-2em)}.micromag-screen-survey-container.micromag-screen-survey-withPercentage .micromag-screen-survey-itemLabel{margin-right:2em;margin-left:2em}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-layout{padding:10px}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-item{padding:1px 0}
package/es/index.js CHANGED
@@ -8,8 +8,8 @@ import PropTypes from 'prop-types';
8
8
  import React, { useState, useMemo, useCallback, useEffect } from 'react';
9
9
  import { PropTypes as PropTypes$1 } from '@micromag/core';
10
10
  import { ScreenElement, Transitions } from '@micromag/core/components';
11
- import { useVisitor, useScreenSize, useViewer, useScreenRenderContext } from '@micromag/core/contexts';
12
- import { useTrackScreenEvent } from '@micromag/core/hooks';
11
+ import { useVisitor, useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
12
+ import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
13
13
  import { isTextFilled, getLargestRemainderRound, getStyleFromColor } from '@micromag/core/utils';
14
14
  import { useQuizCreate, useQuiz } from '@micromag/data';
15
15
  import Background from '@micromag/element-background';
@@ -18,9 +18,10 @@ import CallToAction from '@micromag/element-call-to-action';
18
18
  import Container from '@micromag/element-container';
19
19
  import Heading from '@micromag/element-heading';
20
20
  import Layout, { Spacer } from '@micromag/element-layout';
21
+ import Scroll from '@micromag/element-scroll';
21
22
  import Text from '@micromag/element-text';
22
23
 
23
- var styles = {"container":"micromag-screen-survey-container","disabled":"micromag-screen-survey-disabled","hidden":"micromag-screen-survey-hidden","placeholder":"micromag-screen-survey-placeholder","content":"micromag-screen-survey-content","emptyAnswer":"micromag-screen-survey-emptyAnswer","emptyQuestion":"micromag-screen-survey-emptyQuestion","question":"micromag-screen-survey-question","answers":"micromag-screen-survey-answers","items":"micromag-screen-survey-items","item":"micromag-screen-survey-item","placeholderAnswer":"micromag-screen-survey-placeholderAnswer","itemContent":"micromag-screen-survey-itemContent","resultBar":"micromag-screen-survey-resultBar","resultLabel":"micromag-screen-survey-resultLabel","itemInner":"micromag-screen-survey-itemInner","button":"micromag-screen-survey-button","itemLabel":"micromag-screen-survey-itemLabel","itemText":"micromag-screen-survey-itemText","userAnswer":"micromag-screen-survey-userAnswer","result":"micromag-screen-survey-result","answered":"micromag-screen-survey-answered","resultContainer":"micromag-screen-survey-resultContainer","resultContent":"micromag-screen-survey-resultContent","withPercentage":"micromag-screen-survey-withPercentage","isPlaceholder":"micromag-screen-survey-isPlaceholder","layout":"micromag-screen-survey-layout"};
24
+ var styles = {"container":"micromag-screen-survey-container","disabled":"micromag-screen-survey-disabled","hidden":"micromag-screen-survey-hidden","placeholder":"micromag-screen-survey-placeholder","content":"micromag-screen-survey-content","emptyAnswer":"micromag-screen-survey-emptyAnswer","emptyQuestion":"micromag-screen-survey-emptyQuestion","question":"micromag-screen-survey-question","answers":"micromag-screen-survey-answers","items":"micromag-screen-survey-items","callToAction":"micromag-screen-survey-callToAction","item":"micromag-screen-survey-item","placeholderAnswer":"micromag-screen-survey-placeholderAnswer","itemContent":"micromag-screen-survey-itemContent","resultBar":"micromag-screen-survey-resultBar","resultLabel":"micromag-screen-survey-resultLabel","itemInner":"micromag-screen-survey-itemInner","button":"micromag-screen-survey-button","itemLabel":"micromag-screen-survey-itemLabel","itemText":"micromag-screen-survey-itemText","userAnswer":"micromag-screen-survey-userAnswer","result":"micromag-screen-survey-result","answered":"micromag-screen-survey-answered","resultContainer":"micromag-screen-survey-resultContainer","resultContent":"micromag-screen-survey-resultContent","withPercentage":"micromag-screen-survey-withPercentage","isPlaceholder":"micromag-screen-survey-isPlaceholder","layout":"micromag-screen-survey-layout"};
24
25
 
25
26
  var propTypes = {
26
27
  id: PropTypes.string,
@@ -29,10 +30,10 @@ var propTypes = {
29
30
  answers: PropTypes$1.answers,
30
31
  buttonsStyle: PropTypes$1.boxStyle,
31
32
  buttonsTextStyle: PropTypes$1.textStyle,
32
- percentageResultTextStyle: PropTypes$1.textStyle,
33
33
  resultsStyle: PropTypes.shape({
34
34
  barColor: PropTypes$1.color,
35
- textColor: PropTypes$1.color
35
+ textColor: PropTypes$1.color,
36
+ percentageTextStyle: PropTypes$1.textStyle
36
37
  }),
37
38
  spacing: PropTypes.number,
38
39
  background: PropTypes$1.backgroundElement,
@@ -45,8 +46,6 @@ var propTypes = {
45
46
  transitionStagger: PropTypes.number,
46
47
  resultTransitionDuration: PropTypes.number,
47
48
  type: PropTypes.string,
48
- enableInteraction: PropTypes.func,
49
- disableInteraction: PropTypes.func,
50
49
  className: PropTypes.string
51
50
  };
52
51
  var defaultProps = {
@@ -57,7 +56,6 @@ var defaultProps = {
57
56
  buttonsStyle: null,
58
57
  buttonsTextStyle: null,
59
58
  resultsStyle: null,
60
- percentageResultTextStyle: null,
61
59
  spacing: 20,
62
60
  background: null,
63
61
  callToAction: null,
@@ -69,13 +67,11 @@ var defaultProps = {
69
67
  transitionStagger: 100,
70
68
  resultTransitionDuration: 500,
71
69
  type: null,
72
- enableInteraction: null,
73
- disableInteraction: null,
74
70
  className: null
75
71
  };
76
72
 
77
73
  var SurveyScreen = function SurveyScreen(_ref) {
78
- var _ref18;
74
+ var _ref20;
79
75
 
80
76
  var id = _ref.id,
81
77
  layout = _ref.layout,
@@ -84,7 +80,6 @@ var SurveyScreen = function SurveyScreen(_ref) {
84
80
  buttonsStyle = _ref.buttonsStyle,
85
81
  buttonsTextStyle = _ref.buttonsTextStyle,
86
82
  resultsStyle = _ref.resultsStyle,
87
- percentageResultTextStyle = _ref.percentageResultTextStyle,
88
83
  spacing = _ref.spacing,
89
84
  background = _ref.background,
90
85
  callToAction = _ref.callToAction,
@@ -96,8 +91,6 @@ var SurveyScreen = function SurveyScreen(_ref) {
96
91
  transitionStagger = _ref.transitionStagger,
97
92
  resultTransitionDuration = _ref.resultTransitionDuration,
98
93
  type = _ref.type,
99
- enableInteraction = _ref.enableInteraction,
100
- disableInteraction = _ref.disableInteraction,
101
94
  className = _ref.className;
102
95
  var screenId = id || 'screen-id';
103
96
  var visitor = useVisitor();
@@ -111,12 +104,8 @@ var SurveyScreen = function SurveyScreen(_ref) {
111
104
  var _useScreenSize = useScreenSize(),
112
105
  width = _useScreenSize.width,
113
106
  height = _useScreenSize.height,
114
- menuOverScreen = _useScreenSize.menuOverScreen,
115
107
  resolution = _useScreenSize.resolution;
116
108
 
117
- var _useViewer = useViewer(),
118
- menuSize = _useViewer.menuSize;
119
-
120
109
  var _useQuizCreate = useQuizCreate({
121
110
  screenId: screenId,
122
111
  visitorId: visitorId
@@ -131,7 +120,18 @@ var SurveyScreen = function SurveyScreen(_ref) {
131
120
  isStatic = _useScreenRenderConte.isStatic,
132
121
  isCapture = _useScreenRenderConte.isCapture;
133
122
 
134
- var hasCallToAction = callToAction !== null && callToAction.active === true;
123
+ var _useViewerContext = useViewerContext(),
124
+ viewerTopHeight = _useViewerContext.topHeight,
125
+ viewerBottomHeight = _useViewerContext.bottomHeight,
126
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
127
+
128
+ var _useViewerWebView = useViewerWebView(),
129
+ openWebView = _useViewerWebView.open;
130
+
131
+ var _usePlaybackContext = usePlaybackContext(),
132
+ muted = _usePlaybackContext.muted;
133
+
134
+ var mediaRef = usePlaybackMediaRef(current);
135
135
 
136
136
  var _useQuiz = useQuiz({
137
137
  screenId: screenId,
@@ -222,7 +222,6 @@ var SurveyScreen = function SurveyScreen(_ref) {
222
222
  }, {});
223
223
  }, [answers, quizAnswers, userAnswerIndex]);
224
224
  var isSplitted = layout === 'split';
225
- var isTopLayout = layout === 'top';
226
225
  var isMiddleLayout = layout === 'middle';
227
226
  var verticalAlign = isSplitted ? null : layout;
228
227
  var transitionPlaying = current;
@@ -247,7 +246,36 @@ var SurveyScreen = function SurveyScreen(_ref) {
247
246
  if (!current && isEdit && userAnswerIndex !== null) {
248
247
  setUserAnswerIndex(null);
249
248
  }
250
- }, [isEdit, current, userAnswerIndex, setUserAnswerIndex]); // Question
249
+ }, [isEdit, current, userAnswerIndex, setUserAnswerIndex]); // Call to Action
250
+
251
+ var _ref10 = callToAction || {},
252
+ _ref10$active = _ref10.active,
253
+ hasCallToAction = _ref10$active === void 0 ? false : _ref10$active;
254
+
255
+ var _useDimensionObserver = useDimensionObserver(),
256
+ callToActionRef = _useDimensionObserver.ref,
257
+ _useDimensionObserver2 = _useDimensionObserver.height,
258
+ callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
259
+
260
+ var scrollingDisabled = !isEdit && transitionDisabled || !current;
261
+
262
+ var _useState3 = useState(false),
263
+ _useState4 = _slicedToArray(_useState3, 2),
264
+ scrolledBottom = _useState4[0],
265
+ setScrolledBottom = _useState4[1];
266
+
267
+ var onScrolledBottom = useCallback(function (_ref11) {
268
+ var initial = _ref11.initial;
269
+
270
+ if (initial) {
271
+ trackScreenEvent('scroll', 'Screen');
272
+ }
273
+
274
+ setScrolledBottom(true);
275
+ }, [trackScreenEvent]);
276
+ var onScrolledNotBottom = useCallback(function () {
277
+ setScrolledBottom(false);
278
+ }, [setScrolledBottom]); // Question
251
279
 
252
280
  var items = [/*#__PURE__*/React.createElement(ScreenElement, {
253
281
  key: "question",
@@ -277,11 +305,13 @@ var SurveyScreen = function SurveyScreen(_ref) {
277
305
 
278
306
  var finalTransitionDuration = showInstantAnswer ? 0 : "".concat(resultTransitionDuration, "ms");
279
307
 
280
- var _ref10 = resultsStyle || {},
281
- _ref10$barColor = _ref10.barColor,
282
- resultsBarColor = _ref10$barColor === void 0 ? null : _ref10$barColor,
283
- _ref10$textColor = _ref10.textColor,
284
- resultsTextColor = _ref10$textColor === void 0 ? null : _ref10$textColor;
308
+ var _ref12 = resultsStyle || {},
309
+ _ref12$barColor = _ref12.barColor,
310
+ resultsBarColor = _ref12$barColor === void 0 ? null : _ref12$barColor,
311
+ _ref12$textColor = _ref12.textColor,
312
+ resultsTextColor = _ref12$textColor === void 0 ? null : _ref12$textColor,
313
+ _ref12$percentageText = _ref12.percentageTextStyle,
314
+ resultsPercentageTextStyle = _ref12$percentageText === void 0 ? null : _ref12$percentageText;
285
315
 
286
316
  items.push( /*#__PURE__*/React.createElement("div", {
287
317
  key: "answers",
@@ -291,36 +321,38 @@ var SurveyScreen = function SurveyScreen(_ref) {
291
321
  }, (isPlaceholder ? _toConsumableArray(new Array(3)) : answers).map(function (answer, answerIndex) {
292
322
  var hasAnswer = answer !== null;
293
323
 
294
- var _ref11 = answer || {},
295
- _ref11$label = _ref11.label,
296
- label = _ref11$label === void 0 ? null : _ref11$label,
297
- _ref11$buttonStyle = _ref11.buttonStyle,
298
- answerButtonStyle = _ref11$buttonStyle === void 0 ? null : _ref11$buttonStyle,
299
- _ref11$textStyle = _ref11.textStyle,
300
- answerButtonTextStyle = _ref11$textStyle === void 0 ? null : _ref11$textStyle,
301
- _ref11$resultStyle = _ref11.resultStyle,
302
- answerResultStyle = _ref11$resultStyle === void 0 ? null : _ref11$resultStyle;
303
-
304
- var _ref12 = answerResultStyle || {},
305
- _ref12$barColor = _ref12.barColor,
306
- answerResultBarColor = _ref12$barColor === void 0 ? null : _ref12$barColor,
307
- answerResultTextColor = _ref12.textColor;
308
-
309
- var _ref13 = label || {},
310
- _ref13$body = _ref13.body,
311
- body = _ref13$body === void 0 ? null : _ref13$body;
312
-
313
- var _ref14 = body !== null ? quizAnswersComputed[body] || {} : {},
314
- _ref14$percent = _ref14.percent,
315
- percent = _ref14$percent === void 0 ? 0 : _ref14$percent;
324
+ var _ref13 = answer || {},
325
+ _ref13$label = _ref13.label,
326
+ label = _ref13$label === void 0 ? null : _ref13$label,
327
+ _ref13$buttonStyle = _ref13.buttonStyle,
328
+ answerButtonStyle = _ref13$buttonStyle === void 0 ? null : _ref13$buttonStyle,
329
+ _ref13$textStyle = _ref13.textStyle,
330
+ answerButtonTextStyle = _ref13$textStyle === void 0 ? null : _ref13$textStyle,
331
+ _ref13$resultStyle = _ref13.resultStyle,
332
+ answerResultStyle = _ref13$resultStyle === void 0 ? null : _ref13$resultStyle;
333
+
334
+ var _ref14 = answerResultStyle || {},
335
+ _ref14$barColor = _ref14.barColor,
336
+ answerResultBarColor = _ref14$barColor === void 0 ? null : _ref14$barColor,
337
+ answerResultTextColor = _ref14.textColor,
338
+ _ref14$percentageText = _ref14.percentageTextStyle,
339
+ answerResultPercentageTextStyle = _ref14$percentageText === void 0 ? null : _ref14$percentageText;
316
340
 
317
341
  var _ref15 = label || {},
318
- _ref15$textStyle = _ref15.textStyle,
319
- textStyle = _ref15$textStyle === void 0 ? null : _ref15$textStyle;
342
+ _ref15$body = _ref15.body,
343
+ body = _ref15$body === void 0 ? null : _ref15$body;
320
344
 
321
- var _ref16 = textStyle || {},
322
- _ref16$color = _ref16.color,
323
- labelColor = _ref16$color === void 0 ? null : _ref16$color;
345
+ var _ref16 = body !== null ? quizAnswersComputed[body] || {} : {},
346
+ _ref16$percent = _ref16.percent,
347
+ percent = _ref16$percent === void 0 ? 0 : _ref16$percent;
348
+
349
+ var _ref17 = label || {},
350
+ _ref17$textStyle = _ref17.textStyle,
351
+ textStyle = _ref17$textStyle === void 0 ? null : _ref17$textStyle;
352
+
353
+ var _ref18 = textStyle || {},
354
+ _ref18$color = _ref18.color,
355
+ labelColor = _ref18$color === void 0 ? null : _ref18$color;
324
356
 
325
357
  var hasAnswerLabel = isTextFilled(label);
326
358
  var userAnswer = userAnswerIndex === answerIndex;
@@ -378,7 +410,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
378
410
  opacity: 0
379
411
  })
380
412
  }, /*#__PURE__*/React.createElement(Text, Object.assign({}, label, {
381
- textStyle: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, textStyle), buttonsTextStyle), resultsTextColor), answerResultTextColor), percentageResultTextStyle),
413
+ textStyle: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, textStyle), buttonsTextStyle), resultsTextColor), resultsPercentageTextStyle), answerResultTextColor), answerResultPercentageTextStyle),
382
414
  inline: true,
383
415
  className: styles.resultText,
384
416
  body: "".concat(percent, "%")
@@ -393,56 +425,49 @@ var SurveyScreen = function SurveyScreen(_ref) {
393
425
  opacity: 0
394
426
  })
395
427
  }) : null))))) : null));
396
- })) : null)); // Call to Action
397
-
398
- if (!isPlaceholder && hasCallToAction) {
399
- if (isTopLayout || isMiddleLayout) {
400
- items.push( /*#__PURE__*/React.createElement(Spacer, {
401
- key: "spacer-cta-bottom"
402
- }));
403
- }
404
-
405
- items.push( /*#__PURE__*/React.createElement("div", {
406
- style: {
407
- margin: -spacing,
408
- marginTop: 0
409
- },
410
- key: "call-to-action"
411
- }, /*#__PURE__*/React.createElement(CallToAction, {
412
- callToAction: callToAction,
413
- disabled: !answered,
414
- animationDisabled: isPreview,
415
- focusable: current && isView,
416
- screenSize: {
417
- width: width,
418
- height: height
419
- },
420
- enableInteraction: enableInteraction,
421
- disableInteraction: disableInteraction
422
- })));
423
- }
424
-
428
+ })) : null));
425
429
  return /*#__PURE__*/React.createElement("div", {
426
- className: classNames([styles.container, (_ref18 = {}, _defineProperty(_ref18, className, className !== null), _defineProperty(_ref18, styles.answered, answered), _defineProperty(_ref18, styles.withPercentage, !withoutPercentage), _defineProperty(_ref18, styles.isPlaceholder, isPlaceholder), _ref18)])
430
+ className: classNames([styles.container, (_ref20 = {}, _defineProperty(_ref20, className, className !== null), _defineProperty(_ref20, styles.answered, answered), _defineProperty(_ref20, styles.withPercentage, !withoutPercentage), _defineProperty(_ref20, styles.isPlaceholder, isPlaceholder), _ref20)])
427
431
  }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
428
432
  background: background,
429
433
  width: width,
430
434
  height: height,
431
435
  resolution: resolution,
432
436
  playing: backgroundPlaying,
433
- shouldLoad: mediaShouldLoad
437
+ muted: muted,
438
+ shouldLoad: mediaShouldLoad,
439
+ mediaRef: mediaRef
434
440
  }) : null, /*#__PURE__*/React.createElement(Container, {
435
441
  width: width,
436
442
  height: height
443
+ }, /*#__PURE__*/React.createElement(Scroll, {
444
+ verticalAlign: verticalAlign,
445
+ disabled: scrollingDisabled,
446
+ onScrolledBottom: onScrolledBottom,
447
+ onScrolledNotBottom: onScrolledNotBottom
437
448
  }, /*#__PURE__*/React.createElement(Layout, {
438
449
  className: styles.layout,
439
- fullscreen: true,
440
450
  verticalAlign: verticalAlign,
441
451
  style: !isPlaceholder ? {
442
452
  padding: spacing,
443
- paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
453
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
454
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (callToActionHeight + spacing)
444
455
  } : null
445
- }, items)));
456
+ }, items)), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
457
+ ref: callToActionRef,
458
+ className: classNames([styles.callToAction, _defineProperty({}, styles.disabled, !scrolledBottom)]),
459
+ style: {
460
+ transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
461
+ paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
462
+ paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
463
+ paddingTop: spacing / 2,
464
+ paddingBottom: spacing / 2
465
+ }
466
+ }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
467
+ animationDisabled: isPreview,
468
+ focusable: current && isView,
469
+ openWebView: openWebView
470
+ }))) : null));
446
471
  };
447
472
 
448
473
  SurveyScreen.propTypes = propTypes;
@@ -509,28 +534,6 @@ var definition = {
509
534
  "value": "Answers"
510
535
  }]
511
536
  })
512
- }, {
513
- name: 'withoutPercentage',
514
- type: 'toggle',
515
- defaultValue: false,
516
- label: defineMessage({
517
- id: "crLqJd",
518
- defaultMessage: [{
519
- "type": 0,
520
- "value": "Without percentage"
521
- }]
522
- })
523
- }, {
524
- name: 'withoutBar',
525
- type: 'toggle',
526
- defaultValue: false,
527
- label: defineMessage({
528
- id: "D7kxD3",
529
- defaultMessage: [{
530
- "type": 0,
531
- "value": "Without bar"
532
- }]
533
- })
534
537
  }, {
535
538
  type: 'fields',
536
539
  isList: true,
@@ -542,6 +545,28 @@ var definition = {
542
545
  }]
543
546
  }),
544
547
  fields: [{
548
+ name: 'withoutPercentage',
549
+ type: 'toggle',
550
+ defaultValue: false,
551
+ label: defineMessage({
552
+ id: "crLqJd",
553
+ defaultMessage: [{
554
+ "type": 0,
555
+ "value": "Without percentage"
556
+ }]
557
+ })
558
+ }, {
559
+ name: 'withoutBar',
560
+ type: 'toggle',
561
+ defaultValue: false,
562
+ label: defineMessage({
563
+ id: "D7kxD3",
564
+ defaultMessage: [{
565
+ "type": 0,
566
+ "value": "Without bar"
567
+ }]
568
+ })
569
+ }, {
545
570
  name: 'buttonsStyle',
546
571
  type: 'box-style-form',
547
572
  label: defineMessage({
@@ -563,7 +588,7 @@ var definition = {
563
588
  })
564
589
  }, {
565
590
  name: 'resultsStyle',
566
- type: 'field-with-form',
591
+ type: 'graph-bar-style-form',
567
592
  label: defineMessage({
568
593
  id: "e4UTx9",
569
594
  defaultMessage: [{
@@ -577,19 +602,6 @@ var definition = {
577
602
  "type": 0,
578
603
  "value": "Edit style..."
579
604
  }]
580
- }),
581
- field: {
582
- type: 'graph-bar-style'
583
- }
584
- }, {
585
- name: 'percentageResultTextStyle',
586
- type: 'text-style-form',
587
- label: defineMessage({
588
- id: "4y3gAI",
589
- defaultMessage: [{
590
- "type": 0,
591
- "value": "Result percentage text"
592
- }]
593
605
  })
594
606
  }]
595
607
  }, {
package/lib/index.js CHANGED
@@ -22,6 +22,7 @@ var CallToAction = require('@micromag/element-call-to-action');
22
22
  var Container = require('@micromag/element-container');
23
23
  var Heading = require('@micromag/element-heading');
24
24
  var Layout = require('@micromag/element-layout');
25
+ var Scroll = require('@micromag/element-scroll');
25
26
  var Text = require('@micromag/element-text');
26
27
 
27
28
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -39,9 +40,10 @@ var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
39
40
  var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
40
41
  var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
41
42
  var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
43
+ var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
42
44
  var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
43
45
 
44
- var styles = {"container":"micromag-screen-survey-container","disabled":"micromag-screen-survey-disabled","hidden":"micromag-screen-survey-hidden","placeholder":"micromag-screen-survey-placeholder","content":"micromag-screen-survey-content","emptyAnswer":"micromag-screen-survey-emptyAnswer","emptyQuestion":"micromag-screen-survey-emptyQuestion","question":"micromag-screen-survey-question","answers":"micromag-screen-survey-answers","items":"micromag-screen-survey-items","item":"micromag-screen-survey-item","placeholderAnswer":"micromag-screen-survey-placeholderAnswer","itemContent":"micromag-screen-survey-itemContent","resultBar":"micromag-screen-survey-resultBar","resultLabel":"micromag-screen-survey-resultLabel","itemInner":"micromag-screen-survey-itemInner","button":"micromag-screen-survey-button","itemLabel":"micromag-screen-survey-itemLabel","itemText":"micromag-screen-survey-itemText","userAnswer":"micromag-screen-survey-userAnswer","result":"micromag-screen-survey-result","answered":"micromag-screen-survey-answered","resultContainer":"micromag-screen-survey-resultContainer","resultContent":"micromag-screen-survey-resultContent","withPercentage":"micromag-screen-survey-withPercentage","isPlaceholder":"micromag-screen-survey-isPlaceholder","layout":"micromag-screen-survey-layout"};
46
+ var styles = {"container":"micromag-screen-survey-container","disabled":"micromag-screen-survey-disabled","hidden":"micromag-screen-survey-hidden","placeholder":"micromag-screen-survey-placeholder","content":"micromag-screen-survey-content","emptyAnswer":"micromag-screen-survey-emptyAnswer","emptyQuestion":"micromag-screen-survey-emptyQuestion","question":"micromag-screen-survey-question","answers":"micromag-screen-survey-answers","items":"micromag-screen-survey-items","callToAction":"micromag-screen-survey-callToAction","item":"micromag-screen-survey-item","placeholderAnswer":"micromag-screen-survey-placeholderAnswer","itemContent":"micromag-screen-survey-itemContent","resultBar":"micromag-screen-survey-resultBar","resultLabel":"micromag-screen-survey-resultLabel","itemInner":"micromag-screen-survey-itemInner","button":"micromag-screen-survey-button","itemLabel":"micromag-screen-survey-itemLabel","itemText":"micromag-screen-survey-itemText","userAnswer":"micromag-screen-survey-userAnswer","result":"micromag-screen-survey-result","answered":"micromag-screen-survey-answered","resultContainer":"micromag-screen-survey-resultContainer","resultContent":"micromag-screen-survey-resultContent","withPercentage":"micromag-screen-survey-withPercentage","isPlaceholder":"micromag-screen-survey-isPlaceholder","layout":"micromag-screen-survey-layout"};
45
47
 
46
48
  var propTypes = {
47
49
  id: PropTypes__default["default"].string,
@@ -50,10 +52,10 @@ var propTypes = {
50
52
  answers: core.PropTypes.answers,
51
53
  buttonsStyle: core.PropTypes.boxStyle,
52
54
  buttonsTextStyle: core.PropTypes.textStyle,
53
- percentageResultTextStyle: core.PropTypes.textStyle,
54
55
  resultsStyle: PropTypes__default["default"].shape({
55
56
  barColor: core.PropTypes.color,
56
- textColor: core.PropTypes.color
57
+ textColor: core.PropTypes.color,
58
+ percentageTextStyle: core.PropTypes.textStyle
57
59
  }),
58
60
  spacing: PropTypes__default["default"].number,
59
61
  background: core.PropTypes.backgroundElement,
@@ -66,8 +68,6 @@ var propTypes = {
66
68
  transitionStagger: PropTypes__default["default"].number,
67
69
  resultTransitionDuration: PropTypes__default["default"].number,
68
70
  type: PropTypes__default["default"].string,
69
- enableInteraction: PropTypes__default["default"].func,
70
- disableInteraction: PropTypes__default["default"].func,
71
71
  className: PropTypes__default["default"].string
72
72
  };
73
73
  var defaultProps = {
@@ -78,7 +78,6 @@ var defaultProps = {
78
78
  buttonsStyle: null,
79
79
  buttonsTextStyle: null,
80
80
  resultsStyle: null,
81
- percentageResultTextStyle: null,
82
81
  spacing: 20,
83
82
  background: null,
84
83
  callToAction: null,
@@ -90,13 +89,11 @@ var defaultProps = {
90
89
  transitionStagger: 100,
91
90
  resultTransitionDuration: 500,
92
91
  type: null,
93
- enableInteraction: null,
94
- disableInteraction: null,
95
92
  className: null
96
93
  };
97
94
 
98
95
  var SurveyScreen = function SurveyScreen(_ref) {
99
- var _ref18;
96
+ var _ref20;
100
97
 
101
98
  var id = _ref.id,
102
99
  layout = _ref.layout,
@@ -105,7 +102,6 @@ var SurveyScreen = function SurveyScreen(_ref) {
105
102
  buttonsStyle = _ref.buttonsStyle,
106
103
  buttonsTextStyle = _ref.buttonsTextStyle,
107
104
  resultsStyle = _ref.resultsStyle,
108
- percentageResultTextStyle = _ref.percentageResultTextStyle,
109
105
  spacing = _ref.spacing,
110
106
  background = _ref.background,
111
107
  callToAction = _ref.callToAction,
@@ -117,8 +113,6 @@ var SurveyScreen = function SurveyScreen(_ref) {
117
113
  transitionStagger = _ref.transitionStagger,
118
114
  resultTransitionDuration = _ref.resultTransitionDuration,
119
115
  type = _ref.type,
120
- enableInteraction = _ref.enableInteraction,
121
- disableInteraction = _ref.disableInteraction,
122
116
  className = _ref.className;
123
117
  var screenId = id || 'screen-id';
124
118
  var visitor = contexts.useVisitor();
@@ -132,12 +126,8 @@ var SurveyScreen = function SurveyScreen(_ref) {
132
126
  var _useScreenSize = contexts.useScreenSize(),
133
127
  width = _useScreenSize.width,
134
128
  height = _useScreenSize.height,
135
- menuOverScreen = _useScreenSize.menuOverScreen,
136
129
  resolution = _useScreenSize.resolution;
137
130
 
138
- var _useViewer = contexts.useViewer(),
139
- menuSize = _useViewer.menuSize;
140
-
141
131
  var _useQuizCreate = data.useQuizCreate({
142
132
  screenId: screenId,
143
133
  visitorId: visitorId
@@ -152,7 +142,18 @@ var SurveyScreen = function SurveyScreen(_ref) {
152
142
  isStatic = _useScreenRenderConte.isStatic,
153
143
  isCapture = _useScreenRenderConte.isCapture;
154
144
 
155
- var hasCallToAction = callToAction !== null && callToAction.active === true;
145
+ var _useViewerContext = contexts.useViewerContext(),
146
+ viewerTopHeight = _useViewerContext.topHeight,
147
+ viewerBottomHeight = _useViewerContext.bottomHeight,
148
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
149
+
150
+ var _useViewerWebView = contexts.useViewerWebView(),
151
+ openWebView = _useViewerWebView.open;
152
+
153
+ var _usePlaybackContext = contexts.usePlaybackContext(),
154
+ muted = _usePlaybackContext.muted;
155
+
156
+ var mediaRef = contexts.usePlaybackMediaRef(current);
156
157
 
157
158
  var _useQuiz = data.useQuiz({
158
159
  screenId: screenId,
@@ -243,7 +244,6 @@ var SurveyScreen = function SurveyScreen(_ref) {
243
244
  }, {});
244
245
  }, [answers, quizAnswers, userAnswerIndex]);
245
246
  var isSplitted = layout === 'split';
246
- var isTopLayout = layout === 'top';
247
247
  var isMiddleLayout = layout === 'middle';
248
248
  var verticalAlign = isSplitted ? null : layout;
249
249
  var transitionPlaying = current;
@@ -268,7 +268,36 @@ var SurveyScreen = function SurveyScreen(_ref) {
268
268
  if (!current && isEdit && userAnswerIndex !== null) {
269
269
  setUserAnswerIndex(null);
270
270
  }
271
- }, [isEdit, current, userAnswerIndex, setUserAnswerIndex]); // Question
271
+ }, [isEdit, current, userAnswerIndex, setUserAnswerIndex]); // Call to Action
272
+
273
+ var _ref10 = callToAction || {},
274
+ _ref10$active = _ref10.active,
275
+ hasCallToAction = _ref10$active === void 0 ? false : _ref10$active;
276
+
277
+ var _useDimensionObserver = hooks.useDimensionObserver(),
278
+ callToActionRef = _useDimensionObserver.ref,
279
+ _useDimensionObserver2 = _useDimensionObserver.height,
280
+ callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
281
+
282
+ var scrollingDisabled = !isEdit && transitionDisabled || !current;
283
+
284
+ var _useState3 = React.useState(false),
285
+ _useState4 = _slicedToArray__default["default"](_useState3, 2),
286
+ scrolledBottom = _useState4[0],
287
+ setScrolledBottom = _useState4[1];
288
+
289
+ var onScrolledBottom = React.useCallback(function (_ref11) {
290
+ var initial = _ref11.initial;
291
+
292
+ if (initial) {
293
+ trackScreenEvent('scroll', 'Screen');
294
+ }
295
+
296
+ setScrolledBottom(true);
297
+ }, [trackScreenEvent]);
298
+ var onScrolledNotBottom = React.useCallback(function () {
299
+ setScrolledBottom(false);
300
+ }, [setScrolledBottom]); // Question
272
301
 
273
302
  var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
274
303
  key: "question",
@@ -298,11 +327,13 @@ var SurveyScreen = function SurveyScreen(_ref) {
298
327
 
299
328
  var finalTransitionDuration = showInstantAnswer ? 0 : "".concat(resultTransitionDuration, "ms");
300
329
 
301
- var _ref10 = resultsStyle || {},
302
- _ref10$barColor = _ref10.barColor,
303
- resultsBarColor = _ref10$barColor === void 0 ? null : _ref10$barColor,
304
- _ref10$textColor = _ref10.textColor,
305
- resultsTextColor = _ref10$textColor === void 0 ? null : _ref10$textColor;
330
+ var _ref12 = resultsStyle || {},
331
+ _ref12$barColor = _ref12.barColor,
332
+ resultsBarColor = _ref12$barColor === void 0 ? null : _ref12$barColor,
333
+ _ref12$textColor = _ref12.textColor,
334
+ resultsTextColor = _ref12$textColor === void 0 ? null : _ref12$textColor,
335
+ _ref12$percentageText = _ref12.percentageTextStyle,
336
+ resultsPercentageTextStyle = _ref12$percentageText === void 0 ? null : _ref12$percentageText;
306
337
 
307
338
  items.push( /*#__PURE__*/React__default["default"].createElement("div", {
308
339
  key: "answers",
@@ -312,36 +343,38 @@ var SurveyScreen = function SurveyScreen(_ref) {
312
343
  }, (isPlaceholder ? _toConsumableArray__default["default"](new Array(3)) : answers).map(function (answer, answerIndex) {
313
344
  var hasAnswer = answer !== null;
314
345
 
315
- var _ref11 = answer || {},
316
- _ref11$label = _ref11.label,
317
- label = _ref11$label === void 0 ? null : _ref11$label,
318
- _ref11$buttonStyle = _ref11.buttonStyle,
319
- answerButtonStyle = _ref11$buttonStyle === void 0 ? null : _ref11$buttonStyle,
320
- _ref11$textStyle = _ref11.textStyle,
321
- answerButtonTextStyle = _ref11$textStyle === void 0 ? null : _ref11$textStyle,
322
- _ref11$resultStyle = _ref11.resultStyle,
323
- answerResultStyle = _ref11$resultStyle === void 0 ? null : _ref11$resultStyle;
324
-
325
- var _ref12 = answerResultStyle || {},
326
- _ref12$barColor = _ref12.barColor,
327
- answerResultBarColor = _ref12$barColor === void 0 ? null : _ref12$barColor,
328
- answerResultTextColor = _ref12.textColor;
329
-
330
- var _ref13 = label || {},
331
- _ref13$body = _ref13.body,
332
- body = _ref13$body === void 0 ? null : _ref13$body;
333
-
334
- var _ref14 = body !== null ? quizAnswersComputed[body] || {} : {},
335
- _ref14$percent = _ref14.percent,
336
- percent = _ref14$percent === void 0 ? 0 : _ref14$percent;
346
+ var _ref13 = answer || {},
347
+ _ref13$label = _ref13.label,
348
+ label = _ref13$label === void 0 ? null : _ref13$label,
349
+ _ref13$buttonStyle = _ref13.buttonStyle,
350
+ answerButtonStyle = _ref13$buttonStyle === void 0 ? null : _ref13$buttonStyle,
351
+ _ref13$textStyle = _ref13.textStyle,
352
+ answerButtonTextStyle = _ref13$textStyle === void 0 ? null : _ref13$textStyle,
353
+ _ref13$resultStyle = _ref13.resultStyle,
354
+ answerResultStyle = _ref13$resultStyle === void 0 ? null : _ref13$resultStyle;
355
+
356
+ var _ref14 = answerResultStyle || {},
357
+ _ref14$barColor = _ref14.barColor,
358
+ answerResultBarColor = _ref14$barColor === void 0 ? null : _ref14$barColor,
359
+ answerResultTextColor = _ref14.textColor,
360
+ _ref14$percentageText = _ref14.percentageTextStyle,
361
+ answerResultPercentageTextStyle = _ref14$percentageText === void 0 ? null : _ref14$percentageText;
337
362
 
338
363
  var _ref15 = label || {},
339
- _ref15$textStyle = _ref15.textStyle,
340
- textStyle = _ref15$textStyle === void 0 ? null : _ref15$textStyle;
364
+ _ref15$body = _ref15.body,
365
+ body = _ref15$body === void 0 ? null : _ref15$body;
341
366
 
342
- var _ref16 = textStyle || {},
343
- _ref16$color = _ref16.color,
344
- labelColor = _ref16$color === void 0 ? null : _ref16$color;
367
+ var _ref16 = body !== null ? quizAnswersComputed[body] || {} : {},
368
+ _ref16$percent = _ref16.percent,
369
+ percent = _ref16$percent === void 0 ? 0 : _ref16$percent;
370
+
371
+ var _ref17 = label || {},
372
+ _ref17$textStyle = _ref17.textStyle,
373
+ textStyle = _ref17$textStyle === void 0 ? null : _ref17$textStyle;
374
+
375
+ var _ref18 = textStyle || {},
376
+ _ref18$color = _ref18.color,
377
+ labelColor = _ref18$color === void 0 ? null : _ref18$color;
345
378
 
346
379
  var hasAnswerLabel = utils.isTextFilled(label);
347
380
  var userAnswer = userAnswerIndex === answerIndex;
@@ -399,7 +432,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
399
432
  opacity: 0
400
433
  })
401
434
  }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({}, label, {
402
- textStyle: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, textStyle), buttonsTextStyle), resultsTextColor), answerResultTextColor), percentageResultTextStyle),
435
+ textStyle: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, textStyle), buttonsTextStyle), resultsTextColor), resultsPercentageTextStyle), answerResultTextColor), answerResultPercentageTextStyle),
403
436
  inline: true,
404
437
  className: styles.resultText,
405
438
  body: "".concat(percent, "%")
@@ -414,56 +447,49 @@ var SurveyScreen = function SurveyScreen(_ref) {
414
447
  opacity: 0
415
448
  })
416
449
  }) : null))))) : null));
417
- })) : null)); // Call to Action
418
-
419
- if (!isPlaceholder && hasCallToAction) {
420
- if (isTopLayout || isMiddleLayout) {
421
- items.push( /*#__PURE__*/React__default["default"].createElement(Layout.Spacer, {
422
- key: "spacer-cta-bottom"
423
- }));
424
- }
425
-
426
- items.push( /*#__PURE__*/React__default["default"].createElement("div", {
427
- style: {
428
- margin: -spacing,
429
- marginTop: 0
430
- },
431
- key: "call-to-action"
432
- }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
433
- callToAction: callToAction,
434
- disabled: !answered,
435
- animationDisabled: isPreview,
436
- focusable: current && isView,
437
- screenSize: {
438
- width: width,
439
- height: height
440
- },
441
- enableInteraction: enableInteraction,
442
- disableInteraction: disableInteraction
443
- })));
444
- }
445
-
450
+ })) : null));
446
451
  return /*#__PURE__*/React__default["default"].createElement("div", {
447
- className: classNames__default["default"]([styles.container, (_ref18 = {}, _defineProperty__default["default"](_ref18, className, className !== null), _defineProperty__default["default"](_ref18, styles.answered, answered), _defineProperty__default["default"](_ref18, styles.withPercentage, !withoutPercentage), _defineProperty__default["default"](_ref18, styles.isPlaceholder, isPlaceholder), _ref18)])
452
+ className: classNames__default["default"]([styles.container, (_ref20 = {}, _defineProperty__default["default"](_ref20, className, className !== null), _defineProperty__default["default"](_ref20, styles.answered, answered), _defineProperty__default["default"](_ref20, styles.withPercentage, !withoutPercentage), _defineProperty__default["default"](_ref20, styles.isPlaceholder, isPlaceholder), _ref20)])
448
453
  }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
449
454
  background: background,
450
455
  width: width,
451
456
  height: height,
452
457
  resolution: resolution,
453
458
  playing: backgroundPlaying,
454
- shouldLoad: mediaShouldLoad
459
+ muted: muted,
460
+ shouldLoad: mediaShouldLoad,
461
+ mediaRef: mediaRef
455
462
  }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
456
463
  width: width,
457
464
  height: height
465
+ }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
466
+ verticalAlign: verticalAlign,
467
+ disabled: scrollingDisabled,
468
+ onScrolledBottom: onScrolledBottom,
469
+ onScrolledNotBottom: onScrolledNotBottom
458
470
  }, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
459
471
  className: styles.layout,
460
- fullscreen: true,
461
472
  verticalAlign: verticalAlign,
462
473
  style: !isPlaceholder ? {
463
474
  padding: spacing,
464
- paddingTop: (menuOverScreen && !isPreview ? menuSize : 0) + spacing
475
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
476
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (callToActionHeight + spacing)
465
477
  } : null
466
- }, items)));
478
+ }, items)), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
479
+ ref: callToActionRef,
480
+ className: classNames__default["default"]([styles.callToAction, _defineProperty__default["default"]({}, styles.disabled, !scrolledBottom)]),
481
+ style: {
482
+ transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
483
+ paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
484
+ paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
485
+ paddingTop: spacing / 2,
486
+ paddingBottom: spacing / 2
487
+ }
488
+ }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
489
+ animationDisabled: isPreview,
490
+ focusable: current && isView,
491
+ openWebView: openWebView
492
+ }))) : null));
467
493
  };
468
494
 
469
495
  SurveyScreen.propTypes = propTypes;
@@ -530,28 +556,6 @@ var definition = {
530
556
  "value": "Answers"
531
557
  }]
532
558
  })
533
- }, {
534
- name: 'withoutPercentage',
535
- type: 'toggle',
536
- defaultValue: false,
537
- label: reactIntl.defineMessage({
538
- id: "crLqJd",
539
- defaultMessage: [{
540
- "type": 0,
541
- "value": "Without percentage"
542
- }]
543
- })
544
- }, {
545
- name: 'withoutBar',
546
- type: 'toggle',
547
- defaultValue: false,
548
- label: reactIntl.defineMessage({
549
- id: "D7kxD3",
550
- defaultMessage: [{
551
- "type": 0,
552
- "value": "Without bar"
553
- }]
554
- })
555
559
  }, {
556
560
  type: 'fields',
557
561
  isList: true,
@@ -563,6 +567,28 @@ var definition = {
563
567
  }]
564
568
  }),
565
569
  fields: [{
570
+ name: 'withoutPercentage',
571
+ type: 'toggle',
572
+ defaultValue: false,
573
+ label: reactIntl.defineMessage({
574
+ id: "crLqJd",
575
+ defaultMessage: [{
576
+ "type": 0,
577
+ "value": "Without percentage"
578
+ }]
579
+ })
580
+ }, {
581
+ name: 'withoutBar',
582
+ type: 'toggle',
583
+ defaultValue: false,
584
+ label: reactIntl.defineMessage({
585
+ id: "D7kxD3",
586
+ defaultMessage: [{
587
+ "type": 0,
588
+ "value": "Without bar"
589
+ }]
590
+ })
591
+ }, {
566
592
  name: 'buttonsStyle',
567
593
  type: 'box-style-form',
568
594
  label: reactIntl.defineMessage({
@@ -584,7 +610,7 @@ var definition = {
584
610
  })
585
611
  }, {
586
612
  name: 'resultsStyle',
587
- type: 'field-with-form',
613
+ type: 'graph-bar-style-form',
588
614
  label: reactIntl.defineMessage({
589
615
  id: "e4UTx9",
590
616
  defaultMessage: [{
@@ -598,19 +624,6 @@ var definition = {
598
624
  "type": 0,
599
625
  "value": "Edit style..."
600
626
  }]
601
- }),
602
- field: {
603
- type: 'graph-bar-style'
604
- }
605
- }, {
606
- name: 'percentageResultTextStyle',
607
- type: 'text-style-form',
608
- label: reactIntl.defineMessage({
609
- id: "4y3gAI",
610
- defaultMessage: [{
611
- "type": 0,
612
- "value": "Result percentage text"
613
- }]
614
627
  })
615
628
  }]
616
629
  }, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-survey",
3
- "version": "0.3.148",
3
+ "version": "0.3.152",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -49,17 +49,17 @@
49
49
  },
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
- "@micromag/core": "^0.3.148",
53
- "@micromag/data": "^0.3.148",
54
- "@micromag/element-background": "^0.3.148",
55
- "@micromag/element-button": "^0.3.148",
56
- "@micromag/element-call-to-action": "^0.3.148",
57
- "@micromag/element-container": "^0.3.148",
58
- "@micromag/element-heading": "^0.3.148",
59
- "@micromag/element-layout": "^0.3.148",
60
- "@micromag/element-scroll": "^0.3.148",
61
- "@micromag/element-text": "^0.3.148",
62
- "@micromag/transforms": "^0.3.148",
52
+ "@micromag/core": "^0.3.152",
53
+ "@micromag/data": "^0.3.152",
54
+ "@micromag/element-background": "^0.3.152",
55
+ "@micromag/element-button": "^0.3.152",
56
+ "@micromag/element-call-to-action": "^0.3.152",
57
+ "@micromag/element-container": "^0.3.152",
58
+ "@micromag/element-heading": "^0.3.152",
59
+ "@micromag/element-layout": "^0.3.152",
60
+ "@micromag/element-scroll": "^0.3.152",
61
+ "@micromag/element-text": "^0.3.152",
62
+ "@micromag/transforms": "^0.3.152",
63
63
  "classnames": "^2.2.6",
64
64
  "lodash": "^4.17.21",
65
65
  "prop-types": "^15.7.2",
@@ -69,5 +69,5 @@
69
69
  "publishConfig": {
70
70
  "access": "public"
71
71
  },
72
- "gitHead": "b10cd7739e7de8595c26acc0e08d6e84220be17c"
72
+ "gitHead": "23db6c104c10cc70a73366c8b04576a312a36206"
73
73
  }