@mjhls/mjh-framework 1.0.1066 → 1.0.1067-iframe-test

package/dist/esm/getSerializers.js

@@ -1,5 +1,5 @@
 import 'react';
-export { g as default } from './index-1fd45cc5.js';
+export { g as default } from './index-30b512d6.js';
 import './BlockContent-1e73bd2c.js';
 import './entities-6d9154b4.js';
 import './slicedToArray-6ebcbfea.js';
@@ -10,7 +10,8 @@ import 'react-bootstrap';
 import './urlFor.js';
 import './extends-1559c147.js';
 import './index-3f5c03b2.js';
-import './index-5cc7b406.js';
+import './index-f0fc23eb.js';
+import './events-6c3a7a63.js';
 import 'prop-types';
 import 'next/router';
 import './index-c7e2ac95.js';
@@ -21,7 +22,7 @@ import './_library-528f1934.js';
 import './_set-species-2cd9340f.js';
 import './_iter-detect-98db3b07.js';
 import './Segment.js';
-import './main-754d4992.js';
+import './main-f97773b2.js';
 import './urlForFile-f6485737.js';
 import './index-755f2cc2.js';
 import 'react-dom';

package/dist/esm/{index-1fd45cc5.js → index-30b512d6.js}

@@ -1,15 +1,15 @@
 import React__default, { useState, useEffect, useRef, useLayoutEffect, useCallback } from 'react';
 import { _ as _slicedToArray, a as _getIterator } from './slicedToArray-6ebcbfea.js';
-import { Carousel, Table, Figure as Figure$1, Card, Row, Col, Button as Button$1, ProgressBar } from 'react-bootstrap';
+import { Carousel, Table, Figure, Card, Row, Col, Button as Button$1, ProgressBar } from 'react-bootstrap';
 import urlFor from './urlFor.js';
-import { l as lib_3 } from './index-5cc7b406.js';
+import { l as lib_3 } from './index-f0fc23eb.js';
 import Router, { useRouter } from 'next/router';
 import { g as getYoutubeId } from './index-c7e2ac95.js';
 import PropTypes from 'prop-types';
 import { c as createCommonjsModule, u as unwrapExports } from './_commonjsHelpers-0c4b6f40.js';
 import './Beam.js';
 import Segment from './Segment.js';
-import { f as main_18, b as main_42, m as main_43 } from './main-754d4992.js';
+import { f as main_18, b as main_42, m as main_43 } from './main-f97773b2.js';
 import { B as BlockContent } from './BlockContent-1e73bd2c.js';
 import { _ as _extends, b as _extends$1 } from './extends-1559c147.js';
 import { u as urlForFile } from './urlForFile-f6485737.js';
@@ -37,7 +37,7 @@ import Col$1 from 'react-bootstrap/Col';
 import Head from 'next/head';
 import { _ as _inherits$1, a as _classCallCheck$1, b as _possibleConstructorReturn$1, c as _Object$getPrototypeOf, d as _createClass$1, e as classCallCheck, p as possibleConstructorReturn, i as inherits$2 } from './inherits-d21b4ef9.js';
 import { c as IoIosArrowDropupCircle } from './index.esm-eb1e8e80.js';
-import Figure$2 from 'react-bootstrap/Figure';
+import Figure$1 from 'react-bootstrap/Figure';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Tooltip from 'react-bootstrap/Tooltip';
 import Popover from 'react-bootstrap/Popover';
@@ -2745,7 +2745,7 @@ var Media = function Media(_ref) {
     };
 
     return React__default.createElement(
-      Figure$1,
+      Figure,
       { className: 'd-block ' + className, style: figureStyle },
       React__default.createElement(
         'a',
@@ -2763,7 +2763,7 @@ var Media = function Media(_ref) {
           )
         ),
         caption && React__default.createElement(
-          Figure$1.Caption,
+          Figure.Caption,
           { className: 'media-caption' },
           caption
         )
@@ -2787,14 +2787,32 @@ var Media = function Media(_ref) {
 var IFrame = function IFrame(_ref) {
   var url = _ref.url,
       _ref$needSegmentSuppo = _ref.needSegmentSupport,
-      needSegmentSupport = _ref$needSegmentSuppo === undefined ? false : _ref$needSegmentSuppo;
+      needSegmentSupport = _ref$needSegmentSuppo === undefined ? false : _ref$needSegmentSuppo,
+      node = _ref.node;
 
+  console.log('node', node);
   url = Segment.getURL(url, { needSegmentSupport: needSegmentSupport });
+  // if (node.height) return null
+  // else {
   return React__default.createElement(
     'div',
-    { className: 'd-block text-center mb-3' },
-    React__default.createElement('iframe', { className: 'w-100 iFrame-block', src: url, allowFullScreen: true, webkitallowfullscreen: 'true', mozallowfullscreen: 'true', frameBorder: '0' })
+    null,
+    node.height ? React__default.createElement(
+      'div',
+      null,
+      React__default.createElement('iframe', { id: 'iframe-block', className: 'w-100 iFrame-block', src: url, allowFullScreen: true, webkitallowfullscreen: 'true', mozallowfullscreen: 'true', frameBorder: '0' })
+    ) : React__default.createElement(
+      'div',
+      { className: 'd-block text-center mb-3' },
+      React__default.createElement('iframe', { className: 'w-100 iFrame-block', src: url, allowFullScreen: true, webkitallowfullscreen: 'true', mozallowfullscreen: 'true', frameBorder: '0' })
+    ),
+    React__default.createElement(
+      'style',
+      { jsx: 'true' },
+      '\n      #iframe-block {\n        height: ' + node.height + ' !important;\n      }\n      '
+    )
   );
+  // }
 };
 
 // https://github.com/tc39/proposal-object-values-entries
@@ -10070,17 +10088,11 @@ var LightBox = function LightBox(_ref) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        /*Eliminates padding, centers the thumbnail */\n\n        /* Styles the lightbox, removes it from sight and adds the fade-in transition */\n\n        .lightbox-target {\n          position: fixed;\n          top: -100%;\n          width: 100%;\n          background: rgba(0, 0, 0, 0.7);\n          width: 100%;\n          opacity: 0;\n          -webkit-transition: opacity 0.5s ease-in-out;\n          -moz-transition: opacity 0.5s ease-in-out;\n          -o-transition: opacity 0.5s ease-in-out;\n          transition: opacity 0.5s ease-in-out;\n          overflow: hidden;\n        }\n\n        .lightbox-target.close {\n          opacity: 0;\n        }\n\n        /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */\n\n        .lightbox-target img {\n          margin: auto;\n          position: absolute;\n          top: 0;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          max-height: 0%;\n          max-width: 0%;\n          border: 3px solid white;\n          box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);\n          box-sizing: border-box;\n          -webkit-transition: 0.5s ease-in-out;\n          -moz-transition: 0.5s ease-in-out;\n          -o-transition: 0.5s ease-in-out;\n          transition: 0.5s ease-in-out;\n        }\n\n        /* Styles the close link, adds the slide down transition */\n\n        a.lightbox-close {\n          display: block;\n          width: 50px;\n          height: 50px;\n          box-sizing: border-box;\n          background: white;\n          color: black;\n          text-decoration: none;\n          position: absolute;\n          top: -80px;\n          right: 0;\n          -webkit-transition: 0.5s ease-in-out;\n          -moz-transition: 0.5s ease-in-out;\n          -o-transition: 0.5s ease-in-out;\n          transition: 0.5s ease-in-out;\n        }\n\n        /* Provides part of the "X" to eliminate an image from the close link */\n\n        a.lightbox-close:before {\n          content: \'\';\n          display: block;\n          height: 30px;\n          width: 1px;\n          background: black;\n          position: absolute;\n          left: 26px;\n          top: 10px;\n          -webkit-transform: rotate(45deg);\n          -moz-transform: rotate(45deg);\n          -o-transform: rotate(45deg);\n          transform: rotate(45deg);\n        }\n\n        /* Provides part of the "X" to eliminate an image from the close link */\n\n        a.lightbox-close:after {\n          content: \'\';\n          display: block;\n          height: 30px;\n          width: 1px;\n          background: black;\n          position: absolute;\n          left: 26px;\n          top: 10px;\n          -webkit-transform: rotate(-45deg);\n          -moz-transform: rotate(-45deg);\n          -o-transform: rotate(-45deg);\n          transform: rotate(-45deg);\n        }\n\n        /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */\n\n        .lightbox-target.open {\n          opacity: 1;\n          top: 0;\n          bottom: 0;\n          right: 0;\n          z-index: 3000000;\n        }\n\n        .lightbox-target.open img {\n          max-height: 100%;\n          max-width: 100%;\n        }\n\n        .lightbox-target.open a.lightbox-close {\n          top: 0px;\n        }\n      '
+      '\n        /*Eliminates padding, centers the thumbnail */\n\n        /* Styles the lightbox, removes it from sight and adds the fade-in transition */\n\n        .lightbox-target {\n          position: fixed;\n          top: -100%;\n          width: 100%;\n          background: rgba(0, 0, 0, 0.7);\n          width: 100%;\n          opacity: 0;\n          -webkit-transition: opacity 0.5s ease-in-out;\n          -moz-transition: opacity 0.5s ease-in-out;\n          -o-transition: opacity 0.5s ease-in-out;\n          transition: opacity 0.5s ease-in-out;\n          overflow: hidden;\n        }\n\n        .lightbox-target.close {\n          opacity: 0;\n        }\n\n        /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */\n\n        .lightbox-target img {\n          margin: auto;\n          position: absolute;\n          top: 0;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          max-height: 0%;\n          max-width: 0%;\n          border: 3px solid white;\n          box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);\n          box-sizing: border-box;\n          -webkit-transition: 0.5s ease-in-out;\n          -moz-transition: 0.5s ease-in-out;\n          -o-transition: 0.5s ease-in-out;\n          transition: 0.5s ease-in-out;\n        }\n\n        /* Styles the close link, adds the slide down transition */\n\n        // a.lightbox-close {\n        //   display: block;\n        //   width: 50px;\n        //   height: 50px;\n        //   box-sizing: border-box;\n        //   background: white;\n        //   color: black;\n        //   text-decoration: none;\n        //   position: absolute;\n        //   top: -80px;\n        //   right: 0;\n        //   -webkit-transition: 0.5s ease-in-out;\n        //   -moz-transition: 0.5s ease-in-out;\n        //   -o-transition: 0.5s ease-in-out;\n        //   transition: 0.5s ease-in-out;\n        // }\n\n        /* Provides part of the "X" to eliminate an image from the close link */\n\n        // a.lightbox-close:before {\n        //   content: \'\';\n        //   display: block;\n        //   height: 30px;\n        //   width: 1px;\n        //   background: black;\n        //   position: absolute;\n        //   left: 26px;\n        //   top: 10px;\n        //   -webkit-transform: rotate(45deg);\n        //   -moz-transform: rotate(45deg);\n        //   -o-transform: rotate(45deg);\n        //   transform: rotate(45deg);\n        // }\n\n        /* Provides part of the "X" to eliminate an image from the close link */\n\n        // a.lightbox-close:after {\n        //   content: \'\';\n        //   display: block;\n        //   height: 30px;\n        //   width: 1px;\n        //   background: black;\n        //   position: absolute;\n        //   left: 26px;\n        //   top: 10px;\n        //   -webkit-transform: rotate(-45deg);\n        //   -moz-transform: rotate(-45deg);\n        //   -o-transform: rotate(-45deg);\n        //   transform: rotate(-45deg);\n        // }\n\n        /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */\n\n        .lightbox-target.open {\n          opacity: 1;\n          top: 0;\n          bottom: 0;\n          right: 0;\n          z-index: 3000000;\n        }\n\n        .lightbox-target.open img {\n          max-height: 100%;\n          max-width: 100%;\n        }\n\n        .lightbox-target.open a.lightbox-close {\n          top: 0px;\n        }\n      '
     )
   );
 };
 
-var compareProps = function compareProps(prevProps, nextProps) {
-  if (nextProps.node.asset && nextProps.node.asset._ref) {
-    return prevProps.node.asset._ref === nextProps.node.asset._ref;
-  }
-};
-
 var FigureImage$1 = React__default.memo(function (_ref2) {
   var node = _ref2.node,
       client = _ref2.client,
@@ -10109,6 +10121,8 @@ var FigureImage$1 = React__default.memo(function (_ref2) {
 });
 
 var FigureComponent = function FigureComponent(props) {
+  console.log('props in Figure Component', props);
+
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       showLightbox = _useState2[0],
@@ -10120,7 +10134,7 @@ var FigureComponent = function FigureComponent(props) {
       setLightboxImgSrc = _useState4[1];
 
   if (typeof window === 'undefined') return null;
-
+  console.log('props in FigureComp', props);
   var node = props.node,
       client = props.client,
       getSerializers = props.getSerializers;
@@ -10177,6 +10191,8 @@ var FigureComponent = function FigureComponent(props) {
         link = _ref3.link,
         handleClickFigure = _ref3.handleClickFigure;
 
+    console.log('node in FImage', node);
+
     var figureImageStyle = link ? { maxWidth: '100%' } : { maxWidth: '100%', cursor: 'pointer', width: 'auto' };
     var triggerAction = main_42 ? 'click' : 'hover';
     var placementLocation = main_42 ? 'top' : infoBox[0].alignment ? infoBox[0].alignment : 'right';
@@ -10279,7 +10295,7 @@ var FigureComponent = function FigureComponent(props) {
     React__default.Fragment,
     null,
     infoBox.length >= 1 ? React__default.createElement(
-      Figure$2,
+      Figure$1,
       { className: '' + class_name, style: figureStyle },
       link ? React__default.createElement(
         'a',
@@ -10302,7 +10318,7 @@ var FigureComponent = function FigureComponent(props) {
         }
       })
     ) : React__default.createElement(
-      Figure$2,
+      Figure$1,
       { className: '' + class_name, style: figureStyle },
       link ? React__default.createElement(
         'a',
@@ -10333,8 +10349,6 @@ var FigureComponent = function FigureComponent(props) {
   );
 };
 
-var Figure = React__default.memo(FigureComponent, compareProps);
-
 function useOutsideAlerter(ref, container, setOpenImg, setOpenImgSrc) {
   useEffect(function () {
     function handleClickOutside(event) {
@@ -11191,7 +11205,7 @@ var getSerializers = function getSerializers() {
       figure: function figure(_ref4) {
         var node = _ref4.node;
 
-        return React__default.createElement(Figure, { node: node, client: client, contextualADFlag: contextualADFlag, getSerializers: getSerializers.apply(undefined, props) });
+        return React__default.createElement(FigureComponent, { node: node, client: client, contextualADFlag: contextualADFlag, getSerializers: getSerializers.apply(undefined, props) });
       },
       multifigure: function multifigure(_ref5) {
         var node = _ref5.node;
@@ -11225,7 +11239,7 @@ var getSerializers = function getSerializers() {
       iframe: function iframe(_ref10) {
         var node = _ref10.node;
 
-        return React__default.createElement(IFrame, { url: node.url, needSegmentSupport: node.needSegmentSupport });
+        return React__default.createElement(IFrame, { url: node.url, node: node, needSegmentSupport: node.needSegmentSupport });
       },
       video: function video(_ref11) {
         var node = _ref11.node;