@mjhls/mjh-framework 1.0.41 → 1.0.43
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 +170 -170
- package/dist/index.es.js +26 -49
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +25 -48
- package/dist/index.js.map +1 -1
- package/package.json +78 -78
package/README.md
CHANGED
|
@@ -1,170 +1,170 @@
|
|
|
1
|
-
# mjh-framework v. 1.0.
|
|
2
|
-
|
|
3
|
-
> Foundation Framework
|
|
4
|
-
|
|
5
|
-
[](https://www.npmjs.com/package/mjh-framework) [](https://standardjs.com)
|
|
6
|
-
|
|
7
|
-
## Install
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
npm install --save @mjhls/mjh-framework
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
## Usage
|
|
14
|
-
|
|
15
|
-
```jsx
|
|
16
|
-
import React, { Component } from 'react'
|
|
17
|
-
|
|
18
|
-
import { NavMagazine, DeckQueue } from 'mjh-framework'
|
|
19
|
-
|
|
20
|
-
export default class App extends Component {
|
|
21
|
-
render() {
|
|
22
|
-
return (
|
|
23
|
-
<div>
|
|
24
|
-
<NavMagazine />
|
|
25
|
-
<DeckQueue />
|
|
26
|
-
</div>
|
|
27
|
-
)
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
## Publish new updates to the npm registry
|
|
33
|
-
|
|
34
|
-
```bash
|
|
35
|
-
npm publish
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
## For getting updates in the template without publishing each time a change is made in the framework
|
|
39
|
-
|
|
40
|
-
Link react and react-dom of the template repo, so that it can be used by the framework.
|
|
41
|
-
This is to avoid the error arising due to multiple instances of React.
|
|
42
|
-
|
|
43
|
-
```bash
|
|
44
|
-
cd ../mjh-template/node_modules/react
|
|
45
|
-
|
|
46
|
-
yarn link
|
|
47
|
-
|
|
48
|
-
cd ../react-dom
|
|
49
|
-
|
|
50
|
-
yarn link
|
|
51
|
-
|
|
52
|
-
cd ../../../mjh-framework
|
|
53
|
-
|
|
54
|
-
yarn link react && yarn link react-dom
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
Link the framework repo so that it can be used in the template
|
|
58
|
-
|
|
59
|
-
```bash
|
|
60
|
-
npm link
|
|
61
|
-
|
|
62
|
-
cd ../mjh-template
|
|
63
|
-
|
|
64
|
-
npm link @mjhls/mjh-framework
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
## Components and "props"
|
|
68
|
-
|
|
69
|
-
### Deck Components
|
|
70
|
-
|
|
71
|
-
- #### DeckContent
|
|
72
|
-
|
|
73
|
-
##### Props
|
|
74
|
-
|
|
75
|
-
- mapping
|
|
76
|
-
- dataRecord
|
|
77
|
-
- query
|
|
78
|
-
- params
|
|
79
|
-
- pointer
|
|
80
|
-
- pointerArray
|
|
81
|
-
- defaultImage
|
|
82
|
-
|
|
83
|
-
- #### DeckQueue
|
|
84
|
-
##### Props
|
|
85
|
-
- page
|
|
86
|
-
- dataRecord
|
|
87
|
-
- query
|
|
88
|
-
- params
|
|
89
|
-
- pointer
|
|
90
|
-
- pointerArray
|
|
91
|
-
|
|
92
|
-
### Layout Components
|
|
93
|
-
|
|
94
|
-
- #### Column1
|
|
95
|
-
- #### Column2
|
|
96
|
-
##### Props
|
|
97
|
-
- rightItems
|
|
98
|
-
- #### Column3
|
|
99
|
-
##### Props
|
|
100
|
-
- leftItems
|
|
101
|
-
- rightItems
|
|
102
|
-
##### Common Props (Column1, Column2, Column3)
|
|
103
|
-
- title
|
|
104
|
-
- children
|
|
105
|
-
- #### Header
|
|
106
|
-
##### Props
|
|
107
|
-
- title
|
|
108
|
-
- keyword
|
|
109
|
-
- description
|
|
110
|
-
- #### LeftNav
|
|
111
|
-
##### Props
|
|
112
|
-
- leftItems
|
|
113
|
-
- #### AccordionPanel
|
|
114
|
-
##### Props
|
|
115
|
-
- accordionClassName
|
|
116
|
-
- data
|
|
117
|
-
|
|
118
|
-
### Navigation Components
|
|
119
|
-
|
|
120
|
-
- #### NavMagazine
|
|
121
|
-
##### Props
|
|
122
|
-
- logo
|
|
123
|
-
- dataObject
|
|
124
|
-
- #### NavNative
|
|
125
|
-
##### Props
|
|
126
|
-
- logo
|
|
127
|
-
- dataObject
|
|
128
|
-
- #### NavNormal
|
|
129
|
-
##### Props
|
|
130
|
-
- logo
|
|
131
|
-
- dataObject
|
|
132
|
-
- variant
|
|
133
|
-
- #### NavDvm
|
|
134
|
-
##### Props
|
|
135
|
-
- logo
|
|
136
|
-
- dataObject
|
|
137
|
-
- subNavHeads
|
|
138
|
-
|
|
139
|
-
### Template Components
|
|
140
|
-
|
|
141
|
-
- #### TemplateNormal
|
|
142
|
-
##### Props
|
|
143
|
-
- config
|
|
144
|
-
- title
|
|
145
|
-
- keywords
|
|
146
|
-
- description
|
|
147
|
-
- website
|
|
148
|
-
|
|
149
|
-
### Ad Components
|
|
150
|
-
|
|
151
|
-
- #### AD300x250
|
|
152
|
-
- #### AD300x250x600
|
|
153
|
-
- #### AD728x90
|
|
154
|
-
##### Common Props
|
|
155
|
-
- networkID
|
|
156
|
-
- adUnit
|
|
157
|
-
|
|
158
|
-
### Serializers
|
|
159
|
-
|
|
160
|
-
- #### getSerializers (function)
|
|
161
|
-
##### arguments
|
|
162
|
-
- client
|
|
163
|
-
##### types
|
|
164
|
-
- youtube
|
|
165
|
-
- figure
|
|
166
|
-
- slideshow
|
|
167
|
-
|
|
168
|
-
## License
|
|
169
|
-
|
|
170
|
-
MIT © [mjh-framework](https://github.com/mjh-framework)
|
|
1
|
+
# mjh-framework v. 1.0.42
|
|
2
|
+
|
|
3
|
+
> Foundation Framework
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/mjh-framework) [](https://standardjs.com)
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install --save @mjhls/mjh-framework
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
```jsx
|
|
16
|
+
import React, { Component } from 'react'
|
|
17
|
+
|
|
18
|
+
import { NavMagazine, DeckQueue } from 'mjh-framework'
|
|
19
|
+
|
|
20
|
+
export default class App extends Component {
|
|
21
|
+
render() {
|
|
22
|
+
return (
|
|
23
|
+
<div>
|
|
24
|
+
<NavMagazine />
|
|
25
|
+
<DeckQueue />
|
|
26
|
+
</div>
|
|
27
|
+
)
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Publish new updates to the npm registry
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
npm publish
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## For getting updates in the template without publishing each time a change is made in the framework
|
|
39
|
+
|
|
40
|
+
Link react and react-dom of the template repo, so that it can be used by the framework.
|
|
41
|
+
This is to avoid the error arising due to multiple instances of React.
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
cd ../mjh-template/node_modules/react
|
|
45
|
+
|
|
46
|
+
yarn link
|
|
47
|
+
|
|
48
|
+
cd ../react-dom
|
|
49
|
+
|
|
50
|
+
yarn link
|
|
51
|
+
|
|
52
|
+
cd ../../../mjh-framework
|
|
53
|
+
|
|
54
|
+
yarn link react && yarn link react-dom
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
Link the framework repo so that it can be used in the template
|
|
58
|
+
|
|
59
|
+
```bash
|
|
60
|
+
npm link
|
|
61
|
+
|
|
62
|
+
cd ../mjh-template
|
|
63
|
+
|
|
64
|
+
npm link @mjhls/mjh-framework
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Components and "props"
|
|
68
|
+
|
|
69
|
+
### Deck Components
|
|
70
|
+
|
|
71
|
+
- #### DeckContent
|
|
72
|
+
|
|
73
|
+
##### Props
|
|
74
|
+
|
|
75
|
+
- mapping
|
|
76
|
+
- dataRecord
|
|
77
|
+
- query
|
|
78
|
+
- params
|
|
79
|
+
- pointer
|
|
80
|
+
- pointerArray
|
|
81
|
+
- defaultImage
|
|
82
|
+
|
|
83
|
+
- #### DeckQueue
|
|
84
|
+
##### Props
|
|
85
|
+
- page
|
|
86
|
+
- dataRecord
|
|
87
|
+
- query
|
|
88
|
+
- params
|
|
89
|
+
- pointer
|
|
90
|
+
- pointerArray
|
|
91
|
+
|
|
92
|
+
### Layout Components
|
|
93
|
+
|
|
94
|
+
- #### Column1
|
|
95
|
+
- #### Column2
|
|
96
|
+
##### Props
|
|
97
|
+
- rightItems
|
|
98
|
+
- #### Column3
|
|
99
|
+
##### Props
|
|
100
|
+
- leftItems
|
|
101
|
+
- rightItems
|
|
102
|
+
##### Common Props (Column1, Column2, Column3)
|
|
103
|
+
- title
|
|
104
|
+
- children
|
|
105
|
+
- #### Header
|
|
106
|
+
##### Props
|
|
107
|
+
- title
|
|
108
|
+
- keyword
|
|
109
|
+
- description
|
|
110
|
+
- #### LeftNav
|
|
111
|
+
##### Props
|
|
112
|
+
- leftItems
|
|
113
|
+
- #### AccordionPanel
|
|
114
|
+
##### Props
|
|
115
|
+
- accordionClassName
|
|
116
|
+
- data
|
|
117
|
+
|
|
118
|
+
### Navigation Components
|
|
119
|
+
|
|
120
|
+
- #### NavMagazine
|
|
121
|
+
##### Props
|
|
122
|
+
- logo
|
|
123
|
+
- dataObject
|
|
124
|
+
- #### NavNative
|
|
125
|
+
##### Props
|
|
126
|
+
- logo
|
|
127
|
+
- dataObject
|
|
128
|
+
- #### NavNormal
|
|
129
|
+
##### Props
|
|
130
|
+
- logo
|
|
131
|
+
- dataObject
|
|
132
|
+
- variant
|
|
133
|
+
- #### NavDvm
|
|
134
|
+
##### Props
|
|
135
|
+
- logo
|
|
136
|
+
- dataObject
|
|
137
|
+
- subNavHeads
|
|
138
|
+
|
|
139
|
+
### Template Components
|
|
140
|
+
|
|
141
|
+
- #### TemplateNormal
|
|
142
|
+
##### Props
|
|
143
|
+
- config
|
|
144
|
+
- title
|
|
145
|
+
- keywords
|
|
146
|
+
- description
|
|
147
|
+
- website
|
|
148
|
+
|
|
149
|
+
### Ad Components
|
|
150
|
+
|
|
151
|
+
- #### AD300x250
|
|
152
|
+
- #### AD300x250x600
|
|
153
|
+
- #### AD728x90
|
|
154
|
+
##### Common Props
|
|
155
|
+
- networkID
|
|
156
|
+
- adUnit
|
|
157
|
+
|
|
158
|
+
### Serializers
|
|
159
|
+
|
|
160
|
+
- #### getSerializers (function)
|
|
161
|
+
##### arguments
|
|
162
|
+
- client
|
|
163
|
+
##### types
|
|
164
|
+
- youtube
|
|
165
|
+
- figure
|
|
166
|
+
- slideshow
|
|
167
|
+
|
|
168
|
+
## License
|
|
169
|
+
|
|
170
|
+
MIT © [mjh-framework](https://github.com/mjh-framework)
|
package/dist/index.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React__default, { Component, useState,
|
|
1
|
+
import React__default, { Component, useState, createContext, createElement } from 'react';
|
|
2
2
|
import Row from 'react-bootstrap/Row';
|
|
3
3
|
import Col from 'react-bootstrap/Col';
|
|
4
4
|
import Card from 'react-bootstrap/Card';
|
|
@@ -674,8 +674,8 @@ var DeckContent = function (_React$Component) {
|
|
|
674
674
|
}, _this.renderCardImage = function (row, page) {
|
|
675
675
|
if (row.thumbnail && row.thumbnail.asset) {
|
|
676
676
|
return row.thumbnail.asset.url;
|
|
677
|
-
|
|
678
|
-
|
|
677
|
+
/*} else if (page === 'videos' && row.youtubeURL) {
|
|
678
|
+
return `https://img.youtube.com/vi/${getYouTubeId(row.youtubeURL)}/0.jpg`*/
|
|
679
679
|
} else {
|
|
680
680
|
return _this.defaultImage;
|
|
681
681
|
}
|
|
@@ -5622,14 +5622,15 @@ var main_49 = main.withOrientationChange;
|
|
|
5622
5622
|
var AD728x90 = function AD728x90(_ref) {
|
|
5623
5623
|
var networkID = _ref.networkID,
|
|
5624
5624
|
adUnit = _ref.adUnit,
|
|
5625
|
-
slotId = _ref.slotId
|
|
5626
|
-
|
|
5625
|
+
slotId = _ref.slotId,
|
|
5626
|
+
_ref$targeting = _ref.targeting,
|
|
5627
|
+
targeting = _ref$targeting === undefined ? { desktop: {}, mobile: { post: 'mobile1' } } : _ref$targeting;
|
|
5627
5628
|
|
|
5628
|
-
|
|
5629
|
+
console.log('targeting:', targeting);
|
|
5629
5630
|
|
|
5630
5631
|
return React__default.createElement(
|
|
5631
5632
|
lib_1,
|
|
5632
|
-
{ dfpNetworkId: networkID, sizeMapping: [{ viewport: [1024, 768], sizes: [[728, 90]] }, { viewport: [640, 480], sizes: [[320, 50], [300, 50]] }], lazyLoad: { fetchMarginPercent: 500, renderMarginPercent: 200, mobileScaling: 2.0 }
|
|
5633
|
+
{ dfpNetworkId: networkID, targetingArguments: targeting.desktop, sizeMapping: [{ viewport: [1024, 768], sizes: [[728, 90]] }, { viewport: [640, 480], sizes: [[320, 50], [300, 50]] }], lazyLoad: { fetchMarginPercent: 500, renderMarginPercent: 200, mobileScaling: 2.0 } },
|
|
5633
5634
|
React__default.createElement(
|
|
5634
5635
|
main_2,
|
|
5635
5636
|
null,
|
|
@@ -5639,14 +5640,7 @@ var AD728x90 = function AD728x90(_ref) {
|
|
|
5639
5640
|
React__default.createElement(lib_2, {
|
|
5640
5641
|
slotId: slotId,
|
|
5641
5642
|
sizes: [[728, 90]],
|
|
5642
|
-
adUnit: adUnit
|
|
5643
|
-
sizeMapping: [{ viewport: [1024, 768], sizes: [[728, 90]] }],
|
|
5644
|
-
onSlotRender: function onSlotRender(eventData) {
|
|
5645
|
-
return console.log('AD728x90 rendered:', eventData);
|
|
5646
|
-
},
|
|
5647
|
-
onSlotIsViewable: function onSlotIsViewable(eventData) {
|
|
5648
|
-
console.log('AD728x90 vieable:', eventData);
|
|
5649
|
-
}
|
|
5643
|
+
adUnit: adUnit
|
|
5650
5644
|
})
|
|
5651
5645
|
)
|
|
5652
5646
|
),
|
|
@@ -5659,20 +5653,8 @@ var AD728x90 = function AD728x90(_ref) {
|
|
|
5659
5653
|
React__default.createElement(lib_2, {
|
|
5660
5654
|
slotId: slotId,
|
|
5661
5655
|
sizes: [[300, 50], [320, 50]],
|
|
5662
|
-
sizeMapping: [{ viewport: [767, 480], sizes: [[320, 50], [300, 50]] }],
|
|
5663
5656
|
adUnit: adUnit,
|
|
5664
|
-
targetingArguments:
|
|
5665
|
-
onSlotRender: function onSlotRender(eventData) {
|
|
5666
|
-
return console.log('AD300x50 rendered:', eventData);
|
|
5667
|
-
},
|
|
5668
|
-
onSlotVisibilityChanged: function onSlotVisibilityChanged(dfpEventData) {
|
|
5669
|
-
if (dfpEventData.event.inViewPercentage < minInViewPercent) {
|
|
5670
|
-
lib_3.refresh(slotId);
|
|
5671
|
-
}
|
|
5672
|
-
},
|
|
5673
|
-
onSlotIsViewable: function onSlotIsViewable(eventData) {
|
|
5674
|
-
console.log('AD300x50 viewable:', eventData);
|
|
5675
|
-
}
|
|
5657
|
+
targetingArguments: targeting.mobile
|
|
5676
5658
|
})
|
|
5677
5659
|
)
|
|
5678
5660
|
)
|
|
@@ -5704,6 +5686,11 @@ var TemplateNormal = function TemplateNormal(props) {
|
|
|
5704
5686
|
}
|
|
5705
5687
|
};
|
|
5706
5688
|
|
|
5689
|
+
var adTargeting = { desktop: {}, mobile: {} };
|
|
5690
|
+
if (horizontalAD.targeting) {
|
|
5691
|
+
adTargeting = horizontalAD.targeting;
|
|
5692
|
+
}
|
|
5693
|
+
|
|
5707
5694
|
function layout() {
|
|
5708
5695
|
switch (config.columns) {
|
|
5709
5696
|
case '1':
|
|
@@ -5737,7 +5724,7 @@ var TemplateNormal = function TemplateNormal(props) {
|
|
|
5737
5724
|
horizontalAD && horizontalAD.networkID && horizontalAD.adUnit && React__default.createElement(
|
|
5738
5725
|
Container,
|
|
5739
5726
|
null,
|
|
5740
|
-
React__default.createElement(AD728x90, { networkID: horizontalAD.networkID, adUnit: horizontalAD.adUnit })
|
|
5727
|
+
React__default.createElement(AD728x90, { networkID: horizontalAD.networkID, adUnit: horizontalAD.adUnit, targeting: adTargeting })
|
|
5741
5728
|
),
|
|
5742
5729
|
React__default.createElement(
|
|
5743
5730
|
Container,
|
|
@@ -5755,19 +5742,13 @@ var AD = function AD(_ref) {
|
|
|
5755
5742
|
slotId = _ref.slotId,
|
|
5756
5743
|
sizes = _ref.sizes,
|
|
5757
5744
|
minInViewPercent = _ref.minInViewPercent,
|
|
5758
|
-
|
|
5745
|
+
_ref$targeting = _ref.targeting,
|
|
5746
|
+
targeting = _ref$targeting === undefined ? { desktop: {} } : _ref$targeting;
|
|
5759
5747
|
|
|
5760
5748
|
|
|
5761
|
-
var targetingArguemnts = {};
|
|
5762
|
-
if (keywords) {
|
|
5763
|
-
targetingArguemnts = {
|
|
5764
|
-
'pos': keywords
|
|
5765
|
-
};
|
|
5766
|
-
}
|
|
5767
|
-
|
|
5768
5749
|
return React__default.createElement(
|
|
5769
5750
|
lib_1,
|
|
5770
|
-
{ dfpNetworkId: networkID, sizeMapping: sizeMapping, lazyLoad: { fetchMarginPercent: 500, renderMarginPercent: 200, mobileScaling: 2.0 } },
|
|
5751
|
+
{ dfpNetworkId: networkID, targetingArguments: targeting.desktop, sizeMapping: sizeMapping, lazyLoad: { fetchMarginPercent: 500, renderMarginPercent: 200, mobileScaling: 2.0 } },
|
|
5771
5752
|
React__default.createElement(
|
|
5772
5753
|
'div',
|
|
5773
5754
|
{ className: className },
|
|
@@ -5775,14 +5756,7 @@ var AD = function AD(_ref) {
|
|
|
5775
5756
|
slotId: slotId,
|
|
5776
5757
|
sizes: sizes,
|
|
5777
5758
|
adUnit: adUnit,
|
|
5778
|
-
sizeMapping: sizeMapping
|
|
5779
|
-
targetingArguments: targetingArguemnts,
|
|
5780
|
-
onSlotRender: function onSlotRender(eventData) {
|
|
5781
|
-
return console.log('AD ' + className + ' rendered:', eventData);
|
|
5782
|
-
},
|
|
5783
|
-
onSlotIsViewable: function onSlotIsViewable(eventData) {
|
|
5784
|
-
console.log('AD ' + className + ' viewable:', eventData);
|
|
5785
|
-
}
|
|
5759
|
+
sizeMapping: sizeMapping
|
|
5786
5760
|
})
|
|
5787
5761
|
)
|
|
5788
5762
|
);
|
|
@@ -5800,19 +5774,22 @@ AD.propTypes = {
|
|
|
5800
5774
|
|
|
5801
5775
|
var AD300x250 = function AD300x250(_ref) {
|
|
5802
5776
|
var networkID = _ref.networkID,
|
|
5803
|
-
adUnit = _ref.adUnit
|
|
5777
|
+
adUnit = _ref.adUnit,
|
|
5778
|
+
targeting = _ref.targeting;
|
|
5804
5779
|
|
|
5805
|
-
return React__default.createElement(AD, { networkID: networkID, adUnit: adUnit, className: 'AD300x250', sizes: [[300, 250]] });
|
|
5780
|
+
return React__default.createElement(AD, { networkID: networkID, adUnit: adUnit, targeting: targeting, className: 'AD300x250', sizes: [[300, 250]] });
|
|
5806
5781
|
};
|
|
5807
5782
|
|
|
5808
5783
|
var AD300x250x600 = function AD300x250x600(_ref) {
|
|
5809
5784
|
var networkID = _ref.networkID,
|
|
5810
|
-
adUnit = _ref.adUnit
|
|
5785
|
+
adUnit = _ref.adUnit,
|
|
5786
|
+
targeting = _ref.targeting;
|
|
5811
5787
|
|
|
5812
5788
|
return React__default.createElement(AD, {
|
|
5813
5789
|
networkID: networkID,
|
|
5814
5790
|
adUnit: adUnit,
|
|
5815
5791
|
className: 'AD300x250',
|
|
5792
|
+
targeting: targeting,
|
|
5816
5793
|
sizes: [[300, 250], [300, 600]]
|
|
5817
5794
|
});
|
|
5818
5795
|
};
|