@micromag/screen-urbania-horoscope 0.3.185 → 0.3.190

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 +74 -39
  3. package/lib/index.js +74 -39
  4. package/package.json +14 -14
package/assets/css/styles.css CHANGED
@@ -1,3 +1,3 @@
1
1
  .micromag-screen-urbania-horoscope-sign-card-container{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:90px;height:90px;margin-bottom:5px;padding:5px;border:0;border-radius:10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;background-color:#1d3af2;-webkit-filter:drop-shadow(0 0 6px rgba(0,0,0,.7));filter:drop-shadow(0 0 6px rgba(0,0,0,.7));-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-o-transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67), -webkit-transform .3s cubic-bezier(.41,1.69,.04,.67)}.micromag-screen-urbania-horoscope-sign-card-container:hover{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05);z-index:2}.micromag-screen-urbania-horoscope-sign-card-container:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-urbania-horoscope-sign-card-placeholder{width:30px;height:30px;margin:1px;background-color:#b3b3b3}.micromag-screen-urbania-horoscope-sign-card-thumbnail{max-height:50px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-screen-urbania-horoscope-sign-card-name{width:100%;margin-bottom:.4rem!important;padding:2px 5px 0!important;border-radius:24px;background-color:#fffc00;-webkit-box-shadow:0 0 0 2px rgba(255,250,0,.6);box-shadow:0 0 0 2px rgba(255,250,0,.6);color:#222;font-family:Agrandir Tight,sans-serif;font-size:12px;font-weight:700}.micromag-screen-urbania-horoscope-sign-card-date{color:#fffa00;font-family:Agrandir,sans-serif;font-size:8px}.micromag-screen-urbania-horoscope-sign-card-arrow{display:inline-block;padding-right:5px;padding-bottom:2px;font-size:20px;vertical-align:middle}.micromag-screen-urbania-horoscope-sign-card-emptyText{width:100%;margin-top:5px;padding:10px}
2
2
  .micromag-screen-urbania-horoscope-sign-modal-modalButton{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-screen-urbania-horoscope-sign-modal-container{width:100%;height:100%;overflow:hidden}.micromag-screen-urbania-horoscope-sign-modal-disabled.micromag-screen-urbania-horoscope-sign-modal-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-horoscope-sign-modal-hidden.micromag-screen-urbania-horoscope-sign-modal-container{display:none;visibility:hidden}.micromag-screen-urbania-horoscope-sign-modal-placeholder.micromag-screen-urbania-horoscope-sign-modal-container .micromag-screen-urbania-horoscope-sign-modal-content{position:relative;padding:6px}.micromag-screen-urbania-horoscope-sign-modal-container{position:relative}.micromag-screen-urbania-horoscope-sign-modal-modalButton{-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-o-transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67), -webkit-transform .3s cubic-bezier(.41,1.69,.04,.67)}.micromag-screen-urbania-horoscope-sign-modal-modalButton:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-urbania-horoscope-sign-modal-modal{margin:52px 18px 30px;padding:10px;border-radius:22px;background-color:#0ff;-webkit-box-shadow:0 0 4px #010f66;box-shadow:0 0 4px #010f66;color:#1d3af2}.micromag-screen-urbania-horoscope-sign-modal-name{padding:7px auto 5px;font-family:Agrandir Tight,sans-serif;font-weight:900}.micromag-screen-urbania-horoscope-sign-modal-name,.micromag-screen-urbania-horoscope-sign-modal-wordContainer{text-transform:uppercase}.micromag-screen-urbania-horoscope-sign-modal-wordContainer{margin-bottom:5px;padding:6px 6px 3px;border:1px solid #1d3af2;border-radius:9px}.micromag-screen-urbania-horoscope-sign-modal-wordOfTheWeek{padding-bottom:2px;font-family:Agrandir Tight,sans-serif;font-size:8px;font-weight:500;letter-spacing:.03rem}.micromag-screen-urbania-horoscope-sign-modal-word{font-family:Agrandir Narrow,sans-serif;font-size:16px;font-weight:700}.micromag-screen-urbania-horoscope-sign-modal-description{padding-bottom:5px;font-family:Roboto,sans-serif;font-size:12px;line-height:1.2}.micromag-screen-urbania-horoscope-sign-modal-description p{margin-bottom:1em}.micromag-screen-urbania-horoscope-sign-modal-description p:last-child{margin-bottom:0}.micromag-screen-urbania-horoscope-sign-modal-illustration{width:75%;height:auto;margin:0 auto;pointer-events:none}.micromag-screen-urbania-horoscope-sign-modal-arrow{padding-right:5px;font-size:20px;vertical-align:middle}
3
- .micromag-screen-urbania-horoscope-close{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-screen-urbania-horoscope-backdrop,.micromag-screen-urbania-horoscope-signsGridContainer{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-urbania-horoscope-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-urbania-horoscope-disabled.micromag-screen-urbania-horoscope-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-horoscope-hidden.micromag-screen-urbania-horoscope-container{display:none;visibility:hidden}.micromag-screen-urbania-horoscope-placeholder.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-content{position:relative;padding:6px}.micromag-screen-urbania-horoscope-emptyText,.micromag-screen-urbania-horoscope-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-urbania-horoscope-close:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-screen-urbania-horoscope-container{-ms-touch-action:none;touch-action:none}.micromag-screen-urbania-horoscope-container.micromag-screen-urbania-horoscope-isPlaceholder .micromag-screen-urbania-horoscope-layout{padding:10px}.micromag-screen-urbania-horoscope-layout{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;text-align:center}.micromag-screen-urbania-horoscope-emptyText,.micromag-screen-urbania-horoscope-emptyTitle{width:100%;margin:10px auto}.micromag-screen-urbania-horoscope-emptyTitle{height:100px}.micromag-screen-urbania-horoscope-emptyText{height:50px}.micromag-screen-urbania-horoscope-headerContainer{width:280px}.micromag-screen-urbania-horoscope-title{color:#0ff;font-family:Agrandir Tight,sans-serif;font-size:48px;font-weight:700;letter-spacing:-1px;text-shadow:-3px -3px 0 #000f66;text-transform:uppercase;-webkit-text-stroke:1px #000f66}.micromag-screen-urbania-horoscope-title,.micromag-screen-urbania-horoscope-titleImage{-webkit-filter:drop-shadow(0 0 6px rgba(0,0,0,.7));filter:drop-shadow(0 0 6px rgba(0,0,0,.7))}.micromag-screen-urbania-horoscope-titleImage{width:100%;height:auto}.micromag-screen-urbania-horoscope-titlePlaceholder{padding:10px;background-color:#343434}.micromag-screen-urbania-horoscope-description{margin-bottom:8px;padding:10px;color:#0ff;font-family:Agrandir Tight,sans-serif;font-size:18px;font-weight:700;-webkit-filter:drop-shadow(0 0 3px rgba(0,0,0,.7));filter:drop-shadow(0 0 3px rgba(0,0,0,.7))}.micromag-screen-urbania-horoscope-description p,.micromag-screen-urbania-horoscope-description span{font-weight:700!important}.micromag-screen-urbania-horoscope-descriptionPlaceholder{padding:10px 10px 30px}.micromag-screen-urbania-horoscope-button{padding:8px 15px 4px;border-radius:24px;background-color:#fffc00;-webkit-box-shadow:0 0 0 6px rgba(255,250,0,.6);box-shadow:0 0 0 6px rgba(255,250,0,.6);-webkit-transition:-webkit-box-shadow .2s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-box-shadow .2s cubic-bezier(.41,1.69,.04,.67);-o-transition:box-shadow .2s cubic-bezier(.41,1.69,.04,.67);transition:box-shadow .2s cubic-bezier(.41,1.69,.04,.67);transition:box-shadow .2s cubic-bezier(.41,1.69,.04,.67), -webkit-box-shadow .2s cubic-bezier(.41,1.69,.04,.67)}.micromag-screen-urbania-horoscope-button:hover{-webkit-box-shadow:0 0 0 12px rgba(255,250,0,.6);box-shadow:0 0 0 12px rgba(255,250,0,.6)}.micromag-screen-urbania-horoscope-button:active{-webkit-box-shadow:0 0 0 3px rgba(255,250,0,.3);box-shadow:0 0 0 3px rgba(255,250,0,.3)}.micromag-screen-urbania-horoscope-buttonLabel{color:#000;font-family:Agrandir Tight,sans-serif;font-size:22px;font-weight:700;letter-spacing:.03rem}.micromag-screen-urbania-horoscope-header{position:fixed;z-index:4;width:100%;top:0;left:0;padding:10px;background-image:-webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,.75)),to(rgba(0,0,0,0)));background-image:-o-linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0));background-image:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0))}.micromag-screen-urbania-horoscope-buttons,.micromag-screen-urbania-horoscope-header{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.micromag-screen-urbania-horoscope-buttons{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative}.micromag-screen-urbania-horoscope-close{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin-left:auto;font-weight:700}.micromag-screen-urbania-horoscope-signsGridContainer{-ms-touch-action:none;touch-action:none;z-index:3;padding:2.5rem 1rem}.micromag-screen-urbania-horoscope-signsGridContainer.micromag-screen-urbania-horoscope-isPlaceholder{padding:0}.micromag-screen-urbania-horoscope-signs{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.micromag-screen-urbania-horoscope-author{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 auto;-webkit-filter:drop-shadow(0 0 3px rgba(0,0,0,.7));filter:drop-shadow(0 0 3px rgba(0,0,0,.7))}.micromag-screen-urbania-horoscope-author,.micromag-screen-urbania-horoscope-collaborator{color:#0ff}.micromag-screen-urbania-horoscope-authorBackground{background-color:#161719!important}.micromag-screen-urbania-horoscope-authorBackground p{font-weight:400!important;text-transform:none!important}.micromag-screen-urbania-horoscope-modal{position:fixed;z-index:6;top:0;right:0;left:0;width:100%;height:100%;-ms-touch-action:none;touch-action:none}.micromag-screen-urbania-horoscope-backdrop{z-index:1;background-color:rgba(0,0,0,.75);pointer-events:none;-webkit-backdrop-filter:blur(.5rem);backdrop-filter:blur(.5rem)}
3
+ .micromag-screen-urbania-horoscope-close{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-screen-urbania-horoscope-backdrop,.micromag-screen-urbania-horoscope-signsGridContainer{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-urbania-horoscope-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-urbania-horoscope-disabled.micromag-screen-urbania-horoscope-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-horoscope-hidden.micromag-screen-urbania-horoscope-container{display:none;visibility:hidden}.micromag-screen-urbania-horoscope-placeholder.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-content{position:relative;padding:6px}.micromag-screen-urbania-horoscope-emptyText,.micromag-screen-urbania-horoscope-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-urbania-horoscope-close:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-screen-urbania-horoscope-container{-ms-touch-action:none;touch-action:none}.micromag-screen-urbania-horoscope-container.micromag-screen-urbania-horoscope-isPlaceholder .micromag-screen-urbania-horoscope-layout{padding:10px}.micromag-screen-urbania-horoscope-layout{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;text-align:center}.micromag-screen-urbania-horoscope-emptyText,.micromag-screen-urbania-horoscope-emptyTitle{width:100%;margin:10px auto}.micromag-screen-urbania-horoscope-emptyTitle{height:100px}.micromag-screen-urbania-horoscope-emptyText{height:50px}.micromag-screen-urbania-horoscope-headerContainer{width:280px}.micromag-screen-urbania-horoscope-title{color:#0ff;font-family:Agrandir Tight,sans-serif;font-size:48px;font-weight:700;letter-spacing:-1px;text-shadow:-3px -3px 0 #000f66;text-transform:uppercase;-webkit-text-stroke:1px #000f66}.micromag-screen-urbania-horoscope-title,.micromag-screen-urbania-horoscope-titleImage{-webkit-filter:drop-shadow(0 0 6px rgba(0,0,0,.7));filter:drop-shadow(0 0 6px rgba(0,0,0,.7))}.micromag-screen-urbania-horoscope-titleImage{width:100%;height:auto}.micromag-screen-urbania-horoscope-titlePlaceholder{padding:10px;background-color:#343434}.micromag-screen-urbania-horoscope-description{margin-bottom:8px;padding:10px;color:#0ff;font-family:Agrandir Tight,sans-serif;font-size:18px;font-weight:700;-webkit-filter:drop-shadow(0 0 3px rgba(0,0,0,.7));filter:drop-shadow(0 0 3px rgba(0,0,0,.7))}.micromag-screen-urbania-horoscope-description p,.micromag-screen-urbania-horoscope-description span{font-weight:700!important}.micromag-screen-urbania-horoscope-descriptionPlaceholder{padding:10px 10px 30px}.micromag-screen-urbania-horoscope-button{padding:8px 15px 4px;border-radius:24px;background-color:#fffc00;-webkit-box-shadow:0 0 0 6px rgba(255,250,0,.6);box-shadow:0 0 0 6px rgba(255,250,0,.6);-webkit-transition:-webkit-box-shadow .2s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-box-shadow .2s cubic-bezier(.41,1.69,.04,.67);-o-transition:box-shadow .2s cubic-bezier(.41,1.69,.04,.67);transition:box-shadow .2s cubic-bezier(.41,1.69,.04,.67);transition:box-shadow .2s cubic-bezier(.41,1.69,.04,.67), -webkit-box-shadow .2s cubic-bezier(.41,1.69,.04,.67)}.micromag-screen-urbania-horoscope-button:hover{-webkit-box-shadow:0 0 0 12px rgba(255,250,0,.6);box-shadow:0 0 0 12px rgba(255,250,0,.6)}.micromag-screen-urbania-horoscope-button:active{-webkit-box-shadow:0 0 0 3px rgba(255,250,0,.3);box-shadow:0 0 0 3px rgba(255,250,0,.3)}.micromag-screen-urbania-horoscope-buttonLabel{color:#000;font-family:Agrandir Tight,sans-serif;font-size:22px;font-weight:700;letter-spacing:.03rem}.micromag-screen-urbania-horoscope-header{position:fixed;z-index:4;width:100%;top:0;left:0;padding:10px;background-image:-webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,.75)),to(rgba(0,0,0,0)));background-image:-o-linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0));background-image:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0))}.micromag-screen-urbania-horoscope-buttons,.micromag-screen-urbania-horoscope-header{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.micromag-screen-urbania-horoscope-buttons{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative}.micromag-screen-urbania-horoscope-close{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin-left:auto;font-weight:700}.micromag-screen-urbania-horoscope-signsGridContainer{-ms-touch-action:none;touch-action:none;z-index:3;padding:2.5rem 1rem}.micromag-screen-urbania-horoscope-signsGridContainer.micromag-screen-urbania-horoscope-isPlaceholder{padding:0}.micromag-screen-urbania-horoscope-signs{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.micromag-screen-urbania-horoscope-author{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 auto;-webkit-filter:drop-shadow(0 0 3px rgba(0,0,0,.7));filter:drop-shadow(0 0 3px rgba(0,0,0,.7))}.micromag-screen-urbania-horoscope-author,.micromag-screen-urbania-horoscope-collaborator{color:#0ff}.micromag-screen-urbania-horoscope-authorBackground{background-color:#161719!important}.micromag-screen-urbania-horoscope-authorBackground p{font-weight:400!important;text-transform:none!important}.micromag-screen-urbania-horoscope-modal{position:fixed;z-index:6;top:0;right:0;left:0;width:100%;height:100%;-ms-touch-action:none;touch-action:none}.micromag-screen-urbania-horoscope-backdrop{z-index:1;background-color:rgba(0,0,0,.75);pointer-events:none}
package/es/index.js CHANGED
@@ -464,6 +464,22 @@ var stopDragEventsPropagation = {
464
464
  return e.stopPropagation();
465
465
  }
466
466
  };
467
+
468
+ var mouseBlocker = _objectSpread(_objectSpread({}, stopDragEventsPropagation), {}, {
469
+ onClick: function onClick(e) {
470
+ return e.stopPropagation();
471
+ },
472
+ style: {
473
+ position: 'fixed',
474
+ zIndex: '1000',
475
+ top: 0,
476
+ right: 0,
477
+ bottom: 0,
478
+ left: 0,
479
+ cursor: 'default'
480
+ }
481
+ });
482
+
467
483
  var propTypes = {
468
484
  defaultSigns: PropTypes.arrayOf(PropTypes.shape({
469
485
  id: PropTypes.string,
@@ -506,7 +522,7 @@ var defaultProps = {
506
522
  };
507
523
 
508
524
  var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
509
- var _ref5;
525
+ var _ref7;
510
526
 
511
527
  var defaultSigns = _ref.defaultSigns,
512
528
  signsValue = _ref.signs,
@@ -516,9 +532,9 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
516
532
  button = _ref.button,
517
533
  signSubtitle = _ref.signSubtitle,
518
534
  spacing = _ref.spacing,
519
- background = _ref.background;
520
- _ref.popupBackground;
521
- var current = _ref.current,
535
+ background = _ref.background,
536
+ popupBackground = _ref.popupBackground,
537
+ current = _ref.current,
522
538
  active = _ref.active,
523
539
  type = _ref.type,
524
540
  className = _ref.className;
@@ -579,6 +595,14 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
579
595
  showModal = _useState6[0],
580
596
  setShowModal = _useState6[1];
581
597
 
598
+ var _ref3 = popupBackground || {},
599
+ _ref3$video = _ref3.video,
600
+ video = _ref3$video === void 0 ? null : _ref3$video;
601
+
602
+ var _ref4 = video || {},
603
+ _ref4$url = _ref4.url,
604
+ popupBackgroundUrl = _ref4$url === void 0 ? null : _ref4$url;
605
+
582
606
  var onOpenSignsGrid = useCallback(function () {
583
607
  setShowSignsGrid(true);
584
608
  disableInteraction();
@@ -604,12 +628,12 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
604
628
  setShowModal(0);
605
629
  trackScreenEvent('UrbaniaHoroscope', 'close_sign_modal');
606
630
  }, [setShowModal, trackScreenEvent]);
607
- var computeSignsGridProgress = useCallback(function (_ref3) {
608
- var dragActive = _ref3.active,
609
- _ref3$movement = _slicedToArray(_ref3.movement, 2),
610
- my = _ref3$movement[1],
611
- _ref3$velocity = _slicedToArray(_ref3.velocity, 2),
612
- vy = _ref3$velocity[1];
631
+ var computeSignsGridProgress = useCallback(function (_ref5) {
632
+ var dragActive = _ref5.active,
633
+ _ref5$movement = _slicedToArray(_ref5.movement, 2),
634
+ my = _ref5$movement[1],
635
+ _ref5$velocity = _slicedToArray(_ref5.velocity, 2),
636
+ vy = _ref5$velocity[1];
613
637
 
614
638
  var progress = Math.max(0, my) / (window.innerHeight * 0.8);
615
639
  var reachedThreshold = vy > 0.3 || Math.abs(progress) > 0.3;
@@ -639,12 +663,12 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
639
663
  bindSignsDrag = _useDragProgress.bind,
640
664
  showSignsGridProgress = _useDragProgress.progress;
641
665
 
642
- var computeModalProgress = useCallback(function (_ref4) {
643
- var dragActive = _ref4.active,
644
- _ref4$movement = _slicedToArray(_ref4.movement, 2),
645
- my = _ref4$movement[1],
646
- _ref4$velocity = _slicedToArray(_ref4.velocity, 2),
647
- vy = _ref4$velocity[1];
666
+ var computeModalProgress = useCallback(function (_ref6) {
667
+ var dragActive = _ref6.active,
668
+ _ref6$movement = _slicedToArray(_ref6.movement, 2),
669
+ my = _ref6$movement[1],
670
+ _ref6$velocity = _slicedToArray(_ref6.velocity, 2),
671
+ vy = _ref6$velocity[1];
648
672
 
649
673
  var damper = 0.5;
650
674
  var p = Math.max(0, my) / window.innerHeight;
@@ -739,27 +763,30 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
739
763
  setShowModal(1);
740
764
  setSelectedSign(signs[index]);
741
765
  }
742
- }, [screenState]); // @todo implement escape to close modal (maybe in "swipe to close" hook, so that pressing escape always closes it)
743
- // const keyboardShortcuts = useMemo(
744
- // () => ({
745
- // escape: () => {
746
- // if (showModal) {
747
- // return onCloseModal();
748
- // }
749
- // if (showSignsGrid) {
750
- // return onCloseSignsGrid();
751
- // }
752
- // return null;
753
- // }
754
- // }),
755
- // [showModal, onCloseModal, showSignsGrid, onCloseSignsGrid],
756
- // );
757
- // useKeyboardShortcuts(keyboardShortcuts);
766
+ }, [screenState]);
767
+ useEffect(function () {
768
+ var keyup = function keyup(e) {
769
+ if (e.key === 'Escape') {
770
+ if (showModal) {
771
+ onCloseModal();
772
+ return;
773
+ }
774
+
775
+ if (showSignsGrid) {
776
+ onCloseSignsGrid();
777
+ }
778
+ }
779
+ };
758
780
 
781
+ document.addEventListener('keyup', keyup);
782
+ return function () {
783
+ document.removeEventListener('keyup', keyup);
784
+ };
785
+ }, [showModal, onCloseModal, showSignsGrid, onCloseSignsGrid]);
759
786
  return /*#__PURE__*/React.createElement("div", Object.assign({
760
- className: classNames([styles.container, (_ref5 = {}, _defineProperty(_ref5, className, className !== null), _defineProperty(_ref5, styles.isPlaceholder, isPlaceholder), _ref5)]),
787
+ className: classNames([styles.container, (_ref7 = {}, _defineProperty(_ref7, className, className !== null), _defineProperty(_ref7, styles.isPlaceholder, isPlaceholder), _ref7)]),
761
788
  "data-screen-ready": true
762
- }, showSignsGrid ? stopDragEventsPropagation : null), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
789
+ }, showSignsGrid ? stopDragEventsPropagation : null), !isView ? /*#__PURE__*/React.createElement("div", mouseBlocker) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
763
790
  background: background,
764
791
  width: width,
765
792
  height: height,
@@ -822,7 +849,7 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
822
849
  className: styles.buttonLabel
823
850
  }, button, {
824
851
  inline: true
825
- }))) : null), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
852
+ }))) : null), isView && !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
826
853
  className: styles.header,
827
854
  style: getSignsContainerStyles(showSignsGridProgress)
828
855
  }, /*#__PURE__*/React.createElement("div", {
@@ -855,9 +882,9 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
855
882
  }, bindSignsDrag()), /*#__PURE__*/React.createElement("div", {
856
883
  className: styles.signs
857
884
  }, signs.map(function (sign, i) {
858
- var _ref6 = sign || {},
859
- _ref6$id = _ref6.id,
860
- id = _ref6$id === void 0 ? null : _ref6$id;
885
+ var _ref8 = sign || {},
886
+ _ref8$id = _ref8.id,
887
+ id = _ref8$id === void 0 ? null : _ref8$id;
861
888
 
862
889
  return /*#__PURE__*/React.createElement("div", {
863
890
  key: id,
@@ -900,7 +927,15 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
900
927
  })), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
901
928
  className: styles.backdrop,
902
929
  style: getBackdropStyles(showSignsGridProgress)
903
- }) : null)));
930
+ }, popupBackgroundUrl !== null ? /*#__PURE__*/React.createElement("video", {
931
+ className: styles.videoBackdrop,
932
+ autoPlay: true,
933
+ muted: true,
934
+ loop: true
935
+ }, /*#__PURE__*/React.createElement("source", {
936
+ src: popupBackgroundUrl,
937
+ type: "video/mp4"
938
+ })) : null) : null)));
904
939
  };
905
940
 
906
941
  UrbaniaHoroscope.propTypes = propTypes;
package/lib/index.js CHANGED
@@ -509,6 +509,22 @@ var stopDragEventsPropagation = {
509
509
  return e.stopPropagation();
510
510
  }
511
511
  };
512
+
513
+ var mouseBlocker = _objectSpread__default["default"](_objectSpread__default["default"]({}, stopDragEventsPropagation), {}, {
514
+ onClick: function onClick(e) {
515
+ return e.stopPropagation();
516
+ },
517
+ style: {
518
+ position: 'fixed',
519
+ zIndex: '1000',
520
+ top: 0,
521
+ right: 0,
522
+ bottom: 0,
523
+ left: 0,
524
+ cursor: 'default'
525
+ }
526
+ });
527
+
512
528
  var propTypes = {
513
529
  defaultSigns: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
514
530
  id: PropTypes__default["default"].string,
@@ -551,7 +567,7 @@ var defaultProps = {
551
567
  };
552
568
 
553
569
  var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
554
- var _ref5;
570
+ var _ref7;
555
571
 
556
572
  var defaultSigns = _ref.defaultSigns,
557
573
  signsValue = _ref.signs,
@@ -561,9 +577,9 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
561
577
  button = _ref.button,
562
578
  signSubtitle = _ref.signSubtitle,
563
579
  spacing = _ref.spacing,
564
- background = _ref.background;
565
- _ref.popupBackground;
566
- var current = _ref.current,
580
+ background = _ref.background,
581
+ popupBackground = _ref.popupBackground,
582
+ current = _ref.current,
567
583
  active = _ref.active,
568
584
  type = _ref.type,
569
585
  className = _ref.className;
@@ -624,6 +640,14 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
624
640
  showModal = _useState6[0],
625
641
  setShowModal = _useState6[1];
626
642
 
643
+ var _ref3 = popupBackground || {},
644
+ _ref3$video = _ref3.video,
645
+ video = _ref3$video === void 0 ? null : _ref3$video;
646
+
647
+ var _ref4 = video || {},
648
+ _ref4$url = _ref4.url,
649
+ popupBackgroundUrl = _ref4$url === void 0 ? null : _ref4$url;
650
+
627
651
  var onOpenSignsGrid = React.useCallback(function () {
628
652
  setShowSignsGrid(true);
629
653
  disableInteraction();
@@ -649,12 +673,12 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
649
673
  setShowModal(0);
650
674
  trackScreenEvent('UrbaniaHoroscope', 'close_sign_modal');
651
675
  }, [setShowModal, trackScreenEvent]);
652
- var computeSignsGridProgress = React.useCallback(function (_ref3) {
653
- var dragActive = _ref3.active,
654
- _ref3$movement = _slicedToArray__default["default"](_ref3.movement, 2),
655
- my = _ref3$movement[1],
656
- _ref3$velocity = _slicedToArray__default["default"](_ref3.velocity, 2),
657
- vy = _ref3$velocity[1];
676
+ var computeSignsGridProgress = React.useCallback(function (_ref5) {
677
+ var dragActive = _ref5.active,
678
+ _ref5$movement = _slicedToArray__default["default"](_ref5.movement, 2),
679
+ my = _ref5$movement[1],
680
+ _ref5$velocity = _slicedToArray__default["default"](_ref5.velocity, 2),
681
+ vy = _ref5$velocity[1];
658
682
 
659
683
  var progress = Math.max(0, my) / (window.innerHeight * 0.8);
660
684
  var reachedThreshold = vy > 0.3 || Math.abs(progress) > 0.3;
@@ -684,12 +708,12 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
684
708
  bindSignsDrag = _useDragProgress.bind,
685
709
  showSignsGridProgress = _useDragProgress.progress;
686
710
 
687
- var computeModalProgress = React.useCallback(function (_ref4) {
688
- var dragActive = _ref4.active,
689
- _ref4$movement = _slicedToArray__default["default"](_ref4.movement, 2),
690
- my = _ref4$movement[1],
691
- _ref4$velocity = _slicedToArray__default["default"](_ref4.velocity, 2),
692
- vy = _ref4$velocity[1];
711
+ var computeModalProgress = React.useCallback(function (_ref6) {
712
+ var dragActive = _ref6.active,
713
+ _ref6$movement = _slicedToArray__default["default"](_ref6.movement, 2),
714
+ my = _ref6$movement[1],
715
+ _ref6$velocity = _slicedToArray__default["default"](_ref6.velocity, 2),
716
+ vy = _ref6$velocity[1];
693
717
 
694
718
  var damper = 0.5;
695
719
  var p = Math.max(0, my) / window.innerHeight;
@@ -784,27 +808,30 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
784
808
  setShowModal(1);
785
809
  setSelectedSign(signs[index]);
786
810
  }
787
- }, [screenState]); // @todo implement escape to close modal (maybe in "swipe to close" hook, so that pressing escape always closes it)
788
- // const keyboardShortcuts = useMemo(
789
- // () => ({
790
- // escape: () => {
791
- // if (showModal) {
792
- // return onCloseModal();
793
- // }
794
- // if (showSignsGrid) {
795
- // return onCloseSignsGrid();
796
- // }
797
- // return null;
798
- // }
799
- // }),
800
- // [showModal, onCloseModal, showSignsGrid, onCloseSignsGrid],
801
- // );
802
- // useKeyboardShortcuts(keyboardShortcuts);
811
+ }, [screenState]);
812
+ React.useEffect(function () {
813
+ var keyup = function keyup(e) {
814
+ if (e.key === 'Escape') {
815
+ if (showModal) {
816
+ onCloseModal();
817
+ return;
818
+ }
819
+
820
+ if (showSignsGrid) {
821
+ onCloseSignsGrid();
822
+ }
823
+ }
824
+ };
803
825
 
826
+ document.addEventListener('keyup', keyup);
827
+ return function () {
828
+ document.removeEventListener('keyup', keyup);
829
+ };
830
+ }, [showModal, onCloseModal, showSignsGrid, onCloseSignsGrid]);
804
831
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
805
- className: classNames__default["default"]([styles.container, (_ref5 = {}, _defineProperty__default["default"](_ref5, className, className !== null), _defineProperty__default["default"](_ref5, styles.isPlaceholder, isPlaceholder), _ref5)]),
832
+ className: classNames__default["default"]([styles.container, (_ref7 = {}, _defineProperty__default["default"](_ref7, className, className !== null), _defineProperty__default["default"](_ref7, styles.isPlaceholder, isPlaceholder), _ref7)]),
806
833
  "data-screen-ready": true
807
- }, showSignsGrid ? stopDragEventsPropagation : null), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
834
+ }, showSignsGrid ? stopDragEventsPropagation : null), !isView ? /*#__PURE__*/React__default["default"].createElement("div", mouseBlocker) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
808
835
  background: background,
809
836
  width: width,
810
837
  height: height,
@@ -867,7 +894,7 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
867
894
  className: styles.buttonLabel
868
895
  }, button, {
869
896
  inline: true
870
- }))) : null), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
897
+ }))) : null), isView && !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
871
898
  className: styles.header,
872
899
  style: getSignsContainerStyles(showSignsGridProgress)
873
900
  }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -900,9 +927,9 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
900
927
  }, bindSignsDrag()), /*#__PURE__*/React__default["default"].createElement("div", {
901
928
  className: styles.signs
902
929
  }, signs.map(function (sign, i) {
903
- var _ref6 = sign || {},
904
- _ref6$id = _ref6.id,
905
- id = _ref6$id === void 0 ? null : _ref6$id;
930
+ var _ref8 = sign || {},
931
+ _ref8$id = _ref8.id,
932
+ id = _ref8$id === void 0 ? null : _ref8$id;
906
933
 
907
934
  return /*#__PURE__*/React__default["default"].createElement("div", {
908
935
  key: id,
@@ -945,7 +972,15 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
945
972
  })), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
946
973
  className: styles.backdrop,
947
974
  style: getBackdropStyles(showSignsGridProgress)
948
- }) : null)));
975
+ }, popupBackgroundUrl !== null ? /*#__PURE__*/React__default["default"].createElement("video", {
976
+ className: styles.videoBackdrop,
977
+ autoPlay: true,
978
+ muted: true,
979
+ loop: true
980
+ }, /*#__PURE__*/React__default["default"].createElement("source", {
981
+ src: popupBackgroundUrl,
982
+ type: "video/mp4"
983
+ })) : null) : null)));
949
984
  };
950
985
 
951
986
  UrbaniaHoroscope.propTypes = propTypes;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-urbania-horoscope",
3
- "version": "0.3.185",
3
+ "version": "0.3.190",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -50,18 +50,18 @@
50
50
  },
51
51
  "dependencies": {
52
52
  "@babel/runtime": "^7.13.10",
53
- "@micromag/core": "^0.3.184",
54
- "@micromag/element-background": "^0.3.184",
55
- "@micromag/element-button": "^0.3.184",
56
- "@micromag/element-call-to-action": "^0.3.184",
57
- "@micromag/element-container": "^0.3.184",
58
- "@micromag/element-grid": "^0.3.184",
59
- "@micromag/element-heading": "^0.3.184",
60
- "@micromag/element-layout": "^0.3.184",
61
- "@micromag/element-scroll": "^0.3.185",
62
- "@micromag/element-text": "^0.3.184",
63
- "@micromag/element-urbania-author": "^0.3.184",
64
- "@micromag/transforms": "^0.3.184",
53
+ "@micromag/core": "^0.3.190",
54
+ "@micromag/element-background": "^0.3.190",
55
+ "@micromag/element-button": "^0.3.190",
56
+ "@micromag/element-call-to-action": "^0.3.190",
57
+ "@micromag/element-container": "^0.3.190",
58
+ "@micromag/element-grid": "^0.3.190",
59
+ "@micromag/element-heading": "^0.3.190",
60
+ "@micromag/element-layout": "^0.3.190",
61
+ "@micromag/element-scroll": "^0.3.190",
62
+ "@micromag/element-text": "^0.3.190",
63
+ "@micromag/element-urbania-author": "^0.3.190",
64
+ "@micromag/transforms": "^0.3.190",
65
65
  "@react-spring/core": "^9.1.1",
66
66
  "@react-spring/web": "^9.1.1",
67
67
  "@use-gesture/react": "^10.2.4",
@@ -75,5 +75,5 @@
75
75
  "publishConfig": {
76
76
  "access": "public"
77
77
  },
78
- "gitHead": "e4f75d1c7b2f6339a24d8f77784fd1d281a9994c"
78
+ "gitHead": "36be7dcf459e109654b406147cc723a52cb784cd"
79
79
  }