@mjhls/mjh-framework 1.0.194 → 1.0.196
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.
- package/README.md +1 -1
- package/dist/index.es.js +133 -97
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +132 -96
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
package/dist/index.es.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import React__default, { Component, useState, useEffect, useRef,
|
|
1
|
+
import React__default, { Component, useState, useEffect, useRef, createContext, createElement } from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
|
-
import
|
|
3
|
+
import require$$1 from 'react-dom';
|
|
4
4
|
import Container from 'react-bootstrap/Container';
|
|
5
5
|
import Row from 'react-bootstrap/Row';
|
|
6
6
|
import Col from 'react-bootstrap/Col';
|
|
@@ -7186,7 +7186,7 @@ var InfiniteScroll = /** @class */ (function (_super) {
|
|
|
7186
7186
|
|
|
7187
7187
|
var visibilitySensor = createCommonjsModule(function (module, exports) {
|
|
7188
7188
|
(function webpackUniversalModuleDefinition(root, factory) {
|
|
7189
|
-
module.exports = factory(React__default,
|
|
7189
|
+
module.exports = factory(React__default, require$$1);
|
|
7190
7190
|
})(commonjsGlobal, function(__WEBPACK_EXTERNAL_MODULE__1__, __WEBPACK_EXTERNAL_MODULE__2__) {
|
|
7191
7191
|
return /******/ (function(modules) { // webpackBootstrap
|
|
7192
7192
|
/******/ // The module cache
|
|
@@ -8494,7 +8494,7 @@ var _react2 = _interopRequireDefault(React__default);
|
|
|
8494
8494
|
|
|
8495
8495
|
|
|
8496
8496
|
|
|
8497
|
-
var _reactDom2 = _interopRequireDefault(
|
|
8497
|
+
var _reactDom2 = _interopRequireDefault(require$$1);
|
|
8498
8498
|
|
|
8499
8499
|
|
|
8500
8500
|
|
|
@@ -11764,6 +11764,88 @@ function get$1(object, path, defaultValue) {
|
|
|
11764
11764
|
|
|
11765
11765
|
var get_1 = get$1;
|
|
11766
11766
|
|
|
11767
|
+
var AD = function AD(_ref) {
|
|
11768
|
+
var networkID = _ref.networkID,
|
|
11769
|
+
adUnit = _ref.adUnit,
|
|
11770
|
+
sizeMapping = _ref.sizeMapping,
|
|
11771
|
+
className = _ref.className,
|
|
11772
|
+
slotId = _ref.slotId,
|
|
11773
|
+
sizes = _ref.sizes,
|
|
11774
|
+
minInViewPercent = _ref.minInViewPercent,
|
|
11775
|
+
_ref$targeting = _ref.targeting,
|
|
11776
|
+
targeting = _ref$targeting === undefined ? {} : _ref$targeting;
|
|
11777
|
+
|
|
11778
|
+
var _useState = useState(false),
|
|
11779
|
+
_useState2 = slicedToArray(_useState, 2),
|
|
11780
|
+
adRendered = _useState2[0],
|
|
11781
|
+
setAdRendered = _useState2[1];
|
|
11782
|
+
|
|
11783
|
+
var _useState3 = useState(false),
|
|
11784
|
+
_useState4 = slicedToArray(_useState3, 2),
|
|
11785
|
+
showPlaceholder = _useState4[0],
|
|
11786
|
+
setShowPlaceholder = _useState4[1];
|
|
11787
|
+
|
|
11788
|
+
var handleVisibilityChange = debounce_1(function (_ref2) {
|
|
11789
|
+
var event = _ref2.event;
|
|
11790
|
+
|
|
11791
|
+
if (event.inViewPercentage <= 0) {
|
|
11792
|
+
setShowPlaceholder(true);
|
|
11793
|
+
}
|
|
11794
|
+
}, 500);
|
|
11795
|
+
|
|
11796
|
+
return React__default.createElement(
|
|
11797
|
+
React__default.Fragment,
|
|
11798
|
+
null,
|
|
11799
|
+
!showPlaceholder && React__default.createElement(
|
|
11800
|
+
lib_1,
|
|
11801
|
+
{
|
|
11802
|
+
dfpNetworkId: networkID,
|
|
11803
|
+
targetingArguments: targeting,
|
|
11804
|
+
sizeMapping: sizeMapping,
|
|
11805
|
+
lazyLoad: { fetchMarginPercent: 500, renderMarginPercent: 200, mobileScaling: 2.0 } },
|
|
11806
|
+
React__default.createElement(
|
|
11807
|
+
'div',
|
|
11808
|
+
{ className: className },
|
|
11809
|
+
React__default.createElement(lib_2, {
|
|
11810
|
+
slotId: slotId,
|
|
11811
|
+
sizes: sizes,
|
|
11812
|
+
adUnit: adUnit,
|
|
11813
|
+
sizeMapping: sizeMapping,
|
|
11814
|
+
onSlotRender: function onSlotRender(eventData) {
|
|
11815
|
+
setAdRendered(true);
|
|
11816
|
+
},
|
|
11817
|
+
onSlotVisibilityChanged: handleVisibilityChange
|
|
11818
|
+
})
|
|
11819
|
+
)
|
|
11820
|
+
),
|
|
11821
|
+
adRendered && showPlaceholder && React__default.createElement(
|
|
11822
|
+
VisibilitySensor,
|
|
11823
|
+
{
|
|
11824
|
+
partialVisibility: true,
|
|
11825
|
+
onChange: function onChange(isVisible) {
|
|
11826
|
+
if (isVisible) {
|
|
11827
|
+
setShowPlaceholder(false);
|
|
11828
|
+
}
|
|
11829
|
+
} },
|
|
11830
|
+
React__default.createElement(
|
|
11831
|
+
'div',
|
|
11832
|
+
{ style: { height: 'auto' } },
|
|
11833
|
+
'\xA0'
|
|
11834
|
+
)
|
|
11835
|
+
)
|
|
11836
|
+
);
|
|
11837
|
+
};
|
|
11838
|
+
|
|
11839
|
+
AD.propTypes = {
|
|
11840
|
+
networkID: PropTypes.string.isRequired,
|
|
11841
|
+
adUnit: PropTypes.string.isRequired,
|
|
11842
|
+
slotId: PropTypes.string,
|
|
11843
|
+
className: PropTypes.string,
|
|
11844
|
+
sizeMapping: PropTypes.array,
|
|
11845
|
+
sizes: PropTypes.array,
|
|
11846
|
+
minInViewPercent: PropTypes.number
|
|
11847
|
+
};
|
|
11848
|
+
|
|
11767
11849
|
var GridContent = function (_React$Component) {
|
|
11768
11850
|
inherits(GridContent, _React$Component);
|
|
11769
11851
|
|
|
@@ -11982,7 +12064,7 @@ var GridContent = function (_React$Component) {
|
|
|
11982
12064
|
|
|
11983
12065
|
createClass(GridContent, [{
|
|
11984
12066
|
key: 'cardLoader',
|
|
11985
|
-
value: function cardLoader(page, columns, variant, showVideo, VideoPlayer) {
|
|
12067
|
+
value: function cardLoader(page, columns, variant, showVideo, VideoPlayer, showBI, brandInsight) {
|
|
11986
12068
|
var _this2 = this;
|
|
11987
12069
|
|
|
11988
12070
|
var lgVar = Math.floor(12 / columns);
|
|
@@ -12057,13 +12139,33 @@ var GridContent = function (_React$Component) {
|
|
|
12057
12139
|
})
|
|
12058
12140
|
);
|
|
12059
12141
|
}
|
|
12142
|
+
|
|
12143
|
+
var insert = function insert(arr, index$$1, newElement) {
|
|
12144
|
+
return [].concat(toConsumableArray(arr.slice(0, index$$1)), [newElement], toConsumableArray(arr.slice(index$$1)));
|
|
12145
|
+
};
|
|
12146
|
+
var posts = [];
|
|
12147
|
+
if (showBI) {
|
|
12148
|
+
var interval = brandInsight.interval;
|
|
12149
|
+
var data = this.state.data;
|
|
12150
|
+
posts = data;
|
|
12151
|
+
var i = 1;
|
|
12152
|
+
for (var pos = interval; pos <= posts.length;) {
|
|
12153
|
+
brandInsight.targeting.pos = 'article' + i;
|
|
12154
|
+
posts = insert(posts, pos, brandInsight);
|
|
12155
|
+
pos += interval + 1;
|
|
12156
|
+
i++;
|
|
12157
|
+
}
|
|
12158
|
+
} else {
|
|
12159
|
+
posts = this.state.data;
|
|
12160
|
+
}
|
|
12161
|
+
|
|
12060
12162
|
return React__default.createElement(
|
|
12061
12163
|
'div',
|
|
12062
12164
|
{ className: 'grid-container' },
|
|
12063
|
-
|
|
12165
|
+
posts && posts.map(function (row, index$$1) {
|
|
12064
12166
|
var pageNumber = row.pageNumber || _this2.state.page;
|
|
12065
12167
|
var contentCategoryName = row.contentCategory && row.contentCategory.name && _this2.mapping[row.contentCategory.name] ? row.contentCategory.name : 'Articles';
|
|
12066
|
-
var linkHref = _this2.mapping[contentCategoryName] + '/' + row.url.current;
|
|
12168
|
+
var linkHref = row.url && row.url.current ? _this2.mapping[contentCategoryName] + '/' + row.url.current : '';
|
|
12067
12169
|
if (row._type === 'feature') {
|
|
12068
12170
|
if (row.blank || _this2.checkExternalUrl(row.url.current)) {
|
|
12069
12171
|
return React__default.createElement(
|
|
@@ -12123,7 +12225,7 @@ var GridContent = function (_React$Component) {
|
|
|
12123
12225
|
)
|
|
12124
12226
|
)
|
|
12125
12227
|
),
|
|
12126
|
-
showVideo && (
|
|
12228
|
+
showVideo && (posts.length < numberOfItemsBeforeVideo || index$$1 + 1 === numberOfItemsBeforeVideo) && React__default.createElement(VideoPlayer, null),
|
|
12127
12229
|
main_36 && _this2.props.rightItems && (index$$1 + 1) % numberOfItemsBeforeAd === 0 && _this2.renderMobileAd(index$$1, numberOfItemsBeforeAd)
|
|
12128
12230
|
);
|
|
12129
12231
|
} else {
|
|
@@ -12184,10 +12286,24 @@ var GridContent = function (_React$Component) {
|
|
|
12184
12286
|
)
|
|
12185
12287
|
)
|
|
12186
12288
|
),
|
|
12187
|
-
showVideo && (
|
|
12289
|
+
showVideo && (posts.length < numberOfItemsBeforeVideo || index$$1 + 1 === numberOfItemsBeforeVideo) && React__default.createElement(VideoPlayer, null),
|
|
12188
12290
|
main_36 && _this2.props.rightItems && (index$$1 + 1) % numberOfItemsBeforeAd === 0 && _this2.renderMobileAd(index$$1, numberOfItemsBeforeAd)
|
|
12189
12291
|
);
|
|
12190
12292
|
}
|
|
12293
|
+
} else if (row._type === 'BrandInsight' && row.adUnit) {
|
|
12294
|
+
return React__default.createElement(
|
|
12295
|
+
React__default.Fragment,
|
|
12296
|
+
{ key: itemCounter, className: 'brand-insight-wrapper' },
|
|
12297
|
+
React__default.createElement(
|
|
12298
|
+
'div',
|
|
12299
|
+
{ counter: itemCounter++, style: { display: 'flex', flex: '1 0 auto' } },
|
|
12300
|
+
React__default.createElement(
|
|
12301
|
+
Card,
|
|
12302
|
+
{ className: 'content-card ad-wrapper', style: { flexDirection: index$$1 === 0 || index$$1 % 4 === 0 ? 'top' : 'row' } },
|
|
12303
|
+
React__default.createElement(AD, { networkID: row.networkID, adUnit: row.adUnit, targeting: row.targeting, className: row.className, sizes: row.sizes, slotId: row.slotId })
|
|
12304
|
+
)
|
|
12305
|
+
)
|
|
12306
|
+
);
|
|
12191
12307
|
}
|
|
12192
12308
|
return React__default.createElement(
|
|
12193
12309
|
React__default.Fragment,
|
|
@@ -12246,7 +12362,7 @@ var GridContent = function (_React$Component) {
|
|
|
12246
12362
|
)
|
|
12247
12363
|
)
|
|
12248
12364
|
),
|
|
12249
|
-
showVideo && (
|
|
12365
|
+
showVideo && (posts.length < numberOfItemsBeforeVideo || index$$1 + 1 === numberOfItemsBeforeVideo) && React__default.createElement(VideoPlayer, null),
|
|
12250
12366
|
main_36 && _this2.props.rightItems && (index$$1 + 1) % numberOfItemsBeforeAd === 0 && _this2.renderMobileAd(index$$1, numberOfItemsBeforeAd)
|
|
12251
12367
|
);
|
|
12252
12368
|
})
|
|
@@ -12263,7 +12379,9 @@ var GridContent = function (_React$Component) {
|
|
|
12263
12379
|
autoScroll = _props.autoScroll,
|
|
12264
12380
|
page = _props.page,
|
|
12265
12381
|
showVideo = _props.showVideo,
|
|
12266
|
-
VideoPlayer = _props.VideoPlayer
|
|
12382
|
+
VideoPlayer = _props.VideoPlayer,
|
|
12383
|
+
showBI = _props.showBI,
|
|
12384
|
+
brandInsight = _props.brandInsight;
|
|
12267
12385
|
|
|
12268
12386
|
|
|
12269
12387
|
return React__default.createElement(
|
|
@@ -12275,7 +12393,7 @@ var GridContent = function (_React$Component) {
|
|
|
12275
12393
|
React__default.createElement(
|
|
12276
12394
|
Container,
|
|
12277
12395
|
null,
|
|
12278
|
-
this.cardLoader(page, columns, variant, showVideo, VideoPlayer)
|
|
12396
|
+
this.cardLoader(page, columns, variant, showVideo, VideoPlayer, showBI, brandInsight)
|
|
12279
12397
|
)
|
|
12280
12398
|
) : React__default.createElement(
|
|
12281
12399
|
React__default.Fragment,
|
|
@@ -12283,7 +12401,7 @@ var GridContent = function (_React$Component) {
|
|
|
12283
12401
|
React__default.createElement(
|
|
12284
12402
|
Container,
|
|
12285
12403
|
null,
|
|
12286
|
-
this.cardLoader(page, columns, variant, showVideo, VideoPlayer)
|
|
12404
|
+
this.cardLoader(page, columns, variant, showVideo, VideoPlayer, showBI, brandInsight)
|
|
12287
12405
|
),
|
|
12288
12406
|
React__default.createElement(
|
|
12289
12407
|
'div',
|
|
@@ -16888,88 +17006,6 @@ var HamMagazine = function HamMagazine(props) {
|
|
|
16888
17006
|
);
|
|
16889
17007
|
};
|
|
16890
17008
|
|
|
16891
|
-
var AD = function AD(_ref) {
|
|
16892
|
-
var networkID = _ref.networkID,
|
|
16893
|
-
adUnit = _ref.adUnit,
|
|
16894
|
-
sizeMapping = _ref.sizeMapping,
|
|
16895
|
-
className = _ref.className,
|
|
16896
|
-
slotId = _ref.slotId,
|
|
16897
|
-
sizes = _ref.sizes,
|
|
16898
|
-
minInViewPercent = _ref.minInViewPercent,
|
|
16899
|
-
_ref$targeting = _ref.targeting,
|
|
16900
|
-
targeting = _ref$targeting === undefined ? {} : _ref$targeting;
|
|
16901
|
-
|
|
16902
|
-
var _useState = useState(false),
|
|
16903
|
-
_useState2 = slicedToArray(_useState, 2),
|
|
16904
|
-
adRendered = _useState2[0],
|
|
16905
|
-
setAdRendered = _useState2[1];
|
|
16906
|
-
|
|
16907
|
-
var _useState3 = useState(false),
|
|
16908
|
-
_useState4 = slicedToArray(_useState3, 2),
|
|
16909
|
-
showPlaceholder = _useState4[0],
|
|
16910
|
-
setShowPlaceholder = _useState4[1];
|
|
16911
|
-
|
|
16912
|
-
var handleVisibilityChange = debounce_1(function (_ref2) {
|
|
16913
|
-
var event = _ref2.event;
|
|
16914
|
-
|
|
16915
|
-
if (event.inViewPercentage <= 0) {
|
|
16916
|
-
setShowPlaceholder(true);
|
|
16917
|
-
}
|
|
16918
|
-
}, 500);
|
|
16919
|
-
|
|
16920
|
-
return React__default.createElement(
|
|
16921
|
-
React__default.Fragment,
|
|
16922
|
-
null,
|
|
16923
|
-
!showPlaceholder && React__default.createElement(
|
|
16924
|
-
lib_1,
|
|
16925
|
-
{
|
|
16926
|
-
dfpNetworkId: networkID,
|
|
16927
|
-
targetingArguments: targeting,
|
|
16928
|
-
sizeMapping: sizeMapping,
|
|
16929
|
-
lazyLoad: { fetchMarginPercent: 500, renderMarginPercent: 200, mobileScaling: 2.0 } },
|
|
16930
|
-
React__default.createElement(
|
|
16931
|
-
'div',
|
|
16932
|
-
{ className: className },
|
|
16933
|
-
React__default.createElement(lib_2, {
|
|
16934
|
-
slotId: slotId,
|
|
16935
|
-
sizes: sizes,
|
|
16936
|
-
adUnit: adUnit,
|
|
16937
|
-
sizeMapping: sizeMapping,
|
|
16938
|
-
onSlotRender: function onSlotRender(eventData) {
|
|
16939
|
-
setAdRendered(true);
|
|
16940
|
-
},
|
|
16941
|
-
onSlotVisibilityChanged: handleVisibilityChange
|
|
16942
|
-
})
|
|
16943
|
-
)
|
|
16944
|
-
),
|
|
16945
|
-
adRendered && showPlaceholder && React__default.createElement(
|
|
16946
|
-
VisibilitySensor,
|
|
16947
|
-
{
|
|
16948
|
-
partialVisibility: true,
|
|
16949
|
-
onChange: function onChange(isVisible) {
|
|
16950
|
-
if (isVisible) {
|
|
16951
|
-
setShowPlaceholder(false);
|
|
16952
|
-
}
|
|
16953
|
-
} },
|
|
16954
|
-
React__default.createElement(
|
|
16955
|
-
'div',
|
|
16956
|
-
{ style: { height: 'auto' } },
|
|
16957
|
-
'\xA0'
|
|
16958
|
-
)
|
|
16959
|
-
)
|
|
16960
|
-
);
|
|
16961
|
-
};
|
|
16962
|
-
|
|
16963
|
-
AD.propTypes = {
|
|
16964
|
-
networkID: PropTypes.string.isRequired,
|
|
16965
|
-
adUnit: PropTypes.string.isRequired,
|
|
16966
|
-
slotId: PropTypes.string,
|
|
16967
|
-
className: PropTypes.string,
|
|
16968
|
-
sizeMapping: PropTypes.array,
|
|
16969
|
-
sizes: PropTypes.array,
|
|
16970
|
-
minInViewPercent: PropTypes.number
|
|
16971
|
-
};
|
|
16972
|
-
|
|
16973
17009
|
var AD728x90 = function AD728x90(_ref) {
|
|
16974
17010
|
var networkID = _ref.networkID,
|
|
16975
17011
|
adUnit = _ref.adUnit,
|
|
@@ -29937,7 +29973,7 @@ var ConferenceArticleCard = function ConferenceArticleCard(props) {
|
|
|
29937
29973
|
{ className: 'conference-media' },
|
|
29938
29974
|
React__default.createElement(
|
|
29939
29975
|
'a',
|
|
29940
|
-
{ className: 'img-wrapper', href: '/view/
|
|
29976
|
+
{ className: 'img-wrapper', href: '/view/' + (data.url ? data.url.current : '') },
|
|
29941
29977
|
React__default.createElement('img', {
|
|
29942
29978
|
className: 'mr-3 img-fluid',
|
|
29943
29979
|
src: data.thumbnail && urlFor(data.thumbnail.asset).width(350).url(),
|
|
@@ -29949,7 +29985,7 @@ var ConferenceArticleCard = function ConferenceArticleCard(props) {
|
|
|
29949
29985
|
{ className: 'media-body' },
|
|
29950
29986
|
React__default.createElement(
|
|
29951
29987
|
'a',
|
|
29952
|
-
{ href: '/view/
|
|
29988
|
+
{ href: '/view/' + (data.url ? data.url.current : '') },
|
|
29953
29989
|
React__default.createElement(
|
|
29954
29990
|
'h4',
|
|
29955
29991
|
{ className: 'conf-media__card-title' },
|